/* ========================================================================== EPIC Academy — Reskin penuh ala GEMS Consulting -------------------------------------------------------------------------- Palet (navy #072F3D / blue #0C647D / cyan #3FB9D4), font (Space Grotesk + Inter + IBM Plex Mono), nav pil melayang, eyebrow bertitik mono, tombol dengan angkat+bayangan berwarna, fisika hover kartu, ritme section, aksen sudut "gem" — semua dipetakan 1:1 dari web GEMS Consulting ke token warna & font EPIC sendiri (--primary-*, --accent-*, --font-*, --brand-gradient), yang sudah dipakai di seluruh 4 halaman. Konten, data, dan fitur (quiz, filter, dark mode, i18n, modal) TIDAK diubah — murni lapisan gaya. File ini di-load PALING TERAKHIR (lewat partials/theme-head) di setiap halaman, sehingga cukup aman menimpa CSS lama tanpa banyak !important. Mode gelap tetap dikendalikan theme-dark.css (specificity-nya lebih tinggi lewat html[data-theme="dark"], jadi otomatis tetap menang). ========================================================================== */ /* Font GEMS yang belum tentu di-load EPIC (Space Grotesk, IBM Plex Mono) — di-@import di sini supaya tidak perlu sentuh di 4 halaman terpisah. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap'); :root{ /* EPIC sudah memuat font Space Mono di tapi belum dipakai di mana pun — dipakai di sini sebagai "aksen mono" ala GEMS (eyebrow, angka statistik, tag/pill kecil), sementara Poppins tetap jadi font utama. */ --font-mono: 'IBM Plex Mono', 'Space Mono', monospace; --radius-card: 14px; --ease-lift: cubic-bezier(.22,.85,.32,1); } /* ========================================================================== 0. TIPOGRAFI — dipetakan 1:1 ke stack GEMS. Space Grotesk (display) + Inter (body) + IBM Plex Mono (aksen). Karena SELURUH CSS di 4 halaman sudah dibangun di atas var(--font-*), menimpa 3 token ini otomatis mengubah semua h1-h4, paragraf, label kecil, tag, dan tombol di seluruh situs — tanpa sentuh markup. ========================================================================== */ :root{ --font-display: 'Space Grotesk', 'Poppins', sans-serif; --font-body: 'Inter', 'Poppins', sans-serif; --font-label: 'IBM Plex Mono', 'Space Mono', monospace; --bs-body-font-family: var(--font-body); } h1,h2,h3,h4{ letter-spacing:-.02em; } .hero-v2 h1, .roadmap-hero h1, .quiz-hero h1, .stories-hero h1, .profile-title{ line-height: 1.08; } body, p, .btn, input, select, textarea{ font-family: var(--font-body); } /* ========================================================================== 0B. PALET WARNA — dipetakan 1:1 ke palet GEMS (navy / blue / cyan), menggantikan biru-teal + oranye EPIC. Nama variabel TETAP token asli EPIC (--primary-*, --accent-*, --brand-gradient) supaya semua CSS lama yang sudah memakainya di 4 halaman otomatis ikut berubah tanpa sentuh markup. Mode gelap TIDAK disentuh di sini — html[data-theme="dark"] di theme-dark.css punya specificity lebih tinggi jadi otomatis tetap menang saat dark mode aktif. ========================================================================== */ :root{ /* ---- ACUAN: hero halaman Roadmap (= kartu profil EPIC Academy) ---- Diambil dengan pipet dari screenshot: #0D566E (kiri-atas) -> #0C647D (tengah, warna utama) -> #0C7089 (kanan-bawah), dengan #147A93 sebagai teal paling terang di ujung kanan. Rentangnya sengaja dibuat RAPAT supaya tidak ada permukaan gelap yang terlihat beda sendiri. Tidak ada lagi navy, biru royal, ungu, atau oranye di mana pun. */ --primary-900:#073A4B; /* teal paling gelap — footer & navbar ter-scroll */ --primary-800:#0A4E64; /* teal gelap — panel & section pekat */ --primary-700:#0D566E; /* ujung terang gradien kartu (kiri-atas) */ --primary-600:#0C647D; /* WARNA UTAMA — dominan di kartu profil */ --primary-500:#0C7089; /* ujung terang gradien kartu (kanan-bawah) */ --primary-400:#147A93; /* teal paling terang (ujung kanan hero) */ --primary-300:#57A3B8; /* teal pucat untuk border & ikon di bg gelap */ --primary-100:#E4F0F4; /* tint sangat terang untuk kartu/bg lembut */ --primary-50:#F2F8FA; /* paper */ /* Aksen = teal-cyan terang (pengganti total oranye EPIC & cyan GEMS) */ --accent-700:#1E93B0; --accent-600:#2FA8C4; --accent-500:#3FB9D4; --accent-100:#E6F6FA; /* Netral ditarik ke arah teal supaya abu-abunya tidak terasa asing */ --ink:#0F2027; --ink-soft:#4A6069; --ink-faint:#7E959E; --line:#DDE7EA; --cream:#F2F8FA; /* Gradien brand = persis arah & warna gradien kartu profil */ --brand-gradient: linear-gradient(135deg, #0D566E 0%, #0C647D 55%, #0C7089 100%); /* = hero Roadmap */ --brand-gradient-deep: linear-gradient(160deg, #073A4B 0%, #0A4E64 45%, #0D566E 100%); /* hanya utk panel kecil */ --bs-link-color: var(--primary-600); --bs-link-hover-color: var(--primary-500); } /* ========================================================================== 1. EYEBROW / "STAMP" — tambahkan penanda diamond mono ala GEMS ========================================================================== */ .stamp{ font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; gap: 9px; } .stamp::before{ width: 7px; height: 7px; border-radius: 0; clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); background: var(--accent-500); } .stamp.light::before{ background: var(--accent-500); } .stamp .brand-name{ text-transform:none; } /* Angka besar (statistik hero, jumlah tahun, dsb.) ikut mendapat aksen mono */ .hero-stat b, .year-badge b, .stat-value, .progress-percent, .adv-num, .coop-item .num, .pstat .num{ font-family: var(--font-mono); letter-spacing: -0.01em; } /* Tag/pill kecil (kategori, filter, svc-tag) memakai mono supaya senada dengan chip keyword GEMS */ .svc-tag, .vm-eyebrow, .hero-feat b, .filter-btn, .story-program, .stories-count p strong{ font-family: var(--font-label); } /* ========================================================================== 2. TOMBOL — angkat + bayangan berwarna saat hover, seperti .btn-primary GEMS ========================================================================== */ .btn{ transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease; } /* Tombol CTA solid ("btn-gold") dipetakan ke BLUE GEMS (bukan cyan) — di web GEMS sendiri tombol solid utama (.btn-primary) selalu memakai --blue, cyan hanya dipakai untuk aksen/dekorasi supaya kontras teks putih di atasnya tetap terjaga (cyan terlalu terang untuk isi tombol). */ .btn-gold{ background:var(--primary-600); border-color:var(--primary-600); color:#fff; } .btn-gold:hover, .btn-gold:focus{ background:var(--primary-700); border-color:var(--primary-700); color:#fff; transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(12,100,125,.55); } .btn-navy:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(7,47,61,.5); } .btn-outline-light:hover, .btn-outline-secondary:hover{ transform: translateY(-2px); } .epic-nav-cta{ box-shadow: 0 10px 24px -10px rgba(12,100,125,.6); } /* ========================================================================== 3. KARTU — samakan fisika hover di semua jenis kartu situs (naik 5px, radius konsisten, border ikut warna primary saat hover) ========================================================================== */ .svc-card, .fac-card, .adv-card, .alumni-card, .why-card, .prog-card-big, .prog-card-sm, .testi-card, .story-card, .program-card, .result-program-card, .question-card, .team-card, .office-card, .related-card{ border-radius: var(--radius-card); transition: transform .32s var(--ease-lift), box-shadow .32s var(--ease-lift), border-color .32s ease; } .svc-card:hover, .fac-card:hover, .adv-card:hover, .alumni-card:hover, .why-card:hover, .prog-card-big:hover, .prog-card-sm:hover, .testi-card:hover, .program-card:hover{ transform: translateY(-6px); border-color: var(--primary-500) !important; } .story-card:hover{ border-color: var(--primary-500) !important; } /* ========================================================================== 4. RITME SECTION — judul section senada dgn .sec-head GEMS ========================================================================== */ .section-head{ margin-bottom: 44px; } .section-head .stamp{ margin-bottom: 16px; } /* ========================================================================== 5. AKSEN SUDUT "GEM" — dekorasi pentagon di panel gelap/gradient, dipasang lewat ::after di selector yang SUDAH ada (tanpa ubah markup), meniru aksen conic-gradient di .cta GEMS tapi pakai warna aksen EPIC. ========================================================================== */ .hero-v2, .roadmap-hero, .quiz-hero, .stories-hero, .contact, .alumni, .history{ position: relative; } .hero-v2::after, .roadmap-hero::after, .quiz-hero::after, .stories-hero::after, .contact::after, .alumni::after{ content:''; position:absolute; right:-70px; top:-70px; width:260px; height:260px; opacity:.35; pointer-events:none; z-index:0; background:conic-gradient(from 90deg, var(--accent-500), transparent 60%); clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); } .hero-v2 .container, .roadmap-hero .container, .quiz-hero .container, .stories-hero .container, .contact .container, .alumni .container{ position:relative; z-index:1; } /* ========================================================================== 6. FOOTER — label huruf kecil-kapital & transisi tautan, ala GEMS ========================================================================== */ footer.site h5, footer.site h6, footer.site .foot-title{ font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); } footer.site a{ transition: color .2s ease; } footer.site a:hover{ color: var(--accent-500) !important; } footer.site .foot-bottom{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:12.5px; color:rgba(255,255,255,.55); } /* ========================================================================== 7. NAV LINK underline ala GEMS (garis halus tumbuh dari tengah saat hover) ========================================================================== */ #mainNavbar .nav-link{ position:relative; } #mainNavbar .nav-link:not(.active)::before{ content:''; position:absolute; left:50%; bottom:2px; width:0; height:1.5px; background:var(--accent-500); transition:width .25s ease, left .25s ease; } #mainNavbar .nav-link:not(.active):hover::before{ width:70%; left:15%; } /* ========================================================================== 8. FOKUS AKSESIBILITAS — konsisten dgn semua tombol/link baru ========================================================================== */ a:focus-visible, button:focus-visible, .btn:focus-visible{ outline: 2px solid var(--primary-500); outline-offset: 2px; } @media (prefers-reduced-motion: reduce){ .btn, .svc-card, .fac-card, .adv-card, .alumni-card, .why-card, .prog-card-big, .prog-card-sm, .testi-card, .story-card, .program-card{ transition: none !important; } } /* ========================================================================== 12. RITME SECTION DESKTOP — dilebarkan mendekati napas GEMS (96px) di layar besar. Breakpoint mobile Epic yang sudah dituning rapi dibiarkan apa adanya supaya tidak mengacaukan spacing yang sudah teruji. ========================================================================== */ @media (min-width:1200px){ section{ padding:96px 0; } } /* ========================================================================== 13. HERO/PAGE-HEADER BACKGROUND — radial glow bawaan EPIC pakai warna biru+oranye hardcoded (bukan token), jadi ditimpa di sini supaya ikut navy/blue/cyan GEMS secara konsisten di ke-4 hero (home, roadmap, quiz, success-stories). ========================================================================== */ .hero-v2, .roadmap-hero, .quiz-hero, .stories-hero{ background: radial-gradient(900px 500px at 85% -10%, rgba(12,100,125,.35), transparent 60%), radial-gradient(700px 400px at 100% 100%, rgba(63,185,212,.22), transparent 55%), var(--brand-gradient); } @media (max-width: 767.98px){ .hero-v2::after, .roadmap-hero::after, .quiz-hero::after, .stories-hero::after, .contact::after, .alumni::after{ width:170px; height:170px; right:-50px; top:-50px; opacity:.25; } } /* ========================================================================== 9. HERO HALAMAN INTERNAL (roadmap/quiz/success-stories) — dipusatkan & diberi napas ala .page-header GEMS. Dipakai !important karena tiap halaman punya style="padding-top:120px" inline yang specificity-nya tinggi. ========================================================================== */ .roadmap-hero, .quiz-hero, .stories-hero{ padding-top: 152px !important; padding-bottom: 84px !important; text-align: center; } .roadmap-hero .col-lg-8, .quiz-hero .col-lg-8, .stories-hero .col-lg-8{ margin: 0 auto; float: none; } .roadmap-hero .stamp.light, .quiz-hero .stamp.light, .stories-hero .stamp.light, .roadmap-hero .mt-4, .quiz-hero .mt-4{ justify-content: center; display: inline-flex; } .roadmap-hero .mt-4, .quiz-hero .mt-4{ display:flex; justify-content:center; } .roadmap-hero p.fs-5, .quiz-hero p.fs-5, .stories-hero p.fs-5{ margin-left:auto; margin-right:auto; } .roadmap-hero h1 em, .quiz-hero h1 em, .stories-hero h1 em, .hero-v2 h1 .accent{ font-style: italic; color: var(--accent-500); font-weight: 500; } @media (max-width: 767.98px){ .roadmap-hero, .quiz-hero, .stories-hero{ padding-top:126px !important; padding-bottom:60px !important; } } /* ========================================================================== 10. CTA BAR — ikut dapat aksen sudut gem & radius lebih lega ala .cta GEMS ========================================================================== */ .cta-bar{ position:relative; overflow:hidden; border-radius:24px; } .cta-bar::after{ content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; opacity:.3; pointer-events:none; z-index:0; background:conic-gradient(from 90deg, var(--accent-500), transparent 60%); clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); } .cta-bar > *{ position:relative; z-index:1; } /* ========================================================================== 11. TESTIMONIAL — tanda kutip besar ala kartu testimoni GEMS ========================================================================== */ .testi-card{ position:relative; } .testi-body p.quote::before{ content:'“'; display:block; font-family:var(--font-display); font-size:42px; line-height:.5; color: var(--primary-100); margin-bottom:10px; } /* Bintang rating: GEMS pakai warna amber (#F5B942) khusus untuk ini, bukan cyan/blue — dipertahankan di sini supaya rating tetap terbaca sebagai "bintang", persis seperti .testi-stars .filled & .hero-trust .stars GEMS. */ .testi-body .stars{ color:#F5B942; } /* ========================================================================== 14. PENYELARASAN PALET TEAL — diturunkan dari kartu profil EPIC Academy -------------------------------------------------------------------------- Seluruh situs sekarang memakai satu keluarga warna: teal #0D566E -> #0C647D -> #0C7089 (gradien kartu), aksen cyan #3FB9D4, permukaan terang #F2F8FA / #E4F0F4. Tidak ada lagi navy, biru royal, ungu, atau oranye. Blok ini menangani konsekuensinya: karena warna aksi utama kini SAMA keluarganya dengan background section gelap, tombol solid di atas hero gelap perlu dibalik (putih -> teks teal) supaya kontrasnya tetap lolos. ========================================================================== */ /* ---- Hero & panel gelap: persis gradien kartu profil ---- */ .hero-v2, .roadmap-hero, .quiz-hero, .stories-hero{ background: radial-gradient(900px 500px at 85% -10%, rgba(12,112,137,.45), transparent 60%), radial-gradient(700px 400px at 100% 100%, rgba(63,185,212,.20), transparent 55%), var(--brand-gradient) !important; } /* Hero homepage DULU memakai gradien jauh lebih gelap (--brand-gradient-deep) sehingga terlihat beda sendiri dibanding hero Roadmap/Quiz/Success Stories. Sekarang keempatnya memakai satu deklarasi yang sama persis di atas, jadi tidak ada lagi override khusus .hero-v2 di sini. --brand-gradient-deep disisakan hanya untuk panel kecil yang memang perlu lebih pekat. */ /* ---- Tombol solid ---- */ .btn-gold{ background:var(--primary-600) !important; border-color:var(--primary-600) !important; color:#fff !important; } .btn-gold:hover, .btn-gold:focus{ background:var(--primary-800) !important; border-color:var(--primary-800) !important; color:#fff !important; box-shadow:0 14px 28px -10px rgba(12,100,125,.55); } .btn-navy{ background:var(--primary-800); border-color:var(--primary-800); color:#fff; } .btn-navy:hover{ background:var(--primary-900); border-color:var(--primary-900); color:#fff; } /* Di atas section gelap, tombol solid dibalik jadi putih supaya tidak "tenggelam" ke background yang kini sewarna. */ .hero-v2 .btn-gold, .roadmap-hero .btn-gold, .quiz-hero .btn-gold, .stories-hero .btn-gold, .cta-bar .btn-gold, .contact .btn-gold, .alumni .btn-gold, footer.site .btn-gold, footer.site-v2 .btn-gold, .epic-nav-cta.btn-gold{ background:#fff !important; border-color:#fff !important; color:var(--primary-800) !important; } .hero-v2 .btn-gold:hover, .roadmap-hero .btn-gold:hover, .quiz-hero .btn-gold:hover, .stories-hero .btn-gold:hover, .cta-bar .btn-gold:hover, .contact .btn-gold:hover, .alumni .btn-gold:hover, footer.site .btn-gold:hover, footer.site-v2 .btn-gold:hover, .epic-nav-cta.btn-gold:hover{ background:var(--accent-100) !important; border-color:var(--accent-100) !important; color:var(--primary-900) !important; box-shadow:0 14px 28px -10px rgba(2,22,28,.45); } .hero-v2 .btn-navy, .roadmap-hero .btn-navy, .quiz-hero .btn-navy, .stories-hero .btn-navy{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.34); color:#fff; } .hero-v2 .btn-navy:hover, .roadmap-hero .btn-navy:hover, .quiz-hero .btn-navy:hover, .stories-hero .btn-navy:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.55); color:#fff; } /* ---- Alias warna lama di quiz/roadmap/success-stories ---- (--gold, --blue, --purple) dipetakan ke keluarga teal supaya kartu kategori, badge, dan garis timeline ikut berubah tanpa sentuh markup. */ :root{ --primary-color: var(--primary-900); --secondary-color: var(--primary-600); --gold: var(--accent-500); --gold-tint: var(--accent-100); --blue: var(--primary-600); --blue-tint: var(--primary-100); --purple: var(--primary-800); --purple-tint: var(--primary-100); --light-bg: var(--cream); --muted: var(--ink-soft); } /* ---- Badge, pill, chip: pakai warna pill kartu profil ---- */ .stamp, .svc-tag, .meta-chip, .story-program, .prog-flag-badge, .year-badge{ border-color: var(--primary-100); } .stamp{ background:var(--primary-100); color:var(--primary-700); } .stamp.light{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:#fff; } /* ---- Link & ikon aksen ---- */ a{ color:var(--primary-600); } a:hover{ color:var(--primary-500); } .text-primary{ color:var(--primary-600) !important; } .bg-primary{ background-color:var(--primary-600) !important; } .border-primary{ border-color:var(--primary-600) !important; } .progress-bar, .progress .progress-bar{ background:var(--brand-gradient); } ::selection{ background:var(--primary-500); color:#fff; } /* ---- Form focus ---- */ .form-control:focus, .form-select:focus, .search-input:focus{ border-color:var(--primary-500); box-shadow:0 0 0 .2rem rgba(12,112,137,.22); } /* ---- Scrollbar (Chromium/WebKit) ---- */ html{ scrollbar-color: var(--primary-500) var(--primary-100); } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:var(--primary-100); } ::-webkit-scrollbar-thumb{ background:var(--primary-500); border-radius:999px; } ::-webkit-scrollbar-thumb:hover{ background:var(--primary-600); } /* ---- Footer ---- */ footer.site, footer.site-v2{ background:var(--primary-900); } /* ---- Warna yang SENGAJA dipertahankan ---- #25D366 (WhatsApp), #4285F4/#EA4335 (Google), #F5B942 (bintang rating), #DC3545 (skor "sebelum"). Semuanya warna fungsional/brand pihak ketiga yang kalau ikut dibuat teal justru kehilangan makna. */ /* ========================================================================== 15. SATU WARNA UTAMA DI SEMUA HALAMAN -------------------------------------------------------------------------- Acuannya adalah hero halaman Roadmap: teal #0D566E -> #0C647D -> #0C7089. Semua permukaan gelap di situs (hero, navbar, section gradien, footer, header modal) sekarang memakai gradien yang sama, bukan turunan yang lebih gelap/lebih terang sendiri-sendiri. ========================================================================== */ .hero-v2, .roadmap-hero, .quiz-hero, .stories-hero, .about-card, .history, .alumni, .contact, .tab-visual, .cta-bar, .modal-prog .modal-header, .epic-navbar-inner{ background-image: var(--brand-gradient) !important; } .hero-v2, .roadmap-hero, .quiz-hero, .stories-hero{ background-image: radial-gradient(900px 500px at 85% -10%, rgba(12,112,137,.38), transparent 60%), radial-gradient(700px 400px at 100% 100%, rgba(63,185,212,.18), transparent 55%), var(--brand-gradient) !important; } /* Footer & panel paling bawah: satu langkah lebih pekat dari hero, tapi masih teal yang sama — bukan biru-hitam seperti sebelumnya. */ footer.site, footer.site-v2{ background: linear-gradient(160deg, var(--primary-800) 0%, var(--primary-900) 100%) !important; } /* Panel kecil bergradien di homepage ikut dipatok ke rentang yang sama supaya tidak ada blok yang terlihat lebih gelap sendiri. */ .vm-col.vision, .coop-panel, .prog-visual{ background-image: linear-gradient(140deg, var(--primary-700) 0%, var(--primary-500) 100%) !important; } /* Bola dunia di hero: kilau putihnya dipertahankan, hanya warna dasarnya yang ditarik ke rentang teal yang sama. */ .hero-globe{ background-image: radial-gradient(circle at 32% 28%, rgba(255,255,255,.25), rgba(255,255,255,0) 45%), linear-gradient(145deg, var(--primary-500) 0%, var(--primary-800) 100%) !important; } /* Navbar saat di-scroll: teal pekat, bukan hampir hitam */ #mainNavbar.scrolled .epic-navbar-inner{ background: rgba(10,78,100,.97) !important; background-image: none !important; } @media (max-width:991.98px){ #mainNavbar .navbar-collapse{ background: rgba(10,78,100,.97) !important; } }