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

enap_designsystem/migrations/0466_carouselresponsivo_largura_container.py

@@ -0,0 +1,29 @@
+# Generated by Django 5.1.6 on 2025-10-20 12:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        (
+            "enap_designsystem",
+            "0465_alter_areaaluno_body_alter_cursoeadpage_curso_and_more",
+        ),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="carouselresponsivo",
+            name="largura_container",
+            field=models.CharField(
+                choices=[
+                    ("limitador", "Com margem (limitado)"),
+                    ("tela_toda", "Tela toda (100%)"),
+                ],
+                default="limitador",
+                help_text="Define se o carrossel terá margens ou ocupará toda a largura da tela",
+                max_length=20,
+            ),
+        ),
+    ]

enap_designsystem/models.py

@@ -4195,7 +4195,7 @@ class SEOMixin(models.Model):
             return clean_text
         
         # Fallback padrão
-        return f"Conheça mais sobre {self.title} na ENAP - Escola Nacional de Administração Pública."
+        return f"Conheça mais sobre {self.title} na Enap - Escola Nacional de Administração Pública."
     
     def _find_first_image(self):
         """Encontra primeira imagem no conteúdo para Open Graph"""
@@ -5832,7 +5832,7 @@ class ShowcaseComponentesDireto(Page):
             return random.choice(buttons)
             
         elif 'name' in field_lower or 'nome' in field_lower:
-            return 'ENAP - Escola Nacional de Administração Pública'
+            return 'Enap - Escola Nacional de Administração Pública.'
             
         elif 'author' in field_lower or 'autor' in field_lower:
             return 'Equipe ENAP'

enap_designsystem/static/enap_designsystem/blocks/banner_topicos_block.css

@@ -33,7 +33,7 @@
     position: relative;
     z-index: 2;
     width: 100%;
-    max-width: 1200px;
+    max-width: 1142px;
     margin: 0 auto;
 }
 

enap_designsystem/static/enap_designsystem/blocks/btn.css

@@ -18,14 +18,35 @@ a{
 .content-richtext a {
     display: inline-flex;
     align-items: center;
-    padding: 0px 10px;
+    padding: 0;
     background-color: transparent;
     border: none;
     color: #007D7A;
     gap: 8px;
     width: auto;
-    text-decoration: none;
     border-radius: 32px;
+    font-weight: 900;
+    position: relative;
+    padding-right: 18px; /* Espaço para o ícone */
+}
+
+.content-richtext a::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;
+}
+
+/* Efeito hover opcional */
+.content-richtext a:hover::after {
+    transform: translateX(2px) translateY(-2px);
+    opacity: 1;
 }
 
 .small{

enap_designsystem/static/enap_designsystem/blocks/capsulas.css

@@ -1,23 +1,20 @@
-<artifact id="styles_for_icons_continued" type="application/vnd.ant.code" language="css">
-    .capsulas-icon-blob {
-        width: 120px;
-        height: 120px;
-    }
-    
-    .capsulas-section-icon {
-        font-size: 3.5rem;
-    }
-}
-
 /* Estilos de ênfase para elementos principais */
 .capsulas-hero__title {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 1.5rem;
-    color: var(--primary, #00a39c);
+    color: white;
     line-height: 1.2;
 }
 
+.capsulas-illustration{
+    width: 100%;
+}
+
+.capsulas-section-header{
+    margin-bottom: 50px;
+}
+
 .capsulas-hero__tag {
     display: inline-block;
     padding: 0.5rem 1.5rem;
@@ -179,18 +176,6 @@
     width: 100%;
 }
 
-/* Botões estilizados */
-.capsulas-btn {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.8rem 1.5rem;
-    border: none;
-    border-radius: 30px;
-    font-weight: 600;
-    cursor: pointer;
-    text-decoration: none;
-}
-
 .capsulas-btn--primary {
     background: var(--primary, #00a39c);
     color: white;
@@ -198,7 +183,6 @@
 
 .capsulas-btn--primary:hover {
     background: #008b84;
-    transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0,0,0,0.1);
 }
 
@@ -234,7 +218,6 @@
     color: #666;
     margin-bottom: 1.5rem;
 }
-</artifact>
 
 
 
@@ -673,6 +656,13 @@
             grid-template-columns: 1fr;
         }
     }
