/* ============================================================ 166bet — full stylesheet (design system + sections) Ported 1:1 from the Claude Design handoff (styles.css + sections.css), with image-slot wells replaced by .ph placeholders and three added SEO sections (App / FAQ / Sobre) + a mobile nav drawer. Token-driven: re-skin via the :root custom properties below. On the homepage this file is INLINED in (no render-blocking request, zero CLS). On inner pages it is enqueued + cached. @font-face lives in fonts.css (inlined separately in ). ============================================================ */ /* ---------- Tokens ---------- */ :root { /* Base — near-black with a faint cool-green tint */ --bg: #0A0E15; --bg-elev: #0F1622; --surface: #131C2B; --surface-2: #1A2536; --surface-3: #243246; --line: rgba(255,255,255,.07); --line-strong: rgba(255,255,255,.14); /* Text */ --text: #EAF1FB; --text-dim: #94A3BC; --text-faint: #5E6C84; /* Accents */ --green: #2E86FF; /* primary — CTA + odds */ --green-700: #1C6FE6; /* pressed */ --green-soft: rgba(46,134,255,.14); --green-glow: rgba(46,134,255,.45); --yellow: #FF5A2C; /* Seleção / bônus / Aviator */ --yellow-deep: #E33F12; --yellow-soft: rgba(255,90,44,.14); --red: #FF5A5A; /* live / odds-down */ --red-soft: rgba(255,90,90,.14); /* Radii */ --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 18px; --r-xl: 26px; --pill: 999px; /* Shadow */ --sh-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.35); --sh-2: 0 18px 50px rgba(0,0,0,.55); --sh-cta: 0 8px 22px rgba(46,134,255,.32); /* Layout */ --pad: 16px; --maxw: 1180px; --header-h: 56px; /* Type */ --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif; --font-body: 'Archivo', system-ui, -apple-system, sans-serif; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.45; font-size: 15px; letter-spacing: .005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: 30px; } .section--tight { padding-block: 18px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--green); color: #FFFFFF; padding: 10px 16px; z-index: 100; font-weight: 700; } .skip-link:focus { left: 8px; top: 8px; border-radius: var(--r-xs); } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .sec-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 6vw, 30px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; } .sec-head h2 b { color: var(--green); font-weight: 800; } .sec-head .more { font-size: 12.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .sec-head .more:hover { color: var(--green); } .eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--green); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; padding: 13px 20px; border-radius: var(--pill); transition: transform .12s ease, filter .12s ease, background .12s ease; white-space: nowrap; user-select: none; } .btn:active { transform: translateY(1px) scale(.99); } .btn--primary { background: var(--green); color: #FFFFFF; box-shadow: var(--sh-cta); } .btn--primary:hover { filter: brightness(1.06); } .btn--yellow { background: var(--yellow); color: #FFFFFF; box-shadow: 0 8px 22px rgba(255,90,44,.28); } .btn--yellow:hover { filter: brightness(1.05); } .btn--ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line-strong); } .btn--ghost:hover { border-color: var(--green); color: var(--green); } .btn--block { width: 100%; } .btn--sm { padding: 9px 15px; font-size: 13.5px; } .btn--lg { padding: 16px 26px; font-size: 18px; } /* ---------- Generic card ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } /* ---------- Live pill ---------- */ .live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 800; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--red-soft); border: 1px solid rgba(255,90,90,.4); padding: 3px 9px 3px 7px; border-radius: var(--pill); } .live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255,90,90,.7); animation: livepulse 1.6s infinite; } @keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,90,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,90,90,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,90,0); } } /* ---------- Odds button ---------- */ .odds { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 4px 6px; min-width: 0; transition: border-color .12s, background .12s; } .odds:hover { border-color: var(--green); } .odds .k { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; } .odds .v { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--green); font-variant-numeric: tabular-nums; line-height: 1; } .odds.is-up .v { color: var(--green); } .odds.is-down .v { color: var(--red); } .odds--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .boost { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); background: var(--yellow-soft); border: 1px solid rgba(255,90,44,.35); padding: 2px 7px; border-radius: var(--pill); } /* ---------- Placeholder image treatment ---------- Used where real game/casino art will be dropped in later. Swap the for an with width/height + loading="lazy". */ .ph { position: relative; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 9px), linear-gradient(160deg, var(--surface-3), var(--surface-2)); box-shadow: inset 0 0 0 1px var(--line-strong); } .ph .ph-tag { position: absolute; left: 8px; bottom: 8px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 9.5px; letter-spacing: .04em; color: var(--text-dim); background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 5px; } /* scroll-row */ .hrow { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); -ms-overflow-style: none; scrollbar-width: none; } .hrow::-webkit-scrollbar { display: none; } .hrow > * { scroll-snap-align: start; flex: 0 0 auto; } /* utility */ .divider { height: 1px; background: var(--line); border: 0; } .tnum { font-variant-numeric: tabular-nums; } /* ============================================================ Section / component layout ============================================================ */ /* ---------- Promo strip ---------- */ .promo-strip { background: linear-gradient(90deg, #0c1320, #0a0f1a); border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--text-dim); overflow: hidden; } .promo-strip__in { display: flex; align-items: center; gap: 12px; height: 30px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; } .promo-strip__in::-webkit-scrollbar { display: none; } .promo-strip__item { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; } .promo-strip__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); flex: 0 0 auto; } .g-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green-glow); } /* ---------- Header ---------- */ .hdr { position: sticky; top: 0; z-index: 50; background: rgba(10,14,21,.86); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); } .hdr__in { display: flex; align-items: center; gap: 12px; height: var(--header-h); position: relative; } .hdr__menu { display: inline-flex; color: var(--text); padding: 4px; margin-left: -4px; } .hdr__nav { display: none; } /* WP menus render