wagtail-enap-designsystem 1.2.1.192__py3-none-any.whl → 1.2.1.194__py3-none-any.whl

enap_designsystem/static/enap_designsystem/blocks/carousel_responsive.css

@@ -10,7 +10,7 @@
     margin-bottom: 2rem;
     font-size: 2rem;
     font-weight: 700;
-    color: var(--enap-primary-color, #1976d2);
+    color: var(--enap-primary-color, #024248);
 }
 
 .carousel-responsivo__container {
@@ -18,8 +18,6 @@
     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) {
@@ -66,20 +64,6 @@
     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;
@@ -179,29 +163,27 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    width: 48px;
-    height: 48px;
-    background: rgba(255, 255, 255, 0.9);
+    width: 40px;
+    height: 40px;
+    background: #006969;
     border: none;
     border-radius: 50%;
-    color: var(--enap-primary-color, #1976d2);
-    font-size: 24px;
+    color: white;
+    font-size: 30px;
     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);
+    border: 2px solid white;
 }
 
 .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);
+    background: 025257;
+    outline: 2px solid var(--enap-primary-color, #024248);
     outline-offset: 2px;
 }
 

enap_designsystem/static/enap_designsystem/blocks/carousel_responsivo_snippet.css

@@ -9,7 +9,7 @@
     margin-bottom: 2rem;
     font-size: 2rem;
     font-weight: 700;
-    color: var(--enap-primary-color, #1976d2);
+    color: var(--enap-primary-color, #024248);
 }
 
 .carousel-responsivo__container {
@@ -17,8 +17,6 @@
     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) {
@@ -80,20 +78,6 @@
     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;
@@ -184,29 +168,27 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    width: 48px;
-    height: 48px;
-    background: rgba(255, 255, 255, 0.9);
+    width: 40px;
+    height: 40px;
+    background: #006969;
     border: none;
     border-radius: 50%;
-    color: var(--enap-primary-color, #1976d2);
-    font-size: 24px;
+    color: white;
+    font-size: 30px;
     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);
+    border: 2px solid white;
 }
 
 .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);
+    background: 025257;
+    outline: 2px solid var(--enap-primary-color, #024248);
     outline-offset: 2px;
 }
 
@@ -276,6 +258,16 @@
     }
 }
 
+@media (max-width: 480px) {
+    .container-out {
+        padding: 0 2rem;
+    }
+
+    .carousel-responsivo__nav {
+        top: 90%;
+    }
+}
+
 /* Temas de cores */
 .carousel-responsivo__slide--primary {
     --theme-color: var(--enap-primary-color, #1976d2);

enap_designsystem/static/enap_designsystem/blocks/semana.css

@@ -637,7 +637,6 @@
     position: relative;
     z-index: 2;
     margin: 0 auto;
-    padding: 0 20px;
 }
 
 .faq-titulo {

enap_designsystem/static/enap_designsystem/blocks/texto_imagem.css

@@ -6,7 +6,6 @@
 .texto-imagem-block__container {
     max-width: 1142px;
     margin: 0 auto;
-    padding: 0 1rem;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2rem;

enap_designsystem/templates/enap_designsystem/base.html

@@ -303,10 +303,6 @@
 					link.setAttribute('aria-label', 'Link sem texto - ' + (link.href || 'destino desconhecido'));
 				}
 				
-				// Estilização
-				link.style.textDecoration = 'none';
-				
-				
 			});
 			
 			// Estilizar parágrafos

enap_designsystem/templates/enap_designsystem/blocks/carousel_responsivo_snippet.html

@@ -1,21 +1,21 @@
 <!-- templates/blocks/carousel_responsivo_snippet.html -->
 {% load wagtailcore_tags wagtailimages_tags %}
 
-<section class="carousel-responsivo" 
+{% with carousel_id="carousel-snippet-unique" %}
+<section class="carousel-responsivo{% if value.largura_container == 'limitador' %} carousel-responsivo--limitado{% endif %}" 
          data-autoplay="{{ value.autoplay }}" 
          data-interval="{{ value.intervalo_autoplay }}"
          data-efeito="{{ value.efeito_transicao }}"
          style="--carousel-height-desktop: {{ value.altura_desktop }}; --carousel-height-mobile: {{ value.altura_mobile }};">
     
     {% if value.titulo_secao %}
-    <div class="container">
+    <div class="{% if value.largura_container == 'limitador' %} {% endif %}">
         <h2 class="carousel-responsivo__title">{{ value.titulo_secao }}</h2>
     </div>
     {% endif %}
     
