wagtail-enap-designsystem 1.2.1.144__py3-none-any.whl → 1.2.1.146__py3-none-any.whl

enap_designsystem/static/enap_designsystem/blocks/carousel_responsivo_snippet.css

@@ -0,0 +1,294 @@
+.carousel-responsivo {
+    position: relative;
+    width: 100%;
+    margin-bottom: 2rem;
+}
+
+.carousel-responsivo__title {
+    text-align: center;
+    margin-bottom: 2rem;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--enap-primary-color, #1976d2);
+}
+
+.carousel-responsivo__container {
+    position: relative;
+    width: 100%;
+    height: var(--carousel-height-mobile);
+    overflow: hidden;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 768px) {
+    .carousel-responsivo__container {
+        height: var(--carousel-height-desktop);
+    }
+}
+
+.carousel-responsivo__slides {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.carousel-responsivo__slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.6s ease-in-out;
+    display: flex;
+    align-items: center;
+}
+
+.carousel-responsivo__slide[data-active="true"] {
+    opacity: 1;
+}
+
+/* Efeito Fade */
+.carousel-responsivo[data-efeito="fade"] .carousel-responsivo__slide {
+    transition: opacity 0.8s ease-in-out;
+}
+
+/* Efeito Slide */
+.carousel-responsivo[data-efeito="slide"] .carousel-responsivo__slide {
+    transform: translateX(100%);
+    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
+}
+
+.carousel-responsivo[data-efeito="slide"] .carousel-responsivo__slide[data-active="true"] {
+    transform: translateX(0);
+}
+
+.carousel-responsivo__picture {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.carousel-responsivo__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.carousel-responsivo__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        135deg, 
+        rgba(0, 0, 0, 0.6) 0%, 
+        rgba(0, 0, 0, 0.3) 50%, 
+        rgba(0, 0, 0, 0.1) 100%
+    );
+    z-index: 2;
+}
+
+.carousel-responsivo__content {
+    position: relative;
+    z-index: 3;
+    width: 100%;
+    padding: 2rem 0;
+}
+
+.carousel-responsivo__text-wrapper {
+    max-width: 600px;
+    color: white;
+}
+
+.carousel-responsivo__slide--left .carousel-responsivo__text-wrapper {
+    margin-left: 0;
+    text-align: left;
+}
+
+.carousel-responsivo__slide--center .carousel-responsivo__text-wrapper {
+    margin: 0 auto;
+    text-align: center;
+}
+
+.carousel-responsivo__slide--right .carousel-responsivo__text-wrapper {
+    margin-left: auto;
+    text-align: right;
+}
+
+.carousel-responsivo__slide-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    line-height: 1.2;
+}
+
+@media (min-width: 768px) {
+    .carousel-responsivo__slide-title {
+        font-size: 2.5rem;
+    }
+}
+
+.carousel-responsivo__slide-subtitle {
+    font-size: 1rem;
+    margin-bottom: 1rem;
+    opacity: 0.95;
+    line-height: 1.4;
+}
+
+@media (min-width: 768px) {
+    .carousel-responsivo__slide-subtitle {
+        font-size: 1.25rem;
+    }
+}
+
+.carousel-responsivo__slide-text {
+    font-size: 0.875rem;
+    margin-bottom: 1.5rem;
+    opacity: 0.9;
+}
+
+@media (min-width: 768px) {
+    .carousel-responsivo__slide-text {
+        font-size: 1rem;
+    }
+}
+
+
+
+.carousel-responsivo__slide-button:hover,
+.carousel-responsivo__slide-button:focus {
+    background: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    outline: 2px solid var(--enap-primary-color, #1976d2);
+    outline-offset: 2px;
+}
+
+.carousel-responsivo__slide-button-icon {
+    transition: transform 0.3s ease;
+}
+
+.carousel-responsivo__slide-button:hover .carousel-responsivo__slide-button-icon {
+    transform: translateX(4px);
+}
+
+/* Navegação */
+.carousel-responsivo__nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 48px;
+    height: 48px;
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    color: var(--enap-primary-color, #1976d2);
+    font-size: 24px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    z-index: 4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(10px);
+}
+
+.carousel-responsivo__nav:hover,
+.carousel-responsivo__nav:focus {
+    background: white;
+    transform: translateY(-50%) scale(1.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    outline: 2px solid var(--enap-primary-color, #1976d2);
+    outline-offset: 2px;
+}
+
+.carousel-responsivo__nav--prev {
+    left: 1rem;
+}
+
+.carousel-responsivo__nav--next {
+    right: 1rem;
+}
+
+/* Indicadores */
+.carousel-responsivo__indicators {
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 0.5rem;
+    z-index: 4;
+}
+
+.carousel-responsivo__indicator {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.5);
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.carousel-responsivo__indicator[aria-selected="true"] {
+    background: white;
+    border-color: white;
+}
+
+.carousel-responsivo__indicator:hover,
+.carousel-responsivo__indicator:focus {
+    border-color: white;
+    transform: scale(1.2);
+    outline: 2px solid rgba(255, 255, 255, 0.8);
+    outline-offset: 2px;
+}
+
+/* Utilitários */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+@media (min-width: 768px) {
+    .container {
+        padding: 0 2rem;
+    }
+}
+
+/* Temas de cores */
+.carousel-responsivo__slide--primary {
+    --theme-color: var(--enap-primary-color, #1976d2);
+}
+
+.carousel-responsivo__slide--secondary {
+    --theme-color: var(--enap-secondary-color, #424242);
+}
+
+.carousel-responsivo__slide--light {
+    --theme-color: #ffffff;
+}
+
+.carousel-responsivo__slide--dark {
+    --theme-color: #1a1a1a;
+}

enap_designsystem/static/enap_designsystem/blocks/clientes_block.css

@@ -0,0 +1,146 @@
+.clientes-section {
+    padding: 80px 0;
+    background: linear-gradient(0deg, #FFFFFF 88%, #F5F7FA 96%);
+    position: relative;
+}
+
+.clientes-button{
+    margin: 40px auto;
+    display: flex;
+    justify-content: center;
+}
+
+.clientes-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
+    background-size: 30px 30px;
+    pointer-events: none;
+}
+
+.container {
+    max-width: 1142px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.clientes-header {
+    margin-bottom: 60px;
+}
+
+.clientes-header__titulo {
+    font-size: 2.5rem;
+    font-weight: 600;
+    color: #024248;
+    margin-bottom: 16px;
+    line-height: 1.2;
+}
+
+.clientes-section p{
+    font-size: 1.125rem;
+    color: #333840;
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-left .clientes-header__subtitulo {
+    margin-left: 0;
+}
+
+.clientes-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 40px;
+    align-items: center;
+    justify-items: center;
+}
+
+.cliente-logo {
+    padding: 12px;
+    height: 120px;
+    width: 100%;
+    max-width: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.cliente-logo__imagem {
+    max-width: 100%;
+    max-height: 60px;
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    transition: all 0.3s ease;
+}
+
+.cliente-logo:hover .cliente-logo__imagem {
+    filter: grayscale(0);
+    opacity: 1;
+}
+
+/* Responsividade */
+@media (max-width: 768px) {
+    .clientes-section {
+        padding: 60px 0;
+    }
+    
+    .clientes-header {
+        margin-bottom: 40px;
+    }
+    
+    .clientes-header__titulo {
+        font-size: 2rem;
+    }
+    
+    .clientes-grid {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 24px;
+    }
+    
+    .cliente-logo {
+        padding: 24px;
+        max-width: 150px;
+        height: 100px;
+    }
+    
+    .cliente-logo__imagem {
+        max-height: 50px;
+    }
+}
+
+@media (max-width: 480px) {
+    .clientes-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+    }
+    
+    .cliente-logo {
+        padding: 20px;
+        height: 90px;
+    }
+    
+    .cliente-logo__imagem {
+        max-height: 40px;
+    }
+}
+
+/* Variação para muitos logos */
+@media (min-width: 1200px) {
+    .clientes-grid {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}

enap_designsystem/static/enap_designsystem/blocks/semana.css

@@ -345,8 +345,8 @@
 }
 
 .apresentacao-titulo {
-    font-size: 40px;
-    font-weight: 600;
+    font-size: 48px;
+    font-weight: 500;
     margin-bottom: 40px;
     line-height: 1.2;
 }
@@ -1223,7 +1223,7 @@
 
 .container-fluid_semana {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
@@ -1246,7 +1246,7 @@
     list-style: none;
     margin: 0;
     padding: 0;
-    gap: 2rem;
+    gap: 0px;
     text-decoration: none;
     flex-direction: row;
 }
@@ -1258,10 +1258,11 @@
 .nav-linktwo {
     color: #ffffff;
     text-decoration: none;
-    font-weight: 500;
+    font-weight: 400;
     padding: 0.5rem 1rem;
     transition: all 0.3s ease;
     position: relative;
+    font-size: 16px
 }
 
 .nav-linktwo:hover {

enap_designsystem/templates/enap_designsystem/base.html

@@ -19,8 +19,9 @@
 		<!-- End Google Tag Manager -->
 			
 		{% block title %}
-		<title>{% if page.page_title and page.page_title|length > 0 %}{{ page.page_title }}{% else %}ENAP - Escola Nacional de Administração Pública{% endif %}</title>
+		<title>{% if page.page_title and page.page_title|length > 0 %}{{ page.page_title }}{% else %}{{ page.title }}{% endif %}</title>
 		{% endblock %}
+
 		
 		{% block styleinline %} {% endblock %}
 		{% block stylecss %} {% endblock %}
@@ -81,6 +82,12 @@
 		
 		<!-- CSS Componentes -->
 		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/lia.css' %}">
+		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/carousel_images.css' %}">
+		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/apresentacao_block.css' %}">
+		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/cards_section.css' %}">
+		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/cards_titles.css' %}">
+		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/carousel_responsive.css' %}">
+		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/clientes_block.css' %}">
 		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/semana.css' %}">
 		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/accordions.css' %}">
 		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/accordionsv2.css' %}">

enap_designsystem/templates/enap_designsystem/blocks/apresentacao_block.html

@@ -2,21 +2,21 @@
 {% load wagtailcore_tags %}
 
 <section class="apresentacao-secao py-16" 
-         style="background-color: {{ value.cor_fundo }};">
+        style="background-color: {{ value.cor_fundo }};">
     
     <div class="apresentacao-container mx-auto px-4">
         <div class="apresentacao-wrapper mx-auto text-center">
             
             <!-- Título -->
-            <h2 class="apresentacao-titulo font-bold mb-8"
+            <h2 class="apresentacao-titulo"
                 style="color: {{ value.cor_titulo }};">
                 {{ value.titulo }}
             </h2>
 
             <!-- Quadrado de conteúdo -->
-            <div class="apresentacao-conteudo-box rounded-lg mb-8 shadow-lg text-left"
-                 style="background-color: {{ value.cor_quadrado }};">
-                <div class="apresentacao-texto leading-relaxed">
+            <div class="apresentacao-conteudo-box rounded-lg text-left"
+                style="background-color: {{ value.cor_quadrado }};">
+                <div style="color: {{value.cor_texto}}" class="apresentacao-texto leading-relaxed">
                     {{ value.conteudo|richtext }}
                 </div>
             </div>
@@ -25,13 +25,12 @@
             {% if value.botao_texto and value.botao_url %}
                 <div class="apresentacao-botao-wrapper flex justify-center">
                     <a href="{{ value.botao_url }}" 
-                       class="apresentacao-botao inline-flex items-center justify-center 
-                              px-8 font-semibold rounded-full 
-                              text-white transition-all duration-300"
-                       style="background-color: {{ value.cor_botao }};"
-                       onmouseover="this.style.backgroundColor='{{ value.cor_botao_hover }}'"
-                       onmouseout="this.style.backgroundColor='{{ value.cor_botao }}'">
-                        
+                        class="apresentacao-botao inline-flex items-center justify-center 
+                                px-8 font-semibold rounded-full 
+                                text-white transition-all duration-300"
+                        style="background-color: {{ value.cor_botao }};"
+                        onmouseover="this.style.backgroundColor='{{ value.cor_botao_hover }}'"
+                        onmouseout="this.style.backgroundColor='{{ value.cor_botao }}'">
                         {% if value.botao_icone %}
                             <i class="apresentacao-icone {{ value.botao_icone }} mr-2"></i>
                         {% endif %}
@@ -47,25 +46,18 @@
 
 <style>
     .apresentacao-botao {
-        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-        font-size: 1.125rem;
-        padding: 12px 16px;
+        font-size: 18px;
+        padding: 12px 36px;
         border-radius: 32px;
-        width: 200px;
-        gap: 20px;
+        font-weight: 500;
+        background-color: {{ value.cor_botao }};
     }
 
     .apresentacao-titulo {
-        font-size: 2.25rem;
+        font-size: 48px;
         margin-bottom: 0px;
     }
 
-    @media (min-width: 768px) {
-        .apresentacao-titulo {
-            font-size: 3rem;
-        }
-    }
-
     .apresentacao-container {
         max-width: 1200px;
     }
@@ -79,18 +71,22 @@
     }
 
     .apresentacao-conteudo-box {
-        padding: 60px 120px;
+        padding: 60px;
     }
 
     @media (min-width: 768px) {
         .apresentacao-conteudo-box {
-            padding: 3rem;
+            padding: 3rem 8rem;
         }
     }
     
     .apresentacao-botao:hover {
         transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+        box-shadow: 0 6px 20px rgba(0,0,0,0.05);
+        background-color: {{ value.cor_botao_hover }};
+    }
+    .apresentacao-botao:active {
+        background-color: {{ value.cor_botao_active }};
     }
     
     /* Forçar cores do richtext */
@@ -103,8 +99,8 @@
         padding: 90px 0;
     }
 
-    .apresentacao-texto {
-        font-size: 1.125rem;
+    .apresentacao-texto p {
+        font-size: 21px;
     }
     
     .apresentacao-secao .apresentacao-texto p,

enap_designsystem/templates/enap_designsystem/blocks/apresentacao_simple_block.html

@@ -1,8 +1,8 @@
 <!-- templates/blocks/apresentacao_simple_block.html -->
 {% load wagtailcore_tags %}
-
+{% load wagtailimages_tags %}
 <section class="secao-display py-16" 
-         style="background-color: {{ value.cor_fundo }};">
+        style="background-color: {{ value.cor_fundo }};">
     
     <div class="container mx-auto px-4">
         <div class="max-w-6xl mx-auto">
@@ -15,9 +15,9 @@
 
             <!-- Quadrado de conteúdo -->
             <div class="secao-conteudo-cartoes rounded-lg p-8 mb-12 shadow-lg"
-                 style="background-color: {{ value.cor_quadrado }};">
+                style="background-color: {{ value.cor_quadrado }};">
                 <div class="secao-texto text-lg leading-relaxed"
-                     style="color: {{ value.cor_texto }};">
+                    style="color: {{ value.cor_texto }};">
                     {{ value.conteudo|richtext }}
                 </div>
 
@@ -28,8 +28,12 @@
                         {% if card_block.block_type == 'card_apresentacao' %}
                             <div class="secao-cartao">
                                 <!-- Ícone -->
-                                {% if card_block.value.icone %}
+                                {% if card_block.value.logo %}
                                     <div class="cartao-simbolo" style="background: {{ value.cor_texto }};">
+                                        {% image card_block.value.logo original %}
+                                    </div>
+                                {% elif card_block.value.icone %}
+                                    <div class="cartao-simbolo" style="background: {{ card_block.value.cor_icone }};">
                                         <i class="{{ card_block.value.icone }}"></i>
                                     </div>
                                 {% endif %}
@@ -60,20 +64,15 @@
     }
     
     .secao-cabecalho {
-        font-size: 2.5rem;
+        font-size: 48px !important;
+        font-weight: 500;
         margin-bottom: 2rem;
     }
-    
-    @media (min-width: 768px) {
-        .secao-cabecalho {
-            font-size: 3.5rem;
-        }
-    }
-    
+
     .secao-conteudo-cartoes {
         max-width: 1142px;
         margin: 0 auto;
-        padding: 60px 30px;
+        padding: 45px;
     }
     
     .secao-texto {
@@ -177,7 +176,7 @@
     /* Estilos do Card */
     .secao-cartao {
         text-align: center;
-        padding: 1.5rem;
+        padding: 0px;
     }
     
     .cartao-simbolo {

enap_designsystem/templates/enap_designsystem/blocks/banner.html

@@ -15,5 +15,18 @@
         </div>
     </div>
 </div>
-{% endif%}
+{% else %}
+<div class="banner" style="background-image: url({% static 'enap_designsystem/blocks/suap/default_1.png' %})">
+    {% if self.overlay %}
+    <div class="banner__overlay"></div>
+    {% endif %}
+    <div class="banner__content">
+        <div class="wrapper-texts-banner">
+            <img src="{% static 'enap_designsystem/icons/grafismo.svg' %}" alt="Grafismo" class="grafismo">
+            <h1 class="banner__title">{{ self.title }}</h1>
+            <h2 class="banner__description">{{ self.description }}</h2>
+        </div>
+    </div>
+</div>
+{% endif %}
 {% endblock %}