/* ========================================================================== LSSBO — Design System (Phase 2) Auto dark/light + LV-inspired editorial + LiveScore data density ========================================================================== */ /* Fonts dimuat via di HTML head (lebih cepat dari @import — paralel, bukan serial). Lihat ) ===== */ :root[data-theme="dark"] { --bg: #0a0e14; --bg-elevated: #131720; --bg-subtle: #1a1f2b; --bg-inverse: #f5f2ed; --ink: #e8e6e0; --ink-soft: #b8b3a8; --muted: #7a766d; --border: #2a3142; --border-strong: #e8e6e0; --accent: #ff4d3d; --accent-soft: #2a1612; --accent-2: #ffd23f; --green: #4ade80; --green-soft: #0e2618; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 2px 8px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3); --shadow-lg: 0 12px 32px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4); } /* Pages without ticker → header sits at top:0 */ :root:not(:has(.live-ticker)) { --ticker-h: 0px; } /* ========================================================================== RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-serif); font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; min-height: 100vh; transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out); } img, video, svg { max-width: 100%; height: auto; display: block; } button { font: inherit; color: inherit; background: transparent; border: none; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } ::selection { background: var(--accent); color: #fff; } /* ========================================================================== TYPOGRAPHY UTILITIES ========================================================================== */ .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; } .serif { font-family: var(--font-serif); } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-weight: 500; color: var(--muted); } .h-display { font-family: var(--font-serif); font-weight: 400; font-variation-settings: "opsz" 96, "SOFT" 0; letter-spacing: var(--tracking-tight); line-height: 0.95; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: 1.05; color: var(--ink); } /* ========================================================================== LAYOUT ========================================================================== */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); } @media (max-width: 768px) { .container { padding: 0 var(--space-4); } } .section { padding: var(--space-16) 0; } .section--tight { padding: var(--space-8) 0; } /* Hairline divider (LV signature element) */ .hairline { height: 1px; background: var(--border); margin: var(--space-8) 0; } /* ========================================================================== BUTTONS (LV-inspired) ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; position: relative; overflow: hidden; transition: color var(--motion-base) var(--ease-out); white-space: nowrap; } .btn::before { content: ''; position: absolute; inset: 0; background: var(--ink); transform: translateY(100%); transition: transform var(--motion-base) var(--ease-out); z-index: -1; } .btn:hover { color: var(--bg); } .btn:hover::before { transform: translateY(0); } .btn:active::before { transition-duration: 80ms; } .btn--primary { background: var(--ink); color: var(--bg); } .btn--primary::before { background: var(--accent); } .btn--primary:hover { color: #fff; } .btn--ghost { border-color: var(--border); } /* ========================================================================== LINK ANIMATION (LV signature: underline grow from left) ========================================================================== */ .link-grow { position: relative; display: inline-block; padding-bottom: 2px; } .link-grow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--motion-base) var(--ease-out); } .link-grow:hover::after, .link-grow.active::after { transform: scaleX(1); transform-origin: left; } /* ========================================================================== PILL / TAG ========================================================================== */ .pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); background: var(--bg-subtle); color: var(--ink-soft); border-radius: var(--radius); } .pill--accent { background: var(--accent-soft); color: var(--accent); } .pill--live { background: var(--accent); color: #fff; position: relative; padding-left: calc(var(--space-3) + 12px); } .pill--live::before { content: ''; position: absolute; left: var(--space-3); top: 50%; width: 6px; height: 6px; background: #fff; border-radius: 50%; transform: translateY(-50%); animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); } 50% { opacity: 0.4; transform: translateY(-50%) scale(1.3); } } /* ========================================================================== SCROLLBAR (subtle) ========================================================================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* ========================================================================== FOCUS RING ========================================================================== */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ========================================================================== UTILITY: hidden on mobile / desktop ========================================================================== */ .hide-mobile { display: revert; } .hide-desktop { display: none; } @media (max-width: 768px) { .hide-mobile { display: none; } .hide-desktop { display: revert; } } /* ========================================================================== PREFERS REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }