/* Parceiros Aquariam — front-end + admin */ .icap-wrap{ --icap-primary: var(--lj-brand, #12866c); --icap-primary-dark: var(--lj-brand-dark, #0c6b56); --icap-ink: #22313f; --icap-muted: #6b7c8c; --icap-line: #e3e9ef; --icap-bg: #f6f8fa; --icap-radius: 14px; max-width: 1180px; width: 100%; margin: 38px auto 64px; padding: 0 24px; box-sizing: border-box; color: var(--icap-ink); } .icap-wrap *, .icap-wrap *::before, .icap-wrap *::after{ box-sizing: border-box; } /* ---------- Avisos ---------- */ .icap-notice{ border-radius: 12px; padding: 14px 18px; margin: 0 0 22px; font-size: 15px; line-height: 1.5; border: 1px solid transparent; } .icap-notice--success{ background:#e9f8f1; border-color:#b8e6d2; color:#15684f; } .icap-notice--error{ background:#fdecec; border-color:#f6c6c6; color:#9b2626; } /* ---------- Cartões ---------- */ .icap-card, .icap-box{ background:#fff; border:1px solid var(--icap-line); border-radius: var(--icap-radius); padding: 28px; margin: 0 0 24px; box-shadow: 0 2px 14px rgba(34,49,63,.05); } .icap-card h2, .icap-box h3{ margin-top:0; } .icap-card--login{ max-width: 460px; margin-left:auto; margin-right:auto; } .icap-form-intro{ color: var(--icap-muted); margin-top:-6px; } .icap-small{ font-size:13.5px; color: var(--icap-muted); margin-bottom:0; } .icap-small a{ color: var(--icap-primary); } .icap-link{ color: var(--icap-primary); text-decoration: underline; } .icap-h3{ margin: 34px 0 14px; font-size: 19px; } .icap-empty{ color: var(--icap-muted); background: var(--icap-bg); border-radius:10px; padding:16px 18px; } /* ---------- Formulários ---------- */ .icap-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 20px; } .icap-f{ margin: 0 0 16px; } .icap-f--full{ grid-column: 1 / -1; } .icap-f label{ display:block; font-weight:600; font-size:14px; margin-bottom:6px; } .icap-wrap input[type=text], .icap-wrap input[type=email], .icap-wrap input[type=password], .icap-wrap input[type=number], .icap-wrap select, .icap-wrap textarea{ width:100%; padding: 12px 14px; border:1px solid var(--icap-line); border-radius:10px; font-size:15px; background:#fff; color: var(--icap-ink); line-height:1.4; } .icap-wrap input:focus, .icap-wrap select:focus, .icap-wrap textarea:focus{ outline:none; border-color: var(--icap-primary); box-shadow: 0 0 0 3px rgba(18,134,108,.12); } .icap-wrap input[disabled]{ background:#f3f5f7; color:#90a0ae; } .icap-wrap textarea{ resize: vertical; } /* Dicas e validação */ .icap-hint{ display:block; font-size:12.5px; color: var(--icap-muted); margin-top:5px; } .icap-wrap input.icap-invalid{ border-color:#d94c4c !important; background:#fffafa; } .icap-wrap input.icap-invalid:focus{ box-shadow: 0 0 0 3px rgba(217,76,76,.14) !important; } .icap-field-error{ display:block; font-size:12.5px; color:#b02a2a; margin-top:5px; font-weight:600; } .icap-field-status{ display:block; font-size:12.5px; margin-top:5px; font-weight:600; line-height:1.45; } .icap-field-status.is-info{ color: var(--icap-muted); } .icap-field-status.is-ok{ color:#15684f; } .icap-field-status.is-warn{ color:#9a6400; } /* Separador "Contato do responsável" */ .icap-f--sep{ margin-top:10px; padding-top:20px; border-top:1px solid var(--icap-line); } .icap-legend{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color: var(--icap-primary); } .icap-f--sep .icap-hint{ margin-top:3px; } /* CEP sendo consultado */ .icap-wrap input.icap-loading{ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 50 50'%3E%3Cpath fill='%2312866c' d='M25 5a20 20 0 1 0 20 20h-5A15 15 0 1 1 25 10z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px !important; } /* Login padrão do WordPress dentro do cartão */ .icap-wrap .login-username, .icap-wrap .login-password{ margin-bottom:16px; } .icap-wrap .login-username label, .icap-wrap .login-password label{ display:block; font-weight:600; font-size:14px; margin-bottom:6px; } .icap-wrap .login-remember{ margin:4px 0 16px; font-size:14px; color:var(--icap-muted); } .icap-wrap .login-remember input{ width:auto; margin-right:6px; } /* ---------- Botões ---------- */ /* Especificidade alta + !important: o tema e o WooCommerce estilizam .button / input[type=submit] globalmente e venciam estas regras. */ .icap-wrap .icap-btn, .icap-wrap a.icap-btn, .icap-wrap button.icap-btn, .icap-wrap .login-submit input[type=submit], .icap-wrap form button[type=submit], .icap-wrap form input[type=submit]{ display:inline-block; background: var(--icap-primary) !important; color:#fff !important; border:0 !important; cursor:pointer; padding: 13px 26px !important; border-radius: 999px !important; font-weight:700 !important; font-size:15px !important; line-height:1.2 !important; text-decoration:none !important; text-transform:none !important; letter-spacing:0 !important; width:auto; box-shadow:none !important; transition: background .18s ease, transform .18s ease; } .icap-wrap .icap-btn:hover, .icap-wrap .login-submit input[type=submit]:hover, .icap-wrap form button[type=submit]:hover, .icap-wrap form input[type=submit]:hover{ background: var(--icap-primary-dark) !important; transform: translateY(-1px); } .icap-wrap .icap-btn--lg{ padding: 15px 34px !important; font-size:16px !important; } /* Botão principal do formulário: centralizado e em destaque */ .icap-form-actions{ text-align:center; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--icap-line); } .icap-wrap .icap-form-actions .icap-btn--cta{ min-width: 320px; padding: 18px 48px !important; font-size: 17px !important; letter-spacing:.2px !important; box-shadow: 0 10px 24px rgba(18,134,108,.30) !important; } .icap-wrap .icap-form-actions .icap-btn--cta:hover{ box-shadow: 0 14px 30px rgba(18,134,108,.38) !important; transform: translateY(-2px); } .icap-form-actions .icap-small{ margin-top: 14px; } /* O formulário de login ocupa a largura toda do cartão */ .icap-wrap .login-submit input[type=submit]{ width:100%; } .icap-wrap .login-submit{ margin-bottom:14px; } /* ---------- Painel ---------- */ .icap-panel{ display:grid; grid-template-columns: 250px minmax(0,1fr); gap: 28px; align-items:start; } .icap-side{ background:#fff; border:1px solid var(--icap-line); border-radius: var(--icap-radius); overflow:hidden; box-shadow: 0 2px 14px rgba(34,49,63,.05); position:sticky; top: 20px; } .icap-side-head{ padding: 24px 20px; text-align:center; border-bottom:1px solid var(--icap-line); background: var(--icap-bg); } .icap-side-head strong{ display:block; margin-top:10px; font-size:15.5px; } .icap-avatar img{ border-radius:50%; width:56px; height:56px; } .icap-badge{ display:inline-block; margin-top:8px; background: var(--icap-primary); color:#fff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; } .icap-nav{ display:flex; flex-direction:column; padding: 8px 0; } .icap-nav a{ padding: 13px 20px; color: var(--icap-ink); text-decoration:none; font-size:15px; font-weight:500; border-left: 3px solid transparent; } .icap-nav a:hover{ background: var(--icap-bg); } .icap-nav a.is-active{ background: var(--icap-bg); border-left-color: var(--icap-primary); color: var(--icap-primary); font-weight:700; } .icap-main h2{ margin-top:0; } /* ---------- Indicadores ---------- */ .icap-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:18px; margin: 0 0 26px; } .icap-stat{ background:#fff; border:1px solid var(--icap-line); border-radius:12px; padding:20px; box-shadow: 0 2px 14px rgba(34,49,63,.05); } .icap-stat-label{ display:block; font-size:13px; color: var(--icap-muted); text-transform:uppercase; letter-spacing:.4px; font-weight:700; } .icap-stat-value{ display:block; font-size:25px; margin-top:7px; color: var(--icap-primary); line-height:1.2; } .icap-stat-value .woocommerce-Price-amount{ color: inherit; } .icap-stat-hint{ display:block; font-size:12.5px; color: var(--icap-muted); margin-top:5px; } /* ---------- Tabelas ---------- */ .icap-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--icap-line); border-radius:12px; overflow:hidden; font-size:14.5px; } .icap-table th, .icap-table td{ padding: 13px 14px; text-align:left; border-bottom:1px solid var(--icap-line); } .icap-table thead th{ background: var(--icap-bg); font-size:13px; text-transform:uppercase; letter-spacing:.3px; color: var(--icap-muted); } .icap-table tbody tr:last-child td{ border-bottom:0; } /* ---------- Selos de situação ---------- */ .icap-pill{ display:inline-block; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; background:#eef1f4; color:#5b6b7a; white-space:nowrap; } .icap-pill--pending, .icap-pill--requested{ background:#fff4e0; color:#9a6400; } .icap-pill--approved{ background:#e4f3ff; color:#1668a8; } .icap-pill--paid{ background:#e9f8f1; color:#15684f; } .icap-pill--rejected, .icap-pill--cancelled, .icap-pill--suspended{ background:#fdecec; color:#9b2626; } /* ---------- Copiar link ---------- */ .icap-copy{ display:flex; gap:10px; flex-wrap:wrap; } .icap-copy input{ flex:1 1 280px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px; background: var(--icap-bg) !important; } .icap-copy .icap-btn{ flex:0 0 auto; } .icap-code{ display:block; background: var(--icap-bg); padding:12px 14px; border-radius:10px; font-size:13.5px; word-break:break-all; } /* ---------- Tabela de faixas ---------- */ .icap-tiers{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:20px; } .icap-tier-card{ background:#fff; border:1px solid var(--icap-line); border-radius: var(--icap-radius); padding:24px; text-align:center; } .icap-tier-card h3{ margin:0 0 14px; font-size:18px; } .icap-tier-card ul{ list-style:none; margin:0; padding:0; } .icap-tier-card li{ padding:11px 0; border-top:1px solid var(--icap-line); } .icap-tier-card li:first-child{ border-top:0; } .icap-tier-pct{ display:block; font-size:30px; font-weight:800; color: var(--icap-primary); line-height:1.1; } .icap-tier-min{ display:block; font-size:13.5px; color: var(--icap-muted); margin-top:3px; } /* ---------- Tabela de preços de parceiro ---------- */ .icap-price-intro{ color: var(--icap-muted); margin-top:-4px; } .icap-confidential{ background:#fff8e6; border:1px solid #f0dfae; color:#8a6a12; border-radius:10px; padding:10px 16px; margin:0 0 16px; font-size:13.5px; font-weight:600; } .icap-price-wrap{ overflow-x:auto; } .icap-price-table{ min-width:640px; } .icap-price-table td strong{ color: var(--icap-primary); } .icap-th-sub{ display:block; font-size:11px; font-weight:600; text-transform:none; letter-spacing:0; opacity:.8; } .icap-sku{ font-size:12.5px; color: var(--icap-muted); } .icap-locked{ text-align:center; max-width:560px; margin-left:auto; margin-right:auto; } .icap-locked h3{ margin-top:0; } /* Faixa do parceiro na loja / no produto */ .icap-shop-banner{ --icap-primary: var(--lj-brand, #12866c); background:#e9f8f1; border:1px solid #b8e6d2; color:#15684f; border-radius:12px; padding:12px 18px; margin:0 0 22px; font-size:14.5px; line-height:1.5; } .icap-shop-banner a{ color:#0c6b56; text-decoration:underline; font-weight:700; } /* ---------- Carrinho: linha de ações alinhada ---------- O WooCommerce joga o cupom à esquerda e "Atualizar carrinho" solto à direita, com alturas diferentes. Aqui a linha vira flex com tudo na mesma base. */ /* Atenção: o td precisa continuar sendo table-cell. Com display:flex o colspan é ignorado e a tabela inteira perde o dimensionamento das colunas. */ .woocommerce-cart table.cart td.actions{ display: table-cell !important; padding: 18px 16px !important; background: #fafcfb; border-top: 1px solid #e3e9ef; text-align: right; overflow: hidden; /* contém o float do cupom */ } .woocommerce-cart table.cart td.actions .coupon{ float: left; display: inline-flex !important; align-items: center; gap: 10px; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .woocommerce-cart table.cart td.actions .coupon label{ display:none !important; } .woocommerce-cart table.cart td.actions .coupon input[type="text"], .woocommerce-cart table.cart td.actions #coupon_code{ width: 100% !important; max-width: 260px; min-width: 160px; height: 48px; margin: 0 !important; padding: 0 16px !important; border: 1px solid #e3e9ef; border-radius: 999px; font-size: 15px; box-sizing: border-box; } .woocommerce-cart table.cart td.actions .button, .woocommerce-cart table.cart td.actions button[name="update_cart"], .woocommerce-cart table.cart td.actions input[name="update_cart"]{ height: 48px; margin: 0 !important; padding: 0 26px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 700 !important; line-height: 46px !important; white-space: nowrap; float: none !important; width: auto !important; box-sizing: border-box; } /* "Atualizar carrinho" à direita, na mesma linha de base do cupom */ .woocommerce-cart table.cart td.actions > .button, .woocommerce-cart table.cart td.actions > button[name="update_cart"], .woocommerce-cart table.cart td.actions > input[name="update_cart"]{ float: none !important; display: inline-block; vertical-align: middle; } @media (max-width: 600px){ /* no mobile o WooCommerce transforma as células em blocos: não forçar table-cell */ .woocommerce-cart table.cart td.actions{ display: block !important; width: 100% !important; text-align: left; } .woocommerce-cart table.cart td.actions .coupon{ float: none; display: flex !important; flex-direction: column; align-items: stretch; margin-bottom: 10px !important; } .woocommerce-cart table.cart td.actions .coupon input[type="text"], .woocommerce-cart table.cart td.actions #coupon_code{ max-width: none; } .woocommerce-cart table.cart td.actions .button, .woocommerce-cart table.cart td.actions button[name="update_cart"], .woocommerce-cart table.cart td.actions input[name="update_cart"]{ width: 100% !important; margin-left: 0 !important; } } /* Caixa fechada */ .icap-box-info{ display:block; margin-top:4px; font-size:12.5px; color:#12866c; font-weight:600; } /* Escolha unidade x caixa na página do produto */ .icap-mode{ --icap-primary: var(--lj-brand, #12866c); display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; width:100%; } .icap-mode-title{ flex:1 0 100%; font-size:13px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#6b7c8c; margin-bottom:2px; } .icap-mode-opt{ flex:1 1 180px; display:flex; align-items:flex-start; gap:10px; cursor:pointer; border:1.5px solid #e3e9ef; border-radius:12px; padding:12px 14px; background:#fff; transition:border-color .15s ease, background .15s ease; margin:0; } .icap-mode-opt:hover{ border-color:#bcd9d0; } .icap-mode-opt input[type=radio]{ margin:3px 0 0; accent-color: var(--icap-primary); flex:0 0 auto; width:auto; } .icap-mode-opt:has(input:checked){ border-color: var(--icap-primary); background:#f3faf8; } .icap-mode-txt{ display:block; line-height:1.35; } .icap-mode-txt strong{ display:block; font-size:14.5px; color:#22313f; } .icap-mode-txt small{ display:block; font-size:13px; color:#6b7c8c; margin-top:2px; } .icap-mode-txt small .woocommerce-Price-amount{ color:#22313f; font-weight:700; } .icap-mode-un{ display:block; margin-top:3px; font-size:12px; color:#6b7c8c; } .icap-mode-off{ display:inline-block; margin-left:6px; background:#e9f8f1; color:#15684f; font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:999px; } @media (max-width:480px){ .icap-mode-opt{ flex:1 1 100%; } } .icap-box-note{ background:#f3f8f6; border:1px solid #cfe5dd; color:#15684f; border-radius:10px; padding:11px 16px; margin:0 0 16px; font-size:14px; line-height:1.5; } /* Campos escondidos no checkout do parceiro */ .woocommerce-checkout .icap-hidden-field{ display:none !important; } /* Aviso no checkout */ .icap-checkout-note{ background:#e9f8f1; border:1px solid #b8e6d2; color:#15684f; border-radius:10px; padding:11px 16px; margin:0 0 16px; font-size:14px; line-height:1.5; } /* ---------- Aviso no carrinho ---------- */ .icap-cart-tier{ background:#e9f8f1; border:1px solid #b8e6d2; color:#15684f; border-radius:12px; padding:13px 18px; margin:0 0 20px; font-size:14.5px; } /* ---------- Responsivo ---------- */ @media (max-width: 1024px){ .icap-panel{ grid-template-columns: 210px minmax(0,1fr); gap:20px; } .icap-wrap{ padding:0 20px; } } @media (max-width: 860px){ .icap-panel{ grid-template-columns: 1fr; } .icap-side{ position:static; } .icap-nav{ flex-direction:row; flex-wrap:wrap; padding:10px; gap:6px; } .icap-nav a{ border-left:0; border-radius:999px; padding:9px 16px; font-size:14px; background:var(--icap-bg); } .icap-nav a.is-active{ background: var(--icap-primary); color:#fff; } } @media (max-width: 640px){ .icap-wrap{ margin:24px auto 48px; padding:0 16px; } .icap-grid{ grid-template-columns: 1fr; } .icap-card, .icap-box{ padding:20px; } .icap-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; } .icap-stat{ padding:15px; } .icap-stat-value{ font-size:20px; } .icap-table{ display:block; border:0; background:transparent; } .icap-table thead{ display:none; } .icap-table tbody, .icap-table tr, .icap-table td{ display:block; width:100%; } .icap-table tr{ background:#fff; border:1px solid var(--icap-line); border-radius:12px; margin-bottom:12px; padding:6px 0; } .icap-table td{ border-bottom:0; padding:7px 14px; } .icap-copy{ flex-direction:column; } .icap-copy .icap-btn{ width:100%; text-align:center; } .icap-wrap .icap-form-actions .icap-btn--cta{ min-width:0; width:100%; padding:17px 20px !important; } /* A tabela de preços rola na horizontal em vez de virar cartões */ .icap-price-table{ display:table; background:#fff; border:1px solid var(--icap-line); font-size:13px; } .icap-price-table thead{ display:table-header-group; } .icap-price-table tbody{ display:table-row-group; } .icap-price-table tr{ display:table-row; background:transparent; border:0; border-radius:0; margin:0; padding:0; } .icap-price-table th, .icap-price-table td{ display:table-cell; border-bottom:1px solid var(--icap-line); padding:10px 12px; } } /* ============================================================ Admin */ .icap-admin .icap-pill{ display:inline-block; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; } .icap-admin-stats{ display:flex; gap:16px; flex-wrap:wrap; margin:18px 0 10px; } .icap-admin-stats > div{ background:#fff; border:1px solid #dcdcde; border-radius:8px; padding:14px 20px; min-width:180px; } .icap-admin-stats span{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#646970; font-weight:600; } .icap-admin-stats strong{ display:block; font-size:21px; margin-top:5px; color:#12866c; } .icap-admin .icap-inline-form{ margin-top:8px; display:flex; gap:5px; flex-wrap:wrap; } .icap-admin .icap-inline-form select{ max-width:140px; } .icap-admin-ref{ width:100%; font-size:11.5px; font-family: ui-monospace, Menlo, monospace; } .icap-admin .icap-msg-row td{ background:#fbfbfc; font-size:13px; color:#50575e; } /* ---------- PalmTop: carteira de clientes do representante ---------- */ .icap-clientes-topo{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:4px; } .icap-clientes-topo h2{ margin:0; } .icap-novo-cliente{ margin-top:26px; background:#fff; border:1px solid var(--icap-line); border-radius:14px; padding:4px 18px; } .icap-novo-cliente > summary{ cursor:pointer; list-style:none; padding:15px 0; font-weight:700; color: var(--icap-primary); font-size:15.5px; } .icap-novo-cliente > summary::-webkit-details-marker{ display:none; } .icap-novo-cliente > summary::before{ content:'+ '; font-weight:800; } .icap-novo-cliente[open] > summary{ border-bottom:1px solid var(--icap-line); margin-bottom:6px; } .icap-novo-cliente[open] > summary::before{ content:'– '; } .icap-novo-cliente .icap-form{ padding:0 0 18px; } @media (max-width: 640px){ /* nos cartões do celular a tabela perde o cabeçalho: o rótulo vai na célula */ .icap-table--rotulo td{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; } .icap-table--rotulo td::before{ content: attr(data-rotulo); font-size:12.5px; font-weight:700; color: var(--icap-muted); text-transform:uppercase; letter-spacing:.3px; flex:0 0 auto; } .icap-table--rotulo td:not([data-rotulo])::before{ content:none; } .icap-clientes-topo .icap-btn{ width:100%; text-align:center; } } /* Tipo de pessoa (PF x PJ) no formulário de parceria. Dois botões largos: no celular caem um embaixo do outro sozinhos. */ .icap-radios{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 2px; } .icap-radio{ display:flex; align-items:center; gap:9px; flex:1 1 220px; min-width:0; padding:12px 14px; border:1px solid #d7e3de; border-radius:12px; background:#fff; cursor:pointer; font-weight:500; line-height:1.3; transition:border-color .15s, box-shadow .15s, background .15s; } .icap-radio:hover{ border-color:#9fcdc2; } .icap-radio input[type="radio"]{ width:18px; height:18px; margin:0; flex:0 0 auto; accent-color:#18a08b; } .icap-radio:has(input:checked){ border-color:#18a08b; background:#f2fbf8; box-shadow:0 0 0 3px rgba(24,160,139,.14); } .icap-radio:has(input:focus-visible){ outline:2px solid #18a08b; outline-offset:2px; } /* ============================================================ Dashboard do admin Quem usa esta tela no dia a dia não é técnico e boa parte tem vista cansada. Por isso: número grande, contraste alto, botão largo e espaçamento generoso. Nada de fonte pequena ou cinza claro em cinza. ============================================================ */ .icap-dash h1{ font-size:28px; margin-bottom:2px; } .icap-dash .icap-dash-sub{ font-size:15px; color:#50605c; margin:0 0 22px; } .icap-dash h2{ font-size:19px; margin:34px 0 12px; padding-bottom:8px; border-bottom:2px solid #e4ece8; color:#143029; } /* --- faixa de aviso --- */ .icap-dash-alerta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#fff8e5; border:2px solid #f0c33c; border-radius:14px; padding:18px 22px; margin:18px 0 6px; } .icap-dash-alerta .dashicons{ font-size:34px; width:34px; height:34px; color:#b8860b; flex:0 0 auto; } .icap-dash-alerta > div{ flex:1 1 320px; min-width:0; } .icap-dash-alerta strong{ font-size:18px; color:#5c4708; display:block; } .icap-dash-alerta p{ margin:4px 0 0; font-size:14px; color:#6b5a2a; } .icap-dash-alerta .button-hero{ flex:0 0 auto; } .icap-dash-alerta--ok{ background:#eefaf4; border-color:#53b98a; } .icap-dash-alerta--ok .dashicons{ color:#1d8a5c; } .icap-dash-alerta--ok strong{ color:#14603f; } .icap-dash-alerta--ok p{ color:#2f6b52; } /* --- cartões de número --- */ .icap-dash-grade{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); } .icap-dash-card{ display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid #d9e4e0; border-top:4px solid #18a08b; border-radius:14px; padding:18px 20px 16px; box-shadow:0 2px 6px rgba(20,48,41,.05); } .icap-dash-ico{ font-size:26px; width:26px; height:26px; color:#18a08b; margin-bottom:6px; } .icap-dash-valor{ font-size:30px; font-weight:700; line-height:1.15; color:#143029; overflow-wrap:break-word; } .icap-dash-rotulo{ font-size:15px; font-weight:600; color:#2c4740; } .icap-dash-detalhe{ font-size:13px; color:#64756f; margin-top:3px; } .icap-dash-card--verde{ border-top-color:#1d8a5c; } .icap-dash-card--verde .icap-dash-ico{ color:#1d8a5c; } .icap-dash-card--amarelo{ border-top-color:#e0a800; background:#fffdf5; } .icap-dash-card--amarelo .icap-dash-ico{ color:#b8860b; } /* --- tabela de pendentes --- */ .icap-dash-tabela{ margin-top:6px; } .icap-dash-tabela th{ font-size:14px; } .icap-dash-tabela td{ padding:12px 10px; font-size:14px; vertical-align:middle; } .icap-dash-mini{ font-size:12px; color:#64756f; } .icap-dash-acoes{ white-space:nowrap; } .icap-dash-acoes .button{ padding:4px 16px; height:auto; line-height:2; } /* --- atalhos --- */ .icap-dash-atalhos{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); } .icap-dash-atalho{ display:block; text-decoration:none; background:#fff; border:1px solid #d9e4e0; border-radius:14px; padding:18px 20px; color:#143029; transition:border-color .15s, box-shadow .15s, transform .15s; } .icap-dash-atalho:hover{ border-color:#18a08b; box-shadow:0 6px 16px rgba(20,48,41,.10); transform:translateY(-1px); color:#143029; } .icap-dash-atalho .dashicons{ font-size:28px; width:28px; height:28px; color:#18a08b; margin-bottom:8px; display:block; } .icap-dash-atalho strong{ display:block; font-size:16px; margin-bottom:2px; } .icap-dash-atalho span:not(.dashicons){ font-size:13px; color:#64756f; } .icap-dash-rodape{ margin-top:26px; font-size:13px; color:#64756f; } @media (max-width:782px){ .icap-dash-valor{ font-size:26px; } .icap-dash-alerta .button-hero{ width:100%; text-align:center; } } /* ------------------------------------------------------------ Telas de lista do admin Mesma regra do Dashboard: público leigo e mais velho. Linha com ar, fonte maior, botão que não gruda no vizinho e coluna com largura proporcional ao que ela carrega. ------------------------------------------------------------ */ .icap-admin .wp-list-table th{ font-size:14px; padding:12px 10px; } .icap-admin .wp-list-table td{ font-size:14px; line-height:1.5; padding:14px 10px; vertical-align:top; } .icap-admin .wp-list-table .description{ font-size:12.5px; color:#5a6b66; display:inline-block; margin-top:2px; } /* larguras proporcionais ao conteúdo de cada coluna */ .icap-tab-parceiros{ table-layout:auto; } .icap-tab-parceiros th:nth-child(1), .icap-tab-parceiros td:nth-child(1){ width:24%; } .icap-tab-parceiros th:nth-child(2), .icap-tab-parceiros td:nth-child(2){ width:9%; } .icap-tab-parceiros th:nth-child(3), .icap-tab-parceiros td:nth-child(3){ width:16%; } .icap-tab-parceiros th:nth-child(4), .icap-tab-parceiros td:nth-child(4){ width:16%; } .icap-tab-parceiros th:nth-child(5), .icap-tab-parceiros td:nth-child(5){ width:11%; } .icap-tab-parceiros th:nth-child(6), .icap-tab-parceiros td:nth-child(6){ width:10%; } .icap-tab-parceiros th:nth-child(7), .icap-tab-parceiros td:nth-child(7){ width:14%; } /* botões de ação: um por linha, largos e separados */ .icap-tab-parceiros td:last-child .button{ display:block; width:100%; text-align:center; margin:0 0 6px; padding:5px 10px; height:auto; line-height:1.9; } .icap-admin .icap-inline-form{ display:flex; flex-direction:column; gap:6px; margin-top:10px; padding-top:10px; border-top:1px dashed #d4dedb; } .icap-admin .icap-inline-form select{ width:100%; max-width:none; } .icap-admin .icap-inline-form .button{ width:100%; } .icap-admin .icap-admin-ref{ width:100%; font-size:12px; padding:3px 6px; } /* a situação precisa saltar aos olhos */ .icap-admin .icap-pill{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap; } .icap-admin .icap-pill--pending{ background:#fff3cd; color:#6b5300; } .icap-admin .icap-pill--approved{ background:#d7f3e5; color:#13603f; } .icap-admin .icap-pill--rejected{ background:#fadbd8; color:#7b2018; } .icap-admin .icap-pill--suspended{ background:#e6e8ea; color:#3f484d; } .icap-admin .icap-msg-row td{ background:#f7fbfa; font-style:italic; color:#415a53; } /* abas de situação no topo da lista */ .icap-admin .subsubsub{ font-size:14px; margin-bottom:10px; } .icap-admin .subsubsub a{ padding:3px 2px; } @media (max-width:1200px){ .icap-tab-parceiros th:nth-child(4), .icap-tab-parceiros td:nth-child(4), .icap-tab-parceiros th:nth-child(5), .icap-tab-parceiros td:nth-child(5){ width:auto; } } /* Tabelas de comissões e pagamentos: largura automática e ações empilhadas. */ .icap-tab-simples{ table-layout:auto; } .icap-tab-simples td:last-child .button{ display:block; width:100%; text-align:center; margin:0 0 6px; padding:5px 10px; height:auto; line-height:1.9; } .icap-admin .icap-pill--requested{ background:#fff3cd; color:#6b5300; } .icap-admin .icap-pill--paid{ background:#d7f3e5; color:#13603f; } .icap-admin .icap-pill--cancelled{ background:#e6e8ea; color:#3f484d; } /* ------------------------------------------------------------ Tela de Configurações Era um formulário único e plano, com sete assuntos diferentes na mesma sequência. Cada "table.form-table" vira um cartão, e o título acima dele passa a funcionar como separador de assunto — dá para achar o que se procura sem ler tudo. ------------------------------------------------------------ */ .icap-set-card{ background:#fff; border:1px solid #d9e4e0; border-top:3px solid #18a08b; border-radius:14px; margin:0 0 20px; box-shadow:0 2px 6px rgba(20,48,41,.05); } .icap-set-card > h2{ display:flex; align-items:center; gap:12px; margin:0; padding:20px 22px 0; font-size:19px; line-height:1.3; color:#143029; border:0; } .icap-set-desc{ margin:10px 22px 0; font-size:14px; color:#50605c; max-width:72ch; } .icap-set-corpo{ padding:4px 22px 18px; } .icap-set-ico{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; background:#eafaf5; color:#13866c; font-size:20px; line-height:1; } .icap-set h3{ display:flex; align-items:center; gap:10px; margin:22px 0 8px; font-size:16px; color:#2c4740; } .icap-set h3 .icap-set-ico{ width:30px; height:30px; border-radius:9px; font-size:17px; background:#eef3f1; color:#50605c; } /* as tabelas deixam de ser cartao: o cartao agora e a secao inteira */ .icap-set .icap-set-corpo .form-table, .icap-set .icap-set-corpo table.widefat{ background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; margin:0; max-width:none; } .icap-set .form-table th{ font-size:14px; font-weight:600; color:#2c4740; line-height:1.4; padding:16px 24px 16px 0; width:290px; vertical-align:top; } .icap-set .form-table td{ padding:14px 0; font-size:14px; } .icap-set .form-table tr + tr th, .icap-set .form-table tr + tr td{ border-top:1px solid #eef3f1; } .icap-set .form-table .description{ font-size:13px; color:#64756f; margin-top:5px; max-width:70ch; } .icap-set .form-table input[type="text"], .icap-set .form-table input[type="email"], .icap-set .form-table input[type="number"], .icap-set .form-table input[type="password"], .icap-set .form-table select{ font-size:14px; padding:6px 10px; } .icap-set .form-table label{ font-size:14px; } .icap-set .form-table code{ font-size:12.5px; } /* a tabela de faixas volta a ter moldura, porque e uma grade de dados */ .icap-set .icap-set-corpo table.widefat{ border:1px solid #e3eae8; border-radius:10px; overflow:hidden; margin-bottom:14px; } .icap-set table.widefat th{ font-size:13.5px; padding:11px 14px; } .icap-set table.widefat td{ padding:9px 14px; } .icap-set table.widefat input[type="text"]{ width:100%; max-width:200px; } /* botao de salvar sempre a mao: a pagina e longa e ninguem deveria precisar rolar ate o fim para gravar uma mudanca feita no comeco */ .icap-set-salvar{ position:sticky; bottom:0; z-index:20; display:flex; justify-content:flex-end; margin:22px 0 0; padding:14px 18px; background:rgba(255,255,255,.97); border:1px solid #d9e4e0; border-radius:14px; box-shadow:0 -4px 16px rgba(20,48,41,.10); } .icap-set-salvar .button-hero{ font-size:15px; } /* avisos dentro da pagina (ultima falha de envio, conversa do SMTP) */ .icap-set .notice, .icap-set .icap-smtp-log{ border-radius:10px; margin:12px 0; } @media (max-width:782px){ .icap-set-card > h2{ font-size:17px; gap:10px; padding:16px 16px 0; } .icap-set-ico{ width:32px; height:32px; font-size:18px; border-radius:9px; } .icap-set-desc{ margin:8px 16px 0; } .icap-set-corpo{ padding:4px 16px 14px; } .icap-set .form-table th{ width:auto; padding:14px 0 4px; } .icap-set .form-table td{ padding-top:0; } .icap-set-salvar{ padding:12px 14px; } .icap-set-salvar .button-hero{ width:100%; text-align:center; } } /* ------------------------------------------------------------ Painel do parceiro — leitura Mesma premissa das telas do admin: quem usa é lojista e vendedor, boa parte com vista cansada e pouca intimidade com site. Ícone como âncora, número grande e uma frase dizendo para que serve cada aba. ------------------------------------------------------------ */ .icap-intro{ font-size:15px; line-height:1.6; color:#50605c; margin:-6px 0 20px; max-width:680px; } /* cartões de número */ .icap-stat{ position:relative; } .icap-stat-ico{ display:block; font-size:24px; width:24px; height:24px; color:#18a08b; margin-bottom:8px; } .icap-stat-value{ font-size:28px !important; line-height:1.15; display:block; margin-top:2px; } .icap-stat-label{ font-size:12.5px !important; } .icap-stat-hint{ font-size:12.5px; color:#73857f; display:block; margin-top:4px; line-height:1.45; } /* menu lateral com ícone */ .icap-nav a{ display:flex; align-items:center; gap:10px; } .icap-nav a .dashicons{ font-size:19px; width:19px; height:19px; flex:0 0 auto; color:#8aa39c; } .icap-nav a.is-active .dashicons{ color:#18a08b; } .icap-nav a:hover .dashicons{ color:#18a08b; } /* "Fazer novo pedido" é a ação que mais importa para o lojista */ .icap-nav a.icap-nav-destaque{ margin:10px 14px; padding:12px 14px; background:#eefaf4; border:1px solid #9fdcc7; border-radius:10px; font-weight:600; color:#13603f; border-left-width:1px; } .icap-nav a.icap-nav-destaque .dashicons{ color:#1d8a5c; } .icap-nav a.icap-nav-destaque:hover{ background:#dff5ea; } @media (max-width:860px){ .icap-stat-value{ font-size:25px !important; } .icap-intro{ font-size:14.5px; } } /* (as regras de Configurações foram unificadas acima, num bloco só) */ /* ------------------------------------------------------------ Tabelas do admin viram cartao no celular Sete a nove colunas não cabem em 375px: o nome da empresa quebrava letra a letra. Cada linha vira um bloco e cada célula ganha o seu rótulo à esquerda, lido de `data-rotulo`. 782px é o ponto que o próprio WordPress usa para alternar o admin. ------------------------------------------------------------ */ @media (max-width:782px){ .icap-admin .wp-list-table thead{ display:none; } .icap-admin .wp-list-table, .icap-admin .wp-list-table tbody, .icap-admin .wp-list-table tr, .icap-admin .wp-list-table td{ display:block; width:auto; } .icap-admin .wp-list-table{ border:none; background:none; box-shadow:none; padding:0; } .icap-admin .wp-list-table tr{ background:#fff; border:1px solid #d9e4e0; border-radius:14px; margin:0 0 14px; padding:6px 2px; box-shadow:0 2px 6px rgba(20,48,41,.05); } .icap-admin .wp-list-table td{ border:none; padding:9px 14px; display:grid; grid-template-columns:106px minmax(0,1fr); gap:12px; align-items:start; font-size:14px; } .icap-admin .wp-list-table td + td{ border-top:1px solid #eef3f1; } /* o próprio WordPress imprime o rótulo a partir de data-colname; aqui só ajustamos a aparência, mantendo a especificidade dele */ .icap-admin .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column)::before{ content:attr(data-colname); display:block; position:static; float:none; width:auto; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#6b7c77; line-height:1.6; padding:1px 0 0; text-align:left; } /* célula sem rótulo (mensagem do parceiro) ocupa a largura toda */ .icap-admin .wp-list-table td:not([data-colname]){ display:block; } .icap-admin .wp-list-table td:not([data-colname])::before{ content:none; } .icap-admin .icap-msg-row{ background:#f7fbfa; } /* as larguras por coluna só fazem sentido com a tabela de verdade */ .icap-tab-parceiros th, .icap-tab-parceiros td{ width:auto !important; } /* ações: botão largo e separado, fácil de acertar com o dedo */ .icap-admin .wp-list-table td .button{ display:block; width:100%; text-align:center; margin:0 0 8px; padding:8px 12px; height:auto; line-height:1.8; font-size:14px; } .icap-admin .icap-inline-form{ margin-top:8px; } .icap-admin .icap-admin-ref{ font-size:13px; } /* filtros de situação no topo: viram linha rolável em vez de embolar */ .icap-admin .subsubsub{ display:flex; flex-wrap:wrap; gap:4px 10px; float:none; margin:0 0 14px; } .icap-admin .subsubsub li{ margin:0; } } /* telas bem estreitas: o rótulo vai para cima do valor */ @media (max-width:420px){ .icap-admin .wp-list-table td{ grid-template-columns:1fr; gap:2px; } .icap-admin .wp-list-table td::before{ line-height:1.4; } .icap-dash-valor{ font-size:24px; } .icap-set-salvar{ padding:12px 14px; } .icap-set-salvar .button-hero{ width:100%; text-align:center; } } /* ------------------------------------------------------------ Celular estreito (iPhone SE, Androids de 360px) A duas colunas o valor fica espremido e a legenda quebra em três linhas. Um cartão por linha lê melhor e custa só rolagem. ------------------------------------------------------------ */ @media (max-width:420px){ .icap-stats{ grid-template-columns:1fr; gap:12px; } .icap-dash-grade{ grid-template-columns:1fr; } .icap-dash-atalhos{ grid-template-columns:1fr; } .icap-stat{ padding:16px 18px; } .icap-stat-hint{ font-size:12px; } .icap-nav a{ font-size:14px; padding:11px 12px; } } /* ------------------------------------------------------------ Cupons O formulario saiu da table.form-table do WordPress: com rotulo numa coluna estreita e campo na outra, texto longo quebrava em duas linhas e tudo ficava espremido. Aqui o rotulo fica em cima do campo, numa grade que se reorganiza sozinha conforme a largura. ------------------------------------------------------------ */ /* --- lista --- */ .icap-cupom-cod{ display:inline-block; font-size:13.5px; font-weight:700; background:#eef3f1; color:#143029; padding:3px 10px; border-radius:6px; letter-spacing:.3px; } .icap-cupom-valor{ display:block; font-size:16px; color:#143029; } .icap-tab-cupons td{ vertical-align:top; } .icap-tab-cupons td .icap-dash-mini{ display:block; margin-top:3px; } .icap-tab-cupons td .icap-cupom-tag{ display:block; width:fit-content; margin-top:6px; } .icap-cupom-risco > td{ background:#fff6f5 !important; } .icap-cupom-risco > td:first-child{ box-shadow:inset 3px 0 0 #d94f3d; } .icap-cupom-risco .icap-cupom-cod{ background:#fbdedb; color:#8c2316; } .icap-cupom-tag{ background:#fdecea; color:#a3291a; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:3px 9px; border-radius:20px; } .icap-btn-perigo{ color:#a3291a !important; border-color:#e6b3ab !important; } .icap-btn-perigo:hover{ background:#fdecea !important; border-color:#d94f3d !important; } /* --- estado vazio --- */ .icap-vazio{ text-align:center; padding:34px 20px; color:#64756f; } .icap-vazio .dashicons{ font-size:40px; width:40px; height:40px; color:#bcd8d0; } .icap-vazio strong{ display:block; margin-top:10px; font-size:16px; color:#2c4740; } .icap-vazio p{ margin:4px 0 0; font-size:14px; } /* --- formulario --- */ .icap-cupom-form{ margin-top:18px; } .icap-cupom-bloco + .icap-cupom-bloco{ margin-top:26px; padding-top:24px; border-top:1px solid #eef3f1; } .icap-cupom-bloco > h3{ display:flex; align-items:center; gap:8px; margin:0 0 2px; font-size:15px; font-weight:700; color:#143029; } .icap-cupom-bloco > h3 .dashicons{ font-size:18px; width:18px; height:18px; color:#18a08b; } .icap-cupom-nota{ margin:0 0 14px; font-size:13px; color:#8a7324; background:#fffaeb; border:1px solid #f2e2b0; border-radius:9px; padding:8px 12px; } .icap-cupom-grade{ display:grid; gap:18px 20px; margin-top:16px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); } .icap-cf{ margin:0 !important; display:flex; flex-direction:column; gap:6px; } .icap-cf--full{ grid-column:1 / -1; } .icap-cf > label{ font-size:13px; font-weight:700; color:#2c4740; letter-spacing:.2px; } .icap-cf > label em{ color:#d94f3d; font-style:normal; } .icap-cf input[type="text"], .icap-cf input[type="number"], .icap-cf input[type="date"], .icap-cf select, .icap-cf textarea{ width:100%; max-width:none; margin:0; padding:9px 12px; font-size:14px; line-height:1.4; border:1px solid #cfdcd7; border-radius:9px; background:#fff; box-shadow:none; } .icap-cf textarea{ resize:vertical; min-height:62px; } .icap-cf input:focus, .icap-cf select:focus, .icap-cf textarea:focus{ border-color:#18a08b; box-shadow:0 0 0 3px rgba(24,160,139,.15); outline:none; } .icap-cf input::placeholder, .icap-cf textarea::placeholder{ color:#9bada7; } .icap-cf-dica{ font-size:12.5px; color:#64756f; line-height:1.45; } .icap-cf-par{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .icap-cupom-input-cod{ font-weight:700; letter-spacing:.6px; text-transform:uppercase; } /* --- opcoes em caixa, em vez de checkbox solto --- */ .icap-cupom-opcoes{ display:grid; gap:10px; margin-top:14px; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); } .icap-opt{ display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border:1px solid #e3eae8; border-radius:11px; background:#fbfdfc; cursor:pointer; transition:border-color .12s, background .12s; } .icap-opt:hover{ border-color:#bcd8d0; background:#f6fbf9; } .icap-opt input{ margin:3px 0 0; flex:0 0 auto; } .icap-opt strong{ display:block; font-size:13.5px; color:#2c4740; margin-bottom:2px; } .icap-opt span{ font-size:12.5px; color:#64756f; line-height:1.45; } .icap-opt:has(input:checked){ border-color:#18a08b; background:#f1fbf8; } .icap-opt:has(input:checked) strong{ color:#0f6b56; } @media (max-width:782px){ .icap-cupom-risco > td:first-child{ box-shadow:none; border-left:3px solid #d94f3d; } .icap-cupom-grade{ grid-template-columns:1fr; gap:16px; } .icap-cupom-opcoes{ grid-template-columns:1fr; } .icap-cupom-bloco + .icap-cupom-bloco{ margin-top:22px; padding-top:20px; } } @media (max-width:420px){ .icap-cf-par{ grid-template-columns:1fr; } } /* ------------------------------------------------------------ Respiro entre os blocos A grade de cartoes nao tinha margem embaixo: o cartao de numero encostava na secao seguinte e os dois pareciam um bloco so. ------------------------------------------------------------ */ .icap-dash-grade{ margin-bottom:26px; } .icap-dash-alerta{ margin-bottom:22px; } .icap-dash-sub{ margin-bottom:22px; } .icap-dash-grade + .icap-set-card, .icap-dash-alerta + .icap-set-card{ margin-top:0; } /* ------------------------------------------------------------ Modal de edicao Renderizado no servidor: fechar e um link de volta para a lista, entao funciona sem JavaScript. O JS so adiciona Esc e o foco. ------------------------------------------------------------ */ .icap-modal{ position:fixed; inset:0; z-index:100100; display:flex; align-items:flex-start; justify-content:center; padding:48px 16px; overflow:auto; } .icap-modal-fundo{ position:fixed; inset:0; display:block; background:rgba(12,34,28,.55); } .icap-modal-caixa{ position:relative; width:min(880px, 100%); background:#fff; border-radius:16px; border-top:4px solid #18a08b; box-shadow:0 26px 70px rgba(10,30,25,.32); animation:icapModalSobe .16s ease-out; } @keyframes icapModalSobe{ from{ transform:translateY(10px); opacity:0; } to{ transform:none; opacity:1; } } .icap-modal-topo{ display:flex; align-items:center; gap:12px; padding:20px 22px 0; } .icap-modal-topo h2{ flex:1; margin:0; padding:0; border:0; display:flex; align-items:center; gap:12px; font-size:19px; line-height:1.3; color:#143029; } .icap-modal-x{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:26px; line-height:1; text-decoration:none; color:#64756f; background:#f3f7f5; } .icap-modal-x:hover{ background:#e6efec; color:#143029; } .icap-modal-corpo{ padding:4px 22px 20px; } .icap-modal-corpo .icap-set-salvar{ position:static; box-shadow:none; } @media (max-width:782px){ .icap-modal{ padding:16px 10px; } .icap-modal-topo{ padding:16px 16px 0; } .icap-modal-topo h2{ font-size:17px; } .icap-modal-corpo{ padding:4px 16px 16px; } } /* ------------------------------------------------------------ Largura e respiro do painel do parceiro 1180px com uma barra lateral de 250px deixava menos de 880px para a tabela de precos, que ja tem 8 colunas. Em monitor grande ficava tudo espremido no meio da tela, com margem cinza enorme dos dois lados. ------------------------------------------------------------ */ .icap-wrap{ max-width:1440px; padding:0 32px; } .icap-panel{ grid-template-columns:260px minmax(0,1fr); gap:34px; } .icap-card, .icap-box{ padding:30px; margin:0 0 26px; } .icap-stats{ gap:20px; margin:0 0 30px; } .icap-tiers{ gap:22px; } .icap-main > h2{ font-size:28px; margin:0 0 6px; } .icap-main > .icap-intro{ margin:0 0 24px; font-size:15.5px; } /* ------------------------------------------------------------ Tabela de precos: rola de lado em vez de espremer Com o cabecalho e a coluna do produto fixos, da para chegar na ultima faixa sem perder de vista de que produto e aquele preco. ------------------------------------------------------------ */ .icap-price-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--icap-line); border-radius:var(--icap-radius); background:#fff; } .icap-price-table{ min-width:1040px; margin:0; border:0; border-radius:0; } .icap-price-table thead th{ position:sticky; top:0; z-index:2; background:var(--icap-bg); } .icap-price-table th:first-child, .icap-price-table td:first-child{ position:sticky; left:0; z-index:1; background:#fff; min-width:240px; box-shadow:1px 0 0 var(--icap-line); } .icap-price-table thead th:first-child{ z-index:3; background:var(--icap-bg); } .icap-price-table tbody tr:nth-child(even) td{ background:#fbfcfd; } .icap-price-table tbody tr:nth-child(even) td:first-child{ background:#fbfcfd; } .icap-price-table th, .icap-price-table td{ white-space:nowrap; } .icap-price-table td:first-child{ white-space:normal; } @media (max-width:1200px){ .icap-wrap{ padding:0 24px; } } @media (max-width:1024px){ .icap-panel{ grid-template-columns:220px minmax(0,1fr); gap:24px; } .icap-wrap{ padding:0 20px; } } @media (max-width:860px){ .icap-panel{ grid-template-columns:1fr; } .icap-card, .icap-box{ padding:24px; } .icap-main > h2{ font-size:24px; } } @media (max-width:640px){ .icap-price-table th:first-child, .icap-price-table td:first-child{ min-width:160px; } .icap-price-table{ min-width:760px; } } /* ---- Tabela de Precos no admin ---- */ .icap-precos-rolagem{ overflow-x:auto; border:1px solid #e3eae8; border-radius:10px; background:#fff; } .icap-tab-precos{ min-width:900px; border:0; } .icap-tab-precos thead th{ position:sticky; top:0; z-index:2; background:#f3f7f5; } .icap-tab-precos th:first-child, .icap-tab-precos td:first-child{ position:sticky; left:0; z-index:1; background:#fff; min-width:250px; box-shadow:1px 0 0 #e3eae8; } .icap-tab-precos thead th:first-child{ z-index:3; background:#f3f7f5; } .icap-tab-precos tbody tr:nth-child(even) td, .icap-tab-precos tbody tr:nth-child(even) td:first-child{ background:#fafcfb; } /* o campo em branco herda o percentual; preenchido, fica destacado */ .icap-preco-campo{ width:110px; text-align:right; padding:6px 9px; border:1px solid #cfdcd7; border-radius:8px; } .icap-preco-campo::placeholder{ color:#a7b8b2; } .icap-preco-campo.is-fixo{ border-color:#e0a800; background:#fffdf3; font-weight:700; } .icap-preco-campo:focus{ border-color:#18a08b; box-shadow:0 0 0 3px rgba(24,160,139,.15); outline:none; } @media (max-width:782px){ .icap-tab-precos{ min-width:0; } .icap-precos-rolagem{ border:0; } } /* produto publicado sem preco: aparece, mas sem fingir que tem valor */ .icap-sem-preco{ color:#a7b8b2; font-style:italic; } /* ------------------------------------------------------------ Cupom de boas-vindas: barra no topo e pop-up ------------------------------------------------------------ */ .icap-barra{ position:relative; z-index:9000; background:linear-gradient(90deg,#0f7a63,#15a383); color:#fff; font-size:14px; line-height:1.4; padding:10px 46px 10px 16px; } .icap-barra-in{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px; max-width:1200px; margin:0 auto; } .icap-barra-ico{ font-weight:800; background:rgba(255,255,255,.2); width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:13px; } .icap-barra-txt strong{ font-weight:700; } .icap-barra-cod{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:#fff; color:#0f7a63; border:0; border-radius:999px; padding:5px 14px; font:700 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.6px; } .icap-barra-cod:hover{ background:#eafaf5; } .icap-barra-copiar{ font:600 11px/1 inherit; text-transform:uppercase; letter-spacing:.4px; opacity:.6; } .icap-barra-cod.is-copiado .icap-barra-copiar::after{ content:'ado!'; } .icap-barra-prazo{ font-size:12.5px; opacity:.85; } .icap-barra-x{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:0; color:#fff; font-size:24px; line-height:1; cursor:pointer; opacity:.7; padding:0 6px; } .icap-barra-x:hover{ opacity:1; } .icap-pop{ position:fixed; inset:0; z-index:99000; display:flex; align-items:center; justify-content:center; padding:20px; } .icap-pop[hidden]{ display:none; } .icap-pop-fundo{ position:absolute; inset:0; background:rgba(10,30,25,.55); } .icap-pop-caixa{ position:relative; width:min(420px,100%); background:#fff; border-radius:18px; padding:34px 30px 30px; text-align:center; box-shadow:0 24px 60px rgba(10,30,25,.32); animation:icapPopSobe .22s ease-out; } @keyframes icapPopSobe{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } } .icap-pop-x{ position:absolute; top:10px; right:12px; background:none; border:0; font-size:26px; line-height:1; color:#9bada7; cursor:pointer; } .icap-pop-x:hover{ color:#143029; } .icap-pop-selo{ display:inline-block; background:#eafaf5; color:#0f7a63; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; padding:5px 13px; border-radius:999px; } .icap-pop-caixa h3{ margin:14px 0 8px; font-size:24px; line-height:1.25; color:#143029; } .icap-pop-caixa p{ margin:0 0 18px; font-size:14.5px; line-height:1.55; color:#5c6d67; } .icap-pop-cod{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; cursor:pointer; background:#f3faf8; border:2px dashed #7fc9b4; border-radius:12px; padding:14px; } .icap-pop-cod:hover{ background:#eafaf5; border-color:#15a383; } .icap-pop-cod span{ font:800 20px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:1.5px; color:#0f7a63; } .icap-pop-cod em{ font:600 11.5px/1 inherit; font-style:normal; text-transform:uppercase; letter-spacing:.5px; color:#8aa39b; } .icap-pop-cod.is-copiado em::after{ content:'ado!'; } .icap-pop-obs{ margin:12px 0 0 !important; font-size:12.5px !important; } .icap-pop-btn{ display:block; margin-top:18px; background:#0f7a63; color:#fff; text-decoration:none; border-radius:10px; padding:13px; font-weight:700; font-size:15px; } .icap-pop-btn:hover{ background:#0c6450; color:#fff; } @media (max-width:640px){ .icap-barra{ font-size:13px; padding:9px 38px 9px 12px; } .icap-barra-prazo{ display:none; } .icap-pop-caixa{ padding:30px 22px 24px; } .icap-pop-caixa h3{ font-size:21px; } } /* === blindagem do cupom contra o tema === */ /* o tema estiliza todo