/* ============================================================================
TEMA COPA 2026 — v1 (vamos refinar depois)
Carregado apenas quando o estabelecimento tem tema "copa2026" ativo
(App\Utils\Theme injeta este arquivo via extraHeader), então os seletores
não precisam de classe de escopo: o include condicional é o gate.
A cor primária da vitrine já chega verde (#00A132) via Page::getHeader →
Theme::colorPrimary(); aqui entram os acentos da paleta e o loading.
Paleta:
--copa-verde: #00A132 --copa-amarelo: #FFCC01
--copa-azul: #0060E8 --copa-azul-escuro: #021C73
========================================================================== */
:root {
--copa-verde: #00A132;
--copa-stripes: url("data:image/svg+xml,");
--copa-amarelo: #FFCC01;
--copa-azul: #0060E8;
--copa-azul-escuro: #021C73;
}
/* ----------------------------------------------------------------------------
Loading — spinners de modal assumem o verde do tema no lugar do vermelho fixo
-------------------------------------------------------------------------- */
svg circle[stroke="#e15b64"] {
stroke: var(--copa-verde);
}
/* ----------------------------------------------------------------------------
Acentos da paleta na vitrine
-------------------------------------------------------------------------- */
/* Faixa verde→amarela no topo da página, assinatura discreta do tema.
Em modo iframe (embed de parceiro) o chrome do tema fica de fora. */
body:not(.iframe)::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
height: 12px;
z-index: 2147483000;
background: linear-gradient(90deg,
var(--copa-verde) 0%,
var(--copa-verde) 45%,
var(--copa-amarelo) 55%,
var(--copa-amarelo) 100%);
pointer-events: none;
}
/* As superfícies ancoradas no topo descem 12px (altura da faixa) para não
ficarem sob ela: headers fixos, a linktree (fixed top:0) e o header do
modo gestor. As sheets de produto/carrinho ancoram embaixo com vão de
16px no topo — o vão vira 28px para preservar o respiro sob a faixa. */
body:not(.iframe) .header-start.default-area.col,
body:not(.iframe) .search-area .header-start.col,
body:not(.iframe) .gestor-header {
margin-top: 12px;
}
body:not(.iframe) .linktree {
top: 12px;
height: calc(100% - 12px);
}
body:not(.iframe) .product-section.opened,
body:not(.iframe) .cart-section.opened {
height: calc(100% - 28px);
}
/* ----------------------------------------------------------------------------
Botão primário do linktree (Figma: node 13381-8127) — azul Copa, troféu à
esquerda do label e stripes nos cantos. Estrutura original preservada
(sombras, shine animado no ::before do .button-inner, hover, loading).
-------------------------------------------------------------------------- */
.linktree-button.pedir-online,
.linktree-button.pedir-online .button-inner {
background: var(--copa-azul);
}
.linktree-button.pedir-online {
position: relative;
overflow: clip;
}
.linktree-button.pedir-online .button-inner {
border-color: rgba(255, 255, 255, 0.2);
}
/* troféu no lugar do ícone de cardápio */
.linktree-button.pedir-online .button-inner svg.menuic {
display: none;
}
.linktree-button.pedir-online .button-inner span::before {
content: '';
flex: 0 0 auto;
width: 10px;
height: 25px;
margin: 0 6px 2px 0;
background: url(/cardapio.ai/img/themes/copa2026/trofeu-botao.svg) center / contain no-repeat;
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.35));
}
/* stripes nos cantos do botão (mesmo desenho dos cards) */
.linktree-button.pedir-online::before,
.linktree-button.pedir-online::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
z-index: 3;
pointer-events: none;
background-image: var(--copa-stripes);
background-size: 20px 20px;
background-repeat: no-repeat;
}
.linktree-button.pedir-online::before {
top: 0;
left: 0;
transform: rotate(180deg);
}
.linktree-button.pedir-online::after {
right: 0;
bottom: 0;
}
/* o CSS base reaproveita o ::after do botão como overlay de hover/active/focus
(inset 0 + backdrop-filter) — aqui ele é a stripe do canto, então a geometria
é reafirmada nesses estados; o feedback visual segue nas regras do próprio
botão (scale, sombra e opacity) */
.linktree-button.pedir-online:hover::after,
.linktree-button.pedir-online:active::after,
.linktree-button.pedir-online:focus::after {
top: auto;
left: auto;
right: 0;
bottom: 0;
width: 20px;
height: 20px;
backdrop-filter: none;
-webkit-backdrop-filter: none;
z-index: 3;
}
/* Capa sem foto: gradiente da Seleção no lugar do JPG default. A classe
.no-cover vem do LinkTree.php; o !important é necessário para vencer o
background-image inline do linktree.html */
.linktree-header.no-cover {
background-color: var(--copa-verde);
background-image: linear-gradient(135deg, var(--copa-verde) 0%, #007d27 60%, var(--copa-azul-escuro) 100%) !important;
}
/* ----------------------------------------------------------------------------
TINTA DE TEXTO DO TEMA — azul escuro da Seleção no lugar do cinza #4D4D4D.
Lista gerada a partir de todos os seletores da vitrine que usam #4D4D4D
como cor de texto (style/linktree/produto/carrinho/conta). Mesma
especificidade dos originais; vence porque este arquivo carrega depois.
-------------------------------------------------------------------------- */
.header-category .category span,
.product-start .title span,
.product-start .list .product-title,
.product-start .list .product-weight span,
.product-start .list .product-value .value-final,
.product-start .list .product-value .value-final span,
.product-start .list .product-value .old-value,
.product-start .list .product-description,
.product-area .search-area .header-category .category span,
.bottom-bar .option p,
.search-area .search input[type="text"],
.search-area-second .header-logo input[type="text"],
.no-result span:nth-child(2),
.product-section .description span,
.product-section .title h5,
.product-section .title .subdescription span,
.product-section .pizza-alert h1,
.product-section .note-text,
.product-section textarea,
.no-bill div .first,
.no-bill div .second,
.bill .bill-title span,
.alert-checkout h3,
.alert-checkout p,
.bill .sub-title span,
.bill .order-bill span,
.bill .order-bill div:last-child span,
.bill .value span,
.bill .value-area span,
.item-pedido .pedido-extra .title,
.item-pedido .pedido-extra span:not(.title),
.custom-alert,
#r-options .leitura-iniciada,
#r-options .leitura-tipo,
#bottom-modal-title,
.bottom-modal-fields div p:nth-child(1),
.bottom-modal-fields div p:nth-child(2),
.bottom-modal-fields input,
#bottom-modal-topbutton.change,
.list-bill-data,
.list-bill-data .date,
.list-bill-data .time,
.list-bill-details .details span,
.list-bill-details .value-final,
.final-bill #quantity-value,
.order-select-modal>.header p,
.selected-combo-quantity,
.selected-combo .selected-combo-title,
.selected-combo .selected-combo-description,
.selected-combo .value .measure,
.selected-combo .value .serves,
.item-pedido .pedido-produto .description .product-title,
.item-pedido .pedido-produto .description .product-weight span,
.finish-bill p,
.finish-bill p.text,
.finish-bill span,
.dropdown-districts-button.clicked span, .dropdown-districts-button.selected span,
.dropdown-districts-noresults,
.dropdown-districts-search input[type="text"],
.gestor-header>div>a,
.bottom-modal-pix-title,
.bottom-modal-pix-value p:nth-child(1),
.bottom-modal-pix-value p:nth-child(2),
.bottom-modal-pix-key p,
.tabs-main-hint p,
.address-confirm .header p,
.address-confirm-area-body p,
.modal-exclude-product-body p,
.modal-exclude-product-body h3,
.modal-exclude-product-body h4,
.modal-exclude-product-footer button,
.destaque-card-name,
.destaque-card-old-price,
.destaque-card-price,
.destaque-card-price > span,
.linktree-profile-name,
.linktree-profile-address p, .linktree-profile-payment p,
.linktree-profile-time-maximized-title,
.linktree-profile-time-maximized-row p:nth-child(1),
.linktree-profile-time-maximized-row p:nth-child(2),
.linktree-profile-install-instructions-title,
.linktree-profile-install-instructions-subtitle,
.linktree-profile-install-instructions-list-item,
.cashback-info-modal p:nth-child(3),
.simulate-shipping-address,
.simulate-shipping-field>div p,
.simulate-shipping-field>div>div input[type="text"],
.product-section .remove-ingredients .title span:nth-child(1),
.product-section .chooses .title-description>span:nth-child(1),
.product-section .chooses .subtitle-description, .product-section .chooses .subtitle-description span,
.product-section .chooses .subtitle-description div,
.product-section .chooses .title-description-info,
.search-arrow-input input,
.product-section .chooses .itens .item-container .title-choose .info .info-name,
.product-section .chooses .itens .item-container .title-choose .info .info-price,
.product-section .chooses .itens .item-container .title-choose .info .info-details div,
.product-section .chooses .itens .item-container .item-description,
.no-item-container,
.product-section .chooses .itens .item-container.weight .title-choose .elegant-input input,
.product-section .chooses .itens .item-container.weight .title-choose .elegant-input span,
.elegant-button h3,
.bill .value-online span,
.coupon-area-text,
.coupon-area-button span,
.coupon-field input[type="text"],
.payment-method div p:nth-child(2), .payment-method div p:nth-child(3),
.payment-method p:nth-child(1),
.payment-method .payment-method-text,
.bottom-action>div>p,
.schedule-area-title p,
.schedule-area-subtitle,
.opening-hours span,
.opening-hours-details p:nth-child(even),
.opening-hours-details p:nth-child(odd),
.cart-section .address-area-title,
.cart-section .address-area-subtitle,
.payment-area-title,
.payment-area-button-title,
.payment-area-button-subtitle,
.bottom-payment-online div p,
.paymentonapp-area-title,
.preview-card-number p,
.preview-card-info .holder-card.texted,
.preview-card-info div p:nth-child(1),
.preview-card-info div p:nth-child(2).texted,
.paymentondelivery-area-title,
.paymentOptionRow-title p,
.paymentOptionRow-cards div,
.checkout-field input,
.address-area textarea,
.textarea-title,
.checkout-field label,
.checkout-field input:focus~label, .checkout-field input:valid~label,
.cart-area .address div span:nth-child(1)::after,
.cart-area .address .address-client p:nth-child(1),
.cart-area .address .address-client p:nth-child(2),
.cart-area .address-text,
.cart-area .forecast-text,
.cart-area .forecast div span:nth-child(1),
.cart-section .withdraw-area-title,
.cart-section .withdraw-area-subtitle,
.withdraw-area-titleAddress,
.withdraw-area-textAddress,
.modal-type-cart-body-info h1,
.modal-type-cart-body-info p,
.modal-type-cart-body-info h2,
.modal-type-cart-body-info h3,
.cashback-area-info div p:nth-child(2),
.cashback-area-input>p,
.cashback-area-input div p,
.bill .title span,
.bill .subtitle div p:first-child,
.bill .subtitle div p:nth-child(2),
.final-bill .item-minimized p:nth-child(1),
.final-bill .item-minimized p:nth-child(2),
.final-bill .expandable-title,
.final-bill .payment-title,
.final-bill .payment-subtotal span, .payment-frete span, .payment-cashback span,
.final-bill .payment-total span,
.final-bill .payment-type-area .payment-type-title,
.final-bill .payment-type-title-extra,
.final-bill .payment-type-area .payment-type p,
.final-bill .address-area .address-area-title,
.final-bill .address-area .address-area-subtitle,
.final-bill .address-area .address-name, .final-bill .address-area .address-phone,
.final-bill .address-area .address-info,
.forecast-minimized-title,
.forecast-minimized-subtitle,
.forecast-maximized-row p:nth-child(1),
.forecast-maximized-row p:nth-child(2),
.mixed-payment-bill-title,
.mixed-payment-bill-item p {
color: var(--copa-azul-escuro);
}
/* ícone "serve N pessoas": SVG externo com fill #4D4D4D fixo carregado via
![]()
(listagem, autoatendimento e detalhe) — CSS não alcança o fill, então
o filtro zera para preto e recolore no azul escuro do tema (#021C73) */
img[src$='serve-pessoas.svg'] {
filter: brightness(0) saturate(100%) invert(64%) sepia(43%) saturate(3426%) hue-rotate(156deg) brightness(48%) contrast(296%);
}
/* variante inline do mesmo ícone (combos no detalhe do produto) */
.selected-combo .value .serves svg path {
fill: var(--copa-azul-escuro);
}
/* título da seção Destaques: único texto escuro fora do #4D4D4D (usa #1D1D1F) */
.destaques-title {
color: var(--copa-azul-escuro);
}
/* ----------------------------------------------------------------------------
Cantos listrados dos cards (Figma: B2C LISTAGEM, node 13376-4458)
Cunha de 3 listras diagonais nos cantos superior-esquerdo e inferior-
direito dos cards de produto e dos destaques. Cores literais do Figma
(não são os tokens da paleta): #25A65B · #F9CF39 · #1A66EB.
-------------------------------------------------------------------------- */
.destaque-card {
position: relative;
}
/* as cunhas ficam contidas pelo raio do card (sem transbordar os cantos) */
.product-start .list .product,
.destaque-card {
overflow: clip;
}
.product-start .list .product::before,
.product-start .list .product::after,
.destaque-card::before,
.destaque-card::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
pointer-events: none;
z-index: 2;
}
/* SVG oficial do Figma (productStripes): bandas contíguas verde/amarelo/azul,
azul mais grosso na ponta. O desenho abraça o canto inferior-direito do
tile; no canto superior-esquerdo entra rotacionado 180°. */
.product-start .list .product::before,
.product-start .list .product::after,
.destaque-card::before,
.destaque-card::after {
background-image: var(--copa-stripes);
background-size: 20px 20px;
background-repeat: no-repeat;
}
.product-start .list .product::before,
.destaque-card::before {
top: 0;
left: 0;
transform: rotate(180deg);
}
.product-start .list .product::after,
.destaque-card::after {
right: 0;
bottom: 0;
}
/* ícones de endereço e pedido mínimo do linktree: fill #4D4D4D hardcoded no
markup (com not-wl, escapam da regra global de fill) — acompanham a tinta */
.linktree-profile-address svg path,
.linktree-profile-payment svg path {
fill: var(--copa-azul-escuro);
}
/* estes dois originais usam !important — a tinta precisa do mesmo peso */
.dropdown-districts-content .option-district,
.coupon-field.error .coupon-field-button:after {
color: var(--copa-azul-escuro) !important;
}
/* ----------------------------------------------------------------------------
Bottom bar: cada estado em UMA cor só (texto + ícone).
Ativa = verde (a tinta azul vencia o .selected p por ordem de carga);
inativa = azul escuro (o ícone era forçado a #4D4D4D com !important).
-------------------------------------------------------------------------- */
.bottom-bar .option.selected p {
color: var(--color-primary);
}
.bottom-bar .item-disabled * {
fill: var(--copa-azul-escuro) !important;
}
/* ----------------------------------------------------------------------------
Assinatura amarela nos CTAs primários (detalhe inset na base do botão)
-------------------------------------------------------------------------- */
.floating-button,
.address-confirm-area-button,
#bottom-modal-button {
box-shadow: inset 0 -3px 0 var(--copa-amarelo);
}
/* ----------------------------------------------------------------------------
Botões do carrinho (bottom-action) e Adicionar do produto (confirm) —
Figma node 13384-17501: stripe no canto inferior-direito (o background
recorta no raio do botão nativamente) e ícones do design no lugar dos
svgs inline. O fundo verde já vem de --color-primary.
-------------------------------------------------------------------------- */
.bottom-action button:not([disabled]),
.product-section .confirm.confirm-enabled {
background-image: var(--copa-stripes);
background-repeat: no-repeat;
background-position: right bottom;
background-size: 20px 20px;
}
/* ícones do Figma via background (imunes à regra global de fill); escopo no
seletor de "Como quer seu pedido?" do carrinho */
.bottom-action>div>div>.bottom-action-button svg,
.bottom-action>div>div>.withdraw-button svg {
display: none;
}
.bottom-action>div>div>.bottom-action-button::before,
.bottom-action>div>div>.withdraw-button::before {
content: '';
flex: 0 0 auto;
width: 27px;
height: 22px;
margin-right: 6px;
background: url(/cardapio.ai/img/themes/copa2026/icone-entrega.svg) center / contain no-repeat;
}
.bottom-action>div>div>.withdraw-button::before {
width: 16px;
height: 24px;
margin-right: 0;
background-image: url(/cardapio.ai/img/themes/copa2026/icone-retirada.svg);
}
/* logo animado (swap feito por copa2026.js): quadro mais largo e sem o
recorte circular padrão de 50px, para a animação aparecer inteira */
.header-logo img,
img.center-rel.logo {
object-fit: cover;
width: 62px;
border-radius: 0;
}
/* botão de enviar pedido da tela final: cinza #4D4D4D hardcoded vira o azul do tema */
.finish-bill input[type="submit"] {
background: var(--copa-azul-escuro);
}
/* "Processando pedido": Inter 16 medium no verde do tema. Os pontinhos
animados acompanham o corpo do texto; o line-height deles é o que cala
os pontos na base da linha (80px para fonte 24 no original → 64px aqui) */
.finish-bill .d-flex p,
.finish-bill .d-flex span {
color: var(--copa-verde);
font-size: 16px;
font-weight: 500;
}
.finish-bill .d-flex span {
line-height: 64px;
}
/* contador do carrinho flutuante: azul Copa com número branco */
.floating-button-qtd {
background: var(--copa-azul);
color: #ffffff;
}
/* ----------------------------------------------------------------------------
Categoria selecionada: pill amarela com texto azul (camisa da Seleção)
-------------------------------------------------------------------------- */
.product-area .search-area .header-category .category.selected {
background: var(--copa-amarelo) !important;
border-color: var(--copa-amarelo) !important;
}
.product-area .search-area .header-category .category.selected span {
color: var(--copa-azul-escuro) !important;
}
/* ----------------------------------------------------------------------------
Loadings: shimmer dos skeletons com tom de gramado (verde bem claro)
-------------------------------------------------------------------------- */
.shine {
background: #f2f8f3;
background-image: linear-gradient(to right, #f2f8f3 0%, #dff0e3 20%, #f2f8f3 40%, #f2f8f3 100%);
}