-    <!-- CORREÇÃO #1: ID único para snippet -->
-    <div class="carousel-responsivo__container" 
-         id="carousel-snippet-{{ value.id|default:block.id|default:forloop.counter|default:'snippet' }}"
+    <div class="carousel-responsivo__container{% if value.largura_container == 'limitador' %} {% endif %}" 
+         id="{{ carousel_id }}"
          data-carousel-type="snippet">
         
         <!-- Slides -->
@@ -58,7 +58,7 @@
                         
                         <!-- Conteúdo -->
                         <div class="carousel-responsivo__content">
-                            <div class="container">
+                            <div class="container-out">
                                 <div class="carousel-responsivo__text-wrapper">
                                     {% if slide.titulo %}
                                     <h3 class="carousel-responsivo__slide-title">{{ slide.titulo }}</h3>
@@ -74,28 +74,32 @@
                                     </div>
                                     {% endif %}
                                     
-                                    <!-- CORREÇÃO #2: Links com melhor acessibilidade -->
                                     {% if slide.link_texto %}
-                                        {% if slide.link_interno %}
-                                            {% with link_url=slide.link_interno.url %}
-                                        {% elif slide.link_url %}
-                                            {% with link_url=slide.link_url %}
+                                            {% if slide.link_interno %}
+                                                {% with link_url=slide.link_interno.url %}
+                                                    <div class="carousel-responsivo__slide-actions">
+                                                        <a href="{{ link_url }}" 
+                                                        class="carousel-responsivo__slide-button"
+                                                        aria-label="{{ slide.link_texto }}">
+                                                            {{ slide.link_texto }}
+                                                            <span class="carousel-responsivo__slide-button-icon" aria-hidden="true">→</span>
+                                                        </a>
+                                                    </div>
+                                                {% endwith %}
+                                            {% elif slide.link_url %}
+                                                {% with link_url=slide.link_url %}
+                                                    <div class="carousel-responsivo__slide-actions">
+                                                        <a href="{{ link_url }}" 
+                                                        class="carousel-responsivo__slide-button"
+                                                        target="_blank" rel="noopener noreferrer"
+                                                        aria-label="{{ slide.link_texto }} (abre em nova aba)">
+                                                            {{ slide.link_texto }}
+                                                            <span class="carousel-responsivo__slide-button-icon" aria-hidden="true">→</span>
+                                                        </a>
+                                                    </div>
+                                                {% endwith %}
+                                            {% endif %}
                                         {% endif %}
-                                        
-                                        {% if link_url %}
-                                        <div class="carousel-responsivo__slide-actions">
-                                            <a href="{{ link_url }}" 
-                                               class="carousel-responsivo__slide-button"
-                                               {% if slide.link_url %}target="_blank" rel="noopener noreferrer"{% endif %}
-                                               aria-label="{{ slide.link_texto }}{% if slide.link_url %} (abre em nova aba){% endif %}">
-                                                {{ slide.link_texto }}
-                                                <span class="carousel-responsivo__slide-button-icon" aria-hidden="true">→</span>
-                                            </a>
-                                        </div>
-                                        {% endif %}
-                                        
-                                        {% endwith %}
-                                    {% endif %}
                                 </div>
                             </div>
                         </div>
@@ -105,23 +109,23 @@
             {% endfor %}
         </div>
         
-        <!-- CORREÇÃO #3: Navegação com melhor acessibilidade -->
+        <!-- Navegação com melhor acessibilidade -->
         {% if value.mostrar_navegacao and value.slides|length > 1 %}
         <button class="carousel-responsivo__nav carousel-responsivo__nav--prev" 
                 type="button"
                 aria-label="Ir para o slide anterior"
-                aria-controls="carousel-snippet-{{ value.id|default:block.id|default:forloop.counter|default:'snippet' }}">
+                aria-controls="{{ carousel_id }}">
             <span aria-hidden="true">‹</span>
         </button>
         <button class="carousel-responsivo__nav carousel-responsivo__nav--next" 
                 type="button"
                 aria-label="Ir para o próximo slide"
-                aria-controls="carousel-snippet-{{ value.id|default:block.id|default:forloop.counter|default:'snippet' }}">
+                aria-controls="{{ carousel_id }}">
             <span aria-hidden="true">›</span>
         </button>
         {% endif %}
         
-        <!-- CORREÇÃO #4: Indicadores com IDs únicos -->
+        <!-- Indicadores com IDs únicos -->
         {% if value.mostrar_indicators and value.slides|length > 1 %}
         <div class="carousel-responsivo__indicators" 
              role="tablist"
@@ -130,9 +134,9 @@
             <button class="carousel-responsivo__indicator"
                     type="button"
                     role="tab"
