Histórico da Página

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 -->
        </div>
    </div>
</header>

Livesearch

spaceKey	self
size	large
placeholder	Estou procurando por ....
type	page

HTML<div class="card"> <div class="stripe"></div> <h3><div class="icon"></div> Releases</h3>

width: 100%;
        min-height: 400px; /* Defina uma altura mínima ou fixa para o banner ser visível */
        /* --- ESTILOS DO BACKGROUND --- */

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) */

  background-position: center center; /* Centraliza a imagem */

<li>

 background-repeat: no-repeat; /* Evita que a imagem se repita */

/* --------------------------- */
        display: flex; /* Usar

</div>

flexbox para alinhar conteúdo

interno */
        flex-direction: column;

/* Empilhar conteúdo

verticalmente */
        justify-content: center; /* Centralizar conteúdo verticalmente */

<span

class="plugin_pagetree_children_span" id="childrenspan645249691-1">

 align-items: center; /* Centralizar conteúdo horizontalmente */
        color: white; /* Cor padrão do texto, assumindo que o fundo

<a href="/pages/viewpage.action?pageId=645249691">Expedição em 2019</a>

pode ser escuro */

</span>

text-align: center; /* Centraliza o texto por padrão */

</div>

.compositiondani-banner-overlay {
        position: absolute; /* Cobre

</div>

todo o banner pai

<

*/

li>

<li>

top: 0;

<div

class="plugin_pagetree_childtoggle_container">

   left: 0;
        right: 0;

 bottom: 0;
        background-color: rgba(0, 0,

</div> <div class="plugin_pagetree_children_content">

0, 0.4); /* Overlay semi-transparente (preto com 40% de opacidade) - ajuste a cor e opacidade */

z-index: 1; /* Coloca o overlay acima da imagem de fundo */
    }

    /*

Estilos para o container do logo e conteúdo para ficarem ACIMA do overlay */
    .compositiondani-banner-logo-container,
    .compositiondani-banner-content {

<a href="/pages/viewpage.action?pageId=644492570">Expedição em 2020</a> </span>

 position: relative; /* Mantém no fluxo normal, mas permite z-index */
        z-index: 2; /* Garante que fiquem sobre o overlay

<

*/

div>

padding: 20px; /* Adiciona espaçamento interno ao container */

<

div> </li>

* text-align: center; garante que o inline-block wrapper seja centralizado */

<li>

text-align: center;
    }

    /* 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

</div>

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 */

<a

href="/pages/viewpage.action?pageId=645249598">Expedição em 2021</a>

/* --------------------------------- */

</span>

/* Opcional: Adiciona uma sombra sutil */

<

div> <div id="children645249598-1" class="plugin_pagetree_children_container">

* 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 */

</div>

  display: block;

<

li>

* Remove espaço extra abaixo da imagem dentro do wrapper */

<li>

