/* ========================================================================= IDX — Index Summary additions (IHSG hero, OHLC grid, all-index table) This file is purely ADDITIVE: style.css is never modified. Everything here introduces new classes only, so nothing already shipped can break. ========================================================================= */ /* Safety net: only had overflow-x:hidden in the base stylesheet. On some mobile browsers the element is the actual scrolling box, so a single element that's briefly too wide (e.g. a table before its DataTable/scrollX wrapper attaches) can drag the *whole page* sideways instead of just scrolling within its own panel. This closes that gap without touching style.css. */ html{ overflow-x: hidden; } /* Keep every new panel (hero, OHLC grid, index table) safely inside the viewport regardless of content width. */ .idx-hero, .idx-panel{ max-width: 100%; } :root{ /* Premium gradient trio — used for the IHSG hero card and the index table's code badge / change pill, where a solid tinted background is wanted. */ --grad-up-a: #0e4f34; --grad-up-b: #1c9c6b; --grad-up-c: #59d8a4; --grad-down-a: #6e1c1c; --grad-down-b: #d64545; --grad-down-c: #f2938f; --grad-flat-a: #8a6d1f; --grad-flat-b: #d9ac4d; --grad-flat-c: #f7e5a9; } /* ---- shared premium gradient utilities (backgrounds) ---- */ .grad-up{ background: linear-gradient(135deg, var(--grad-up-a) 0%, var(--grad-up-b) 55%, var(--grad-up-c) 100%); color: #f1fff8; } .grad-down{ background: linear-gradient(135deg, var(--grad-down-a) 0%, var(--grad-down-b) 55%, var(--grad-down-c) 100%); color: #fff6f5; } .grad-flat{ background: linear-gradient(135deg, var(--grad-flat-a) 0%, var(--grad-flat-b) 55%, var(--grad-flat-c) 100%); color: #2a1e0a; } /* ---- plain text-colour utilities (used inside light-background cards, e.g. the OHLC stat cards, where a solid gradient fill would be too loud but the figure itself still needs to read red / green / dark gold) ---- */ .txt-up{ color: var(--up, #1c9c6b); } .txt-down{ color: var(--down, #d64545); } .txt-flat{ color: var(--gold-800, #4a3512); } /* ---- IHSG price hero ---- */ .idx-hero{ position: relative; margin-top: 22px; border-radius: var(--radius-lg, 20px); padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; box-shadow: 0 10px 32px rgba(42, 30, 10, 0.16); } .idx-hero-left{ display:flex; flex-direction:column; gap:4px; } .idx-hero-code{ font-family: var(--font-display, 'Playfair Display', serif); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; font-weight: 700; } .idx-hero-price{ font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 34px; font-weight: 700; line-height: 1.1; } .idx-hero-change{ font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; opacity: .95; } .idx-hero-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size: 12.5px; opacity:.85; } .idx-hero-right span{ font-weight:600; } /* Brand logo inside the hero: sits in the empty space next to the IHSG figures. Absolutely positioned so it never pushes the price/date text around — top-right on phones, and re-centred into the wide gap between the two text blocks once there's room for it on desktop. */ .idx-hero-left, .idx-hero-right{ position: relative; z-index: 1; } .idx-hero-logo{ position: absolute; top: 16px; right: 18px; z-index: 0; width: 127px; height: 127px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .idx-hero-logo img{ display:block; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)) drop-shadow(0 0 16px rgba(212, 175, 55, .55)); } @media (min-width: 900px){ .idx-hero-logo{ top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: 140px; height: 140px; } } /* ---- panels (OHLC + all-index table wrappers) ---- */ .idx-panel{ margin-top: 22px; background:#fff; border-radius: var(--radius-lg, 20px); border: 1px solid rgba(168,121,44,.16); box-shadow: var(--shadow-soft, 0 4px 18px rgba(42,30,10,.08)); padding: 20px 22px; } .idx-panel-title{ font-family: var(--font-display, 'Playfair Display', serif); font-size: 17px; color: var(--gold-800, #4a3512); margin: 0 0 16px; display:flex; align-items:center; gap:8px; } /* The OHLC grid deliberately reuses the existing .summary-grid / .stat-card markup from style.css (same look as the market-breadth cards), so the figures automatically match the rest of the site's visual language. #idxOhlcGrid just removes the extra top margin .summary-grid normally carries, since it already sits inside a padded .idx-panel. */ #idxOhlcGrid{ margin-top: 0; } /* Long IHSG figures (e.g. "Rp 11,165.35T") were being clipped: .stat-body is a flex child in style.css and, without min-width:0, a flex item never shrinks below its content's natural width — so the un-wrapped value text just spilled out past the card edge instead of wrapping or ellipsis-ing. This restores normal box behaviour for the OHLC cards specifically. */ #idxOhlcGrid .stat-body{ min-width: 0; flex: 1 1 auto; } #idxOhlcGrid .stat-value{ white-space: normal; overflow: visible; text-overflow: unset; word-break: break-word; line-height: 1.22; } /* On phone-width screens, two cards per row leaves too little room for long Rupiah figures even after the fix above — rather than shrinking the numbers down to fit, let each OHLC card take the full row so the figures stay large and legible. (ID selector, so this only affects the OHLC grid; the 3/2-column rules from style.css still apply everywhere else that reuses .summary-grid.) */ @media (max-width: 560px){ #idxOhlcGrid{ grid-template-columns: 1fr; } } /* ---- all-index table (rendered as a DataTable; table.dataTable rules from style.css already supply the header/row styling, this just adds the badge/pill accents used inside cells) ---- */ .idx-code-badge{ display:inline-block; font-weight:700; border-radius:6px; padding:3px 9px; font-size:12.5px; } .idx-change-pill{ display:inline-flex; align-items:center; gap:5px; border-radius: 999px; padding: 3px 10px; font-size:12.5px; font-weight:700; white-space: nowrap; } table.dataTable tbody tr.idx-row-composite td{ font-weight:700; background: var(--gold-50, #fdf9ef) !important; }