Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML
<header><style>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/>

    <div class="compositiondani-banner">
        <div class="compositiondani-banner-image"></div>/* Remove margens padrão do body para o banner ocupar toda a largura */
    body {
        <div class="compositiondani-banner-overlay"></div>margin: 0;
        <div class="compositiondani-banner-logo-container">
       font-family: 'Roboto', sans-serif; /* Aplica a fonte ao corpo */
    }

   <div class=".compositiondani-banner-logo"></div> {
        </div>
        <div class="compositiondani-banner-content">
    position: relative; /* Necessário para posicionar elementos filhos (overlay, logo, content) de forma absoluta */
        <!-- Conteúdo do banner aqui -->
width: 100%;
        min-height: 400px; /* Defina </div>
uma altura mínima  </div>
</header>

Livesearch
spaceKeyself
sizelarge
placeholderEstou procurando por ....
typepage

HTML <div class="card"> <div class="stripe"></div>
ou fixa para o banner ser visível */
        
<h3><div class="icongc"></div> O que há de novo</h3>
/* --- ESTILOS DO BACKGROUND --- */
        
<div class="separator"></div> <!-- Linha de separação --> <ul>
background-image: url('https://totvscrm.app/public/login/images/background.png');
        background-size: cover; /* Faz a imagem cobrir todo o container, mantendo a proporção (pode cortar partes) */
       
<li><a href="https://tdn.totvs.com/display/TCGDC/1+-+Release+-12.1.2401">Release -12.1.2401</a></li>
 background-position: center center; /* Centraliza a imagem */
        background-repeat: no-repeat; /* Evita que a imagem 
<li><a href="https://tdn.totvs.com/display/TCGDC/11+-+Release+-12.1.2311">Release -12.1.2311</a></li>
se repita */
        
<li><a href="https://tdn.totvs.com/display/TCGDC/9+-+Release+-12.1.2309">Release -12.1.2309</a></li>
/* --------------------------- */
        display: flex; /* Usar flexbox para alinhar conteúdo interno */
     
<li><a href="https://tdn.totvs.com/display/TCGDC/7+-+Release+-12.1.2307">Release -12.1.2307</a></li>
   flex-direction: column; /* Empilhar conteúdo verticalmente */
        justify-content: center; 
<
/
ul>
* Centralizar conteúdo verticalmente */
    
<!--
 
Linha
 
de
 
separação
 align-
-> </div> HTML <div class="card">
items: center; /* Centralizar conteúdo horizontalmente */
        color: 
<div class="stripe"></div> <h3><div class="icongc1"></div> Roadmap do Produto</h3>
white; /* Cor padrão do texto, assumindo que o fundo pode ser escuro */
        
<div class="separator"></div> <!-- Linha de separação -->
text-align: center; /* Centraliza o texto por padrão */
    }

    .compositiondani-banner-overlay {
        
<ul>
position: absolute; /* Cobre todo o banner pai */
        top: 0;
   
<li><a
 
href="https://tdn.totvs.com/display/TCGDC/1+-+Roadmap+Q1+%7C+2024">Release
 
-12.1.2401</a></li>
   left: 0;
        
<li><a href=""> </a></li>
right: 0;
        bottom: 0;
   
<li><a
 
href="">
 
</a></li>
   background-color: rgba(0, 0, 0, 0.4); /* Overlay semi-transparente (preto 
<li><a href=""> </a></li> </ul>
com 40% de opacidade) - ajuste a cor e opacidade */
        
<!
z-
-
index: 
Linha
1; 
de
/* 
separação --> </div> HTML <div class="card">
Coloca o overlay acima da imagem de fundo */
    
}

   
<div
 
class="stripe"></div> <h3><div class="icongc2"></div> O que há de novo</h3> <div class="separator"></div> <!-- Linha de separação -->
/* Estilos para o container do logo e conteúdo para ficarem ACIMA do overlay */
    .compositiondani-banner-logo-container,
    .compositiondani-banner-content {
        
<ul>
position: relative; /* Mantém no fluxo normal, mas 
<li><a href="https://tdn.totvs.com/display/TCGDC/1+-+Release+-12.1.2401">Release -12.1.2401</a></li>
permite z-index */
        z-index: 2; /* Garante 
<li><a href="https://tdn.totvs.com/display/TCGDC/11+-+Release+-12.1.2311">Release -12.1.2311</a></li>
que fiquem sobre o overlay */
        padding: 
<li><a href="https://tdn.totvs.com/display/TCGDC/9+-+Release+-12.1.2309">Release -12.1.2309</a></li>
20px; /* Adiciona espaçamento interno ao container */
       
<li><a href="https://tdn.totvs.com/display/TCGDC/7+-+Release+-12.1.2307">Release -12.1.2307</a></li> </ul>
 /* text-align: center; garante que o inline-block wrapper seja centralizado */
        
<!-- Linha de separação -->
text-align: center;
    }

    