/* 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>

<a

<div

id

class="

plusminus645670043

compositiondani-

1"

banner">
        <div class="

plugin_pagetree_childtoggle aui-icon aui-icon-small aui-iconfont-chevron-right" href="#" data-type="toggle" data-page-id="645670043" data-tree-id="1" aria-expanded="false" aria-label="Expandir item Expedição em 2022">

compositiondani-banner-overlay"></div>
        <div class="compositiondani-banner-logo-container">
             <!-- Wrapper para o

</a>

fundo branco -->

</div>

    <div class="

plugin_pagetree_children_content

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>

<a href="/pages/viewpage.action?pageId=645670043">Expedição em 2022</a>

</div>
        <

/span> </div> <div id="children645670043-1" class="plugin_pagetree_children_container"

!-- 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>

</li>

-->

<li> <div class="plugin_pagetree_childtoggle_container

</div>
</header>

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

Livesearch

spaceKey	self
size	large
placeholder	Estou procurando por ....
type	page

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">

<a id="plusminus725739021-1"

<div class="

plugin

grid_

pagetree

childtoggle aui-icon aui-icon-small aui-iconfont-chevron-right" href="#" data-type="toggle" data-page-id="725739021" data-tree-id="1" aria-expanded

StyledColumn-sc-p40pqe-2 cJzWlo"><a data-testid="individual-template" data-uuid="2xIZne1VBy81MhQlXA90bn" draggable="false"

aria-label="Expandir item Expedição em 2023

href="https://tdn.totvs.com/display/TCGDC/3+-+Release+-12.1.2503" class="rogGT">
          <div

</a>

color="rgba(9, 30, 66, 1)" class="cELStS"></div>

</div>

<div class="

plugin_pagetree_children_content

fzULwq">

 <h3 class="titlegch3">RELEASE</h3>

      <p class="muted"> </p>

<span

<p class="

plugin_pagetree_children_span" id="childrenspan725739021-1">

pmodelTex">Explore as versões do TOTVS CRM - GC: documentos detalhados destacam as atualizações, melhorias e inovações introduzidas. </p>

<a href="/pages/viewpage.action?pageId=725739021">Expedição

em

2023<

</

a>

div>
        </a></

span>

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

</div>

    
      <div

id

class="

children725739021-1" class="plugin_pagetree_children_container">

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"> </

div>

p>

</li>

<li> <div

<p class="

plugin_pagetree_childtoggle_container">

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

<a id

class="

plusminus806777390-1

cJzWlo"><a

class

data-testid="

plugin_pagetree_childtoggle aui-icon aui-icon-small aui-iconfont-chevron-right" href="#" data-type="toggle" data-page-id="806777390" data-tree-id="1" aria-expanded="false" aria-label="Expandir item Expedição em 2024">

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,

</a>

1)" class="cELStS"></div>

</div>

<div class="

plugin_pagetree_children_content

fzULwq">

<h3 class="titlegch3">CALENDÁRIO</h3>

<span

<p class="

plugin_pagetree_children_span" id="childrenspan806777390-1">

pmodelTex">Consulte o Calendário de Atualizações para ficar a par das datas importantes e das atualizações.</p>

<a href="/pages/viewpage.action?pageId=806777390">Expedição em 2024</a>

</div>
        </a></

span>

div>

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

    </div>

</div>
</div>

<style>
  *, ::after, ::before {

<div

id="children806777390-1" class="plugin_pagetree_children_container">

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;

</div>

line-height: 1.2;

</li>

margin-bottom: .5rem;
  margin-top: 0;
}


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

</ul>

</div> Section Painel

Product_title

Title	O que há de novo
Image	https://totvscrm.com/wp-content/uploads/2024/01/Novo-1.png

Page Tree

root	Release
spaces	TCGDC

Product_title

Title	Roadmap
Image	https://totvscrm.com/wp-content/uploads/2024/01/roadmap-2.png

Page Tree

root	Roadmap
spaces	TCGDC

Product_title

Title	Documentos de referência
Image	https://totvscrm.com/wp-content/uploads/2024/01/documentos-1.png

Page Tree

root	Documentação
spaces	TCGDC

Product_title

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

Atualizado recentemente

types	page
max	10
spaces	TCGDC

.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">
            <a href="https://tdn.totvs.com/display/TCGDC/11+-+Marketplace" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Oportunidades -->
      <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-trophy"></i> <!-- Ícone de Troféu/Oportunidade (conforme sugerido) -->
             <!-- Alternativas: fas fa-dollar-sign, fas fa-lightbulb -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Oport.</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/12+-+Oportunidades" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Pers. (Personalização/Personas?) -->
      <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-id-badge"></i> <!-- Ícone de Identificação/Persona -->
             <!-- Alternativas: fas fa-user-edit, fas fa-palette -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Pers.</p>
          </div>
          <div 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">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Plan. (Planejamento) -->
      <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-map-signs"></i> <!-- Ícone de Mapa/Planejamento -->

Section

Painel

Product_title

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

Page Tree

root	TOTVS CRM - Gestão de Clientes
spaces	TCGDC

Painel

Product_title

Title	Youtube
Image	https://totvscrm.com/wp-content/uploads/2024/01/PLAY.png

Section

How To - TOTVS CRM

Painel

Product_title

Title	Links
Image	https://totvscrm.com/wp-content/uploads/2024/01/link.png

Button

Cor	#6B48FF
Texto	Visualizar integrações
Link	http://tdn.totvs.com/display/INT

Button

Cor	#6B48FF
Texto	Informativos do Produto
Link	https://informa.totvs.com/crm/

HTML <style> .card { width: 300px;

padding

 <!-- Alternativas:

20px;

fas fa-calendar-check, fas fa-sitemap -->

border:

1px

solid #ddd;

</div>
          <div class="card-body">

border-radius:

5px;

         <p class="card-title

transition: box-shadow 0.3s;

text-uppercase text-blue">Plan.</p>
          </div>

display:

flex;

       <div class="card-footer card-footer-over">

flex-direction:

column;

        <a href="https://tdn.totvs.com/display/TCGDC/14+-+Planejamento" class="btn

align-items: flex-start; /* Alinhar à esquerda */