-                    id="carousel-snippet-tab-{{ value.id|default:block.id|default:forloop.parentloop.counter|default:'snippet' }}-{{ forloop.counter }}"
+                    id="{{ carousel_id }}-tab-{{ forloop.counter }}"
                     aria-label="Ir para slide {{ forloop.counter }}{% if slide.block_type == 'slide' and slide.value.titulo %}: {{ slide.value.titulo }}{% endif %}"
-                    aria-controls="carousel-snippet-{{ value.id|default:block.id|default:forloop.parentloop.counter|default:'snippet' }}"
+                    aria-controls="{{ carousel_id }}"
                     data-slide="{{ forloop.counter0 }}"
                     {% if forloop.first %}aria-selected="true" tabindex="0"{% else %}aria-selected="false" tabindex="-1"{% endif %}>
                 <span class="sr-only">Slide {{ forloop.counter }}{% if slide.block_type == 'slide' and slide.value.titulo %}: {{ slide.value.titulo }}{% endif %}</span>
@@ -141,22 +145,40 @@
         </div>
         {% endif %}
         
-        <!-- CORREÇÃO #5: Live region para anúncios -->
+        <!-- Live region para anúncios -->
         <div class="sr-only" 
              aria-live="polite" 
              aria-atomic="true" 
-             id="carousel-snippet-status-{{ value.id|default:block.id|default:forloop.counter|default:'snippet' }}">
+             id="{{ carousel_id }}-status">
             Slide 1 de {{ value.slides|length }}{% if value.slides.0.block_type == 'slide' and value.slides.0.value.titulo %}: {{ value.slides.0.value.titulo }}{% endif %}
         </div>
     </div>
 </section>
 
