/* ══════════════════════════════════════════════════════════════ RBJ-Orange Theme — identitas PT Ralindra Bara Jaya Diterapkan lewat [data-theme="rbj-orange"] pada Palet: Oranye #f5821f (primary) — warna brand pada logo Oranye tua#d96a0c Emas #f0b323 (aksen hangat) Charcoal #1f2024 (permukaan gelap) · #141519 (lebih pekat) Abu #4b5563 (secondary) Berkas ini HANYA menimpa warna yang di public.css ditulis pasti (indigo #6366f1 / rgba(99,102,241,…)), sehingga tidak ikut berubah lewat variabel tema. Selebihnya sudah memakai var(--primary) dan otomatis mengikuti palet di atas. ══════════════════════════════════════════════════════════════ */ /* ── Navbar ─────────────────────────────────────────────────────────────── */ [data-theme="rbj-orange"] #mainNav.scrolled, [data-theme="rbj-orange"] #mainNav.nav-solid { background: rgba(20,21,25,.95); box-shadow: 0 2px 24px rgba(245,130,31,.15); } @media (max-width: 991.98px) { [data-theme="rbj-orange"] #mainNav:has(.navbar-collapse.show), [data-theme="rbj-orange"] #mainNav:has(.navbar-collapse.collapsing) { background: rgba(20,21,25,.97); } } [data-theme="rbj-orange"] .nav-link.active, [data-theme="rbj-orange"] .nav-link:hover { background: rgba(245,130,31,.15); color: #fdba74 !important; } [data-theme="rbj-orange"] .navbar .nav-link.btn-link.active, [data-theme="rbj-orange"] .navbar .nav-link.btn-link.show, [data-theme="rbj-orange"] .navbar .nav-link.btn-link:hover, [data-theme="rbj-orange"] .navbar .nav-link.btn-link:focus { background: rgba(245,130,31,.15); color: #fdba74 !important; } [data-theme="rbj-orange"] .navbar .dropdown-menu { background: rgba(20,21,25,.97); border: 1px solid rgba(245,130,31,.25); } [data-theme="rbj-orange"] .navbar .dropdown-item { color: #e7e5e4; } [data-theme="rbj-orange"] .navbar .dropdown-item:hover, [data-theme="rbj-orange"] .navbar .dropdown-item:focus { background: rgba(245,130,31,.2); color: #fdba74; } [data-theme="rbj-orange"] .navbar .dropdown-item.active, [data-theme="rbj-orange"] .navbar .dropdown-item:active { background: rgba(245,130,31,.28); color: #fdba74; } /* ── Breadcrumb di page hero ────────────────────────────────────────────── */ [data-theme="rbj-orange"] .breadcrumb-dark .breadcrumb-item.active { color: #fdba74; } /* ── Hero ───────────────────────────────────────────────────────────────── */ [data-theme="rbj-orange"] .hero::before { background-image: linear-gradient(rgba(245,130,31,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(245,130,31,.07) 1px, transparent 1px); } [data-theme="rbj-orange"] .hero-overlay { background: radial-gradient(ellipse 70% 60% at 15% 40%, rgba(245,130,31,.2) 0%, transparent 60%), linear-gradient(180deg, rgba(20,21,25,.55) 0%, rgba(20,21,25,.75) 100%); } [data-theme="rbj-orange"] .hero-orb-1 { background: rgba(245,130,31,.12); } [data-theme="rbj-orange"] .hero-orb-2 { background: rgba(240,179,35,.10); } [data-theme="rbj-orange"] .hero-orb-3 { background: rgba(217,106,12,.08); } [data-theme="rbj-orange"] .hero-badge { background: rgba(245,130,31,.15); border: 1px solid rgba(245,130,31,.4); } [data-theme="rbj-orange"] .btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), #f0b323); box-shadow: 0 0 32px rgba(245,130,31,.5); } /* ── Services strip ─────────────────────────────────────────────────────── */ [data-theme="rbj-orange"] .services-strip { border-bottom: 1px solid rgba(245,130,31,.15); } [data-theme="rbj-orange"] .services-strip::before { background-image: linear-gradient(rgba(245,130,31,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(245,130,31,.05) 1px, transparent 1px); } [data-theme="rbj-orange"] .service-strip-icon { background: rgba(245,130,31,.1); border: 1px solid rgba(245,130,31,.2); } /* ── Section umum ───────────────────────────────────────────────────────── */ [data-theme="rbj-orange"] .section-tag { background: rgba(245,130,31,.1); border: 1px solid rgba(245,130,31,.25); } [data-theme="rbj-orange"] .feature-card:hover { border-color: rgba(245,130,31,.3); } /* Ikon keunggulan memakai kelas warna Bootstrap (biru) — samakan dengan brand. */ [data-theme="rbj-orange"] .feature-icon.text-primary { color: var(--primary) !important; } [data-theme="rbj-orange"] .feature-icon.text-info { color: #f0b323 !important; } [data-theme="rbj-orange"] .page-card:hover { box-shadow: 0 8px 32px rgba(245,130,31,.12); border-color: rgba(245,130,31,.25); } [data-theme="rbj-orange"] .border-glow { border-color: rgba(245,130,31,.4) !important; } /* ── Kartu produk & jasa ────────────────────────────────────────────────── */ [data-theme="rbj-orange"] .training-color-primary { background: linear-gradient(135deg, #d96a0c, #f5821f); } [data-theme="rbj-orange"] .training-card:hover { box-shadow: 0 16px 48px rgba(245,130,31,.15); border-color: rgba(245,130,31,.3); } [data-theme="rbj-orange"] .btn-daftar { box-shadow: 0 4px 14px rgba(245,130,31,.3); } [data-theme="rbj-orange"] .btn-daftar:hover { box-shadow: 0 8px 24px rgba(245,130,31,.45); } /* ── Page hero (halaman dalam) ──────────────────────────────────────────── */ [data-theme="rbj-orange"] .page-hero { background: linear-gradient(135deg, #141519, #24262c); } [data-theme="rbj-orange"] .page-hero::before { background-image: linear-gradient(rgba(245,130,31,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(245,130,31,.06) 1px, transparent 1px); } [data-theme="rbj-orange"] .page-hero-overlay { background: radial-gradient(ellipse 60% 80% at 30% 50%, rgba(245,130,31,.18), transparent 70%); } /* ── Isi halaman ────────────────────────────────────────────────────────── */ [data-theme="rbj-orange"] .content-body blockquote { background: rgba(245,130,31,.06); } /* ── CTA ────────────────────────────────────────────────────────────────── */ [data-theme="rbj-orange"] .cta-section { background: linear-gradient(135deg, #141519 0%, #2b2d33 55%, #1f2024 100%); } [data-theme="rbj-orange"] .cta-section::before { background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(245,130,31,.14) 0%, transparent 70%), linear-gradient(rgba(245,130,31,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(245,130,31,.04) 1px, transparent 1px); background-size: auto, 50px 50px, 50px 50px; } [data-theme="rbj-orange"] .cta-contact-btn { background: rgba(245,130,31,.2); border: 1px solid rgba(245,130,31,.45); } [data-theme="rbj-orange"] .cta-contact-btn:hover { background: rgba(245,130,31,.38); } /* ── Artikel & galeri ───────────────────────────────────────────────────── */ [data-theme="rbj-orange"] .artikel-card:hover { border-color: rgba(245,130,31,.3); } [data-theme="rbj-orange"] .artikel-thumb-overlay { background: rgba(245,130,31,.55); } [data-theme="rbj-orange"] .artikel-btn { background: rgba(245,130,31,.08); border: 1px solid rgba(245,130,31,.25); } [data-theme="rbj-orange"] .artikel-btn:hover { box-shadow: 0 4px 12px rgba(245,130,31,.3); } [data-theme="rbj-orange"] .artikel-cat-badge { background: rgba(245,130,31,.1); border: 1px solid rgba(245,130,31,.25); } [data-theme="rbj-orange"] .lightbox-close, [data-theme="rbj-orange"] .lightbox-nav { background: rgba(245,130,31,.2); border: 1px solid rgba(245,130,31,.4); } [data-theme="rbj-orange"] .lightbox-close:hover, [data-theme="rbj-orange"] .lightbox-nav:hover { background: rgba(245,130,31,.4); } [data-theme="rbj-orange"] .lb-spinner { border: 3px solid rgba(245,130,31,.2); } /* ── Kontak ─────────────────────────────────────────────────────────────── */ [data-theme="rbj-orange"] .contact-info-card:hover { border-color: rgba(245,130,31,.25); } /* ── Footer ─────────────────────────────────────────────────────────────── */ [data-theme="rbj-orange"] .footer::before { background-image: linear-gradient(rgba(245,130,31,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(245,130,31,.04) 1px, transparent 1px); }