/* ============================================================ Clic Rádio Produtora — identidade da área do cliente Fork do Twenty-One. Carregado pelo próprio tema via {assetExists file="custom.css"} em includes/head.tpl. Regra deste arquivo: tudo que der para resolver em CSS fica aqui, e não nos .tpl. Assim, quando o WHMCS atualizar o Twenty-One, comparar os templates e trazer as novidades continua sendo um trabalho pequeno. O Bootstrap 4 do tema compila as cores no build, então não adianta redefinir variáveis: é preciso sobrescrever os seletores reais. É o que este arquivo faz. ============================================================ */ @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/bebas-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/bebas-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB; } :root { --clic-roxo: #6b48ed; --clic-roxo-hover: #5537c9; --clic-laranja: #fb6107; --clic-marinho: #0e1c36; --clic-lima: #c6f806; --clic-superficie: #ffffff; --clic-fundo: #f4f2fb; --clic-borda: #e4e0f2; --clic-borda-forte: #cec8e6; --clic-titulo: #0e1c36; --clic-suave: #6d6987; --clic-sombra: 0 1px 2px rgba(14,28,54,.05), 0 8px 24px -14px rgba(107,72,237,.28); --clic-display: 'Bebas Neue', Impact, sans-serif; } /* ---------------- base ---------------- */ /* o tema aplica .primary-bg-color no próprio , e uma classe vence um seletor de elemento — por isso alcançamos a classe também */ body, body.primary-bg-color { background: var(--clic-fundo); color: #3a3750; } a { color: var(--clic-roxo); } a:hover, a:focus { color: var(--clic-roxo-hover); } h1, h2, h3, .h1, .h2, .h3, .card-title, .panel-title, .page-header h1 { font-family: var(--clic-display); letter-spacing: .015em; color: var(--clic-titulo); } h1, .h1 { font-size: 34px; } h2, .h2 { font-size: 28px; } h3, .h3 { font-size: 23px; } /* ---------------- cabeçalho ---------------- */ header.header { background: var(--clic-superficie); border-bottom: 1px solid var(--clic-borda); } header.header .logo-img { max-height: 44px; width: auto; } .navbar-main, #main-menu .navbar, .navbar.navbar-expand-lg { background: var(--clic-marinho); } .navbar-main .nav-link, #main-menu .nav-link { color: #cdd3e4; font-size: 14.5px; } .navbar-main .nav-link:hover, .navbar-main .nav-link:focus, #main-menu .nav-link:hover { color: #fff; } .navbar-main .nav-item.active > .nav-link, #main-menu .nav-item.active > .nav-link { color: var(--clic-lima); } /* ---------------- botões ---------------- */ .btn { border-radius: 9px; font-weight: 600; letter-spacing: .01em; } .btn-primary, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--clic-roxo); border-color: var(--clic-roxo); } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active:hover { background-color: var(--clic-roxo-hover); border-color: var(--clic-roxo-hover); } .btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 3px rgba(107, 72, 237, .3); } .btn-outline-primary { color: var(--clic-roxo); border-color: var(--clic-borda-forte); } .btn-outline-primary:hover { background-color: var(--clic-roxo); border-color: var(--clic-roxo); } .btn-success { background-color: #1a9d63; border-color: #1a9d63; } .btn-success:hover { background-color: #158354; border-color: #158354; } .btn-link { color: var(--clic-roxo); } /* ---------------- cartões e painéis ---------------- */ .card, .panel { background: var(--clic-superficie); border: 1px solid var(--clic-borda); border-radius: 14px; box-shadow: var(--clic-sombra); } .card-header, .panel-heading { background: transparent; border-bottom: 1px solid var(--clic-borda); font-family: var(--clic-display); font-size: 17px; letter-spacing: .05em; color: var(--clic-titulo); } .card-footer { background: transparent; border-top: 1px solid var(--clic-borda); } /* ---------------- formulários ---------------- */ .form-control { border: 1px solid var(--clic-borda-forte); border-radius: 9px; color: var(--clic-titulo); } .form-control:focus { border-color: var(--clic-roxo); box-shadow: 0 0 0 3px rgba(107, 72, 237, .14); } label { color: var(--clic-suave); font-size: 13.5px; } .custom-select { border-radius: 9px; border-color: var(--clic-borda-forte); } /* ---------------- tabelas ---------------- */ .table thead th { border-bottom: 1px solid var(--clic-borda); font-family: var(--clic-display); font-size: 14px; letter-spacing: .06em; color: var(--clic-suave); text-transform: uppercase; } .table td, .table th { border-top-color: var(--clic-borda); } .table-hover tbody tr:hover { background: rgba(107, 72, 237, .04); } /* ---------------- avisos e selos ---------------- */ .alert { border-radius: 11px; border-width: 1px; } .alert-info { background: rgba(107, 72, 237, .07); border-color: var(--clic-borda); color: var(--clic-titulo); } .badge { border-radius: 20px; font-weight: 600; letter-spacing: .02em; } .badge-primary { background: var(--clic-roxo); } /* estados de serviço e fatura mantêm o significado da cor: verde ativo, laranja pendente, vermelho problema */ .label-active, .badge-active, .status-active { background: #1a9d63; } .label-pending, .badge-pending, .status-pending { background: var(--clic-laranja); } /* ---------------- barra lateral ---------------- */ .sidebar .list-group-item, .panel-sidebar .list-group-item { border-color: var(--clic-borda); color: #3a3750; } .sidebar .list-group-item.active, .panel-sidebar .list-group-item.active { background: var(--clic-roxo); border-color: var(--clic-roxo); color: #fff; } .sidebar .panel-heading, .sidebar .card-header { font-family: var(--clic-display); letter-spacing: .05em; } /* ---------------- painel inicial ---------------- */ .home-shortcuts .btn, .btn-shortcut { border-radius: 12px; border: 1px solid var(--clic-borda); background: var(--clic-superficie); color: var(--clic-titulo); } .home-shortcuts .btn:hover, .btn-shortcut:hover { border-color: var(--clic-roxo); color: var(--clic-roxo); } /* ---------------- rodapé ---------------- */ footer.footer { background: var(--clic-marinho); color: #aab2c8; border-top: 0; } footer.footer a { color: #dfe4f2; } footer.footer a:hover { color: var(--clic-lima); } /* ---------------- paginação ---------------- */ .page-item.active .page-link { background: var(--clic-roxo); border-color: var(--clic-roxo); } .page-link { color: var(--clic-roxo); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ============================================================ Cabeçalho e rodapé enxutos do checkout ============================================================ */ .clic-checkout-topo { background: var(--clic-superficie); border-bottom: 1px solid var(--clic-borda); padding: 14px 0; } .clic-checkout-topo .container { display: flex; align-items: center; gap: 18px; } .clic-checkout-marca { margin-right: auto; line-height: 0; } .clic-checkout-marca img { max-height: 40px; width: auto; } .clic-checkout-seguro { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #1a9d63; } .clic-checkout-seguro i { font-size: 12px; } .clic-checkout-ajuda { font-size: 13.5px; color: var(--clic-roxo); } .clic-checkout-ajuda:hover { color: var(--clic-roxo-hover); } .clic-checkout-rodape { background: transparent; border-top: 1px solid var(--clic-borda); padding: 18px 0; margin-top: 40px; } .clic-checkout-rodape .container { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; font-size: 12.5px; color: var(--clic-suave); } .clic-checkout-rodape a { color: var(--clic-suave); text-decoration: underline; } .clic-checkout-rodape a:hover { color: var(--clic-roxo); } @media (max-width: 560px) { .clic-checkout-topo .container { flex-wrap: wrap; gap: 10px; } .clic-checkout-marca { margin-right: 0; width: 100%; } } /* ============================================================ Painel inicial — largura dos cartões O tema distribui os painéis em duas colunas e cada painel traz o próprio .row interno. Quando um painel entra dentro de outro, a largura vai sendo dividida e os últimos ficam espremidos. Fixamos a largura para cortar essa cascata. ============================================================ */ .client-home-cards > .row { align-items: flex-start; } .client-home-cards .card { width: 100%; } .client-home-cards .row.w-100 { margin-left: 0; margin-right: 0; } .client-home-cards [class*="col-"] { min-width: 0; } /* títulos de painel: sem espaçamento exagerado, para não quebrar palavras curtas em caixas estreitas */ .client-home-cards .card-title, .card-header .card-title { letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* listas internas com rolagem própria ficavam com poucos pixels de altura; damos espaço para ao menos um item respirar */ .client-home-cards .card-body { min-height: 0; } .client-home-cards .card-body [style*="overflow"] { max-height: none !important; } /* números do topo (serviços, domínios, tickets, faturas) */ .client-home-panels .number, .row.no-gutters .h1 { font-family: var(--clic-display); color: var(--clic-titulo); } /* ============================================================ Painéis do painel inicial — grade previsível ============================================================ */ .clic-paineis { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; align-items: start; } .clic-paineis > .card { width: 100%; margin: 0; } .clic-paineis > .card.clic-painel-largo { grid-column: 1 / -1; } .clic-paineis .card-body { min-height: 0; } /* listas com rolagem interna ficavam com poucos pixels de altura */ .clic-paineis .card-body > div[style*="height"] { max-height: none !important; height: auto !important; } .clic-paineis .card-footer:empty { display: none; } @media (max-width: 700px) { .clic-paineis { grid-template-columns: 1fr; } } /* ============================================================ Legibilidade da Bebas Neue sobre cor cheia O traço da fonte é estreito e, em caixa alta sobre fundo colorido, as letras se encostam. Mais espaçamento resolve sem precisar trocar a fonte. ============================================================ */ .btn[class*="bg-color-"], .btn-xs[class*="bg-color-"], .card-header .btn, .clic-paineis .card-header .btn { font-family: var(--clic-display); letter-spacing: .11em; padding-left: 11px; padding-right: 9px; } .badge, .label { letter-spacing: .06em; } /* títulos de painel: caixa alta pede mais respiro entre letras */ .card-header .card-title, .clic-paineis .card-title { letter-spacing: .06em; } /* botões grandes da marca também ganham um pouco de folga */ .clic-oferta-botao, .clic-modal-botao, .pv-botao { letter-spacing: .08em; } /* ============================================================ Contraste dos selos e botões de destaque As cores de destaque do tema com texto branco reprovam no critério AA (4.5:1) — medidas: laranja 3,1:1, verde 2,4:1, azul 2,0:1, dourado 2,0:1. Em caixa alta e corpo pequeno, fica de fato difícil de ler. Solução: texto marinho sobre as cores claras, que mantém a cor viva da marca e sobe o contraste (laranja passa a 5,7:1); e escurecimento das poucas cores onde o branco é melhor. ============================================================ */ .btn.bg-color-orange, .badge.bg-color-orange, .bg-color-orange, .btn.bg-color-green, .badge.bg-color-green, .bg-color-green, .btn.bg-color-blue, .badge.bg-color-blue, .bg-color-blue, .btn.bg-color-gold, .badge.bg-color-gold, .bg-color-gold, .btn.bg-color-lime, .badge.bg-color-lime, .bg-color-lime, .btn.bg-color-emerald,.badge.bg-color-emerald,.bg-color-emerald, .btn.bg-color-pink, .badge.bg-color-pink, .bg-color-pink, .btn.bg-color-asbestos,.badge.bg-color-asbestos,.bg-color-asbestos { color: var(--clic-marinho); font-weight: 700; text-shadow: none; } /* o laranja da marca lê melhor que o do tema e é nosso */ .btn.bg-color-orange, .badge.bg-color-orange, .bg-color-orange { background-color: var(--clic-laranja); } /* cores escuras o bastante para o branco: só ajustamos as duas que ficavam por um fio abaixo do mínimo */ .btn.bg-color-red, .badge.bg-color-red, .bg-color-red { background-color: #c9302c; } .btn.bg-color-amethyst, .badge.bg-color-amethyst, .bg-color-amethyst { background-color: #8e44ad; } .btn.bg-color-magenta, .badge.bg-color-magenta, .bg-color-magenta { background-color: #cc0079; } .btn.bg-color-red, .btn.bg-color-amethyst, .btn.bg-color-magenta, .btn.bg-color-midnight, .badge.bg-color-red, .badge.bg-color-amethyst, .badge.bg-color-magenta, .badge.bg-color-midnight { color: #fff; } /* selos de situação do serviço mantêm o significado da cor, agora com contraste suficiente */ .badge-active, .status-active, .label-active { background: #157347; color: #fff; } .badge-pending, .status-pending, .label-pending { background: var(--clic-laranja); color: var(--clic-marinho); font-weight: 700; } /* ============================================================ Fatura — primeira dobra dedicada ao pagamento ============================================================ */ .invoice-container { max-width: 980px; } .clic-fatura-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--clic-borda); } .clic-fatura-marca img { max-height: 58px; width: auto; } .clic-fatura-numero { margin: 12px 0 0; font-family: var(--clic-display); font-size: 30px; letter-spacing: .02em; color: var(--clic-titulo); } .clic-fatura-situacao { text-align: right; display: grid; gap: 7px; justify-items: end; } .clic-fatura-venc { font-size: 13.5px; color: var(--clic-suave); } .clic-fatura-venc b { color: var(--clic-titulo); } .clic-selo { display: inline-block; padding: 6px 15px; border-radius: 20px; font-family: var(--clic-display); font-size: 17px; letter-spacing: .09em; } .clic-selo-unpaid { background: var(--clic-laranja); color: var(--clic-marinho); font-weight: 700; } .clic-selo-paid { background: #157347; color: #fff; } .clic-selo-draft { background: #6c757d; color: #fff; } .clic-selo-cancelled { background: #6c757d; color: #fff; } .clic-selo-refunded { background: #0d6efd; color: #fff; } .clic-selo-collections { background: #c9302c; color: #fff; } /* ---------- área de pagamento ---------- */ .clic-pagamento { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0; margin-bottom: 28px; border: 1px solid var(--clic-borda); border-radius: 16px; overflow: hidden; box-shadow: var(--clic-sombra-alta); } .clic-pagamento-resumo { padding: 24px 24px 26px; background: var(--clic-marinho); color: #dfe4f2; } .clic-pagamento-resumo .clic-rot { display: block; font-family: var(--clic-display); font-size: 15px; letter-spacing: .1em; color: #97a3bd; margin-bottom: 2px; } .clic-pagamento-valor { display: block; font-family: var(--clic-display); font-size: 46px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .clic-pagamento-venc { display: block; margin-top: 8px; font-size: 13.5px; color: #b9c3d6; } .clic-pagamento-venc b { color: var(--clic-lima); } .clic-troca { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); } .clic-troca label { display: block; margin-bottom: 7px; font-family: var(--clic-display); font-size: 16px; letter-spacing: .05em; color: #fff; } .clic-troca select { width: 100%; padding: 11px 13px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; background: rgba(255,255,255,.08); color: #fff; font-size: 15px; cursor: pointer; } .clic-troca select option { color: #111; } .clic-troca select:focus { outline: none; border-color: var(--clic-lima); } .clic-troca small { display: block; margin-top: 7px; font-size: 12px; color: #97a3bd; } .clic-troca strong { color: #fff; } .clic-pagamento-acao { padding: 24px; background: var(--clic-superficie); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .clic-pagamento-acao img { max-width: 220px; height: auto; } .clic-pagamento-acao p { margin-bottom: 10px; font-size: 14px; color: var(--clic-suave); } /* chave copiável */ .clic-pagamento-acao .clic-chave { width: 100%; max-width: 420px; padding: 11px 13px; margin-top: 6px; border: 1px solid var(--clic-borda-forte); border-radius: 9px; background: #faf9fe; color: var(--clic-titulo); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; text-align: center; cursor: pointer; } .clic-btn-copiar { margin-top: 10px; padding: 11px 22px; border: 0; border-radius: 9px; background: var(--clic-roxo); color: #fff; cursor: pointer; font-family: var(--clic-display); font-size: 17px; letter-spacing: .08em; transition: background .16s ease; } .clic-btn-copiar:hover { background: var(--clic-roxo-hover); } .clic-btn-copiar.copiado { background: #157347; } /* ---------- cópia em PDF ---------- */ .clic-copia { clear: both; margin-top: 26px; } .clic-copia-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 14px; background: rgba(251, 97, 7, .07); border: 1px solid rgba(251, 97, 7, .28); border-radius: 11px; font-size: 13.5px; line-height: 1.55; color: var(--clic-suave); } .clic-copia-aviso strong { display: block; color: var(--clic-titulo); } .clic-copia-aviso b { color: var(--clic-laranja); } .clic-copia-icone { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--clic-laranja); color: var(--clic-marinho); display: grid; place-items: center; font-family: var(--clic-display); font-size: 14px; font-weight: 700; } .clic-copia-botoes { display: flex; flex-wrap: wrap; gap: 10px; } .clic-btn-secundario { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--clic-borda-forte); border-radius: 9px; background: #fff; color: var(--clic-titulo); font-size: 14px; text-decoration: none; transition: border-color .16s ease, color .16s ease; } .clic-btn-secundario:hover { border-color: var(--clic-roxo); color: var(--clic-roxo); text-decoration: none; } /* ---------- tabelas ---------- */ .invoice-container .card-title { font-family: var(--clic-display); letter-spacing: .04em; } .invoice-container table th { color: var(--clic-titulo); } @media (max-width: 780px) { .clic-pagamento { grid-template-columns: 1fr; } .clic-fatura-situacao { text-align: left; justify-items: start; } } @media print { .clic-pagamento, .clic-copia { display: none !important; } } .clic-selo-payment-pending { background: #0d6efd; color: #fff; } /* ============================================================ Fatura — ajustes de largura, recuo e legibilidade ============================================================ */ /* O invoice.min.css do WHMCS impõe max-width 850px e padding 70px. Isso empurrava as informações de pagamento para fora da primeira dobra. */ .invoice-container { max-width: none; width: auto; margin: 18px 22px; padding: 26px 30px 34px; border-radius: 16px; border-color: var(--clic-borda); } .clic-fatura-topo { padding-bottom: 16px; margin-bottom: 18px; } .clic-fatura-marca img { max-height: 48px; } .clic-fatura-numero { margin-top: 8px; font-size: 26px; } /* ---------- selo de situação ---------- A Bebas é condensada e de traço fino: num selo pequeno sobre cor cheia ela perde legibilidade mesmo com o contraste dentro do critério. Aqui a função é informar, não decorar — então usamos a fonte de texto, com peso de verdade em vez de negrito sintético. */ .clic-selo { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 7px 16px; } .clic-selo-unpaid { background: var(--clic-laranja); color: var(--clic-marinho); } /* ---------- área do gateway ---------- O conteúdo aqui vem pronto de cada módulo de pagamento e pode ser qualquer coisa: parágrafos, tabelas de taxas, avisos, botões. Garantimos cor legível e espaço para tudo, em vez de assumir que virá só um QR. */ .clic-pagamento-acao { align-items: stretch; justify-content: flex-start; color: var(--clic-titulo); font-size: 14.5px; line-height: 1.55; min-height: 230px; } .clic-pagamento-acao > * { max-width: 100%; } .clic-pagamento-acao p, .clic-pagamento-acao div, .clic-pagamento-acao span, .clic-pagamento-acao li, .clic-pagamento-acao td, .clic-pagamento-acao th, .clic-pagamento-acao label { color: var(--clic-titulo); } /* texto claro demais para fundo branco vira ilegível */ .clic-pagamento-acao [style*="color:#fff"], .clic-pagamento-acao [style*="color: #fff"], .clic-pagamento-acao [style*="color:white"], .clic-pagamento-acao [style*="color: white"] { color: var(--clic-titulo) !important; } .clic-pagamento-acao strong, .clic-pagamento-acao b { color: var(--clic-titulo); } .clic-pagamento-acao a { color: var(--clic-roxo); } .clic-pagamento-acao table { width: 100%; margin: 10px 0; font-size: 13.5px; border-collapse: collapse; } .clic-pagamento-acao table td, .clic-pagamento-acao table th { padding: 7px 9px; border-bottom: 1px solid var(--clic-borda); } .clic-pagamento-acao img { max-width: 100%; height: auto; margin: 0 auto; display: block; } /* o botão que cada gateway envia ganha o mesmo peso visual */ .clic-pagamento-acao input[type="submit"], .clic-pagamento-acao button:not(.clic-btn-copiar), .clic-pagamento-acao .btn { display: inline-block; margin: 12px auto 0; padding: 13px 30px; border: 0; border-radius: 10px; background: var(--clic-roxo); color: #fff; font-family: var(--clic-display); font-size: 19px; letter-spacing: .08em; cursor: pointer; text-decoration: none; transition: background .16s ease; } .clic-pagamento-acao input[type="submit"]:hover, .clic-pagamento-acao button:not(.clic-btn-copiar):hover, .clic-pagamento-acao .btn:hover { background: var(--clic-roxo-hover); color: #fff; } /* quando o gateway manda pouca coisa, o conteúdo fica centrado */ .clic-pagamento-acao.clic-pouco { align-items: center; justify-content: center; text-align: center; } @media (max-width: 640px) { .invoice-container { margin: 10px; padding: 18px 16px 26px; } }