/* SlotInsight - shared styles */ /* Self-hosted Inter (latin subset). Replaces the Google Fonts request so the critical-path waterfall is HTML → CSS → first paint, with the 400/700 weights preloaded by the page . */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/inter-800.woff2') format('woff2'); } :root { --bg: #0f1115; --bg-elev: #171a21; --bg-card: #1c2029; --border: #2a2f3a; --text: #e6e8ec; --text-dim: #9aa0aa; --accent: #f5b642; --accent-2: #6c5ce7; --good: #2ecc71; --bad: #e74c3c; --radius: 10px; --maxw: 1180px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.6em; font-weight: 700; } h1 { font-size: 2.4rem; } h2 { font-size: 1.8rem; } h3 { font-size: 1.25rem; } p { margin: 0 0 1em; color: var(--text); } ul, ol { margin: 0 0 1em; padding-left: 1.4em; } li { margin-bottom: 0.4em; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* Header */ .site-header { background: var(--bg-elev); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; } .logo { font-size: 1.35rem; font-weight: 800; color: var(--text); letter-spacing: 0.5px; } .logo span { color: var(--accent); } .nav { display: flex; gap: 22px; flex-wrap: wrap; } .nav a { color: var(--text-dim); font-size: 0.95rem; font-weight: 500; } .nav a:hover { color: var(--accent); text-decoration: none; } .nav a.active { color: var(--text); } /* Site search */ .search-row { border-top: 1px solid var(--border); background: var(--bg); padding: 10px 0; } .search-row .container { padding: 0 20px; } .search-mount { position: relative; max-width: 640px; margin: 0 auto; } .search-input { width: 100%; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: 8px; font-size: 0.95rem; font-family: inherit; } .search-input:focus { outline: none; border-color: var(--accent); } .search-input::placeholder { color: var(--text-dim); } .search-results { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; max-height: 60vh; overflow-y: auto; z-index: 200; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } .search-result { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); } .search-result:last-child { border-bottom: 0; } .search-result:hover, .search-result.active { background: var(--bg-card); text-decoration: none; } .search-result-name { font-weight: 600; font-size: 0.95rem; } .search-result-sub { color: var(--text-dim); font-size: 0.8rem; margin-top: 2px; } .search-empty { padding: 14px; color: var(--text-dim); text-align: center; font-size: 0.9rem; } /* Hero */ .hero { padding: 80px 0 60px; background: radial-gradient(ellipse at top, rgba(108, 92, 231, 0.12), transparent 60%), radial-gradient(ellipse at bottom, rgba(245, 182, 66, 0.08), transparent 60%); text-align: center; } .hero h1 { font-size: 3rem; margin-bottom: 0.4em; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lead { font-size: 1.15rem; color: var(--text-dim); max-width: 720px; margin: 0 auto 2em; } .btn { display: inline-block; padding: 14px 28px; background: var(--accent); color: #1a1a1a; font-weight: 700; border-radius: var(--radius); border: 0; cursor: pointer; font-size: 1rem; transition: transform 0.15s, filter 0.15s; } .btn:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none; } .btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } /* Section heading */ .section { padding: 60px 0; } .section-title { text-align: center; margin-bottom: 0.3em; } .section-sub { text-align: center; color: var(--text-dim); max-width: 640px; margin: 0 auto 3em; } /* Topic grid (homepage) */ .topics { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .topic-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: transform 0.2s, border-color 0.2s; color: var(--text); } .topic-card:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; } .topic-card .icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; color: #1a1a1a; margin-bottom: 16px; } .topic-card h3 { margin: 0 0 0.4em; color: var(--text); } .topic-card p { color: var(--text-dim); font-size: 0.95rem; margin: 0; } /* Games grid */ .games-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .game-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s, border-color 0.2s; display: flex; flex-direction: column; color: var(--text); text-decoration: none; } .game-card:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; } .game-thumb { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--accent-2), var(--bg-elev)); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.8); font-weight: 700; font-size: 1.05rem; text-align: center; padding: 10px; } .game-card-body { padding: 14px 16px 18px; } .game-card-body h4 { margin: 0 0 6px; font-size: 1.02rem; color: var(--text); } .game-card-body .provider { color: var(--text-dim); font-size: 0.82rem; margin-bottom: 10px; } .game-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 10px; font-size: 0.78rem; color: var(--text-dim); } .game-meta .label { color: var(--text-dim); } .game-meta .val { color: var(--text); font-weight: 600; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: rgba(245, 182, 66, 0.15); color: var(--accent); } .badge.vol-low { background: rgba(46, 204, 113, 0.15); color: var(--good); } .badge.vol-med { background: rgba(245, 182, 66, 0.15); color: var(--accent); } .badge.vol-high { background: rgba(231, 76, 60, 0.15); color: var(--bad); } /* Filters (games page) */ .filters { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .filters label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-dim); font-weight: 500; } .filters select, .filters input { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 0.95rem; } .filters input[type="search"] { width: 100%; } .games-count { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 14px; } /* Content pages */ .content { max-width: 820px; margin: 0 auto; padding: 40px 20px 60px; } .content h1 { margin-bottom: 0.3em; } .content .lead { font-size: 1.1rem; color: var(--text-dim); margin-bottom: 2em; } .content h2 { margin-top: 1.8em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; } .content h3 { margin-top: 1.5em; color: var(--accent); } .content table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.92rem; } .content th, .content td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; } .content th { color: var(--accent); font-weight: 600; } .content tr:hover td { background: rgba(255,255,255,0.02); } .callout { background: var(--bg-card); border-left: 3px solid var(--accent); padding: 16px 20px; border-radius: 6px; margin: 1.4em 0; } .callout.warn { border-left-color: var(--bad); } .callout strong { color: var(--accent); } /* Glossary */ .glossary dt { color: var(--accent); font-weight: 700; margin-top: 1em; } .glossary dd { margin: 0 0 0.4em; color: var(--text); } /* Provider card */ .provider-list { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 2em 0; } .provider-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .provider-card h3 { margin: 0 0 0.3em; color: var(--text); } .provider-card .tag { font-size: 0.78rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; } .provider-card p { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 0; } /* Footer */ .site-footer { background: var(--bg-elev); border-top: 1px solid var(--border); padding: 40px 0 30px; margin-top: 60px; color: var(--text-dim); font-size: 0.9rem; } .footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 30px; } .footer-cols h2 { color: var(--text); font-size: 0.95rem; margin: 0 0 0.6em; font-weight: 700; } .footer-cols a { color: var(--text-dim); display: block; margin-bottom: 0.4em; } .footer-cols a:hover { color: var(--accent); text-decoration: none; } .disclaimer { border-top: 1px solid var(--border); padding-top: 20px; font-size: 0.82rem; color: var(--text-dim); text-align: center; } /* Homepage hero CTA group + stats strip */ .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 2.4em; } .hero-stats { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 820px; } .hero-stats li { margin: 0; background: rgba(28, 32, 41, 0.55); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .hero-stats .num { font-size: 1.7rem; font-weight: 800; color: var(--accent); line-height: 1; } .hero-stats .lbl { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; } /* Quick-paths cards */ .quick-paths { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .qp-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; color: var(--text); display: block; transition: transform 0.2s, border-color 0.2s; } .qp-card:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; } .qp-icon { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; color: #1a1a1a; margin-bottom: 14px; } .qp-card h3 { margin: 0 0 0.4em; } .qp-card p { color: var(--text-dim); font-size: 0.95rem; margin: 0; } /* Best-Of preview strip */ .best-preview { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .bp-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; color: var(--text); display: flex; flex-direction: column; gap: 10px; transition: transform 0.2s, border-color 0.2s; } .bp-card:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; } .bp-tag { align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: rgba(245, 182, 66, 0.12); border: 1px solid rgba(245, 182, 66, 0.28); padding: 4px 10px; border-radius: 999px; } .bp-card h3 { margin: 0; font-size: 1.15rem; } .bp-card p { color: var(--text-dim); font-size: 0.92rem; margin: 0; flex: 1; } .bp-cta { font-size: 0.85rem; font-weight: 700; color: var(--accent); margin-top: 4px; } @media (max-width: 720px) { h1 { font-size: 1.9rem; } .hero { padding: 50px 0 40px; } .hero h1 { font-size: 2.2rem; } .footer-cols { grid-template-columns: 1fr; gap: 20px; } .nav { gap: 14px; } .nav a { font-size: 0.88rem; } .hero-stats { grid-template-columns: repeat(3, 1fr); } .hero-stats .num { font-size: 1.4rem; } } @media (max-width: 600px) { .site-header .container { padding-top: 12px; padding-bottom: 12px; } .nav { gap: 10px 14px; } .search-row { padding: 8px 0; } .search-input { padding: 12px 14px; font-size: 16px; } .filters select, .filters input { font-size: 16px; } .search-results { max-height: 50vh; } .hero-cta .btn { width: 100%; max-width: 320px; text-align: center; } .hero-stats { gap: 10px; } .hero-stats li { padding: 12px 6px; } .hero-stats .num { font-size: 1.25rem; } .hero-stats .lbl { font-size: 0.68rem; } .qp-card { padding: 20px; } .bp-card { padding: 20px; } } @media (max-width: 480px) { .container { padding: 0 16px; } h1 { font-size: 1.7rem; } h2 { font-size: 1.45rem; } .hero { padding: 36px 0 28px; } .hero h1 { font-size: 1.85rem; } .hero p.lead { font-size: 1rem; } .section { padding: 40px 0; } .btn { padding: 12px 22px; font-size: 0.95rem; } .topic-card { padding: 22px; } .provider-card { padding: 18px; } .filters { padding: 16px; gap: 12px; } .content { padding: 28px 16px 50px; } .content h2 { margin-top: 1.4em; } .site-footer { padding: 32px 0 24px; margin-top: 40px; } }