/* ══════════════════════════════════════════════════════════════ Zitec-Digi Theme — Bright & Elegant Applied via [data-theme="zitec-digi"] on Palette: Primary #0891b2 (teal-cyan refined) Bright #22d3ee (highlights) Indigo #6366f1 (depth) Violet #a855f7 (accent) Sidebar #0f172a (deep navy) Body #f0f9ff (light cyan tint) ══════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════ DASHBOARD LAYOUT ════════════════════════════════════════════════════════ */ /* ── Body: bright cyan-tinted light background ──────────── */ [data-theme="zitec-digi"] .dashboard-body { background: #f0f9ff; color: #0f172a; } /* ── Sidebar: deep navy, elegant ────────────────────────── */ [data-theme="zitec-digi"] .sidebar { width: 260px; overflow-y: auto !important; overflow-x: hidden !important; background: linear-gradient(180deg, #0f172a 0%, #0c1a2e 100%); border-right: none; box-shadow: 4px 0 32px rgba(8,145,178,.12); } /* Brand icon — glowing, with text */ [data-theme="zitec-digi"] .sidebar-brand { justify-content: flex-start; padding: 1.1rem 1.25rem .9rem; border-bottom: 1px solid rgba(34,211,238,.1); } [data-theme="zitec-digi"] .sidebar-brand-icon { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #0891b2, #22d3ee); box-shadow: 0 4px 16px rgba(8,145,178,.45), 0 0 0 3px rgba(34,211,238,.1); flex-shrink: 0; } [data-theme="zitec-digi"] .sidebar-brand-logo { max-width: 36px; height: 30px; } [data-theme="zitec-digi"] .sidebar-brand-text { color: #e0f7ff; font-size: 1rem; font-weight: 700; letter-spacing: .2px; } /* User avatar */ [data-theme="zitec-digi"] .sidebar-user { justify-content: flex-start; padding: .9rem 1.25rem; } [data-theme="zitec-digi"] .sidebar-user-avatar { background: linear-gradient(135deg, #6366f1, #0891b2); box-shadow: 0 4px 16px rgba(99,102,241,.35); } /* Nav items: icon + label */ [data-theme="zitec-digi"] .sidebar-nav { overflow: hidden; } [data-theme="zitec-digi"] .sidebar-nav-item { justify-content: flex-start; padding: .65rem 1.25rem; gap: .85rem; margin: 1px 0; border-radius: 0; min-width: 0; transition: background .2s, color .2s; } [data-theme="zitec-digi"] .sidebar-nav-item i { font-size: 1.1rem; flex-shrink: 0; } [data-theme="zitec-digi"] .sidebar-nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } [data-theme="zitec-digi"] .sidebar-nav-item:hover { background: rgba(34,211,238,.1); color: #22d3ee; } /* Active item */ [data-theme="zitec-digi"] .sidebar-nav-item.active { background: rgba(34,211,238,.15); color: #22d3ee; } [data-theme="zitec-digi"] .sidebar-nav-item.active::before { content: ''; position: absolute; left: 0; top: 20%; width: 3px; height: 60%; background: linear-gradient(180deg, #22d3ee, #0891b2); border-radius: 0 4px 4px 0; box-shadow: 0 0 10px rgba(34,211,238,.7); transform: none; } /* Danger item */ [data-theme="zitec-digi"] .sidebar-nav-item.text-danger { color: rgba(248,113,113,.7) !important; } [data-theme="zitec-digi"] .sidebar-nav-item.text-danger:hover { background: rgba(239,68,68,.1); color: #f87171 !important; } /* Copyright */ [data-theme="zitec-digi"] .sidebar-copyright { color: rgba(34,211,238,.3); border-top-color: rgba(34,211,238,.1); font-family: 'JetBrains Mono', monospace; } /* Main wrapper offset — full sidebar width */ [data-theme="zitec-digi"] .main-wrapper { margin-left: 260px; } /* ── Topbar: white, refined ─────────────────────────────── */ [data-theme="zitec-digi"] .topbar { background: #ffffff; border-bottom: 1px solid #e0f2fe; box-shadow: 0 1px 12px rgba(8,145,178,.08); } [data-theme="zitec-digi"] .topbar-title { color: #0f172a; font-weight: 600; } [data-theme="zitec-digi"] .topbar-user-btn { border-color: #bae6fd; color: #334155; } [data-theme="zitec-digi"] .topbar-user-btn:hover { background: #f0f9ff; border-color: #0891b2; } [data-theme="zitec-digi"] .topbar-avatar { background: linear-gradient(135deg, #0891b2, #22d3ee); } [data-theme="zitec-digi"] .sidebar-toggle { color: #64748b; } [data-theme="zitec-digi"] .sidebar-toggle:hover { background: #f0f9ff; } /* ── Dashboard cards: white with cyan accent borders ────── */ [data-theme="zitec-digi"] .dashboard-card { background: #ffffff; border-color: #e0f2fe; box-shadow: 0 1px 12px rgba(8,145,178,.07); } [data-theme="zitec-digi"] .dashboard-card:hover { border-color: #0891b2; box-shadow: 0 4px 24px rgba(8,145,178,.14); } [data-theme="zitec-digi"] .dashboard-card-header { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); border-color: #e0f2fe; } /* Stat cards */ [data-theme="zitec-digi"] .stat-card { background: #ffffff; border-color: #e0f2fe; box-shadow: 0 1px 12px rgba(8,145,178,.07); } [data-theme="zitec-digi"] .stat-value { color: #0f172a; } [data-theme="zitec-digi"] .stat-label { color: #64748b; } [data-theme="zitec-digi"] .stat-card-primary .stat-icon { background: rgba(8,145,178,.1); color: #0891b2; } [data-theme="zitec-digi"] .stat-card-primary::before { background: #0891b2; } /* Sidebar widget */ [data-theme="zitec-digi"] .sidebar-widget { background: #ffffff; border-color: #e0f2fe; } [data-theme="zitec-digi"] .sidebar-widget-title { border-color: #e0f2fe; color: #64748b; } /* ── Forms: clean white with cyan focus ─────────────────── */ [data-theme="zitec-digi"] .form-control, [data-theme="zitec-digi"] .form-select { background-color: #ffffff; border-color: #bae6fd; color: #0f172a; } [data-theme="zitec-digi"] .form-control::placeholder { color: #94a3b8; } [data-theme="zitec-digi"] .form-control:focus, [data-theme="zitec-digi"] .form-select:focus { background-color: #ffffff; border-color: #0891b2; color: #0f172a; box-shadow: 0 0 0 3px rgba(8,145,178,.15); } [data-theme="zitec-digi"] .input-group-text { background: #f0f9ff; border-color: #bae6fd; color: #64748b; } [data-theme="zitec-digi"] .form-text { color: #64748b; } [data-theme="zitec-digi"] .form-check-input { border-color: #bae6fd; } [data-theme="zitec-digi"] .form-check-input:checked { background-color: #0891b2; border-color: #0891b2; } [data-theme="zitec-digi"] .form-check-label { color: #334155; } /* ── Tables: clean ──────────────────────────────────────── */ [data-theme="zitec-digi"] .table { color: #334155; } [data-theme="zitec-digi"] .table > :not(caption) > * > * { border-bottom-color: #e0f2fe; } [data-theme="zitec-digi"] .table th { color: #64748b; } [data-theme="zitec-digi"] .table-hover > tbody > tr:hover > * { background-color: rgba(8,145,178,.04); } /* ── Dropdowns ───────────────────────────────────────────── */ [data-theme="zitec-digi"] .dropdown-menu { background: #ffffff; border-color: #e0f2fe; box-shadow: 0 8px 32px rgba(8,145,178,.14); } [data-theme="zitec-digi"] .dropdown-item { color: #334155; } [data-theme="zitec-digi"] .dropdown-item:hover { background: #f0f9ff; color: #0891b2; } [data-theme="zitec-digi"] .dropdown-header { color: #64748b; } [data-theme="zitec-digi"] .dropdown-divider { border-color: #e0f2fe; } /* Navbar dropdown stays dark for all themes */ [data-theme] .navbar .dropdown-menu { background: rgba(10,15,30,.97); border-color: rgba(99,102,241,.25); box-shadow: 0 8px 32px rgba(0,0,0,.4); } [data-theme] .navbar .dropdown-item { color: #c7d0f0; } [data-theme] .navbar .dropdown-item:hover, [data-theme] .navbar .dropdown-item:focus { background: rgba(99,102,241,.2); color: #a5b4fc; } /* ── Misc utilities ──────────────────────────────────────── */ [data-theme="zitec-digi"] .border { border-color: #bae6fd !important; } [data-theme="zitec-digi"] .border-secondary-subtle { border-color: #bae6fd !important; } [data-theme="zitec-digi"] .bg-light { background-color: #f0f9ff !important; } [data-theme="zitec-digi"] .bg-primary-subtle { background-color: rgba(8,145,178,.08) !important; } [data-theme="zitec-digi"] hr { border-color: #e0f2fe; } [data-theme="zitec-digi"] .text-muted { color: #64748b !important; } /* ── Buttons ─────────────────────────────────────────────── */ [data-theme="zitec-digi"] .btn-primary { background: linear-gradient(135deg, #0891b2, #0ea5e9); border: none; box-shadow: 0 4px 16px rgba(8,145,178,.3); } [data-theme="zitec-digi"] .btn-primary:hover { background: linear-gradient(135deg, #0e7490, #0891b2); box-shadow: 0 6px 24px rgba(8,145,178,.4); transform: translateY(-1px); } [data-theme="zitec-digi"] .btn-outline-secondary { border-color: #bae6fd; color: #64748b; } [data-theme="zitec-digi"] .btn-outline-secondary:hover { background: #f0f9ff; border-color: #0891b2; color: #0891b2; } [data-theme="zitec-digi"] .btn-outline-danger { border-color: rgba(239,68,68,.35); color: #dc2626; } [data-theme="zitec-digi"] .btn-outline-danger:hover { background: rgba(239,68,68,.06); } /* ── Slide & gallery cards ───────────────────────────────── */ [data-theme="zitec-digi"] .slide-card { background: #ffffff; border-color: #e0f2fe; } [data-theme="zitec-digi"] .gallery-item-row { background: #f0f9ff; border-color: #e0f2fe; } /* ── Page type selector ──────────────────────────────────── */ [data-theme="zitec-digi"] .page-type-option { border-color: #bae6fd; } [data-theme="zitec-digi"] .page-type-option:hover { border-color: #0891b2; background: #f0f9ff; } [data-theme="zitec-digi"] .page-type-option.active { border-color: #0891b2; background: rgba(8,145,178,.08); color: #0891b2; } [data-theme="zitec-digi"] .page-type-option.active i { color: #0891b2; } /* ── Mobile: sidebar off-canvas ──────────────────────────── */ @media (max-width: 991.98px) { [data-theme="zitec-digi"] .sidebar { transform: translateX(-100%); } [data-theme="zitec-digi"] .sidebar.show { transform: translateX(0); } [data-theme="zitec-digi"] .main-wrapper { margin-left: 0 !important; } } /* ════════════════════════════════════════════════════════ PUBLIC SITE ════════════════════════════════════════════════════════ */ /* ── Navbar: frosted glass, always visible ──────────────── */ [data-theme="zitec-digi"] #mainNav { background: rgba(15,23,42,.82) !important; backdrop-filter: blur(28px) saturate(200%) !important; -webkit-backdrop-filter: blur(28px) saturate(200%) !important; border-bottom: 1px solid rgba(34,211,238,.15); padding: .75rem 0; } [data-theme="zitec-digi"] #mainNav.scrolled { background: rgba(15,23,42,.96) !important; border-bottom-color: rgba(34,211,238,.25); box-shadow: 0 4px 40px rgba(0,0,0,.35), 0 1px 0 rgba(34,211,238,.12) !important; padding: .55rem 0; } /* ── Flip: menu LEFT, logo RIGHT (desktop) ──────────────── */ @media (min-width: 992px) { [data-theme="zitec-digi"] #mainNav .navbar-brand { order: 3; } [data-theme="zitec-digi"] #mainNav .navbar-toggler { order: 2; } [data-theme="zitec-digi"] #mainNav .navbar-collapse { order: 1; flex-grow: 0; } [data-theme="zitec-digi"] #mainNav .navbar-nav { margin-left: 0 !important; margin-right: auto; gap: .1rem; } } /* ── Nav links: elegant underline animation ─────────────── */ [data-theme="zitec-digi"] .nav-link { position: relative; padding: .5rem 1rem !important; font-size: .9rem; font-weight: 500; letter-spacing: .2px; border-radius: 0; background: none !important; color: rgba(255,255,255,.7) !important; transition: color .22s; } [data-theme="zitec-digi"] .nav-link::after { content: ''; position: absolute; bottom: 2px; left: 1rem; right: 1rem; height: 2px; background: linear-gradient(90deg, #22d3ee, #0ea5e9); border-radius: 2px; box-shadow: 0 0 8px rgba(34,211,238,.6); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.4,0,.2,1); } [data-theme="zitec-digi"] .nav-link:hover { color: #ffffff !important; } [data-theme="zitec-digi"] .nav-link:hover::after { transform: scaleX(1); } [data-theme="zitec-digi"] .nav-link.active { color: #ffffff !important; font-weight: 600; } [data-theme="zitec-digi"] .nav-link.active::after { transform: scaleX(1); } /* ── Brand: right, neon-framed card ─────────────────────── */ [data-theme="zitec-digi"] .navbar-brand { padding: .35rem .75rem; border: 1px solid rgba(34,211,238,.22); border-radius: 12px; background: rgba(8,145,178,.08); backdrop-filter: blur(8px); gap: .6rem; transition: border-color .25s, box-shadow .25s, background .25s; } [data-theme="zitec-digi"] .navbar-brand:hover { border-color: rgba(34,211,238,.5); background: rgba(8,145,178,.16); box-shadow: 0 0 24px rgba(34,211,238,.2), inset 0 0 20px rgba(34,211,238,.06); } [data-theme="zitec-digi"] .brand-icon { color: #22d3ee; filter: drop-shadow(0 0 7px rgba(34,211,238,.75)); } [data-theme="zitec-digi"] .navbar-brand-text { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: .93rem; font-weight: 600; letter-spacing: .4px; color: #e0f7ff; } /* Mobile toggler */ [data-theme="zitec-digi"] .navbar-toggler { border-color: rgba(34,211,238,.25); border-radius: 8px; padding: .35rem .55rem; } [data-theme="zitec-digi"] .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(34,211,238,.2); } [data-theme="zitec-digi"] .navbar-toggler-icon { filter: invert(1) sepia(1) saturate(2) hue-rotate(155deg); } @media (max-width: 991.98px) { [data-theme="zitec-digi"] .navbar-collapse.show, [data-theme="zitec-digi"] .navbar-collapse.collapsing { background: rgba(15,23,42,.97); border: 1px solid rgba(34,211,238,.15); border-top: none; border-radius: 0 0 14px 14px; padding: .5rem 0 .75rem; margin-top: .5rem; } [data-theme="zitec-digi"] .nav-link { padding: .65rem 1.5rem !important; } [data-theme="zitec-digi"] .nav-link::after { left: 1.5rem; right: 1.5rem; } } /* ── Hero: rich vibrant gradient, not pitch-black ───────── */ [data-theme="zitec-digi"] .hero { background: linear-gradient(135deg, #0c4a6e 0%, #0f172a 45%, #1e1b4b 100%); } [data-theme="zitec-digi"] .hero::after { background-image: linear-gradient(rgba(34,211,238,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.06) 1px, transparent 1px) !important; background-size: 55px 55px !important; } [data-theme="zitec-digi"] .hero::before { background: radial-gradient(ellipse 70% 60% at 20% 45%, rgba(8,145,178,.28) 0%, transparent 55%), radial-gradient(ellipse 55% 55% at 80% 30%, rgba(99,102,241,.22) 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 50% 90%, rgba(34,211,238,.14) 0%, transparent 60%) !important; } [data-theme="zitec-digi"] .hero-orb-1 { background: rgba(8,145,178,.18); width: 600px; height: 600px; } [data-theme="zitec-digi"] .hero-orb-2 { background: rgba(99,102,241,.15); } [data-theme="zitec-digi"] .hero-orb-3 { background: rgba(34,211,238,.1); } [data-theme="zitec-digi"] .hero-badge { background: rgba(8,145,178,.18); border-color: rgba(34,211,238,.4); color: #7dd3fc; font-weight: 600; } [data-theme="zitec-digi"] .hero-title .gradient-text { background: linear-gradient(135deg, #38bdf8, #22d3ee, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="zitec-digi"] .hero-dot.active { background: #22d3ee; box-shadow: 0 0 12px rgba(34,211,238,.65); } /* ── Services strip: deep teal-to-navy ──────────────────── */ [data-theme="zitec-digi"] .services-strip { background: linear-gradient(135deg, #0c4a6e, #0f172a); border-color: rgba(34,211,238,.15); } [data-theme="zitec-digi"] .services-strip::before { background-image: linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px) !important; } [data-theme="zitec-digi"] .service-strip-icon { background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.2); color: #7dd3fc; transition: all .25s; } [data-theme="zitec-digi"] .service-strip-item:hover .service-strip-icon { background: linear-gradient(135deg, #0891b2, #22d3ee); box-shadow: 0 6px 20px rgba(8,145,178,.4); border-color: transparent; color: #fff; transform: scale(1.05); } /* ── Section tags ────────────────────────────────────────── */ [data-theme="zitec-digi"] .section-tag { background: rgba(8,145,178,.1); border-color: rgba(8,145,178,.25); color: #0891b2; } /* ── Feature / Why cards: bright white, elegant ────────── */ [data-theme="zitec-digi"] .section-why { background: #f8fafc; } [data-theme="zitec-digi"] .section-why .section-title { color: #0f172a; } [data-theme="zitec-digi"] .feature-card { background: #ffffff; border-color: #e0f2fe; box-shadow: 0 2px 16px rgba(8,145,178,.07); } [data-theme="zitec-digi"] .feature-card::before { background: linear-gradient(90deg, #0891b2, #22d3ee, #6366f1); opacity: 0; transition: opacity .25s; } [data-theme="zitec-digi"] .feature-card:hover { transform: translateY(-7px); border-color: #0891b2; box-shadow: 0 16px 48px rgba(8,145,178,.16); } [data-theme="zitec-digi"] .feature-card:hover::before { opacity: 1; } [data-theme="zitec-digi"] .feature-title { color: #0f172a; } [data-theme="zitec-digi"] .feature-desc { color: #64748b; } /* ── Training/Proyek: light soft bg ─────────────────────── */ [data-theme="zitec-digi"] .training-section { background: #f0f9ff; } [data-theme="zitec-digi"] .training-section::before { background: linear-gradient(90deg, #0891b2, #22d3ee, #6366f1); } [data-theme="zitec-digi"] .training-card { background: #ffffff; border-color: #e0f2fe; box-shadow: 0 2px 16px rgba(8,145,178,.07); } [data-theme="zitec-digi"] .training-card:hover { border-color: #0891b2; box-shadow: 0 16px 48px rgba(8,145,178,.16); transform: translateY(-8px); } [data-theme="zitec-digi"] .training-desc { color: #64748b; } [data-theme="zitec-digi"] .training-meta { background: #f0f9ff; } [data-theme="zitec-digi"] .training-meta-item { color: #334155; } [data-theme="zitec-digi"] .training-topics-list li { color: #334155; } [data-theme="zitec-digi"] .training-title { color: #ffffff; } [data-theme="zitec-digi"] .training-topics-list li i { color: #0891b2; } /* Training color overrides — keep vibrant headers */ [data-theme="zitec-digi"] .training-color-primary { background: linear-gradient(135deg, #0891b2, #22d3ee); } [data-theme="zitec-digi"] .training-color-info { background: linear-gradient(135deg, #0284c7, #38bdf8); } /* ── Page cards: white ───────────────────────────────────── */ [data-theme="zitec-digi"] .page-card { background: #ffffff; border-color: #e0f2fe; box-shadow: 0 2px 12px rgba(8,145,178,.07); } [data-theme="zitec-digi"] .page-card h5 { color: #0f172a; } [data-theme="zitec-digi"] .page-card:hover { border-color: #0891b2; box-shadow: 0 12px 40px rgba(8,145,178,.16); } /* ── Artikel cards: white ────────────────────────────────── */ [data-theme="zitec-digi"] .artikel-card { background: #ffffff; border-color: #e0f2fe; box-shadow: 0 2px 12px rgba(8,145,178,.06); } [data-theme="zitec-digi"] .artikel-card:hover { border-color: #0891b2; box-shadow: 0 12px 40px rgba(8,145,178,.14); } [data-theme="zitec-digi"] .artikel-title a { color: #0f172a; } [data-theme="zitec-digi"] .artikel-excerpt { color: #64748b; } [data-theme="zitec-digi"] .artikel-btn { background: rgba(8,145,178,.08); border-color: rgba(8,145,178,.25); color: #0891b2; } [data-theme="zitec-digi"] .artikel-btn:hover { background: #0891b2; color: #fff; box-shadow: 0 4px 12px rgba(8,145,178,.3); } /* ── Stats strip: deep teal gradient ────────────────────── */ [data-theme="zitec-digi"] .stats-strip { background: linear-gradient(135deg, #0c4a6e, #0f172a); border-color: rgba(34,211,238,.15); } [data-theme="zitec-digi"] .stat-number { background: linear-gradient(135deg, #38bdf8, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="zitec-digi"] .stat-divider { background: rgba(34,211,238,.2); } /* ── CTA: vibrant teal-indigo ───────────────────────────── */ [data-theme="zitec-digi"] .cta-section { background: linear-gradient(135deg, #0c4a6e 0%, #1e1b4b 100%); } [data-theme="zitec-digi"] .cta-section::before { background-image: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(34,211,238,.1) 0%, transparent 70%), linear-gradient(rgba(34,211,238,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.04) 1px, transparent 1px) !important; } [data-theme="zitec-digi"] .cta-contact-btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); } [data-theme="zitec-digi"] .cta-contact-btn:hover { background: rgba(255,255,255,.22); box-shadow: 0 4px 20px rgba(0,0,0,.2); } /* ── Footer: deep navy ───────────────────────────────────── */ [data-theme="zitec-digi"] .footer { background: #0a1628; } [data-theme="zitec-digi"] .footer::before { background-image: linear-gradient(rgba(34,211,238,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.03) 1px, transparent 1px) !important; } [data-theme="zitec-digi"] .social-links a:hover { background: #0891b2; } [data-theme="zitec-digi"] .footer-links a:hover { color: #22d3ee; } /* ── Inner page hero: teal-to-navy ──────────────────────── */ [data-theme="zitec-digi"] .page-hero { background: linear-gradient(135deg, #0c4a6e, #0f172a); } [data-theme="zitec-digi"] .page-hero::before { background-image: linear-gradient(rgba(34,211,238,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.06) 1px, transparent 1px) !important; } [data-theme="zitec-digi"] .page-hero-overlay { background: radial-gradient(ellipse 60% 80% at 30% 50%, rgba(8,145,178,.2), transparent 65%); } [data-theme="zitec-digi"] .content-body blockquote { border-left-color: #0891b2; background: rgba(8,145,178,.05); } [data-theme="zitec-digi"] .breadcrumb-dark .breadcrumb-item.active { color: #38bdf8; } /* ── Contact: light bg ───────────────────────────────────── */ [data-theme="zitec-digi"] .contact-page-section { background: #f0f9ff; } [data-theme="zitec-digi"] .contact-info-card { background: #ffffff; border-color: #e0f2fe; box-shadow: 0 2px 12px rgba(8,145,178,.07); } [data-theme="zitec-digi"] .contact-info-card:hover { border-color: #0891b2; box-shadow: 0 8px 32px rgba(8,145,178,.14); } [data-theme="zitec-digi"] .contact-info-title { color: #0f172a; } [data-theme="zitec-digi"] .contact-info-text { color: #64748b; } [data-theme="zitec-digi"] .contact-form-card { background: #ffffff; border-color: #e0f2fe; } [data-theme="zitec-digi"] .contact-form-title { color: #0f172a; } [data-theme="zitec-digi"] .contact-map-card { background: #ffffff; border-color: #e0f2fe; } /* ════════════════════════════════════════════════════════ SPLIT HERO (Zitec Digi public) ════════════════════════════════════════════════════════ */ [data-theme="zitec-digi"] .hero.hero-split { display: flex; flex-direction: row; align-items: stretch; min-height: 100vh; background: #0f172a; overflow: hidden; } [data-theme="zitec-digi"] .hero.hero-split::before, [data-theme="zitec-digi"] .hero.hero-split::after { display: none !important; } /* ── Left (80%): Media panel ────────────────── */ [data-theme="zitec-digi"] .hero-split-media { position: relative; flex: 0 0 80%; overflow: hidden; } [data-theme="zitec-digi"] .hero.hero-split .hero-slides, [data-theme="zitec-digi"] .hero.hero-split .hero-slide { inset: 0; } /* Gradient: strong on left for text legibility, fades right */ [data-theme="zitec-digi"] .hero-split-media-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient( to right, rgba(15,23,42,.82) 0%, rgba(15,23,42,.6) 30%, rgba(15,23,42,.18) 65%, rgba(15,23,42,.32) 100% ); pointer-events: none; } /* Info content: absolutely positioned over image, left side */ [data-theme="zitec-digi"] .hero-split-media-content { position: absolute; top: 0; left: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; padding: 7rem 3rem 4rem 4rem; max-width: 68%; } [data-theme="zitec-digi"] .hero-split-media-content .hero-badge { margin-bottom: 1.2rem; align-self: flex-start; } [data-theme="zitec-digi"] .hero-split-media-content .hero-title { font-size: clamp(2rem, 3.8vw, 3.6rem); text-align: left; text-shadow: 0 2px 24px rgba(0,0,0,.6); } [data-theme="zitec-digi"] .hero-split-media-content .hero-subtitle { text-align: left; margin-left: 0; margin-right: 0; max-width: 100%; font-size: clamp(.92rem, 1.4vw, 1.1rem); } [data-theme="zitec-digi"] .hero-split-media-content .hero-actions { text-align: left; } /* Dots: bottom-center of media panel */ [data-theme="zitec-digi"] .hero.hero-split .hero-dots { bottom: 1.75rem; left: 50%; transform: translateX(-50%); z-index: 4; } /* Scroll indicator: center of media panel */ [data-theme="zitec-digi"] .hero.hero-split .hero-scroll-indicator { position: absolute; bottom: 1.5rem; left: 40%; transform: translateX(-50%); z-index: 5; } /* Decorative panel when no slides */ [data-theme="zitec-digi"] .hero-split-media-deco { position: absolute; inset: 0; background: linear-gradient(135deg, #0c4a6e 0%, #0f172a 100%); overflow: hidden; } [data-theme="zitec-digi"] .hero-split-media-deco::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(34,211,238,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.08) 1px, transparent 1px); background-size: 52px 52px; } [data-theme="zitec-digi"] .hero-split-media-deco .hero-orb-1 { top: -80px; left: -80px; } [data-theme="zitec-digi"] .hero-split-media-deco .hero-orb-2 { bottom: 0; right: -60px; top: auto; } /* ── Right (20%): Proyek sidebar ────────────── */ [data-theme="zitec-digi"] .hero-split-info { flex: 0 0 20%; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 7rem 1rem 4rem 1.25rem; background: linear-gradient(160deg, #080e1c 0%, #0a1220 60%, #0c1a2e 100%); overflow: hidden; border-left: 1px solid rgba(34,211,238,.14); } [data-theme="zitec-digi"] .hero-split-info .hero-orb-3 { bottom: -60px; right: -60px; top: auto; left: auto; z-index: 0; } /* Section label */ [data-theme="zitec-digi"] .hero-proyek-label { position: relative; z-index: 2; font-size: .68rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(148,163,184,.45); margin: 0 0 .85rem .75rem; } /* Proyek list: all items always visible, active highlighted */ [data-theme="zitec-digi"] .hero-proyek-cycle { position: relative; z-index: 2; height: auto; margin-bottom: 0; display: flex; flex-direction: column; gap: .25rem; width: 100%; } [data-theme="zitec-digi"] .hero-proyek-item { position: relative; display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; border-radius: 8px; font-size: .76rem; font-weight: 500; color: rgba(203,213,225,.4); letter-spacing: .15px; border-left: 2px solid transparent; opacity: 1; transform: none; transition: color .4s ease, background .4s ease, border-color .4s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; } [data-theme="zitec-digi"] .hero-proyek-item.active { color: #22d3ee; background: rgba(34,211,238,.1); border-left-color: #22d3ee; font-weight: 600; } [data-theme="zitec-digi"] .hero-proyek-item i { font-size: .85rem; flex-shrink: 0; opacity: .5; transition: opacity .4s, filter .4s; } [data-theme="zitec-digi"] .hero-proyek-item.active i { opacity: 1; filter: drop-shadow(0 0 5px rgba(34,211,238,.65)); } /* ── Responsive ───────────────────────────── */ @media (max-width: 991.98px) { [data-theme="zitec-digi"] .hero.hero-split { flex-direction: column; } [data-theme="zitec-digi"] .hero-split-media { flex: 0 0 60vh; min-height: 60vh; } [data-theme="zitec-digi"] .hero-split-media-content { max-width: 90%; padding: 5rem 2rem 3rem; } [data-theme="zitec-digi"] .hero-split-media-content .hero-title { font-size: clamp(1.8rem, 5.5vw, 2.8rem); } [data-theme="zitec-digi"] .hero-split-info { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-left: none; border-top: 1px solid rgba(34,211,238,.12); padding: 1rem 1.25rem; gap: .5rem; } [data-theme="zitec-digi"] .hero-proyek-label { display: none; } [data-theme="zitec-digi"] .hero-proyek-cycle { flex-direction: row; flex-wrap: wrap; gap: .4rem; } [data-theme="zitec-digi"] .hero-proyek-item { flex: 0 0 auto; white-space: nowrap; } [data-theme="zitec-digi"] .hero.hero-split .hero-scroll-indicator { left: 50%; } } @media (max-width: 575.98px) { [data-theme="zitec-digi"] .hero-split-media-content { padding: 5rem 1.25rem 2.5rem; } [data-theme="zitec-digi"] .hero-split-media-content .hero-actions .btn { display: block; width: 100%; margin-right: 0 !important; margin-bottom: .75rem; } } /* ── Scrollbar: teal ─────────────────────────────────────── */ [data-theme="zitec-digi"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="zitec-digi"] ::-webkit-scrollbar-track { background: #f0f9ff; } [data-theme="zitec-digi"] ::-webkit-scrollbar-thumb { background: rgba(8,145,178,.25); border-radius: 4px; } [data-theme="zitec-digi"] ::-webkit-scrollbar-thumb:hover { background: rgba(8,145,178,.5); } /* ── Selection ───────────────────────────────────────────── */ [data-theme="zitec-digi"] ::selection { background: rgba(8,145,178,.22); color: #0f172a; }