passava por cima e engolia o borrão, sobrando só a linha animada da borda. Virando contexto de empilhamento próprio, o main pinta o fundo dele primeiro e o halo por cima. */ main { overflow: auto; min-width: 0; background: var(--l0); isolation: isolate } /* sem teto de largura: a tela é do dono, não de uma coluna de 1180 px. O respiro vem do padding, que cresce junto com o monitor. Só o texto corrido continua limitado, senão a linha fica ilegível. */ .page { padding: 34px var(--pad) 60px; animation: reveal .5s var(--ease) both } .page > * { animation: reveal .5s var(--ease) both } .page > *:nth-child(2) { animation-delay: .06s } .page > *:nth-child(3) { animation-delay: .12s } @keyframes reveal { from { opacity: 0; transform: translateY(6px) } } .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap } .head p { margin: 6px 0 0; color: var(--mute); max-width: 74ch } .search { position: relative; max-width: 460px; margin-bottom: 16px } .search .field { padding-left: 42px; border-radius: var(--pill) } .search svg { position: absolute; left: 15px; top: 13px; color: var(--mute) } .grid { display: grid; gap: 14px } .g3 { grid-template-columns: 1.6fr 1fr } .stat { padding: 26px } .stat .l { color: var(--mute); font-size: 13px } .stat .v { font-family: var(--display); font-variation-settings: "opsz" 96, "SOFT" 50; font-weight: 500; font-size: 44px; letter-spacing: -.02em; line-height: 1.05; margin: 4px 0 } .stat .b { font-family: var(--display); font-variation-settings: "opsz" 36, "SOFT" 50; font-weight: 500; font-size: 17px } /* gaveta */ .scrim { position: fixed; inset: 0; background: var(--scrim); display: flex; justify-content: flex-end; z-index: 40; animation: fade .2s } @keyframes fade { from { opacity: 0 } } .drawer { width: 100%; max-width: 480px; height: 100%; border-radius: 28px 0 0 28px; background: var(--l1); display: flex; flex-direction: column; animation: slide .3s var(--ease) } @keyframes slide { from { transform: translateX(40px); opacity: 0 } } .drawer header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 12px } .drawer .body { padding: 12px 28px 24px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 14px } .drawer footer { padding: 16px 28px 24px; display: flex; justify-content: flex-end; gap: 8px } label.f { display: block } label.f span { display: block; font-weight: 500; color: var(--mute); margin-bottom: 6px; font-size: 12.5px } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px } .node { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 12px } .node:hover { background: var(--l2) } .node .acts { opacity: 0; margin-left: auto; display: flex } .node:hover .acts { opacity: 1 } .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--l0); padding: 10px 18px; border-radius: var(--pill); font-weight: 600; z-index: 60; animation: slideup .25s var(--ease) } .toast.err { background: var(--berry); color: var(--onSemantic) } @keyframes slideup { from { transform: translate(-50%, 10px); opacity: 0 } } /* OSCAR */ .chat { display: flex; flex-direction: column; height: 100vh } .msgs { flex: 1; overflow: auto; padding: 40px; display: flex; flex-direction: column; gap: 14px; max-width: 880px; width: 100%; margin: 0 auto } .msg { max-width: 82%; padding: 14px 18px; border-radius: 20px; white-space: pre-wrap; animation: reveal .3s var(--ease); line-height: 1.55 } .msg.u { align-self: flex-end; background: var(--l3); color: var(--ink); border-bottom-right-radius: 6px } .msg.a { align-self: flex-start; border-bottom-left-radius: 6px } .msg .acts { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--l3); font-size: 12px; color: var(--mute); font-family: ui-monospace, monospace } .compose { padding: 12px 40px 28px } .compose .in { display: flex; gap: 8px; max-width: 880px; margin: 0 auto; padding: 8px 8px 8px 20px; border-radius: 28px; background: var(--l2) } .compose .in .field { background: transparent; box-shadow: none; padding: 8px 0 } .compose .in .field:focus, .compose .in .field:hover { background: transparent } .sugg { display: flex; gap: 6px; flex-wrap: wrap; max-width: 880px; margin: 0 auto 12px } .sugg button { background: transparent; border: 1px solid var(--l3); border-radius: var(--pill); padding: 6px 12px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--ink2) } .sugg button:hover { background: var(--l2); color: var(--ink) } /* gráficos */ .chart { width: 100%; height: 190px; display: block; overflow: visible } .chart .area { fill: url(#areaGrad); opacity: 0; animation: fade-in .9s .6s var(--ease) forwards } .chart .line { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.4s var(--ease) forwards } .chart .dot { fill: var(--ink); stroke: var(--l2); stroke-width: 3; opacity: 0; transition: opacity .15s } .chart .col:hover .dot { opacity: 1 } .chart .lbl { fill: var(--mute); font-size: 10px; font-family: var(--body) } .chart .tip { fill: var(--ink); font-size: 11px; font-weight: 600; opacity: 0; transition: opacity .15s; font-family: var(--body) } .chart .col:hover .tip { opacity: 1 } .chart .col rect { fill: transparent } .chart .col:hover rect { fill: var(--zebra) } @keyframes draw { to { stroke-dashoffset: 0 } } @keyframes fade-in { to { opacity: 1 } } .bar { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 8px 0 } .bar div { flex: 1; background: var(--l4); border-radius: 6px 6px 2px 2px; min-height: 2px; position: relative; transform-origin: bottom; animation: grow .7s var(--ease) both; animation-delay: calc(.03s * var(--i, 0)) } .bar div:hover { background: var(--ink) } @keyframes grow { from { transform: scaleY(0) } } .bar div b { position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--mute); font-weight: 500; margin-bottom: 3px } .bar div s { position: absolute; top: 100%; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--mute); text-decoration: none; margin-top: 5px; white-space: nowrap; overflow: hidden } /* ── marca: o mesmo bloco (desenho + nome) na entrada, no caixa e na loja ── */ /* Uma linha só, com o desenho e o nome centrados: um no outro e no espaço que sobrar. O precisa de caixa própria (grid) — enquanto era inline, o logo ficava pendurado na linha de base do texto, torto ao lado do nome, e o tamanho em porcentagem da tela de Aparência não tinha onde pegar. */ .brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink) } .brand > i { width: 30px; height: 30px; border-radius: 10px; background: var(--ai); color: var(--onAcc); display: grid; place-items: center; flex-shrink: 0 } .brand > i svg { width: 17px; height: 17px } /* ── PDV ── */ header.top { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; flex-shrink: 0 } header.top .brand { padding: 0 } header.top .brand > i { width: 32px; height: 32px; border-radius: 11px } .pos { flex: 1; display: grid; grid-template-columns: 1fr minmax(360px, 420px); min-height: 0; gap: 12px; padding: 0 12px 12px } /* mesmo motivo do isolate do
(linha acima): qualquer painel opaco ENTRE o cartão e o contexto de empilhamento engole o halo, porque o ::before de z-index:-1 vai parar atrás do fundo do painel. Aqui o contexto era o
, então o brilho das pastilhas de produto era pintado debaixo do fundo do .left e só sobrava a borda animada. Denunciava o problema o item esgotado, o único que acendia: .tile.dim tem opacity < 1, e opacity < 1 já cria contexto de empilhamento sozinho. */ .left { display: flex; flex-direction: column; min-height: 0; background: var(--l1); border-radius: var(--r); isolation: isolate } .left .search { margin: 14px 16px 6px; max-width: none } .left .search .field { background: var(--l2); font-size: 16px; padding: 13px 44px 13px 44px } .left .search svg { top: 15px } .left .search .kbd { position: absolute; right: 14px; top: 15px } .tabs { display: flex; gap: 4px; padding: 4px 16px 10px; overflow: auto } .pgrid { flex: 1; overflow: auto; padding: 0 16px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; align-content: start } .tile { padding: 16px; text-align: left; cursor: pointer; border-radius: 18px; background: var(--cardBg2); transition: background .15s, transform .1s var(--ease); display: flex; flex-direction: column; gap: 10px; min-height: 108px } .tile:hover { background: var(--l3) } .tile:active { transform: scale(.97) } .tile.dim { opacity: .35; cursor: not-allowed } .tile .n { font-weight: 500; line-height: 1.25; color: var(--ink2) } .tile .p { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-variation-settings: "opsz" 36, "SOFT" 50; font-weight: 500; font-size: 19px } .tile .p small { font-family: var(--body); font-weight: 500; font-size: 12px; color: var(--mute) } aside.cart { display: flex; flex-direction: column; min-height: 0; background: var(--l1); border-radius: var(--r) } .cust { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px } .lines { flex: 1; overflow: auto; padding: 0 8px } .line { display: flex; align-items: center; gap: 8px; padding: 12px 10px; border-radius: 14px; cursor: default; transition: background .15s } .line.sel { border: 1.5px solid transparent; background: linear-gradient(var(--l3), var(--l3)) padding-box, conic-gradient(from var(--spin), var(--l4) 0 55%, var(--acc1) 72%, var(--acc2) 84%, var(--l4) 96% 100%) border-box; animation: spin var(--spinDur) linear infinite } .line:not(.sel) { border: 1.5px solid transparent } .line.new { animation: pop .5s } @keyframes pop { from { background: var(--accSoft) } } .line .t { flex: 1; min-width: 0 } .line .t b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .line .t small { color: var(--mute) } .qty { display: flex; align-items: center; background: var(--l3); border-radius: var(--pill) } .qty button { background: none; border: 0; padding: 5px 10px; cursor: pointer; color: var(--ink2) } .qty span { width: 26px; text-align: center; font-weight: 600 } .sum { padding: 14px 16px 16px; background: var(--l2); border-radius: 0 0 var(--r) var(--r); display: flex; flex-direction: column; gap: 10px } .tot { display: flex; justify-content: space-between; align-items: baseline } .tot b { font-family: var(--display); font-variation-settings: "opsz" 96, "SOFT" 50; font-weight: 500; font-size: 38px; letter-spacing: -.02em } .modalscrim { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; padding: 16px; z-index: 50; animation: fade .2s } .modalscrim.solid { background: var(--l0) } .modal { width: 100%; max-width: 480px; overflow: hidden; animation: rise .25s var(--ease); max-height: 92vh; display: flex; flex-direction: column; border-radius: 28px } @keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985) } } .modal header { padding: 22px 24px 8px; display: flex; align-items: center; gap: 8px } .modal .body { padding: 12px 24px 24px; overflow: auto } .big { font-family: var(--display); font-variation-settings: "opsz" 96, "SOFT" 50; font-weight: 500; font-size: 40px; text-align: center; letter-spacing: -.02em } .pay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px } .pay button { padding: 14px 6px; cursor: pointer; font-weight: 600; font-size: 13px; border: 0; border-radius: 16px; background: var(--l3); color: var(--ink2); transition: background .12s } .pay button.on { background: var(--ink); color: var(--l0) } /* ── login ── */ .box { width: min(400px, 92vw); padding: 34px; animation: rise .35s var(--ease); border-radius: 30px } .box .brand { padding: 0 0 6px; font-size: 18px } .dots { display: flex; gap: 12px; justify-content: center; margin: 22px 0 16px; height: 12px } .dots i { width: 12px; height: 12px; border-radius: 99px; background: var(--l3); transition: background .12s } .dots i.on { background: var(--ink) } .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px } .pad button { padding: 16px; border-radius: 16px; border: 0; background: var(--l2); font-family: var(--display); font-size: 22px; font-weight: 500; cursor: pointer; transition: background .1s } .pad button:hover { background: var(--l3) } .pad button:active { background: var(--l4) } .pad .soft { font-family: var(--body); font-size: 14px; color: var(--mute) } .err { color: var(--berry); font-weight: 600; min-height: 20px; margin-top: 10px; text-align: center } /* ── loja ── */ .shop { max-width: 1140px; margin: 0 auto; padding: 0 28px 100px } .shop-head { display: flex; align-items: center; gap: 14px; padding: 22px 0; position: sticky; top: 0; z-index: 10; background: linear-gradient(var(--l0) 75%, transparent) } .shop-head .brand { padding: 0; font-size: 18px } .shop-head .brand > i { width: 34px; height: 34px; border-radius: 12px } .hero-shop { padding: 64px 0 34px } .hero-shop h1 { font-size: clamp(44px, 7vw, 84px); font-variation-settings: "opsz" 144, "SOFT" 80; font-weight: 400; letter-spacing: -.02em; line-height: .98; max-width: 720px } .hero-shop h1 em { font-style: italic; font-weight: 300 } .hero-shop p { color: var(--ink2); font-size: 18px; max-width: 520px; margin: 22px 0 0; line-height: 1.5 } .cats { display: flex; gap: 6px; overflow: auto; padding: 8px 0 20px } .pgrid.shop-grid { padding: 0; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; overflow: visible } .ptile { padding: 20px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; position: relative; overflow: hidden; border-radius: 24px; background: var(--l1); animation: reveal .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); transition: background .15s } .ptile:hover { background: var(--l2) } .ptile .swatch { height: 78px; border-radius: 14px; background: radial-gradient(120% 100% at 20% 0%, var(--c1), var(--c2)); opacity: .8 } .ptile .n { font-family: var(--display); font-variation-settings: "opsz" 36, "SOFT" 50; font-weight: 500; font-size: 18px; line-height: 1.15 } .ptile .p { margin-top: auto; display: flex; align-items: center; justify-content: space-between } .ptile .p b { font-size: 18px; font-weight: 600 } .ptile .out { position: absolute; inset: 0; background: color-mix(in srgb, var(--l0) 78%, transparent); display: grid; place-items: center; color: var(--mute); font-weight: 600 } .cartbar { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 22px; border-radius: var(--pill); z-index: 20; animation: slideup .3s var(--ease); background: var(--l2); box-shadow: var(--drop) } .sheet { position: fixed; inset: 0; z-index: 30; display: flex; justify-content: flex-end; background: var(--scrim); animation: fade .2s } .sheet .panel { width: 100%; max-width: 500px; height: 100%; background: var(--l1); border-radius: 28px 0 0 28px; display: flex; flex-direction: column; animation: slide .3s var(--ease) } .steps { display: flex; gap: 6px; padding: 0 28px 8px } .steps i { flex: 1; height: 3px; border-radius: 99px; background: var(--l3) } .steps i.on { background: var(--ink) } .check { width: 68px; height: 68px; border-radius: 99px; background: var(--leafSoft); display: grid; place-items: center; color: var(--leaf); margin: 0 auto 14px; font-size: 26px; animation: rise .4s var(--ease) } /* ── painel: grade de 12 colunas com widgets pequenos ── Um cartão = uma pergunta respondida. Título em caixa alta pequena para não competir com o número; o número é que carrega a hierarquia. A grade não tem número fixo de colunas: `auto-fill` cria quantas couberem a partir de 300 px, então o mesmo painel mostra 2 cartões por linha num notebook e 6 num monitor grande, sem breakpoint novo. Larguras relativas: o normal ocupa 1 coluna, .w6/.w8 ocupam 2, .w12 a linha inteira. */ .dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--colmin), 1fr)); gap: var(--gap) } .dash > * { grid-column: span 1 } .dash > .w6, .dash > .w8 { grid-column: span 2 } .dash > .w12 { grid-column: 1 / -1 } /* o cartão de hoje acompanha a altura da coluna de números ao lado; o gráfico desce até o pé */ .dash > .stat.hero { display: flex; flex-direction: column } .dash > .stat.hero > *:last-child { margin-top: auto } .wid { padding: 18px 20px; display: grid; gap: 10px; align-content: start } .wid > h3 { margin: 0; font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mute) } .wid .n { font-family: var(--display); font-variation-settings: "opsz" 72, "SOFT" 50; font-weight: 500; font-size: 30px; letter-spacing: -.02em; line-height: 1 } .sub { color: var(--mute); font-size: 12.5px; line-height: 1.45 } .delta { font-size: 12px; font-weight: 600 } .delta.up { color: var(--leaf) } .delta.down { color: var(--berry) } .donut { width: 118px; height: 118px; flex-shrink: 0 } /* listinha genérica de widget: rótulo à esquerda, número à direita, separador quase invisível */ .lst { display: grid } .lst > * { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--l2) } .lst > *:first-child { border-top: 0; padding-top: 0 } .lst .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .meter { height: 3px; border-radius: 99px; background: var(--l3); overflow: hidden; margin-top: 6px } .meter i { display: block; height: 100%; border-radius: 99px; animation: wipe .8s var(--ease) both } @keyframes wipe { from { transform: scaleX(0); transform-origin: left } } /* ── faixa de alertas: o que precisa de alguém hoje, antes de qualquer número ── */ .alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 8px; margin-bottom: 18px } .al { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border: 0; border-radius: 15px; background: var(--l1); text-align: left; font: inherit; color: inherit; transition: background .15s } button.al { cursor: pointer } button.al:hover { background: var(--l3) } .al > i { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; background: var(--mute) } .al.bad > i { background: var(--berry) } .al.warn > i { background: var(--honey) } .al.ok > i { background: var(--leaf) } .al .t { flex: 1; min-width: 0 } .al .t b { display: block; font-weight: 600; font-size: 13px } .al .t small { display: block; color: var(--mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } /* ── anel animado no hover: mesmo desenho do .glow, porém efêmero, em cartões e botões ── A borda transparente é permanente (com box-sizing: border-box não desloca nada); no hover ela ganha o gradiente cônico. --fill é a camada interna de cada elemento e precisa bater com o fundo dele, senão o gradiente vaza por baixo. Vem depois das regras de .btn de propósito. */ .card, .tile, .box, .btn { border: 1.5px solid transparent } .card, .tile, .box { --fill: linear-gradient(var(--cardBg), var(--cardBg)) } .card .card, .modal .card, .drawer .card { --fill: linear-gradient(var(--cardBg2), var(--cardBg2)) } .btn { --fill: linear-gradient(var(--inkHi), var(--inkHi)) } .btn.ghost { --fill: linear-gradient(var(--l4), var(--l4)) } .btn.danger { --fill: linear-gradient(var(--berrySoft), var(--berrySoft)), linear-gradient(var(--l1), var(--l1)) } .btn.ai, .btn.primary-grad { --fill: var(--ai) } /* o herói entra aqui, e não lá em cima junto do .card: o `.card` da linha acima tem a mesma especificidade e viria depois, apagando o brilho radial do herói. */ .hero { --fill: radial-gradient(closest-side at 108% 132%, var(--accSoft), transparent 70%), linear-gradient(var(--cardBg2), var(--cardBg2)) } .btn.btn:hover:not(:disabled) { background: var(--fill) padding-box, conic-gradient(from var(--spin), var(--l4) 0 55%, var(--acc1) 72%, var(--acc2) 84%, var(--l4) 96% 100%) border-box; animation: spin var(--spinDur) linear infinite } /* O cartão não usa o truque de duas camadas acima, e sim um anel recortado, porque a opacidade do cartão é regulável: o truque só esconde o cônico enquanto --fill é opaco, e com o cartão translúcido o gradiente aparecia inteiro por baixo do conteúdo — o cartão lavava de roxo no hover. Aqui o cônico é pintado num ::after e a máscara vaza só a moldura de 1.5px, então nada depende do fundo ser sólido. O `inset: -1.5px` é porque o pseudo-elemento se posiciona contra a caixa de padding e precisa crescer para alcançar a borda. O `background: var(--fill)` continua na regra de hover para vencer o `.tile:hover` opaco. */ :is(.card, .tile, .box):not(.glow)::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none; padding: 1.5px; opacity: 0; transition: opacity .2s var(--ease); background: conic-gradient(from var(--spin), var(--l4) 0 55%, var(--acc1) 72%, var(--acc2) 84%, var(--l4) 96% 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) } /* o :has() evita que o cartão de fora acenda junto quando o mouse está num filho que já acende */ :is(.card, .tile, .box):not(.glow):hover:not(:has(:is(.card, .tile, .box, .btn):hover)) { background: var(--fill) } :is(.card, .tile, .box):not(.glow):hover:not(:has(:is(.card, .tile, .box, .btn):hover))::after { opacity: 1; animation: spin var(--spinDur) linear infinite } /* ── halo no hover: o mesmo brilho difuso do .glow, agora em todo cartão ── Antes só o anel da borda acendia; o brilho que escapa para fora era exclusividade do .glow permanente, então parecia que o efeito só existia em dois ou três lugares. ::before e não ::after porque o ::after do cartão já é o anel da moldura (regra acima). z-index:-1 põe o borrão atrás do próprio fundo opaco do cartão — só aparece o que transborda dos 14 px. Consequência: cartão dentro de cartão não mostra halo (o fundo do pai cobre), então o aninhado ganha um box-shadow equivalente logo abaixo. */ :is(.card, .tile, .box) { position: relative } :is(.card, .tile, .box):not(.glow)::before { content: ""; position: absolute; inset: calc(-1 * var(--haloSize)); z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; filter: blur(var(--haloBlur)); transition: opacity .28s var(--ease); background: conic-gradient(from var(--spin), transparent 0 55%, var(--acc1) 72%, var(--acc2) 84%, transparent 96% 100%) } :is(.card, .tile, .box):not(.glow):hover:not(:has(:is(.card, .tile, .box, .btn):hover))::before { opacity: var(--halo); animation: spin var(--spinDur) linear infinite } /* aninhado: sem pseudo-elemento, porque ele ficaria escondido atrás do cartão de fora */ :is(.card, .modal, .drawer) :is(.card, .tile, .box):not(.glow):hover:not(:has(:is(.card, .tile, .box, .btn):hover)) { box-shadow: 0 0 var(--haloBlur) -4px color-mix(in srgb, var(--acc1) calc(var(--halo) * 60%), transparent) } @media print { body * { visibility: hidden } .receipt, .receipt * { visibility: visible } .receipt { position: fixed; inset: 0; width: 80mm; margin: auto; font-family: monospace; color: #000; background: var(--inkHi) } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } .chart .line { stroke-dashoffset: 0 } .chart .area { opacity: 1 } } /* o antigo breakpoint de 1240 px sumiu: com auto-fill a contagem de colunas se resolve sozinha. Sobra só o piso — abaixo de ~640 px cabe uma coluna só, e aí `span 2` transbordaria a tela. */ @media (max-width: 640px) { .dash > *, .dash > .w6, .dash > .w8 { grid-column: 1 / -1 } } @media (max-width: 820px) { .where, .lnk { display: none } .lscrim { padding: 20px 16px 40px; gap: 20px } .lpad { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) } .appicon > i { width: 52px; height: 52px } .g3 { grid-template-columns: 1fr } .pos { grid-template-columns: 1fr } aside.cart { position: fixed; inset: auto 12px 12px 12px; max-height: 52vh } } /* ── tela de Aparência ── O campo de token é texto + paleta nativa lado a lado, com um controle deslizante embaixo quando o valor é uma medida. O texto é a fonte da verdade: a paleta do sistema só entende #rrggbb, e quem precisa de rgba() ou color-mix() digita. */ .tk .tkrow { display: flex; gap: 8px; align-items: center } .tk .tkrow .field { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px } .tk span i { font-style: normal; font-weight: 400 } input.tsw { width: 38px; height: 38px; flex: none; padding: 0; border: 0; border-radius: var(--r2); background: var(--l3); cursor: pointer } input.tsw::-webkit-color-swatch-wrapper { padding: 4px } input.tsw::-webkit-color-swatch { border: 0; border-radius: 9px } input.trg { width: 100%; margin: 8px 0 0; accent-color: var(--acc1); cursor: pointer } /* prévia de gradiente e de sombra: mesma pastilha do seletor de cor, mas só para olhar — não existe paleta do sistema para "linear-gradient(…)", então quem manda é o texto ao lado. */ .tprev { width: 38px; height: 38px; flex: none; border-radius: var(--r2); background: var(--l3); box-shadow: inset 0 0 0 4px var(--l1) } .tile.preset { min-height: 0; gap: 5px; padding: 12px } .tile.preset .swat { height: 26px; border-radius: 9px; display: block } /* Prévia do logo. O de dentro repete a placa da barra do topo: é ele que some no "sem fundo" e é a caixa dele que a porcentagem estica, então a moldura precisa de folga para o logo a 200% caber. */ .logoprev { width: 124px; height: 124px; border-radius: var(--r2); background: var(--l2); display: grid; place-items: center; color: var(--ink) } .logoprev > i { width: 50px; height: 50px; border-radius: 16px; background: var(--ai); display: grid; place-items: center; color: var(--onAcc) } .logoprev > i svg { width: 28px; height: 28px } /* "×" de apagar tema salvo: botão dentro de botão não existe, então ele é irmão do bloco e só aparece quando o ponteiro está por perto — a ação normal é aplicar o tema, apagar é a exceção. */ .mypreset { position: relative } .mypreset > .tile { width: 100% } .tilex { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: 0; border-radius: 8px; background: var(--l3); color: var(--mute); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s } .mypreset:hover .tilex, .tilex:focus-visible { opacity: 1 } .tilex:hover { background: var(--berrySoft); color: var(--berry) } /* ── orçamentos e faturas ── O editor de documento é largo porque cada linha tem produto, quantidade, preço e desconto: no `.drawer` padrão de 480px os campos ficariam do tamanho de um selo. */ .drawer.wide { max-width: 760px } .qline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; border-radius: var(--r2); background: var(--l2); margin-bottom: 8px } .qline .grow { flex: 1 1 220px; min-width: 0 } .qline .num { width: 78px; flex: none; text-align: right } .qline .sum { margin-left: auto; font-weight: 700; font-family: var(--display); white-space: nowrap } .qline .lbl { font-size: 11.5px; color: var(--mute) } .totbox { display: grid; gap: 4px; padding: 16px; border-radius: var(--r2); background: var(--l2) } .totbox div { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink2) } .totbox div.big { font-size: 22px; font-weight: 800; font-family: var(--display); color: var(--ink); margin-top: 6px }