Add new functios pages & styles

assets/scripts/site.js

@@ -1,5 +1,6 @@
-// Modal vídeos
 document.addEventListener('DOMContentLoaded', function() {
+
+    // modal videos
     const videoModal = document.getElementById('videoModal');
     const modalIframe = document.getElementById('modalVideoIframe');
     const modalTitle = document.getElementById('videoModalLabel');

page.php

@@ -14,9 +14,17 @@ $context = Timber::context();
 Timber::render( 'templates/page.twig', $context );*/
 
 $context = Timber::context();
-
 $timber_post     = Timber::get_post();
 $context['post'] = $timber_post;
+
 //Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig', 'page.twig' ), $context );
 
-Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig' ), $context );
+// Verificar si es subpágina de contactos
+$parent = get_post($timber_post->post_parent);
+if ($parent && $parent->post_name === 'contactos') {
+    // Para subpáginas de contactos, usar page-contactos.twig
+    Timber::render('templates/page-contactos.twig', $context);
+} else {
+    // Para el resto, usar la lógica original
+    Timber::render(array('templates/page-' . $timber_post->post_name . '.twig'), $context);
+}

src/StarterSite.php

@@ -518,10 +518,40 @@ class StarterSite extends Site {
 		return $subpaginas;
 	}
 
-	private function formContact() {
+	public function getContactoFields() {
-		$form_test = do_shortcode('[contact-form-7 id="5ed613c" title="Formulario de contacto 1"]');
+		$post = Timber::get_post();
+		$form_shortcode = get_field('etiqueta_formulario', $post->ID); // o el campo ACF donde esté el shortcode
 
-		return $form_test;
+		$contactsFields = [
+			'nombre' => get_field('nombre_contacto', $post->ID),
+			'direccion' => get_field('direccion', $post->ID),
+			'url_mapa' => get_field('url_mapa', $post->ID),
+			'forma_contacto' => get_field('forma_contacto', $post->ID),
+			'url_web' => get_field('url_web', $post->ID),
+			'url_facebook' => get_field('url_facebook', $post->ID),
+			'url_twitter' => get_field('url_twitter', $post->ID),
+			'form' => !empty($form_shortcode) ? do_shortcode($form_shortcode) : '',
+		];
+
+		return $contactsFields;
+		
+	}
+
+	public function getAfiliateFields() {
+		$post = Timber::get_post();
+		
+
+		$afiliateFields = [
+			'imagen_afiliate' => get_field('imagen_afiliate', $post->ID),
+			'enlace_boton_afiliate' => get_field('enlace_boton_afiliate', $post->ID),
+			'texto_boton' => get_field('texto_boton', $post->ID),
+		];
+
+		if (empty($afiliateFields['imagen_afiliate']) && empty($afiliateFields['enlace_boton_afiliate'])) {
+        	return null;
+    	}
+
+		return $afiliateFields;
 	}
 
 	//Global variables
@@ -541,7 +571,8 @@ class StarterSite extends Site {
 		$context['enlaces'] = $this->getEnlaces();
 		$context['subpaginas_servicios_publicos'] = $this->getPaginasServiciosPublicos();
 		$context['subpaginas_servicios_privados'] = $this->getPaginasServiciosPrivados();
-		$context['form_test'] = $this->formContact();;
+		$context['contacto_info'] = $this->getContactoFields();
+		$context['afiliate_fields'] = $this->getAfiliateFields();
 
         return $context;
     }

style.css

@@ -6,7 +6,9 @@
 
 :root {
   --rojo-cnt: #dc2d30;
-  --color-secundario: #6C757D;
+  --rojo-cnt-dark: #9d1b1d;
+  --rojo-cnt-light: #d6453f;
+  --reset: #7b7b7b;
 }
 
 @font-face {
@@ -17,6 +19,80 @@
     font-display: swap;
 }
 
+/* Botón primario */
+.btn-primary-cnt {
+    border-radius: 75px !important;
+    background-color: var(--rojo-cnt);
+    border: 2px solid var(--rojo-cnt);
+    color: white;
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+}
+
+/* Botón primario - hover */
+.btn-primary-cnt:hover {
+    background-color: var(--rojo-cnt-dark);
+    border-color: var(--rojo-cnt-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(255, 0, 0, 0.25);
+}
+
+/* Botón primario - active */
+.btn-primary-cnt:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(255, 0, 0, 0.25);
+}
+
+button[type="reset"] {
+    background-color: var(--reset);
+}
+
+/* Botón secundario */
+.btn-secondary-cnt {
+    border-radius: 10px !important;
+    background-color: var(--rojo-cnt-light);
+    border: 2px solid var(--rojo-cnt-light);
+    color: white;
+    padding: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+}
+
+/* Botón secundario - hover */
+.btn-secondary-cnt:hover {
+    background-color: var(--rojo-cnt-light);
+    border-color: var(--rojo-cnt-light);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(255, 0, 0, 0.25);
+}
+
+/* Botón secundario - active */
+.btn-secondary-cnt:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(255, 0, 0, 0.25);
+}
+
+/* Quitar el focus/active de todos los elementos del menú */
+.nav-link:focus,
+.nav-link:active,
+.btn:focus,
+.btn:active,
+.dropdown-item:focus,
+.dropdown-item:active {
+    outline: none !important;
+    box-shadow: none !important;
+    background-color: var(--rojo-cnt) !important;
+    color: white !important;
+    opacity: 0.5;
+}
+
 /* HEADER sindikatua */
 .text-sindikatua {
     font-family: 'Yaro', Arial, sans-serif;
@@ -50,8 +126,7 @@
     opacity: 1;
 }
 
-
+/* PORTADA -> CARDS recent posts 'noticias' */
-/* PORTADA -> CARDS RECENt POSTS NOTICIAS */
 .recent-posts .card-img-overlay {
     top: auto !important;  /* Anula el top: 0 por defecto de Bootstrap */
     bottom: 0;
@@ -126,8 +201,7 @@
 }
 
 /* PORTADA -> Titles */
-.page-portada .sp-module-title::after,
+.sp-module-title::after{
-.contacto-barakaldo .sp-module-title::after {
   background: var(--rojo-cnt);
   content: "";
   height: 1px;
@@ -137,8 +211,7 @@
   width: 150px;
 }
 
-.page-portada .sp-module-title::before,
+.sp-module-title::before{
-.contacto-barakaldo .sp-module-title::before {
   background: var(--rojo-cnt);
   content: "";
   height: 1px;
@@ -209,3 +282,140 @@
   outline: none;
   box-shadow: none;
 }
+
+/* FORM */
+/* Contenedor principal del formulario */
+.formulario-contacto {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+/* Formulario centrado */
+.formulario-contacto .wpcf7-form {
+    width: 100%;
+    max-width: 500px; /* Ajusta según necesites */
+    margin: 0 auto;
+}
+
+/* Estilos para todos los inputs y textareas */
+.formulario-contacto input[type="text"],
+.formulario-contacto input[type="email"],
+.formulario-contacto input[type="tel"],
+.formulario-contacto input[type="url"],
+.formulario-contacto input[type="number"],
+.formulario-contacto textarea,
+.formulario-contacto select {
+    border-radius: 25px !important; /* Bordes redondos */
+    border: 2px solid #e9ecef !important;
+    padding: 12px 20px !important;
+    font-size: 16px;
+    transition: all 0.3s ease;
+    box-shadow: none !important;
+    margin-bottom: 15px;
+}
+
+/* Efecto hover y focus en inputs */
+.formulario-contacto input[type="text"]:focus,
+.formulario-contacto input[type="email"]:focus,
+.formulario-contacto input[type="tel"]:focus,
+.formulario-contacto input[type="url"]:focus,
+.formulario-contacto input[type="number"]:focus,
+.formulario-contacto textarea:focus,
+.formulario-contacto select:focus {
+    border-color: var(--rojo-cnt) !important;
+    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25) !important;
+    outline: none;
+}
+
+.formulario-contacto input {
+    width: 100% !important;
+}
+
+/* Estilo específico para textarea */
+.formulario-contacto textarea {
+    resize: vertical;
+    min-height: 120px;
+    width: 100% !important;
+}
+
+/* Botón submit - ancho completo y redondeado */
+.formulario-contacto input[type="submit"] {
+    width: 100% !important;
+    border-radius: 25px !important;
+    background-color: var(--rojo-cnt);
+    border: 2px solid var(--rojo-cnt);
+    color: white;
+    padding: 15px 30px;
+    font-size: 18px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+}
+
+/* Efectos hover del botón */
+.formulario-contacto input[type="submit"]:hover {
+    background-color: var(--rojo-cnt-dark);
+    border-color: var(--rojo-cnt-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(255, 0, 0, 0.25);
+}
+
+/* Efectos active del botón */
+.formulario-contacto input[type="submit"]:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(255, 0, 0, 0.25);
+}
+
+/* Estilos para labels */
+.formulario-contacto label {
+    font-weight: 500;
+    margin-bottom: 5px;
+    color: #495057;
+    display: block;
+}
+
+/* Mensajes de error de CF7 */
+.formulario-contacto .wpcf7-not-valid-tip {
+    color: var(--rojo-cnt-dark);
+    font-size: 14px;
+    margin-top: 5px;
+}
+
+/* Mensaje de validación */
+.formulario-contacto .wpcf7-validation-errors {
+    border: 1px solid var(--rojo-cnt-dark);
+    background: #f8d7da;
+    color: #721c24;
+    border-radius: 15px;
+    padding: 15px;
+    margin-bottom: 20px;
+}
+
+/* Mensaje de éxito */
+.formulario-contacto .wpcf7-mail-sent-ok {
+    border: 1px solid #28a745;
+    background: #d4edda;
+    color: #155724;
+    border-radius: 15px;
+    padding: 15px;
+    margin-bottom: 20px;
+}
+
+/* Responsive - pantallas pequeñas */
+@media (max-width: 768px) {
+    .formulario-contacto {
+        padding: 15px;
+    }
+    
+    .formulario-contacto .wpcf7-form {
+        max-width: 100%;
+    }
+    
+    .formulario-contacto input[type="submit"] {
+        font-size: 16px;
+        padding: 12px 25px;
+    }
+}