</div> Section Painel

Product_title
TitleO que há de novo
Imagehttps://totvscrm.com/wp-content/uploads/2024/01/Novo-1.png

Page Tree
rootRelease
spacesTCGDC

Product_title
TitleRoadmap
Imagehttps://totvscrm.com/wp-content/uploads/2024/01/roadmap-2.png

Page Tree
rootRoadmap do Produto
spacesTCGDC

Product_title
TitleDocumentos de referência
Imagehttps://totvscrm.com/wp-content/uploads/2024/01/documentos-1.png

Page Tree
rootDocumentação
spacesTCGDC

Product_title
TitleÚltimas atualizações
Imagehttps://totvscrm.com/wp-content/uploads/2024/01/ultimas.png

Atualizado recentemente
typespage
max10
spacesTCGDC

/* Wrapper para dar fundo branco ao logo */
    .compositiondani-logo-background {
        background-color: white;
        display: inline-block; /* Ajusta o tamanho ao conteúdo (imagem) */
        padding: 10px;        /* Opcional: Espaço entre o logo e a borda branca */
        margin-bottom: 20px; /* Espaço abaixo do bloco do logo */
        line-height: 0;       /* Corrige possível espaço extra abaixo da imagem em inline-block */
        /* --- NOVO: Arredonda os cantos --- */
        border-radius: 8px;  /* Ajuste o valor (8px) conforme necessário */
        /* --------------------------------- */
        /* Opcional: Adiciona uma sombra sutil */
        /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
    }

    /* Estilo para a IMAGEM do logo */
    .compositiondani-logo-image {
        width: 200px; /* Largura do logo - AJUSTE CONFORME NECESSÁRIO */
        height: auto; /* Mantém a proporção da imagem */
        display: block; /* Remove espaço extra abaixo da imagem dentro do wrapper */
    }


    /* Adicione mais estilos para .compositiondani-banner-content se necessário */
    .compositiondani-banner-content h1,
    .compositiondani-banner-content p {
         margin: 0 0 10px 0; /* Ajusta margens do texto */
    }

</style>

<header>
    <div class="compositiondani-banner">
        <div class="compositiondani-banner-overlay"></div>
        <div class="compositiondani-banner-logo-container">
             <!-- Wrapper para o fundo branco -->
             <div class="compositiondani-logo-background">
                  <!-- Logo dentro do wrapper -->
                  <img src="https://totvscrm.app/public/login/images/TOTVS-CRM.png" alt="TOTVS CRM Logo" class="compositiondani-logo-image">
             </div>
        </div>
        <!-- Se houver outro conteúdo (título, texto), ele pode ir aqui ou dentro de um .compositiondani-banner-content -->
        <!-- Exemplo:
        <div class="compositiondani-banner-content">
            <h1>Título do Banner</h1>
            <p>Algum texto descritivo.</p>
        </div>
        -->
    </div>
</header>

Confira a ficha técnica do produto por este link!

Livesearch
spaceKeyself
sizelarge
placeholderEstou procurando por ....
typepage

HTML
<div class="FullWidthCarouselstyles__DraggableContainer-sc-16jty68-1 fwSgiY inherited-styles-for-exported-element">
  <div class="grid__Container-sc-p40pqe-0 ctsbPE">
    <div style="margin-left: -16px; cursor: grab; transition: margin-left 0.6s ease 0s;" class="grid__Row-sc-p40pqe-1 oFuOf">
      <div class="grid__StyledColumn-sc-p40pqe-2 cJzWlo"><a data-testid="individual-template" data-uuid="2xIZne1VBy81MhQlXA90bn" draggable="false" href="https://tdn.totvs.com/display/TCGDC/3+-+Release+-12.1.2503" class="rogGT">
          <div color="rgba(9, 30, 66, 1)" class="cELStS"></div>
          <div class="fzULwq">
            <h3 class="titlegch3">RELEASE</h3>
            <p class="muted"> </p>
            <p class="pmodelTex">Explore as versões do TOTVS CRM - GC: documentos detalhados destacam as atualizações, melhorias e inovações introduzidas. </p>
          </div>
        </a></div>
