/* ============================================================ Identidade visual — 4 paletas prontas, escolhidas por marca no /admin. O tema entra como data-theme no ; todo o resto do CSS usa apenas as variaveis, entao trocar de tema nao mexe em mais nada. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap'); /* ---------- 1. CLASSICO PREMIUM (padrao) — preto fosco, dourado e ambar ---------- */ :root, [data-theme="premium"] { --brand: #241C15; --pack-line: #423527; /* preto fosco quente: cartoes de pacote, logo */ --brand-ink: #f3e7d3; --accent: #c8952f; /* dourado ambar: botao principal */ --accent-ink: #1a1206; /* texto sobre o dourado (dourado + branco nao se le) */ --bg: #0d0b0a; --card: #17130f; --card-2: #1f1913; --line: #332920; --line-soft: #26201a; --text: #f4ece0; --muted: #a89681; --muted-2: #8a7a67; --field-bg: #120f0c; --field-line: #3a2f24; --track: #2a221b; /* trilho da barra de progresso */ --bar: #c8952f; /* preenchimento da barra */ --img-bg: #241d16; --flag: #0d0b0a; /* selo POPULAR */ --info: #85591a; /* contador dos bilhetes premiados */ --info-ink: #fff; --ok: #6fbf73; --warn: #d9a441; --danger: #e0736b; --ok-bg: rgba(111, 191, 115, .12); --warn-bg: rgba(217, 164, 65, .12); --danger-bg: rgba(224, 115, 107, .12); --ok-line: rgba(111, 191, 115, .3); --warn-line: rgba(217, 164, 65, .3); --danger-line: rgba(224, 115, 107, .3); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .35); --shadow-up: 0 -2px 18px rgba(0, 0, 0, .5); } /* ---------- 2. RUSTICO / ARTESANAL — marrom tabaco, cobre e creme ---------- */ [data-theme="rustico"] { --brand: #5d3a21; --brand-ink: #fbf5ea; --accent: #8f5222; --accent-ink: #fff8ef; --bg: #f3ece0; --card: #fffdf8; --card-2: #f8f1e6; --line: #ddcdb6; --line-soft: #e9ddc9; --text: #2e2118; --muted: #7a6653; --muted-2: #75634C; --field-bg: #f7f1e7; --field-line: #d8c6ad; --track: #e3d6c2; --bar: #8f5222; --img-bg: #eee3d2; --flag: #2e2118; --info: #7a5230; --info-ink: #fff; --ok: #4f7a3f; --warn: #a2691c; --danger: #a33b30; --ok-bg: rgba(79, 122, 63, .12); --warn-bg: rgba(162, 105, 28, .12); --danger-bg: rgba(163, 59, 48, .1); --ok-line: rgba(79, 122, 63, .3); --warn-line: rgba(162, 105, 28, .3); --danger-line: rgba(163, 59, 48, .3); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(80, 55, 30, .07), 0 5px 16px rgba(80, 55, 30, .07); --shadow-up: 0 -2px 16px rgba(80, 55, 30, .12); } /* ---------- 3. MODERNO / URBANO — cinza chumbo, preto e borgonha ---------- */ [data-theme="urbano"] { --brand: #2B3039; --pack-line: #434A56; --brand-ink: #eef1f5; --accent: #8d2438; --accent-ink: #ffffff; --accent-text: #ea7f91; /* borgonha nao se le como texto no fundo escuro */ --bg: #101215; --card: #181b20; --card-2: #1f232a; --line: #2f353e; --line-soft: #262b33; --text: #eef1f5; --muted: #97a1af; --muted-2: #7c8694; --field-bg: #14171b; --field-line: #333a44; --track: #1a1e23; --bar: #d4455e; --img-bg: #22262d; --flag: #0b0d10; --info: #6b2233; --info-ink: #fff; --ok: #56c07a; --warn: #e0a84a; --danger: #e2695f; --ok-bg: rgba(86, 192, 122, .12); --warn-bg: rgba(224, 168, 74, .12); --danger-bg: rgba(226, 105, 95, .12); --ok-line: rgba(86, 192, 122, .3); --warn-line: rgba(224, 168, 74, .3); --danger-line: rgba(226, 105, 95, .3); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 20px rgba(0, 0, 0, .3); --shadow-up: 0 -2px 18px rgba(0, 0, 0, .45); } /* ---------- 4. CLARO NEUTRO — o padrao das plataformas do mercado ---------- */ [data-theme="claro"] { --brand: #000000; --brand-ink: #ffffff; --accent: #0f7a37; --accent-ink: #ffffff; --bg: #f1f1f1; --card: #ffffff; --card-2: #fafafa; --line: #d1d1d1; --line-soft: #e8e8e8; --text: #171717; --muted: #6b6b6b; --muted-2: #6B6B6B; --field-bg: #f4f4f4; --field-line: #c9c9c9; --track: #e6e6e6; --bar: #0f7a37; --img-bg: #eeeeee; --flag: #111111; --info: #3b49c4; --info-ink: #fff; --ok: #15803d; --warn: #b45309; --danger: #b91c1c; --ok-bg: #e9f7ee; --warn-bg: #fdf4e3; --danger-bg: #fdecec; --ok-line: rgba(21, 128, 61, .2); --warn-line: rgba(180, 83, 9, .2); --danger-line: rgba(185, 28, 28, .2); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .05); --shadow-up: 0 -2px 14px rgba(0, 0, 0, .10); } /* ---------- 5. AGUAS PROFUNDAS (escuro) ---------- Paleta: #36699B azul medio · #4081AE azul vivo · #D8DCD5 off-white #123F59 azul profundo · #7FC9E3 celeste Regra de uso: o celeste NAO se espalha — ele so aparece no que precisa ser clicado ou lido primeiro (botao de compra, barra, valor total). O resto e azul profundo e off-white, para a leitura ficar limpa. */ [data-theme="aguas"] { --brand: #36699B; /* cartoes de pacote */ --brand-ink: #EDF3F7; --accent: #7FC9E3; /* CTA, barra, total: o ponto de atencao */ --hot: #36699B; /* pacote destacado: mesmo azul, destaque vem do contorno */ --hot-ink: #EDF3F7; --accent-ink: #06222F; --bg: #0B2534; /* fundo: azul profundo, um tom abaixo do card */ --card: #123F59; --card-2: #17506F; --line: #235F80; --line-soft: #1B506E; --text: #E9EDE7; /* off-white da paleta */ --muted: #A8C2D0; --muted-2: #87A5B7; --field-bg: #0E3245; --field-line: #2A6689; --track: #09202D; --bar: #7FC9E3; --img-bg: #17506F; --flag: #0B2534; --info: #2F5C8A; --info-ink: #FFFFFF; --ok: #7FD79A; --warn: #EBBB6A; --danger: #F2938B; --ok-bg: rgba(127, 215, 154, .13); --warn-bg: rgba(235, 187, 106, .13); --danger-bg: rgba(242, 147, 139, .13); --ok-line: rgba(127, 215, 154, .32); --warn-line: rgba(235, 187, 106, .32); --danger-line: rgba(242, 147, 139, .32); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(4, 20, 30, .5), 0 6px 20px rgba(4, 20, 30, .38); --shadow-up: 0 -2px 18px rgba(4, 20, 30, .5); } /* ---------- 6. AGUAS CLARAS — a mesma paleta com o off-white no papel ---------- */ [data-theme="aguas-claro"] { --brand: #123F59; --brand-ink: #EDF3F7; --accent: #2F5C8A; --accent-ink: #FFFFFF; --hot: #123F59; --hot-ink: #EDF3F7; --bg: #DDE2DA; /* off-white da paleta como fundo */ --card: #FFFFFF; --card-2: #F3F6F1; --line: #C2CBC3; --line-soft: #DCE2DB; --text: #0E3046; --muted: #3F5D6E; --muted-2: #476270; --field-bg: #F6F8F4; --field-line: #C2CBC3; --track: #CBD3CB; --bar: #2F5C8A; --img-bg: #D3DAD3; --flag: #0E3046; --info: #123F59; --info-ink: #FFFFFF; --ok: #1F7A45; --warn: #97600F; --danger: #A8322B; --ok-bg: rgba(31, 122, 69, .1); --warn-bg: rgba(151, 96, 15, .1); --danger-bg: rgba(168, 50, 43, .09); --ok-line: rgba(31, 122, 69, .28); --warn-line: rgba(151, 96, 15, .28); --danger-line: rgba(168, 50, 43, .28); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(14, 48, 70, .07), 0 5px 16px rgba(14, 48, 70, .08); --shadow-up: 0 -2px 16px rgba(14, 48, 70, .13); } /* ---------- 7. VERDE / PRETO / BRANCO (padrao do mercado) ---------- Fundo claro, cartoes de pacote pretos, verde so na acao. O verde foi calibrado um tom abaixo do usual: o verde vivo com texto branco fica em 3,5:1 e nao se le direito no celular. */ [data-theme="verde"] { --brand: #0D0D0D; /* cartoes de pacote */ --brand-ink: #FFFFFF; --accent: #12834B; /* botao de compra, barra, destaque */ --accent-ink: #FFFFFF; --hot: #12834B; /* pacote destacado: verde cheio, como na referencia */ --hot-ink: #FFFFFF; --bg: #EFEFEF; --card: #FFFFFF; --card-2: #F7F7F7; --line: #D7D7D7; --line-soft: #E7E7E7; --text: #121212; --muted: #5F5F5F; --muted-2: #6A6A6A; --field-bg: #FFFFFF; /* campo de quantidade branco, como na referencia */ --field-line: #DCDCDC; --track: #E2E2E2; --bar: #12834B; --img-bg: #EAEAEA; --flag: #0D0D0D; /* selo POPULAR preto sobre o verde */ --info: #0B5E36; --info-ink: #FFFFFF; --ok: #12834B; --warn: #9A5B06; --danger: #C02020; --ok-bg: rgba(18, 131, 75, .1); --warn-bg: rgba(154, 91, 6, .1); --danger-bg: rgba(192, 32, 32, .09); --ok-line: rgba(18, 131, 75, .28); --warn-line: rgba(154, 91, 6, .28); --danger-line: rgba(192, 32, 32, .28); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 14px rgba(0, 0, 0, .05); --shadow-up: 0 -2px 14px rgba(0, 0, 0, .1); } /* ---------- VERDE ESCURO — o mesmo verde no fundo preto ---------- */ [data-theme="verde-escuro"] { --brand: #1B1B1B; --pack-line: #3A3A3A; --brand-ink: #FFFFFF; --accent: #1FA35F; /* no escuro o verde pode ser mais vivo e ainda se ler */ --accent-ink: #05160D; --accent-text: #45C57F; /* verde como TEXTO no fundo escuro */ --hot: #1FA35F; --hot-ink: #05160D; --bg: #0B0B0B; --card: #161616; --card-2: #1E1E1E; --line: #333333; --line-soft: #262626; --text: #F2F2F2; --muted: #ABABAB; --muted-2: #949494; --field-bg: #101010; --field-line: #3A3A3A; --track: #242424; --bar: #1FA35F; --img-bg: #1E1E1E; --flag: #000000; --info: #12834B; --info-ink: #FFFFFF; --ok: #5FD08C; --warn: #E2B35E; --danger: #EF8279; --ok-bg: rgba(95, 208, 140, .13); --warn-bg: rgba(226, 179, 94, .13); --danger-bg: rgba(239, 130, 121, .13); --ok-line: rgba(95, 208, 140, .32); --warn-line: rgba(226, 179, 94, .32); --danger-line: rgba(239, 130, 121, .32); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 6px 20px rgba(0, 0, 0, .4); --shadow-up: 0 -2px 18px rgba(0, 0, 0, .55); } /* ---------- CLASSICO PREMIUM CLARO — dourado e preto no papel claro ---------- */ [data-theme="premium-claro"] { --brand: #1C1611; --brand-ink: #F7EEDF; --accent: #8A6318; /* dourado escurecido: no claro o ouro puro nao se le */ --accent-ink: #FFFFFF; --hot: #8A6318; --hot-ink: #FFFFFF; --bg: #F2EEE7; --card: #FFFFFF; --card-2: #FAF6EF; --line: #DDD3C3; --line-soft: #EAE2D5; --text: #1F1913; --muted: #6B5F4E; --muted-2: #6E6152; --field-bg: #FBF8F3; --field-line: #D9CFBF; --track: #E3DACB; --bar: #8A6318; --img-bg: #EDE5D7; --flag: #1C1611; --info: #6B4A12; --info-ink: #FFFFFF; --ok: #1D7A45; --warn: #95600F; --danger: #A6322B; --ok-bg: rgba(29, 122, 69, .1); --warn-bg: rgba(149, 96, 15, .1); --danger-bg: rgba(166, 50, 43, .09); --ok-line: rgba(29, 122, 69, .28); --warn-line: rgba(149, 96, 15, .28); --danger-line: rgba(166, 50, 43, .28); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(60, 45, 20, .07), 0 5px 16px rgba(60, 45, 20, .07); --shadow-up: 0 -2px 16px rgba(60, 45, 20, .12); } /* ---------- RUSTICO ESCURO ---------- */ [data-theme="rustico-escuro"] { --brand: #462C1A; --pack-line: #5E3D25; --brand-ink: #F8F1E6; --accent: #C9803F; --accent-ink: #21130A; --accent-text: #D9955A; --hot: #C9803F; --hot-ink: #21130A; --bg: #14100C; --card: #1F1811; --card-2: #2A2018; --line: #3D3025; --line-soft: #30261C; --text: #F3EADB; --muted: #B3A18B; --muted-2: #9A8770; --field-bg: #181209; --field-line: #453629; --track: #2C2219; --bar: #C9803F; --img-bg: #2A2018; --flag: #14100C; --info: #8A5626; --info-ink: #FFFFFF; --ok: #7CC98B; --warn: #DFAE60; --danger: #E88378; --ok-bg: rgba(124, 201, 139, .13); --warn-bg: rgba(223, 174, 96, .13); --danger-bg: rgba(232, 131, 120, .13); --ok-line: rgba(124, 201, 139, .32); --warn-line: rgba(223, 174, 96, .32); --danger-line: rgba(232, 131, 120, .32); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .35); --shadow-up: 0 -2px 18px rgba(0, 0, 0, .5); } /* ---------- URBANO CLARO ---------- */ [data-theme="urbano-claro"] { --brand: #23272E; --brand-ink: #F2F5F8; --accent: #8D2438; --accent-ink: #FFFFFF; --hot: #8D2438; --hot-ink: #FFFFFF; --bg: #EDEFF2; --card: #FFFFFF; --card-2: #F6F7F9; --line: #D3D8DE; --line-soft: #E4E8ED; --text: #141922; --muted: #5C6674; --muted-2: #5E6875; --field-bg: #F8F9FB; --field-line: #CFD5DC; --track: #DFE3E8; --bar: #8D2438; --img-bg: #E6EAEF; --flag: #141922; --info: #23272E; --info-ink: #FFFFFF; --ok: #1C7A45; --warn: #92600E; --danger: #A5312A; --ok-bg: rgba(28, 122, 69, .1); --warn-bg: rgba(146, 96, 14, .1); --danger-bg: rgba(165, 49, 42, .09); --ok-line: rgba(28, 122, 69, .28); --warn-line: rgba(146, 96, 14, .28); --danger-line: rgba(165, 49, 42, .28); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(20, 25, 34, .06), 0 4px 14px rgba(20, 25, 34, .07); --shadow-up: 0 -2px 14px rgba(20, 25, 34, .12); } /* ---------- CLARO NEUTRO — versao escura ---------- */ [data-theme="claro-escuro"] { --brand: #FFFFFF; --brand-ink: #101010; --accent: #2BA55C; --accent-ink: #04140A; --accent-text: #4FC77E; --hot: #2BA55C; --hot-ink: #04140A; --bg: #0E0E0E; --card: #181818; --card-2: #202020; --line: #343434; --line-soft: #282828; --text: #F4F4F4; --muted: #ADADAD; --muted-2: #969696; --field-bg: #121212; --field-line: #3B3B3B; --track: #262626; --bar: #2BA55C; --img-bg: #202020; --flag: #000000; --info: #1F7A45; --info-ink: #FFFFFF; --ok: #5FD08C; --warn: #E2B35E; --danger: #EF8279; --ok-bg: rgba(95, 208, 140, .13); --warn-bg: rgba(226, 179, 94, .13); --danger-bg: rgba(239, 130, 121, .13); --ok-line: rgba(95, 208, 140, .32); --warn-line: rgba(226, 179, 94, .32); --danger-line: rgba(239, 130, 121, .32); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 6px 20px rgba(0, 0, 0, .4); --shadow-up: 0 -2px 18px rgba(0, 0, 0, .55); } /* ---------- botao de alternar claro/escuro ---------- */ .btn-tema { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; background: var(--card-2); border: 1px solid var(--line-soft); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; font-family: inherit; display: grid; place-items: center; padding: 0; transition: transform .14s ease, border-color .16s ease; } .btn-tema:hover { transform: translateY(-2px); border-color: var(--accent); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } b, strong { font-weight: 700; } /* numeros sempre alinhados: dinheiro nao pode "dancar" ao atualizar */ .price-tag, .num, .kpi b, .rank-qty, td, .qty-box input, .legend, .timer { font-variant-numeric: tabular-nums; } .wrap { width: 100%; max-width: 620px; margin: 0 auto; padding: 0 14px; } .wrap-wide { max-width: 1100px; } /* ---------- topo ---------- */ .topbar { position: sticky; top: 0; z-index: 40; background: var(--card); border-bottom: 1px solid var(--line); } .topbar-in { display: flex; align-items: center; gap: 12px; height: 60px; } .logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; letter-spacing: -.01em; } .logo img { height: 42px; width: auto; border-radius: 8px; } .logo span { line-height: 1.15; } .logo-mark { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 17px; } .topnav { margin-left: auto; display: flex; gap: 4px; align-items: center; } .topnav a { font-size: 12.5px; color: var(--muted); padding: 8px 10px; border-radius: 8px; font-weight: 600; } .topnav a:hover, .topnav a.on { color: var(--text); background: var(--bg); } /* ---------- blocos ---------- */ .card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 16px; margin: 12px 0; box-shadow: var(--shadow); } .card-flat { box-shadow: none; background: var(--card-2); } .card-tight { padding: 12px; } .section-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; } .section-title::before { content: ''; width: 3px; height: 15px; border-radius: 2px; background: var(--accent); flex: 0 0 3px; } .section-title small { color: var(--muted); font-weight: 500; font-size: 11.5px; margin-left: auto; } .muted { color: var(--muted); } .center { text-align: center; } .row { display: flex; align-items: center; gap: 10px; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .stack { display: grid; gap: 10px; } .hide { display: none !important; } /* ---------- botoes ---------- */ .btn { appearance: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14.5px; padding: 14px 18px; border-radius: 10px; background: var(--card-2); color: var(--text); transition: transform .08s ease, background .15s ease, border-color .15s ease; } .btn:active { transform: scale(.985); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { filter: brightness(1.15); } .btn-accent { background: var(--accent); color: var(--accent-ink); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn-ghost:hover { background: var(--card-2); } .btn-block { width: 100%; } .btn-sm { padding: 9px 13px; font-size: 12.5px; border-radius: 8px; } /* ---------- formulario ---------- */ label.field { display: block; margin-bottom: 13px; } label.field span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; } input, select, textarea { width: 100%; font-family: inherit; font-size: 16px; color: var(--text); background: var(--field-bg); border: 1px solid var(--field-line); border-radius: 9px; padding: 13px 14px; outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } input::placeholder { color: var(--muted-2); } textarea { min-height: 90px; resize: vertical; } /* ---------- progresso ---------- */ .progress { height: 24px; border-radius: 999px; background: var(--track); overflow: hidden; position: relative; } .progress > i { display: block; height: 100%; background: var(--bar); transition: width .6s cubic-bezier(.2, .8, .2, 1); } .progress > b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--text); } .legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; } .legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; } /* contadores do tipo Total / Disponiveis / Sorteados */ .counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; } .counters > div { background: var(--card); padding: 11px 8px; text-align: center; } .counters small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; } .counters b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } .counters > div:nth-child(2) b { color: var(--accent-text, var(--accent)); } /* ---------- cards de campanha ---------- */ .camp-grid { display: grid; gap: 12px; } .camp { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: block; } .camp-img { aspect-ratio: 16/9; object-fit: cover; width: 100%; background: var(--img-bg); } .camp-body { padding: 14px; } .camp h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; font-weight: 700; } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 5px 9px; border-radius: 6px; background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); text-transform: uppercase; letter-spacing: .04em; } .badge-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); } .badge-off { background: var(--card-2); color: var(--muted); border-color: var(--line); } .badge-brand { background: var(--brand); color: var(--brand-ink); border-color: transparent; } .price-tag { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--accent-text, var(--accent)); } .price-tag small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 2px; } /* ============================================================ Bloco de compra (campo de quantidade + pacotes + CTA) ============================================================ */ /* campo unico: limpar | menos | numero | mais */ .qty-field { display: flex; align-items: center; gap: 4px; background: var(--field-bg); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; margin-bottom: 10px; } .qty-field input { flex: 1; min-width: 0; text-align: center; border: 0; background: transparent; font-size: 24px; font-weight: 700; padding: 8px 4px; color: var(--text); } .qty-field input:focus { border: 0; outline: none; } .qty-field input::-webkit-outer-spin-button, .qty-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-field input[type=number] { -moz-appearance: textfield; } .qty-op { width: 40px; height: 40px; flex: 0 0 40px; border: 0; background: transparent; font-size: 26px; font-weight: 400; color: var(--text); cursor: pointer; border-radius: 10px; line-height: 1; font-family: inherit; } .qty-op:hover { background: var(--card-2); } .qty-clear { color: var(--danger); font-size: 20px; width: 34px; flex: 0 0 34px; } /* pacotes: cartoes escuros, o destacado na cor de acao */ .packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; margin-top: 14px; } .pack { position: relative; border: 1px solid var(--pack-line, transparent); cursor: pointer; font-family: inherit; background: var(--brand); color: var(--brand-ink); border-radius: 8px; padding: 11px 6px 10px; text-align: center; transition: transform .08s ease, filter .15s ease; } .pack:hover { filter: brightness(1.25); } .pack:active { transform: scale(.97); } .pack b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } .pack .sel { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 500; opacity: .85; } .pack .valor { display: block; font-size: 10.5px; opacity: .6; margin-top: 3px; } .pack.hot { background: var(--hot, var(--accent)); color: var(--hot-ink, var(--accent-ink)); box-shadow: 0 0 0 2px var(--accent); } .pack.hot .pack-flag { background: var(--accent); color: var(--accent-ink); } .pack-flag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--flag); color: var(--brand-ink); font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .03em; max-width: 96%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* CTA principal */ .cta-buy { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--accent); color: var(--accent-ink); border: 0; cursor: pointer; border-radius: 12px; padding: 14px 16px; margin-top: 10px; font-family: inherit; text-align: left; transition: transform .08s ease, filter .15s ease; } .cta-buy:hover { filter: brightness(1.06); } .cta-buy:active { transform: scale(.99); } .cta-arrow { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; font-size: 17px; line-height: 1; } .cta-txt { flex: 1; min-width: 0; } .cta-txt b { display: block; font-size: 17px; font-weight: 700; letter-spacing: .01em; line-height: 1.2; } .cta-txt span { display: block; font-size: 11.5px; opacity: .9; margin-top: 2px; font-weight: 500; } .cta-vals { text-align: right; white-space: nowrap; } .cta-vals small { display: block; font-size: 11px; opacity: .9; font-weight: 500; } .cta-vals b { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } /* linha branca do tipo "Descricao/Regulamento" */ .row-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 15px 16px; margin-top: 8px; cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); box-shadow: var(--shadow); } .row-btn:hover { background: var(--card-2); } .row-btn .chev { transition: transform .2s ease; display: inline-block; } .row-btn.open .chev { transform: rotate(180deg); } /* linha dos bilhetes premiados com o contador a direita */ .prize-head { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; margin-top: 8px; cursor: pointer; font-family: inherit; box-shadow: var(--shadow); text-align: left; } .prize-head .ico { font-size: 24px; flex: 0 0 auto; } .prize-head .txt { flex: 1; min-width: 0; } .prize-head .txt b { display: block; font-size: 14.5px; font-weight: 700; } .prize-head .txt span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; } .prize-total { background: var(--info); color: var(--info-ink); border-radius: 9px; padding: 9px 14px; font-size: 13.5px; font-weight: 700; white-space: nowrap; } /* ---------- numeros / bilhetes premiados ---------- */ .nums { display: flex; flex-wrap: wrap; gap: 6px; } .num { font-weight: 700; font-size: 12.5px; padding: 7px 10px; border-radius: 7px; background: var(--card-2); border: 1px solid var(--line-soft); color: var(--text); } .num-win { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); } .prize-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; } .prize-row:last-child { border-bottom: 0; } .prize-row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prize-row .val { font-weight: 700; white-space: nowrap; } .prize-row.taken .who { color: var(--ok); font-weight: 600; } /* ---------- ranking ---------- */ .rank-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; } .rank-row:last-child { border-bottom: 0; } .rank-pos { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 7px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line-soft); font-size: 11.5px; font-weight: 700; } .rank-row:nth-child(1) .rank-pos { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .rank-row:nth-child(2) .rank-pos { background: var(--card-2); } .rank-row:nth-child(3) .rank-pos { background: var(--line); } .rank-qty { margin-left: auto; font-weight: 700; } /* ---------- barra fixa de compra ---------- */ .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--card); border-top: 2px solid var(--accent); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-up); } .buybar-in { max-width: 620px; margin: 0 auto; display: flex; align-items: center; gap: 12px; } .buybar .btn { flex: 1; } .buybar .totais { text-align: right; line-height: 1.3; } .buybar .totais small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; } .buybar .totais b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .buybar .sub { font-size: 10.5px; color: var(--muted); text-align: center; margin: 6px 0 0; font-weight: 600; } .pad-bottom { padding-bottom: 120px; } /* ---------- modal ---------- */ .modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; background: rgba(0, 0, 0, .45); } .modal-card { width: 100%; max-width: 620px; background: var(--card); border-radius: 16px 16px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 92vh; overflow-y: auto; animation: up .22s cubic-bezier(.2, .9, .3, 1); } @keyframes up { from { transform: translateY(28px); opacity: .5; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .modal-card { animation: none; } } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; } .x { background: none; border: 0; color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1; padding: 0 4px; } /* porta de idade: centralizada e sem saida, diferente das gavetas de baixo */ .modal-center { place-items: center; background: rgba(0, 0, 0, .72); padding: 18px; } .modal-card-center { border-radius: 16px; max-width: 390px; padding: 26px 22px; animation: pop .2s cubic-bezier(.2, .9, .3, 1); } @keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .modal-card-center { animation: none; } } .age-seal-lg { width: 62px; height: 62px; font-size: 20px; border-width: 3px; margin: 0 auto; } /* ---------- pix ---------- */ .pix-qr { background: #fff; padding: 10px; border-radius: 12px; width: 228px; margin: 0 auto; border: 1px solid var(--line-soft); } .pix-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; word-break: break-all; background: var(--card-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 11px; max-height: 80px; overflow-y: auto; color: var(--muted); } .timer { font-weight: 800; font-size: 16px; color: var(--warn); } .dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; animation: pulse 1.4s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } } /* ---------- avisos ---------- */ .alert { border-radius: 9px; padding: 12px 14px; font-size: 13px; font-weight: 500; border: 1px solid; margin: 10px 0; line-height: 1.5; } .alert-err { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); } .alert-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); } .alert-info { background: var(--card-2); border-color: var(--line-soft); color: var(--muted); } /* ---------- selo de idade + rodape legal ---------- */ .age-seal { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 2px solid var(--text); border-radius: 50%; font-weight: 800; font-size: 13px; } .legal { margin: 22px 0 0; padding: 16px 0 30px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--muted-2); line-height: 1.65; text-align: justify; } .legal .row-seal { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; text-align: left; } .processo { display: inline-block; font-family: ui-monospace, monospace; font-size: 11px; font-weight: 600; background: var(--card-2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 4px 9px; color: var(--muted); margin-top: 8px; } .foot { margin: 24px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); line-height: 1.9; text-align: center; } .foot a { font-weight: 600; } .skel { background: linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: var(--radius-lg); } @keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (min-width: 720px) { .camp-grid { grid-template-columns: repeat(2, 1fr); } .wrap-wide .camp-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ Efeitos — so no que e clicavel, para guiar o dedo/mouse. Quem prefere menos movimento (ajuste do proprio aparelho) recebe a versao sem animacao, no fim do bloco. ============================================================ */ /* cartoes de pacote: sobem e acendem a borda da cor de acao */ .pack { transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .16s ease, filter .16s ease; } .pack:hover { transform: translateY(-3px); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 0 2px var(--accent); filter: none; } .pack:active { transform: translateY(-1px) scale(.98); } .pack.hot:hover { box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 2px var(--accent); } /* botao principal: sobe, ganha halo e a seta anda para a direita */ .cta-buy { transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, filter .16s ease; } .cta-buy:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 42%, transparent); filter: brightness(1.07); } .cta-buy:active { transform: translateY(0) scale(.995); } .cta-arrow { transition: transform .2s cubic-bezier(.2, .8, .2, 1); } .cta-buy:hover .cta-arrow { transform: translateX(4px); } /* cartao de campanha: eleva e a foto respira */ .camp { transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, border-color .2s ease; } .camp:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow); } .camp-img { transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .camp:hover .camp-img { transform: scale(1.04); } /* linhas que abrem conteudo */ .row-btn, .prize-head { transition: transform .14s ease, border-color .16s ease, box-shadow .16s ease; } .row-btn:hover, .prize-head:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 16%, transparent); } .prize-total { transition: transform .16s ease; } .prize-head:hover .prize-total { transform: scale(1.04); } /* botoes comuns */ .btn-primary:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent); } .btn-accent:hover, .btn:hover { filter: brightness(1.06); } .qty-op { transition: background .14s ease, transform .12s ease; } .qty-op:active { transform: scale(.9); } /* ranking reage ao passar o mouse */ .rank-row { transition: background .15s ease; border-radius: 8px; } .rank-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } /* barra de progresso com um brilho lento, so para dar vida ao numero */ .progress > i { position: relative; overflow: hidden; } .progress > i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%); transform: translateX(-100%); animation: brilho 3.2s ease-in-out infinite; } @keyframes brilho { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(220%); } } /* selo POPULAR pulsa de leve para puxar o olho */ .pack-flag { animation: selo 2.4s ease-in-out infinite; } @keyframes selo { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } } /* navegacao por teclado sempre visivel */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* aparelho configurado para menos movimento: mantem a cor, tira a animacao */ @media (prefers-reduced-motion: reduce) { .pack, .cta-buy, .camp, .camp-img, .row-btn, .prize-head, .cta-arrow, .prize-total, .qty-op { transition: none !important; } .pack:hover, .cta-buy:hover, .camp:hover, .row-btn:hover, .prize-head:hover { transform: none; } .camp:hover .camp-img, .cta-buy:hover .cta-arrow, .prize-head:hover .prize-total { transform: none; } .progress > i::after, .pack-flag { animation: none; } } /* ---------- pulso do botao de compra ---------- Chama o olho sem travar o hover: ao passar o mouse a animacao pausa e o botao volta a responder normalmente. */ .cta-buy, .buybar .btn-primary { animation: pulso-compra 2.2s cubic-bezier(.4, 0, .6, 1) infinite; } .cta-buy:hover, .buybar .btn-primary:hover { animation-play-state: paused; } @keyframes pulso-compra { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); transform: scale(1); } 60% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 0%, transparent); transform: scale(1.018); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .cta-buy, .buybar .btn-primary { animation: none; } } /* ---------- topo em tela estreita ---------- Quando a marca tem logo (que ja traz o nome escrito), o texto ao lado some no celular: senao ele quebra em duas linhas e briga com o menu. */ @media (max-width: 560px) { .logo img + span { display: none; } .logo img { height: 38px; } .topnav a { padding: 7px 8px; font-size: 12px; } .topbar-in { gap: 8px; } }