/* cookies.css — a BARRA DE CONSENTIMENTO da OFFCODE (handoff do dono, * `design_handoff_cookies`, 12/09/2026). Três estados mutuamente exclusivos, * um por vez: barra (1ª visita) → preferências → chip de reabrir. * * A mecânica está em `_local/cookies.js`; aqui só o desenho. * * ## Metade das regras mora em `[dir]` * * A captura reseta `border/margin/padding` num bloco `[dir] div, [dir] p, …` * de especificidade (0,1,1), que vence classe sozinha (0,1,0). Por isso TODO * seletor daqui nasce com `[dir]` na frente — a mesma regra do `deposit.css`. * Sem isso a barra desenha, o CSS "existe", e as caixas saem coladas. * * ## Sem `rem` * * A raiz do espelho é `13.33vw` (~240px numa janela de 1800): `rem` escrito à * mão explode o layout sem erro nenhum. `_tools/checa_css.py` reprova o build. * * ## z-index: 8950, não 9000 * * 🔴 O handoff pede 9000 "mas ABAIXO de modais críticos de transação". O véu * do popup de saque/depósito (`.oc-dep-veu`, `deposito.css`) é 9000 TAMBÉM — * e entre iguais quem vem depois no DOM pinta por cima. A barra é o último * filho do ``: em 9000 ela cobriria a confirmação de um saque. 8950 * mantém a barra acima de tudo o que é página (abas móveis = 900, barra do * topo = 901) e abaixo de todo modal de dinheiro (9000, 9100, 9999, 99999). * * ## O pé é variável * * `--ck-pe` é a altura da barra de ABAS do móvel, medida em runtime pelo * `cookies.js`. Sem isso a folha cobriria as cinco abas na árvore `/m/`. */ @font-face { font-family: 'Space Grotesk'; src: url('/_local/fonts/space-grotesk-400.cbee7234.woff2') format('woff2'); font-weight: 300 700; font-display: swap; } :root { --ck-surface: #080808; --ck-card: #070707; --ck-card-on: #0B0906; --ck-line: #1E1E1E; --ck-line-soft: #141414; --ck-line-row: #101010; --ck-ink: #FFFFFF; --ck-ink-2: #C8CCD2; --ck-ink-3: #A4AAB2; --ck-ink-4: #8A9098; --ck-ink-5: #6E7480; --ck-ink-6: #5A5F67; --ck-ink-7: #4A4E55; --ck-accent: #FFA51F; --ck-accent-soft: #FFC24A; --ck-accent-deep: #C9861A; --ck-font: 'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif; --ck-slant: -23.5deg; --ck-pe: 0px; } /* ---------- casca ---------- */ [dir] .ck { position: fixed; left: 0; right: 0; bottom: var(--ck-pe, 0px); z-index: 8950; border: 0; border-top: 1px solid var(--ck-line); margin: 0; padding: 0; background: var(--ck-surface); box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.7); color: var(--ck-ink); font-family: var(--ck-font); animation: ckRise 0.22s ease; } [dir] .ck *, [dir] .ck *::before, [dir] .ck *::after { box-sizing: border-box; } @keyframes ckRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { [dir] .ck, [dir] .ck-chip { animation: none; } } /* scrim que descola a barra do conteúdo da página */ [dir] .ck::before { content: ''; position: absolute; left: 0; right: 0; top: -90px; height: 90px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8)); pointer-events: none; } /* hairline laranja de entrada — assinatura OFFCODE */ [dir] .ck::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 165, 31, 0.75) 42%, transparent); } /* tick angulado */ [dir] .ck__tick { width: 4px; height: 15px; flex: none; margin: 0; padding: 0; border: 0; background: var(--ck-accent); transform: skewX(var(--ck-slant)); } /* ---------- estado 1 · barra ---------- */ [dir] .ck__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px 36px; margin: 0; padding: 24px 28px; border: 0; flex-wrap: wrap; } [dir] .ck__copy { flex: 1 1 360px; min-width: 0; max-width: 620px; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; } [dir] .ck__eyebrow-row { display: flex; align-items: center; gap: 11px; margin: 0; padding: 0; border: 0; } [dir] .ck__eyebrow { margin: 0; padding: 0; border: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ck-accent-deep); } [dir] .ck__text { margin: 0; padding: 0 0 0 15px; border: 0; font-size: 12.5px; line-height: 1.6; color: var(--ck-ink-3); text-wrap: pretty; } [dir] .ck__text a { color: var(--ck-accent); text-decoration: none; } [dir] .ck__text a:hover { color: var(--ck-accent-soft); } /* o grupo fica ancorado à direita mesmo quando a linha quebra */ [dir] .ck__actions { display: flex; align-items: center; gap: 10px; margin: 0 0 0 auto; padding: 0; border: 0; flex: none; } /* ---------- botões do sistema (corte de 23.5°) ---------- */ /* * O deslocamento é altura × tan(23.5°) ≈ altura × 0.4348 — 40px → 17.4px, * 44px → 19.1px, 46px → 20px. O fantasma é o MESMO corte com moldura * hairline: o `__fill` em `inset: 1px` recalcula para a altura interna * (altura − 2). As medidas moram em variáveis porque o móvel troca a altura * dos mesmos botões — duplicar o bloco inteiro por tamanho é o que faz um * dos dois ficar para trás na próxima mudança. */ [dir] .ck-btn { --ck-h: 40px; --ck-skew: 17.4px; --ck-fill: 16.5px; --ck-gloss: 40.5px; --ck-edge: 19px; --ck-cell: 51px; --ck-fs: 11.5px; position: relative; display: block; height: var(--ck-h); margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; font-family: inherit; clip-path: polygon(var(--ck-skew) 0, 100% 0, calc(100% - var(--ck-skew)) 100%, 0 100%); transition: filter 0.15s ease, background 0.15s ease, transform 0.1s ease; } [dir] .ck-btn--46 { --ck-h: 46px; --ck-skew: 20px; --ck-fill: 19.1px; --ck-gloss: 46.5px; --ck-edge: 22px; --ck-cell: 58.6px; --ck-fs: 12px; } [dir] .ck-btn--44 { --ck-h: 44px; --ck-skew: 19.1px; --ck-fill: 18.3px; } /* primário */ [dir] .ck-btn--primary { display: flex; align-items: stretch; min-width: 158px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0) 58%) top/100% 1px no-repeat, linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.08) 58%) bottom/100% 1px no-repeat, linear-gradient(90deg in oklab, #FFCB63 0%, #FFA51F 15%, #C87A0A 58%, #8C5205 78%, #4A2C02 100%); box-shadow: inset 0 -11.2px 14.5px -11.2px rgba(0, 0, 0, 0.3); } [dir] .ck-btn--primary:hover { filter: brightness(1.05); } [dir] .ck-btn--primary:active { filter: brightness(0.96); transform: scale(0.994); } /* fio de luz sobre a diagonal de entrada */ [dir] .ck-btn__gloss, [dir] .ck-btn__edge { position: absolute; inset: 0 auto 0 0; margin: 0; padding: 0; border: 0; clip-path: inherit; pointer-events: none; } [dir] .ck-btn__gloss { width: var(--ck-gloss); background: linear-gradient(90deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0)); } [dir] .ck-btn__edge { width: var(--ck-edge); background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14)); } /* * 🔑 Rótulo e célula em FLUXO, não em `inset` fixo como na referência: o * rótulo é traduzido para sete idiomas (`НАСТРОИТЬ`, `自定义`, `कस्टमाइज़ करें`) e * caixa de largura cravada corta texto em silêncio. A célula recupera a * geometria exata da referência com a margem negativa: ela OCUPA * `cell − skew` (33.6px em 40px de altura, que é o `inset` da referência) e * PINTA `cell` (51px), passando por cima da diagonal do rótulo. */ [dir] .ck-btn__label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; font-size: var(--ck-fs); font-weight: 600; line-height: 1; letter-spacing: 0.05em; color: var(--ck-ink); } /* célula escura do ícone, à direita */ [dir] .ck-btn__cell { flex: none; width: var(--ck-cell); height: 100%; display: flex; align-items: center; justify-content: center; margin: 0 0 0 calc(-1 * var(--ck-skew)); padding: 0; border: 0; clip-path: inherit; background: linear-gradient(90deg in oklab, rgba(255, 228, 178, 0.17) 0 1.5px, rgba(70, 41, 2, 0.52) 1.5px, rgba(24, 12, 0, 0.92)); } [dir] .ck-btn__cell svg { width: 13px; height: 13px; display: block; } [dir] .ck-btn--46 .ck-btn__cell svg { width: 14px; height: 14px; } /* fantasma — mesmo corte, moldura hairline */ [dir] .ck-btn--ghost { min-width: 118px; background: #2A2A2A; } [dir] .ck-btn--ghost:hover { background: #4A4E55; } [dir] .ck-btn__fill { position: absolute; inset: 1px; margin: 0; padding: 0; border: 0; clip-path: polygon(var(--ck-fill) 0, 100% 0, calc(100% - var(--ck-fill)) 100%, 0 100%); background: var(--ck-surface); pointer-events: none; } [dir] .ck-btn__ghost-label { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; padding: 0 calc(var(--ck-skew) + 6px); border: 0; font-size: var(--ck-fs); font-weight: 500; line-height: 1; letter-spacing: 0.05em; color: var(--ck-ink-2); } /* foco visível em todo controle (o teclado é caminho de primeira classe) */ [dir] .ck-btn:focus-visible, [dir] .ck-switch:focus-visible, [dir] .ck__back:focus-visible, [dir] .ck-chip:focus-visible, [dir] .ck__text a:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: 2px; } /* ---------- estado 2 · preferências ---------- */ [dir] .ck__panel { margin: 0; padding: 22px 28px 20px; border: 0; } [dir] .ck__panel-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 0; border: 0; } [dir] .ck__panel-head .ck__tick { height: 18px; } [dir] .ck__panel-title { margin: 0; padding: 0; border: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ck-ink-2); } [dir] .ck__panel-rule { flex: 1; height: 1px; margin: 0; padding: 0; border: 0; background: var(--ck-line-soft); } [dir] .ck__back { margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 11px; color: var(--ck-ink-6); transition: color 0.15s ease; } [dir] .ck__back:hover { color: var(--ck-ink-2); } [dir] .ck__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; border: 0; } /* * 🔑 Grade, não pilha: o cartão tem a MESMA marcação nas duas larguras e só * troca de mapa. No desktop o interruptor fica na linha do nome; no móvel ele * fica à direita das DUAS linhas (nome + descrição), como na referência. * Marcação diferente por largura significaria dois estados de interruptor * para manter em acordo — e um deles ficaria para trás. */ [dir] .ck-cat { position: relative; overflow: hidden; margin: 0; padding: 16px 16px 15px; border: 1px solid #181818; border-radius: 12px; background: var(--ck-card); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nome sw' 'desc desc' 'estado estado'; align-items: center; gap: 9px 12px; min-width: 0; transition: border-color 0.16s ease, background 0.16s ease; } /* hairline de entrada quando a categoria está ativa */ [dir] .ck-cat.is-on { border-color: rgba(255, 165, 31, 0.3); background: var(--ck-card-on); } [dir] .ck-cat.is-on::before, [dir] .ck-cat.is-locked::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 165, 31, 0.55) 45%, transparent); } [dir] .ck-cat__name { grid-area: nome; font-size: 12px; font-weight: 600; letter-spacing: -0.012em; color: var(--ck-ink); } [dir] .ck-cat__desc { grid-area: desc; margin: 0; padding: 0; border: 0; font-size: 10.5px; line-height: 1.6; color: var(--ck-ink-5); text-wrap: pretty; } [dir] .ck-cat__state { grid-area: estado; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ck-ink-7); } [dir] .ck-cat.is-on .ck-cat__state, [dir] .ck-cat.is-locked .ck-cat__state { color: var(--ck-accent-deep); } /* interruptor */ [dir] .ck-switch { grid-area: sw; position: relative; width: 38px; height: 22px; flex: none; margin: 0; padding: 0; border: 1px solid #262626; border-radius: 11px; background: #151515; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease; } [dir] .ck-switch__knob { position: absolute; top: 2px; left: 3px; width: 14px; height: 14px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ck-ink-7); transition: left 0.16s ease, background 0.16s ease; } [dir] .ck-switch[aria-checked='true'] { background: var(--ck-accent); border-color: var(--ck-accent); } [dir] .ck-switch[aria-checked='true'] .ck-switch__knob { left: 18px; background: #1A1000; } /* necessários: ligado e imutável */ [dir] .ck-switch[aria-disabled='true'] { background: rgba(255, 165, 31, 0.22); border-color: rgba(255, 165, 31, 0.45); cursor: not-allowed; } [dir] .ck-switch[aria-disabled='true'] .ck-switch__knob { left: 18px; background: var(--ck-accent-soft); } [dir] .ck__panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; row-gap: 12px; margin: 0; padding: 16px 0 0; border: 0; border-top: 1px solid #111111; } [dir] .ck__panel-note { margin: 0; padding: 0; border: 0; font-size: 10.5px; line-height: 1.6; color: var(--ck-ink-6); text-wrap: pretty; } [dir] .ck__panel-actions { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; flex: none; } [dir] .ck__panel-actions .ck-btn--primary { min-width: 186px; } [dir] .ck__panel-actions .ck-btn--ghost { min-width: 150px; } [dir] .ck__actions .ck-btn--pers { min-width: 134px; } /* ---------- estado 3 · respondido (chip) ---------- */ [dir] .ck-chip { position: fixed; left: 22px; bottom: calc(20px + var(--ck-pe, 0px)); z-index: 8900; display: flex; align-items: center; gap: 9px; height: 38px; margin: 0; padding: 0 15px; border: 1px solid var(--ck-line); border-radius: 19px; background: var(--ck-surface); cursor: pointer; font-family: var(--ck-font); font-size: 11px; font-weight: 500; color: var(--ck-ink-4); animation: ckRise 0.22s ease; transition: border-color 0.15s ease, color 0.15s ease; } [dir] .ck-chip:hover { border-color: var(--ck-accent); color: var(--ck-accent-soft); } [dir] .ck-chip svg { width: 14px; height: 14px; display: block; flex: none; } /* A última linha da página não fica embaixo da barra enquanto ela estiver no * ar. Só o rodapé recebe a folga: as telas de negociação e a carteira são * grade de altura de tela (`100dvh`) e um `padding-bottom` no `` as * empurraria para fora — foi assim que a carteira ganhou a faixa preta de * 06/09. Quem não tem rodapé continua sem folga, de propósito. */ [dir] body.ck-com-barra .oc-rod { padding-bottom: var(--ck-alt, 0px); } /* ============================================================ MOBILE (≤ 560px) — folha que sobe da base ============================================================ */ @media (max-width: 560px) { [dir] .ck { border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 -26px 50px rgba(0, 0, 0, 0.7); } [dir] .ck::before { top: -80px; height: 80px; } /* barra */ [dir] .ck__bar { display: flex; flex-direction: column; align-items: stretch; gap: 15px; padding: 22px 20px 24px; } /* 🔴 `flex: 1 1 360px` do desktop vira ALTURA quando a barra empilha: a * caixa do texto reservava 360px de altura e abria um vão preto entre o * texto e os botões (medido em 390px: barra de 1.000px, as abas cobertas). * `flex-basis` segue o eixo PRINCIPAL — trocar `row` por `column` troca o * significado da mesma declaração, sem erro nenhum. */ [dir] .ck__copy { flex: 0 0 auto; max-width: none; } [dir] .ck__text { padding-left: 0; font-size: 12px; } /* o primário vem SOZINHO, em largura total, acima do par secundário — e a * ordem do par é `Rejeitar | Personalizar`, como na referência. Recusar não * fica atrás de "Personalizar" em lugar nenhum. */ [dir] .ck__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-left: 0; } [dir] .ck__actions .ck-btn--primary { --ck-h: 46px; --ck-skew: 20px; --ck-fill: 19.1px; --ck-gloss: 46.5px; --ck-edge: 22px; --ck-cell: 58.6px; --ck-fs: 12px; order: -1; grid-column: 1 / -1; min-width: 0; box-shadow: inset 0 -12.8px 16.6px -12.8px rgba(0, 0, 0, 0.3); } [dir] .ck__actions .ck-btn--ghost { --ck-h: 44px; --ck-skew: 19.1px; --ck-fill: 18.3px; min-width: 0; } [dir] .ck__actions .ck-btn--rej { order: 1; } [dir] .ck__actions .ck-btn--pers { order: 2; min-width: 0; } /* preferências viram lista vertical */ [dir] .ck__panel { padding: 18px 20px 22px; } [dir] .ck__panel-head { gap: 11px; margin-bottom: 14px; } [dir] .ck__panel-head .ck__tick { height: 16px; } [dir] .ck__panel-title { font-size: 11px; } [dir] .ck__back { font-size: 10.5px; } [dir] .ck__cats { display: block; margin-bottom: 16px; } /* o interruptor passa a ocupar as DUAS linhas, à direita — o mapa muda, a * marcação não */ [dir] .ck-cat { grid-template-areas: 'nome sw' 'desc sw'; align-items: start; gap: 5px 13px; padding: 13px 0; border: 0; border-top: 1px solid var(--ck-line-row); border-radius: 0; background: transparent; } [dir] .ck-cat.is-on { background: transparent; } [dir] .ck-cat.is-on::before, [dir] .ck-cat.is-locked::before { display: none; } [dir] .ck-cat__state { display: none; } /* alvo de toque maior */ [dir] .ck-switch { align-self: start; width: 44px; height: 26px; border-radius: 13px; margin-top: 2px; } [dir] .ck-switch__knob { top: 3px; width: 18px; height: 18px; } [dir] .ck-switch[aria-checked='true'] .ck-switch__knob, [dir] .ck-switch[aria-disabled='true'] .ck-switch__knob { left: 21px; } [dir] .ck__panel-foot { flex-direction: column; align-items: stretch; gap: 10px; border-top: 0; padding-top: 0; } [dir] .ck__panel-note { display: none; } /* 🔴 `align-items: stretch` explícito: o bloco de desktop centraliza, e sem * esta linha os dois botões da folha saíam com a largura do texto, boiando * no meio da tela em vez de ocuparem a largura toda. */ [dir] .ck__panel-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } /* salvar em cima, só essenciais embaixo — os dois em 46px e largura total */ [dir] .ck__panel-actions .ck-btn { --ck-h: 46px; --ck-skew: 20px; --ck-fill: 19.1px; --ck-gloss: 46.5px; --ck-edge: 22px; --ck-cell: 58.6px; --ck-fs: 12px; min-width: 0; } [dir] .ck__panel-actions .ck-btn--primary { order: -1; box-shadow: inset 0 -12.8px 16.6px -12.8px rgba(0, 0, 0, 0.3); } [dir] .ck-chip { left: 20px; height: 40px; border-radius: 20px; } }