<!-- Separação bloco -->
             
      <div class="grid__StyledColumn-sc-p40pqe-2 cJzWlo"><a data-testid="individual-template" data-uuid="3Vmbzdd1S76GhVxNtDs2Kz" draggable="false" href="https://tdn.totvs.com/display/TCGDC/Roadmap+do+Produto" class="rogGT">
          <div color="rgba(9, 30, 66, 1)" class="cELStS"></div>
          <div class="fzULwq">
            <h3 class="titlegch3">ROADMAP</h3>
            <p class="muted"> </p>
            <p class="pmodelTex">Confira nosso roadmap e prepare-se para as inovações que vão elevar sua experiência com o TOTVS CRM. </p>
          </div>
        </a></div>
      <div class="cJzWlo"><a data-testid="individual-template" data-uuid="1Tqt54zuPmOckSi6MKDPiy" draggable="false" href="https://tdn.totvs.com/pages/viewpage.action?pageId=636959623" class="rogGT">
          <div color="rgba(9, 30, 66, 1)" class="cELStS"></div>
          <div class="fzULwq">
            <h3 class="titlegch3">CALENDÁRIO</h3>
            <p class="pmodelTex">Consulte o Calendário de Atualizações para ficar a par das datas importantes e das atualizações.</p>
          </div>
        </a></div>

<!-- Separação bloco -->

    </div>
  </div>
</div>

<style>
  *, ::after, ::before {
    box-sizing: border-box;
  }

  .wiki-content h3 {
  margin: 0 !important;
}

  .inherited-styles-for-exported-element {
    color: #091e42;
    font-family: "Roboto", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
  }

  .titlegch3 {
    color: #494440;
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: 900;
      line-height: 1.2;
  margin-bottom: .5rem;
  margin-top: 0;
}


.pmodelTex {
font-family: Lato, sans-serif;
font-size: 16px;
color: #494440
}
  @media (min-width: 768px) {
    .titlegch3 {
      font-size: 1.5rem;
      line-height: 1.33333;
    }
  }

  .ctsbPE {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
  }

  @media (min-width: 576px) {
    .ctsbPE {
      max-width: 540px;
    }
  }

  @media (min-width: 768px) {
    .ctsbPE {
      max-width: 720px;
    }
  }

  @media (min-width: 992px) {
    .ctsbPE {
      max-width: 960px;
    }
  }

  @media (min-width: 1200px) {
    .ctsbPE {
      max-width: 1140px;
    }
  }

  .oFuOf {
    -webkit-box-align: stretch;
    -webkit-box-pack: start;
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .cJzWlo {
    display: block;
    flex: 1 1 auto;
    padding: 1rem;
    position: relative;
    scroll-margin-top: 72px;
    text-align: center;
    width: 83.3333%;
    margin: 10px;
    max-width: 350px;
  }

  @media (min-width: 992px) {
    .cJzWlo {
      display: block;
      flex: 0 0 auto;
      width: 33.3333%;
    }
  }

  .fwSgiY {
    overflow-x: hidden;
  }

  .rogGT {
    border-radius: .5rem;
    box-shadow: rgba(9, 30, 66, .15) 0 .1rem 1rem 0;
    color: inherit !important;
    display: block;
    height: 100%;
    margin: 0;
    overflow: hidden;
    text-align: left;
    text-decoration: none !important;
    text-wrap: wrap;
    user-select: none;
    white-space-collapse: collapse;
    width: auto;
    border: 1px solid #ccccc;
  }

  .hNWOlT {
    background-color: #6B48FF;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .hNWOlT {
      height: 3rem;
    }
  }

  .grqWLk {
    background-color: #0ADBE3;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .grqWLk {
      height: 3rem;
    }
  }

  .cELStS {
    background-color: #EEEEEE;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .cELStS {
      height: 3rem;
    }
  }

  .bxLzQJ {
    background-color: #ffc400;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .bxLzQJ {
      height: 3rem;
    }
  }

  .lnQKVZ {
    background-color: #00c7e5;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .lnQKVZ {
      height: 3rem;
    }
  }

  .kgNiiW {
    background-color: #f99cdb;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .kgNiiW {
      height: 3rem;
    }
  }

  .bgvUWO, .eUOZOn, .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {
    background-color: #fff;
    background-image: url(https://totvscrm.com/wp-content/uploads/2024/02/agile3.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 3px solid #fff;
    border-radius: .5rem;
    height: 3rem;
    left: 1rem;
    position: absolute;
    top: -1.5rem;
    width: 3rem;
  }

  .eUOZOn, .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {
    background-image: url(https://totvscrm.com/wp-content/uploads/2024/02/roadmap3.png);
  }

  .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {
    background-image: url(https://totvscrm.com/wp-content/uploads/2024/02/data3.png);
  }

  .gAonen, .iRWtjz, .kIYtDi {
    background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/4Mgm4SG6P6bD673rMtNpXP/9f8798510480b30d296550be747b9624/icon-content-checklists_2x.png);
  }

  .gAonen, .kIYtDi {
    background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/x2AI5JZPTDVY7BxKbvClM/dc65b20bf0914caa72bcaf2ddbb05d9b/UseCasesBrainstorming.svg);
  }

  .gAonen {
    background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/5rv4eidOfMf1vdEzVpHNlA/bb102f380f9cfd3d1761858d8910963d/icon-object-book_2x.png);
  }

  .fzULwq {
    padding: 2.25rem 1.5rem 1.5rem;
    position: relative;
  }

  body :focus {
    outline: 2px solid #091e42;
  }

  a:not([href]), a:not([href]):hover {
    color: inherit;
  }

  .fzULwq p {
    font-size: 15px;
    margin: 0;
  }

  .fzULwq p+p {
    margin-top: .5rem;
  }

  .cJzWlo>:last-child, .cJzWlo>:last-child>:last-child, .cJzWlo>:last-child>:last-child>:last-child {
    margin-bottom: 0;
  }

  .fwSgiY .grid__Row-sc-p40pqe-1 {
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    width: calc(100% + 2rem);
  }

  .rogGT:focus, .rogGT:hover {
    box-shadow: rgba(9, 30, 66, .25) 0 .5rem 1rem 0;
    color: inherit !important;
     text-decoration: none !important;
  }

  .fzULwq p.muted {
    color: #5e6c84;
  }

  body :focus:not(:focus-visible) {
    outline: 0 !important;
  }
