@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&display=swap'); * { font-family: "Poppins", sans-serif; margin: 0; padding: 0; box-sizing: border-box; } html, body{ height:100%; overflow:hidden; /* cegah scroll di */ } .layout { display: flex; } .sidebar { width: 270px; height: 100vh; position: fixed; top: 0; /* nempel di atas */ left: 0; bottom: 0; /* penuh tinggi */ overflow-y: auto; /* kalau menu panjang */ z-index: 1000; } .sidebar.collapsed { width: 90px; } /* ---- Nonaktifkan auto-expand on hover ---- */ .sidebar.collapsed:hover { width: var(--sidebar-collapsed); /* tetap 90 px */ } .main-content{ margin-left:var(--sidebar-expanded); transition:margin-left .4s ease; position: absolute; overflow-y:auto; /* hanya vertikal yang bisa di-scroll */ overflow-x:hidden; height: 100%; } /* bila sidebar punya class collapsed */ .sidebar.collapsed ~ .main-content{ margin-left:var(--sidebar-collapsed); } :root { /* Light theme colors */ --color-text-primary: #1F2936; --color-text-placeholder: #798EAE; --color-bg-primary: #f9fafb; --color-bg-secondary: #ECECFD; --color-bg-sidebar: #FFFFFF; --color-border-hr: #E2E8F0; --color-hover-primary: #695CFE; --color-hover-secondary: #e2e2fb; --color-shadow: rgba(0, 0, 0, 0.05); --sidebar-expanded:270px; --sidebar-collapsed:90px; } body.dark-theme { /* Dark theme colors */ --color-text-primary: #F1F5F9; --color-text-placeholder: #A6B7D2; --color-bg-primary: #111827; --color-bg-secondary: #1f2937; --color-bg-sidebar: #3D4859; --color-border-hr: #3B475C; --color-hover-secondary: #48566a; --color-shadow: rgba(0, 0, 0, 0.3); } body { background: var(--color-bg-primary); margin: 0; } .sidebar { position: sticky; top: 0; height: 100vh; width: 270px; display: flex; flex-direction: column; flex-shrink: 0; background: var(--color-bg-sidebar); border-right: 1px solid var(--color-border-hr); box-shadow: 0 3px 9px var(--color-shadow); transition: width 0.4s ease; } /* Main Content */ .main-content { margin-left: 260px; /* lebar sidebar */ padding: 2rem; background-color: #f9f9f9; min-height: 100vh; font-family: 'Poppins', sans-serif; } .main-header h1 { font-size: 2rem; margin-bottom: 0.5rem; } .main-header p { color: #555; margin-bottom: 2rem; } .articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .article-card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); transition: transform 0.2s ease; } .article-card:hover { transform: translateY(-4px); } .article-title { font-size: 1.25rem; margin-bottom: 0.5rem; } .article-meta { font-size: 0.875rem; color: #888; margin-bottom: 1rem; } .article-content { font-size: 1rem; color: #333; text-align: justify; } .read-more { display: inline-block; margin-top: 1rem; color: #007bff; text-decoration: none; } .read-more:hover { text-decoration: underline; } .org-section-title-NEWS { font-family: 'Poppins', sans-serif; font-size: 2.25rem; font-weight: 700; letter-spacing: 0.5px; text-align: center; margin: .1rem 0 1.1rem; margin-bottom: .1rem; color: #1F2936; display: flex; align-items: center; justify-content: center; gap: 1rem; } /* garis kiri-kanan */ .org-section-title-NEWS::before, .org-section-title-NEWS::after { content: ""; flex: 1; height: 4px; background: #f2a900; border-radius: 2px; } /* mode terang ikut variabel tema */ body:not(.dark-theme) .org-section-title-NEWS{ color:#1F2936; } .sidebar.collapsed { width: 90px; } .sidebar .sidebar-header { display: flex; padding: 20px 18px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border-hr); } .sidebar-header .header-logo { width: 80%; object-fit: cover; display: block; transition: opacity 0.4s ease; } .sidebar.collapsed .sidebar-header .header-logo { opacity: 0; pointer-events: none; } .sidebar-header .sidebar-toggle { height: 40px; width: 40px; border: none; cursor: pointer; display: flex; align-items: center; justify-content:center; border-radius: 8px; color: var(--color-bg-secondary); background: var(--color-bg-secondary); transition: 0.4s ease; } .sidebar.collapsed .sidebar-header .sidebar-toggle { height: 40px; width: 40px; border: none; position: absolute; right: 18px; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--color-text-primary); background: var(--color-bg-primary); transition: 0.4s ease; margin-right: 2px; margin-top: 6px; padding: 25px; } /* ====== IKON PUTIH SAAT SIDEBAR TERBUKA (default & hover) ====== */ .sidebar:not(.collapsed) .sidebar-header .sidebar-toggle span{ color:#fff !important; /* pastikan override aturan sebelumnya */ } /* ====== IKON IKUT TEMA SAAT SIDEBAR COLLAPSED ====== */ .sidebar.collapsed .sidebar-header .sidebar-toggle span{ color:var(--color-text-secondary) !important; } /* ====== HOVER EFFECT (opsional, sama di kedua mode) ====== */ .sidebar-header .sidebar-toggle:hover{ background:var(--color-hover-primary); } .sidebar-header .sidebar-toggle span { font-size: 1.75rem; transition: transform 0.4s ease; } .sidebar.collapsed .sidebar-toggle span { transform: rotate(180deg); } .sidebar .sidebar-content { padding: 20px 18px; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: var(--color-bg-secondary) transparent; } .sidebar-content .search-form { min-width: 45px; height: 45px; border-radius: 8px; display: flex; padding: 0 15px; margin: 5px 0 20px; align-items: center; gap: 10px; white-space: nowrap; background: var(--color-bg-secondary); transition: 0.4 ease ; justify-content: center; } /* ——— Ikon kaca pembesar di kotak pencarian ——— */ .sidebar-content .search-form span { color: var(--color-text-primary); /* ikut warna teks utama */ transition: color .3s ease; /* animasi halus saat toggle tema */ } .sidebar.collapsed .sidebar-content .search-form span { margin-left: 18px; } .sidebar.collapsed .sidebar-content .search-form:hover { cursor: pointer; } .sidebar-content .search-form:focus-within { background: var(--color-hover-secondary); } .search-form input { border: none; background: none; outline: none; font-size: 1rem; width: 100%; margin-bottom: 10px; margin-left: 10px; line-height: 1.2; padding: 10px 0; color: var(--color-text-primary); padding-top: 20px; } .search-form input::placeholder { color: var(--color-text-placeholder); } .sidebar-content .menu-list { list-style: none; } .menu-list .menu-link { text-decoration: none; display: flex; align-items: center; gap: 12px; white-space: nowrap; padding: 12px 15px; border-radius: 8px; color: var(--color-text-primary); transition: 0.3s ease; } .menu-link .menu-label { transition: 0.3s ease; } .sidebar.collapsed .menu-link .menu-label { opacity: 0; pointer-events: none; } .menu-list .menu-link:is(:hover, .active) { color: #fff; background: var(--color-hover-primary); } .menu-link.no-highlight:hover, .menu-link.no-highlight.active { background: transparent; /* tidak ada latar ungu */ color: var(--color-text-primary); /* warna teks kembali normal */ } .sidebar .sidebar-footer { padding: 20px 18px; white-space: nowrap; border-top: 1px solid var(--color-border-hr); } .sidebar-footer .theme-toggle { width: 100%; min-height: 48px; border-radius: 8px; border: none; cursor: pointer; padding: 0 15px; display: flex; align-items: center; color: var(--color-text-primary); background: var(--color-bg-secondary); transition: 0.3s ease; } .sidebar-footer .theme-toggle:hover { background: var(--color-hover-secondary); } .theme-toggle .theme-label { display: flex; gap: 10px; align-items: center; } .theme-toggle .theme-label .theme-text { font-size: 1rem; transition: opacity 0.4s 0.2s ease; } .sidebar.collapsed .theme-toggle :where(.theme-text, .theme-toggle-track) { width: 0; opacity: 0; transition: all 0.2s ease; } .theme-toggle .theme-toggle-track { height: 24px; width: 48px; position: relative; border-radius: 999px; margin-left: auto; background: #c3d1ec; transition: opacity 0.4s 0.2s ease, background-color 0.3s ease; } body.dark-theme .theme-toggle .theme-toggle-track { background: #695CFE; } .theme-toggle-track .theme-toggle-indicator { position: absolute; top: 3px; left: 3px; height: 18px; width: 18px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; } body.dark-theme .theme-toggle-track .theme-toggle-indicator { transform: translateX(24px); } /* RESPONSIVE */ @media (max-width: 768px) { .main-content { margin-left: 0; padding: 1rem; max-width: 100vw; } .sidebar { display: none; } } /* */ /* ==================================== CONTACT ====================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body, input, textarea { font-family: "Poppins", sans-serif; } .container { position: relative; width: 100%; min-height: 100vh; padding: 2rem; background: linear-gradient(135deg, #8B0000, #C41E3A, #f7981c, #ffd95c); overflow: hidden; display: flex; align-items: center; justify-content: center; } .form { width: 100%; max-width: 820px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1); z-index: 1000; overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr); } .contact-form { background-color: #c8131d; position: relative; } .circle { border-radius: 50%; background: linear-gradient(135deg, transparent 20%,#f6e617); position: absolute; } .circle.one { width: 130px; height: 130px; top: 130px; right: -40px; } .circle.two { width: 80px; height: 80px; top: 10px; right: 30px; } .contact-form:before { content: ""; position: absolute; width: 26px; height: 26px; background-color:#f6e617; transform: rotate(45deg); top: 50px; left: -13px; } form { padding: 2.3rem 2.2rem; z-index: 10; overflow: hidden; position: relative; } .title { color: #fff; font-weight: 500; font-size: 1.5rem; line-height: 1; margin-bottom: 0.7rem; } .input-container { position: relative; margin: 1rem 0; } .input { width: 100%; outline: none; border: 2px solid #fafafa; background: none; padding: 0.6rem 1.2rem; color: #fff; font-weight: 500; font-size: 0.95rem; letter-spacing: 0.5px; border-radius: 25px; transition: 0.3s; } textarea.input { padding: 0.8rem 1.2rem; min-height: 150px; border-radius: 22px; resize: none; overflow-y: auto; } .input-container label { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); padding: 0 0.4rem; color: #fafafa; font-size: 0.9rem; font-weight: 400; pointer-events: none; z-index: 1000; transition: 0.5s; } .input-container.textarea label { top: 1rem; transform: translateY(0); } .btn { padding: 0.6rem 1.3rem; background: linear-gradient(135deg, transparent 10%,#f6e617); border: 2px solid #fafafa; font-size: 0.95rem; color: white; font-weight: 400; line-height: 1; border-radius: 25px; outline: none; cursor: pointer; transition: 0.3s; margin: 0; } .btn:hover { background-color: #fcd200; color :black; } .input-container span { position: absolute; top: 0; left: 25px; transform: translateY(-50%); font-size: 0.8rem; padding: 0 0.4rem; color: transparent; pointer-events: none; z-index: 500; } .input-container span:before, .input-container span:after { content: ""; position: absolute; width: 70%; opacity: 0; transition: 0.3s; height: 17px; background-color: #c8131d; top: 50%; transform: translateY(-50%); } .input-container span:before { left: 50%; } .input-container span:after { right: 50%; } .input-container.focus label { top: 0; transform: translateY(-50%); left: 25px; font-size: 0.8rem; } .input-container.focus span:before, .input-container.focus span:after { width: 50%; opacity: 1; } .contact-info { padding: 2.3rem 2.2rem; position: relative; } .contact-info .title { color: black; padding-bottom: 15px; font-size: 2.3rem; font-weight: 700; margin-top: 18px; } .text { color: #333; margin: 1.5rem 0 2rem 0; font-size: small } .information { display: flex; color: #555; margin: 0.7rem 0; align-items: center; font-size: 0.90rem; } .icon { font-size: 1.1rem; color: var(--primary-color, #333); width: 24px; /* agar rata */ text-align: center; margin-right: 0.75rem; } .social-media { padding: 2rem 0 0 0; } .social-media p { color: #333; } .social-icons { display: flex; margin-top: 0.5rem; } .social-icons a { width: 35px; height: 35px; border-radius: 5px; background: linear-gradient(45deg,#c8131d, #8c0000); color: #fff; text-align: center; line-height: 35px; margin-right: 0.5rem; transition: 0.3s; } .social-icons a:hover { transform: scale(1.05); } .contact-info:before { content: ""; position: absolute; width: 110px; height: 100px; border: 22px solid ; border-radius: 50%; bottom: -77px; right: 50px; opacity: 0.3; } .big-circle { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: linear-gradient(to bottom, #8c0000, #f6e617); bottom: 50%; right: 50%; transform: translate(-40%, 38%); } .big-circle:after { content: ""; position: absolute; width: 360px; height: 360px; background-color: #fafafa; border-radius: 50%; top: calc(50% - 180px); left: calc(50% - 180px); } .square { position: absolute; height: 400px; top: 50%; left: 50%; transform: translate(181%, 11%); opacity: 0.2; } @media (max-width: 850px) { .form { grid-template-columns: 1fr; } .contact-info:before { bottom: initial; top: -75px; right: 65px; transform: scale(0.95); } .contact-form:before { top: -13px; left: initial; right: 70px; } .square { transform: translate(140%, 43%); height: 350px; } .big-circle { bottom: 75%; transform: scale(0.9) translate(-40%, 30%); right: 50%; } .text { margin: 1rem 0 1.5rem 0; } .social-media { padding: 1.5rem 0 0 0; } } @media (max-width: 480px) { .container { padding: 1.5rem; } .contact-info:before { display: none; } .square, .big-circle { display: none; } form, .contact-info { padding: 1.7rem 1.6rem; } .text, .information, .social-media p { font-size: 0.8rem; } .title { font-size: 1.15rem; } .social-icons a { width: 30px; height: 30px; line-height: 30px; } .icon { width: 23px; } .input { padding: 0.45rem 1.2rem; } .btn { padding: 0.45rem 1.2rem; } } /* ===== OVERRIDE HALAMAN CONTACT: perbesar keseluruhan form ===== */ body#contact-page { /* naikkan ukuran font dasar sedikit (semua rem ikut membesar) */ font-size: 16px; /* default browser 16 px → 18 px (~12% lebih besar) */ } body#contact-page .form { max-width: 1100px; height: fit-content; /* semula 820 px → jadi 1100 px */ transform: scale(1.08); /* ~8 % membesar keseluruhan */ transform-origin: center; } /* padding lebih luas agar proporsional */ body#contact-page .contact-info, body#contact-page .contact-form { padding: 3rem; } /* ==== TRANSISI HALAMAN CONTACT: slide-in horizontal ==== */ #contact-container{ opacity: 0; transform: translateY(-30px); /* mulai agak ke kiri */ transition: opacity 1s ease, transform .8s ease; } #contact-container.show{ opacity: 1; transform: translateX(0); /* posisi akhir */ } /* */ body#contact-page .container{ background:linear-gradient(120deg,#8B0000,#C41E3A,#f7981c,#ffd95c); background-size:300% 300%; /* besar supaya geser terasa */ animation:bgMove 15s linear infinite; } @keyframes bgMove{ 0% {background-position:0% 50%;} 50% {background-position:100% 50%;} 100%{background-position:0% 50%;} } /* ===== Tampilan logo + judul ===== */ .logo-title{ display:flex; align-items:center; gap:.75rem; /* jarak logo ↔ teks */ margin-bottom:1rem; /* jarak ke paragraf berikutnya */ } .logo-cells{ width:190px; /* atur besar logo */ height:auto; flex-shrink:0; margin-bottom: 3px; /* jangan mengecil ketika kolom sempit */ } /* Responsif opsional */ @media (max-width:480px){ .logo-cells{ width:45px; } .org-title{ font-size:1.7rem; } } /* === OVERLAY ================================================= */ .msg-popup{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .35s ease; z-index:9999; } /* ketika tampil */ .msg-popup.show{ opacity:1; visibility:visible; } /* === KOTAK =================================================== */ .msg-popup-box{ background:#fff; border-radius:16px; width:92%; max-width:360px; padding:2.1rem 2.4rem 2.3rem; text-align:center; box-shadow:0 18px 45px rgba(0,0,0,.18); transform:scale(.8); /* animasi masuk */ opacity:0; transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .35s; } /* animasi saat show */ .msg-popup.show .msg-popup-box{ transform:scale(1); opacity:1; } /* === CLOSE BUTTON =========================================== */ .msg-popup-close{ position:absolute; top:12px; right:14px; font-size:1.4rem; color:#999; background:none; border:none; cursor:pointer; transition:color .25s; } .msg-popup-close:hover{ color:#333; } /* === IKON ==================================================== */ .msg-popup-icon{ font-size:3.5rem; margin-bottom:.65rem; color:#c8131d; /* tone merah form */ animation:bounce-in .7s both; } @keyframes bounce-in{ 0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.25); opacity:1;} 100%{transform:scale(1);} } /* === TEKS ==================================================== */ .msg-popup-title{ margin:0 0 .35rem; font-size:1.35rem; font-weight:700; color:#1F2936; } .msg-popup-desc{ margin:0; color:#555; } .msg-time{ margin-top:.8rem; font-size:.85rem; color:#777; } /* === DARK MODE ============================================== */ body.dark-theme .msg-popup-box{ background:#1f2937; color:#f2f2f2; } body.dark-theme .msg-popup-close{ color:#aaa; } body.dark-theme .msg-popup-close:hover{ color:#fff; } body.dark-theme .msg-popup-desc, body.dark-theme .msg-time{ color:#cbd5e1; } /* === RESPONSIVE ============================================= */ @media (max-width:480px){ .msg-popup-box{ padding:1.8rem 1.9rem; } .msg-popup-icon{ font-size:3rem; } .msg-popup-title{ font-size:1.15rem; } } /* ====================================== ORGANIZATION ===================================== */ .main{ flex:1 1 auto; display:flex; flex-direction:column; padding:0 var(--content-pad) 2rem; /* kiri-kanan pakai var */ box-sizing:border-box; height: 100vh; overflow-y: auto; overflow-x: hidden; padding: 0 var(--content-pad) 2rem; } /* ==== HERO SLIDER ==== */ /* ganti blok lama .org-structure {} */ .org-structure { width: 100%; /* pakai seluruh lebar */ margin: 0; /* hilangkan auto-center */ padding-right: 1rem; /* ruang sedikit ke kanan */ display: flex; flex-direction: column; gap: 1.75rem; } .hero-slider { position: relative; width: 100%; height: 40vh; isolation: isolate; } .hero-slider-home { position: relative; width: 100%; height: 100vh; isolation: isolate; } .hero-slider-home{ flex: 0 0 auto; } .hero-slider{ flex: 0 0 auto; } .slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 8; } .hero-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; backdrop-filter: brightness(0.6); /* membuat teks tampil jelas di atas gambar */ color: #fff; padding: 0 1rem; } .hero-overlay h2 { font-size: clamp(1.8rem, 4vw + 1rem, 3rem); line-height: 1.3; margin: 0; text-transform: uppercase; font-weight: 700; letter-spacing: .5px; } .hero-subtitle { display: inline-block; margin-top: .75rem; font-size: 1.1rem; font-weight: 500; padding-bottom: .3rem; border-bottom: 4px solid #f2a900; /* aksen kuning-oranye */ } .nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.4); color: #fff; border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; z-index: 2; display: grid; place-items: center; transition: background .2s; } .nav-arrow:hover { background: rgba(0,0,0,.6); } .nav-arrow.prev { left: 1rem; } .nav-arrow.next { right: 1rem; } .pagination-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 2; } .pagination-dots .dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; } .pagination-dots .dot.active { background: #f2a900; } /* Responsif */ @media (max-width: 640px) { .hero-slider { height: 50vh; } .hero-overlay h2 { font-size: 1.4rem; } .hero-subtitle { font-size: .9rem; } } /* ===== ORGANIZATION STYLE ===== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); .org-structure { max-width: 1080px; margin: 0 auto; padding: 2rem 1rem; display: flex; flex-direction: column; gap: 2rem; font-family: 'Poppins', sans-serif; } .org-card { display: flex; align-items: center; gap: 1.75rem; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 1.25rem 1.75rem; } .org-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid #f2a900; /* oranye */ } .org-info { flex: 1; } .org-name { font-size: 1.25rem; font-weight: 600; padding-left: 2rem; color: #1d1d1f; } .org-role { font-size: .95rem; font-weight: 500; margin: 0; padding-left: 2rem; color: #555; } .org-term { font-size: .85rem; margin: .3rem 0 0; padding-left: 2rem; color: #d92356; /* merah muda (sesuai screenshot FPMIPA) */ } .org-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid #f2a900; } /* responsif: stack vertikal di layar sempit */ @media (max-width: 640px) { .org-card { flex-direction: column; text-align: center; } .org-photo { margin-bottom: .75rem; } .org-decor { margin-left: auto; margin-right: auto; } } /* ===== F O T O L I N G K A R A N & K A R D U S ===== */ .org-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid #f2a900; } /* ===== P O S I S I S T R U K T U R ===== */ .org-structure { /* kontainer keseluruhan */ width: 100%; display: flex; flex-direction: column; gap: 2rem; } /* Kepala — selalu di tengah */ /* ubah org-head dari flex jadi grid 3 kolom */ .org-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* buat kartu kepala merentang penuh ke 3 kolom */ .org-head .wide-card { grid-column: span 3; flex-direction: column; align-items: center; text-align: center; padding: 1rem 1rem; } /* target langsung kartu di dalam org-head */ .org-head .org-card{ grid-column:1 / -1; /* span semua kolom */ } /* Baris kedua — tiga kolom sejajar, responsif */ .org-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; align-items: stretch; /* memastikan semua kolom sejajar tingginya */ } /* ==== Khusus kartu Kepala agar vertikal & terpusat ==== */ .head-center .org-photo { /* sedikit margin bawah foto */ margin-bottom: .1rem; height: 150px; width: 150px; } /* inilah area scroll hanya untuk Organization */ .org-scroll{ flex: 1 1 auto; /* ambil sisa tinggi */ overflow-y: auto; /* aktifkan scroll vertikal */ padding-right: .5rem; /* beri ruang utk scrollbar */ } /* (opsional) estetika scrollbar WebKit */ .org-scroll::-webkit-scrollbar{ width: 8px; } .org-scroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.25); border-radius: 4px; } /* Responsif kecil: tumpuk vertikal */ @media (max-width: 640px) { .org-card { flex-direction: column; text-align: center; } .org-photo { margin-bottom: .6rem; } } /* —— Aktifkan scroll khusus halaman Organization —— */ #org-page{ overflow-y: auto; /* nyalakan scroll vertikal */ } /* (opsional) jika .main juga pernah di-set overflow:hidden */ #org-page .main{ overflow-y: auto; } .org-structure{max-width:none;} /* ——— baris Koordinator: 4 kolom pada layar ≥ 1024 px ——— */ .org-row-coord{ display:grid; /* pakai grid seperti .org-row */ gap:1.5rem; grid-template-columns:repeat(4,1fr); } /* responsif: saat lebar sempit kembali ke auto-fit yg sudah ada */ @media (max-width:1024px){ .org-row-coord{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } } /* ===================================== */ /* SLIDE-Y TRANSITION utk halaman */ /* ===================================== */ @keyframes slideYIn{ 0% {opacity:0; transform:translateY(-22px);} 100% {opacity:1; transform:translateY(0);} } /* kelas pemicu */ .main.animate-y{ animation: slideYIn .6s cubic-bezier(.25,.8,.25,1) both; } /* ===================================== */ /* F O O T E R */ /* ===================================== */ .site-footer{ margin-top: auto; /* dorong ke bawah kolom flex */ padding: 0 var(--content-pad); /* sama dengan konten */ background: var(--color-bg-secondary); color: var(--color-text-primary); font-size: 1.25rem; text-align: center; border-top: 1px solid var(--color-border-hr); box-shadow: 0 -2px 4px var(--color-shadow); } /* mode gelap: warna sedikit redup */ body.dark-theme .site-footer{ background: var(--color-bg-secondary); color: var(--color-text-primary); } /* saat sidebar collapsed (opsional – margin-left digeser via JS atau CSS) */ .sidebar.collapsed + .main .site-footer{ padding-left: calc(var(--content-pad)); } /* ——— align kiri-kanan dalam .org-card ——— */ .org-card{ display:flex; align-items:center; gap:0.2rem; } /* ——— blok tautan ——— */ .org-links{ margin-left:auto; /* dorong ke paling kanan */ display:flex; align-items:center; gap:.4rem; font-size:.9rem; font-weight:600; } .org-links a{ color:#007bff; /* atau var(--color-hover-primary) */ text-decoration:none; } .org-links a:hover{ text-decoration:underline; } .org-links .sep{ color:#999; } /* warna pemisah “|” */ /* ===== J U D U L S E K S I ===== */ .org-section-title { font-family: 'Poppins', sans-serif; font-size: 2.25rem; font-weight: 700; letter-spacing: 0.5px; text-align: center; margin: .1rem 0 1.1rem; margin-bottom: .1rem; color: #1F2936; display: flex; align-items: center; justify-content: center; gap: 1rem; } /* garis kiri-kanan */ .org-section-title::before, .org-section-title::after { content: ""; flex: 1; height: 4px; background: #f2a900; border-radius: 2px; } /* mode terang ikut variabel tema */ body:not(.dark-theme) .org-section-title{ color:#1F2936; } body.dark-theme .org-section-title { color: #f2f2f2; } @media (max-width:480px){ .org-section-title{ font-size:1.15rem; gap:.7rem; } /* biarkan flex:1; garis otomatis menyesuaikan */ } /* ======= JUDUL UTAMA ORGANISASI ======= */ .org-main-title { font-family: 'Poppins', sans-serif; font-size: 2.0rem; font-weight: 700; letter-spacing: 0.4px; color: #1F2936; text-align: center; margin: .1rem 0 0.3rem; } /* dark mode */ body.dark-theme .org-main-title { color: #f2f2f2; } @media (max-width: 480px){ .org-main-title { font-size: 1.3rem; } } /* =============== HOME ================= */ /* ===== 2-kolom area di halaman Home ===== */ .home-body{ display:flex; align-items:flex-start; gap:2rem; margin-top:2rem; } /* konten utama fleksibel */ .main-area{ flex:1 1 auto; min-width:0; /* biar flex-shrink */ } /* sidebar fix width */ .home-sidebar{ flex:0 0 280px; display:flex; flex-direction:column; gap:1.75rem; } /* --- widget style (seperti sebelumnya) --- */ .widget-title{ font-size:1rem; font-weight:700; text-transform:uppercase; margin:0 0 .8rem; position:relative; color:#111; } .widget-title::after{ content:""; width:28px; height:3px; background:#c8131d; display:block; margin-top:.3rem; } .widget-search{ position:relative; } .widget-search input{ width:100%; padding:.55rem 2.6rem .55rem .8rem; border:2px solid #0d5db8; border-radius:4px; font-size:.9rem; } .widget-search button{ position:absolute; top:50%; right:.6rem; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#0d5db8; font-size:1rem; } .widget-select{ width:100%; padding:.55rem .8rem; border:2px solid #ccc; border-radius:4px; font-size:.9rem; } .widget-posts{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem; } .widget-posts li{ border-left:3px solid #c8131d; padding-left:.6rem; } .widget-posts a{ color:#333; text-decoration:none; font-size:.9rem; } .widget-posts a:hover{ color:#c8131d; text-decoration:underline; } .home-sidebar{ flex:0 0 280px; margin-left:auto; /* sudah ada (menempelkan ke kanan) */ margin-right:4rem; /* ★ ruang luar ke tepi viewport */ padding-left:1rem; /* ★ ruang dalam sebelum teks */ display:flex; flex-direction:column; gap:1.75rem; } /* ===== responsive: sidebar turun di bawah konten ===== */ @media(max-width:900px){ .home-body{ flex-direction:column; } .home-sidebar{ flex:1 1 auto; } } /* ==================== TENTANG KAMI ===================== */ /* ================================================= ABOUT SECTION (home) ================================================= */ .about-section{ max-width: 1200px; margin: 0rem auto 1.5rem; /* ruang atas + bawah */ padding: 0 1rem; flex:1 1 auto; /* ikut aturan flex di .home-body */ } .about-title{ font-size: 1.6rem; font-weight: 700; text-align:center; position:relative; margin:0 0 1.4rem; } .about-title span{ background:var(--bg-clr, #fff); padding:0 .8rem; } .about-title::before, .about-title::after{ content:""; position:absolute; top:50%; width:35%; height:3px; background:var(--accent, #f2a900); } .about-title::before{ left:0; } .about-title::after { right:0; } .about-text{ line-height:1.65; font-size:1rem; text-align:justify; color:var(--text-main, #333); max-width: 100ch; margin:0 auto; } /* ----- dark theme overrides ------------------- */ body.dark-theme .about-title span{ background:#0c1424; } body.dark-theme .about-text { color:#e6e7ea; } body.dark-theme .about-title { color:#e6e7ea; } /* bg of page di dark sudah di-set global, jadi garis accent aman */ @media (max-width:480px){ .about-title{ font-size:1.3rem; } .about-title::before, .about-title::after{ width:18%; } .about-text{ font-size:.92rem; line-height:1.55; } } /* ============== VISI MISI ================== */ /* ===================================================== Perbaikan layout kolom-kiri (Tentang Kami + V/M) ===================================================== */ /* kolom-kiri: memisahkan diri dari flex baris */ .home-maincol{ flex:1 1 auto; /* ambil lebar sisa */ min-width:0; } /* pastikan paragraf “Tentang Kami” blok penuh */ .about-section{ margin-bottom:2.2rem; } /* pastikan grid-nya tetap rapi */ .vm-section{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.6rem; } /* kartu tetap adaptif; tidak berubah (hanya referensi) */ .vm-card{ background:var(--card-bg); border-radius:8px; padding:1.6rem; } /* ---------- variabel warna (pastikan exist) ---------- */ :root{ --accent-clr : #f2a900; /* kuning CELLS */ --card-light : #ffffff; --card-dark : #161e2e; /* kotak di dark-mode */ --text-light : #333; --text-dark : #e8e9ec; } body{ --card-bg : var(--card-light); --card-text : var(--text-light); } body.dark-theme{ --card-bg : var(--card-dark); --card-text : var(--text-dark); } /* ---------- layout ---------- */ .vm-section{ display:flex; /* dua kartu horisontal */ flex-wrap:wrap; /* jadi vertikal di ponsel */ gap:.8rem; /* jarak atas-bawah */ } /* setiap kartu */ .vm-card{ flex:1 1 340px; /* min-width 340px */ background:var(--card-bg); color:var(--card-text); padding:1.8rem 2rem; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.05); transition:.3s box-shadow; } .vm-card:hover{ box-shadow:0 6px 16px rgba(0,0,0,.10); } /* judul di dalam kartu */ .vm-heading{ font-size:1.25rem; font-weight:700; text-transform:uppercase; margin:0 0 1rem; position:relative; } .vm-heading::after{ /* garis kecil di bawah judul */ content:""; display:block; width:46px;height:3px; background:var(--accent-clr); margin-top:.4rem; } /* bullet list misi */ .vm-list{ margin:0; padding-left:1.2rem; display:flex;flex-direction:column;gap:.55rem; } .vm-list li{line-height:1.4;} /* ---------- RESPONSIVE BREAKPOINT ---------- */ @media(max-width:900px){ /* kartu otomatis turun – cukup longgarkan */ .vm-section{gap:1rem;} } @media(max-width:560px){ .vm-card{flex:1 1 100%; padding:1.4rem 1.6rem;} .vm-heading{font-size:1.15rem;} } /* ============== ANNOUNCEMENT */ /* ========================================================== ANNOUNCEMENTS – Home page ========================================================== */ .home-announcements{ padding: 2.5rem 2rem; max-width: 1360px; margin: 0 auto; } .ann-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; } .ann-head h2{ font-size:1.6rem; font-weight:700; color:var(--color-text-primary); } .ann-viewall{ font-size:.9rem; font-weight:600; color:var(--accent); text-decoration:none; } .ann-viewall:hover{ text-decoration:underline; } /* --- GRID --- */ .ann-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.5rem; } /* --- CARD --- */ .ann-card{ background:var(--color-card-bg); border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,.05); transition:transform .25s, box-shadow .25s; } .ann-card:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.08); } .ann-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-top-left-radius:8px; border-top-right-radius:8px; } /* meta row */ .ann-meta{ display:flex; gap:1.25rem; flex-wrap:wrap; font-size:.75rem; color:var(--color-text-muted); padding:.6rem .9rem 0; } .ann-meta i{ margin-right:.25rem; color:var(--accent); } /* title */ .ann-title{ margin: .4rem .9rem 1rem; font-size:.9rem; line-height:1.35; font-weight:600; } .ann-title a{ color:var(--color-text-primary); text-decoration:none; } .ann-title a:hover{ text-decoration:underline; } /* ------------- DARK THEME OVERRIDES ------------ */ body.dark-theme{ --color-card-bg:#1e2533; /* kartu lebih gelap */ } body.dark-theme .ann-card{ box-shadow:0 4px 14px rgba(0,0,0,.35); } body.dark-theme .ann-meta{ color:#b4b9c4; } body.dark-theme .ann-title a{ color:#f1f3f5; } /* ------------- ACCENT VARIABLE (kuning) ------------ */ :root{ --accent:#f2a900; --color-card-bg:#ffffff; --color-text-primary:#111; --color-text-muted:#666; } body.dark-theme{ --accent:#f2a900; --color-text-primary:#ffffff; --color-text-muted:#b4b9c4; } /* ===== Announcements – horizontal rail ===== */ .ann-track{ display:flex; gap:1.5rem; overflow-x:auto; /* scroll kiri–kanan */ padding-bottom:.5rem; scroll-snap-type:x mandatory; /* snap kartu */ -webkit-overflow-scrolling:touch; } .ann-track::-webkit-scrollbar{ height:8px; } .ann-track::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:4px; } /* tiap kartu punya lebar fix agar menyamping */ .ann-card{ flex:0 0 280px; /* << ukuran kartu */ scroll-snap-align:start; background:var(--color-card-bg); border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,.05); transition:transform .25s, box-shadow .25s; } .ann-card:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.08); } /* ---- responsive tweak ---- */ @media(max-width:600px){ .ann-card{ flex:0 0 220px; } /* kartu sedikit lebih ramping di hp */ } /* tema gelap masih memakai variabel yang sama (body.dark-theme override sudah kita tulis kemarin) */ /* ========== FOOTER ========== */ .site-footer{ background:#0e1621; /* hampir hitam */ color:#d4d7dc; font-size:.9rem; line-height:1.55; margin-top:3rem; } /* --- grid top --- */ .footer-top{ max-width:1280px; margin:0 auto; padding:3rem 2rem 2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem 3rem; } .ft-title{ font-size:1.05rem; font-weight:700; margin:0 0 .8rem; position:relative; text-transform:uppercase; } .ft-title::after{ content:""; display:block; width:38px;height:3px; background:#c8131d; margin-top:.4rem; } .ft-widget ul{list-style:none;padding:0;margin:0;} .ft-widget ul li{margin:.4rem 0;} .ft-widget ul li i{margin-right:.6rem;color:#c8131d;} .ft-widget.links ul li{margin:.35rem 0;} .ft-widget.links a{color:#d4d7dc;text-decoration:none;} .ft-widget.links a:hover{color:#c8131d;} .ft-social a{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border:1px solid #555;border-radius:50%; color:#d4d7dc;font-size:.9rem;margin-right:.5rem;transition:.25s; } .ft-social a:hover{background:#c8131d;border-color:#c8131d;} /* gallery 3×2 */ .ft-gallery{ display:grid;gap:.4rem; grid-template-columns:repeat(3,70px); } .ft-gallery img{width:70px;height:70px;object-fit:cover;border-radius:3px;} /* --- subscribe row --- */ .footer-subscribe{ border-top:1px solid #222;border-bottom:1px solid #222; padding:1.8rem 2rem; text-align:center; display:flex;flex-direction:column;gap:1rem; } .footer-subscribe span { margin-bottom: -2rem; } .subscribe-form{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; } .subscribe-form input{ padding:.55rem .3rem;border-radius:4px;border:none; width:200px;max-width:100%; } .subscribe-form button{ padding:.55rem 1.4rem;border:none;border-radius:4px; background:#e63945;color:#fff;font-weight:600;cursor:pointer; transition:.25s; } .subscribe-form button:hover{background:#c8131d;} /* --- bottom bar --- */ .footer-bottom{ display:flex;flex-wrap:wrap; justify-content:space-between;align-items:center; padding:1rem 2rem;font-size:.8rem; } .ft-bottom-links a{ color:#d4d7dc;margin-left:1.1rem;text-decoration:none; } .ft-bottom-links a:hover{color:#c8131d;} /* ========================================================= Footer bottom - links lebih jelas saat hover (Dark-mode) =========================================================*/ body.dark-theme .ft-bottom-links a{ color:var(--footer-text); /* abu terang default */ transition:color .45s, background .25s; } body.dark-theme .ft-bottom-links a:hover, body.dark-theme .ft-bottom-links a:focus{ color:#fff; /* teks jadi putih kontras */ background:rgba(255,255,255,.12); /* highlight lembut di balik */ padding:.15rem .45rem; /* sedikit ruang */ border-radius:4px; text-decoration:none; /* hilangkan underline */ } @media(max-width:600px){ .ft-gallery{grid-template-columns:repeat(3,1fr);} } /* ---------- VARIABEL KHUSUS FOOTER ---------- */ :root{ --footer-bg:#0e1621; /* gelap utk light-mode */ --footer-text:#d4d7dc; --footer-border:#222; --footer-accent:#c8131d; /* merah */ --footer-btn:#e63945; } body.dark-theme{ --footer-bg:#1f2937; /* sedikit lebih terang di dark-mode */ --footer-text:#cbd5e1; --footer-border:#334155; --footer-accent:#f2a900; /* ganti jadi kuning aksen yg sama */ --footer-btn:#f2a900; } /* ========== FOOTER ========== */ :root{ /* …variabel lain… */ /* === GRADIENT (contact-page) === */ --grad-start:#8B0000; /* merah tua */ --grad-mid1:#C41E3A; /* merah terang */ --grad-mid2:#f7981c; /* oranye */ --grad-end:#ffd95c; /* kuning */ --footer-border: rgba(255,255,255,.35); } .site-footer{ /* gradient sama seperti contact */ background:linear-gradient(135deg, var(--grad-start), var(--grad-mid1) 30%, var(--grad-mid2) 65%, var(--grad-end)); color:#fff; font-size:.9rem;line-height:1.55;margin-top:3rem; } .footer-top{ max-width:1280px;margin:0 auto;padding:3rem 2rem 2rem; display:grid;gap:2rem 3rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } /* judul widget */ .ft-title{font-size:1.05rem;font-weight:700;text-transform:uppercase;margin:0 0 .8rem;position:relative;} .ft-title::after{content:"";display:block;width:38px;height:3px;background:var(--footer-accent);margin-top:.4rem;} .ft-widget ul{list-style:none;padding:0;margin:0;} .ft-widget ul li{margin:.4rem 0;} .ft-widget ul li i{margin-right:.6rem;color:var(--footer-accent);} .ft-widget.links a{color:var(--footer-text);text-decoration:none;} .ft-widget.links a:hover{color:var(--footer-accent);} /* sosmed */ .ft-social a{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border:1px solid var(--footer-border); border-radius:50%;color:var(--footer-text);font-size:.9rem;margin-right:.5rem;transition:.25s; } .ft-social a:hover{background:var(--footer-accent);border-color:var(--footer-accent);} /* gallery */ .ft-gallery{display:grid;gap:.4rem;grid-template-columns:repeat(3,70px);} .ft-gallery img{width:70px;height:70px;object-fit:cover;border-radius:3px;} /* subscribe */ .footer-subscribe{ border-top:1px solid var(--footer-border); border-bottom:1px solid var(--footer-border); padding:1.8rem 2rem;text-align:center; display:flex;flex-direction:column;gap:1rem; } .subscribe-form{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;} .subscribe-form input{ width:200px;max-width:100%; padding:.55rem .9rem;border-radius:4px;border:none; } .subscribe-form button{ padding:.55rem 1.4rem;border:none;border-radius:4px; background:var(--footer-btn);color:#fff;font-weight:600;cursor:pointer;transition:.25s; } .subscribe-form button:hover{filter:brightness(0.9);} /* bottom bar */ .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:1rem 2rem;font-size:.8rem;} .ft-bottom-links a{color:var(--footer-text);margin-left:1.1rem;text-decoration:none;} .ft-bottom-links a:hover{color:var(--footer-accent);} @media(max-width:600px){ .ft-gallery{grid-template-columns:repeat(3,1fr);} } /* garis di bawah judul widget */ .ft-title::after{ background:rgba(255,255,255,.8); } /* ikon & bullet kiri pada list */ .ft-widget ul li i, .widget-posts li{ color:#fff; border-left-color:#fff; } /* tautan default & hover */ .ft-widget.links a, .ft-bottom-links a{ color:#fff; } .ft-widget.links a:hover, .ft-bottom-links a:hover{ color:#222; } /* tombol Subscribe */ .subscribe-form button{ background:#fff; color:#c8131d; } .subscribe-form button:hover{ filter:brightness(.9); } /* ikon sosmed – border & warna */ .ft-social a{ border:1px solid rgba(255,255,255,.5); color:#fff; } .ft-social a:hover{ background:#fff; color:#c8131d; border-color:#fff; } /* DARK MODE FOOTER AT HOME */ body.dark-theme .site-footer{ background:#1f2937; /* kembali gelap */ color:var(--footer-text); --footer-border: rgba(255,255,255,.35); } body.dark-theme .ft-title::after, body.dark-theme .ft-social a, body.dark-theme .widget-posts li{ background:var(--footer-accent); /* kuning aksen yang sudah di-define */ color:var(--footer-accent); } body.dark-theme .subscribe-form button{ background:var(--footer-btn); color:#fff; } /* ========================================================= 1. RATAKAN TEKS (justify) di paragraf footer =========================================================*/ .ft-widget p { text-align:justify; } /* RATAKAN TEKS di bagian "GET IN TOUCH" */ .ft-widget.contact ul li{ text-align:justify; /* sisi kiri & kanan rata */ text-align-last:left; /* baris terakhir tetap rata-kiri */ } /* ========================================================= 2. SOCIAL ICONS TETAP TERLIHAT pada DARK-MODE =========================================================*/ body.dark-theme .ft-social a{ background:#fff; /* lingkaran putih */ color:#c8131d; /* ikon merah/kuning tematik */ border-color:#fff; } body.dark-theme .ft-social a:hover{ background:var(--footer-accent); /* hover = kuning aksen */ color:#fff; } /* ========================================================= 3. RIGHT-SIDEBAR (home-sidebar) BERLATAR PUTIH saat DARK-MODE =========================================================*/ body.dark-theme .home-sidebar{ background:#ffffff; padding:1.2rem 1.4rem; border-radius:8px; color:#1d1d1f; /* teks gelap */ } /* widget judul + garis aksen di dalam sidebar */ body.dark-theme .home-sidebar .widget-title{ color:#1d1d1f; } body.dark-theme .home-sidebar .widget-title::after{ background:#c8131d; } /* input & select di sidebar */ body.dark-theme .widget-search input, body.dark-theme .widget-select{ background:#fff; color:#333; border:2px solid #0d5db8; } /* tombol kaca pembesar */ body.dark-theme .widget-search button{ color:#0d5db8; } /* link & bullet list di sidebar */ body.dark-theme .widget-posts a{ color:#333; } body.dark-theme .widget-posts a:hover{ color:#c8131d; } body.dark-theme .widget-posts li{ border-left-color:#c8131d; } /* ------------------------------------------------------------------ Subscribe button – Mode LIGHT ------------------------------------------------------------------*/ body:not(.dark-theme) .subscribe-form button{ background:#ffffff; /* default: putih */ color:#c8131d; /* teks merah */ border:1px solid #c8131d; /* garis tepi opsional */ } body:not(.dark-theme) .subscribe-form button:hover{ background:var(--footer-accent); /* kuning aksen (#f7981c / #f2a900) */ color:#ffffff; /* teks jadi putih agar kontras */ border-color:var(--footer-accent); filter:none; /* hapus filter gelap */ } /* ------------------------------------------------------------------ Subscribe button – Mode DARK (tetap seperti sebelumnya) ------------------------------------------------------------------*/ body.dark-theme .subscribe-form button{ background:var(--footer-btn); /* kuning aksen */ color:#0e1621; /* teks gelap/putih sesuai selera */ } body.dark-theme .subscribe-form button:hover{ filter:brightness(.9); /* cukup gelapkan sedikit */ } /* ---------- NAV BAR ---------- */ .org-switch{ display:flex; gap:1.5rem; margin:.1rem 0 .1rem; justify-content:center; } a{ text-decoration: none; } /* ------------------------------------------------- ORG-TAB – states & theme-aware colours -------------------------------------------------*/ /* 1. keadaan biasa (light–mode) */ .org-tab{ display:inline-flex; align-items:center; justify-content:center; padding:.55rem 1.6rem; font-size:.93rem; border-radius:8px; border:2px solid transparent; background:#f5f5f5; /* abu muda */ color:#c8131d; /* merah CELLS */ text-decoration:none; /* hilangkan underline */ cursor:pointer; transition:.25s; } .org-tab:hover{ background:#ffe4e8; } /* 2. tab AKTIF (light–mode) */ .org-tab.active{ background:linear-gradient(90deg,#f7971c,#ffd95c); color:#fff; border-color:#f7ad26; } /* ---------- DARK THEME OVERRIDES ---------- */ body.dark-theme .org-tab{ background:#24303f; /* biru-abu pekat */ color:#ffd95c; /* kuning */ } body.dark-theme .org-tab:hover{ background:#334155; /* sedikit lebih terang saat hover */ } body.dark-theme .org-tab.active{ background:#ffd95c; /* kuning solid agar kontras */ color:#1c1c1c; /* teks gelap agar terbaca */ border-color:#ffd95c; } /* (opsional) efek fokus keyboard */ .org-tab:focus-visible{ outline:3px solid #f7971c; outline-offset:2px; } .org-tab{ padding:.55rem 1.6rem; border-radius:8px; font-size:.93rem; border:2px solid transparent; background:#f5f5f5; color:#c8131d; cursor:pointer; transition:.25s; text-decoration: none; } .org-tab:hover{ background:#ffe4e8; } .org-tab.active{ background:linear-gradient(90deg,#f7971c,#ffd95c); color:#fff; border-color:#f7ad26; } /* ---------- SEMBUNYIKAN GROUP ---------- */ .org-group{ display:none; } .org-group.show{ display:block; } /* spacing tetap konsisten */ #tenaga-ahli .org-row{ margin-top:.75rem; } .org-subtitle { text-align: justify; max-width: 958px; margin: 0 auto 0.1rem; font-size: 1rem; color: #444; line-height: 1.6; } body.dark-theme .org-subtitle{ color:#e0e4ec !important; } .org-section-title-TA { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.5px; text-align: center; margin: .1rem 0 1.1rem; margin-bottom: .1rem; color: #1F2936; display: flex; align-items: center; justify-content: center; gap: 1rem; } /* garis kiri-kanan */ .org-section-title-TA::before, .org-section-title-TA::after { content: ""; flex: 1; height: 4px; background: #f2a900; border-radius: 2px; } /* mode terang ikut variabel tema */ body:not(.dark-theme) .org-section-title-TA{ color:#1F2936; } body.dark-theme .org-section-title-TA { color: #f2f2f2; } /* ======================================================= GRADASI LATAR – halaman ORGANIZATION (mode terang) ======================================================= */ body#org-page{ /* sama persis dengan contact.html */ background: linear-gradient(135deg,#8B0000,#C41E3A,#f7981c,#ffd95c); background-size: 300% 300%; animation: bgMove 15s linear infinite; } /* Non-aktifkan gradasi bila Dark-Mode aktif */ body.dark-theme#org-page{ background: var(--color-bg-primary); /* warna gelap global yg sudah ada */ animation: none; } /* Buat konten utama transparan supaya gradasinya terlihat penuh */ body#org-page .main{ background: transparent; } /* ======================================================= GRADASI LATAR – halaman ORGANIZATION (mode terang) ======================================================= */ /* ========== PARTNERS SECTION ========== */ .home-partners{ margin:2.5rem 0; /* space above & below */ padding:0 1.5rem; } .partners-title{ font:600 1.4rem/1.2 var(--ff-heading, 'Inter', sans-serif); text-transform:uppercase; margin:0 0 1.2rem; color:var(--color-text-primary); border-left:4px solid var(--accent); padding-left:.6rem; } /* responsive CSS grid */ .partners-grid{ --tile-size:120px; /* ↔ change once if you need bigger tiles */ display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--tile-size),1fr)); gap:1.25rem; } /* card look */ .partner-tile{ display:flex; align-items:center; justify-content:center; padding:1rem; height:var(--tile-size); background:var(--color-card-bg); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.05); transition:box-shadow .25s, transform .25s; } .partner-tile img{ max-width:100%; max-height:100%; object-fit:contain; filter:var(--logo-filter, none); } .partner-tile:hover{ transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,.08); } /* dark-theme adjustments (reuse variables you already have) */ body.dark-theme{ --logo-filter:brightness(0) invert(1); /* make dark logos visible */ } /* add this AFTER the previous rule */ @media (min-width: 768px){ .hero-slider, .site-footer{ position:relative; /* allow left “pull” */ left: calc(-1 * var(--page-pad)); /* pull out to the LHS */ width: calc(100% + var(--page-pad)*2); /* grow equally both sides */ } } /* ================================ ROADMAP =================================== */ /* ----- make the two blocks stack, ALWAYS ----- */ :root{ --text-dk:#f0f2f5; } .roadmap-highlight{ flex-direction: column; /* column on desktop as well */ } /* card & image should both span the full line width */ .highlight-content, .highlight-img{ flex: 1 1 100%; } /* Kontainer dua item roadmap */ .roadmap-img-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; width: 100%; margin-top: 2rem; } /* Setiap item terdiri dari teks + gambar */ .roadmap-item { flex: 1 1 48%; min-width: 280px; max-width: 100%; display: flex; flex-direction: column; align-items: center; } /* Judul gambar di luar card */ .roadmap-img-title { font-size: 1.1rem; font-weight: 600; text-align: center; margin-bottom: 1rem; color: #111; } body.dark-theme .roadmap-img-title { color: #fff; } /* Kotak gambar */ .roadmap-box { width: 100%; background: #fff; padding: 1.5rem 1rem; border-radius: .75rem; box-shadow: 0 8px 14px rgba(0, 0, 0, 0.08); display: flex; justify-content: center; align-items: center; height: 100%; } body.dark-theme .roadmap-box { background: #1e1e1e; box-shadow: 0 8px 18px rgba(255, 255, 255, 0.05); } /* Gambar tetap rata dan seragam */ .roadmap-box img { width: 100%; height: 400px; object-fit: contain; } /* Responsif */ @media (max-width: 768px) { .roadmap-img-grid { flex-direction: column; } .roadmap-box img { height: auto; } } /* a little spacing under the card so the image doesn’t glue to it */ .highlight-content{ margin-bottom: 2rem; } /* keep the card wide but still padded */ .highlight-content{ box-sizing: border-box; /* ensures padding is inside width */ } /* Optional: centre buttons after widening */ .highlight-content .btn-group{ justify-content: flex-start; /* change to center if you prefer */ } .section-title-decor { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; } .section-title { font-size: 1.4rem; font-weight: 700; text-align: center; color: #fff; position: relative; white-space: nowrap; letter-spacing: 0.5px; } .section-title-decor::before, .section-title-decor::after { content: ''; flex: 1; height: 3px; background: #ffc107; /* warna kuning */ max-width: 100px; border-radius: 2px; } @media (max-width: 600px) { .section-title { font-size: 1.1rem; } } body:not(.dark-theme) .section-title { color: #111; } :root{ --page-pad : 1.25rem; /* master gutter */ --accent : #c8131d; /* CELLS red */ --accent-grad: linear-gradient(135deg,#c8131d 0%,#ffc107 100%); --box-bg-lt : #f7f7f7; /* card bg – light */ --box-bg-dk : #111722; /* card bg – dark */ } /* ---------- ROADMAP HIGHLIGHT STRIP ---------- */ .roadmap-highlight{ max-width: 1200px; margin: 3rem auto; padding: 0 var(--page-pad); display: flex; flex-wrap: wrap; gap: 2rem; } .highlight-img{ flex: 1 1 45%; min-width: 260px; overflow: hidden; border-radius: .5rem; } .highlight-img img{ width: 100%; height: 100%; object-fit: cover; } .highlight-content{ flex: 1 1 45%; min-width: 260px; display: flex; flex-direction: column; justify-content: center; padding: 2rem 1.75rem; border-radius: .5rem; background: var(--box-bg-lt); box-shadow: 0 4px 12px rgb(0 0 0 / .06); } body.dark-theme .highlight-content{ background: var(--box-bg-dk); } .highlight-content h2{ font-size: clamp(1.6rem, 2.3vw, 2rem); margin: 0 0 1rem; line-height: 1.25; } .highlight-content h2 span{ color: var(--accent); } .highlight-content p{ line-height: 1.55; margin-bottom: 1.6rem; } /* ---------- Buttons ---------- */ .btn-group{ display: flex; flex-wrap: wrap; gap: 1rem; } .btn{ display: inline-block; font-weight: 600; padding: .65rem 1.4rem; border-radius: 4px; text-decoration: none; transition: .25s; } .btn.primary{ background: var(--accent-grad); color: #fff; } .btn.primary:hover{ filter: brightness(1.08); } .btn.outline{ border: 2px solid var(--accent); color: var(--accent); } .btn.outline:hover{ background: var(--accent); color: #fff; } /* ---------- Responsive ---------- */ @media(max-width: 768px){ .roadmap-highlight{ flex-direction: column; } .highlight-img, .highlight-content{ flex: 1 1 100%; } } /* blok utama */ body.dark-theme .highlight-content{ background: var(--box-bg-dk); color: var(--text-dk); /* <── teks otomatis jadi terang */ } /* pastikan semua paragraf ikut pewarnaan induk */ .highlight-content p{ color: inherit; /* mengikuti .highlight-content */ line-height: 1.55; margin-bottom: 1.6rem; } /* = ================= PRODUCT =============================== */ /* ────────────────────────────────────────────────────────── THEME–AWARE PRODUCT GRID (light & dark + responsive) --------------------------------------------------------- */ :root{ /* LIGHT theme tokens */ --clr-bg : #f9f9fb; --clr-surface : #ffffff; --clr-text : #202020; --clr-heading : #111111; --clr-stroke : #e6e6e9; --clr-accent : #d4a200; /* gold */ --clr-accent-grad : linear-gradient(90deg,#eabd02,#ffcd35); } body.dark-theme{ /* DARK overrides */ --clr-bg : #0f1a2b; --clr-surface : #19273f; --clr-text : #d5d7de; --clr-heading : #ffffff; --clr-stroke : #26354c; --clr-accent : #f2c94c; --clr-accent-grad : linear-gradient(90deg,#f9c50b,#ffde55); } /* ——— global background fix ——— */ body{ background:var(--clr-bg); } /* ——— product section wrapper ——— */ .product-showcase{ max-width: 1100px; padding:3rem 1rem 4rem; margin:0 auto; } /* section heading w/ gold bars */ .section-head{ text-align:center; font-size:1.8rem; color:var(--clr-heading); margin:0 0 2.25rem; } .section-head span::before, .section-head span::after{ content:""; display:inline-block; width:60px;height:3px; background:var(--clr-accent); margin:0 1.1rem;vertical-align:middle; } /* intro paragraph */ .product-intro{ max-width:65ch; margin:.2rem auto 2.6rem; line-height:1.65; color:var(--clr-text); text-align:justify; } /* responsive grid */ .product-grid{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); } /* card */ .pr-card{ background:var(--clr-surface); border:1px solid var(--clr-stroke); border-radius:8px; padding:1.8rem 1.55rem 2.4rem; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; } .pr-card:hover{ transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,.10); } /* titles & text */ .pr-title{ font-size:1.25rem; font-weight:700; color:var(--clr-heading); margin:0 0 .9rem; } .pr-title small{ font-weight:400;font-size:.9rem; } .pr-desc{ flex:1; margin:0 0 1.35rem; line-height:1.55; color:var(--clr-text); } .pr-meta{ list-style:none; padding:0; margin:0 0 1.6rem; font-size:.9rem; color:var(--clr-text); } .pr-meta li+li{ margin-top:.35rem; } /* buttons */ .btn-detail{ align-self:flex-start; padding:.55rem 1.25rem; font-weight:600; font-size:.9rem; border:none; border-radius:4px; background:var(--clr-accent-grad); color:#111; text-decoration:none; transition:filter .25s; } .btn-detail:hover{ filter:brightness(1.05); } /* ——— break-points ——— */ @media(max-width:880px){ .section-head{font-size:1.6rem} .product-intro{margin-bottom:2rem;} } @media(max-width:540px){ .product-showcase{padding:2.5rem .8rem;} .product-grid{grid-template-columns:1fr;} .pr-card{padding:1.6rem 1.25rem 2.1rem;} } .research-section { padding: 4rem var(--content-pad); background: var(--page-bg); color: var(--text-color); } .research-intro { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; } .research-text { flex: 1 1 45%; } .research-image { flex: 1 1 45%; border: 3px solid #1475cf; border-radius: .5rem; overflow: hidden; } .research-image img { width: 100%; height: auto; display: block; } .button { margin-top: 1rem; display: inline-block; background: #1475cf; color: white; padding: .75rem 1.5rem; border-radius: .3rem; text-decoration: none; } .research-bottom-row { display: flex; flex-wrap: wrap; margin-top: 4rem; gap: 2rem; justify-content: space-between; } .research-box { flex: 1 1 30%; background: var(--box-bg-lt); padding: 1rem; border-radius: .5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.05); } body.dark-theme .research-box { background: var(--box-bg-dk); } .research-intro-card { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; background: var(--box-bg-lt); padding: 7rem; border-radius: .75rem; box-shadow: 0 4px 12px rgba(0,0,0,0.06); margin-bottom: 3rem; } body.dark-theme .research-intro-card { background: var(--box-bg-dk); } .research-intro-text { flex: 1 1 50%; } .research-intro-image { flex: 1 1 40%; border: 3px solid #1475cf; border-radius: .5rem; overflow: hidden; } .research-intro-image img { width: 100%; height: auto; display: block; } .research-bottom-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; padding: 0 var(--content-pad); /* Agar tidak nempel */ max-width: 1200px; margin: 0 auto 4rem auto; /* tengah + margin bawah */ } .research-box { flex: 1 1 300px; background: var(--box-bg-lt); padding: 1.5rem; border-radius: .5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: transform 0.3s ease; } .research-box:hover { transform: translateY(-4px); } body.dark-theme .research-box { background: var(--box-bg-dk); } /* ========= 1. VARIABEL WARNA GLOBAL ========= */ :root{ --page-bg-lt: #ffffff; --page-bg-dk: #121212; --text-lt: #141414; --text-dk: #eaeaea; --box-bg-lt: #f7f7f7; --box-bg-dk: #1e1e1e; --accent: #1475cf; /* tombol & border utama */ --accent-hover: #0d5faf; --shadow-lt: 0 4px 10px rgba(0,0,0,0.06); --shadow-dk: 0 4px 10px rgba(0,0,0,0.30); --content-pad: 2rem; /* dipakai di banyak halaman */ } /* ========= 2. DASAR BODY ========= */ body{ background: var(--page-bg-lt); color: var(--text-lt); transition: background .3s, color .3s; } body.dark-theme{ background: var(--page-bg-dk); color: var(--text-dk); } /* ========= 3. BUTTON ========= */ .button{ display:inline-block; background: var(--accent); color:#fff; padding:.75rem 1.5rem; border-radius:.35rem; text-decoration:none; font-weight:500; transition:background .3s; } .button:hover{ background: var(--accent-hover); } /* ========= 4. INTRO CARD ========= */ .research-intro-card{ display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between; background: var(--box-bg-lt); padding:2rem; border-radius:.75rem; box-shadow: var(--shadow-lt); margin-bottom:3rem; } body.dark-theme .research-intro-card{ background: var(--box-bg-dk); box-shadow: var(--shadow-dk); } /* teks & gambar */ .research-intro-text{ flex:1 1 50%; } .research-intro-image{ flex:1 1 40%; border:3px solid var(--accent); border-radius:.5rem; overflow:hidden; } .research-intro-image img{ width:100%; height:auto; display:block; } /* ========= 5. WRAPPER CARD BAWAH ========= */ .research-bottom-wrapper{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; padding:0 var(--content-pad); max-width:1200px; margin:0 auto 4rem; } .research-box{ flex:1 1 300px; background:var(--box-bg-lt); padding:1.5rem; border-radius:.5rem; box-shadow: var(--shadow-lt); transition:transform .3s; } .research-box:hover{ transform:translateY(-4px); } body.dark-theme .research-box{ background:var(--box-bg-dk); box-shadow: var(--shadow-dk); } /* ========= 6. RESPONSIVE BREAKPOINT ========= */ @media(max-width:768px){ .research-intro-card, .research-bottom-wrapper{ flex-direction:column; } .research-intro-text, .research-intro-image, .research-box{ flex:1 1 100%; } .research-intro-image{ margin-top:1rem; } } /* Opsional efek fokus terarah */ .research-box h3{ margin-top:0; } /* ------- Tombol kategori publikasi ------- */ .pub-buttons{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:.75rem; justify-content:flex-start; /* rata kiri default */ } /* Tombol (desktop & tablet) */ .pub-btn{ padding:.5rem 1.25rem; border:2px solid var(--accent); border-radius:2rem; font-size:.875rem; font-weight:500; color:var(--accent); background:transparent; text-decoration:none; transition:background .3s, color .3s; } .pub-btn:hover{ background:var(--accent); color:#fff; } /* Mode gelap */ body.dark-theme .pub-btn{ color:var(--accent); border-color:var(--accent); } body.dark-theme .pub-btn:hover{ background:var(--accent); color:#fff; } /* ========= Breakpoints ========= */ /* 1. Tablet (≤ 768 px) — ukuran tombol sedikit mengecil */ @media (max-width: 768px){ .pub-btn{ padding:.45rem 1rem; font-size:.8rem; } } /* 2. Mobile (≤ 480 px) — tombol full-width, tumpuk vertikal */ @media (max-width: 480px){ .pub-buttons{ flex-direction:column; gap:.5rem; } .pub-btn{ width:100%; text-align:center; padding:.6rem 0; font-size:.85rem; } } /* ==== Penjajaran tombol kategori ==== */ /* Layar ≥ 481 px ─ paksa satu baris */ @media (min-width: 481px){ .pub-buttons{ flex-wrap: nowrap; /* cegah pindah baris */ justify-content: flex-start;/* atau center / space-between sesuai selera */ } } /* Tombol: biarkan lebarnya menyesuaikan konten, tapi tidak boleh melebar tak terbatas */ .pub-btn{ white-space: nowrap; /* teks tetap satu baris */ } /* Layar sangat sempit (≤ 480 px) tetap pakai column yang sudah diatur sebelumnya */ /* ROOT */ /* ---------- Pastel palette diadopsi dari footer ---------- */ :root{ --footer-red: #9c1026; --footer-orange: #eb5a21; --footer-yellow: #ffc24b; /* 10 % warna + 90 % putih → sangat lembut */ --pastel-red: #fff5f6; /* campuran putih + merah */ --pastel-orange: #fff7f1; /* putih + jingga */ --pastel-yellow: #fffbec; /* putih + kuning */ } /* ---------- Card umum (sudah ada) ---------- */ .research-intro-card, .research-box{ border: 1px solid rgba(0,0,0,.04); box-shadow: 0 4px 12px rgba(0,0,0,.03); } /* ---------- Intro card: transisi jingga-kuning ---------- */ .card-intro{ background: linear-gradient(120deg, var(--pastel-orange) 0%, var(--pastel-yellow) 100%); } /* ---------- 3 card bawah ---------- */ .card-red { background: var(--pastel-red); } .card-orange{ background: var(--pastel-orange); } .card-yellow{ background: var(--pastel-yellow); } /* ---------- Tombol & border aksen ---------- */ .button, .pub-btn, .research-intro-image{ border-color: var(--footer-orange); color: var(--footer-orange); } .button:hover, .pub-btn:hover{ background: var(--footer-orange); color:#fff; } /* ---------- Dark-mode override ---------- */ body.dark-theme .card-intro, body.dark-theme .card-red, body.dark-theme .card-orange, body.dark-theme .card-yellow{ background: var(--box-bg-dk); border: 1px solid rgba(255,255,255,0.07); } /* ---------- RESPONSIF tetap sama (flex/grid yg sudah dibuat) ---------- */ /* ---------- Aksen utama (sudah didefinisi) ---------- */ :root{ --accent-orange: #eb5a21; /* sama dengan tombol Scopus dsb. */ --accent-hover: #c64a1c; /* sedikit lebih gelap untuk hover */ } /* ---------- READ MORE button di mode terang ---------- */ .read-more-btn{ border: 2px solid var(--accent-orange); color: var(--accent-orange); background: transparent; padding:.6rem 1.5rem; border-radius: .35rem; /* kotak biasa, bukan pill */ font-weight: 600; transition: background .3s, color .3s; } .read-more-btn:hover{ background: var(--accent-orange); color:#fff; } /* ---------- Dark mode tetap aksen jingga ---------- */ body.dark-theme .read-more-btn{ border-color: var(--accent-orange); color: var(--accent-orange); } body.dark-theme .read-more-btn:hover{ background: var(--accent-orange); color:#fff; } /* PROFILE */ /* ---------- LEADERSHIP SECTION ---------- */ .leadership-section{ padding: 4rem var(--content-pad); } .leadership-title{ font-size: 2rem; font-weight: 700; margin-bottom: 2rem; border-bottom: 4px solid var(--accent); width: max-content; } .leader-wrapper{ display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; justify-content: space-between; } /* ==== LEFT pane ==== */ .leader-info{ flex: 1 1 45%; max-width: 500px; } .leader-position{ font-size: 1.25rem; margin: 0 0 .25rem; color: var(--accent); } .leader-name{ font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; } .leader-desc{ line-height: 1.6; margin-bottom: 1.25rem; } .leader-btn{ display: inline-block; padding: .55rem 1.5rem; border: 2px solid var(--accent); color: var(--accent); background: transparent; border-radius: .35rem; font-weight: 600; margin-bottom: 2rem; transition: background .3s,color .3s; } .leader-btn:hover{ background: var(--accent); color:#fff; } /* daftar jabatan */ .leader-nav{ list-style:none; padding:0; margin:0; border-top:1px solid var(--color-border-hr); } .leader-nav li{ border-bottom:1px solid var(--color-border-hr); } .leader-nav .lnk{ width:100%; padding:.65rem 0; text-align:left; background:none; border:none; font-size: .95rem; cursor:pointer; transition:color .2s; } .leader-nav .lnk:hover, .leader-nav .lnk.active{ color: var(--accent); font-weight:600; } /* ==== RIGHT photo ==== */ .leader-photo{ flex: 1 1 45%; text-align:center; position:relative; } .leader-photo img{ width: 100%; max-width: 380px; height:auto; } .leader-photo figcaption{ position: absolute; left:50%; transform: translateX(-50%); bottom:-20px; display:flex; gap:.3rem; } .badge-title, .badge-sub{ background: var(--accent); color:#fff; font-weight:700; padding:.35rem .75rem; border-radius:.25rem; } .badge-title{ font-size:.9rem; } .badge-sub{ font-size:.85rem; } /* ---------- DARK THEME ---------- */ body.dark-theme .leader-btn{ border-color: var(--accent); color: var(--accent); } body.dark-theme .leader-btn:hover{ background: var(--accent); color:#fff; } body.dark-theme .leader-nav{ border-top:1px solid rgba(255,255,255,.15); } body.dark-theme .leader-nav li{ border-bottom:1px solid rgba(255,255,255,.15); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 768px){ .leader-wrapper{ flex-direction: column; } .leader-info, .leader-photo{ flex:1 1 100%; } .leader-photo figcaption{ position:static; transform:none; margin-top:.5rem; } } /* ====== WRAPPER ====== */ .leader-wrapper{ display:flex; flex-wrap:wrap; gap:3rem; align-items:center; /* tambahkan ini → */ justify-content:space-between; /* ruang maksimum di antara 2 kolom */ } /* ====== FOTO ====== */ .leader-photo{ flex:0 0 auto; /* biar ukurannya pas konten / max-width setempat */ margin-left:auto; /* dorong ke kanan */ text-align:center; } /* ======================================== LEADER WRAPPER → pastikan lebar penuh ======================================== */ .leader-wrapper{ display:flex; flex-wrap:wrap; align-items:flex-start; /* teks & foto rata atas */ width:100%; /* isi baris penuh */ } /* ======================================== FOTO – dorong 100 % ke kanan ======================================== */ .leader-photo{ margin-left:auto; /* kunci: sisakan ruang kiri, foto ke kanan */ flex:0 0 380px; /* lebar foto (atau max-width) */ text-align:right; /* caption ikut ke kanan */ } /* opsional: beri max-width supaya tak meledak di layar besar */ .leader-photo img{ width:100%; max-width:380px; height:auto; } /* ======================================== RESPONSIF (tetap) ≤ 768 px ======================================== */ @media(max-width:768px){ .leader-wrapper{ flex-direction:column; } .leader-photo{ margin-left:0; flex:1 1 100%; text-align:center; } } /* ---------- Timeline Section ---------- */ .timeline-section { padding: 4rem 1rem; } .timeline { display: flex; overflow-x: auto; padding-bottom: 1rem; } .timeline-item { flex: 0 0 200px; margin-right: 2rem; text-align: center; } .timeline-item .year { background: var(--gold); color: var(--blue-upi); font-weight: 600; padding: 0.5rem 1rem; border-radius: 1rem; margin-bottom: 0.5rem; } .timeline-item p { font-size: 0.9rem; } /* ---------- CARD SEJARAH ---------- */ .history-card{ background: var(--card-bg-lt); /* pastel terang */ border: 1px solid var(--card-border-lt); border-radius: .75rem; box-shadow: 0 4px 10px rgba(0,0,0,.04); padding: 2rem var(--content-pad); margin-bottom: 4rem; /* jarak ke card Pimpinan */ } /* dark mode */ body.dark-theme .history-card{ background: var(--box-bg-dk); border: 1px solid rgba(255,255,255,.07); } /* judul */ .history-title{ font-size: 1.75rem; font-weight: 700; margin: 0 0 1.5rem; border-bottom: 4px solid var(--accent); width: max-content; } /* timeline bar (kode Anda sedikit diubah) */ .timeline{ display:flex; overflow-x:auto; gap:2rem; padding-bottom:1rem; } .timeline-item{ flex:0 0 200px; text-align:center; } .timeline-item p{ font-size:.9rem; line-height:1.45; } /* responsive: stack di layar sempit */ @media(max-width:600px){ .timeline{ flex-direction:column; overflow-x:hidden; } .timeline-item{ flex:1 1 auto; } } /* kontainer tempat history-card & leadership-section berada */ .home-body{ display:flex; flex-direction:column; /* <— tumpuk vertikal */ gap:4rem; /* jarak antar-section */ } .history-card, .leadership-section{ width:100%; /* ambil seluruh lebar konten */ box-sizing:border-box; } :root { --yellow-upi: #facc15; /* atau warna kuning branding */ --color-text-dark: #1a1a1a; } .timeline-item .year { background: var(--yellow-upi); /* <- ganti dari biru ke kuning */ color: var(--color-text-dark); /* teks tetap kontras di atas kuning */ font-weight: 600; padding: 0.5rem 1rem; border-radius: 1rem; margin-bottom: 0.5rem; } /* ============================================= 1. DEFINE AKSEN – kuning terang, biru gelap ============================================= */ :root{ --accent: black; /* kuning UPI (light mode default) */ } body.dark-theme{ --accent: #facc15 ; /* biru UPI dipakai hanya di dark mode */ } /* ============================================= 2. APLIKASIKAN AKSEN BARU ============================================= */ /* judul section dengan underline */ .history-title, .leadership-title, .pimpinantitle, /* jika ada kelas lain */ .leadership-section .leader-position { border-bottom-color: var(--accent); } /* tombol umum & chip timeline */ .leader-btn, .pub-btn, .read-more-btn, .timeline-item .year { border-color: var(--accent); background: var(--accent); /* khusus chip year */ color: #fff; } .leader-btn, .pub-btn, .read-more-btn{ background: transparent; color: var(--accent); } .leader-btn:hover, .pub-btn:hover, .read-more-btn:hover{ background: var(--accent); color:#fff; } /* ============================================= 3. TIMELINE – posisi tengah & responsif ============================================= */ .timeline{ display:flex; flex-wrap:wrap; justify-content:center; /* <— tengah di desktop */ gap:2rem; overflow-x:auto; padding-bottom:1rem; } @media(max-width:600px){ .timeline{ flex-direction:column; align-items:center; overflow-x:hidden; } .timeline-item{ width:100%; max-width:350px; } } /* --- Kartu Pembungkus Bagian Pimpinan --- */ .leader-card { background: var(--box-bg-lt); box-shadow: 0 6px 20px rgba(0,0,0,0.05); border-radius: 1rem; padding: 2rem; margin: 2rem auto; max-width: 1200px; transition: background 0.3s ease; } body.dark-theme .leader-card { background: var(--box-bg-dk); } /* --- Layout Flex --- */ .leader-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem; } /* --- Teks Kiri --- */ .leader-info { flex: 1 1 50%; min-width: 260px; } .section-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; border-bottom: 4px solid var(--gold); display: inline-block; } .leader-role { font-weight: 700; color: var(--gold); margin: 1rem 0 0.25rem; } .leader-name { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.75rem; } .leader-desc { line-height: 1.6; margin-bottom: 1rem; } .leader-btn { display: inline-block; padding: 0.6rem 1rem; border: 2px solid var(--gold); border-radius: 0.5rem; color: var(--gold); font-weight: 600; transition: 0.2s ease; } .leader-btn:hover { background: var(--gold); color: white; } /* --- Foto Kanan --- */ .leader-photo { flex: 0 0 300px; text-align: right; } .leader-photo img { max-width: 100%; border-radius: 1rem; margin-top: 0; } /* --- Responsif --- */ @media (max-width: 768px) { .leader-wrapper { flex-direction: column; align-items: center; text-align: center; } .leader-photo { text-align: justify; font-size: 1rem; } } /* ===================================================== TOMBOL SAMA DI MODE TERANG & GELAP ===================================================== */ /* 1. TRANSISI WARNA AKSEN SESUAI TEMA - light : biru ( #1475cf ) - dark : kuning (#facc15) -> sesuaikan jika perlu */ :root{ --btn-accent-light: #facc15 ; /* biru UPI */ } body.dark-theme{ --btn-accent-light: #facc15; /* kuning pastel di dark mode */ } /* 2. BUTTON STATE */ .leader-btn{ display:inline-block; padding:.55rem 1.35rem; border:2px solid black; background:transparent; color: black; border-radius:.4rem; font-weight:600; transition:background .25s ease, color .25s ease; } .leader-btn:hover, .leader-btn:focus{ background:black; color:#fff; } /* optional – sentuhan responsif: lebar penuh di mobile sempit */ @media(max-width:480px){ .leader-btn{ width:100%; text-align:center; } } /* ---------- Strategic Section ---------- */ .strategic-section { padding: 4rem 1rem; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .card-grid .card { background: #fff; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s, box-shadow 0.3s; } .card-grid .card:hover { transform: scale(1.02); box-shadow: 0 4px 10px rgba(0,0,0,0.15); } .card-grid .card i { font-size: 2.5rem; color: var(--gold); margin-bottom: 0.75rem; } /* ===================================================== RESPONSIvITAS PROFIL CELLS UPI ===================================================== */ /* ---------- 1. TIMELINE (sejarah) ---------- */ .history-card{ max-width: 1200px; margin: 2rem auto; } .timeline{ display:flex; flex-wrap:wrap; /* bila cukup ruang, rapat di tengah */ justify-content:center; gap:2rem; overflow-x:auto; /* desktop masih bisa di-scroll geser */ } .timeline-item{ flex:0 0 260px; } @media(max-width:600px){ .timeline{ overflow-x:hidden; flex-direction:column; } .timeline-item{ flex:1 1 100%; max-width:350px; } } /* ---------- 2. PERAN STRATEGIS & KEUNGGULAN ---------- */ .strategic-section{ padding:4rem var(--content-pad); max-width: 1200px; margin:0 auto; } .card-grid{ display:grid; gap:2rem; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); } .card{ background:var(--box-bg-lt); border:1px solid rgba(0,0,0,.05); border-radius:1rem; padding:2rem 1.5rem; text-align:center; box-shadow:0 4px 12px rgb(0 0 0 / .04); transition: transform .3s ease; } .card:hover{ transform:translateY(-6px); } .card i{ font-size:2rem; margin-bottom:1rem; } /* dark-mode */ body.dark-theme .card{ background:var(--box-bg-dk); border:1px solid rgba(255,255,255,.08); } /* ---------- 3. PIMPINAN ---------- */ .leader-card{ background:var(--box-bg-lt); border:1px solid rgba(0,0,0,.05); border-radius:1rem; box-shadow:0 6px 18px rgb(0 0 0 / .05); padding:2rem; max-width:1200px; margin:4rem auto; } body.dark-theme .leader-card{ background:var(--box-bg-dk); border:1px solid rgba(255,255,255,.08); } .leader-wrapper{ display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-start; /* teks & foto rata atas */ } .leader-info{ flex:1 1 50%; min-width:260px; } .leader-photo{ flex:0 0 320px; /* lebar foto fix 320 px */ margin-left:auto; /* dorong ke kanan */ } .leader-photo img{ width:100%; border-radius:1rem; } /* stack di tablet/HP */ @media(max-width:768px){ .leader-wrapper{ flex-direction:column; align-items:center; } .leader-photo{ margin-left:0; } .leader-info{ text-align:center; } } @media(max-width:480px){ .leader-card{ padding:1.5rem 1rem; } .leader-photo{ flex:1 1 100%; max-width:260px; } } /* ---------- 4. GLOBAL BUTTON (Selengkapnya dsb.) ---------- */ :root{ --btn-accent: #1475cf; } /* default biru */ body.dark-theme{ --btn-accent: #facc15; }/* kuning di dark mode */ .leader-btn{ display:inline-block; padding:.55rem 1.35rem; border:2px solid var(--btn-accent); color:var(--btn-accent); border-radius:.45rem; background:transparent; font-weight:600; transition:.25s; } .leader-btn:hover{ background:var(--btn-accent); color:#fff; } /* ---------- 5. MISC ---------- */ .section-title, .history-title, .leadership-title{ margin-bottom:1.5rem; font-size:1.8rem; font-weight:700; border-bottom:4px solid var(--btn-accent); width:max-content; } body.dark-theme .section-title, body.dark-theme .history-title, body.dark-theme .leadership-title{ border-bottom-color:var(--btn-accent); } /* ==== LOGO on History Section ==== */ .logo-history { display: flex; justify-content: center; align-items: center; margin-bottom: 0; } .logo-history img { max-width: 1000px; height: auto; } /* mode gelap */ body.dark-theme .logo-history img { filter: brightness(1.1) contrast(1.1); } /* responsif jika layar kecil */ @media(max-width:600px){ .logo-history img { max-width: 150px; } } /* ========================================== LOGO CELLS – Pusat & Responsif ========================================== */ .logo-history{ width:100%; display:flex; justify-content:center; /* ⟵ posisi horizontal center */ align-items:center; /* jaga vertikal (jika tinggi kontainer bertambah) */ margin:2.5rem 0 2rem; /* jarak atas-bawah dari judul & timeline */ } .logo-history img{ width:100%; /* proporsional terhadap lebar kontainer */ max-width: 1000px; /* batas maksimum di desktop besar */ min-width: 160px; /* jangan terlalu kecil di HP */ height:auto; } /* Breakpoint tablet */ @media (max-width: 768px){ .logo-history img{ width:55%; /* sedikit lebih lebar di layar sedang */ max-width:260px; } } /* Breakpoint ponsel */ @media (max-width: 480px){ .logo-history img{ width:70%; /* isi ruang lebih banyak di HP */ max-width:200px; } } /* Opsional: sesuaikan kontras di dark-mode jika perlu */ body.dark-theme .logo-history img{ filter: brightness(1.05) contrast(1.1); } /* ----------------------------------------- A. Top-navbar dasar (desktop: hidden) ------------------------------------------*/ .top-nav{ display:none; /* default di desktop */ position:fixed; top:0; left:0; right:0; height:56px; background:var(--page-bg-lt); border-bottom:1px solid var(--color-border-hr); align-items:center; justify-content:space-between; padding:0 .75rem; z-index:1000; box-shadow:0 2px 6px rgba(0,0,0,.05); } .top-logo{ height:36px; } /* toggle btn */ .nav-toggle{ background:none; border:none; color:inherit; font-size:1.9rem; cursor:pointer; } /* hidden drop-down */ .mobile-menu{ position:fixed; top:56px; left:0; right:0; background:var(--page-bg-lt); display:none; flex-direction:column; padding:1rem; gap:.5rem; box-shadow:0 4px 12px rgba(0,0,0,.06); } .mobile-menu a{ padding:.65rem .5rem; border-radius:.45rem; text-decoration:none; color:inherit; font-weight:500; } .mobile-menu a:hover{ background:var(--accent); color:#fff; } /* ----------------------------------------- B. DARK THEME adjustments ------------------------------------------*/ body.dark-theme .top-nav{ background:var(--page-bg-dk); border-bottom-color:rgba(255,255,255,.12); box-shadow:0 2px 6px rgba(0,0,0,.4); } body.dark-theme .mobile-menu{ background:var(--page-bg-dk); } body.dark-theme .mobile-menu a:hover{ color:#000; /* teks gelap di latar kuning misalnya */ } /* ----------------------------------------- C. RESPONSIVE BREAKPOINT ------------------------------------------*/ @media(max-width:768px){ /* tampilkan top-nav, sembunyikan sidebar */ .top-nav{ display:flex; } .sidebar{ display:none; } /* berikan offset padding pada konten agar tak tertutup navbar */ .main{ padding-top:56px; } } /* util class saat menu terbuka (JS) */ .mobile-menu.open{ display:flex; } /* CONTACT */ /* ========================================== HIDE INFO BLOCK ON MOBILE / TABLET ========================================== */ @media (max-width: 768px){ .contact-info{ display:none; /* info hilang, hanya form terlihat */ } .contact-form-wrapper{ margin-top: 0; /* hilangkan gap akibat info hilang */ } } /* Optional – center form & responsive padding */ .contact-form-wrapper{ max-width: 480px; margin: 2rem auto; padding: 0 1rem; } /* ===================================================== NEWS ARTICLE – offset konten di bawah top-nav (mobile) ===================================================== */ @media (max-width: 768px){ /* geser seluruh konten di dalam .main-content */ #news-page .main-content{ padding-top: 72px; /* 56 px nav + sedikit jarak */ } /* opsional: jaga judul agar lebih menonjol */ .org-section-title-NEWS{ font-size: 1.6rem; margin-bottom: 1rem; text-align: center; } } /* ======================================================= ANNOUNCEMENTS – STYLE & RESPONSIVE ======================================================= */ .home-announcements{padding:3rem var(--content-pad);} .ann-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;} .ann-track{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;} .ann-card{flex:0 0 260px;background:var(--box-bg-lt);border:1px solid var(--color-border-hr); border-radius:1rem;box-shadow:0 4px 10px rgba(0,0,0,.05);scroll-snap-align:start;} .ann-card img{width:100%;height:140px;object-fit:cover;border-radius:1rem 1rem 0 0;} .ann-meta{font-size:.75rem;color:var(--color-text-secondary);display:flex;gap:.5rem;padding:.65rem 1rem 0;} .ann-title{font-size:.9rem;font-weight:600;padding:0 1rem 1rem;} body.dark-theme .ann-card{background:var(--box-bg-dk);border-color:rgba(255,255,255,.08);} @media(max-width:480px){ .ann-card{flex:0 0 220px;} } #news-list { display: none !important; }