+
+    .recurso-card-link{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    }
     
     .recurso-card {
         background: white;
@@ -699,7 +689,7 @@
         width: 56px;
         height: 56px;
         background: #025257;
-        border-radius: var(--radius-lg);
+        border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -774,7 +764,7 @@
         align-items: center;
         gap: 0.375rem;
         padding: 0.375rem 0.875rem;
-        border-radius: var(--radius-xl);
+        border-radius: 24px;
         font-size: 0.8125rem;
         font-weight: 700;
         margin-bottom: 1rem;
@@ -922,21 +912,21 @@
 /* Capsulas index */
 /* ============================================ */
 
-
-
 :root {
-    --primary: #1E5F58;
-    --primary-light: #EBEFF5;
-    --primary-dark: #0A4A43;
+    --primary: #02333A;
+    --primary-light: #006969;
+    --primary-dark: #024248;
     --secondary: #FFC75F;
-    --accent: #FF9671;
+    --accent: #FC404D;
     --dark: #333333;
     --light: #FFFFFF;
-    --gray-100: #F8F8F8;
-    --gray-200: #EEEEEE;
-    --gray-300: #DDDDDD;
-    --gray-400: #999999;
-    --green: #48A87C;
+    --gray-100: #F5F7FA;
+    --gray-200: #EBEFF5;
+    --gray-300: #DEE3ED;
+    --gray-400: #C8D1E0;
+    --green: #024248;
+    --button-color: #007D7A; 
+    --tab-active: #024248; 
 }
 
 * {
@@ -946,13 +936,45 @@
     font-family: 'Inter', 'Segoe UI', sans-serif;
 }
 
+/* Estilo de foco global para acessibilidade por teclado */
+:focus-visible {
+    outline: 3px solid var(--focus-color) !important;
+    outline-offset: 2px;
+    border-radius: 4px;
+}
+
+/* Classe para elementos visíveis apenas 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;
+}
+
 body {
     background-color: var(--light);
     color: var(--dark);
-    line-height: 1.6;
+    line-height: 1.8; /* Aumentado para melhor legibilidade */
     overflow-x: hidden;
 }
 