btn-outline-primary bg-light-gray">
              Saiba Mais

text-align:

left;

/*

Alinhar

à

esquerda

*

</a>
          </div>

position:

relative;

     </div>

background-color: #f7f7f7; /* Roxo bem claro, quase branco */

</div>
      <!-- Vendas -->
      <div class="col-lg-2 col-md-3 col-6">

min-height:

150px;

/*

Altura

mínima

para

evitar que o card fique muito curto */

<div class="card card-transparent card-transparent-home">

}

<div class="card-icon">

.card:hover

{

   <i class="fas fa-hand-holding-usd"></i> <!-- Ícone de Mão com Dinheiro/Vendas

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); }

-->
            <!-- Alternativas: fas fa-tags, fas fa-cash-register -->

.stripe

{

</div>

height: 10px;

<div class="card-body">

width: 100%;

<p class="card-title text-uppercase text-blue">Vendas</p>

background-color: #6B48FF; /* Faixa azul */

</div>
          <div class="card-footer card-footer-over">

position:

absolute;

       <a href="https://tdn.totvs.com/display/TCGDC/15+-+Vendas" class="btn btn-outline-primary

top: 0;

bg-light-gray">

left:

Saiba

0;

Mais

border-top-left-radius: 5px;

</a>

border-top-right-radius: 5px;

</div>

}

</div>

h3 {

</div>
      <!--

margin: 0;

Workflow -->
      <div class="col-lg-2

display: flex;

col-md-3 col-6">
        <div class="card

align-items: center;

card-transparent card-transparent-home">

}

<div class="card-icon">

.separator

{

    <i class="fas fa-project-diagram"></i> <!-- Ícone de Diagrama/Workflow -->

width:

100%;

           <!--

height: 1px;

Alternativas: fas fa-cogs, fas fa-sync-alt -->
          </div>

background-color: #ddd; /* Cor da linha de separação */

        <div class="card-body">

margin: 10px 0; /* Espaçamento superior e inferior da linha */

<p class="card-title text-uppercase text-blue">Workflow</p>
          </div>

}

   <div class="card-footer card-footer-over">

ul

{

        <a href="https://tdn.totvs.com/display/TCGDC/17+-+Workflow" class="btn btn-outline-primary

list

bg-

style-type: none;

light-gray">

padding:

0;

 Saiba Mais

margin:

0;

</

*

a>

Remover

margem

interna

*/

}

</div>

li {

</div>
      </div>

    </div>

margin: 5px 0; } </style>

</div>

</section>

HTML

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


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


ul {
    list-style: none;
}


 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.png")3-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>

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 96

Nova versão Atual

Chave