Escopado em .nk-app-root porque o reset.css (que define .trigger com fundo escuro) é re-injetado no pelo widget de comentários: a especificidade extra garante que o estilo claro prevaleça também nas páginas de artigo/página. =========================================================================== */ .nk-app-root .trigger { position: relative; display: block; width: 100%; padding: 1rem 1.25rem; margin-bottom: 1.5rem; border-radius: 0.5rem; border: 1px solid transparent; font-size: 0.9375rem; line-height: 1.5; background: var(--bs-secondary-bg, #f5f6fa); color: var(--bs-body-color, #526484); } .nk-app-root .trigger b { font-weight: 700; } .nk-app-root .trigger .ajax_close { display: none; } .nk-app-root .trigger_info { color: var(--bs-info, #0b58c2); background: rgba(var(--bs-info-rgb, 11, 88, 194), .1); border-color: rgba(var(--bs-info-rgb, 11, 88, 194), .25); } .nk-app-root .trigger_success { color: var(--bs-success, #0a8f6c); background: rgba(var(--bs-success-rgb, 10, 143, 108), .1); border-color: rgba(var(--bs-success-rgb, 10, 143, 108), .25); } .nk-app-root .trigger_alert { color: var(--bs-warning, #9a6700); background: rgba(var(--bs-warning-rgb, 154, 103, 0), .1); border-color: rgba(var(--bs-warning-rgb, 154, 103, 0), .25); } .nk-app-root .trigger_error { color: var(--bs-danger, #c0334a); background: rgba(var(--bs-danger-rgb, 192, 51, 74), .1); border-color: rgba(var(--bs-danger-rgb, 192, 51, 74), .25); } /* =========================================================================== 3. Paginação do Pager ->

=========================================================================== */ .paginator { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.375rem; list-style: none; padding: 0; margin: 2.5rem 0 0; } .paginator li { display: inline-flex; } .paginator li a, .paginator li span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.375rem; height: 2.375rem; padding: 0 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; border: 1px solid var(--bs-border-color, #dbdfea); color: var(--bs-body-color, #526484); background: var(--bs-card-bg, #fff); transition: all 0.2s ease; } .paginator li a:hover { border-color: var(--bs-primary, #6576ff); color: var(--bs-primary, #6576ff); } .paginator li span.active { background: var(--bs-primary, #6576ff); border-color: var(--bs-primary, #6576ff); color: #fff; } /* =========================================================================== 4. Cards de post (listagens: artigos, pesquisa, relacionados, 404) Usa o .card do DashLite + capa com proporção fixa. =========================================================================== */ .post-card { height: 100%; overflow: hidden; } .post-card .post-thumb { display: block; position: relative; overflow: hidden; background: var(--bs-secondary-bg, #f5f6fa); } .post-card .post-thumb::before { content: ""; display: block; padding-top: 56.25%; /* 16:9 */ } .post-card .post-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .post-card:hover .post-thumb img { transform: scale(1.05); } .post-card .post-body { padding: 1.25rem 1.5rem 1.5rem; } .post-card .post-title { font-size: 1.125rem; line-height: 1.4; margin: 0 0 0.5rem; } .post-card .post-title a { color: var(--bs-heading-color, #364a63); text-decoration: none; } .post-card .post-title a:hover { color: var(--bs-primary, #6576ff); } .post-card .post-text { color: var(--bs-secondary-color, #8094ae); font-size: 0.9375rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* =========================================================================== 5. Tipografia do conteúdo gerado pelo editor (.htmlchars) =========================================================================== */ .nk-prose { color: var(--bs-body-color, #526484); font-size: 1.0625rem; line-height: 1.7; } .nk-prose > :first-child { margin-top: 0; } .nk-prose h1, .nk-prose h2, .nk-prose h3, .nk-prose h4, .nk-prose h5, .nk-prose h6 { color: var(--bs-heading-color, #364a63); font-weight: 700; line-height: 1.3; margin: 2rem 0 1rem; } .nk-prose h2 { font-size: 1.5rem; } .nk-prose h3 { font-size: 1.25rem; } .nk-prose p { margin: 0 0 1.25rem; } .nk-prose a { color: var(--bs-primary, #6576ff); text-decoration: underline; } /* reset.css aplica ul{list-style:none} e *{padding:0} globalmente; re-estabelece marcadores e recuo para o conteúdo do editor. */ .nk-prose ul { list-style: disc; margin: 0 0 1.25rem; padding-left: 1.5rem; } .nk-prose ol { list-style: decimal; margin: 0 0 1.25rem; padding-left: 1.5rem; } .nk-prose li { margin-bottom: 0.5rem; } .nk-prose img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1rem 0; } .nk-prose blockquote { border-left: 4px solid var(--bs-primary, #6576ff); background: var(--bs-secondary-bg, #f5f6fa); margin: 1.5rem 0; padding: 1rem 1.5rem; border-radius: 0 0.5rem 0.5rem 0; color: var(--bs-heading-color, #364a63); } .nk-prose table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; } .nk-prose th, .nk-prose td { border: 1px solid var(--bs-border-color, #dbdfea); padding: 0.625rem 0.875rem; } .nk-prose pre { background: #1f2b3a; color: #e9edf2; padding: 1rem 1.25rem; border-radius: 0.5rem; overflow: auto; margin: 1.5rem 0; } .nk-prose code { font-size: 0.9em; } /* vídeo responsivo (iframe do YouTube no single) */ .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 0.5rem; margin-bottom: 1.5rem; } .embed-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .post-cover { width: 100%; height: auto; border-radius: 0.75rem; margin-bottom: 1.5rem; } /* =========================================================================== 6. Sidebar (widgets do blog) =========================================================================== */ .wc-widget-title { font-size: 1.0625rem; font-weight: 700; color: var(--bs-heading-color, #364a63); margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--bs-border-color, #e5e9f2); } .wc-cat-list { list-style: none; margin: 0; padding: 0; } .wc-cat-list li { margin: 0; } .wc-cat-list a { display: block; padding: 0.5rem 0; color: var(--bs-body-color, #526484); text-decoration: none; font-size: 0.9375rem; border-bottom: 1px solid var(--bs-border-color, #f0f2f7); } .wc-cat-list a:hover { color: var(--bs-primary, #6576ff); } /* mini-post dentro da sidebar */ .wc-mini-post { display: flex; gap: 0.75rem; align-items: center; padding: 0.625rem 0; } .wc-mini-post + .wc-mini-post { border-top: 1px solid var(--bs-border-color, #f0f2f7); } .wc-mini-post .wc-mini-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 0.5rem; overflow: hidden; background: var(--bs-secondary-bg, #f5f6fa); } .wc-mini-post .wc-mini-thumb img { width: 100%; height: 100%; object-fit: cover; } .wc-mini-post .wc-mini-title { font-size: 0.875rem; font-weight: 600; line-height: 1.35; margin: 0; } .wc-mini-post .wc-mini-title a { color: var(--bs-heading-color, #364a63); text-decoration: none; } .wc-mini-post .wc-mini-title a:hover { color: var(--bs-primary, #6576ff); } /* =========================================================================== 7. Widget de compartilhamento (.workcontrol_socialshare) share.wc.css é injetado no (depois deste arquivo), então escopamos em .nk-app-root para vencer por especificidade. Vira uma linha limpa, sem o fundo/borda legados; mantém as cores de marca dos botões. =========================================================================== */ .nk-app-root .workcontrol_socialshare { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; padding: 1.25rem 0; margin: 0; background: transparent; border: 0; border-top: 1px solid var(--bs-border-color, #e5e9f2); text-align: left; } .nk-app-root .workcontrol_socialshare_cta { margin: 0 0.5rem 0 0; padding: 0; color: var(--bs-secondary-color, #8094ae); font-size: 0.9375rem; font-weight: 600; text-transform: none; text-shadow: none; } .nk-app-root .workcontrol_socialshare_item { margin: 0; } .nk-app-root .workcontrol_socialshare_item a { border-radius: 0.375rem; padding: 0.5rem 0.625rem; } /* Google+ é um serviço extinto; esconde o botão legado (salmão) da barra. */ .nk-app-root .workcontrol_socialshare_googleplus { display: none; } /* =========================================================================== 8. Ajustes finos =========================================================================== */ /* banner de manutenção injetado pelo front controller */ .workcontrol_maintenance { background: var(--bs-warning, #ffbe2c); color: #1f2b3a; text-align: center; font-weight: 600; font-size: 0.875rem; padding: 0.625rem 1rem; } /* container de comentários/conta herdando o fundo do DashLite */ .wc_ead { width: 100%; } /* página de conteúdo estático: cabeçalho */ .page-hero { padding: 3rem 0 1rem; } /* =========================================================================== 9. Header sólido para páginas internas (sem hero atrás da navbar) O .header-main do DashLite é position:absolute (pensado para sobrepor o hero). Em páginas internas usamos um bar sólido, branco e sticky. =========================================================================== */ .header-main.wc-header-solid { position: sticky; top: 0; padding: 0; background: var(--bs-card-bg, #fff); box-shadow: 0 1px 3px 2px rgba(31, 43, 58, 0.08); } /* O .header base do DashLite é display:flex + min-height:100vh (pensado para o hero da landing). Em páginas internas (sem .has-header-main-s1) isso criaria uma faixa vazia de ~1 viewport acima do nav; aqui colapsamos para a altura natural do bar. */ .header:not(.has-header-main-s1) { display: block; min-height: 0; } /* botão de conta dentro de .menu-btns (widget account.bar.php devolve um ) */ .menu-btns .wc-account a { display: inline-flex; align-items: center; justify-content: center; padding: 0.6875rem 1.25rem; border-radius: 0.375rem; background: var(--bs-primary, #6576ff); color: #fff; font-weight: 700; font-size: 0.9375rem; line-height: 1.25; text-decoration: none; white-space: nowrap; transition: background 0.2s ease; } .menu-btns .wc-account a:hover { filter: brightness(.92); color: #fff; } /* banner compacto (gradiente) para páginas internas */ .wc-pagebar { background-image: linear-gradient(45deg, var(--bs-primary, #6576ff), var(--bs-secondary, #9c5ffd)); color: #fff; padding: 2.5rem 0; } .wc-pagebar .wc-pagebar-title { color: #fff; font-weight: 700; margin: 0; } .wc-pagebar .wc-pagebar-sub { color: rgba(255, 255, 255, 0.85); margin: 0.5rem 0 0; } .wc-pagebar .breadcrumb { margin: 0 0 0.75rem; padding: 0; background: none; } .wc-pagebar .breadcrumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; } .wc-pagebar .breadcrumb a:hover { color: #fff; } .wc-pagebar .breadcrumb .sep { color: rgba(255, 255, 255, 0.5); margin: 0 0.4rem; } .wc-pagebar .breadcrumb .current { color: #fff; } /* =========================================================================== 10. Ícones (Nioicon) dentro dos badges .styled-icon O DashLite dimensiona SVGs por width/height; para a fonte de ícones (em.icon) é preciso definir font-size, senão o glifo fica pequeno dentro do badge. =========================================================================== */ .styled-icon .icon { font-size: 2.5rem; line-height: 1; } /* =========================================================================== 11. Ponte com reset.css + skin DashLite dos widgets globais reset.css é carregado no e RE-INJETADO no pelo widget de comentários; os CSS dos próprios widgets (account.css, comments.css, share.wc.css) também entram no . Por isso TUDO aqui é escopado em .nk-app-root (wrapper exclusivo do wc_default) para vencer por especificidade, sem editar arquivos globais — os temas wc_conversion/wc_ecommerce/wc_imobi continuam usando os widgets com o visual legado. =========================================================================== */ /* 11.1 Botões — reset.css força .btn{color:#fff !important}, o que apagaria os botões "outline" do DashLite. Restaura a cor por variante e dá identidade DashLite às classes legadas .btn_blue / .btn_green / .btn_red dos widgets. */ .nk-app-root .btn { color: var(--bs-btn-color) !important; } .nk-app-root .btn:hover { color: var(--bs-btn-hover-color, var(--bs-btn-color, #fff)) !important; } /* A plataforma EAD (.wc_ead) foi desenhada com o reset.css (.btn branco); preserva esse comportamento e não a deixa herdar a cor de botão do DashLite. */ .nk-app-root .wc_ead .btn, .nk-app-root .wc_ead .btn:hover { color: #fff !important; } .nk-app-root .btn_blue, .nk-app-root .btn_green, .nk-app-root .btn_red { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; border: 0; text-shadow: none; } .nk-app-root .btn_blue { background-color: var(--bs-primary, #6576ff); } .nk-app-root .btn_blue:hover { filter: brightness(.92); } .nk-app-root .btn_green { background-color: var(--bs-success, #1ee0ac); } .nk-app-root .btn_green:hover { filter: brightness(.92); } .nk-app-root .btn_red { background-color: var(--bs-danger, #e85347); } .nk-app-root .btn_red:hover { filter: brightness(.92); } /* 11.2 — Campos dos widgets agora são estilizados pelos próprios widgets: account.css (escopo .wc-acc) e comments.css (escopo .comments / .comment_login_box). Ambos carregam por último e herdam a cor de marca via var(--bs-primary), então este bridge tornou-se redundante. */ /* 11.3 Widget de conta — login / cadastro / recuperação (.login_box) */ .nk-app-root .login_box { width: 100%; max-width: 480px; margin: 0 auto; background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color, #e5e9f2); border-radius: 0.75rem; box-shadow: 0 2px 12px rgba(31, 43, 58, 0.06); overflow: hidden; } .nk-app-root .login_box header { background: transparent; padding: 1.75rem 1.75rem 0.25rem; text-align: center; } .nk-app-root .login_box header h1 { font-size: 1.5rem; font-weight: 700; color: var(--bs-heading-color, #364a63); } .nk-app-root .login_box header p { font-size: 0.8125rem; color: var(--bs-secondary-color, #8094ae); text-transform: uppercase; letter-spacing: 0.04em; } .nk-app-root .account_form_fields { padding: 1.25rem 1.75rem 0.25rem; } .nk-app-root .account_form_fields .legend { font-size: 1.125rem; color: var(--bs-heading-color, #364a63); font-weight: 600; } .nk-app-root .account_form_fields label { display: block; margin-bottom: 1rem; } .nk-app-root .account_form_fields label span { display: block; margin-bottom: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--bs-secondary-color, #8094ae); } .nk-app-root .account_form_callback:empty { display: none; } .nk-app-root .account_form_actions { background: transparent; padding: 0.5rem 1.75rem 1.75rem; text-align: center; } .nk-app-root .account_form_actions .btn { width: 100%; padding: 0.625rem 1.25rem; font-size: 0.9375rem; text-transform: none; border-radius: 0.375rem; } .nk-app-root .account_form_actions a { display: inline-block; margin-top: 1rem; color: var(--bs-primary, #6576ff); font-size: 0.8125rem; text-transform: none; } .nk-app-root .account_form_actions a.create { margin-left: 1rem; color: var(--bs-heading-color, #364a63); font-weight: 600; } /* 11.4 Widget de conta — painel logado (sidebar + views) */ .nk-app-root .workcontrol_account_sidebar header { background: var(--bs-secondary-bg, #f5f6fa); border-radius: 0.5rem; padding: 1.5rem; } .nk-app-root .workcontrol_account_sidebar header h1 { color: var(--bs-heading-color, #364a63); } .nk-app-root .workcontrol_account_sidebar_nav { background: transparent; padding: 0.5rem 0; } .nk-app-root .workcontrol_account_sidebar_nav li { border: 0; } .nk-app-root .workcontrol_account_sidebar_nav li a { color: var(--bs-body-color, #526484); border-radius: 0.375rem; } .nk-app-root .workcontrol_account_sidebar_nav li a:hover { background: var(--bs-secondary-bg, #f5f6fa); color: var(--bs-primary, #6576ff); } .nk-app-root .workcontrol_account_sidebar_nav li .active, .nk-app-root .workcontrol_account_sidebar_nav li .active:hover { background: rgba(var(--bs-primary-rgb, 91, 91, 245), .12); color: var(--bs-primary, #6576ff); } .nk-app-root .workcontrol_account_sidebar_nav li .logoff { color: var(--bs-danger, #e85347); } .nk-app-root .wc_account_title { color: var(--bs-heading-color, #364a63); border-color: var(--bs-border-color, #e5e9f2); } .nk-app-root .wc_account_title span { border-color: var(--bs-primary, #6576ff); } .nk-app-root .account_user_avatar { border-radius: 50%; } /* remove os marcadores legados ▪/➔ e o caixa-alta dos itens do menu da conta */ .nk-app-root .workcontrol_account_sidebar_nav li a { text-transform: none; } .nk-app-root .workcontrol_account_sidebar_nav li a:before, .nk-app-root .workcontrol_account_sidebar_nav li .active:before { content: none; } /* account.css fixa o callback em position:fixed 500px no canto; deixa-o no fluxo */ .nk-app-root .account_box .account_form_callback { position: static; width: auto; max-width: 100%; padding: 0 0 1rem; } /* grade de "Minha Conta" e linhas de "Meus Pedidos" na paleta DashLite */ .nk-app-root .workcontrol_account_home p { border-color: var(--bs-border-color, #e5e9f2); color: var(--bs-heading-color, #364a63); } .nk-app-root .workcontrol_account_home p b { color: var(--bs-secondary-color, #8094ae); } .nk-app-root .wc_account_order { border-color: var(--bs-border-color, #e5e9f2); } .nk-app-root .wc_account_order p { color: var(--bs-secondary-color, #8094ae); } .nk-app-root .wc_account_order a { color: var(--bs-primary, #6576ff); } /* 11.5/11.6 — Widget de comentários (lista, formulários, modal de login e recuperação): skin DashLite movida para comments.css (global, brand-aware via var(--bs-primary)). Bridge removido para manter fonte única. */ /* 11.7 Widget de slide (destaque). Hoje a home é uma landing e não invoca o slide, mas mantemos a skin escopada caso APP_SLIDE seja reativado em qualquer página — assim ele também segue o padrão DashLite. */ .nk-app-root .wc_slides { margin: 1.5rem auto; border-radius: 0.75rem; overflow: hidden; background: #1f2b3a; box-shadow: 0 2px 12px rgba(31, 43, 58, 0.08); } .nk-app-root .wc_slide_item img { display: block; width: 100%; } .nk-app-root .wc_slide_item_desc { top: auto; bottom: 0; padding: 2.5rem 1.5rem 1.25rem; background: linear-gradient(to top, rgba(15, 21, 30, 0.85), rgba(15, 21, 30, 0)); } .nk-app-root .wc_slide_item_desc h1 { font-size: 1.25rem; font-weight: 700; color: #fff; } .nk-app-root .wc_slide_item_desc p { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.8); } .nk-app-root .wc_slide_pager span { background: rgba(255, 255, 255, 0.4); } .nk-app-root .wc_slide_pager span:hover { background: #fff; } .nk-app-root .wc_slide_pager span.active { background: var(--bs-primary, #6576ff); }