Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML
<header>
    <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>
        <div class="compositiondani-banner-overlay"></div>
        <div class="compositiondani-banner-logo-container">
            <div class="compositiondani-banner-logo"></div>
        </div>
        <div class="compositiondani-banner-content">
            <!-- Conteúdo do banner aqui -->
        </div>
    </div>
</header>

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/public/TCGDC/5+-+Release+-12.1.2405" class="rogGT">
            <div color="rgba(9, 30, 66, 1)" class="hNWOlTcELStS"></div>
            <div class="fzULwq">
              <div class="bgvUWO"></div>
              <h3 class="titlegch3">Releases<>RELEASE</h3>
              <p class="muted"> </p>
            <p  <p>Clique e explore: cada versão class="pmodelTex">Explore as versões do TOTVS CRM - Gestão de Clientes é apresentada com GC: documentos detalhados, que fornecem insights claros sobre as mudanças implementadas, as melhorias realizadas e as novidades que foramdestacam 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="grqWLkcELStS"></div>
            <div class="fzULwq">
              <div class="eUOZOn"></div>
              <h3 class="titlegch3">Roadmap<>ROADMAP</h3>
              <p class="muted"> </p>
            <p  <p>Acompanhe class="pmodelTex">Confira nosso roadmap e prepare-se para as próximas inovações que irãovão elevar sua experiência com o TOTVS CRM - Gestão de Clientes a um novo patamar. Estamos ansiosos para crescer e evoluir junto com você!</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">
              <div class="gRxMAA"></div>
              <h3 class="titlegch3">Calendário<>CALENDÁRIO</h3>
            <p  <p>Fique de olho noclass="pmodelTex">Consulte o Calendário de Atualizações epara antecipe-seficar àsa novidadespar quedas farãodatas aimportantes diferençae no seu dia a dia. Estamos comprometidos em mantê-lo atualizado com as mais recentes inovações do TOTVS CRM - Gestão de Clientes.</p>
            </div>
  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: "Roboto"Lato, sans-serif;
    font-size: 1.25rem14px;
    font-weight: 500900;
      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 @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: 300px350px;
    }
  
    @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 .5rem1rem 1rem 0;
      color: inherit !important;
      display: block;
      height: 100%;
      marginmargin: 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: #FEAC0E#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/01/pre-release-access-102/agile3.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
      border: 8px3px 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/0102/roadmap-3roadmap3.png);
    }
  
    ..gAonen, .gRxMAA, .iRWtjz, .kIYtDi {
      background-image: url(https://totvscrm.com/wp-content/uploads/2024/0102/calenddata3.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: 13px15px;
      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
<div class="lumen-container integrations__header-content lumen-container--flex lumen-container--inner lumen-container--flex-column lumen-container--flex-align-center inherited-styles-for-exported-element">
  <p class="lumen-chip integrations__chip lumen-chip--default">Aprofunde Seu Conhecimento</p>
  <p class="lumen-headline">Explore a Documentação do TOTVS CRM</p>
  <p class="lumen-body-text integrations__subtitle lumen-body-text--default lumen-body-text--medium-emphasis lumen-body-text--lg">Este recurso valioso é projetado para enriquecer sua compreensão do produto e otimizar sua experiência de uso.</p>
</div>

<style>
body {
  background: #eee;
  /* This is just a helper in case the element has a transparent background or white colors. */
}

.inherited-styles-for-exported-element {
  color: #333;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

*, ::after, ::before {
  border: 0 solid #e8f2fa;
}

*, ::after, ::before <style>
  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 {
  border-style: none;
  display: initial;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

* {
  box-sizing: border-box;
}

svgarticle {
  display: block;
}

strong {
  verticalfont-alignweight: middlebolder;
}

.lumen-chipbtn:hover, a {
  aligntext-itemsdecoration: center;none;
}

.container {
  backgroundmargin-left: #e5efffauto;
  backgroundmargin-repeatright: repeatauto;
  borderpadding-radiusleft: 1e+10px15px;
  columnpadding-gapright: 8px15px;
  displaywidth: inline-flex;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  padding: 4px 12px;
  row-gap: 8px;
  width: fit-content;
}

.lumen-chip--default {
  color: #003793;
}

.lumen-headline {
  font-family: "Roboto";
  font-weight: 500;
  font-size: 32px;
  margin: 0;
}

.lumen-headline--headline-4 {
  font-size: 48px;
}

.lumen-headline--high-emphasis {
  color: #101820;
}

.lumen-button, .lumen-button--svg-container {
  align-items: center;
  display: flex;
  justify-content: center;
  transition: all .3s;
  transition-behavior: normal;
}

.lumen-button {
  border-radius: 9000px;
  border-style: none;
  font-family: Inter;
  text-decoration: none;
  text-wrap: nowrap;
  white-space-collapse: collapse;
}

.lumen-button--svg-container {
  border-radius: 50%;
}

.lumen-button--sm {
  column-gap: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  max-height: 32px;
  row-gap: 8px;
}

[role=button] {
  cursor: pointer;
}

.lumen-button--svg-container svg {
  fill: #fff;
}

.lumen-chip:focus-visible, .lumen-headline:focus-visible {
  outline: 1px dashed;
}

.lumen-container {
  width: 100%;
}

.lumen-button--link, .lumen-button--link:active, .lumen-button--link:hover {
  background-color: transparent;
  color: #101820;
}

.lumen-button--link:focus {
  background-color: transparent;
  color: #101820;
}

.lumen-button--sm .lumen-button--svg-container, .lumen-button--sm .lumen-button--svg-container svg {
  height: 24px;
  width: 24px;
}

.lumen-chip:empty::before, .lumen-container .lumen-body-text:empty::before, .lumen-headline:empty::before {
  content: attr(data-placeholder);
}

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

.lumen-container.lumen-container--flex {
  display: flex;
}

.lumen-container.lumen-container--flex-column {
  flex-direction: column;
}

.lumen-container.lumen-container--flex-align-center {
  align-items: center;
}

@media screen and (max-width: 767px) {
  .lumen-container:not(.lumen-container--inner) {
    max-width: 100%;
    padding-inline-end: 16px;
    padding-inline-start: 16px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .lumen-container:not(.lumen-container--inner) {
    max-width: 688px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .lumen-container:not(.lumen-container--inner) {
    max-width: 928px;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .lumen-container:not(.lumen-container--inner) {
    max-width: 1120px;
  }
}

@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .lumen-container:not(.lumen-container--inner) {
    max-width: 1208px;
  }
}

@media screen and (min-width: 1920px) {
  .lumen-container:not(.lumen-container--inner) {
    max-width: 1392px;
  }
}

.lumen-container .lumen-body-text {
  font-family: Inter;
  font-weight: 400;
  line-height: 150%;
  margin: 0;
}

.lumen-container .lumen-body-text--lg {
  font-size: 20px;
}

.lumen-container .lumen-body-text--medium-emphasis {
  color: #4b5863;
}

.lumen-button--link:hover .lumen-button--svg-container {
  transform: translateX(4px);
}

.lumen-button--link:focus .lumen-button--svg-container {
  background-color: #003793;
}

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

.lumen-container .integrations__subtitle, .lumen-container .integrations__title {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .lumen-container .integrations__title {
    font-size: 32px;
  }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 (minmax-width: 768px992px) and (max-width: 1023px){
  .container {
   .lumen-container .integrations__title { padding-left: 30px;
    fontpadding-sizeright: 32px30px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .lumen-container .integrations__title {
    font-size: 32px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
 .lumen-container .integrations__subtitle {
    padding-inline-end: 12px;
    padding-inline-start: 12px;
  }
}

@media screen and (max-width: 767px) {

.lumen-container .integrations__subtitle,   .lumen-container .integrations__title {
    padding-inline-end: 32px;
    padding-inline-start: 32px;
  }
}

.lumen-container .lumen-body-text:focus-visible {
  outline: 1px dashed;
}

.lumen-chip {
  line-height: 150% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

.lumen-headline {
  line-height: 120% !important;
}

.lumen-button--link {
  padding: 0 !important;
}

a:active {
  outline: 0 !important;
}

.lumen-button--link:focus {
  outline: 1px solid transparent !important;
}

.lumen-button--link .lumen-button--svg-container {
  margin-right: 0 !important;
}

.lumen-container .integrations__chip {
  margin-bottom: 8px !important;
}

</style>.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;
  margin: 0 auto;
  text-align: center;
  transition: all .3s ease-in-out;
  transition-behavior: normal;
}

.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;
}

.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">
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/ADM-3.png" src="https://totvscrm.com/wp-content/uploads/2024/02/ADM-3.png">
          </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>
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/AGENDA-1.png" src="https://totvscrm.com/wp-content/uploads/2024/02/AGENDA-1.png">
          </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>
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/Analytics-1.png" src="https://totvscrm.com/wp-content/uploads/2024/02/Analytics-1.png">
          </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>
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/Analytics-Studio-1.png" src="https://totvscrm.com/wp-content/uploads/2024/02/Analytics-Studio-1.png">
          </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>
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/ATIVIDADES.png" src="https://totvscrm.com/wp-content/uploads/2024/02/ATIVIDADES.png">
          </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>
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/Catalogo.png" src="https://totvscrm.com/wp-content/uploads/2024/02/Catalogo.png">
          </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>
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/Contas.png" src="https://totvscrm.com/wp-content/uploads/2024/02/Contas.png">
          </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>
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/Data-discovery.png" src="https://totvscrm.com/wp-content/uploads/2024/02/Data-discovery.png">
          </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>
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/Documentos.png" src="https://totvscrm.com/wp-content/uploads/2024/02/Documentos.png">
          </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>
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/Marketplace.png" src="https://totvscrm.com/wp-content/uploads/2024/02/Marketplace.png">
          </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>
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/Oportunidades-2.png" src="https://totvscrm.com/wp-content/uploads/2024/02/Oportunidades-2.png">
          </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>
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/Pers-1.png" src="https://totvscrm.com/wp-content/uploads/2024/02/Pers-1.png">
          </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>

      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/Plan.png" src="https://totvscrm.com/wp-content/uploads/2024/02/Plan.png">
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Plan.</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/TCGDC/14+-+Planejamento" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>


      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/Vendas.png" src="https://totvscrm.com/wp-content/uploads/2024/02/Vendas.png">
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Vendas</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/TCGDC/15+-+Vendas" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>

      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <img class="lazyload" data-src="https://totvscrm.com/wp-content/uploads/2024/02/Workflow.png" src="https://totvscrm.com/wp-content/uploads/2024/02/Workflow.png">
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Workflow</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/TCGDC/17+-+Workflow" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>

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