+/* Links com melhor acessibilidade */
+a {
+    text-decoration: underline; /* Tornar links mais distinguíveis */
+    color: var(--primary);
+    transition: color 0.3s ease;
+}
+
+a:hover, a:focus {
+    text-decoration: none;
+    color: var(--primary-dark);
+}
+
 .capsulas-container {
     max-width: 1142px;
     margin: 0 auto;
@@ -996,14 +1018,15 @@ nav a {
     text-decoration: none;
     color: var(--dark);
     font-weight: 500;
-    font-size: 0.95rem;
+    font-size: 1rem; /* Aumentado para melhor legibilidade */
     transition: all 0.3s ease;
     padding: 0.5rem 0;
     white-space: nowrap;
 }
 
-nav a:hover {
+nav a:hover, nav a:focus {
     color: var(--primary);
+    text-decoration: underline;
 }
 
 /* Hero Section */
@@ -1044,20 +1067,12 @@ nav a:hover {
     color: var(--light);
     padding: 0.5rem 1.5rem;
     border-radius: 50px;
-    font-size: 0.9rem;
+    font-size: 1rem; /* Aumentado para melhor legibilidade */
     font-weight: 600;
     margin-bottom: 1.5rem;
     border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-.capsulas-hero__title {
-    font-size: 3.5rem;
-    line-height: 1.2;
-    margin-bottom: 1.5rem;
-    font-weight: 800;
-    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-}
-
 .capsulas-hero__description {
     font-size: 1.2rem;
     margin-bottom: 2rem;
@@ -1069,7 +1084,7 @@ nav a:hover {
 
 .capsulas-hero__cta {
     display: inline-block;
-    background-color: #007D7A;
+    background-color: var(--button-color); /* Cor ajustada para melhor contraste */
     color: var(--light);
     text-decoration: none;
     padding: 0.8rem 2rem;
@@ -1077,11 +1092,16 @@ nav a:hover {
     font-weight: 600;
     transition: all 0.3s ease;
     border: 2px solid transparent;
+    min-height: 44px; /* Área de toque mínima */
+    font-size: 1rem; /* Aumentado para melhor legibilidade */
+    line-height: normal;
 }
 
-.capsulas-hero__cta:hover {
+.capsulas-hero__cta:hover, .capsulas-hero__cta:focus {
     background-color: var(--primary-dark);
     transform: translateY(-2px);
+    border-color: var(--light);
+    outline-offset: 3px;
 }
 
 /* Floating Tab Navigation */
@@ -1141,47 +1161,63 @@ nav a:hover {
 }
 
 .capsulas-tab-item {
-    padding: 0.5rem 1rem;
+    padding: 0.8rem 1.2rem; /* Aumentado para área de toque adequada */
     background-color: transparent;
     color: var(--dark);
-    border: none;
+    border: 1px solid transparent;
     border-radius: 50px;
-    font-size: 0.9rem;
+    font-size: 1rem; /* Aumentado para melhor legibilidade */
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
     white-space: nowrap;
+    min-height: 44px; /* Área de toque mínima */
+    min-width: 44px;
 }
 
 .capsulas-tab-item:hover {
-    background-color: #007D7A;
+    background-color: var(--button-color);
+    color: var(--light);
+}
+
+.capsulas-tab-item:focus-visible {
+    outline: 3px solid var(--focus-color);
+    outline-offset: 2px;
 }
 
 .capsulas-tab-item.capsulas-tab-item--active {
-    background-color: #024248;
+    background-color: var(--tab-active); /* Cor ajustada para melhor contraste */
     color: var(--light);
+    border: 2px solid var(--light);
 }
 
 .capsulas-tab-arrow {
-    width: 32px;
-    height: 32px;
+    width: 44px; /* Aumentado para área de toque adequada */
+    height: 44px; /* Aumentado para área de toque adequada */
+    min-width: 44px;
+    min-height: 44px;
     border-radius: 50%;
-    background-color: var(--primary-light);
-    color: var(--primary);
+    background-color: white;
+    border: 3px solid #007D7A;
+    color: #007D7A;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all 0.3s ease;
     flex-shrink: 0;
 }
 
-.capsulas-tab-arrow:hover {
+.capsulas-tab-arrow:hover, .capsulas-tab-arrow:focus {
     background-color: var(--primary);
     color: var(--light);
 }
 
+.capsulas-tab-arrow:focus-visible {
+    outline: 3px solid var(--focus-color);
+    outline-offset: 2px;
+}
+
 .capsulas-tab-arrow.capsulas-tab-arrow--prev {
     margin-right: 0.5rem;
 }
@@ -1201,6 +1237,12 @@ nav a:hover {
     background-color: var(--primary-light);
 }
 
+.capsulas-content-section-why {
+    background-color: #DEE3ED;
+    color: white;
+    padding: 30px 0;
+}
+
 .capsulas-section-header {
     position: relative;
 }
@@ -1209,7 +1251,7 @@ nav a:hover {
     text-align: center;
 }
 
-.capsulas-section-title-caps {
+.capsulas-section-title-caps-dark {
     font-size: 2.2rem;
     color: #024248;
     margin-bottom: 1rem;
@@ -1217,6 +1259,14 @@ nav a:hover {
     display: inline-block;
 }
 
+.capsulas-section-title-caps-white {
+    font-size: 2.2rem;
+    color: white;
+    margin-bottom: 1rem;
+    position: relative;
+    display: inline-block;
+}
+
 .capsulas-section-description {
     font-size: 1.1rem;
     color: var(--dark);
@@ -1274,6 +1324,10 @@ nav a:hover {
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 
+.capsulas-content-card:focus-within {
+    box-shadow: 0 0 0 3px var(--focus-color);
+}
+
 .capsulas-card__image {
     width: 100%;
     height: 200px;
@@ -1301,30 +1355,38 @@ nav a:hover {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 0.7rem 1.5rem;
+    padding: 0.8rem 1.5rem; /* Aumentado para área de toque adequada */
     border-radius: 50px;
     font-weight: 600;
-    font-size: 0.95rem;
+    font-size: 1rem; /* Aumentado para melhor legibilidade */
     text-decoration: none;
-    transition: all 0.3s ease;
     cursor: pointer;
-    border: none;
+    border: 2px solid transparent;
+    min-height: 44px; /* Área de toque mínima */
+    min-width: 44px;
 }
 
 .capsulas-btn.capsulas-btn--primary {
-    background-color: #007D7A;
+    background-color: var(--button-color); /* Cor ajustada para melhor contraste */
     color: var(--light);
 }
 
-.capsulas-btn.capsulas-btn--primary:hover {
+.capsulas-btn.capsulas-btn--primary:hover, 
+.capsulas-btn.capsulas-btn--primary:focus {
     background-color: var(--primary-dark);
+    border-color: var(--light);
+}
+
+.capsulas-btn:focus-visible {
+    outline: 3px solid var(--focus-color);
+    outline-offset: 2px;
 }
 
 .capsulas-btn i {
     transition: transform 0.3s ease;
 }
 
-.capsulas-btn:hover i {
+.capsulas-btn:hover i, .capsulas-btn:focus i {
     transform: translateX(3px);
 }
 
@@ -1354,12 +1416,19 @@ nav a:hover {
     cursor: pointer;
     transition: all 0.3s ease;
     border-bottom: 1px solid var(--gray-200);
+    min-height: 44px; /* Área de toque mínima */
 }
 
 .capsulas-accordion__header:hover {
     background-color: var(--gray-100);
 }
 
+.capsulas-accordion__header:focus-visible {
+    outline: 3px solid var(--focus-color);
+    outline-offset: 2px;
+    background-color: var(--primary-light);
+}
+
 .capsulas-accordion__title {
     font-size: 1.1rem;
     font-weight: 600;
@@ -1382,8 +1451,10 @@ nav a:hover {
 }
 
 .capsulas-accordion__toggle {
-    width: 24px;
-    height: 24px;
+    width: 44px; /* Aumentado para área de toque adequada */
+    height: 44px; /* Aumentado para área de toque adequada */
+    min-width: 44px;
+    min-height: 44px;
     border-radius: 50%;
     background-color: var(--gray-200);
     display: flex;
@@ -1405,6 +1476,54 @@ nav a:hover {
     color: var(--dark);
 }
 
+.capsulas-accordion__body a:focus-visible,
+.capsulas-accordion__body button:focus-visible {
+    outline: 3px solid var(--focus-color);
+    outline-offset: 2px;
+}
+
+/* Suporte para casos sem JavaScript */
+.no-js .capsulas-accordion,
+.no-js .capsulas-accordion__body {
+    max-height: none !important;
+    opacity: 1 !important;
+}
+
+.no-js .capsulas-content-section {
+    display: block !important;
+}
+
+/* Suporte para Alto Contraste */
+@media (forced-colors: active) {
+    .capsulas-btn,
+    .capsulas-tab-item,
+    .capsulas-hero__cta {
+        border: 1px solid currentColor;
+    }
+    
+    .capsulas-tab-item.capsulas-tab-item--active {
+        border: 2px solid currentColor;
+    }
+}
+
+/* Suporte para Preferência de Movimento Reduzido */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        transition-duration: 0.01ms !important;
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        scroll-behavior: auto !important;
+    }
+    
+    .capsulas-accordion {
+        transition: none !important;
+    }
+    
+    .capsulas-tab-navigation.fixed {
+        animation: none !important;
+    }
+}
+
 /* Responsive */
 @media (max-width: 768px) {
     .capsulas-two-column {
@@ -1433,4 +1552,33 @@ nav a:hover {
     .capsulas-tab-navigation.fixed {
         width: 95%;
     }
+}
+
+@media (max-width: 480px) {
+    .capsulas-tab-item {
+        padding: 0.5rem 0.8rem;
+        font-size: 0.95rem; /* Ligeiramente menor, mas mantendo legibilidade */
+    }
+    
+    .capsulas-hero {
+        min-height: 400px; /* Reduzir altura mínima */
+    }
+    
+    .capsulas-hero__title {
+        font-size: 1.8rem; /* Reduzir tamanho do título */
+    }
+    
+    .capsulas-section-title-caps {
+        font-size: 1.5rem; /* Reduzir tamanhos de títulos */
+    }
+    
+    /* Garantir tamanho mínimo para controles touch */
+    .capsulas-tab-arrow,
+    .capsulas-accordion__toggle,
+    .capsulas-btn,
+    .capsulas-hero__cta,
+    .capsulas-tab-item {
+        min-width: 44px;
+        min-height: 44px;
+    }
 }

enap_designsystem/static/enap_designsystem/blocks/carousel_images.css

@@ -56,7 +56,7 @@
 .slide-image img {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
     object-position: center;
 }
 
@@ -298,10 +298,12 @@
     
     .carousel-arrow.prev {
         left: 15px;
+        top: 530px;
     }
     
     .carousel-arrow.next {
         right: 15px;
+        top: 530px;
     }
 }