diff --git a/groups/Jellyfish.Corp/images/Charles.jpg b/groups/Jellyfish.Corp/images/Charles.jpg new file mode 100644 index 0000000..bf3db4d Binary files /dev/null and b/groups/Jellyfish.Corp/images/Charles.jpg differ diff --git a/groups/Jellyfish.Corp/images/Dona.jpg b/groups/Jellyfish.Corp/images/Dona.jpg new file mode 100644 index 0000000..5a52140 Binary files /dev/null and b/groups/Jellyfish.Corp/images/Dona.jpg differ diff --git a/groups/Jellyfish.Corp/images/Izhan.jpg b/groups/Jellyfish.Corp/images/Izhan.jpg new file mode 100644 index 0000000..0c6bd91 Binary files /dev/null and b/groups/Jellyfish.Corp/images/Izhan.jpg differ diff --git a/groups/Jellyfish.Corp/index.html b/groups/Jellyfish.Corp/index.html index b6c7844..2d67c35 100644 --- a/groups/Jellyfish.Corp/index.html +++ b/groups/Jellyfish.Corp/index.html @@ -4,6 +4,7 @@ Group 01 – Jellyfish.Corp | Informatika UNTAN + @@ -1143,14 +1144,833 @@
Tugas Halaman Statis -

Judul Halaman Group 01

+

Sekilas Informatika UNTAN

Kelompok 01 — Jellyfish.Corp  ·  Informatika UNTAN 2026

-

Tulis konten halaman kelompok di sini.

-

Subjudul

-

Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.

+ +
+
+
+
+

Sekilas Informatika
Universitas Tanjungpura

+

Mencetak talenta digital unggulan dari Kalimantan Barat untuk Indonesia dan + dunia. Bergabunglah bersama kami dalam perjalanan membangun masa depan teknologi.

+
+ Daftar Sekarang + Pelajari Lebih ↓ +
+
+
+ 2004 + Tahun Berdirinya +
+
+
+ 512 + Mahasiswa Aktif +
+
+
+
+
+
+ + +
+ + +
+
+
+
+ Tentang Prodi +

Mengenal Program Studi Informatika UNTAN

+

Program Studi Informatika Universitas Tanjungpura hadir sejak + 1993 dan merupakan salah satu pusat pengembangan talenta digital di + Kalimantan Barat. Seiring berkembangnya era digital, kami terus berinovasi untuk menjadi + yang terdepan di bidang teknologi informasi yang terus maju. +

+ +
+
+
🎯 Visi
+

Menjadi program studi unggul, inovatif, dan berdaya saing global, dengan fokus pada + informatika cerdas untuk mendukung keberlanjutan dan pemberdayaan masyarakat melalui + solusi teknologi berbasis kearifan lokal.

+
+
+ +
+
πŸ“‹ Misi
+
+
+
1
+
+ Pendidikan OBE Unggul +

Menyelenggarakan pendidikan berbasis informatika cerdas yang unggul dan + inovatif melalui pendekatan OBE untuk menghasilkan lulusan yang kompeten, + adaptif, beretika, dan berdaya saing global.

+
+
+
+
2
+
+ Penelitian untuk SDGs +

Mengembangkan penelitian unggul di bidang informatika cerdas yang mendukung + pencapaian Tujuan Pembangunan Berkelanjutan (SDGs) dan relevan dengan + tantangan lokal maupun global.

+
+
+
+
3
+
+ Pengabdian Berbasis Kearifan Lokal +

Menerapkan dan mengembangkan solusi teknologi berbasis kearifan lokal dalam + kegiatan pengabdian kepada masyarakat untuk memberdayakan komunitas secara + inklusif dan berkelanjutan.

+
+
+
+
4
+
+ Kemitraan Strategis +

Membangun kemitraan strategis dengan industri, pemerintah, dan institusi + akademik untuk memperkuat ekosistem riset, inovasi, dan penerapan + informatika cerdas yang memberikan dampak nyata.

+
+
+
+
5
+
+ Budaya Akademik Beretika +

Menumbuhkan budaya akademik yang beretika, kolaboratif, kreatif, dan + berorientasi pada pembelajaran sepanjang hayat untuk mempersiapkan SDM + unggul menghadapi disrupsi teknologi.

+
+
+
+
+
+ +
+
+
Tonggak Sejarah
+
+
+
2004
+
+
+ Pendirian Program Studi + Penerimaan mahasiswa angkatan pertama diselenggarakan pada tanggal 18 Mei melalui mekanisme seleksi internal dan perpindahan studi dari Program Studi Teknik Elektro. +
+
+
+
2005
+
+
+ SNMPTN Pertama + Penerimaan mahasiswa baru mulai diintegrasikan secara nasional melalui jalur Seleksi Nasional Masuk Perguruan Tinggi Negeri (SNMPTN). +
+
+
+
2006
+
+
+ Akreditasi C + Program studi memperoleh peringkat Akreditasi C dari BAN-PT sebagai langkah awal penjaminan mutu akademik secara sistematis. +
+
+
+
2008
+
+
+ Kelas Malam & SPOTA + Pembukaan program kelas sore/malam serta pengembangan SPOTA (Sistem Pendukung Outline Tugas Akhir) sebagai aplikasi inovatif perdana program studi. +
+
+
+
2016
+
+
+ Akreditasi B + Peningkatan standar mutu akademik yang ditandai dengan pencapaian peringkat Akreditasi B dari BAN-PT. +
+
+
+
2017
+
+
+ Nama Resmi Berubah + Perubahan nomenklatur program studi dari Teknik Informatika menjadi Informatika, serta penyesuaian gelar akademik lulusan dari Sarjana Teknik (S.T.) menjadi Sarjana Komputer (S.Kom.). +
+
+
+
2019
+
+
+ Angkatan PPAPK Terakhir + Penyelenggaraan penerimaan mahasiswa jalur non-reguler (PPAPK) angkatan terakhir sebelum resmi dinonaktifkan. +
+
+
+
2021
+
+
+ EdoXid Lahir + Peluncuran EdoXid, sistem informasi manajemen sidang tugas akhir berbasis digital guna memfasilitasi kebutuhan akademik selama masa pandemi. +
+
+
+
2023
+
+
+ Guru Besar Pertama + Pengukuhan Guru Besar pertama Program Studi Informatika UNTAN, yaitu Prof. Dr. Herry Sujaini, S.T., M.T. +
+
+
+
2025
+
+
+ Kaprodi Ke-5 + Pelantikan Ibu Eva Faja Ripanti, S.Kom., M.M.S.I., Ph.D. sebagai Ketua Program Studi Informatika yang kelima. +
+
+
+
+
+
+
+
+ + +
+
+
+ Data & Statistik +

Informatika UNTAN dalam Angka

+

+

Bukan sekadar angka, ini adalah cerita nyata dari perjalanan panjang Informatika UNTAN. +
+

+
+
+
+
518
+
Mahasiswa Aktif
+
Tahun Akademik 2024/2025
+
+
+
213
+
Total Alumni
+
Data sejak tahun 2022
+
+
+
6 Bulan
+
Waktu Tunggu Kerja
+
Rata-rata lulusan terserap
+
+
+
+
+
Dosen Tetap
+
33
+

Berpengalaman dan bersertifikasi + di bidangnya masing-masing.

+
+
+
Jurnal Ilmiah
+
400+ Jurnal
+
+
πŸ“„ JEPIN  Β·  JUSTIN
+
πŸ“„ JURISTY  Β·  JUARA
+
+
+
+
Guru Besar
+
1 Guru Besar
+

Prof. Dr. Herry Sujaini, S.T., M.T. β€” Guru Besar pertama + Informatika UNTAN (sejak 2023).

+
+
+
+
+
Rasio Dosen : Mahasiswa
+
1 : 11
+
Memenuhi standar BAN-PT
+
+
+
+
+ + +
+
+
+ Prestasi +

Pencapaian Membanggakan

+

+

Dari panggung nasional hingga kolaborasi internasional β€” Informatika UNTAN hadir, + bersaing, dan meninggalkan jejak.
+

+
+
+ + + + +
+
+
+ Kompetisi +

Finalis 10 Besar Competitive Programming Contest (COMPFEST) 17

+

Berhasil meraih posisi 10 besar nasional pada COMPFEST 17, kompetisi pemrograman yang diselenggarakan oleh Universitas Indonesia (UI).

+
πŸ“… 2025 Finalis
+
+
+ Kompetisi +

Tim Regional Terbaik GEMASTIK XVIII bidang Competitive Programming

+

Berhasil menjadi Tim Regional Terbaik pada GEMASTIK XVIII oada bidang Competitive Programming

+
πŸ“… 2025Tim Regional Terbaik
+
+
+ Kompetisi +

International Collegiate Programming Contest predikat Honor

+

Tim competitive programming Informatika UNTAN berhasil lolos ke babak regional ICPC Asia Jakarta 2025.

+
🌏Asia Jakarta Regional Contest 2025Honor
+
+
+ GEMASTIK XVII +

Tim Regional Terbaik GEMASTIK XVII bidang Competitive Programming

+

Berhasil menjadi Tim Regional Terbaik pada GEMASTIK XVII oada bidang Competitive Programming

+
πŸ“… 2024Tim Regional Terbaik
+
+
+ Kompetisi +

LOMBA MTQ TINGKAT PROVINSI KALIMANTAN BARAT PESERTA CABANG TAHFIDZ HADITS GOLONGAN 100 HADIST DENGAN SANAD PUTRI

+

Berpastisipasi pada MTQ tingkat provinsi Kalimantan Barat cabang Tahfidz Hadits 100 Hadits Bersanad Putri

+
πŸ“… 2024PESERTA
+
+
+ Publikasi +

Customer Relationship Management (CRM) System pada Peningkatan Layanan Pengguna E-Learning

+

Penulis: EF Ripanti, EE Pratama, F Asrin. +Penelitian ini mengkaji penerapan sistem CRM untuk meningkatkan kualitas layanan dan kepuasan pengguna pada platform e-learning.

+
πŸ“… 2025
+
+
+ Publikasi +

REKOMENDASI AREA PEMASARAN BAGI PEDAGANG SAYUR KELILING MENGGUNAKAN METODE DBSCAN DAN VISUALISASI HEATMAP

+

Penulis: DA Nugraha, IY Sholva, EE Pratama. +Penelitian ini memanfaatkan metode BSCAN dan visualisasi heatmap untuk merekomendasikan area pemasaran yang potensial bagi pedagang sayur keliling.

+
πŸ“… 2024
+
+
+ Publikasi +

Data mining untuk pengelompokan saham pada sektor energi dengan metode k-means

+

Penulis: AS Sukamto, W Setiawan, EE Pratama. +Penelitian ini menerapkan algoritma K-Means untuk mengelompokkan saham sektor energi berdasarkan karakteristik data yang serupa guna mendukung analisis investasi.

+
πŸ“… 2023
+
+
+ Pengabdian Masyarakat +

KODINGMU PLATFORM BELAJAR COMPUTATIONAL THINKING BAGI SISWA SMAN 1 MEMPAWAH HILIR

+

Kegiatan pengabdian yang bertujuan meningkatkan kemampuan berpikir komputasional dan pemecahan masalah siswa melalui pelatihan serta pemanfaatan platform pembelajaran Kodingmu berbasis aktivitas pemrograman yang interaktif dan menyenangkan.

+
πŸ“… 2025
+
+
+ Inovasi Aplikasi +

SPOTA (2008)

+

Sistem Pendukung Outline Tugas Akhir β€” lahir dari ide dosen, dibangun mahasiswa, masih + digunakan hingga kini. Inovasi yang melampaui zamannya.

+
πŸ“… 2008πŸ’‘ Masih aktif
+
+
+ Inovasi Aplikasi +

EdoXid (2021)

+

Sistem pengajuan sidang digital β€” hadir menjawab pandemi, kini naik kelas ke skala Fakultas + MIPA Universitas Tanjungpura.

+
πŸ“… 2021πŸš€ Skala Fakultas
+
+
+
+
+ + +
+
+
+ Komunitas +

Study Club

+

+

Study Club hadir sebagai wadah pengembangan kompetensi mahasiswa melalui peminatan yang + terstruktur dan berbasis komunitas. Setiap study club dirancang untuk memperdalam keahlian + spesifik di bidang informatika.
+

+
+
+
+
πŸ’»
+
ARISE
+
  Competitive Programming
+

Program kerja ini berfokus pada peminatan competitive programming. Mahasiswa dilatih + untuk mengasah kemampuan pemecahan masalah dan algoritma melalui kompetisi pemrograman + bergengsi tingkat nasional maupun internasional.

+
+
+
πŸ› οΈ
+
Software Development
+
  Software Development
+

Berfokus pada peminatan software development. Materi yang diajarkan meliputi fundamental + dasar web, version control (GitHub), software development life cycle, Entity Relationship + Diagram, tech-stack, dan use case.

+
+
+
πŸ“Š
+
MINERVA
+
  Data Mining
+

Berfokus pada peminatan data mining. Mahasiswa akan mendalami teknik penggalian data, + analisis statistik, dan penerapannya dalam berbagai domain industri untuk menghasilkan + insight yang bernilai.

+
+
+
+
+ Bergabung dengan Study Club + Study club ini terbuka bagi seluruh mahasiswa aktif Prodi Informatika UNTAN. Pilih + peminatan yang sesuai dengan minat dan tujuan karirmu. +
+ Info Lebih Lanjut β†’ +
+
+
+ + +
+
+
+
+ Karir +

Masa Depan Lulusan Informatika

+

Lulusan Informatika UNTAN bukan hanya pencari kerja β€” mereka + pencipta solusi.

+

Lulusan Prodi Informatika UNTAN diserap secara luas oleh industri teknologi, instansi + pemerintah, BUMN, dan startup. Dengan bekal kompetensi digital yang kuat, karir cemerlang + menanti di berbagai sektor strategis.

