/** * Breadcrumb Improvements — semua tema website Taqmir * Selector scoped per tema via class di tag. */ /* ════════════════════════════════════════════════════════════════ BASE — .breadcrumbs (FlexStart family: nabawi, flexstart, flexstart2, istiqbal, adam) ════════════════════════════════════════════════════════════════ */ .breadcrumbs { padding: 52px 0 24px !important; min-height: auto !important; color: #fff; position: relative; overflow: hidden; } /* Susun: judul halaman di atas, trail navigasi di bawah */ .breadcrumbs .container { display: flex !important; flex-direction: column-reverse !important; gap: 8px !important; } /* ── Judul halaman ── */ .breadcrumbs h2 { font-size: clamp(1.35rem, 3vw, 2rem) !important; font-weight: 700 !important; margin: 0 !important; color: #fff !important; line-height: 1.25 !important; letter-spacing: 0.01em; } /* ── Trail navigasi ── */ .breadcrumbs ol { display: flex !important; flex-wrap: wrap !important; list-style: none !important; padding: 0 !important; margin: 0 !important; font-size: 0.82rem !important; align-items: center !important; gap: 0 !important; } .breadcrumbs ol li { display: inline-flex; align-items: center; color: rgba(255, 255, 255, 0.6); } /* Tautan: terang */ .breadcrumbs ol a { color: rgba(255, 255, 255, 0.88) !important; text-decoration: none !important; transition: color 0.2s !important; } .breadcrumbs ol a:hover { color: #fff !important; text-decoration: none !important; } /* Separator: chevron tipis */ .breadcrumbs ol li + li { padding-left: 0 !important; } .breadcrumbs ol li + li::before { content: "\203A" !important; /* › */ display: inline-block !important; padding: 0 7px !important; color: rgba(255, 255, 255, 0.35) !important; font-size: 1.05rem !important; line-height: 1 !important; } /* Ikon rumah via CSS pseudo-element — hanya untuk tema yang breadcrumb-nya inline (nabawi, flexstart, flexstart2, istiqbal). Tema lain (adam, fluxo, incare) sudah punya ikon di HTML partial-nya. */ .nabawi-theme .breadcrumbs ol li:first-child a::before, .flexstart-theme .breadcrumbs ol li:first-child a::before, .flexstart2-theme .breadcrumbs ol li:first-child a::before, .istiqbal-theme .breadcrumbs ol li:first-child a::before { font-family: "bootstrap-icons" !important; content: "\F425" !important; /* bi-house-fill */ margin-right: 4px; font-size: 0.85rem; vertical-align: middle; } /* ════════════════════════════════════════════════════════════════ WARNA PER TEMA — .breadcrumbs ════════════════════════════════════════════════════════════════ */ /* ── Nabawi: emerald gelap ── */ .nabawi-theme .breadcrumbs { background: linear-gradient( 135deg, #052e28 0%, #0d4a3e 60%, #145a4a 100% ) !important; border-bottom: 1px solid rgba(201, 162, 39, 0.2) !important; } .nabawi-theme .breadcrumbs h2 { color: #fbf8f1 !important; } .nabawi-theme .breadcrumbs ol li + li::before { color: rgba(201, 162, 39, 0.45) !important; } .nabawi-theme .breadcrumbs ol a { color: rgba(251, 248, 241, 0.85) !important; } .nabawi-theme .breadcrumbs ol a:hover { color: #fbf8f1 !important; } /* ── FlexStart & FlexStart2: biru navy ── */ .flexstart-theme .breadcrumbs, .flexstart2-theme .breadcrumbs { background: linear-gradient( 135deg, #011f5b 0%, #012970 55%, #013bab 100% ) !important; } /* ── Istiqbal: biru yang lebih hangat ── */ .istiqbal-theme .breadcrumbs { background: linear-gradient( 135deg, #0d1f5c 0%, #1a3a8c 55%, #2850c8 100% ) !important; } /* ── Adam: navy teal ── */ .adam-theme .breadcrumbs { background: linear-gradient( 135deg, #010488 0%, #0104a8 55%, #0e7a60 100% ) !important; } .adam-theme .breadcrumbs ol li + li::before { color: rgba(26, 204, 141, 0.5) !important; } /* ── Mobile semua tema ── */ @media (max-width: 767px) { .breadcrumbs { padding: 44px 0 20px !important; } .breadcrumbs h2 { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; } .breadcrumbs ol { font-size: 0.78rem !important; } } /* ════════════════════════════════════════════════════════════════ FLUXO — .fluxo-breadcrumb ════════════════════════════════════════════════════════════════ */ .fluxo-theme .fluxo-breadcrumb { padding: 70px 0 30px !important; position: relative; overflow: hidden; } /* Dekorasi lingkaran latar belakang */ .fluxo-theme .fluxo-breadcrumb::before { content: ""; position: absolute; top: -60px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); pointer-events: none; } .fluxo-theme .fluxo-breadcrumb::after { content: ""; position: absolute; bottom: -40px; left: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, 0.03); pointer-events: none; } .fluxo-theme .fluxo-breadcrumb h1 { font-size: clamp(1.4rem, 3vw, 2rem) !important; font-weight: 700 !important; margin-bottom: 10px !important; color: #fff !important; } .fluxo-theme .fluxo-breadcrumb-nav { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 0 !important; list-style: none !important; padding: 0 !important; margin: 0 !important; font-size: 0.83rem !important; } .fluxo-theme .fluxo-breadcrumb-nav li { color: rgba(255, 255, 255, 0.55) !important; display: inline-flex; align-items: center; } .fluxo-theme .fluxo-breadcrumb-nav li + li::before { content: "\203A" !important; padding: 0 7px !important; color: rgba(255, 255, 255, 0.3) !important; font-size: 1rem !important; margin: 0 !important; } .fluxo-theme .fluxo-breadcrumb-nav li a { text-decoration: none !important; transition: color 0.2s !important; } .fluxo-theme .fluxo-breadcrumb-nav li a:hover { color: #fff !important; } @media (max-width: 767px) { .fluxo-theme .fluxo-breadcrumb { padding: 56px 0 24px !important; } .fluxo-theme .fluxo-breadcrumb h1 { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; } } /* ════════════════════════════════════════════════════════════════ INCARE — .incare-breadcrumb ════════════════════════════════════════════════════════════════ */ .incare-theme .incare-breadcrumb { padding: 68px 0 28px !important; position: relative; overflow: hidden; background: linear-gradient( 135deg, #091e42 0%, #1a3a7a 60%, #4670CE 100% ) !important; } .incare-theme .incare-breadcrumb::before { content: ""; position: absolute; top: -50px; right: -50px; width: 220px; height: 220px; border-radius: 50%; background: rgba(52, 197, 161, 0.08); pointer-events: none; } .incare-theme .incare-breadcrumb h2 { font-size: clamp(1.35rem, 3vw, 2rem) !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 8px !important; } .incare-theme .incare-breadcrumb ol { display: flex !important; flex-wrap: wrap !important; list-style: none !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; font-size: 0.82rem !important; align-items: center !important; } .incare-theme .incare-breadcrumb ol li { color: rgba(255, 255, 255, 0.55) !important; display: inline-flex; align-items: center; } .incare-theme .incare-breadcrumb ol li + li::before { content: "\203A" !important; padding: 0 7px !important; color: rgba(255, 255, 255, 0.3) !important; font-size: 1rem !important; margin: 0 !important; } .incare-theme .incare-breadcrumb ol li a { color: rgba(52, 197, 161, 0.9) !important; text-decoration: none !important; transition: color 0.2s !important; } .incare-theme .incare-breadcrumb ol li a:hover { color: #34c5a1 !important; } @media (max-width: 767px) { .incare-theme .incare-breadcrumb { padding: 54px 0 22px !important; } .incare-theme .incare-breadcrumb h2 { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; } }