/* ============================================================ JERBINDO POWER SYSTEMS — CORPORATE MODERN INDUSTRIAL DESIGN Typography: Inter (all weights 100–900) Palette: Deep charcoal + steel blue + amber-gold accent ============================================================ */ /* ── Base layout ── */ .page { display: none; } .page.active { display: block; } .hidden { display: none !important; } @media (min-width: 768px) { .md\:block { display: block !important; } .md\:flex { display: flex !important; } .md\:hidden { display: none !important; } .md\:flex-row { flex-direction: row !important; } .md\:items-center { align-items: center !important; } .md\:items-end { align-items: flex-end !important; } .md\:justify-between { justify-content: space-between !important; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } .md\:col-span-1 { grid-column: span 1 / span 1 !important; } .md\:col-span-2 { grid-column: span 2 / span 2 !important; } .md\:col-span-5 { grid-column: span 5 / span 5 !important; } .md\:col-span-7 { grid-column: span 7 / span 7 !important; } .md\:p-8 { padding: 2rem !important; } .md\:p-10 { padding: 2.5rem !important; } .md\:py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .md\:py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; } .md\:text-base { font-size: 1rem !important; line-height: 1.5rem !important; } .md\:text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; } .md\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; } } .heroH { height: 580px; } @media (max-width: 640px) { .heroH { height: 520px; } } .r5 { border-radius: 3px; } /* promo tab */ .promoTab{ border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: 3px !important; border-bottom-right-radius: 3px !important; } /* ── Design tokens ── */ :root{ --bg: #F3FAFF; --panel: #ffffff; --panel2: #F8FAFB; --text: #071e27; --muted: #546067; --border: #D1D5DB; --brand: #0F4C81; --brand2: #0F4C81; --danger: #c62828; --dangerHover: #a61f1f; --accent: #FBBF24; --accent2: #FBBF24; --heroText: #ffffff; --heroGradFrom: #071e27; --heroGradMid: #0F4C81; --heroGradTo: #1a5a8e; --promoH: 0px; /* industrial extras */ --steel: #546067; --panel-shadow: 0 12px 30px rgba(10,31,52,.06), 0 0 0 1px rgba(15,76,129,.04); --panel-shadow-hover: 0 18px 42px rgba(10,31,52,.12), 0 0 0 1px rgba(15,76,129,.12); /* produk-detail.html – consolidated type scale */ --pd-fs-1: .625rem; --pd-fs-2: .6875rem; --pd-fs-3: .75rem; --pd-fs-4: .875rem; --pd-fs-5: 1rem; --pd-fs-6: 1.75rem; } [data-theme="dark"]{ --bg: #071e27; --panel: #0d2d3d; --panel2: #122436; --text: #f0f8ff; --muted: #94a3b8; --border: rgba(125,191,255,.18); --brand: #4a8fd4; --brand2: #7dbfff; --danger: #ef4444; --dangerHover: #f87171; --accent: #FBBF24; --accent2: #FBBF24; --heroText: #ffffff; --heroGradFrom: #030e14; --heroGradMid: #071e27; --heroGradTo: #0F4C81; --steel: #4a6070; --panel-shadow: 0 16px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.04); --panel-shadow-hover: 0 22px 44px rgba(0,0,0,.34), 0 0 0 1px rgba(74,143,212,.2); } /* ── Global ── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body{ font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.65; background: var(--bg); color: var(--text); padding-top: var(--promoH); transition: padding-top .35s ease, background .25s ease, color .25s ease; /* subtle industrial grid texture */ background-image: linear-gradient(rgba(15,76,129,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(15,76,129,.025) 1px, transparent 1px); background-size: 32px 32px; } [data-theme="dark"] body, [data-theme="dark"]{ background-image: linear-gradient(rgba(74,143,212,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(74,143,212,.04) 1px, transparent 1px); background-size: 32px 32px; } /* ── Typography ── */ h1, h2, h3, h4, h5, h6 { font-family: 'Inter', system-ui, sans-serif; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; } .font-semibold { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; } nav a, footer a { font-family: 'Inter', sans-serif; font-weight: 500; } /* ── Panel / card system ── */ .panel{ background: var(--panel); border-color: var(--border); box-shadow: var(--panel-shadow); transition: box-shadow .2s ease, border-color .2s ease; } .panel:hover { box-shadow: var(--panel-shadow-hover); } .panel2{ background: var(--panel2); border-color: var(--border); } .bdr{ border-color: var(--border); } .muted{ color: var(--muted); } /* ── Brand colors ── */ .brandBg{ background: var(--brand); } .brandBgHover:hover{ background: #0a3d6a !important; filter: none; color: #fff !important; } /* ── Mobile CTA button (#mobileWAConsultBtn) ── */ #mobileWAConsultBtn { background: var(--brand); /* light: #0F4C81 blue | dark: #4a8fd4 sky blue */ color: #fff; transition: background .15s; } #mobileWAConsultBtn:hover { background: #0a3d6a !important; color: #fff !important; } .btnNavAction { min-height: 40px; font-size: .7rem !important; font-weight: 700; letter-spacing: .14em !important; text-transform: uppercase !important; } .btnActionMd { min-height: 44px; padding: .72rem 1.25rem !important; font-size: .88rem !important; font-weight: 600; line-height: 1.2; letter-spacing: .01em !important; text-transform: none !important; } @media (max-width: 640px) { .btnNavAction { min-height: 42px; font-size: .68rem !important; } .btnActionMd { min-height: 42px; padding: .68rem 1rem !important; font-size: .84rem !important; } } /* ── Artikel CTA "Hubungi Kami" hover merah + pulse glow ── */ .artCtaBtn { position: relative; transition: background .25s, box-shadow .25s, color .25s; } .artCtaBtn:hover { background: #c0392b !important; color: #fff !important; box-shadow: 0 0 0 4px rgba(192,57,43,.25), 0 0 18px rgba(192,57,43,.45); animation: artCtaPulse 1.4s ease-in-out infinite; } @keyframes artCtaPulse { 0% { box-shadow: 0 0 0 2px rgba(192,57,43,.3), 0 0 12px rgba(192,57,43,.35); } 50% { box-shadow: 0 0 0 7px rgba(192,57,43,.12), 0 0 28px rgba(192,57,43,.5); } 100% { box-shadow: 0 0 0 2px rgba(192,57,43,.3), 0 0 12px rgba(192,57,43,.35); } } .brandText{ color: var(--brand); } .accentBg{ background: var(--accent); } .accentBgHover:hover{ filter: brightness(.93); } /* ── Hero gradient ── */ .heroGrad{ background-image: linear-gradient(105deg, var(--heroGradFrom) 0%, var(--heroGradMid) 55%, var(--heroGradTo) 100%); color: var(--heroText); position: relative; } /* industrial diagonal stripe overlay */ .heroGrad::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, transparent, transparent 18px, rgba(255,255,255,.018) 18px, rgba(255,255,255,.018) 19px ); pointer-events: none; z-index: 0; } .heroOverlay{ background: linear-gradient(130deg, rgba(4,8,18,.72) 0%, rgba(4,8,18,.38) 55%, rgba(4,8,18,.12) 100%); } /* ── Hover states ── */ .panelHoverRed:hover{ background:#0a3d6a !important; color:#ffffff !important; border-color:#0a3d6a !important; filter:none !important; } .accentHoverRed:hover{ background:#0a3d6a !important; color:#ffffff !important; border-color:#0a3d6a !important; filter:none !important; } .waBtnHoverGreen:hover{ background:#16a34a !important; color:#ffffff !important; border-color:#16a34a !important; filter:none !important; } /* ── WA ── */ .waBg{ background: #16a34a; } .waBgHover:hover{ background: #15803d; } .btnCatalogDetail{ background: var(--brand); border: 1px solid var(--brand); color: #ffffff; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease; } .btnCatalogDetail:hover{ background: #12315f; border-color: #12315f; color: #ffffff; transform: translateY(-1px); } [data-theme="dark"] .btnCatalogDetail{ background: var(--brand2); border-color: var(--brand2); } [data-theme="dark"] .btnCatalogDetail:hover{ background: #7ab8ff; border-color: #7ab8ff; color: #081a34; } .btnDanger{ background: var(--danger); border: 1px solid var(--danger); color: #ffffff; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease; } .btnDanger:hover{ background: var(--dangerHover); border-color: var(--dangerHover); color: #ffffff; transform: translateY(-1px); } [data-theme="dark"] .btnDanger:hover{ color: #1f0a0a; } .btnCatalogDetail:focus-visible, .btnDanger:focus-visible, #productDetailWaBtn:focus-visible, #themeToggleDesktop:focus-visible, #themeToggleMobileIcon:focus-visible, #mobileBtn:focus-visible, .sliderArrow:focus-visible { outline: 2px solid var(--brand2); outline-offset: 2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand2) 35%, transparent); } /* Lead Gate Modal */ body.leadGateOpen { overflow: hidden; } .leadGate { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 16px; } .leadGateBackdrop { position: absolute; inset: 0; background: rgba(8, 14, 26, .64); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .leadGateDialog { position: relative; width: min(760px, 100%); max-height: min(92vh, 840px); max-height: min(92dvh, 840px); overflow: auto; transform: translateY(10px) scale(.985); opacity: 0; transition: transform .2s ease, opacity .2s ease; } .leadGate.show .leadGateDialog { transform: translateY(0) scale(1); opacity: 1; } .leadGateClose { width: 34px; height: 34px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer; } .leadGateLabel { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-family: 'Inter', sans-serif; } /* ── Lead Gate: padatkan di mobile supaya form tidak terlalu tinggi/perlu banyak scroll ── Catatan: modal ini dirender lewat insertAdjacentHTML saat runtime, jadi Tailwind Play CDN men-generate & menyisipkan utility class-nya (flex-col, py-4, gap-4, dst.) belakangan — lebih akhir dari main.css. Makanya beberapa override di bawah butuh !important supaya benar-benar menang atas utility Tailwind yang bersaing pada elemen yang sama. ── */ @media (max-width: 639.98px) { .leadGate { padding: 10px; align-items: flex-start; } .leadGateDialog { margin-top: 6px; } .leadGateHeader { padding: 12px 16px !important; gap: 10px !important; } .leadGateHeader h3 { font-size: 1rem !important; } .leadGateHeader p { display: none; } #leadGateForm { padding: 14px 16px !important; } .leadGateFieldGrid { grid-template-columns: repeat(2, 1fr); gap: 10px !important; } .leadGateFieldGrid label input, .leadGateFieldGrid label select { padding-top: .5rem !important; padding-bottom: .5rem !important; } #leadGateForm textarea[name="message"] { height: 72px; } .leadGateActions { flex-direction: row !important; padding-top: 12px !important; gap: 8px !important; } .leadGateActions button { flex: 1; padding-top: .6rem !important; padding-bottom: .6rem !important; white-space: nowrap; } } @keyframes bounceOnce { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-9px) scale(1.05); } 70% { transform: translateY(-4px) scale(1.02); } } .waBounce:hover { animation: bounceOnce .6s ease-in-out; } /* ── Sticky header ── */ #stickyHeader{ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Desktop header breathing room — override Tailwind py-3 */ @media (min-width: 768px) { #stickyHeader > div > .flex { padding-top: 16px; padding-bottom: 16px; } #stickyHeader > div { padding-left: 20px; padding-right: 20px; } #stickyHeader { top: 36px !important; } } /* ── Desktop nav dropdown (Solusi) ── */ .navDropdown{ position: relative; } .navDropdownTrigger{ display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0; font: inherit; font-weight: 500; color: inherit; cursor: pointer; text-transform: uppercase; letter-spacing: .03em; font-size: .8125rem; } .navDropdownCaret{ transition: transform .15s ease; } .navDropdown:hover .navDropdownCaret, .navDropdown:focus-within .navDropdownCaret{ transform: rotate(180deg); } .navDropdownPanel{ position: absolute; top: 100%; left: 50%; min-width: 240px; margin-top: 0; padding: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--panel-shadow-hover); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 60; } .navDropdown:hover .navDropdownPanel, .navDropdown:focus-within .navDropdownPanel{ opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .navDropdownPanel a{ display: block; padding: 9px 10px; border-radius: 6px; font-size: .85rem; font-weight: 500; color: var(--text); white-space: nowrap; } .navDropdownPanel a:hover, .navDropdownPanel a:focus-visible{ background: var(--panel2); color: var(--brand); } /* ── Top bar (two-tier header, desktop only) ── */ .topBar { position: sticky; top: 0; z-index: 51; height: 36px; display: none; } @media (min-width: 768px) { .topBar { display: flex; align-items: center; } } [data-theme="light"] .topBar { background: var(--brand); border-bottom: 1px solid rgba(0,0,0,.1); } [data-theme="dark"] .topBar { background: #071e27; border-bottom: 1px solid rgba(251,191,36,.12); } .topBarLink { color: rgba(255,255,255,.9); text-decoration: none; font-weight: 500; transition: color .15s; } .topBarLink:hover { color: #fff; } [data-theme="dark"] .topBarLink { color: rgba(240,248,255,.75); } [data-theme="dark"] .topBarLink:hover { color: var(--accent); } .topBarSep { color: rgba(255,255,255,.2); } [data-theme="dark"] .topBarSep { color: rgba(255,255,255,.12); } .topBarMuted { color: rgba(255,255,255,.68); } [data-theme="dark"] .topBarMuted { color: rgba(240,248,255,.5); } .topBarBadge { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; } [data-theme="light"] .topBarBadge { color: rgba(255,255,255,.88); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); } [data-theme="dark"] .topBarBadge { color: rgba(251,191,36,.88); background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.18); } .topBarBadge svg { width: 11px; height: 11px; } .topBarLink svg { width: 13px; height: 13px; flex-shrink: 0; } #themeIconTopBar { width: 14px; height: 14px; } .btnNavAction svg { width: 18px; height: 18px; } .topBarToggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); background: transparent; cursor: pointer; transition: background .15s, color .15s; flex-shrink: 0; } .topBarToggle:hover { background: rgba(255,255,255,.12); color: #fff; } [data-theme="dark"] .topBarToggle { border-color: rgba(251,191,36,.2); color: rgba(240,248,255,.7); } [data-theme="dark"] .topBarToggle:hover { background: rgba(251,191,36,.1); color: var(--accent); } .langToggleGroup { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; overflow: hidden; flex-shrink: 0; } .langBtn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.65); background: transparent; border: none; cursor: pointer; transition: background .15s, color .15s; } .langBtn:hover { color: #fff; } .langBtn.active { background: rgba(255,255,255,.18); color: #fff; } [data-theme="dark"] .langToggleGroup { border-color: rgba(251,191,36,.2); } [data-theme="dark"] .langBtn { color: rgba(240,248,255,.6); } [data-theme="dark"] .langBtn:hover { color: var(--accent); } [data-theme="dark"] .langBtn.active { background: rgba(251,191,36,.1); color: var(--accent); } .langBtnMobile { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 34px; padding: 0 8px; font-size: 12px; font-weight: 600; background: transparent; border: none; cursor: pointer; color: inherit; opacity: .55; transition: opacity .15s, background .15s; } .langBtnMobile:hover { opacity: .8; } .langBtnMobile.active { opacity: 1; background: rgba(15,76,129,.08); } [data-theme="dark"] .langBtnMobile.active { background: rgba(251,191,36,.12); } .langBtnMobile + .langBtnMobile { border-left: 1px solid var(--border); } /* header in light: translucent white with glass feel */ [data-theme="light"] #stickyHeader { background: rgba(255,255,255,.92) !important; border-bottom: 1px solid rgba(15,76,129,.1); box-shadow: 0 1px 0 rgba(15,76,129,.06), 0 2px 12px rgba(0,0,0,.05); } [data-theme="dark"] #stickyHeader { background: rgba(14,21,32,.92) !important; border-bottom: 1px solid rgba(74,143,212,.12); box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 2px 12px rgba(0,0,0,.3); } /* nav links – underline reveal on hover */ nav a { position: relative; padding-bottom: 2px; text-decoration: none; letter-spacing: .03em; font-size: .8125rem; text-transform: uppercase; } nav a::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--accent); transition: width .22s ease; } nav a:hover::after { width: 100%; } nav a:hover { color: var(--brand2); } [data-theme="dark"] nav a:hover { color: var(--brand2); } /* ── Mobile drawer menu ── */ #mobileBtn .iconClose, #mobileBtn[aria-expanded="true"] .iconMenu{ display: none; } #mobileBtn[aria-expanded="true"] .iconClose{ display: block; } html.navOpen{ overflow: hidden; } .mNavBackdrop{ position: fixed; inset: 0; z-index: 40; background: rgba(7,30,39,.45); animation: mNavFade .2s ease; } .mNavBackdrop[hidden]{ display: none; } #mobileNav.mNavDrawer{ position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 20px; background: var(--panel); border-top: 1px solid var(--border); box-shadow: 0 12px 24px rgba(7,30,39,.18); animation: mNavSlide .2s ease; } @keyframes mNavFade{ from{ opacity: 0; } to{ opacity: 1; } } @keyframes mNavSlide{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } } #mobileNav .mNavLink{ display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 4px 14px 8px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; font-size: 1rem; font-weight: 500; letter-spacing: normal; text-transform: none; text-align: left; color: var(--text); cursor: pointer; } #mobileNav .mNavLink::after, #mobileNav .mNavSubLink::after, #mobileNav .mNavCtaSecondary::after{ display: none; } #mobileNav .mNavLink:hover{ color: var(--brand); } #mobileNav .mNavLink.isActive{ color: var(--brand); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); } .mNavChevron{ color: var(--muted); flex-shrink: 0; } .mNavCaret{ color: var(--muted); flex-shrink: 0; transition: transform .2s ease; } .mNavAccordionBtn[aria-expanded="true"] .mNavCaret{ transform: rotate(180deg); } .mNavSub{ display: grid; gap: 2px; padding: 6px 0 10px 8px; border-bottom: 1px solid var(--border); } .mNavSub[hidden]{ display: none; } #mobileNav .mNavSubLink{ display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 6px; font-size: .9rem; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--text); } #mobileNav .mNavSubLink .navMegaIcon{ width: 32px; height: 32px; } #mobileNav .mNavSubLink:hover, #mobileNav .mNavSubLink.isActive{ background: var(--panel2); color: var(--brand); } #mobileNav .mNavSubLink.isActive .navMegaIcon{ background: var(--brand); color: #fff; } .mNavCtas{ display: grid; gap: 10px; margin-top: 20px; } #mobileNav .mNavCtaSecondary{ display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1.5px solid var(--brand); border-radius: 4px; font-size: .9rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--brand); } #mobileNav .mNavCtaSecondary:hover, #mobileNav .mNavCtaSecondary.isActive{ background: var(--brand); color: #fff; } .mNavSettings{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } /* ── Mega-menu Solusi (desktop) ── */ .navDropdownPanel.navMega{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 540px; padding: 8px; } .navDropdownPanel .navMegaItem{ display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; white-space: normal; text-transform: none; letter-spacing: normal; } .navMegaItem::after{ display: none; } .navMegaIcon{ flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; background: var(--panel2); color: var(--brand); transition: background .15s ease, color .15s ease; } .navMegaItem:hover .navMegaIcon, .navMegaItem:focus-visible .navMegaIcon, .navMegaItem.isActive .navMegaIcon{ background: var(--brand); color: #fff; } .navMegaText{ display: flex; flex-direction: column; gap: 2px; min-width: 0; } .navMegaTitle{ font-size: .85rem; font-weight: 600; line-height: 1.3; } .navMegaDesc{ font-size: .75rem; font-weight: 400; line-height: 1.4; color: var(--muted); } .navMegaItem.isActive{ background: var(--panel2); color: var(--brand); } /* ── Nav CTA "Hubungi Kami" ── */ nav a.navCta{ margin-left: 8px; padding: .5rem 1rem; border-radius: 4px; background: #0F4C81; color: #fff; font-weight: 600; transition: background .2s ease, box-shadow .2s ease; } nav a.navCta::after{ display: none; } nav a.navCta:hover, [data-theme="dark"] nav a.navCta:hover{ background: #0a3d6a; color: #fff; box-shadow: 0 4px 12px rgba(15,76,129,.3); } nav a.navCta.isActive{ box-shadow: inset 0 -2px 0 var(--accent); } [data-theme="dark"] nav a.navCta{ background: #1a6fb5; } [data-theme="dark"] nav a.navCta:hover{ background: #155f9e; } #stickyHeader nav > a, #stickyHeader .navDropdownTrigger{ white-space: nowrap; } @media (min-width: 768px) and (max-width: 1023px){ #stickyHeader nav.md\:flex{ gap: 1rem; } #stickyHeader nav a.navCta{ margin-left: 0; padding: .45rem .75rem; } } /* brand logo mark */ .logoBadge { width: 40px; height: 40px; flex-shrink: 0; background: linear-gradient(135deg,#071e27 0%,#0F4C81 55%,#1a6fb5 100%); display: flex; align-items: center; justify-content: center; border-radius: 0 !important; box-shadow: 2px 2px 0 rgba(15,76,129,.4), 0 4px 12px rgba(15,76,129,.3); transition: box-shadow .2s ease; } .logoBadge svg { width: 23px; height: auto; display: block; pointer-events: none; } a:hover .logoBadge { box-shadow: 2px 2px 0 rgba(15,76,129,.55), 0 6px 18px rgba(15,76,129,.45); filter: brightness(1.08); transition: box-shadow .2s ease, filter .2s ease; } [data-theme="dark"] a:hover .logoBadge { box-shadow: 2px 2px 0 rgba(125,191,255,.4), 0 6px 18px rgba(125,191,255,.35); } /* brand lockup text (header) */ .brandLockupTitle { font-weight: 900; letter-spacing: -.01em; font-size: .9375rem; } .brandLockupSub { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; } /* Footer logo badge — enhanced glow for dark background */ .footerBadge { box-shadow: 2px 2px 0 rgba(15, 76, 129, .65), 0 4px 20px rgba(15, 76, 129, .50), 0 0 0 1px rgba(74, 143, 212, .12); transition: box-shadow .2s ease, filter .2s ease; } .footerBadge:hover { box-shadow: 2px 2px 0 rgba(15, 76, 129, .75), 0 6px 24px rgba(15, 76, 129, .65), 0 0 0 1px rgba(74, 143, 212, .20); filter: brightness(1.08); transition: box-shadow .2s ease, filter .2s ease; } /* ── Project Category Tab Buttons ── */ .projCatBtn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; font-family: 'Inter', sans-serif; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; transition: background .18s, border-color .18s, color .18s; white-space: nowrap; } .projCatBtn:hover:not(.active) { background: var(--panel2); border-color: var(--brand2); color: var(--text); } .projCatBtn.active { background: var(--brand); border-color: var(--brand); color: #fff; } /* ── Project Card ── */ .projCard { border: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: border-color .2s, box-shadow .2s; } .projCard:hover { border-color: var(--brand2); box-shadow: 0 4px 24px rgba(0,0,0,.08); } .projCard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .projCard[data-cat="telekomunikasi"]::before { background: #1265B2; } .projCard[data-cat="mining"]::before { background: #5a8a2a; } .projCard[data-cat="highrise"]::before { background: #4a3a8a; } .projCard[data-cat="healthcare"]::before { background: #0a8a6a; } .projCard[data-cat="transportation"]::before{ background: #c87010; } .projCard[data-cat="bumn"]::before { background: #c0392b; } .projCatPill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-family: 'Inter', sans-serif; font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; border: 1px solid; flex-shrink: 0; } .projStatusPill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-family: 'Inter', sans-serif; font-size: .62rem; letter-spacing: .05em; border: 1px solid; } .projScope { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; } .projScope li { display: flex; align-items: flex-start; gap: 7px; font-size: .8rem; line-height: 1.4; color: var(--text); opacity: .85; } .projScope li::before { content: '›'; color: var(--accent); flex-shrink: 0; font-weight: 700; margin-top: -1px; } /* ── Article Detail Page ── */ #page-artikel-detail { display: none; } #page-artikel-detail.active { display: block; } #page-produk-detail { display: none; } #page-produk-detail.active { display: block; } .artDetailBody h2 { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: .01em; margin: 2rem 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); color: var(--text); } .artDetailBody p { margin: .85rem 0; line-height: 1.75; color: var(--text); } /* ── Unordered list: accent chevron bullet ── */ .artDetailBody ul { list-style: none; padding-left: 0; margin: .85rem 0 .85rem 0; line-height: 1.75; color: var(--text); } .artDetailBody ul li { position: relative; padding-left: 1.25rem; margin-bottom: .45rem; } .artDetailBody ul li::before { content: '›'; position: absolute; left: 0; color: var(--accent); font-weight: 700; font-size: 1rem; line-height: 1.75; } /* ── Ordered list: accent numbered badge ── */ .artDetailBody ol { list-style: none; padding-left: 0; margin: .85rem 0 .85rem 0; line-height: 1.75; color: var(--text); counter-reset: art-ol; } .artDetailBody ol li { position: relative; padding-left: 2rem; margin-bottom: .55rem; counter-increment: art-ol; } .artDetailBody ol li::before { content: counter(art-ol); position: absolute; left: 0; top: .25rem; width: 1.25rem; height: 1.25rem; background: var(--accent); color: #071e27; font-size: .6rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; line-height: 1; } .artDetailBody strong { color: var(--text); font-weight: 700; } .artDetailBody blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--accent); background: var(--panel2); font-style: italic; color: var(--muted); font-size: .95rem; } /* Breadcrumb nav in detail */ .artBreadcrumb { display: flex; align-items: center; gap: .5rem; font-family: 'Inter', sans-serif; font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .artBreadcrumb a { color: var(--brand2); text-decoration: none; } .artBreadcrumb a:hover { text-decoration: underline; } /* Related articles strip — 3-col grid on desktop, swipeable single-column slide on mobile */ .artRelatedScroller { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; scrollbar-width: none; -ms-overflow-style: none; } .artRelatedScroller::-webkit-scrollbar { display: none; } .artRelatedCard { border: 1px solid var(--border); background: var(--panel); cursor: pointer; transition: border-color .2s; display: flex; flex-direction: column; overflow: hidden; flex: 0 0 100%; scroll-snap-align: start; } .artRelatedCard:hover { border-color: var(--brand2); } .artRelatedCard:hover .prodDetailRelatedReadMore { gap: 7px; } .artRelatedThumb { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .artRelatedCardBody { padding: 1rem; } @media (min-width: 768px) { .artRelatedScroller { display: grid; grid-template-columns: repeat(3, 1fr); overflow-x: visible; scroll-snap-type: none; } .artRelatedCard { flex: initial; } } .seoAnswer { border: 1px solid var(--border); background: var(--panel2); padding: 14px 16px; } .seoAnswer h2 { margin: 0 0 .35rem; font-family: 'Inter', sans-serif; font-size: 1.08rem; letter-spacing: .02em; } .seoAnswer p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--muted); } .seoLinkGrid { margin-top: 14px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .seoLinkCard { border: 1px solid var(--border); background: var(--panel); padding: 10px 12px; color: var(--text); text-decoration: none; transition: border-color .18s ease, background .18s ease; } .seoLinkCard:hover { border-color: var(--brand2); background: var(--panel2); } /* ── "Solusi Terkait" cards: Read More affordance ── */ .exploreCard { display: flex; flex-direction: column; align-items: flex-start; } /* Background beda dari panel artikel di sekitarnya, tetap ikut tema light/dark */ .seoLinkCard.exploreCard { background: rgba(7, 30, 39, .06); border-color: rgba(7, 30, 39, .18); } .seoLinkCard.exploreCard:hover { background: rgba(7, 30, 39, .12); border-color: rgba(7, 30, 39, .32); } [data-theme="dark"] .seoLinkCard.exploreCard { background: rgba(7, 30, 39, .55); border-color: rgba(125, 191, 255, .22); } [data-theme="dark"] .seoLinkCard.exploreCard:hover { background: rgba(7, 30, 39, .75); border-color: rgba(125, 191, 255, .4); } /* ── Legacy: kept for backward compat, may be unused ── */ .prodDetailGrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .prodDetailSpec { border: 1px solid var(--border); background: var(--panel2); padding: 10px 12px; } .prodDetailSpec .k { font-family: 'Inter', sans-serif; font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .prodDetailSpec .v { margin-top: 2px; font-size: .93rem; font-weight: 600; color: var(--text); } /* ── Product Detail – KVA Hero Banner ── */ .prodDetailHero { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--border); overflow: hidden; border-radius: 4px; } .prodDetailHeroItem { padding: 16px 20px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--panel2); position: relative; /* Allow hero cells to shrink on narrow screens */ min-width: 0; overflow: hidden; } @media (max-width: 400px) { .prodDetailHeroItem { padding: 16px 12px 12px; } .prodDetailHeroValue { font-size: var(--pd-fs-6); } .prodDetailHeroValueSm { font-size: var(--pd-fs-4); word-break: break-all; } } .prodDetailHeroItem:nth-child(2n) { border-right: none; } .prodDetailHeroItem:nth-child(3), .prodDetailHeroItem:nth-child(4) { border-bottom: none; } .prodDetailHeroItemAccent { background: var(--brand); } .html.dark .prodDetailHeroItemAccent { background: #0a3d6a; } .prodDetailHeroItemAccent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); } .prodDetailHeroLabel { font-size: var(--pd-fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 4px; } .prodDetailHeroItemAccent .prodDetailHeroLabel { color: rgba(255,255,255,.65); } .prodDetailHeroValue { font-family: 'Inter', sans-serif; font-size: var(--pd-fs-6); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--text); } .prodDetailHeroItemAccent .prodDetailHeroValue { color: #fff; } .prodDetailHeroValueSm { font-family: 'Inter', sans-serif; font-size: var(--pd-fs-4); font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.2; } /* ── Product Detail: baris media — foto genset (kiri) + kapasitas (kanan) di desktop ── */ .prodDetailMediaRow > .prodDetailHero { margin-top: 20px; } @media (min-width: 1024px) { .prodDetailMediaRow { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; } .prodDetailMediaRow > #productDetailGallery, .prodDetailMediaRow > .prodDetailHero { margin-top: 0; } .prodDetailMediaRow .prodDetailHero { grid-template-columns: 1fr; } .prodDetailMediaRow .prodDetailHeroItem { border-right: none; border-bottom: 1px solid var(--border); } .prodDetailMediaRow .prodDetailHeroItem:last-child { border-bottom: none; } } /* ── Product Detail – In-page Section Nav ── */ .prodDetailInPageNav { display: flex; border: 1px solid var(--border); border-radius: 4px; overflow-x: hidden; overflow-y: hidden; margin-top: 20px; } .prodDetailInPageNav a { flex: 1; padding: 8px; font-size: var(--pd-fs-2); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; text-align: center; color: var(--muted); text-decoration: none; border-right: 1px solid var(--border); background: var(--panel2); transition: background .15s, color .15s; white-space: nowrap; } .prodDetailInPageNav a:last-child { border-right: none; } .prodDetailInPageNav a:hover, .prodDetailInPageNav a.active { background: var(--brand); color: #fff; } /* ── Product Detail – Spec 2-column layout (kiri: umum, kanan: BBM+konfigurasi) ── */ .prodDetailSpecCols { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 1024px) { .prodDetailSpecCols { grid-template-columns: 1.15fr 1fr; align-items: start; } /* Lebar kolom label/nilai menyesuaikan konten tiap tabel, bukan persentase seragam, supaya nilai/label panjang (mis. Aspiration, model alternator) tetap 1 baris. Tanpa memaksa nowrap — kalau konten benar-benar ekstrem panjang, biarkan wrap alami sebagai fallback daripada overflow/terpotong (tabel ini overflow:hidden). */ .prodDetailSpecTable { table-layout: auto; } .prodDetailSpecKey, .prodDetailSpecVal { width: auto; } } /* ── Product Detail – Keunggulan + Aplikasi: satu baris 2 kolom di desktop ── */ .prodDetailPairedCols { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 1024px) { .prodDetailPairedCols { grid-template-columns: 1fr 1fr; } } /* ── Product Detail – Sticky CTA bar (desktop only) ── */ .prodDetailStickyCta { display: none; } @media (min-width: 1024px) { .prodDetailStickyCta { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: var(--header-h, 64px); z-index: 30; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 12px 20px; margin-top: 20px; box-shadow: var(--panel-shadow); } } .prodDetailStickyCtaLabel { font-size: var(--pd-fs-2); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .prodDetailStickyCtaName { font-size: var(--pd-fs-4); font-weight: 700; color: var(--text); } .prodDetailStickyCtaActions { display: flex; gap: 10px; flex-shrink: 0; } /* ── Product Detail – Trust row (menggantikan checklist di sidebar lama) ── */ .prodDetailTrustRow { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: var(--pd-fs-2); color: var(--brand2); font-weight: 600; } .prodDetailTrustRow > div { display: flex; align-items: center; gap: 6px; } /* ── Product Detail – Artikel/Produk Terkait card text ── */ .prodDetailRelatedTitle { font-size: var(--pd-fs-4); font-weight: 600; color: var(--text); } .prodDetailRelatedSummary { font-size: var(--pd-fs-3); color: var(--muted); line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .prodDetailRelatedMeta { font-size: var(--pd-fs-2); color: var(--muted); margin-top: 6px; } .prodDetailRelatedReadMore { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: .78rem; font-weight: 600; color: var(--brand2); transition: gap .15s ease; } .prodDetailRelatedReadMore svg { width: 12px; height: 12px; flex-shrink: 0; } .seoLinkCard:hover .prodDetailRelatedReadMore { gap: 7px; } /* ── Product Detail – Spec Group with label ── */ .prodDetailSpecGroupLabel { font-size: var(--pd-fs-2); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand2); border-left: 2px solid var(--brand2); padding-left: 8px; margin-bottom: 8px; } /* ── Product Detail – Spec Table (2-col, semantic ) ── */ .prodDetailSpecTable { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .prodDetailSpecTable tbody tr:not(:last-child) .prodDetailSpecKey, .prodDetailSpecTable tbody tr:not(:last-child) .prodDetailSpecVal { border-bottom: 1px solid var(--border); } .prodDetailSpecTable tbody tr:nth-child(even) { background: var(--panel2); } .prodDetailSpecKey { width: 42%; padding: 8px 16px; font-size: var(--pd-fs-3); font-weight: 500; text-align: left; color: var(--muted); letter-spacing: .02em; border-right: 1px solid var(--border); vertical-align: top; overflow-wrap: break-word; word-break: break-word; } .prodDetailSpecVal { padding: 8px 16px; font-size: var(--pd-fs-4); font-weight: 700; color: var(--text); vertical-align: top; overflow-wrap: break-word; word-break: break-word; } @media (hover: hover) and (pointer: fine) { .prodDetailSpecTable tbody tr:hover td, .prodDetailSpecTable tbody tr:hover th { background: color-mix(in srgb, var(--brand) 8%, var(--panel2)); } } /* ── Mobile: stack spec rows at very narrow screens ── */ @media (max-width: 380px) { .prodDetailSpecTable, .prodDetailSpecTable tbody, .prodDetailSpecTable tr, .prodDetailSpecTable .prodDetailSpecKey, .prodDetailSpecTable .prodDetailSpecVal { display: block; width: 100%; } .prodDetailSpecKey { border-right: none; border-bottom: 1px solid var(--border); padding: 8px 16px 4px; } .prodDetailSpecVal { padding: 4px 16px 8px; } .prodDetailSpecTable tbody tr:nth-child(even) { background: transparent; } } /* ── Product Detail – Section Heading ── */ .prodDetailSectionHeading { font-family: 'Inter', sans-serif; font-size: var(--pd-fs-5); font-weight: 700; letter-spacing: .01em; color: var(--text); padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; margin: 0; } .prodDetailSectionHeading::before { content: ''; display: inline-block; width: 3px; height: 15px; background: var(--brand2); border-radius: 2px; flex-shrink: 0; } /* ── Product Detail – flat section divider (replaces boxed card sections) ── */ .prodDetailSectionDivider { margin-top: 32px; padding-top: 24px; } /* ── Product Detail – Features List ── */ .prodDetailList { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .prodDetailList li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.55; font-size: var(--pd-fs-4); color: var(--text); } .prodDetailList li::before { content: "✓"; color: var(--brand2); font-weight: 900; font-size: var(--pd-fs-4); flex-shrink: 0; margin-top: 1px; } /* ── Product Detail – Application Pills ── */ .appPill { display: inline-flex; align-items: center; border: 1px solid var(--brand); padding: 4px 12px; font-family: 'Inter', sans-serif; font-size: var(--pd-fs-2); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--brand); font-weight: 600; border-radius: 3px; } /* ── FAQ Accordion (dipakai produk-detail; toggle-nya lewat delegated listener .faq-question/.faq-item/.faq-list) ── */ .faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } @media (min-width: 768px) { .faq-list { max-width: 760px; } } .faq-item { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; transition: border-color .2s ease; } .faq-item:hover { border-color: var(--brand2); } .faq-question { width: 100%; padding: 14px 16px; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: 'Inter', sans-serif; font-size: .92rem; font-weight: 700; color: var(--text); text-align: left; transition: background-color .2s ease; } .faq-question:hover { background: var(--panel2); } .faq-question::after { content: '+'; font-size: 1.25rem; line-height: 1; color: var(--accent); flex-shrink: 0; transition: transform .2s ease; } .faq-item.open .faq-question::after { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; padding: 0 16px; font-size: .86rem; line-height: 1.55; color: var(--muted); border-top: 1px solid transparent; transition: max-height .35s ease, padding .3s ease, border-color .3s ease; } .faq-item.open .faq-answer { max-height: 600px; padding: 12px 16px 16px; border-top-color: var(--border); } /* ── Hero kW sub-label ── */ .prodDetailHeroKw { font-size: var(--pd-fs-3); font-weight: 600; color: var(--muted); margin-top: 4px; line-height: 1; } .prodDetailHeroItemAccent .prodDetailHeroKw { color: rgba(255,255,255,.55); } /* ── In-page nav: 5+ item wrap jadi 2 baris di mobile (bukan scroll, supaya tidak ada tab/label terpotong) ── */ @media (max-width: 600px) { .prodDetailInPageNav { flex-wrap: wrap; overflow: visible; } .prodDetailInPageNav a { flex: 1 1 22%; min-width: 0; padding: 6px 3px; font-size: .62rem; letter-spacing: .01em; white-space: normal; overflow-wrap: break-word; line-height: 1.3; border-bottom: 1px solid var(--border); } } /* ── Fuel Consumption bar chart ── */ .prodDetailFuelChart { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 4px; padding: 16px; background: var(--panel2); } .prodDetailFuelRow { display: grid; grid-template-columns: 140px 1fr 80px; align-items: center; gap: 8px; } @media (max-width: 520px) { .prodDetailFuelRow { grid-template-columns: 110px 1fr 60px; gap: 8px; } } @media (max-width: 380px) { .prodDetailFuelRow { grid-template-columns: 80px 1fr 54px; gap: 4px; } .prodDetailFuelRowLabel { font-size: var(--pd-fs-1); } .prodDetailFuelVal { font-size: var(--pd-fs-2); } } .prodDetailFuelRowLabel { font-size: var(--pd-fs-2); font-weight: 600; color: var(--muted); text-align: right; letter-spacing: .02em; } .prodDetailFuelBarWrap { height: 10px; background: var(--border); border-radius: 3px; overflow: hidden; } .prodDetailFuelBar { height: 100%; border-radius: 3px; transition: width .4s ease; } .prodDetailFuelVal { font-size: var(--pd-fs-3); font-weight: 700; color: var(--text); white-space: nowrap; } .prodDetailFuelTankNote { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: var(--pd-fs-3); color: var(--muted); } .prodDetailFuelTankNote strong { color: var(--text); font-weight: 700; } /* ── Physical Configuration: reuses .prodDetailSpecGroupLabel / .prodDetailSpecTable rows (see buildConfigCardsHtml in app.js) ── */ /* ── Product Gallery (aktif hanya jika product.images tersedia) ── */ .prodDetailGalleryHero { width: 100%; max-height: 360px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); display: block; } .prodDetailGalleryThumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; } .prodDetailGalleryThumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); flex-shrink: 0; } /* TOC links hover → biru */ #artDetailTocList a { transition: color .15s; } #artDetailTocList a:hover { color: var(--brand2) !important; } /* Footer menu links hover → biru */ footer a { transition: color .15s; } footer a:hover { color: var(--brand2) !important; } /* ── Article Card ── */ .artCard { border: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; position: relative; overflow: hidden; } .artCard:hover { border-color: var(--brand2); box-shadow: 0 4px 24px rgba(0,0,0,.08); } .artCard[data-topic="tips-operasional"]::before { content:''; position:absolute; top:0;left:0;right:0;height:4px;background:#1265B2; } .artCard[data-topic="panduan-teknis"]::before { content:''; position:absolute; top:0;left:0;right:0;height:4px;background:#4a3a8a; } .artCard[data-topic="perawatan"]::before { content:''; position:absolute; top:0;left:0;right:0;height:4px;background:#0a8a6a; } .artCard[data-topic="regulasi"]::before { content:''; position:absolute; top:0;left:0;right:0;height:4px;background:#c0392b; } .artCard[data-topic="produk"]::before { content:''; position:absolute; top:0;left:0;right:0;height:4px;background:#c87010; } .artTopicPill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-family: 'Inter', sans-serif; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid; flex-shrink: 0; } .artThumb { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } /* ── Client Logo Slider (marquee) ── */ .logoMarqueeWrap { position: relative; overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); } .logoMarqueeWrap::before, .logoMarqueeWrap::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(15,76,129,.14) 18%, rgba(15,76,129,.14) 82%, transparent 100%); pointer-events: none; z-index: 1; } .logoMarqueeWrap::before { top: 0; } .logoMarqueeWrap::after { bottom: 0; } .logoMarqueeTrack { display: flex; align-items: center; gap: 0; animation: logoScroll 120s linear infinite; width: max-content; } .logoMarqueeTrack:hover { animation-play-state: paused; } @keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .clientLogoItem { flex-shrink: 0; width: auto; min-width: 106px; height: 74px; display: flex; align-items: center; justify-content: center; position: relative; border: 0; border-radius: 0; background: transparent; box-shadow: none; transition: opacity .2s ease, transform .2s ease; padding: 0 28px; } .clientLogoItem::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 26px; transform: translateY(-50%); background: color-mix(in srgb, var(--brand) 10%, var(--border)); opacity: .65; } .clientLogoItem:hover { opacity: 1; transform: translateY(-1px); } .clientLogoImg { width: auto; height: 34px; max-width: 168px; opacity: .74; filter: grayscale(.18) contrast(1.02); transition: opacity .25s, filter .25s, transform .25s; object-fit: contain; } .clientLogoItem:hover .clientLogoImg { opacity: 1; filter: grayscale(0); transform: scale(1.02); } [data-theme="dark"] .clientLogoItem { background: transparent; border-color: transparent; box-shadow: none; } [data-theme="dark"] .logoMarqueeWrap::before, [data-theme="dark"] .logoMarqueeWrap::after { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 18%, rgba(255,255,255,.08) 82%, transparent 100%); } [data-theme="dark"] .clientLogoItem::after { background: rgba(255,255,255,.08); opacity: .8; } [data-theme="dark"] .clientLogoImg { filter: grayscale(.04) brightness(1.02); opacity: .82; } [data-theme="dark"] .clientLogoItem:hover .clientLogoImg { filter: grayscale(0) brightness(1.03); opacity: 1; } @media (max-width: 640px) { .logoMarqueeWrap { padding: 2px 0; } .clientLogoItem { min-width: 82px; height: 58px; padding: 0 18px; } .clientLogoItem::after { height: 20px; } .clientLogoImg { height: 24px; max-width: 120px; } } /* ── Hero slide glass card ── */ .heroCard { background: rgba(8,18,36,.6); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-left: 3px solid var(--accent); box-shadow: 0 16px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07); } /* ── Hero badge ── */ .heroBadge { background: rgba(251,191,36,.18); border: 1px solid rgba(251,191,36,.35); color: #f5c842; font-family: 'Inter', sans-serif; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; } .heroBadgeDot { width: 6px; height: 6px; background: #f5c842; border-radius: 50%; animation: pulseDot 2s ease-in-out infinite; } @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.7); } } /* hero headline */ .heroH1 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -.01em; text-shadow: 0 2px 20px rgba(0,0,0,.4); } /* ── CTA buttons ── */ .btnPrimary { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: .02em; text-transform: none; font-size: .84rem; line-height: 1.2; background: var(--accent); color: #0d1117; border: none; min-height: 44px; padding: .72rem 1.25rem; border-radius: 4px; cursor: pointer; transition: background .2s ease, transform .15s ease, box-shadow .2s ease; box-shadow: 0 2px 8px rgba(251,191,36,.3); display: inline-flex; align-items: center; gap: .5rem; } .btnPrimary:hover { background: #e6a800; color: #ffffff !important; box-shadow: 0 4px 16px rgba(251,191,36,.4); transform: translateY(-1px); } .btnPrimary:active { transform: translateY(0); } .footerCtaPrimary { font-size: .9rem; padding: .85rem 2rem; min-height: 48px; box-shadow: 0 10px 24px rgba(251,191,36,.22); justify-content: center; } .footerCtaPrimary svg { flex-shrink: 0; } /* ── Site footer (shared across pages) ── */ .siteFooter { background: linear-gradient(135deg,#071e27 0%,#0F4C81 55%,#1a5a8e 100%); position: relative; overflow: hidden; } .siteFooterFlat { background: #040f18; position: relative; } .siteFooterTexture { position: absolute; inset: 0; background-image: repeating-linear-gradient(-45deg,transparent,transparent 18px,rgba(255,255,255,.016) 18px,rgba(255,255,255,.016) 19px); pointer-events: none; } .siteFooterGlow { position: absolute; left: 50%; top: -20%; transform: translateX(-50%); width: 70%; height: 100%; background: radial-gradient(ellipse,rgba(18,101,178,.18) 0%,transparent 65%); pointer-events: none; } .siteFooterCta { padding-top: 5rem; text-align: center; } .siteFooterCta .nh-cta-eyebrow { justify-content: center; } body[data-page="kalkulator"] .siteFooterCta { padding-top: 4rem; } body[data-page="kalkulator"] .siteFooterCta .nh-cta-headline { font-size: clamp(1.75rem,4vw,2.8rem); } .nh-cta-headline--wide { max-width: none; } .siteFooterSeal { background: #030810; margin-top: 4rem; position: relative; z-index: 1; } .siteFooterSeal--alt { background: #040f18; } .siteFooterSealRule { height: 1px; background: linear-gradient(90deg,transparent 0%,rgba(232,165,0,.3) 30%,rgba(245,200,66,.5) 50%,rgba(232,165,0,.3) 70%,transparent 100%); } .siteFooterSealInner { padding: 1.75rem 1rem 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; } .siteFooterBrandRow { display: flex; align-items: center; gap: 12px; } .siteFooterBrandText { line-height: 1.25; text-align: left; } .siteFooterBrandTitle { font-weight: 900; letter-spacing: -.01em; font-size: .9375rem; color: rgba(255,255,255,.75); } .siteFooterBrandSub { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-top: 2px; } .siteFooterCopyright { margin-top: 1rem; font-size: .58rem; letter-spacing: .08em; color: rgba(255,255,255,.18); } body[data-page="home"] .siteFooterCopyright { font-size: .64rem; color: rgba(255,255,255,.28); } body[data-page="kalkulator"] .siteFooterSeal { margin-top: 3.5rem; } .siteFooterCreditLink { color: inherit; text-decoration: none; transition: color .2s; } .siteFooterCreditLink:hover { color: #38bdf8; } .btnExploreAlt { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: .02em; text-transform: none; font-size: .84rem; line-height: 1.2; min-height: 44px; padding: .72rem 1.25rem; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; background: rgba(251,191,36,.12); color: #7a4a00; border: 1px solid rgba(251,191,36,.42); box-shadow: 0 1px 6px rgba(251,191,36,.12); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; } .btnExploreAlt:hover { background: rgba(251,191,36,.22); color: #5e3600; border-color: rgba(251,191,36,.62); box-shadow: 0 4px 14px rgba(251,191,36,.18); transform: translateY(-1px); } .btnExploreAlt:active { transform: translateY(0); } [data-theme="dark"] .btnExploreAlt { background: rgba(251,191,36,.14); color: #f7cf62; border-color: rgba(251,191,36,.4); box-shadow: 0 2px 10px rgba(3,14,20,.28); } [data-theme="dark"] .btnExploreAlt:hover { background: rgba(251,191,36,.24); color: #ffe08a; border-color: rgba(251,191,36,.58); box-shadow: 0 6px 16px rgba(3,14,20,.34); } .btnGhost { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: .02em; text-transform: none; font-size: .84rem; line-height: 1.2; background: rgba(7,30,39,.18); color: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.28); min-height: 44px; padding: .72rem 1.25rem; border-radius: 4px; cursor: pointer; text-shadow: 0 1px 1px rgba(0,0,0,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; display: inline-flex; align-items: center; gap: .5rem; } .btnGhost:hover { background: rgba(7,30,39,.28); color: #ffffff; border-color: rgba(255,255,255,.42); transform: translateY(-1px); } .btnGhost:active { transform: translateY(0); } [data-theme="dark"] .btnGhost { background: rgba(255,255,255,.06); color: #ffffff; border-color: rgba(255,255,255,.22); text-shadow: none; } [data-theme="dark"] .btnGhost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); } /* ── Section headings with industrial accent bar ── */ .sectionTitle { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.75rem); letter-spacing: .015em; position: relative; padding-left: 14px; } .sectionTitle::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background: linear-gradient(180deg, var(--accent), var(--brand2)); border-radius: 2px; } /* ── Feature badge pill ── */ .tagBadge { font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; padding: .2rem .65rem; border-radius: 2px; } .tagIndustrial { background: rgba(15,76,129,.1); color: var(--brand); border: 1px solid rgba(15,76,129,.18); } [data-theme="dark"] .tagIndustrial { background: rgba(74,143,212,.12); color: var(--brand2); border-color: rgba(74,143,212,.22); } .tagLowNoise { background: rgba(146,100,0,.1); color: #92640a; border: 1px solid rgba(146,100,0,.2); } [data-theme="dark"] .tagLowNoise { background: rgba(251,191,36,.1); color: #FBBF24; border-color: rgba(251,191,36,.22); } .tagHeavy { background: rgba(60,60,80,.08); color: #444; border: 1px solid rgba(60,60,80,.15); } [data-theme="dark"] .tagHeavy { background: rgba(150,160,180,.08); color: #9ca3af; border-color: rgba(150,160,180,.18); } /* ── Card service strip ── */ .serviceCard { border-left: 3px solid var(--brand); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .serviceCard:hover { border-left-color: var(--accent); transform: translateY(-2px); } /* brand label in card */ .cardLabel { font-family: 'Inter', sans-serif; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand2); } [data-theme="dark"] .cardLabel { color: var(--brand2); } /* ── Milestone timeline ── */ .milestoneMarker { width: 14px; height: 14px; background: var(--accent); border-radius: 2px; position: absolute; left: -7px; top: 5px; transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(251,191,36,.2); } /* ── KVA stat box ── */ .statBox { background: var(--panel2); border: 1px solid var(--border); border-top: 2px solid var(--brand); padding: .9rem 1rem; border-radius: 2px; } .statBox .statVal { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--text); line-height: 1; } .statBox .statLabel { font-family: 'Inter', sans-serif; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; } /* ── CTA block ── */ .ctaBlock { background: linear-gradient(105deg, var(--brand) 0%, var(--brand2) 100%); color: #fff; position: relative; overflow: hidden; border-radius: 3px; } .ctaBlock::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, transparent, transparent 16px, rgba(255,255,255,.03) 16px, rgba(255,255,255,.03) 17px ); } .ctaBlock > * { position: relative; z-index: 1; } /* ── Footer ── Background is owned entirely by .siteFooter/.siteFooterFlat (every