</style>








HTML
<!-- Adicione este link para o Font Awesome -->  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
 <style>
  /* Seu CSS existente vai aqui... */
  body {
  background: #eee;
  /* This is just a helper in case the element has a transparent background or white colors. */
}

/* When exporting elements with child elements that were edited, edited classes has !important on every CSS declaration.
This will be fixed on future updates (requires a lot of work due to the nature of CSS selectors complexity). Sorry for the inconvenience. You can remove it, but be careful and check if some other selector won't override it. */
*, ::after {
  border: 0 solid #e5e7eb;
}

h2, p {
  margin: 0 0 1rem;
}

h2 {
  margin-bottom: .5rem;
}

img { /* Mantido caso haja outras imagens, mas as dos cards foram removidas */
  border-style: none;
  display: initial;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

* {
  box-sizing: border-box;
}

article {
  display: block;
}

strong {
  font-weight: bolder;
}

.btn:hover, a {
  text-decoration: none;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col-12, .col-6 {
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  width: 100%;
}

.col-12, .col-6 {
  -webkit-box-flex: 0;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .col-md-3 {
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 992px) {
  .col-lg-2 {
    -webkit-box-flex: 0;
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
}

.btn {
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  font-size: 13px;
  line-height: 1.5;
  padding: .375rem .75rem;
  text-align: center;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
  transition-behavior: normal, normal, normal, normal, normal;
  user-select: none;
  vertical-align: middle;
}

@media (prefers-reduced-motion:reduce) {
  .btn {
    transition: none 0s;
    transition-behavior: normal;
  }
}

.btn-outline-primary {
  border-color: #0ADBE3;
  color: #494440;
  text-decoration: none;
}

.card {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  background-clip: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: break-word;
  position: relative;
}

.card-body {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: .75rem;
}

.card-footer {
  padding: .75rem 1.25rem;
  text-align: center;
  width: 100%;
}

.btn {
  border-radius: 40px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 991.98px) {
  .btn-outline-primary {
    font-size: 13px;
    padding: 5px;
  }
}

.display-h2 {
  font-size: 28px;
}

@media screen and (max-width: 768px) {
  .display-h2 {
    font-size: 26px;
  }
}

.display-text-support {
  font-size: 18px;
}

.display-h2 {
  line-height: 1.3;
}

.display-text-support {
  line-height: 1.5;
}

.card-transparent {
  border-radius: 15px;
  transition: all .3s ease-in-out;
  transition-behavior: normal;
}

.card-transparent-home {
  background-color: transparent;
  border: 1px solid #494440;
  margin-bottom: 75px;
  min-height: 126px;
  padding-top: 15px;
}

img[data-src] {
  min-height: 1px;
  min-width: 1px;
}

.btn:focus {
  outline: 0;
}

.btn:disabled {
  opacity: .65;
}

.btn-outline-primary:hover {
  background-color: #0ADBE3;
  border-color: #0ADBE3;
  text-decoration: none;
}

.btn-outline-primary:focus {
  box-shadow: rgba(84, 192, 209, .5) 0 0 0 .2rem;
}

.btn-outline-primary:disabled {
  background-color: transparent;
  color: #0ADBE3;
  text-decoration: none;
}

.card-footer:last-child {
  border-radius: 0 0 calc(-1px + .25rem) calc(-1px + .25rem);
}

.btn-outline-primary.bg-light-gray {
  background-color: #f5f5f5;
}

@media screen and (max-width: 992px) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.card .card-footer-over {
  z-index: 30;
}

.card-footer.card-footer-over {
  left: 0;
  position: absolute;
  right: 0;
  bottom: -15%; /* Ajuste conforme necessário para posicionar corretamente o rodapé dentro do card */
  transition: all .3s ease-in-out;
}

.card-transparent .card-icon {
  border-radius: 50%;
  /* line-height: 85px; */ /* Removido/Comentado - Flexbox é melhor para centralizar ícones */
  margin: 0 auto;
  text-align: center;
  transition: all .3s ease-in-out;
  transition-behavior: normal;
  /* Adicionado para manter o espaço e centralizar o ícone */
  min-height: 85px;
  width: 85px; /* Definir largura também */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ajuste o tamanho e cor do ícone aqui */
  font-size: 2.5rem; /* Exemplo de tamanho */
  color: #494440;   /* Exemplo de cor (pode herdar se preferir) */
}


.card-transparent .card-body {
  text-align: center;
}

.card-transparent .card-footer {
  bottom: -15%;
  left: 0;
  position: absolute;
  right: 0;
  transition: all .3s ease-in-out;
  transition-behavior: normal;
}

@media (min-width: 992px) {
  .card-transparent:hover {
    transform: scale(1.2);
  }
}

.card-transparent-home:hover {
  background-color: transparent;
  box-shadow: unset;
}
.card-footer.card-footer-over a {
  color: #494440; /* Define a cor do texto */
  text-decoration: none; /* Remove o sublinhado */
}

.card-footer.card-footer-over a:hover {
  color: #FFFFFF; /* Cor do texto ao passar o mouse, ajuste conforme necessário */
  background-color: #0ADBE3; /* Cor de fundo ao passar o mouse, já definido em sua regra .btn-outline-primary:hover */
}
a:where(:not(.wp-element-button)) {
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

.btn-outline-primary:hover.bg-light-gray {
  background-color: #0ADBE3;
}

.card-transparent .card-body .card-title {
  font-size: 14px;
  font-weight: 900;
}

.card-transparent:hover .card-footer {
  background-color: transparent;
  border-style: none;
  opacity: 1;
  text-align: center;
}

.card-transparent-home:hover .card-icon {
  background-color: transparent;
  /* Opcional: mudar a cor do ícone no hover */
  /* color: #0ADBE3; */
}


.card-transparent-home:hover .card-footer {
  transform: translateY(0);
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

.btn-outline-primary:not(:disabled):not(.disabled):not(.btn-disabled):not([href="#off"]):active {
  background-color: #0ADBE3;
  border-color: #0ADBE3;
  color: #212529;
  text-decoration: none;
}

.btn-outline-primary:not(:disabled):not(.disabled):not(.btn-disabled):not([href="#off"]):active:focus {
  box-shadow: rgba(84, 192, 209, .5) 0 0 0 .2rem;
  text-decoration: none;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.text-center {
  text-align: center !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.text-secondary {
  color: #0ADBE3 !important;
}

.text-dark {
  color: #363636 !important;
}

.text-blue {
  color: #363636!important;
}

.btn-outline-primary:hover {
  color: #494440 !important;
  text-decoration: none;
}

.css-scan-edited-element-0 {
  background-color: #f5f5f5 !important;
  background-size: cover !important;
  border-radius: 0 !important;
  border-style: initial !important;
  border-width: 0 !important;
  box-sizing: border-box !important;
  color: #494440 !important;
  display: block !important;
  font-family: Lato, sans-serif !important;
  font-size: 14.4px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 80px 0 .5rem !important;
  position: relative !important;
  tab-size: 4 !important;
  text-align: left !important;
}

@media (max-width: 767.98px) {
  .css-scan-edited-element-0 {
    background-position: 100% center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 50px !important;
  }
}

.css-scan-edited-element-0::after, .css-scan-edited-element-0::before {
  border: 0 solid #e5e7eb !important;
  border-image: initial initial initial initial initial !important;
  box-sizing: border-box !important;
}

.css-scan-edited-element-0::before {
  background-image: url(https://totvscrm.com/wp-content/uploads/2024/02/plnfundoo.png) !important;
  background-position: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-size: auto 600px !important;
  bottom: 0 !important;
  content: "" !important;
  height: 100% !important;
  position: absolute !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 0 !important;
}

@media screen and (max-width: 1500px) {
  .css-scan-edited-element-0::before {
    display: none !important;
  }
}

html {
  font-size: 16px;
  /* This is IMPORTANT since some copied values use "REM" units */
}
</style>

<section class="css-scan-edited-element-0 inherited-styles-for-exported-element" style="background-color: #f5f5f5">

  <div class="container">
    <div class="row mb-5">
      <article class="col-12">
        <p class="display-h2 font-weight-bold text-uppercase text-center text-dark">
          Aprofunde Seu Conhecimento <br>explore a<strong class="text-secondary"> documentação</strong>
        </p>

        <div class="display-text-support text-center mt-4">
          <p class=".display-text-support ">Este recurso valioso é projetado para enriquecer sua compreensão do produto e otimizar sua experiência de uso.<br>
          </p>

        </div>
      </article>
    </div>

    <div class="row">
      <!-- Adm. -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-clipboard-list"></i> <!-- Ícone de Administração/Configuração -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Adm.</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/TCGDC/1+-+Administrativo" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Agenda -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
             <i class="fas fa-calendar-alt"></i> <!-- Ícone de Agenda -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Agenda</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/2+-+Agenda" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Analytics -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-chart-pie"></i> <!-- Ícone de Gráfico/Analytics -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Analytics</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/TCGDC/3+-+Analytics" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Analytics Studio -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-drafting-compass"></i> <!-- Ícone de Criação/Estúdio -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue"> A. Studio</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/4+-+Analytics+Studio" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Atividades -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-tasks"></i> <!-- Ícone de Tarefas/Atividades -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Atividades</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/5+-+Atividade" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Catálogo -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-book-open"></i> <!-- Ícone de Livro/Catálogo -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Catálogo</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/pages/releaseview.action?pageId=728643168" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Contas -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
             <i class="fas fa-building"></i> <!-- Ícone de Empresa/Conta -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Contas</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/7+-+Contas" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Data Discovery -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-search"></i> <!-- Ícone de Busca/Descoberta -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">D. discovery</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/TCGDC/8+-+Data+Discovery" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Documentos -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
             <i class="fas fa-file-alt"></i> <!-- Ícone de Documento -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Docs</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/9+-+Documentos" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Marketplace -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-store"></i> <!-- Ícone de Loja/Marketplace -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Marketp.</p>
          </div>
          <div class="card-footer card-footer-over">
 
Section
Painel

Product_title
TitleÍndice
Imagehttps://totvscrm.com/wp-content/uploads/2024/01/list.png

Page Tree
rootTOTVS CRM - Gestão de Clientes
spacesTCGDC

Painel
Product_title
TitleYoutube
Imagehttps://totvscrm.com/wp-content/uploads/2024/01/PLAY.png
Section

How To - TOTVS CRM

Painel

Product_title
TitleLinks
Imagehttps://totvscrm.com/wp-content/uploads/2024/01/link.png

Button
Cor#6B48FF
TextoVisualizar integrações
Linkhttp://tdn.totvs.com/display/INT

Button
Cor#6B48FF
TextoInformativos do Produto
Linkhttps://informa.totvs.com/crm/

HTML     <style> body {
           <a 
margin: 0;
href="https://tdn.totvs.com/display/TCGDC/11+-+Marketplace" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
          
padding: 0;
  </a>
          
}
</div>
        
.container {
</div>
      </div>
      
width: 100%;
<!-- Oportunidades -->
      <div class="col-lg-2 
padding: 20px; /* Padding de 20px em todos os lados do container */
col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
  
box-sizing:
 
border-box;
 
/*
 
Inclui
 
o
 
padding
 
no
 
cálculo
 
da
 
largura
 
*/
 <i class="fas fa-trophy"></i> <!-- Ícone de 
}
Troféu/Oportunidade (conforme sugerido) -->
      
.card
 
{
      <!-- Alternativas: fas fa-dollar-sign, fas 
width: 80%; /* Card ocupa 80% do espaço da tela */
fa-lightbulb -->
          </div>
          <div class="card-body">
       
max-width:
 
800px;
 
/*
 
Largura
 
máxima
 
do
<p class="card
*/
-title text-uppercase text-blue">Oport.</p>
          </div>
  
padding:
 
20px;
 
/*
 
Padding
 
de
 
20px
 
em
 
todos
 
os lados do card */
<div class="card-footer card-footer-over">
            <a 
border: 1px solid #ddd;
href="https://tdn.totvs.com/display/public/TCGDC/12+-+Oportunidades" class="btn btn-outline-primary bg-light-gray">
            
border-radius:
 
5px;
 Saiba Mais
          
transition:
 
box-shadow 0.3s;
 </a>
          </div>
   
display: flex;
     </div>
      </div>
      
flex
<!--
direction: column;
 Pers. (Personalização/Personas?) -->
      <div 
align-items: flex-start;
class="col-lg-2 col-md-3 col-6">
        <div class="card 
text-align: left;
card-transparent card-transparent-home">
          
position: relative;
<div class="card-icon">
            
background-color: #f7f7f7;
 <i class="fas fa-id-badge"></i> <!-- Ícone de Identificação/Persona -->
    
height:
 
190px;
 
       <!-- Alternativas: fas fa-user-edit, fas 
margin: 0 auto;
fa-palette -->
          </div>
  
        <div class="card-body">
    
/*
 
Centraliza
 
horizontalmente
 
*/
     <p class="card-title 
}
text-uppercase text-blue">Pers.</p>
         
.card:hover {
 </div>
          <div 
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=821575034" class="btn 
}
btn-outline-primary bg-light-gray">
        
.stripe
 
{
     Saiba Mais
      
height:
 
10px;
     </a>
       
width:
 
100%;
  </div>
        </div>
  
background-color:
 
#6B48FF;
   </div>
      <!-- Plan. 
position: absolute;
(Planejamento) -->
      <div class="col-lg-2 
top: 0;
col-md-3 col-6">
        <div class="card 
left: 0;
card-transparent card-transparent-home">
          <div 
border-top-left-radius: 5px;
class="card-icon">
            <i 
border-top-right-radius: 5px;
class="fas fa-map-signs"></i> <!-- Ícone de Mapa/Planejamento -->
     
}
        
.icongc {
<!-- Alternativas: fas fa-calendar-check, fas fa-sitemap -->
       
width:
 
30px;
  </div>
          
height: 30px;
<div class="card-body">
            <p 
background-image: url('https://totvscrm.com/wp-content/uploads/2024/01/Novo-1.png');
class="card-title text-uppercase text-blue">Plan.</p>
          </div>
        
background-size:
 
contain;
 <div class="card-footer card-footer-over">
         
background-repeat:
 
no-repeat;
  <a href="https://tdn.totvs.com/display/TCGDC/14+-+Planejamento" class="btn 
margin-right: 10px;
btn-outline-primary bg-light-gray">
        
}
      Saiba 
.icongc1 {
Mais
            
width: 30px;
</a>
          
height: 30px;
</div>
        
background-image: url('https://totvscrm.com/wp-content/uploads/2024/01/roadmap-2.png');
</div>
      
</div>
   
background-size:
 
contain;
  <!-- Vendas -->
      <div 
background-repeat: no-repeat;
class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
  
margin-right:
 
10px;
       
}
<div class="card-icon">
        
.icongc2
 
{
   <i class="fas fa-hand-holding-usd"></i> <!-- Ícone de Mão 
width: 30px;
com Dinheiro/Vendas -->
            
height
<!-- Alternativas: 
30px;
fas fa-tags, fas fa-cash-register -->
        
background-image: url('https://totvscrm.com/wp-content/uploads/2024/01/roadmap-2.png');
  </div>
          
background-size: contain;
<div class="card-body">
            <p 
background-repeat: no-repeat;
class="card-title text-uppercase text-blue">Vendas</p>
          
margin-right: 10px;
</div>
        
}
  <div class="card-footer card-footer-over">
    
h3
 
{
       <a href="https://tdn.totvs.com/display/TCGDC/15+-+Vendas" class="btn btn-outline-primary 
margin: 0;
bg-light-gray">
              
display:
Saiba 
flex;
Mais
            
align-items: center;
</a>
          
}
</div>
        
.separator {
</div>
      </div>
      
width: 100%;
<!-- Workflow -->
      <div class="col-lg-2 col-md-3 col-6">
   
height:
 
1px;
    <div class="card card-transparent card-transparent-home">
     
background-color:
 
#ddd;
    <div class="card-icon">
       
margin:
 
10px
 
0;
    <i class="fas fa-project-diagram"></i> 
}
<!-- Ícone de Diagrama/Workflow -->
     
ul
 
{
       <!-- Alternativas: fas fa-cogs, fas 
list
fa-
style
sync-
type: none;
alt -->
          
padding: 0;
</div>
          
margin: 0;
<div class="card-body">
        
}
    <p class="card-title text-uppercase 
li {
text-blue">Workflow</p>
          </div>
    
margin: 5px
 
0;
     <div 
}
class="card-footer card-footer-over">
        
li
 
a
 
{
  <a href="https://tdn.totvs.com/display/TCGDC/17+-+Workflow" class="btn 
btn-outline-primary bg-light-gray">
     
text-decoration:
 
none;
        Saiba Mais
   
color:
 
#333;
        
}
</a>
        
li
 
a:hover {
 </div>
        </div>
    
text-decoration: underline;
  </div>

    </div>
  
}
</div>

</
style>
section>
HTML
<style>
#title-text {
	display: none !important; 
}


li.first > span > a {
    display: none;
}


ul {
    list-style: none !important;   

    #content > div.page-metadata {
    display: none;
}   .sectionMacro .columnMacro+.columnMacro {
    padding-left: 0px!important;
}

#breadcrumbs > li {
    display: none;
}
       .cell.normal h1 {
    color: #42526e !important;

}

.cell.aside h1 {
    color: #42526e!important;
       font-size: 24px !important;
font-weight: bold !important;

}

     .composition-banner-title{
color: #0c9abe!important;
}

.composition-banner-desc{
color: #0c9abe!important;
}




</style>

HTML
<style>
.page-description {
    display: none;!important;
}

.line-bottom {
    top: 260px !important;
}
    div.theme-default .ia-splitter #main {
    margin-left: 0px;
}
.ia-fixed-sidebar, .ia-splitter-left {
    display: none;
}
#main {
    padding-left: 0px;
    padding-right: 0px;
    overflow-x: hidden;
}

.aui-header-primary .aui-nav,  .aui-page-panel {
    margin-left: 0px !important;
}
.aui-header-primary .aui-nav {
    margin-left: 0px !important;
}
</style>
HTML
<style> .compositiondani-banner {
    position: relative;
    min-height: 220px240px;
    border-radius: 5px;
    margin-bottom: 5px;
    overflow: hidden;
}

.compositiondani-banner-image {

background-image: url("https://totvscrm.com/wp-content/uploads/20232024/0804/capaCAPA-comTDN-fundoGC-e-sem-icone-TDN21.png3-azul.jpg");
    min-height: inherit;
    width: 100%;
    background-sizeposition: covercenter;
    minbackground-heightrepeat: inheritno-repeat;
    widthbackground-size: 100%cover;
    min-height: 35vh; }

.compositiondani-banner-overlay,
.compositiondani-banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.compositiondani-banner-overlay {
    border-radius: 5px;
    pointer-events: none;
}

.compositiondani-banner-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.compositiondani-banner-logo {
    width: 450px;
    height: 180px;
    background-image: url("https://totvscrm.com/wp-content/uploads/2023/09/logo-com-descricao-totvsgc.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.compositiondani-banner-title {
    background: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    line-height: 1.3;
    color: #ffffff;
    position: relative;
    margin-top: 130px;
    padding: 0px;
    border-radius: 10px;
    font-family: "Roboto", sans-serif;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-header h1 {
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 5px;
    margin: 0;
}

.negrito-materialize {
    font-weight: bold;
}

.custom-margin-justified {
    margin: 0 20px;
    text-align: justify;
} 


.wiki-content .contentLayout2 .columnLayout .cell {
    padding-right: 0px;!important;
padding-left: 0px;!important;}

#main #content {
    padding-right: 30px;!important;
padding-left: 30px;!important;}


 }  



    </style>