+
+ Bidang Karir Lainnya: +
+ IT Project Manager + Database Admin + Cloud Architect + Game Developer + Business Intelligence + IoT Engineer + Akademisi / Dosen +
+
+
+
+
+
Software Engineer
+
+ BackendFrontendMobile DevDevOps +
+
Gojek, Tokopedia, Traveloka, Startup
+
+
+
Data & AI Specialist
+
+ Data ScientistML EngineerAI + ResearcherBusiness Analyst +
+
Bank, BUMN, Fintech
+
+
+
Cybersecurity
+
+ Penetration TesterSecurity AnalystNetwork + Engineer +
+
BSSN, Kominfo, Perbankan
+
+
+
Wirausaha Digital
+
+ Founder StartupFreelancerDigital + ConsultantE-commerce +
+
Mandiri, Remote Work
+
+
+
+
+
+ + +
+
+
+ Alumni +

Kisah Sukses Alumni

+

+

Mereka adalah bukti nyata bahwa Informatika UNTAN adalah batu loncatan menuju karir + gemilang β€” dari Pontianak, ke panggung dunia.
+

+
+
+
+
+
IF +
+
+
Izhan Fakhruzi
+
Informatika, Angkatan 2005
+
+
+
+
+ +
+
+
+ Dosen UM Pontianak + PhD Candidate Granada +
+

Alumni Informatika UNTAN angkatan 2005 yang membangun fondasi kuat di bidang komputasi, + melanjutkan studi magister di Marmara University melalui beasiswa TΓΌrkiye BurslarΔ±, + berkarier sebagai dosen di Universitas Muhammadiyah Pontianak, dan kini menempuh doktoral di + Universidad de Granada dengan fokus pada kecerdasan buatan untuk sistem transportasi cerdas + dan informatika kesehatan.

+
+
+
+
+
CD +
+
+
Charles Darwis Hariman
+
Informatika, Angkatan 2018
+
+
+
+
+ +
+
+
+ Software Developer + FinTech Travixy Frankfurt +
+

Alumni Informatika UNTAN dengan kemampuan kuat dalam pemrograman dan problem solving, + melanjutkan studi master di Saarland University Jerman dengan riset kecerdasan buatan + bertaraf internasional, lalu berkarier sebagai Software Developer di perusahaan FinTech + Travixy Frankfurt, mengembangkan platform pembiayaan yang menggerakkan transaksi bernilai + miliaran Euro.

+
+
+
+
+
DP +
+
+
Dona Pramana Putra
+
Informatika, Angkatan 2006
+
+
+
+
+ +
+
+
+ Product Team + AI Rudder +
+

Alumni Informatika UNTAN angkatan 2006 yang kini berkarier sebagai Product Team di AI Rudder, + berbekal pengalaman pembelajaran berbasis proyek selama kuliah, melanjutkan studi S2 di + China melalui beasiswa, serta berkontribusi dalam industri kecerdasan buatan dengan + perspektif global.

+
+
+
+
+
+ + +
+
+
+ Infrastruktur +

Infrastruktur dan Fasilitas

+

+

Fasilitas lengkap dan modern untuk mendukung proses belajar, penelitian, dan inovasi + mahasiswa.
+

+
+
+
+
+
πŸ–₯️
+
8 Laboratorium
+

Lab Pemrograman, Jaringan, Multimedia, IoT, AI, Basis Data, Mobile Dev, dan Keamanan Siber β€” + ber-AC, High-Speed PC.

+
8 Lab Aktif & Berteknologi
+
+
+
☁️
+
Data Center
+

Server on-premise dengan infrastruktur cloud lokal berkapasitas tinggi untuk penelitian dan + deployment aplikasi.

+
99.9% Uptime Β· Redundant
+
+
+
πŸš€
+
IFUNTANHUB
+

Platform PaaS eksklusif mahasiswa untuk deploy aplikasi, hosting proyek, akses GPU computing, + dan kolaborasi tim.

+
Gratis Β· GPU Access
+
+
+
πŸ“š
+
E-Resources
+

Akses jurnal internasional Scopus, IEEE Xplore, ACM Digital Library, Springer, dan database + ilmiah lainnya.

+
IEEE Β· Scopus Β· ACM
+
+
+
+ Lisensi Perangkat Lunak Tersedia: +
+ Microsoft Office 365 + JetBrains IDE + Adobe Creative Cloud + GitHub Enterprise + Figma Education + MATLAB + Cisco Packet Tracer + AWS Academy +
+
+
+
+ + +
+
+
+ Kerjasama +

Mitra Strategis Informatika UNTAN

+

+

Dibangun di atas kepercayaan dan kolaborasi dengan perusahaan teknologi, instansi + pemerintah, dan lembaga pendidikan terkemuka.
+

+
+ +
Industri & Swasta
+
+
+ +
PT. Indosat Ooredoo
+
+
+ +
PT. PLN Nusantara
+
+
+ +
Instansi Pemerintah
+
+
+
Diskominfo Kalbar
+
+
+
POLDA Kalbar
+
+
+
Bappeda Sambas
+
+
+
Bappeda Sintang
+
+
+
Bappeda Bengkayang
+
+
+
BKPSDM
+
+
+
BPBD Sintang
+
+
+
BKD Pontianak
+
+
+
Disperkim Singkawang
+
+
+ +
Perguruan Tinggi & Lembaga Riset
+
+
+
UNIMAS Malaysia
+
+
+
UUM Malaysia
+
+
+
UCS Sarawak
+
+
+
UTEM Malaysia
+
+
+
IPB Indonesia
+
+
+
Polnep
+
+
+
Poltekkes Pontianak
+
+
+
+
+ + +
+
+
+ Video Profil +

Profil Fakultas Teknik UNTAN

+

+

Kenali lebih dekat Fakultas Teknik Universitas Tanjungpura melalui video profil resmi + berikut.
+

+
+ +
+
+ + + +
+
+
+ Bergabung Bersama Kami +

Mulai Perjalanan Digital Anda Bersama + Kami

+

Jadilah bagian dari komunitas informatika terbaik di Kalimantan Barat. Daftarkan diri Anda + sekarang dan wujudkan impian karir teknologi bersama Informatika UNTAN.

