/* ================================================================== FLICKSHOT — DESIGN TOKENS Fonte unica de verdade pra cor, espaco, raio, sombra e estado. Carregado ANTES de qualquer outro CSS, em todas as paginas. REGRA: nenhum componente inventa cor. Precisou de um tom novo, ele nasce aqui como token. Nada de hex solto no CSS/JS/HTML. IDENTIDADE v2 (redesign completo 14/08 — "outro produto", nao so cor nova): fundo quase preto com fundo de nome #06100D, marca lima eletrico #B7FF3C. Lima e a MARCA (botao, foco, ativo, protagonista do jogo). Verde e DINHEIRO (saldo, ganho, gol). Sao papeis diferentes e nunca se misturam — foi por isso que a marca nao virou verde tambem. ================================================================== */ :root { /* ---------- superficies (do mais fundo pro mais alto) ---------- */ --bg-page: #06100D; --bg-surface: #0B1F16; --bg-surface-elevated: #10291D; --bg-surface-hover: #153323; --bg-input: #071810; --bg-sunken: #030C08; /* gramado: usado no hero e no fundo do jogo. Listra de campo. */ --turf-a: #0B2517; --turf-b: #091F13; /* ---------- ilustracao do campo ---------- Cor de objeto (gramado, cal, bola), nao de interface. Fica aqui pelo mesmo motivo que o resto: mudar o tom do campo tem que ser um lugar so. Usadas no SVG da home e na bola em CSS do jogo. */ --pitch-far: #1D6636; /* fundo do campo, mais claro (perspectiva) */ --pitch-mid: #123D20; --pitch-near: #091F13; /* frente do campo, mais escuro */ --chalk: #F2FBF4; /* cal das linhas e traves */ --ball-white: #FDFEFD; --ball-ink: #0A1F06; /* gomos da bola */ /* ---------- marca (lima eletrico) ---------- */ --primary: #B7FF3C; --primary-hover: #CBFF6E; --primary-active: #9BE81E; --primary-soft: rgba(183, 255, 60, .13); --primary-soft-strong: rgba(183, 255, 60, .22); --primary-glow: rgba(183, 255, 60, .36); /* ---------- bordas ---------- */ --border-default: rgba(255, 255, 255, .13); --border-strong: rgba(255, 255, 255, .26); --border-subtle: rgba(255, 255, 255, .07); --border-focus: #C6FF3D; /* ---------- texto ---------- Contrastes medidos sobre --bg-surface (#0B2416). */ --text-primary: #F3FBF5; /* 15.4:1 */ --text-secondary: #B4CCBC; /* 8.6:1 */ --text-muted: #8CA695; /* 5.1:1 — acima do piso AA */ --text-on-primary: #081707; /* 10.6:1 sobre --primary */ --text-on-success: #04180D; /* ---------- semanticas ---------- */ --success: #38E08A; /* dinheiro / gol */ --success-soft: rgba(56, 224, 138, .13); --success-border: rgba(56, 224, 138, .36); --success-hover: #5CE9A2; --success-strong: #16BE69; --warning: #FFC24D; --warning-soft: rgba(255, 194, 77, .13); --warning-border: rgba(255, 194, 77, .36); --warning-hover: #FFD073; --danger: #FF7A85; /* 5.0:1 sobre --danger-soft */ --danger-soft: rgba(255, 122, 133, .13); --danger-border: rgba(255, 122, 133, .36); --danger-hover: #FF98A1; --info: #6FD3F5; --info-soft: rgba(111, 211, 245, .13); --info-border: rgba(111, 211, 245, .36); --neutral: #8FA997; --neutral-soft: rgba(143, 169, 151, .11); --neutral-border: rgba(143, 169, 151, .30); /* ---------- overlay ---------- --overlay = fundo de modal (apaga o que esta atras, de proposito). --scrim = veu leve pra escurecer sem apagar (gate sobre o campo). */ --overlay: rgba(2, 10, 6, .74); --overlay-blur: blur(8px); --scrim: rgba(5, 21, 12, .58); /* ---------- sombras ---------- */ --shadow-sm: 0 2px 8px rgba(1, 8, 4, .30); --shadow-md: 0 8px 24px rgba(1, 8, 4, .40); --shadow-lg: 0 16px 44px rgba(1, 8, 4, .52); --shadow-sheet: 0 -16px 50px rgba(0, 0, 0, .42); --shadow-primary: 0 8px 22px rgba(183, 255, 60, .30); --shadow-success: 0 8px 22px rgba(56, 224, 138, .26); --shadow-float: 0 14px 40px rgba(1, 6, 3, .50), 0 2px 10px rgba(1, 6, 3, .35); /* ---------- foco (anel unico do site inteiro) ---------- */ --ring: 0 0 0 3px rgba(183, 255, 60, .42); --ring-danger: 0 0 0 3px rgba(255, 122, 133, .36); /* ---------- raios ---------- */ --r-xs: 8px; --r-sm: 10px; --r-md: 13px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 26px; --r-sheet: 24px; --r-pill: 999px; /* ---------- espaco ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; /* ---------- tipografia ---------- */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---------- area segura (iPhone / PWA) ---------- */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --vh-safe: 100svh; /* ---------- alvo de toque minimo (WCAG 2.5.5 / HIG) ---------- */ --tap: 44px; /* ---------- transicoes ---------- --e-pop/--e-bounce sao as MESMAS curvas do jogo (jogar/index.php) — usar aqui tambem e o que faz o site inteiro sentir a mesma mao, nao so ter a mesma cor. */ --e-pop: cubic-bezier(.2, .8, .3, 1); --e-bounce: cubic-bezier(.2, .85, .25, 1.3); --t-fast: .12s var(--e-pop); --t-base: .2s var(--e-pop); --t-sheet: .34s cubic-bezier(.2, .9, .3, 1); /* ---------- z-index (andares do site) ---------- */ --z-header: 40; --z-bnav: 50; --z-scrim: 80; --z-overlay: 90; --z-sheet: 91; --z-toast: 120; /* ---------- largura util (mobile-first, trava no desktop) ---------- */ --wrap: 520px; --wrap-wide: 1180px; /* composicao de 2 colunas (home, jogo) em desktop real */ --bp-desktop: 960px; /* abaixo disso e "mobile esticado" nunca, e o breakpoint */ /* ---------- bottom nav flutuante ---------- */ --bnav-inset: 12px; /* distancia das bordas — o que faz ela "flutuar" */ --bnav-h: 62px; --bnav-ring: #0A1A12; /* aproximacao opaca do fundo com blur, so pro anel do botao central */ /* ---------- escala tipografica de impacto ---------- Valores em R$ e multiplicadores tem que pesar muito mais que os labels ao lado ("premio atual", "proximo chute") — por isso ganham tokens proprios de tamanho, usados em qualquer tela nova. */ --num-hero: clamp(40px, 12vw, 64px); --num-lg: clamp(28px, 8vw, 38px); } /* ================================================================== RESET DE ESTADO — vale pro site inteiro ================================================================== */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Desabilitado: mesma leitura em todo lugar. ATENCAO: botao travado por REGRA de negocio (ex: saque abaixo do minimo) NAO usa isso — ele continua clicavel e diz o que falta. Ver .btn.is-locked no theme.css. */ [disabled], .is-disabled, [aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: saturate(.5); pointer-events: none; } /* Autofill do iOS/Chrome nao pode voltar o campo pra branco */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill { -webkit-text-fill-color: var(--text-primary) !important; -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important; box-shadow: 0 0 0 1000px var(--bg-input) inset !important; caret-color: var(--text-primary); transition: background-color 9999s ease-out 0s; } ::selection { background: var(--primary-soft-strong); color: var(--text-primary); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media (prefers-contrast: more) { :root { --border-default: rgba(255,255,255,.28); --border-strong: rgba(255,255,255,.48); --text-muted: #B4CCBC; } }