/* ========================================================================== Live togel overlay — shared styles for all OBS display modes (full board, focus hero, curated board, ticker). Mode-agnostic: markup exposes .market[data-market][data-periode][data-open][data-close] and the engine in live.js drives reveal / badge / countdown against these hooks. Palette is OKLCH: a tinted-ink base (never pure black), one warm accent for the winning number, and green/red reserved strictly for Buka/Tutup status. No neon glows, no gradient text — depth comes from tile edges and contrast. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap'); :root { /* Broadcast (default): cool ink base, warm gold winning digits */ --bg: oklch(0.17 0.02 265); --bg-2: oklch(0.21 0.028 265); --panel: oklch(0.235 0.03 265); --panel-edge: oklch(0.40 0.045 265); --ink: oklch(0.965 0.008 265); --muted: oklch(0.70 0.03 265); --accent: oklch(0.84 0.145 85); /* winning digits — warm gold */ --accent-ink: oklch(0.20 0.03 85); /* readable text on accent */ --open: oklch(0.78 0.15 150); /* Buka */ --closed: oklch(0.68 0.19 25); /* Tutup */ --tile: oklch(0.255 0.03 265); --tile-edge: oklch(0.42 0.04 265); --radius: 16px; --radius-sm: 10px; --font: 'Space Grotesk', system-ui, sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* Theme presets via ------------------------------------- */ body[data-theme="neon"] { --bg: oklch(0.16 0.035 320); --bg-2: oklch(0.20 0.05 320); --panel: oklch(0.22 0.055 320); --panel-edge: oklch(0.42 0.10 330); --accent: oklch(0.72 0.19 350); --accent-ink: oklch(0.16 0.04 350); --tile: oklch(0.24 0.06 325); --tile-edge: oklch(0.44 0.11 330); } body[data-theme="luxury"] { --bg: oklch(0.17 0.012 75); --bg-2: oklch(0.21 0.016 75); --panel: oklch(0.235 0.02 75); --panel-edge: oklch(0.44 0.035 80); --accent: oklch(0.82 0.12 90); --accent-ink: oklch(0.20 0.03 90); --tile: oklch(0.25 0.02 75); --tile-edge: oklch(0.44 0.03 80); } body[data-theme="classic"] { --bg: oklch(0.18 0.03 155); --bg-2: oklch(0.22 0.04 155); --panel: oklch(0.24 0.045 155); --panel-edge: oklch(0.44 0.07 155); --accent: oklch(0.86 0.16 110); --accent-ink: oklch(0.20 0.04 110); --tile: oklch(0.25 0.045 155); --tile-edge: oklch(0.45 0.07 155); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden; -webkit-font-smoothing: antialiased; } /* Transparent / chroma modes for OBS compositing -------------------------- */ body[data-bg="transparent"] { background: transparent; } body[data-bg="chroma"] { background: oklch(0.70 0.22 145); } /* Root scale knob (?scale=1.2) -------------------------------------------- */ .stage { transform: scale(var(--scale, 1)); transform-origin: top center; } /* Shared header ----------------------------------------------------------- */ .overlay-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 20px 26px 14px; } .overlay-title { font-weight: 700; letter-spacing: -0.01em; font-size: clamp(20px, 2.4vw, 34px); margin: 0; color: var(--ink); } .overlay-title::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 12px; border-radius: 3px; background: var(--accent); transform: translateY(-2px); } .overlay-clock { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; font-size: clamp(13px, 1.3vw, 18px); letter-spacing: 0.01em; } /* Status badge ------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 0.72em; line-height: 1; padding: 5px 11px 5px 9px; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent; } .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .badge.is-open { color: var(--open); background: oklch(0.78 0.15 150 / 0.14); border-color: oklch(0.78 0.15 150 / 0.35); } .badge.is-closed { color: var(--closed); background: oklch(0.68 0.19 25 / 0.14); border-color: oklch(0.68 0.19 25 / 0.35); } .badge.is-open::before { animation: pulse 1.6s var(--ease) infinite; } @keyframes pulse { 50% { opacity: 0.4; transform: scale(0.85); } } /* Countdown --------------------------------------------------------------- */ .countdown { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .countdown .cd-label { color: var(--muted); font-weight: 500; font-size: 0.82em; } .countdown .cd-value { color: var(--ink); font-weight: 600; } .market.closing-soon .countdown .cd-value { color: var(--closed); } .market.closing-soon .countdown .cd-label { color: var(--closed); opacity: 0.8; } /* Schedule time (open -> close) ------------------------------------------- */ .m-time, .h-time { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 500; } /* Result digit tiles ------------------------------------------------------ */ .result { display: inline-flex; gap: 8px; } .digit { font-weight: 700; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--tile), var(--bg-2)); border: 1px solid var(--tile-edge); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06); border-radius: var(--radius-sm); color: var(--accent); min-width: 1.05em; padding: 0.1em 0.18em; line-height: 1; } /* reveal: each digit flips in with a stagger set via --i inline */ .digit.reveal { animation: flipIn 0.52s var(--ease) both; animation-delay: calc(var(--i, 0) * 0.13s); } @keyframes flipIn { 0% { transform: perspective(400px) rotateX(-92deg); opacity: 0; } 55% { transform: perspective(400px) rotateX(8deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(0); opacity: 1; } } .digit.pending { color: var(--muted); background: var(--bg-2); animation: pendingPulse 1.4s var(--ease) infinite; } @keyframes pendingPulse { 50% { opacity: 0.45; } } /* Fresh-result cue: clean accent ring, no glow ---------------------------- */ .market.flash { animation: cardFlash 1.5s var(--ease); } @keyframes cardFlash { 0% { box-shadow: 0 0 0 2px var(--accent), 0 12px 30px oklch(0 0 0 / 0.35); } 100% { box-shadow: 0 0 0 0 transparent, 0 12px 30px oklch(0 0 0 / 0.35); } } .new-badge { position: absolute; top: -9px; right: 14px; font-weight: 700; font-size: 10px; letter-spacing: 0.08em; color: var(--accent-ink); background: var(--accent); padding: 3px 9px; border-radius: 6px; transform: scale(0); } .market.flash .new-badge { animation: pop 1.5s var(--ease); } @keyframes pop { 0% { transform: scale(0); } 18% { transform: scale(1.1); } 40% { transform: scale(1); } 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0; } } /* ====== Mode: FULL BOARD ================================================= */ .board { padding: 0 22px 24px; } .board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; } .board .market { position: relative; display: grid; grid-template-columns: 3.4em 1fr auto; align-items: center; gap: 16px; background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--panel-edge); border-radius: var(--radius); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.04); padding: 11px 16px; } .board .m-id { text-align: left; line-height: 1.1; } .board .m-code { font-weight: 700; color: var(--accent); font-size: 1.35em; letter-spacing: -0.01em; } .board .m-periode { color: var(--muted); font-size: 0.82em; font-weight: 500; font-variant-numeric: tabular-nums; } .board .m-name { font-weight: 600; font-size: 1.05em; text-transform: capitalize; letter-spacing: -0.01em; } .board .m-sched { display: flex; align-items: center; gap: 12px; margin-top: 5px; font-size: 0.82em; } .board .result { font-size: 1.7em; } /* ====== Mode: FOCUS HERO ================================================= */ .focus-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 40px; } .hero { position: relative; text-align: center; background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--panel-edge); border-radius: 28px; padding: 46px 72px 40px; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05), 0 40px 90px oklch(0 0 0 / 0.5); } .hero .h-name { font-weight: 700; font-size: clamp(32px, 5vw, 66px); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; } .hero .h-sub { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; color: var(--muted); font-size: clamp(15px, 1.7vw, 21px); } .hero .h-code { font-weight: 600; color: var(--ink); } .hero .h-periode { font-variant-numeric: tabular-nums; } .hero .result { font-size: clamp(66px, 13vw, 178px); margin: 26px 0 18px; gap: 14px; } .hero .h-sched { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 6px; font-size: clamp(15px, 1.8vw, 23px); } .hero .countdown { font-size: 1em; } .hero .history { display: flex; gap: 10px; justify-content: center; margin-top: 30px; flex-wrap: wrap; } .hero .hist { display: flex; align-items: baseline; gap: 7px; background: var(--tile); border: 1px solid var(--tile-edge); border-radius: var(--radius-sm); padding: 6px 12px; } .hero .hist .hp { color: var(--muted); font-size: 0.78em; font-variant-numeric: tabular-nums; } .hero .hist .hn { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } /* ====== Mode: CURATED BOARD ============================================= */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; padding: 4px 26px 28px; } .cards .market { position: relative; background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--panel-edge); border-radius: 22px; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05), 0 16px 40px oklch(0 0 0 / 0.32); padding: 22px 24px 20px; } .cards .c-top { display: flex; align-items: center; justify-content: space-between; } .cards .c-code { font-weight: 700; color: var(--accent); font-size: 1.7em; letter-spacing: -0.01em; } .cards .c-name { font-weight: 500; font-size: 1.02em; text-transform: capitalize; margin-top: 4px; color: var(--muted); letter-spacing: -0.01em; } .cards .c-name .m-periode { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .cards .result { font-size: 3.1em; margin: 18px 0 16px; } .cards .c-sched { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 0.95em; padding-top: 14px; border-top: 1px solid var(--panel-edge); } /* ====== Mode: TICKER ==================================================== */ .ticker { position: fixed; bottom: 0; left: 0; right: 0; height: 96px; display: flex; align-items: center; overflow: hidden; background: linear-gradient(0deg, var(--bg), var(--bg-2)); border-top: 2px solid var(--panel-edge); } body[data-bg="transparent"] .ticker { background: linear-gradient(0deg, oklch(0.17 0.02 265 / 0.92), transparent); } .ticker-track { display: inline-flex; align-items: center; gap: 40px; white-space: nowrap; padding-left: 100%; animation: scroll var(--ticker-speed, 42s) linear infinite; } .ticker .market { position: relative; display: inline-flex; align-items: center; gap: 14px; } .ticker .t-code { font-weight: 700; color: var(--accent); font-size: 1.5em; letter-spacing: -0.01em; } .ticker .t-name { font-weight: 500; text-transform: capitalize; color: var(--muted); font-size: 1.05em; } .ticker .result { font-size: 1.8em; } .ticker .t-sep { color: var(--panel-edge); font-size: 1.6em; } @keyframes scroll { to { transform: translateX(-100%); } } /* Reduced motion ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .digit.reveal, .market.flash, .ticker-track, .badge.is-open::before, .digit.pending { animation: none; } }