+<style>
+    .carousel-responsivo--limitado {
+        max-width: 1142px;
+        margin-left: auto;
+        margin-right: auto;
+        border-radius: 20px;
+    }
+    
+    .carousel-responsivo--limitado .carousel-responsivo__container {
+        width: 100%;
+        border-radius: 20px;
+    }
+
+    .container-out{
+        max-width: 1142px;
+        margin: 0 auto;
+        padding: 0 5rem;
+    }
 .carousel-responsivo__title {
     text-align: center;
     margin-bottom: 2rem;
     font-size: 2rem;
     font-weight: 700;
-    color: var(--enap-primary-color, #1976d2);
+    color: var(--enap-primary-color, #024248);
 }
 
 .carousel-responsivo__container {
@@ -164,8 +186,6 @@
     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) {
@@ -200,7 +220,7 @@
     gap: 0.5rem;
     padding: 0.75rem 1.5rem;
     background: rgba(255, 255, 255, 0.9);
-    color: var(--enap-primary-color, #1976d2);
+    color: var(--enap-primary-color, #024248);
     text-decoration: none;
     border-radius: 0.375rem;
     font-weight: 600;
@@ -213,7 +233,7 @@
     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: 2px solid var(--enap-primary-color, #024248);
     outline-offset: 2px;
 }
 
@@ -221,35 +241,42 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    width: 48px;
-    height: 48px;
-    background: rgba(255, 255, 255, 0.9);
+    width: 40px;
+    height: 40px;
+    background: #006969;
     border: none;
     border-radius: 50%;
-    color: var(--enap-primary-color, #1976d2);
-    font-size: 24px;
+    color: white;
+    font-size: 30px;
     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);
+    border: 2px solid white;
+}
+
+.carousel-responsivo__nav:hover {
+    background: #025257;
+    transform: translateY(-50%) scale(1.05);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
 }
 
-.carousel-responsivo__nav:hover,
+/* Estado de foco (selecionado com tab) */
 .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;
+    background: #006969;
+}
+
+/* Estado de pressing (botão sendo pressionado) */
+.carousel-responsivo__nav:active {
+    background: #024248;
 }
 
 /* Temas de cores */
 .carousel-responsivo__slide--primary {
-    --theme-color: var(--enap-primary-color, #1976d2);
+    --theme-color: var(--enap-primary-color, #024248);
 }
 
 .carousel-responsivo__slide--secondary {
@@ -263,7 +290,15 @@
 .carousel-responsivo__slide--dark {
     --theme-color: #1a1a1a;
 }
-<style>
+@media (max-width: 480px) {
+    .container-out {
+        padding: 0 2rem;
+    }
+
+    .carousel-responsivo__nav {
+        top: 90%;
+    }
+}
 
 </style>
 
@@ -447,4 +482,5 @@ document.addEventListener('DOMContentLoaded', function() {
         startAutoplay();
     });
 });
-</script>
+</script>
+{% endwith %}

enap_designsystem/templates/enap_designsystem/blocks/legislacao_block.html

@@ -46,7 +46,7 @@
     display: flex;
     flex-direction: column;
     gap: 16px;
-    max-width: 1200px;
+    max-width: 1142px;
     margin: 0 auto;
 }
 

enap_designsystem/templates/enap_designsystem/blocks/richtext_block.html

@@ -1,55 +1,123 @@
 {% load wagtailcore_tags %}
 
 <style>
-.content-richtext a {
-    display: inline-flex;
-    align-items: center;
-    padding: 0px 10px;
-    background-color: transparent;
-    border: none;
-    color: #007D7A;
-    gap: 8px;
-    width: auto;
-    text-decoration: none;
-    border-radius: 32px;
-}
-
-.content-richtext a:hover {
-    background-color: #006562;
-}
-
-
-.content-richtext p {
-    margin-bottom: 1.2em;
-    line-height: 1.6;
-}
-
-.content-richtext h2 {
-    font-size: 1.5em;
-    margin-top: 1em;
-    color: #333;
-}
-
-.content-richtext ul,
-.content-richtext ol {
-    margin-left: 1.5em;
-    margin-bottom: 1em;
-}
-
-.content-richtext blockquote {
-    border-left: 3px solid #007D7A;
-    padding-left: 1em;
-    margin-left: 0;
-    color: #555;
-}
-
-.content-richtext img {
-    max-width: 100%;
-    height: auto;
-    margin: 1em 0;
-}
+    .content-richtext a {
+        display: inline-flex;
+        align-items: center;
+        padding: 0;
+        background-color: transparent;
+        border: none;
+        color: #007D7A;
+        gap: 8px;
+        width: auto;
+        border-radius: 32px;
+        font-weight: 900;
+        position: relative;
+        padding-right: 15px; 
+    }
+    
+    /* Ícone apenas para links externos */
+    .content-richtext a[target="_blank"]::after {
+        content: "";
+        width: 12px;
+        height: 12px;
+        position: absolute;
+        right: 0;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12' fill='none' stroke='%23007D7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-size: contain;
+        opacity: 0.7;
+        transition: transform 0.2s ease, opacity 0.2s ease;
+    }
+    
+    .content-richtext a:hover::after,
+    .content-richtext a:focus::after {
+        transform: translateX(2px) translateY(-2px);
+        opacity: 1;
+    }
+
+    .content-richtext a:hover,
+    .content-richtext a:focus {
+        color: #006562;
+        text-decoration: underline;
+        outline: 2px solid transparent; /* Para acessibilidade de foco */
+    }
+
+    /* Adiciona foco visível */
+    .content-richtext a:focus-visible {
+        outline: 2px solid #006562;
+        outline-offset: 2px;
+    }
+
+    /* Restante do CSS permanece o mesmo */
+    .content-richtext p {
+        margin-bottom: 1.2em;
+        line-height: 1.6;
+    }
+
+    .content-richtext h2 {
+        font-size: 1.5em;
+        margin-top: 1em;
+        color: #333;
+    }
+
+    .content-richtext ul,
+    .content-richtext ol {
+        margin-left: 1.5em;
+        margin-bottom: 1em;
+    }
+
+    .content-richtext blockquote {
+        border-left: 3px solid #007D7A;
+        padding-left: 1em;
+        margin-left: 0;
+        color: #555;
+    }
+
+    .content-richtext img {
+        max-width: 100%;
+        height: auto;
+        margin: 1em 0;
+    }
+
+    /* Classe auxiliar para esconder visualmente texto, mas manter disponível para leitores de tela */
+    .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+    }
 </style>
 
 <div class="content-richtext">
     {% block block_render %}{{ self|richtext }}{% endblock %}
-</div>
+</div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const links = document.querySelectorAll('.content-richtext a');
+        links.forEach(function(link) {
+            // Verifica se o link não é interno
+            const href = link.getAttribute('href');
+            if (href && !href.startsWith('#') && !href.startsWith('/')) {
+                // Adiciona atributos para nova aba
+                link.setAttribute('target', '_blank');
+                link.setAttribute('rel', 'noopener noreferrer');
+                
+                // Adiciona texto de acessibilidade (invisível visualmente, mas lido pelos leitores de tela)
+                const srText = document.createElement('span');
+                srText.classList.add('sr-only');
+                srText.textContent = ' (abre em nova aba)';
+                link.appendChild(srText);
+                
+                // Adiciona atributos para tecnologias assistivas
+                link.setAttribute('aria-describedby', 'new-window-' + Math.random().toString(36).substr(2, 9));
+            }
+        });
+    });
+</script>