+
+ Daftar Mahasiswa Baru + πŸ’¬ Chat WhatsApp +
+
+
+
+
Informasi Kontak
+
+
+
πŸ“
+
+
Alamat
+
Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. + Pontianak Tenggara, Kota Pontianak, Kalimantan Barat 78124
+
+
+
+
βœ‰οΈ
+
+
Email
+
info@informatika.untan.ac.id
+
+
+
+
πŸ’¬
+
+
WhatsApp
+
+62 851-7165-5161
Senin – Jumat, 08.00 – 16.00 + WIB
+
+
+
+
πŸ“ž
+
+
Telepon / Fax
+
+62(561) 739637
+
+
+
+
+
+
+
+ +
diff --git a/groups/Jellyfish.Corp/script.js b/groups/Jellyfish.Corp/script.js new file mode 100644 index 0000000..9503479 --- /dev/null +++ b/groups/Jellyfish.Corp/script.js @@ -0,0 +1,364 @@ +// ===== LANGUAGE TOGGLE ===== + let currentLang = 'id'; + + function setLangLabel(lang) { + const nextLang = lang === 'id' ? 'EN' : 'ID'; + const labelDesktop = document.getElementById('lang-label'); + const labelMobile = document.getElementById('lang-label-mobile'); + if (labelDesktop) labelDesktop.textContent = nextLang; + if (labelMobile) labelMobile.textContent = nextLang; + } + + function applyLang(lang) { + const pageBody = document.getElementById('page-body'); + pageBody.classList.toggle('lang-id', lang === 'id'); + pageBody.classList.toggle('lang-en', lang === 'en'); + document.documentElement.lang = lang; + } + + function toggleLang() { + currentLang = currentLang === 'id' ? 'en' : 'id'; + applyLang(currentLang); + setLangLabel(currentLang); + } + + document.getElementById('lang-toggle')?.addEventListener('click', toggleLang); + document.getElementById('lang-toggle-mobile')?.addEventListener('click', toggleLang); + + // ===== SCROLL REVEAL ===== + function initScrollReveal() { + const revealEls = document.querySelectorAll('.reveal'); + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.1 }); + revealEls.forEach(el => observer.observe(el)); + } + initScrollReveal(); + + // ===== BACK TO TOP ===== + function initBackToTop() { + const btn = document.getElementById('back-to-top'); + if (!btn) return; + + btn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' })); + + window.addEventListener('scroll', () => { + const isPastThreshold = window.scrollY > 400; + btn.classList.toggle('hidden', !isPastThreshold); + btn.classList.toggle('flex', isPastThreshold); + }); + } + initBackToTop(); + + // ===== PRESTASI FILTER ===== + function setActiveTabStyle(btn, isActive) { + btn.classList.toggle('bg-untan-navy', isActive); + btn.classList.toggle('text-white', isActive); + btn.classList.toggle('bg-white', !isActive); + btn.classList.toggle('text-slate-700', !isActive); + btn.classList.toggle('border', !isActive); + btn.classList.toggle('border-slate-200',!isActive); + } + + function filterPrestasi(category) { + document.querySelectorAll('.prestasi-tab-btn').forEach(btn => { + setActiveTabStyle(btn, btn.dataset.tab === category); + }); + document.querySelectorAll('#prestasi-grid .prestasi-card').forEach(card => { + card.style.display = (category === 'all' || card.dataset.category === category) ? '' : 'none'; + }); + } + + function initPrestasiFilter() { + document.querySelectorAll('.prestasi-tab-btn').forEach(btn => { + btn.addEventListener('click', () => filterPrestasi(btn.dataset.tab)); + }); + } + initPrestasiFilter(); + + // ===== MEGA MENU ===== + (function initMegaMenu() { + const menuItems = document.querySelectorAll('[data-menu]'); + if (!menuItems.length) return; + + let activeMenuId = null; + + function closeAllMenus() { + document.querySelectorAll('.mega-panel').forEach(p => p.classList.remove('active')); + updateButtonStates(null); + activeMenuId = null; + } + + function updateButtonStates(openMenuId) { + menuItems.forEach(item => { + const isActive = item.getAttribute('data-menu') === openMenuId; + const btn = item.querySelector('.nav-menu-btn'); + const chevron = item.querySelector('.fa-chevron-down'); + if (btn) { + btn.classList.toggle('active', isActive); + btn.setAttribute('aria-expanded', isActive ? 'true' : 'false'); + } + if (chevron) chevron.style.transform = isActive ? 'rotate(180deg)' : ''; + }); + } + + menuItems.forEach(item => { + const menuId = item.getAttribute('data-menu'); + const btn = item.querySelector('.nav-menu-btn'); + if (!btn) return; + + btn.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + if (activeMenuId === menuId) { + closeAllMenus(); + } else { + closeAllMenus(); + updateButtonStates(menuId); + activeMenuId = menuId; + } + }); + }); + + document.addEventListener('keydown', e => { if (e.key === 'Escape') closeAllMenus(); }); + document.addEventListener('click', e => { if (!e.target.closest('#main-nav') && activeMenuId) closeAllMenus(); }); + })(); + + // ===== MOBILE MENU ===== + function initMobileMenu() { + const menuBtn = document.getElementById('mobile-menu-btn'); + const menu = document.getElementById('mobile-menu'); + const closeBtn = document.getElementById('close-mobile-menu'); + + if (menuBtn && menu) { + menuBtn.addEventListener('click', () => { + const isOpen = menu.classList.toggle('-translate-x-full') === false; + menuBtn.setAttribute('aria-expanded', String(isOpen)); + }); + } + if (closeBtn && menu) { + closeBtn.addEventListener('click', () => menu.classList.add('-translate-x-full')); + } + } + initMobileMenu(); + + // ===== LUCO CHATBOT BUBBLE ===== + function initLucoBubble() { + const bubble = document.getElementById('luco-bubble'); + const closeBtn = document.getElementById('luco-bubble-close'); + + if (!bubble) return; + + setTimeout(() => bubble.classList.remove('hidden'), 3000); + + closeBtn?.addEventListener('click', (e) => { + e.stopPropagation(); + bubble.classList.add('hidden'); + }); + } + initLucoBubble(); + + // ===== #ASSIGNMENT-BODY ENHANCEMENTS ===== + (function initAssignmentBody() { + const body = document.getElementById('assignment-body'); + if (!body) return; + + // --- 1. Scroll-reveal untuk setiap child langsung --- + const revealTargets = body.querySelectorAll('h3, h4, p, ul, table, figure'); + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry, i) => { + if (entry.isIntersecting) { + setTimeout(() => entry.target.classList.add('visible'), i * 60); + revealObserver.unobserve(entry.target); + } + }); + }, { threshold: 0.08 }); + + revealTargets.forEach(el => { + el.classList.add('ab-reveal'); + revealObserver.observe(el); + }); + + // --- 2. Collapsible: Alumni & Mitra (sections yang panjang) --- + // Wrap konten setelah h3 "Kisah Sukses Alumni" dalam collapsible + const allH3 = [...body.querySelectorAll('h3')]; + const collapsibleTitles = ['Kisah Sukses Alumni', 'Mitra Strategis', 'Fasilitas Akademik']; + + allH3.forEach(h3 => { + if (!collapsibleTitles.includes(h3.textContent.trim())) return; + + // Kumpulkan sibling sampai h3 berikutnya + const siblings = []; + let next = h3.nextElementSibling; + while (next && next.tagName !== 'H3') { + siblings.push(next); + next = next.nextElementSibling; + } + if (!siblings.length) return; + + // Buat wrapper collapsible + const wrapper = document.createElement('div'); + wrapper.className = 'ab-collapsible'; + h3.parentNode.insertBefore(wrapper, siblings[0]); + siblings.forEach(s => wrapper.appendChild(s)); + + // Buat tombol toggle + const btn = document.createElement('button'); + btn.className = 'ab-readmore-btn'; + btn.innerHTML = 'Lihat Detail β–Ό'; + btn.setAttribute('aria-expanded', 'false'); + h3.insertAdjacentElement('afterend', btn); + + btn.addEventListener('click', () => { + const isOpen = wrapper.classList.toggle('open'); + btn.classList.toggle('open', isOpen); + btn.innerHTML = isOpen + ? 'Sembunyikan β–Ό' + : 'Lihat Detail β–Ό'; + btn.setAttribute('aria-expanded', String(isOpen)); + }); + }); + + // --- 3. Table row highlight on click --- + body.querySelectorAll('tbody tr').forEach(row => { + row.style.cursor = 'pointer'; + row.addEventListener('click', () => { + body.querySelectorAll('tbody tr.selected').forEach(r => r.classList.remove('selected')); + row.classList.add('selected'); + row.style.background = '#dbeafe'; + row.style.fontWeight = '600'; + setTimeout(() => { + row.style.background = ''; + row.style.fontWeight = ''; + row.classList.remove('selected'); + }, 1800); + }); + }); + + // --- 4. Callout block: inject setelah paragraf karir --- + const pEls = [...body.querySelectorAll('p')]; + const kariPara = pEls.find(p => p.textContent.includes('Rp 5–12 Juta')); + if (kariPara) { + const callout = document.createElement('div'); + callout.className = 'ab-callout ab-reveal'; + callout.textContent = '87% lulusan bekerja di bidang IT sesuai kompetensi, dengan rata-rata waktu tunggu kerja kurang dari 3 bulan.'; + kariPara.insertAdjacentElement('afterend', callout); + revealObserver.observe(callout); + } + + // --- 5. Tambahkan section label di atas setiap h3 --- + const sectionMap = { + 'Mengenal Program Studi': 'Tentang Prodi', + 'Visi': 'Identitas', + 'Misi': 'Identitas', + 'Tonggak Sejarah': 'Sejarah', + 'dalam Angka': 'Data & Statistik', + 'Pencapaian': 'Prestasi', + 'Study Club': 'Komunitas', + 'Prospek Karir': 'Karir', + 'Kisah Sukses': 'Alumni', + 'Fasilitas': 'Infrastruktur', + 'Mitra Strategis': 'Kerjasama', + 'Informasi Kontak': 'Kontak', + }; + allH3.forEach(h3 => { + const key = Object.keys(sectionMap).find(k => h3.textContent.includes(k)); + if (!key) return; + const label = document.createElement('div'); + label.className = 'ab-section-label'; + label.textContent = sectionMap[key]; + h3.insertAdjacentElement('beforebegin', label); + }); + + })(); + +// ===================================================== +// JELLYFISH.CORP β€” MOCKUP SCRIPTS +// ===================================================== + +// ===== PRESTASI FILTER (new jf-* classes) ===== +(function initPrestasiFilterJF() { + const tabs = document.querySelectorAll('.jf-tab-btn'); + const cards = document.querySelectorAll('#prestasi-grid .jf-prestasi-card'); + if (!tabs.length) return; + + tabs.forEach(tab => { + tab.addEventListener('click', () => { + tabs.forEach(t => t.classList.remove('jf-tab-active')); + tab.classList.add('jf-tab-active'); + const filter = tab.dataset.filter; + cards.forEach(card => { + const show = filter === 'all' || card.dataset.cat === filter; + card.style.display = show ? '' : 'none'; + if (show) { + card.style.animation = 'jfFadeIn 0.35s ease forwards'; + } + }); + }); + }); +})(); + +// ===== SCROLL REVEAL for jf-* cards ===== +(function initJFScrollReveal() { + const targets = document.querySelectorAll( + '.jf-stat-card, .jf-stat-row-card, .jf-prestasi-card, ' + + '.jf-sc-card, .jf-karir-card, .jf-alumni-card, ' + + '.jf-infra-card, .jf-mitra-card, .jf-life-card, ' + + '.jf-tl-item, .jf-visi-card, .jf-kontak-item' + ); + targets.forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(24px)'; + el.style.transition = 'opacity 0.55s ease, transform 0.55s ease'; + }); + + const obs = new IntersectionObserver((entries) => { + entries.forEach((entry, i) => { + if (entry.isIntersecting) { + setTimeout(() => { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + }, i * 70); + obs.unobserve(entry.target); + } + }); + }, { threshold: 0.08 }); + + targets.forEach(el => obs.observe(el)); +})(); + +// ===== ANIMATED COUNTER for jf-stat-num ===== +(function initJFCounters() { + const nums = document.querySelectorAll('.jf-stat-num'); + const obs = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (!entry.isIntersecting) return; + const el = entry.target; + const raw = el.textContent.trim(); + const num = parseFloat(raw.replace(/[^0-9.]/g, '')); + if (isNaN(num) || num === 0) return; + const suffix = raw.replace(/[0-9.,]/g, ''); + const prefix = raw.startsWith('<') ? '<' : ''; + const cleanSuffix = prefix ? suffix : suffix; + let start = 0; + const duration = 1400; + const step = 16; + const increment = num / (duration / step); + const timer = setInterval(() => { + start += increment; + if (start >= num) { start = num; clearInterval(timer); } + const display = num % 1 === 0 + ? Math.floor(start).toLocaleString('id-ID') + : start.toFixed(0); + el.textContent = prefix + display + cleanSuffix; + }, step); + obs.unobserve(el); + }); + }, { threshold: 0.5 }); + nums.forEach(el => obs.observe(el)); +})(); \ No newline at end of file diff --git a/groups/Jellyfish.Corp/style.css b/groups/Jellyfish.Corp/style.css index c31a92b..86834dc 100644 --- a/groups/Jellyfish.Corp/style.css +++ b/groups/Jellyfish.Corp/style.css @@ -1,47 +1,2701 @@ -:root { - --brand-navy: #003150; - --brand-yellow: #feb401; - --text-main: #1e293b; - --text-soft: #64748b; - --bg-soft: #f8fafc; - --line: #e2e8f0; +* { + font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } -* { box-sizing: border-box; } -html, body { margin: 0; padding: 0; } -body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; } -.container { width: min(1100px, 92%); margin-inline: auto; } +body { + font-family: 'Roboto Condensed', sans-serif !important; +} -.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; } -.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; } +h1, h2, h3, h4, h5, h6 { + font-family: 'Roboto Condensed', sans-serif; +} +/* ===== BASE ===== */ + html { overflow-x: clip; scroll-behavior: smooth; } -.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; } -.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); } -.hero-inner { position: relative; z-index: 1; padding: 36px 0; } -.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; } -.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; } + #nav-wrapper { + transform: translateZ(0); + -webkit-transform: translateZ(0); + backface-visibility: hidden; + } -.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; } -@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } } + @media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + transition-duration: 0.01ms !important; + } + } -.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; } -.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; } -.cover img { width: 100%; height: auto; display: block; } + .skip-link { + position: absolute; top: -40px; left: 0; + background: #003150; color: white; + padding: 8px 16px; z-index: 100; transition: top 0.3s; + } + .skip-link:focus { top: 0; } + :focus-visible { outline: 3px solid #feb401; outline-offset: 2px; } -.article-body > * + * { margin-top: 1.1em; } -.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; } -.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; } -.article-body p { margin: 0 0 1em; } -.article-body ul, .article-body ol { padding-left: 1.4rem; } -.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; } -.article-body a { color: #005eb8; } -.article-body img { max-width: 100%; border-radius: 8px; } -.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } + /* ===== MEGA MENU ===== */ + .mega-panel { + opacity: 0; visibility: hidden; + transition: opacity 0.2s ease, visibility 0.2s ease; + position: absolute; top: 100%; left: 0; right: 0; + } + .mega-panel.active { opacity: 1; visibility: visible; } -.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; } -.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; } + .mega-link-card { + display: flex; align-items: flex-start; gap: 1rem; + padding: 1rem; border-radius: 0.75rem; + border: 1px solid #e2e8f0; background: white; + transition: all 0.2s ease; + } + .mega-link-card:hover { + border-color: #3b82f6; + box-shadow: 0 4px 12px rgba(59,130,246,0.15); + transform: translateY(-2px); + } + .mega-link-icon { + width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; + display: flex; align-items: center; justify-content: center; + flex-shrink: 0; transition: all 0.2s ease; + } + .nav-menu-btn.active { background: rgba(255,255,255,0.9); color: #1e40af; } + .nav-menu-btn:hover { background: rgba(255,255,255,0.8); } + #main-nav { position: relative; } + #mega-menu-container { position: absolute; top: 100%; left: 0; right: 0; pointer-events: none; } + #mega-menu-container .mega-panel { pointer-events: auto; } + .nav-menu-item { position: relative; } + .nav-menu-item::after { content: ''; position: absolute; bottom: -12px; left: 0; right: 0; height: 12px; } -.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); } -.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; } -.footer-logo { height: 28px; width: auto; } -.footer-ornament { width: 100%; display: block; opacity: .9; } + /* ===== SEKILAS PAGE STYLES ===== */ + + /* Hero */ + .hero-section { + background: linear-gradient(135deg, #003150 0%, #005eb8 50%, #00b5e2 100%); + position: relative; overflow: hidden; + } + .hero-section::before { + content: ''; + position: absolute; inset: 0; + background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + } + + /* Stats */ + .stat-card { + background: white; border-radius: 1rem; + padding: 1.75rem 1.5rem; + box-shadow: 0 4px 24px rgba(0,0,0,0.08); + border-bottom: 4px solid transparent; + transition: all 0.3s ease; text-align: center; + } + .stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.14); } + .stat-card.blue { border-color: #005eb8; } + .stat-card.yellow { border-color: #feb401; } + .stat-card.cyan { border-color: #00b5e2; } + .stat-card.green { border-color: #10b981; } + .stat-num { font-size: 2.5rem; font-weight: 900; font-family: 'Roboto Condensed', sans-serif; line-height: 1; } + .stat-num.blue { color: #005eb8; } + .stat-num.yellow { color: #feb401; } + .stat-num.cyan { color: #00b5e2; } + .stat-num.green { color: #10b981; } + + /* Section titles */ + .section-badge { + display: inline-block; + background: #feb401; color: #1e293b; + font-size: 0.65rem; font-weight: 800; + letter-spacing: 0.18em; text-transform: uppercase; + padding: 0.25rem 0.75rem; margin-bottom: 0.75rem; + } + .section-title { + font-family: 'Playfair Display', serif; + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: 800; color: #0f172a; line-height: 1.15; + } + + /* Akreditasi */ + .akreditasi-badge { + background: linear-gradient(135deg, #003150, #005eb8); + border-radius: 1.25rem; padding: 2.5rem; + color: white; position: relative; overflow: hidden; + } + .akreditasi-badge::before { + content: ''; + position: absolute; top: -50%; right: -10%; + width: 250px; height: 250px; + background: rgba(254,180,1,0.15); border-radius: 50%; + } + .grade-badge { + width: 120px; height: 120px; border-radius: 50%; + background: #feb401; display: flex; flex-direction: column; + align-items: center; justify-content: center; + box-shadow: 0 8px 32px rgba(254,180,1,0.4); + } + .grade-letter { font-size: 3rem; font-weight: 900; color: #003150; line-height: 1; font-family: 'Roboto Condensed', sans-serif; } + .grade-label { font-size: 0.6rem; font-weight: 700; color: #003150; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; } + + /* Prestasi cards */ + .prestasi-card { + background: white; border-radius: 1rem; + border: 1px solid #e2e8f0; + padding: 1.5rem; transition: all 0.3s ease; + border-left: 4px solid transparent; + } + .prestasi-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); border-left-color: #feb401; } + + /* Karir */ + .karir-chip { + display: inline-flex; align-items: center; gap: 0.4rem; + background: #f0f9ff; color: #0369a1; + border: 1px solid #bae6fd; border-radius: 2rem; + padding: 0.3rem 0.9rem; font-size: 0.8rem; font-weight: 600; + transition: all 0.2s; + } + .karir-chip:hover { background: #005eb8; color: white; border-color: #005eb8; } + + /* Fasilitas */ + .fasilitas-card { + background: white; border-radius: 1rem; + overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); + transition: all 0.3s ease; border: 1px solid #f1f5f9; + } + .fasilitas-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.14); } + .fasilitas-icon-wrap { + height: 130px; display: flex; align-items: center; justify-content: center; + } + + /* Kerjasama logos */ + .mitra-logo { + background: white; border: 1px solid #e2e8f0; border-radius: 0.75rem; + padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: center; + transition: all 0.3s; min-height: 80px; + } + .mitra-logo:hover { border-color: #005eb8; box-shadow: 0 4px 16px rgba(0,94,184,0.12); transform: scale(1.03); } + + /* Video section */ + .video-wrapper { + position: relative; padding-bottom: 56.25%; height: 0; + overflow: hidden; border-radius: 1rem; + box-shadow: 0 20px 60px rgba(0,0,0,0.25); + } + .video-wrapper iframe { + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; border: 0; + } + + /* Contact CTA */ + .cta-section { + background: linear-gradient(135deg, #003150 0%, #004a80 100%); + position: relative; overflow: hidden; + } + .cta-section::after { + content: ''; + position: absolute; bottom: 0; left: 0; right: 0; + height: 4px; background: #feb401; + } + + /* Animations */ + @keyframes fadeInUp { + from { opacity: 0; transform: translateY(24px); } + to { opacity: 1; transform: translateY(0); } + } + @keyframes pulse-ring { + 0% { transform: scale(1); opacity: 0.7; } + 100% { transform: scale(1.35); opacity: 0; } + } + + .animate-fade-in { animation: fadeInUp 0.7s ease forwards; } + .animate-fade-in-2 { animation: fadeInUp 0.7s 0.15s ease both; } + .animate-fade-in-3 { animation: fadeInUp 0.7s 0.3s ease both; } + .animate-fade-in-4 { animation: fadeInUp 0.7s 0.45s ease both; } + + .pulse-ring::before { + content: ''; position: absolute; inset: -6px; border-radius: 50%; + border: 3px solid #feb401; animation: pulse-ring 2s infinite; + } + + /* Scroll reveal */ + .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.65s ease, transform 0.65s ease; } + .reveal.visible { opacity: 1; transform: translateY(0); } + + /* Luco chatbot */ + @keyframes slideInRight { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } + @keyframes lucoPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } + #luco-container { animation: slideInRight 0.5s ease-out forwards; } + #luco-btn { animation: lucoPulse 2s ease-in-out infinite; } + #luco-btn:hover { animation: none; } + + .luco-bubble-tail { + position: absolute; right: 24px; bottom: -6px; + width: 12px; height: 12px; + background: white; transform: rotate(45deg); + border-right: 1px solid #e2e8f0; + border-bottom: 1px solid #e2e8f0; + } + + /* Timeline dots */ + .timeline-item { position: relative; padding-left: 2.5rem; } + .timeline-item::before { + content: ''; position: absolute; left: 8px; top: 0.5rem; + width: 10px; height: 10px; border-radius: 50%; + background: #feb401; border: 2px solid #003150; + } + .timeline-item::after { + content: ''; position: absolute; left: 12px; top: 1.2rem; + bottom: -0.5rem; width: 2px; background: #e2e8f0; + } + .timeline-item:last-child::after { display: none; } + + /* Divider */ + .section-divider { height: 4px; background: linear-gradient(90deg, #003150, #005eb8, #00b5e2, #feb401); border: none; margin: 0; } + + /* ===== ASSIGNMENT BODY ===== */ + + /* Shell layout tambahan */ + .nav { background: #003150; padding: 1rem 0; } + .nav .brand { color: white; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; } + .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } + + .hero { position: relative; background: linear-gradient(135deg, #003150 0%, #005eb8 60%, #00b5e2 100%); min-height: 320px; display: flex; align-items: flex-end; overflow: hidden; } + .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; } + .hero-inner { position: relative; z-index: 1; padding: 2.5rem 1.5rem 3rem; } + .badge { display: inline-block; background: #feb401; color: #003150; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.25rem 0.85rem; border-radius: 2rem; margin-bottom: 0.9rem; } + .hero h1 { color: white; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; margin: 0; } + + .layout { display: grid; grid-template-columns: 1fr 280px; gap: 2.5rem; margin-top: 2.5rem; margin-bottom: 3rem; align-items: start; } + @media (max-width: 768px) { .layout { grid-template-columns: 1fr; } } + + .meta { display: flex; gap: 1.25rem; font-size: 0.8rem; color: #64748b; font-weight: 600; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.08em; } + .meta span { display: flex; align-items: center; gap: 0.35rem; } + .meta span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #feb401; } + + .cover { margin: 0 0 2rem; border-radius: 1rem; overflow: hidden; box-shadow: 0 8px 32px rgba(0,49,80,0.15); } + .cover img { width: 100%; display: block; } + + .note { background: linear-gradient(135deg, #003150, #005eb8); color: white; border-radius: 1rem; padding: 1.5rem; position: sticky; top: 1.5rem; } + .note h3 { color: #feb401; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 0.75rem; } + .note p { font-size: 0.85rem; line-height: 1.6; margin: 0; opacity: 0.9; } + .note code { background: rgba(254,180,1,0.2); color: #feb401; padding: 0.1rem 0.4rem; border-radius: 0.3rem; font-size: 0.8rem; } + + .footer { background: #001a2e; color: white; padding: 2rem 0 0; position: relative; overflow: hidden; } + .footer-inner { display: flex; align-items: center; gap: 1.25rem; padding-bottom: 1.5rem; } + .footer-logo { height: 40px; filter: brightness(0) invert(1); opacity: 0.8; } + .footer p { margin: 0; opacity: 0.6; font-size: 0.85rem; } + .footer-ornament { width: 100%; display: block; opacity: 0.15; } + + /* ===== #assignment-body INTERNAL STYLES ===== */ + + #assignment-body { + font-family: 'Georgia', 'Times New Roman', serif; + color: #1e293b; + line-height: 1.8; + font-size: 1rem; + } + + /* Headings */ + #assignment-body h3 { + font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; + font-size: 1.35rem; + font-weight: 800; + color: #003150; + margin: 2.5rem 0 0.75rem; + padding-bottom: 0.5rem; + border-bottom: 3px solid #feb401; + position: relative; + display: flex; + align-items: center; + gap: 0.6rem; + } + #assignment-body h3::before { + content: ''; + display: inline-block; + width: 4px; + height: 1.1em; + background: #003150; + border-radius: 2px; + flex-shrink: 0; + } + #assignment-body h3:first-child { margin-top: 0; } + + #assignment-body h4 { + font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; + font-size: 1.05rem; + font-weight: 700; + color: #005eb8; + margin: 1.75rem 0 0.4rem; + padding-left: 0.85rem; + border-left: 3px solid #00b5e2; + } + + /* Paragraphs */ + #assignment-body p { + margin: 0 0 1.1rem; + color: #334155; + } + + /* Lists */ + #assignment-body ul { + list-style: none; + padding: 0; + margin: 0 0 1.25rem; + display: flex; + flex-direction: column; + gap: 0.55rem; + } + #assignment-body ul li { + padding: 0.6rem 1rem 0.6rem 2.2rem; + background: #f8fafc; + border-radius: 0.5rem; + border-left: 3px solid #e2e8f0; + font-size: 0.95rem; + position: relative; + transition: border-color 0.2s, background 0.2s; + line-height: 1.6; + } + #assignment-body ul li:hover { + border-left-color: #feb401; + background: #fffbeb; + } + #assignment-body ul li::before { + content: 'β–Έ'; + position: absolute; + left: 0.7rem; + top: 0.6rem; + color: #feb401; + font-size: 0.85rem; + font-weight: 700; + } + + /* Tables */ + #assignment-body table { + width: 100%; + border-collapse: collapse; + margin: 0 0 1.75rem; + border-radius: 0.75rem; + overflow: hidden; + box-shadow: 0 2px 12px rgba(0,49,80,0.08); + font-size: 0.9rem; + } + #assignment-body thead tr { + background: linear-gradient(90deg, #003150, #005eb8); + color: white; + } + #assignment-body thead th { + padding: 0.85rem 1.1rem; + text-align: left; + font-family: 'Trebuchet MS', sans-serif; + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + } + #assignment-body tbody tr { + border-bottom: 1px solid #e2e8f0; + transition: background 0.15s; + } + #assignment-body tbody tr:last-child { border-bottom: none; } + #assignment-body tbody tr:hover { background: #f0f7ff; } + #assignment-body tbody tr:nth-child(even) { background: #f8fafc; } + #assignment-body tbody tr:nth-child(even):hover { background: #e8f2ff; } + #assignment-body td { + padding: 0.75rem 1.1rem; + color: #334155; + vertical-align: top; + } + #assignment-body td:first-child { + font-weight: 600; + color: #003150; + } + + /* Strong */ + #assignment-body strong { + color: #003150; + font-weight: 700; + } + + /* Alumni section β€” special card look */ + #assignment-body h4 + p { + background: white; + border: 1px solid #e2e8f0; + border-radius: 0.75rem; + padding: 1rem 1.25rem; + box-shadow: 0 2px 8px rgba(0,49,80,0.06); + margin-bottom: 0.5rem; + position: relative; + } + #assignment-body h4 + p::before { + content: '"'; + position: absolute; + top: -0.3rem; + left: 1rem; + font-size: 3rem; + color: #feb401; + opacity: 0.3; + font-family: Georgia, serif; + line-height: 1; + } + + /* Scroll-reveal for #assignment-body children */ + #assignment-body .ab-reveal { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.55s ease, transform 0.55s ease; + } + #assignment-body .ab-reveal.visible { + opacity: 1; + transform: translateY(0); + } + + /* Read-more toggle */ + .ab-readmore-btn { + display: inline-flex; + align-items: center; + gap: 0.45rem; + background: #003150; + color: white; + border: none; + border-radius: 2rem; + padding: 0.5rem 1.25rem; + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + cursor: pointer; + margin-top: 0.5rem; + margin-bottom: 1.5rem; + transition: background 0.2s, transform 0.15s; + } + .ab-readmore-btn:hover { background: #005eb8; transform: scale(1.03); } + .ab-readmore-btn .arrow { transition: transform 0.25s; } + .ab-readmore-btn.open .arrow { transform: rotate(180deg); } + + .ab-collapsible { + overflow: hidden; + max-height: 0; + transition: max-height 0.45s ease; + } + .ab-collapsible.open { max-height: 3000px; } + + /* Section anchor labels */ + .ab-section-label { + display: inline-flex; + align-items: center; + gap: 0.4rem; + font-size: 0.65rem; + font-weight: 800; + letter-spacing: 0.18em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 0.25rem; + } + .ab-section-label::before { + content: ''; + display: inline-block; + width: 20px; + height: 2px; + background: #feb401; + } + + /* Highlight callout for key stat inline */ + #assignment-body .ab-callout { + display: flex; + align-items: flex-start; + gap: 1rem; + background: linear-gradient(135deg, #fffbeb, #fff7d6); + border: 1px solid #fde68a; + border-left: 4px solid #feb401; + border-radius: 0.75rem; + padding: 1rem 1.25rem; + margin: 1rem 0 1.5rem; + font-size: 0.9rem; + color: #78350f; + } + #assignment-body .ab-callout::before { + content: 'πŸ’‘'; + font-size: 1.2rem; + flex-shrink: 0; + margin-top: 0.05rem; + } + + /* Marquee */ + @keyframes marquee { + 0% { transform: translateX(100%); } + 100% { transform: translateX(-100%); } + } + + /* Progress bars */ + .prog-bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; } + .prog-fill { height: 100%; border-radius: 999px; transition: width 1.5s ease; } + + /* Study Club */ + .studyclub-card { + background: white; border-radius: 1rem; + border: 1px solid #e2e8f0; padding: 1.5rem; + transition: all 0.3s ease; + border-top: 4px solid transparent; + } + .studyclub-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); border-top-color: #feb401; } + + /* Language Toggle */ + #lang-toggle { + display: flex; align-items: center; gap: 0.4rem; + background: rgba(255,255,255,0.15); + border: 1px solid rgba(255,255,255,0.3); + color: white; font-size: 0.75rem; font-weight: 700; + letter-spacing: 0.08em; padding: 0.35rem 0.85rem; + border-radius: 2rem; cursor: pointer; + transition: all 0.2s ease; text-transform: uppercase; + } + #lang-toggle:hover { background: rgba(255,255,255,0.25); } + #lang-toggle .lang-flag { font-size: 1rem; } + + /* Bilingual: hide/show */ + [data-lang] { transition: opacity 0.2s ease; } + .lang-en [data-lang="id"] { display: none; } + .lang-id [data-lang="en"] { display: none; } + +/* ===================================================== + JELLYFISH.CORP β€” PREMIUM DESIGN v2 + ===================================================== */ + +/* ---- Base ---- */ +*, *::before, *::after { box-sizing: border-box; } +body { font-family: 'Inter', 'Segoe UI', sans-serif; color: #1e293b; background: #fff; overflow-x: hidden; } +a { text-decoration: none; } + +/* ---- CSS Custom Properties ---- */ +:root { + --navy: #003150; + --blue: #005eb8; + --sky: #00b5e2; + --gold: #feb401; + --dark: #060e1c; + --slate: #475569; + --light: #f8fafc; + --white: #ffffff; + --radius: 1.25rem; + --shadow-sm: 0 2px 12px rgba(0,0,0,.06); + --shadow-md: 0 8px 32px rgba(0,0,0,.10); + --shadow-lg: 0 20px 60px rgba(0,0,0,.16); +} + +/* ===================================================== + BADGE + ===================================================== */ +.jf-badge { + display: inline-flex; + align-items: center; + gap: .45rem; + background: var(--gold); + color: var(--navy); + font-size: .62rem; + font-weight: 800; + letter-spacing: .2em; + text-transform: uppercase; + padding: .3rem 1rem; + clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); + margin-bottom: 1rem; +} +.jf-badge-hero { + display: inline-flex; + align-items: center; + gap: .5rem; + background: rgba(254,180,1,.12); + border: 1px solid rgba(254,180,1,.35); + color: var(--gold); + font-size: .65rem; + font-weight: 700; + letter-spacing: .18em; + text-transform: uppercase; + padding: .35rem 1rem; + border-radius: 2rem; + margin-bottom: 1.5rem; + backdrop-filter: blur(6px); +} +.jf-badge-hero::before { + content: ''; + width: 6px; height: 6px; + background: var(--gold); + border-radius: 50%; + display: inline-block; + animation: pulseDot 1.8s ease infinite; +} +@keyframes pulseDot { + 0%,100% { opacity:1; transform:scale(1); } + 50% { opacity:.4; transform:scale(1.5); } +} + +/* ===================================================== + HERO LANDING β€” FULL VIEWPORT + ===================================================== */ +.jf-hero-landing { + min-height: 100vh; + background: var(--dark); + position: relative; + display: flex; + align-items: center; + overflow: hidden; +} + +/* Animated gradient mesh */ +.jf-hero-landing::before { + content: ''; + position: absolute; inset: 0; + background: + radial-gradient(ellipse 80% 60% at 20% 40%, rgba(0,94,184,.45) 0%, transparent 60%), + radial-gradient(ellipse 60% 50% at 80% 70%, rgba(0,181,226,.2) 0%, transparent 55%), + radial-gradient(ellipse 40% 40% at 60% 10%, rgba(254,180,1,.08) 0%, transparent 50%); + animation: meshMove 12s ease-in-out infinite alternate; +} +@keyframes meshMove { + from { filter: hue-rotate(0deg); } + to { filter: hue-rotate(8deg); } +} + +/* Grid overlay */ +.jf-hero-landing::after { + content: ''; + position: absolute; inset: 0; + background-image: + linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); + background-size: 60px 60px; +} + +.jf-hero-landing-inner { + position: relative; + z-index: 2; + width: 100%; + max-width: 1100px; + margin: 0 auto; + padding: 0 1.5rem; + padding-top: 6rem; + padding-bottom: 6rem; +} + +.jf-hero-landing-content { max-width: 760px; } + +.jf-hero-headline { + font-size: clamp(2.4rem, 6vw, 4.2rem); + font-weight: 900; + line-height: 1.1; + color: #ffffff; + margin-bottom: 1.5rem; + letter-spacing: -.02em; +} +.jf-hero-headline span { + background: linear-gradient(135deg, var(--gold), #ffd966); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.jf-hero-sub { + font-size: 1.05rem; + color: rgba(255,255,255,.7) !important; + line-height: 1.8; + margin-bottom: 2.5rem; + max-width: 600px; +} + +/* CTA Buttons */ +.jf-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 4rem; } +.jf-hero-cta-primary { + display: inline-flex; align-items: center; gap: .5rem; + background: var(--gold); + color: var(--navy); + font-size: .9rem; font-weight: 800; + padding: .9rem 2rem; + border-radius: .6rem; + transition: all .25s; + /* box-shadow: 0 4px 24px rgba(254,180,1,.35); */ +} +.jf-hero-cta-primary:hover { + transform: translateY(-3px); + box-shadow: 0 8px 36px rgba(254,180,1,.5); + background: #ffd133; +} +.jf-hero-cta-secondary { + display: inline-flex; align-items: center; gap: .5rem; + background: rgba(255,255,255,.08); + color: #fff; + font-size: .9rem; font-weight: 700; + padding: .9rem 2rem; + border-radius: .6rem; + border: 1px solid rgba(255,255,255,.2); + backdrop-filter: blur(8px); + transition: all .25s; +} +.jf-hero-cta-secondary:hover { + background: rgba(255,255,255,.15); + border-color: rgba(255,255,255,.4); + transform: translateY(-2px); +} + +/* Hero mini stats */ +.jf-hero-stats { + display: flex; + align-items: center; + gap: 0; + border-top: 1px solid rgba(255,255,255,.1); + padding-top: 2.5rem; + flex-wrap: wrap; +} +.jf-hs-item { text-align: center; padding: 0 2.5rem; } +.jf-hs-item:first-child { padding-left: 0; } +.jf-hs-num { + display: block; + font-size: 1.9rem; + font-weight: 900; + color: var(--gold); + line-height: 1; + margin-bottom: .3rem; + letter-spacing: -.02em; +} +.jf-hs-label { font-size: .73rem; color: rgba(255,255,255,.55); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } +.jf-hs-div { width: 1px; height: 48px; background: rgba(255,255,255,.12); } + +/* ===================================================== + SHARED SECTION STYLES + ===================================================== */ +.jf-section { padding: 6rem 0; } +.jf-section-light { background: #f4f7fb; } +.jf-section-white { background: #fff; } +.jf-section-dark { background: linear-gradient(160deg, #060e1c 0%, #0a1e35 50%, #0c2340 100%); } + +/* Section header */ +.jf-section-header { margin-bottom: 3.5rem; } +.jf-center { text-align: center; } +.jf-section-title { + font-size: clamp(1.75rem, 4vw, 2.6rem); + font-weight: 900; + color: #0c1b2e; + line-height: 1.15; + margin-bottom: .9rem; + letter-spacing: -.02em; +} +.jf-section-accent { + display: block; + width: 48px; height: 4px; + background: linear-gradient(90deg, var(--gold), var(--blue)); + border-radius: 2px; + margin: .75rem auto 1rem; +} +.jf-center .jf-section-accent { margin-left: auto; margin-right: auto; } +.jf-section-sub { + max-width: 580px; + margin: 0 auto; + font-size: .92rem; + color: var(--slate); + line-height: 1.75; +} + +/* ===================================================== + ABOUT SECTION (B) + ===================================================== */ +.jf-about-layout { + display: grid; + grid-template-columns: 1fr 380px; + gap: 4rem; + align-items: start; +} + +.jf-about-intro { + font-size: .97rem; + color: var(--slate); + line-height: 1.85; + margin-bottom: 1.75rem; +} +.jf-about-intro strong { color: var(--navy); } + +.jf-unggulan-box { + display: flex; + gap: 1rem; + align-items: flex-start; + background: linear-gradient(135deg, #fffbeb, #fff8e1); + border: 1px solid rgba(254,180,1,.3); + border-left: 4px solid var(--gold); + border-radius: .85rem; + padding: 1.1rem 1.25rem; + margin-bottom: 2rem; + font-size: .88rem; + color: #78350f; + line-height: 1.65; +} +.jf-unggulan-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: .1rem; } + +/* Visi card */ +.jf-vm-card { + border-radius: var(--radius); + padding: 1.5rem; + margin-bottom: 1.25rem; +} +.jf-vm-visi { + background: linear-gradient(135deg, var(--navy), var(--blue)); + color: white; +} +.jf-vm-visi p { font-size: .88rem; color: rgba(255,255,255,.85); line-height: 1.7; } +.jf-vm-label { + font-size: .72rem; + font-weight: 800; + letter-spacing: .14em; + text-transform: uppercase; + margin-bottom: .75rem; + color: var(--gold); +} + +/* Misi list */ +.jf-misi-section { margin-top: .5rem; } +.jf-misi-label { + font-size: .72rem; + font-weight: 800; + letter-spacing: .14em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 1rem; + display: flex; + align-items: center; + gap: .5rem; +} +.jf-misi-label::after { + content: ''; + flex: 1; height: 1px; + background: linear-gradient(90deg, #e2e8f0, transparent); +} +.jf-misi-list { display: flex; flex-direction: column; gap: .75rem; } +.jf-misi-item { + display: flex; + gap: 1rem; + align-items: flex-start; + background: var(--white); + border: 1px solid #e8eef5; + border-radius: .85rem; + padding: 1rem 1.25rem; + transition: all .25s; +} +.jf-misi-item:hover { + border-color: var(--blue); + box-shadow: 0 4px 20px rgba(0,94,184,.08); + transform: translateX(4px); +} +.jf-misi-num { + width: 28px; height: 28px; flex-shrink: 0; + background: linear-gradient(135deg, var(--navy), var(--blue)); + color: var(--gold); + border-radius: .5rem; + display: flex; align-items: center; justify-content: center; + font-size: .72rem; font-weight: 900; + margin-top: .1rem; +} +.jf-misi-item strong { display: block; font-size: .88rem; font-weight: 700; color: var(--navy); margin-bottom: .25rem; } +.jf-misi-item p { font-size: .8rem; color: var(--slate); line-height: 1.65; margin: 0; } + +/* Timeline card */ +.jf-timeline-card { + background: var(--white); + border-radius: var(--radius); + padding: 2rem; + box-shadow: var(--shadow-md); + border: 1px solid #e8eef5; + position: sticky; + top: 1.5rem; + max-height: calc(100vh - 4rem); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--gold) transparent; +} +.jf-timeline-card::-webkit-scrollbar { width: 4px; } +.jf-timeline-card::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; } + +.jf-timeline-title { + font-size: .68rem; + font-weight: 800; + letter-spacing: .2em; + text-transform: uppercase; + color: #94a3b8; + padding-bottom: 1rem; + margin-bottom: 1.5rem; + border-bottom: 2px solid var(--gold); + display: flex; + align-items: center; + gap: .5rem; +} +.jf-timeline-title::before { content: 'πŸ“…'; font-size: .9rem; } + +.jf-timeline-list { display: flex; flex-direction: column; } +.jf-tl-item { + display: grid; + grid-template-columns: 40px 14px 1fr; + gap: 0 .75rem; + align-items: flex-start; + padding-bottom: 1.5rem; +} +.jf-tl-item:last-child { padding-bottom: 0; } +.jf-tl-year { + font-size: .68rem; + font-weight: 900; + color: var(--gold); + text-align: right; + padding-top: .1rem; + letter-spacing: .02em; +} +.jf-tl-dot { + width: 12px; height: 12px; + background: var(--white); + border: 3px solid var(--navy); + border-radius: 50%; + margin-top: .1rem; + position: relative; + z-index: 1; + flex-shrink: 0; + transition: all .25s; +} +.jf-tl-item:hover .jf-tl-dot { + background: var(--gold); + border-color: var(--gold); + transform: scale(1.3); +} +.jf-tl-item:not(:last-child) .jf-tl-dot::after { + content: ''; + position: absolute; + top: 9px; left: 50%; + transform: translateX(-50%); + width: 2px; + height: calc(1.5rem + 10px); + background: linear-gradient(to bottom, var(--navy), #e2e8f0); +} +.jf-tl-content strong { display: block; font-size: .83rem; font-weight: 700; color: var(--navy); margin-bottom: .2rem; } +.jf-tl-content span { font-size: .75rem; color: var(--slate); line-height: 1.55; } + +/* ===================================================== + STATS SECTION (C) + ===================================================== */ +.jf-stats-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-bottom: 1.75rem; + justify-content: center; +} +.jf-stat-card { + background: var(--white); + border-radius: var(--radius); + padding: 2rem 1.5rem; + text-align: center; + box-shadow: var(--shadow-sm); + border: 1px solid #e8eef5; + border-bottom: 4px solid transparent; + transition: all .3s ease; + position: relative; + overflow: hidden; +} +.jf-stat-card::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 3px; + opacity: 0; + transition: opacity .3s; +} +.jf-stat-blue::before { background: linear-gradient(90deg, var(--navy), var(--blue)); } +.jf-stat-yellow::before{ background: linear-gradient(90deg, #d97706, var(--gold)); } +.jf-stat-cyan::before { background: linear-gradient(90deg, var(--blue), var(--sky)); } +.jf-stat-green::before { background: linear-gradient(90deg, #059669, #10b981); } +.jf-stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } +.jf-stat-card:hover::before { opacity: 1; } +.jf-stat-blue { border-bottom-color: var(--blue); } +.jf-stat-yellow{ border-bottom-color: var(--gold); } +.jf-stat-cyan { border-bottom-color: var(--sky); } +.jf-stat-green { border-bottom-color: #10b981; } +.jf-stat-num { + font-size: 2.8rem; + font-weight: 900; + line-height: 1; + margin-bottom: .5rem; + letter-spacing: -.03em; +} +.jf-stat-blue .jf-stat-num { color: var(--blue); } +.jf-stat-yellow .jf-stat-num{ color: #d97706; } +.jf-stat-cyan .jf-stat-num { color: #0284c7; } +.jf-stat-green .jf-stat-num { color: #059669; } +.jf-stat-label { font-size: .82rem; font-weight: 700; color: #0c1b2e; margin-bottom: .25rem; } +.jf-stat-sub { font-size: .72rem; color: #94a3b8; } + +.jf-stats-row2 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-top: .25rem; +} +.jf-stat-row-card { + background: var(--white); + border-radius: var(--radius); + padding: 1.75rem; + box-shadow: var(--shadow-sm); + border: 1px solid #e8eef5; + transition: all .3s; +} +.jf-stat-row-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } +.jf-stat-row-label { + font-size: .68rem; + font-weight: 800; + letter-spacing: .14em; + text-transform: uppercase; + color: #94a3b8; + margin-bottom: .5rem; +} +.jf-stat-row-num { + font-size: 1.9rem; + font-weight: 900; + margin-bottom: .75rem; + letter-spacing: -.02em; +} +.jf-prog-wrap { + display: flex; + align-items: center; + gap: .65rem; + margin-bottom: .55rem; + font-size: .72rem; + color: var(--slate); +} +.jf-prog-bar { + flex: 1; height: 6px; + background: #e8eef5; + border-radius: 99px; + overflow: hidden; +} +.jf-prog-fill { height: 100%; border-radius: 99px; } +.jf-link-btn { + display: inline-flex; + align-items: center; + gap: .35rem; + margin-top: 1rem; + font-size: .76rem; font-weight: 700; + color: var(--blue); + border: 1.5px solid var(--blue); + border-radius: 2rem; + padding: .35rem 1rem; + transition: all .2s; +} +.jf-link-btn:hover { background: var(--blue); color: #fff; } + +/* ===================================================== + PENCAPAIAN (D) β€” PRESTASI FILTER + ===================================================== */ +.jf-filter-tabs { + display: flex; + gap: .5rem; + justify-content: center; + margin-bottom: 2.5rem; + flex-wrap: wrap; +} +.jf-tab-btn { + padding: .5rem 1.4rem; + border-radius: 2rem; + border: 1.5px solid #dde4ee; + background: var(--white); + font-size: .8rem; font-weight: 600; + color: var(--slate); + cursor: pointer; + transition: all .2s; +} +.jf-tab-btn:hover { border-color: var(--navy); color: var(--navy); } +.jf-tab-active { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; box-shadow: 0 4px 16px rgba(0,49,80,.25); } + +.jf-prestasi-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; +} +.jf-prestasi-card { + background: var(--white); + border: 1px solid #e8eef5; + border-radius: var(--radius); + border-left: 4px solid #dde4ee; + padding: 1.5rem; + transition: all .3s; + position: relative; + overflow: hidden; +} +.jf-prestasi-card::after { + content: ''; + position: absolute; + bottom: 0; left: 0; right: 0; + height: 0; + background: linear-gradient(0deg, rgba(254,180,1,.04), transparent); + transition: height .3s; +} +.jf-prestasi-card:hover { + transform: translateY(-5px); + box-shadow: 0 12px 40px rgba(0,0,0,.1); + border-left-color: var(--gold); +} +.jf-prestasi-card:hover::after { height: 100%; } +.jf-prestasi-card h4 { + font-size: .95rem; font-weight: 700; + color: var(--navy); + margin: .7rem 0 .5rem; + line-height: 1.4; +} +.jf-prestasi-card p { font-size: .82rem; color: var(--slate); line-height: 1.65; margin-bottom: .85rem; } +.jf-prest-badge { + display: inline-block; + font-size: .62rem; font-weight: 700; + letter-spacing: .08em; text-transform: uppercase; + padding: .22rem .7rem; + border-radius: 2rem; +} +.jf-prest-nasional { background: #dbeafe; color: #1d4ed8; } +.jf-prest-internasional { background: #fce7f3; color: #be185d; } +.jf-prest-publikasi { background: #dcfce7; color: #15803d; } +.jf-prest-penghargaan { background: #fef3c7; color: #92400e; } +.jf-prest-meta { display: flex; gap: .7rem; font-size: .72rem; color: #94a3b8; flex-wrap: wrap; } + +/* ===================================================== + STUDY CLUB (E) + ===================================================== */ +.jf-sc-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-bottom: 2rem; +} +.jf-sc-card { + background: var(--white); + border-radius: var(--radius); + border: 1px solid #e8eef5; + padding: 2rem; + transition: all .3s; + position: relative; + overflow: hidden; +} +.jf-sc-card::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 4px; + background: linear-gradient(90deg, var(--navy), var(--blue), var(--sky)); + transform: scaleX(0); + transform-origin: left; + transition: transform .35s ease; +} +.jf-sc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } +.jf-sc-card:hover::before { transform: scaleX(1); } +.jf-sc-icon { + width: 56px; height: 56px; + border-radius: 1rem; + display: flex; align-items: center; justify-content: center; + font-size: 1.6rem; + margin-bottom: 1.25rem; + transition: transform .3s; +} +.jf-sc-card:hover .jf-sc-icon { transform: scale(1.1) rotate(-5deg); } +.jf-sc-name { font-size: 1.05rem; font-weight: 800; color: var(--navy); margin-bottom: .15rem; } +.jf-sc-alias { font-size: .75rem; color: var(--gold); font-weight: 700; margin-bottom: .85rem; } +.jf-sc-card p { font-size: .84rem; color: var(--slate); line-height: 1.7; } + +.jf-sc-cta { + background: linear-gradient(135deg, var(--navy), var(--blue)); + border-radius: var(--radius); + padding: 2rem 2.5rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; + box-shadow: 0 8px 32px rgba(0,49,80,.25); + position: relative; + overflow: hidden; +} +.jf-sc-cta::before { + content: ''; + position: absolute; + right: -80px; top: -80px; + width: 200px; height: 200px; + background: rgba(254,180,1,.1); + border-radius: 50%; +} +.jf-sc-cta::after { + content: ''; + position: absolute; + right: 20px; bottom: -60px; + width: 150px; height: 150px; + background: rgba(255,255,255,.04); + border-radius: 50%; +} +.jf-sc-cta-left { position: relative; z-index: 1; } +.jf-sc-cta-left strong { + display: block; + font-size: 1.15rem; font-weight: 800; + color: var(--white); + margin-bottom: .4rem; +} +.jf-sc-cta-left span { font-size: .85rem; color: rgba(255,255,255,.7); line-height: 1.6; } +.jf-cta-button { + display: inline-flex; + align-items: center; + gap: .5rem; + background: var(--gold); + color: var(--navy); + font-size: .85rem; font-weight: 800; + padding: .85rem 1.75rem; + border-radius: .75rem; + white-space: nowrap; + transition: all .2s; + position: relative; z-index: 1; + box-shadow: 0 4px 20px rgba(254,180,1,.3); +} +.jf-cta-button:hover { background: #ffd133; transform: scale(1.04); box-shadow: 0 6px 28px rgba(254,180,1,.5); } + +/* ===================================================== + KARIR (F) + ===================================================== */ +.jf-karir-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 5rem; + align-items: center; +} +.jf-karir-headline-italic { + font-size: 1.05rem; + font-style: italic; + color: var(--navy); + font-weight: 600; + border-left: 3px solid var(--gold); + padding-left: 1rem; + margin-bottom: 1.25rem; + line-height: 1.6; +} +.jf-karir-left p { + font-size: .9rem; + color: var(--slate); + line-height: 1.8; + margin-bottom: 1rem; +} +.jf-karir-other strong { + display: block; + font-size: .68rem; font-weight: 800; + letter-spacing: .14em; text-transform: uppercase; + color: #94a3b8; + margin-bottom: .7rem; +} +.jf-chip-wrap { display: flex; flex-wrap: wrap; gap: .4rem; } +.jf-chip { + display: inline-block; + background: #f0f7ff; + color: #0369a1; + border: 1px solid #bae6fd; + border-radius: 2rem; + padding: .28rem .85rem; + font-size: .74rem; font-weight: 600; + transition: all .2s; +} +.jf-chip:hover { background: var(--blue); color: #fff; border-color: var(--blue); } + +.jf-karir-right { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} +.jf-karir-card { + border-radius: var(--radius); + padding: 1.6rem; + color: #fff; + transition: all .3s; + position: relative; + overflow: hidden; +} +.jf-karir-card::before { + content: ''; + position: absolute; + bottom: -30px; right: -30px; + width: 100px; height: 100px; + background: rgba(255,255,255,.07); + border-radius: 50%; + transition: transform .3s; +} +.jf-karir-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,.25); } +.jf-karir-card:hover::before { transform: scale(2); } +.jf-karir-navy { background: linear-gradient(135deg, #002240, var(--navy), var(--blue)); } +.jf-karir-purple { background: linear-gradient(135deg, #4c1d95, #7c3aed, #a855f7); } +.jf-karir-green { background: linear-gradient(135deg, #064e3b, #059669, #34d399); } +.jf-karir-orange { background: linear-gradient(135deg, #78350f, #d97706, #fbbf24); } +.jf-kc-title { font-size: .95rem; font-weight: 800; margin-bottom: .75rem; } +.jf-kc-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; } +.jf-kc-chips span { + background: rgba(255,255,255,.18); + color: #fff; + font-size: .67rem; font-weight: 600; + padding: .18rem .6rem; + border-radius: 2rem; + border: 1px solid rgba(255,255,255,.25); +} +.jf-kc-company { font-size: .7rem; color: rgba(255,255,255,.6); margin-top: .4rem; } + +/* ===================================================== + ALUMNI (G) + ===================================================== */ +.jf-alumni-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.75rem; +} +.jf-alumni-card { + background: var(--white); + border: 1px solid #e8eef5; + border-radius: var(--radius); + padding: 1.75rem; + transition: all .3s; + position: relative; + overflow: hidden; +} +.jf-alumni-card::after { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 3px; + background: linear-gradient(90deg, var(--navy), var(--gold)); + transform: scaleX(0); + transform-origin: left; + transition: transform .35s; +} +.jf-alumni-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } +.jf-alumni-card:hover::after { transform: scaleX(1); } +.jf-alumni-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1.25rem; +} +.jf-alumni-avatar { + width: 48px; height: 48px; + border-radius: 50%; + display: flex; align-items: center; justify-content: center; + font-size: .82rem; font-weight: 900; + color: #fff; flex-shrink: 0; + box-shadow: 0 4px 12px rgba(0,0,0,.2); +} +.jf-alumni-name { font-size: .97rem; font-weight: 800; color: var(--navy); } +.jf-alumni-batch { font-size: .72rem; color: #94a3b8; margin-top: .15rem; } +.jf-alumni-photo-placeholder { + width: 100%; height: 150px; + background: linear-gradient(135deg, #f0f4f8, #e2e8f0); + border-radius: .85rem; + display: flex; align-items: center; justify-content: center; + margin-bottom: 1rem; + font-size: 2.5rem; + opacity: 1; + overflow: hidden; +} +.jf-alumni-roles { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; } +.jf-alumni-roles span { + background: #eff6ff; color: #1d4ed8; + font-size: .68rem; font-weight: 600; + padding: .22rem .7rem; border-radius: 2rem; +} +.jf-alumni-card p { font-size: .82rem; color: var(--slate); line-height: 1.7; margin-bottom: 1rem; } +.jf-alumni-divider { + height: 2px; + background: linear-gradient(90deg, var(--navy), var(--gold), transparent); + border-radius: 2px; +} + +/* ===================================================== + INFRASTRUKTUR (H) β€” DARK + ===================================================== */ +.jf-infra-line { + width: 56px; height: 3px; + background: linear-gradient(90deg, var(--gold), var(--sky)); + border-radius: 2px; + margin: 1rem auto 0; +} +.jf-infra-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.25rem; + margin-bottom: 2rem; +} +.jf-infra-card { + border-radius: var(--radius); + padding: 2rem 1.5rem; + color: #fff; + position: relative; + overflow: hidden; + transition: transform .3s; + border: 1px solid rgba(255,255,255,.08); +} +.jf-infra-card::after { + content: ''; + position: absolute; + bottom: -40px; right: -40px; + width: 120px; height: 120px; + background: rgba(255,255,255,.06); + border-radius: 50%; + transition: transform .4s; +} +.jf-infra-card:hover { transform: translateY(-6px); } +.jf-infra-card:hover::after { transform: scale(2.2); } +.jf-infra-icon { font-size: 2.2rem; margin-bottom: 1rem; } +.jf-infra-name { font-size: 1.05rem; font-weight: 800; margin-bottom: .6rem; } +.jf-infra-card p { font-size: .8rem; opacity: .8; line-height: 1.65; margin-bottom: 1.25rem; } +.jf-infra-stat { + font-size: .7rem; opacity: .7; + border-top: 1px solid rgba(255,255,255,.15); + padding-top: .85rem; +} +.jf-infra-stat span { font-size: 1rem; font-weight: 800; opacity: 1; display: block; margin-bottom: .1rem; } + +.jf-license-bar { + border-top: 1px solid rgba(255,255,255,.08); + padding-top: 1.75rem; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: .85rem; +} +.jf-lic-label { + font-size: .68rem; font-weight: 700; + color: rgba(255,255,255,.45); + text-transform: uppercase; letter-spacing: .12em; + white-space: nowrap; +} +.jf-lic-chips { display: flex; flex-wrap: wrap; gap: .4rem; } +.jf-lic-chips span { + background: rgba(255,255,255,.08); + color: rgba(255,255,255,.75); + border: 1px solid rgba(255,255,255,.12); + border-radius: 2rem; + font-size: .68rem; font-weight: 600; + padding: .22rem .8rem; + transition: all .2s; +} +.jf-lic-chips span:hover { background: rgba(255,255,255,.18); color: #fff; } + +/* ===================================================== + MITRA (I) + ===================================================== */ +.jf-mitra-group-title { + font-size: .68rem; font-weight: 800; + letter-spacing: .16em; text-transform: uppercase; + color: #94a3b8; + margin-bottom: 1rem; + padding-bottom: .5rem; + display: flex; + align-items: center; + gap: .75rem; +} +.jf-mitra-group-title::after { + content: ''; + flex: 1; height: 1px; + background: linear-gradient(90deg, var(--gold), transparent); +} +.jf-mitra-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: .85rem; + margin-bottom: 2rem; +} +.jf-mitra-grid-gov { grid-template-columns: repeat(5, 1fr); } +.jf-mitra-card { + background: var(--white); + border: 1px solid #e8eef5; + border-radius: .85rem; + padding: 1rem .75rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + min-height: 72px; + gap: .4rem; + transition: all .25s; +} +.jf-mitra-card:hover { + border-color: var(--blue); + box-shadow: 0 6px 20px rgba(0,94,184,.1); + transform: translateY(-3px); +} +.jf-mitra-logo { font-size: 1.5rem; } +.jf-mitra-name { font-size: .68rem; font-weight: 600; color: var(--slate); line-height: 1.35; } + +/* ===================================================== + LIFE AT (J) + ===================================================== */ +.jf-life-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: 1.25rem; +} +.jf-life-card { + border-radius: var(--radius); + padding: 2.5rem 2rem; + color: #fff; + min-height: 200px; + display: flex; + flex-direction: column; + justify-content: flex-end; + position: relative; + overflow: hidden; + transition: transform .3s; +} +.jf-life-card::before { + content: ''; + position: absolute; inset: 0; + background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 60%); +} +.jf-life-card:hover { transform: translateY(-4px); } +.jf-life-tagline { + font-size: .85rem; + font-style: italic; + color: var(--gold); + margin-bottom: 1rem; + opacity: .9; + line-height: 1.6; + position: relative; z-index: 1; +} +.jf-life-label { + font-size: 1.05rem; font-weight: 800; + margin-bottom: .45rem; + position: relative; z-index: 1; +} +.jf-life-card p { font-size: .8rem; opacity: .8; line-height: 1.55; position: relative; z-index: 1; } + +/* ===================================================== + CTA / KONTAK (K) + ===================================================== */ +.jf-cta-section { + background: linear-gradient(150deg, #060e1c 0%, #003150 45%, #0a4a7a 100%); + padding: 6rem 0; + position: relative; + overflow: hidden; +} +.jf-cta-section::before { + content: ''; + position: absolute; + top: -30%; right: -5%; + width: 600px; height: 600px; + background: radial-gradient(circle, rgba(0,94,184,.18) 0%, transparent 65%); + pointer-events: none; +} +.jf-cta-section::after { + content: ''; + position: absolute; + bottom: -20%; left: 10%; + width: 400px; height: 400px; + background: radial-gradient(circle, rgba(254,180,1,.06) 0%, transparent 65%); + pointer-events: none; +} +.jf-cta-inner { + display: grid; + grid-template-columns: 1fr 440px; + gap: 5rem; + align-items: center; + position: relative; + z-index: 1; +} +.jf-cta-left .jf-badge { + background: rgba(254,180,1,.12); + color: var(--gold); + border: 1px solid rgba(254,180,1,.3); + clip-path: none; + border-radius: 2rem; +} +.jf-cta-title { + font-size: clamp(2rem, 4vw, 2.8rem); + font-weight: 900; + color: #fff; + line-height: 1.15; + margin-bottom: 1.15rem; + letter-spacing: -.02em; +} +.jf-cta-highlight { color: var(--gold); } +.jf-cta-left p { + font-size: .92rem; + color: rgba(255,255,255,.65); + line-height: 1.8; + margin-bottom: 2.25rem; + max-width: 480px; +} +.jf-cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; } +.jf-btn-yellow { + display: inline-flex; align-items: center; gap: .5rem; + background: var(--gold); + color: var(--navy); + font-size: .88rem; font-weight: 800; + padding: .9rem 2rem; + border-radius: .75rem; + transition: all .25s; + box-shadow: 0 4px 24px rgba(254,180,1,.3); +} +.jf-btn-yellow:hover { background: #ffd133; transform: translateY(-3px); box-shadow: 0 8px 36px rgba(254,180,1,.45); } +.jf-btn-green { + display: inline-flex; align-items: center; gap: .5rem; + background: #22c55e; + color: #fff; + font-size: .88rem; font-weight: 800; + padding: .9rem 2rem; + border-radius: .75rem; + transition: all .25s; +} +.jf-btn-green:hover { background: #16a34a; transform: translateY(-3px); box-shadow: 0 8px 28px rgba(34,197,94,.4); } + +/* Kontak card */ +.jf-kontak-card { + background: rgba(255,255,255,.07); + border: 1px solid rgba(255,255,255,.12); + border-radius: var(--radius); + padding: 2.25rem; + backdrop-filter: blur(16px); +} +.jf-kontak-title { + font-size: .72rem; font-weight: 800; + color: #fff; + letter-spacing: .16em; text-transform: uppercase; + margin-bottom: 1.75rem; + padding-bottom: .85rem; + border-bottom: 1px solid rgba(255,255,255,.12); + display: flex; + align-items: center; + gap: .5rem; +} +.jf-kontak-title::before { content: 'πŸ“¬'; font-size: 1rem; } +.jf-kontak-list { display: flex; flex-direction: column; gap: 1.25rem; } +.jf-kontak-item { display: flex; align-items: flex-start; gap: 1rem; } +.jf-kontak-icon { + width: 38px; height: 38px; + background: rgba(255,255,255,.1); + border-radius: .65rem; + display: flex; align-items: center; justify-content: center; + font-size: 1rem; flex-shrink: 0; + border: 1px solid rgba(255,255,255,.1); +} +.jf-kontak-label { + font-size: .65rem; font-weight: 700; + letter-spacing: .12em; text-transform: uppercase; + color: rgba(255,255,255,.45); + margin-bottom: .3rem; +} +.jf-kontak-val { font-size: .84rem; color: rgba(255,255,255,.88); line-height: 1.55; } +.jf-kontak-val small { color: rgba(255,255,255,.5); font-size: .72rem; } + +/* ===================================================== + ANIMATIONS + ===================================================== */ +@keyframes jfFadeUp { + from { opacity: 0; transform: translateY(28px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes jfFadeIn { + from { opacity: 0; } + to { opacity: 1; } +} +@keyframes jfSlideRight { + from { opacity: 0; transform: translateX(-20px); } + to { opacity: 1; transform: translateX(0); } +} + +/* ===================================================== + RESPONSIVE + ===================================================== */ +@media (max-width: 1200px) { + .jf-infra-grid { grid-template-columns: repeat(2, 1fr); } + .jf-mitra-grid { grid-template-columns: repeat(3, 1fr); } + .jf-mitra-grid-gov { grid-template-columns: repeat(3, 1fr); } +} +@media (max-width: 1024px) { + .jf-about-layout { grid-template-columns: 1fr; } + .jf-timeline-card { position: static; max-height: none; } + .jf-stats-grid { grid-template-columns: repeat(2, 1fr); } + .jf-karir-layout { grid-template-columns: 1fr; gap: 3rem; } + .jf-cta-inner { grid-template-columns: 1fr; gap: 3rem; } + .jf-life-grid { grid-template-columns: 1fr 1fr; } + .jf-life-card.jf-life-big { grid-column: span 2; } +} +@media (max-width: 768px) { + .jf-hero-headline { font-size: 2.2rem; } + .jf-section { padding: 4rem 0; } + .jf-prestasi-grid { grid-template-columns: 1fr; } + .jf-sc-grid { grid-template-columns: 1fr; } + .jf-alumni-grid { grid-template-columns: 1fr; } + .jf-stats-row2 { grid-template-columns: 1fr; } + .jf-karir-right { grid-template-columns: 1fr; } + .jf-life-grid { grid-template-columns: 1fr; } + .jf-life-card.jf-life-big { grid-column: span 1; } + .jf-sc-cta { flex-direction: column; align-items: flex-start; } + .jf-mitra-grid, .jf-mitra-grid-gov { grid-template-columns: repeat(2, 1fr); } + .jf-hero-stats { flex-direction: column; align-items: flex-start; gap: 1rem; } + .jf-hs-div { display: none; } + .jf-hs-item { padding: 0; } + .jf-cta-title { font-size: 1.9rem; } +} + +/* ===================================================== + WHITE TEXT FIXES β€” Dark Background Sections + ===================================================== */ + + + +/* Visi card (navy gradient) */ +.jf-vm-visi, +.jf-vm-visi * { color: white !important; } +.jf-vm-visi .jf-vm-label { color: #feb401 !important; } + +/* Infra cards */ +.jf-infra-card, +.jf-infra-card * { color: white !important; } +.jf-infra-stat { opacity: 1 !important; color: rgba(255,255,255,.85) !important; } +.jf-infra-stat span { color: white !important; font-weight: 800; } + +/* Karir cards */ +.jf-karir-card, +.jf-karir-card * { color: white !important; } +.jf-kc-company { color: rgba(255,255,255,.65) !important; } + +/* Study Club CTA */ +.jf-sc-cta .jf-sc-cta-left strong, +.jf-sc-cta .jf-sc-cta-left span { color: white !important; } +.jf-sc-cta .jf-cta-button { color: #003150 !important; } + +/* Life cards */ +.jf-life-card, +.jf-life-card * { color: white !important; } +.jf-life-tagline { color: #feb401 !important; } +.jf-life-card p { color: rgba(255,255,255,.82) !important; } + +/* Dark section title/sub */ +.jf-section-dark .jf-section-title { color: white !important; } +.jf-section-dark .jf-section-sub { color: rgba(255,255,255,.7) !important; } + +/* CTA section */ +.jf-cta-section .jf-cta-title, +.jf-cta-section .jf-cta-left p, +.jf-cta-section .jf-kontak-val, +.jf-cta-section .jf-kontak-title { color: white !important; } +.jf-cta-highlight { color: #feb401 !important; } +.jf-cta-section .jf-cta-left p { color: rgba(255,255,255,.7) !important; } +.jf-cta-section .jf-kontak-label { color: rgba(255,255,255,.5) !important; } +.jf-cta-section .jf-kontak-val small { color: rgba(255,255,255,.5) !important; } + +/* License bar (dark section) */ +.jf-lic-label { color: rgba(255,255,255,.55) !important; } +.jf-lic-chips span { color: rgba(255,255,255,.8) !important; } + +/* Timeline title dots (ensure visibility) */ +.jf-timeline-title { color: #64748b; } +.jf-tl-year { color: #feb401; } +.jf-tl-content strong { color: #003150; } +.jf-tl-content span { color: #475569; } + +/* ---- Reset & Base ---- */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +body { font-family: 'Inter', 'Segoe UI', sans-serif; color: #1e293b; background: #fff; } +img { max-width: 100%; display: block; } +a { text-decoration: none; } + +/* ---- Badge ---- */ +.jf-badge { + display: inline-block; + background: #feb401; + color: #003150; + font-size: 0.62rem; + font-weight: 800; + letter-spacing: 0.18em; + text-transform: uppercase; + padding: 0.28rem 0.85rem; + border-radius: 0; + margin-bottom: 0.85rem; +} + +/* ===================================================== + HERO SECTION + ===================================================== */ +.jf-hero { + background: #fff; + padding: 3.5rem 0 4rem; + border-bottom: 1px solid #e2e8f0; +} +.jf-hero-inner { + display: grid; + grid-template-columns: 1fr 360px; + gap: 3.5rem; + align-items: start; +} +.jf-hero-left h1 { + font-size: clamp(1.6rem, 3.5vw, 2.4rem); + font-weight: 800; + color: #0f172a; + line-height: 1.2; + margin-bottom: 1.25rem; +} +.jf-hero-left p { + font-size: 0.95rem; + color: #475569; + line-height: 1.75; + margin-bottom: 0.85rem; +} +.jf-hero-visi { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin-top: 1.75rem; +} +.jf-visi-card { + display: flex; + align-items: flex-start; + gap: 1rem; + background: #f8fafc; + border-left: 4px solid #003150; + border-radius: 0 0.75rem 0.75rem 0; + padding: 0.9rem 1.1rem; +} +.jf-visi-icon { + font-size: 1.3rem; + flex-shrink: 0; + margin-top: 0.1rem; +} +.jf-visi-label { + font-size: 0.7rem; + font-weight: 800; + letter-spacing: 0.14em; + text-transform: uppercase; + color: #003150; + margin-bottom: 0.3rem; +} +.jf-visi-text { + font-size: 0.875rem; + color: #475569; + line-height: 1.6; +} + +/* Timeline card (hero right) */ +.jf-timeline-card { + background: #fff; + border: 1px solid #e2e8f0; + border-radius: 1.25rem; + padding: 1.75rem; + box-shadow: 0 4px 24px rgba(0,49,80,0.08); + position: sticky; + top: 1.5rem; +} +.jf-timeline-title { + font-size: 0.7rem; + font-weight: 800; + letter-spacing: 0.18em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 1.5rem; + padding-bottom: 0.75rem; + border-bottom: 2px solid #feb401; +} +.jf-timeline-list { + display: flex; + flex-direction: column; + gap: 0; +} +.jf-tl-item { + display: grid; + grid-template-columns: 44px 16px 1fr; + gap: 0 0.75rem; + align-items: flex-start; + padding-bottom: 1.4rem; + position: relative; +} +.jf-tl-item:last-child { padding-bottom: 0; } +.jf-tl-year { + font-size: 0.72rem; + font-weight: 800; + color: #feb401; + padding-top: 0.1rem; + text-align: right; +} +.jf-tl-dot { + width: 12px; + height: 12px; + background: #003150; + border: 3px solid #feb401; + border-radius: 50%; + margin-top: 0.15rem; + position: relative; + z-index: 1; + flex-shrink: 0; +} +.jf-tl-item:not(:last-child) .jf-tl-dot::after { + content: ''; + position: absolute; + top: 10px; + left: 50%; + transform: translateX(-50%); + width: 2px; + height: calc(1.4rem + 12px); + background: #e2e8f0; +} +.jf-tl-content strong { + display: block; + font-size: 0.85rem; + font-weight: 700; + color: #0f172a; + margin-bottom: 0.2rem; +} +.jf-tl-content span { + font-size: 0.78rem; + color: #64748b; + line-height: 1.5; +} + +/* ===================================================== + SHARED SECTION STYLES + ===================================================== */ +.jf-section { + padding: 5rem 0; +} +.jf-section-light { background: #f8fafc; } +.jf-section-white { background: #ffffff; } +.jf-section-dark { background: #0a1628; } + +.jf-section-header { margin-bottom: 2.75rem; } +.jf-center { text-align: center; } +.jf-section-title { + font-size: clamp(1.6rem, 3.5vw, 2.2rem); + font-weight: 800; + color: #0f172a; + line-height: 1.2; + margin-bottom: 0.85rem; +} +.jf-section-sub { + max-width: 600px; + margin: 0 auto; + font-size: 0.9rem; + color: #64748b; + line-height: 1.7; +} + +/* ===================================================== + STATS SECTION + ===================================================== */ +.jf-stats-grid { + display: grid; + grid-template-columns: repeat(, 1fr); + gap: 1.25rem; + margin-bottom: 2rem; + justify-content: center; +} +.jf-stat-card { + background: #fff; + border-radius: 1rem; + padding: 1.75rem 1.25rem; + text-align: center; + box-shadow: 0 2px 16px rgba(0,0,0,0.06); + border-bottom: 4px solid transparent; + transition: transform 0.25s, box-shadow 0.25s; +} +.jf-stat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,0.12); } +.jf-stat-blue { border-color: #005eb8; } +.jf-stat-yellow{ border-color: #feb401; } +.jf-stat-cyan { border-color: #00b5e2; } +.jf-stat-green { border-color: #10b981; } +.jf-stat-num { + font-size: 2.4rem; + font-weight: 900; + line-height: 1; + margin-bottom: 0.4rem; +} +.jf-stat-blue .jf-stat-num { color: #005eb8; } +.jf-stat-yellow .jf-stat-num{ color: #feb401; } +.jf-stat-cyan .jf-stat-num { color: #00b5e2; } +.jf-stat-green .jf-stat-num { color: #10b981; } +.jf-stat-label { + font-size: 0.8rem; + font-weight: 700; + color: #1e293b; + margin-bottom: 0.2rem; +} +.jf-stat-sub { font-size: 0.72rem; color: #94a3b8; } + +/* Stats row 2 */ +.jf-stats-row2 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; +} +.jf-stat-row-card { + background: #fff; + border-radius: 1rem; + padding: 1.5rem; + box-shadow: 0 2px 12px rgba(0,0,0,0.06); + border: 1px solid #e2e8f0; +} +.jf-stat-row-label { + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 0.4rem; +} +.jf-stat-row-num { + font-size: 1.7rem; + font-weight: 900; + color: #005eb8; + margin-bottom: 1rem; +} +.jf-prog-wrap { + display: flex; + align-items: center; + gap: 0.65rem; + margin-bottom: 0.5rem; + font-size: 0.72rem; + color: #64748b; +} +.jf-prog-bar { + flex: 1; + height: 6px; + background: #e2e8f0; + border-radius: 999px; + overflow: hidden; +} +.jf-prog-fill { + height: 100%; + border-radius: 999px; +} +.jf-link-btn { + display: inline-block; + margin-top: 0.85rem; + font-size: 0.78rem; + font-weight: 700; + color: #005eb8; + border: 1.5px solid #005eb8; + border-radius: 2rem; + padding: 0.35rem 1rem; + transition: all 0.2s; +} +.jf-link-btn:hover { background: #005eb8; color: #fff; } + +/* ===================================================== + PENCAPAIAN / PRESTASI + ===================================================== */ +.jf-filter-tabs { + display: flex; + gap: 0.5rem; + justify-content: center; + margin-bottom: 2rem; + flex-wrap: wrap; +} +.jf-tab-btn { + padding: 0.45rem 1.2rem; + border-radius: 2rem; + border: 1.5px solid #e2e8f0; + background: #fff; + font-size: 0.8rem; + font-weight: 600; + color: #475569; + cursor: pointer; + transition: all 0.2s; +} +.jf-tab-btn:hover { border-color: #003150; color: #003150; } +.jf-tab-active { background: #003150 !important; color: #fff !important; border-color: #003150 !important; } + +.jf-prestasi-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; +} +.jf-prestasi-card { + background: #fff; + border: 1px solid #e2e8f0; + border-left: 4px solid #e2e8f0; + border-radius: 0 1rem 1rem 0; + padding: 1.5rem; + transition: all 0.25s; +} +.jf-prestasi-card:hover { + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(0,0,0,0.09); + border-left-color: #feb401; +} +.jf-prestasi-card h4 { + font-size: 0.95rem; + font-weight: 700; + color: #0f172a; + margin: 0.6rem 0 0.5rem; +} +.jf-prestasi-card p { + font-size: 0.83rem; + color: #475569; + line-height: 1.6; + margin-bottom: 0.75rem; +} +.jf-prest-badge { + display: inline-block; + font-size: 0.65rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + padding: 0.2rem 0.65rem; + border-radius: 2rem; +} +.jf-prest-nasional { background: #dbeafe; color: #1d4ed8; } +.jf-prest-internasional{ background: #fce7f3; color: #be185d; } +.jf-prest-publikasi { background: #dcfce7; color: #15803d; } +.jf-prest-penghargaan { background: #fef3c7; color: #92400e; } +.jf-prest-meta { + display: flex; + gap: 0.75rem; + font-size: 0.73rem; + color: #94a3b8; +} + +/* ===================================================== + STUDY CLUB + ===================================================== */ +.jf-sc-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; + margin-bottom: 2rem; +} +.jf-sc-card { + background: #fff; + border: 1px solid #e2e8f0; + border-top: 4px solid transparent; + border-radius: 0 0 1rem 1rem; + padding: 1.75rem 1.5rem; + transition: all 0.25s; +} +.jf-sc-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 32px rgba(0,0,0,0.09); + border-top-color: #feb401; +} +.jf-sc-icon { + width: 52px; + height: 52px; + border-radius: 0.85rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + margin-bottom: 1rem; +} +.jf-sc-name { + font-size: 1rem; + font-weight: 700; + color: #0f172a; + margin-bottom: 0.15rem; +} +.jf-sc-alias { + font-size: 0.75rem; + color: #feb401; + font-weight: 700; + margin-bottom: 0.75rem; +} +.jf-sc-card p { + font-size: 0.85rem; + color: #475569; + line-height: 1.65; +} + +/* Study club CTA banner */ +.jf-sc-cta { + background: #feb401; + border-radius: 1rem; + padding: 1.5rem 2rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; +} +.jf-sc-cta-left strong { + display: block; + font-size: 1rem; + font-weight: 800; + color: #003150; + margin-bottom: 0.3rem; +} +.jf-sc-cta-left span { + font-size: 0.83rem; + color: #003150; + opacity: 0.85; +} +.jf-cta-button { + display: inline-block; + background: #3fa4e3; + color: #fff; + font-size: 0.8rem; + font-weight: 700; + padding: 0.65rem 1.5rem; + border-radius: 0.5rem; + white-space: nowrap; + transition: background 0.2s, transform 0.15s; +} +.jf-cta-button:hover { background: #005eb8; transform: scale(1.03); } + +/* ===================================================== + KARIR / PROSPEK + ===================================================== */ +.jf-karir-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} +.jf-karir-left .jf-section-title { margin-bottom: 1rem; } +.jf-karir-left p { + font-size: 0.9rem; + color: #475569; + line-height: 1.75; + margin-bottom: 1.25rem; +} +.jf-karir-stat { + display: flex; + flex-direction: column; + gap: 0.65rem; + margin-bottom: 1.5rem; +} +.jf-ks-item { + display: flex; + align-items: center; + gap: 0.75rem; + background: #f8fafc; + border-radius: 0.5rem; + padding: 0.65rem 1rem; + border-left: 3px solid #feb401; +} +.jf-ks-num { + font-size: 1.3rem; + font-weight: 900; + color: #005eb8; + flex-shrink: 0; + min-width: 2.5rem; +} +.jf-ks-label { font-size: 0.83rem; color: #475569; line-height: 1.4; } +.jf-karir-other strong { + display: block; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 0.6rem; +} +.jf-chip-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; } +.jf-chip { + display: inline-block; + background: #f0f9ff; + color: #0369a1; + border: 1px solid #bae6fd; + border-radius: 2rem; + padding: 0.25rem 0.8rem; + font-size: 0.75rem; + font-weight: 600; + transition: all 0.2s; +} +.jf-chip:hover { background: #005eb8; color: #fff; border-color: #005eb8; } + +/* Karir cards (right grid) */ +.jf-karir-right { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} +.jf-karir-card { + border-radius: 1rem; + padding: 1.5rem; + color: #fff; + transition: transform 0.25s, box-shadow 0.25s; +} +.jf-karir-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.25); } +.jf-karir-navy { background: linear-gradient(135deg, #003150, #005eb8); } +.jf-karir-purple{ background: linear-gradient(135deg, #7c3aed, #a855f7); } +.jf-karir-green { background: linear-gradient(135deg, #059669, #10b981); } +.jf-karir-orange{ background: linear-gradient(135deg, #d97706, #f59e0b); } +.jf-kc-title { + font-size: 1rem; + font-weight: 800; + margin-bottom: 0.85rem; +} +.jf-kc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } +.jf-kc-chips span { + background: rgba(255,255,255,0.2); + color: #fff; + font-size: 0.7rem; + font-weight: 600; + padding: 0.2rem 0.65rem; + border-radius: 2rem; + border: 1px solid rgba(255,255,255,0.3); +} + +/* ===================================================== + ALUMNI SECTION + ===================================================== */ +.jf-alumni-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} +.jf-alumni-card { + background: #fff; + border: 1px solid #e2e8f0; + border-radius: 1.25rem; + padding: 1.5rem; + transition: all 0.25s; +} +.jf-alumni-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 36px rgba(0,0,0,0.1); +} +.jf-alumni-header { + display: flex; + align-items: center; + gap: 0.85rem; + margin-bottom: 1rem; +} +.jf-alumni-avatar { + width: 44px; + height: 44px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8rem; + font-weight: 800; + color: #fff; + flex-shrink: 0; +} +.jf-alumni-name { + font-size: 0.95rem; + font-weight: 700; + color: #005eb8; +} +.jf-alumni-batch { + font-size: 0.72rem; + color: #94a3b8; + margin-top: 0.1rem; +} +.jf-alumni-photo-placeholder { + width: 100%; + height: 140px; + background: #f1f5f9; + border-radius: 0.75rem; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.85rem; + overflow: hidden; +} +.jf-alumni-photo-inner { font-size: 2.5rem; opacity: 1; } +.jf-alumni-roles { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin-bottom: 0.75rem; +} +.jf-alumni-roles span { + background: #eff6ff; + color: #1d4ed8; + font-size: 0.68rem; + font-weight: 600; + padding: 0.2rem 0.65rem; + border-radius: 2rem; +} +.jf-alumni-card p { + font-size: 0.82rem; + color: #475569; + line-height: 1.65; + margin-bottom: 0.85rem; +} +.jf-alumni-divider { + height: 2px; + background: linear-gradient(90deg, #003150, #feb401, transparent); + border-radius: 1px; +} + +/* ===================================================== + INFRASTRUKTUR (DARK SECTION) + ===================================================== */ +.jf-infra-line { + width: 60px; + height: 3px; + background: #feb401; + margin: 0.85rem auto 0; +} +.jf-infra-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.25rem; + margin-bottom: 2rem; +} +.jf-infra-card { + border-radius: 1rem; + padding: 1.75rem 1.25rem; + color: #fff; + transition: transform 0.25s; +} +.jf-infra-card:hover { transform: translateY(-4px); } +.jf-infra-icon { font-size: 2rem; margin-bottom: 0.85rem; } +.jf-infra-name { + font-size: 1rem; + font-weight: 800; + margin-bottom: 0.65rem; +} +.jf-infra-card p { + font-size: 0.8rem; + opacity: 0.85; + line-height: 1.6; + margin-bottom: 1rem; +} +.jf-infra-stat { + font-size: 0.72rem; + opacity: 0.75; + border-top: 1px solid rgba(255,255,255,0.2); + padding-top: 0.75rem; +} +.jf-infra-stat span { + font-size: 1rem; + font-weight: 800; + opacity: 1; + display: block; +} + +/* License bar */ +.jf-license-bar { + border-top: 1px solid rgba(255,255,255,0.1); + padding-top: 1.5rem; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.75rem; +} +.jf-lic-label { + font-size: 0.72rem; + font-weight: 700; + color: rgba(255,255,255,0.55); + text-transform: uppercase; + letter-spacing: 0.1em; + white-space: nowrap; +} +.jf-lic-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } +.jf-lic-chips span { + background: rgba(255,255,255,0.1); + color: rgba(255,255,255,0.8); + border: 1px solid rgba(255,255,255,0.15); + border-radius: 2rem; + font-size: 0.7rem; + font-weight: 600; + padding: 0.2rem 0.75rem; + transition: all 0.2s; +} +.jf-lic-chips span:hover { + background: rgba(255,255,255,0.2); + color: #fff; +} + +/* ===================================================== + MITRA SECTION + ===================================================== */ +.jf-mitra-group-title { + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 0.85rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid #feb401; + display: inline-block; +} +.jf-mitra-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 0.75rem; + margin-bottom: 1.75rem; +} +.jf-mitra-grid-gov { + grid-template-columns: repeat(5, 1fr); +} +.jf-mitra-card { + background: #fff; + border: 1px solid #e2e8f0; + border-radius: 0.75rem; + padding: 1rem 0.75rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + min-height: 70px; + transition: all 0.25s; + gap: 0.4rem; +} +.jf-mitra-card:hover { + border-color: #005eb8; + box-shadow: 0 4px 16px rgba(0,94,184,0.1); + transform: scale(1.03); +} +.jf-mitra-logo { font-size: 1.4rem; } +.jf-mitra-name { font-size: 0.7rem; font-weight: 600; color: #475569; line-height: 1.3; } + +/* ===================================================== + LIFE AT INFORMATIKA + ===================================================== */ +.jf-life-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: 1.25rem; +} +.jf-life-card { + border-radius: 1.25rem; + padding: 2rem 1.5rem; + color: #fff; + min-height: 180px; + display: flex; + flex-direction: column; + justify-content: flex-end; + transition: transform 0.25s; +} +.jf-life-card:hover { transform: translateY(-3px); } +.jf-life-label { + font-size: 1rem; + font-weight: 800; + margin-bottom: 0.5rem; +} +.jf-life-card p { + font-size: 0.8rem; + opacity: 0.85; + line-height: 1.5; +} + +/* ===================================================== + CTA / KONTAK SECTION + ===================================================== */ +.jf-cta-section { + background: linear-gradient(135deg, #0a1628 0%, #003150 60%, #004a7c 100%); + padding: 5rem 0; + position: relative; + overflow: hidden; +} +.jf-cta-section::before { + content: ''; + position: absolute; + top: -60%; + right: -10%; + width: 500px; + height: 500px; + background: radial-gradient(circle, rgba(0,90,184,0.15) 0%, transparent 70%); + pointer-events: none; +} +.jf-cta-inner { + display: grid; + grid-template-columns: 1fr 420px; + gap: 4rem; + align-items: center; +} +.jf-cta-left .jf-badge { background: rgba(254,180,1,0.15); color: #feb401; border: 1px solid rgba(254,180,1,0.3); } +.jf-cta-title { + font-size: clamp(1.8rem, 3.5vw, 2.6rem); + font-weight: 800; + color: #fff; + line-height: 1.2; + margin-bottom: 1rem; +} +.jf-cta-highlight { color: #feb401; } +.jf-cta-left p { + font-size: 0.9rem; + color: rgba(255,255,255,0.7); + line-height: 1.75; + margin-bottom: 2rem; +} +.jf-cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; } +.jf-btn-yellow { + display: inline-block; + background: #feb401; + color: #003150; + font-size: 0.85rem; + font-weight: 800; + padding: 0.8rem 1.75rem; + border-radius: 0.5rem; + transition: all 0.2s; +} +.jf-btn-yellow:hover { background: #ffc933; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(254,180,1,0.4); } +.jf-btn-green { + display: inline-block; + background: #22c55e; + color: #fff; + font-size: 0.85rem; + font-weight: 800; + padding: 0.8rem 1.75rem; + border-radius: 0.5rem; + transition: all 0.2s; +} +.jf-btn-green:hover { background: #16a34a; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(34,197,94,0.4); } + +/* Contact card */ +.jf-kontak-card { + background: rgba(255,255,255,0.08); + border: 1px solid rgba(255,255,255,0.15); + border-radius: 1.25rem; + padding: 2rem; + backdrop-filter: blur(10px); +} +.jf-kontak-title { + font-size: 0.85rem; + font-weight: 800; + color: #fff; + letter-spacing: 0.08em; + text-transform: uppercase; + margin-bottom: 1.5rem; + padding-bottom: 0.75rem; + border-bottom: 1px solid rgba(255,255,255,0.15); +} +.jf-kontak-list { display: flex; flex-direction: column; gap: 1.1rem; } +.jf-kontak-item { display: flex; align-items: flex-start; gap: 0.9rem; } +.jf-kontak-icon { + width: 36px; + height: 36px; + background: rgba(255,255,255,0.1); + border-radius: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1rem; + flex-shrink: 0; +} +.jf-kontak-label { + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba(255,255,255,0.5); + margin-bottom: 0.25rem; +} +.jf-kontak-val { + font-size: 0.82rem; + color: rgba(255,255,255,0.9); + line-height: 1.5; +} +.jf-kontak-val small { color: rgba(255,255,255,0.5); font-size: 0.72rem; } + +/* ===================================================== + RESPONSIVE + ===================================================== */ +@media (max-width: 1024px) { + .jf-hero-inner { grid-template-columns: 1fr; } + .jf-timeline-card { position: static; } + .jf-stats-grid { grid-template-columns: repeat(2, 1fr); } + .jf-infra-grid { grid-template-columns: repeat(2, 1fr); } + .jf-karir-layout { grid-template-columns: 1fr; gap: 2.5rem; } + .jf-cta-inner { grid-template-columns: 1fr; gap: 2.5rem; } + .jf-mitra-grid { grid-template-columns: repeat(3, 1fr); } + .jf-mitra-grid-gov { grid-template-columns: repeat(3, 1fr); } + .jf-life-grid { grid-template-columns: 1fr 1fr; } + .jf-life-card.jf-life-big { grid-column: span 2; } +} +@media (max-width: 768px) { + .jf-section { padding: 3.5rem 0; } + .jf-prestasi-grid { grid-template-columns: 1fr; } + .jf-sc-grid { grid-template-columns: 1fr; } + .jf-alumni-grid { grid-template-columns: 1fr; } + .jf-stats-row2 { grid-template-columns: 1fr; } + .jf-karir-right { grid-template-columns: 1fr; } + .jf-life-grid { grid-template-columns: 1fr; } + .jf-life-card.jf-life-big { grid-column: span 1; } + .jf-sc-cta { flex-direction: column; align-items: flex-start; } + .jf-mitra-grid { grid-template-columns: repeat(2, 1fr); } + .jf-mitra-grid-gov { grid-template-columns: repeat(2, 1fr); } +} \ No newline at end of file