/* Theme Name: Empleo Navarra Child Theme URI: https://empleonavarra.es Description: Tema hijo de Kadence con el diseño moderno de Empleo Navarra (rojo Navarra, tipografía Inter, tarjetas y secciones limpias). Diseño aplicado a todo el sitio. Author: Empleo Navarra Template: kadence Version: 1.0.8 */ /* ========================================================= 1. TOKENS DE DISEÑO ========================================================= */ :root{ --en-red:#C8102E; --en-red-dark:#A00C1F; --en-red-soft:#FCEBEC; --en-text:#1A1A1A; --en-text-soft:#5F6368; --en-bg:#FFFFFF; --en-surface:#F7F8FA; --en-border:#E5E7EB; --en-radius:12px; --en-radius-sm:8px; } /* ========================================================= 2. TIPOGRAFÍA Y BASE ========================================================= */ body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--en-text); line-height:1.7; font-size:17px; } h1,h2,h3,h4,h5{font-family:inherit;color:var(--en-text);font-weight:600;line-height:1.25;} h1{font-size:2rem;} h2{font-size:1.55rem;margin-top:1.8em;} h3{font-size:1.2rem;margin-top:1.4em;} a{color:var(--en-red);text-decoration:none;} a:hover{color:var(--en-red-dark);text-decoration:underline;} /* Ancho de lectura cómodo en entradas */ .single .entry-content,.page .entry-content{max-width:760px;margin-left:auto;margin-right:auto;} .entry-content p,.entry-content li{font-size:1.0625rem;} /* ========================================================= 3. BOTONES (incluye los wp-block-button de las páginas) ========================================================= */ .wp-block-button__link, .wp-block-button .wp-element-button, button,input[type="submit"],.button,.kb-button{ background-color:var(--en-red)!important; border-color:var(--en-red)!important; color:#fff!important; border-radius:var(--en-radius-sm)!important; font-weight:500; transition:background-color .15s ease, transform .1s ease; } .wp-block-button__link:hover, .wp-block-button .wp-element-button:hover, button:hover,.button:hover{ background-color:var(--en-red-dark)!important; transform:translateY(-1px); } /* ========================================================= 4. TABLAS (las páginas de cita previa usan tablas) ========================================================= */ .entry-content table{ border-collapse:collapse;width:100%;font-size:.95rem; border:1px solid var(--en-border);border-radius:var(--en-radius-sm);overflow:hidden; } .entry-content table th{background:var(--en-surface);color:var(--en-text);font-weight:600;text-align:left;} .entry-content table th,.entry-content table td{padding:10px 14px;border-bottom:1px solid var(--en-border);} .entry-content table tr:last-child td{border-bottom:none;} /* ========================================================= 5. CABECERA Y MENÚ ========================================================= */ .site-header,.site-header-wrap{border-bottom:1px solid var(--en-border);} .site-branding .site-title,.site-title a{font-weight:600;color:var(--en-text);} .header-navigation a{font-weight:500;} .header-navigation a:hover{color:var(--en-red);} /* ========================================================= 6. LISTADOS / ARCHIVO (tarjetas de entrada) ========================================================= */ .loop-entry.content-bg,.loop-entry{ border:1px solid var(--en-border)!important;border-radius:var(--en-radius)!important; box-shadow:none!important;transition:transform .15s ease, box-shadow .15s ease; } .loop-entry:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.07)!important;} .entry-title a:hover{color:var(--en-red);} /* ========================================================= 7. FOOTER (gris claro, no oscuro) ========================================================= */ .site-footer,.site-footer-row-container-inner{ background:var(--en-surface)!important; color:var(--en-text-soft)!important; border-top:1px solid var(--en-border); } .site-footer a{color:var(--en-red);} .site-footer a:hover{color:var(--en-red-dark);} /* ========================================================= 8. UTILIDADES PARA LA HOME (bloque HTML personalizado) Ver home-block.html — usa el prefijo .enh ========================================================= */ .enh *{box-sizing:border-box;} .enh{color:var(--en-text);} .enh-section{padding:48px 16px;} .enh-section--soft{background:var(--en-surface);} .enh-wrap{max-width:1080px;margin:0 auto;} .enh-center{text-align:center;} .enh-htitle{font-size:1.6rem;font-weight:600;display:inline-block;padding-bottom:8px;border-bottom:3px solid var(--en-red);margin:0 0 6px;} .enh-sub{color:var(--en-text-soft);margin:0 auto 28px;max-width:560px;} .enh-hero{background:var(--en-surface);padding:64px 16px;text-align:center;} .enh-badge{display:inline-block;background:var(--en-red-soft);color:var(--en-red-dark);font-size:.8rem;font-weight:500;padding:5px 14px;border-radius:20px;margin-bottom:14px;} .enh-hero h1{font-size:2.4rem;margin:0 0 12px;} .enh-hero p{color:var(--en-text-soft);max-width:520px;margin:0 auto 22px;font-size:1.05rem;} .enh-search{display:flex;gap:8px;max-width:520px;margin:0 auto;} .enh-search input[type="search"]{flex:1;height:50px;padding:0 16px;border:1px solid var(--en-border);border-radius:var(--en-radius-sm);font-size:1rem;} .enh-search button{height:50px;padding:0 26px;border-radius:var(--en-radius-sm);} .enh-grid{display:grid;gap:18px;} .enh-grid--4{grid-template-columns:repeat(4,1fr);} .enh-grid--3{grid-template-columns:repeat(3,1fr);} .enh-card{display:block;background:var(--en-bg);border:1px solid var(--en-border);border-radius:var(--en-radius);padding:22px;color:var(--en-text);transition:transform .15s ease, box-shadow .15s ease;} .enh-card:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.08);text-decoration:none;color:var(--en-text);} .enh-ic{width:46px;height:46px;border-radius:11px;background:var(--en-red-soft);color:var(--en-red);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px;} .enh-card h3{margin:0 0 5px;font-size:1.05rem;} .enh-card p{margin:0;font-size:.9rem;color:var(--en-text-soft);line-height:1.5;} .enh-card--row{display:flex;gap:14px;align-items:flex-start;} .enh-card--row .enh-ic{margin-bottom:0;flex-shrink:0;width:42px;height:42px;font-size:21px;} .enh-news{background:var(--en-red);border-radius:var(--en-radius);padding:34px;max-width:560px;margin:0 auto;text-align:center;color:#fff;} .enh-news h2{color:#fff;margin:0 0 6px;font-size:1.4rem;} .enh-news p{margin:0 0 18px;opacity:.92;font-size:.95rem;} @media(max-width:900px){.enh-grid--4{grid-template-columns:repeat(2,1fr);}.enh-grid--3{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.enh-grid--4,.enh-grid--3{grid-template-columns:1fr;}.enh-hero h1{font-size:1.8rem;}.enh-search{flex-direction:column;}.enh-search button{width:100%;}} /* ========================================================= 9. CABECERA CON OFICIO (header, menú, título de página) NOTA para Code: si algún selector no aplica porque Kadence usa otra clase, inspecciona el HTML y ajusta el selector al real. ========================================================= */ /* 9.1 Línea roja superior en toda la web */ #wrapper,body{position:relative;} .site-header{border-top:4px solid var(--en-red);} /* 9.2 Logo de texto con más presencia */ .site-title a,.site-branding .site-title{font-weight:700!important;letter-spacing:-.01em;} /* 9.3 Menú: hover y elemento activo con subrayado rojo */ .header-navigation ul.menu > li > a, .primary-menu-container ul.menu > li > a{ position:relative;font-weight:500;transition:color .15s ease; } .header-navigation ul.menu > li > a:hover, .header-navigation ul.menu > li.current-menu-item > a, .header-navigation ul.menu > li.current-menu-ancestor > a{ color:var(--en-red)!important; } .header-navigation ul.menu > li > a::after{ content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px; background:var(--en-red);border-radius:2px;transform:scaleX(0);transform-origin:left; transition:transform .18s ease; } .header-navigation ul.menu > li > a:hover::after, .header-navigation ul.menu > li.current-menu-item > a::after, .header-navigation ul.menu > li.current-menu-ancestor > a::after{transform:scaleX(1);} /* 9.4 Sombra sutil cuando la cabecera queda fija (sticky) */ .site-header-row-container.item-is-fixed, .site-header.item-is-fixed{box-shadow:0 2px 12px rgba(0,0,0,.06);} /* 9.5 Botón CTA "Pedir cita previa" dentro del menú (Code lo añade como elemento botón del header de Kadence o como ítem de menú con la clase .en-cta) */ .en-cta > a,a.en-cta,.header-navigation li.en-cta > a{ background:var(--en-red)!important;color:#fff!important; border-radius:8px;padding:9px 16px!important;font-weight:600; } .en-cta > a:hover,a.en-cta:hover{background:var(--en-red-dark)!important;} .en-cta > a::after{display:none!important;} /* 9.6 Banda de título de página: compacta, alineada a la izquierda, con acento */ .entry-hero-container-inner,.entry-hero .entry-header{ padding-top:30px!important;padding-bottom:30px!important; } .entry-hero .entry-header,.entry-hero-container-inner .entry-header{ text-align:left!important;border-left:4px solid var(--en-red); padding-left:18px;max-width:1080px;margin-left:auto;margin-right:auto; } .entry-hero h1{font-size:1.9rem;margin:0;} /* 9.7 Migas de pan (activar breadcrumbs de Kadence o Yoast) */ .kadence-breadcrumbs,.yoast-breadcrumbs,#breadcrumbs{ font-size:.8rem;color:var(--en-text-soft);margin-bottom:8px; } .kadence-breadcrumbs a,.yoast-breadcrumbs a{color:var(--en-text-soft);} .kadence-breadcrumbs a:hover{color:var(--en-red);} .kadence-breadcrumbs .kb-breadcrumb-last,.yoast-breadcrumbs .breadcrumb_last{color:var(--en-red);font-weight:500;} /* ========================================================= 10. NEWSLETTER — legibilidad sobre panel rojo (fix) ========================================================= */ .enh-news, .enh-news *{color:#fff;} .enh-news input[type="text"],.enh-news input[type="email"]{width:100%;box-sizing:border-box;height:46px;border:none;border-radius:8px;padding:0 14px;margin:6px 0;font-size:1rem;color:#1A1A1A;background:#fff;} .enh-news a{color:#fff;text-decoration:underline;} .enh-news label{color:#fff;font-size:.9rem;} .enh-news input[type="submit"],.enh-news button{background:#fff!important;color:#A00C1F!important;border:none!important;border-radius:8px!important;font-weight:600!important;padding:12px 26px!important;cursor:pointer;margin-top:10px;width:auto;} .enh-news input[type="submit"]:hover,.enh-news button:hover{background:#FCEBEC!important;} .enh-news input[type="checkbox"]{width:auto;height:auto;margin-right:6px;vertical-align:middle;} /* ========================================================= 11. CTA del header — que no rompa a segunda línea (Brief 08) ========================================================= */ /* La barra de navegación no envuelve; todo en una fila centrada */ .header-navigation ul.menu, .primary-menu-container ul.menu{ display:flex; flex-wrap:nowrap; align-items:center; } /* CTA: no se estira ni rompe línea, alineado al centro vertical */ .header-navigation li.en-cta{ display:flex; align-items:center; white-space:nowrap; } .header-navigation li.en-cta > a{ display:inline-flex; align-items:center; line-height:1; padding:9px 16px!important; margin-left:6px; } /* 11b — ítems del menú en una sola línea cada uno + espaciado compacto (Brief 08) */ .header-navigation ul.menu > li > a{white-space:nowrap;padding-left:13px;padding-right:13px;} /* 12. Query Loop con tarjetas de imagen (home "Últimas guías" + página /guias/) */ /* rejilla base (home Últimas guías): 4 columnas, responsive */ .enh-postgrid .wp-block-post-template{list-style:none;display:grid;gap:20px;margin:0;padding:0;grid-template-columns:repeat(4,1fr);} /* /guias/: rejilla fluida que rellena y reparte por igual (tarjetas mín. 280px) */ .enh-postgrid--3 .wp-block-post-template{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));} /* tarjeta de marca, misma altura (flex column) */ .enh-postgrid .wp-block-post{margin:0;background:var(--en-bg);border:1px solid var(--en-border);border-radius:var(--en-radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease, box-shadow .15s ease;} .enh-postgrid .wp-block-post:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.08);} /* miniatura uniforme 16:9 (con respaldo de marca si faltara imagen) */ .enh-postgrid .wp-block-post-featured-image{margin:0;line-height:0;display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--en-red-soft),#fff);} .enh-postgrid .wp-block-post-featured-image a{display:block;width:100%;height:100%;} .enh-postgrid .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;display:block;} /* título recortado a 2 líneas (reserva alto para alinear) */ .enh-postgrid .wp-block-post-title{font-size:1rem;line-height:1.35;margin:0;padding:14px 16px 6px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;} .enh-postgrid .wp-block-post-title a{color:var(--en-text);text-decoration:none;} .enh-postgrid .wp-block-post-title a:hover{color:var(--en-red);} /* resumen recortado a 3 líneas */ .enh-postgrid .wp-block-post-excerpt{margin:0;padding:0 16px 16px;} .enh-postgrid .wp-block-post-excerpt p{font-size:.88rem;color:var(--en-text-soft);line-height:1.5;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .enh-postgrid .wp-block-post-excerpt__more-link{font-size:.85rem;color:var(--en-red);font-weight:600;text-decoration:none;} /* paginación de marca */ .enh-postgrid .wp-block-query-pagination{margin-top:28px;gap:6px;justify-content:center;flex-wrap:wrap;} .enh-postgrid .wp-block-query-pagination .page-numbers,.enh-postgrid .wp-block-query-pagination a{padding:6px 12px;border:1px solid var(--en-border);border-radius:8px;color:var(--en-text);text-decoration:none;line-height:1.2;} .enh-postgrid .wp-block-query-pagination .page-numbers.current{background:var(--en-red);color:#fff;border-color:var(--en-red);} .enh-postgrid .wp-block-query-pagination a:hover{background:var(--en-red-soft);border-color:var(--en-red);color:var(--en-red-dark);} @media(max-width:900px){.enh-postgrid .wp-block-post-template{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.enh-postgrid .wp-block-post-template{grid-template-columns:1fr;}} /* /guias/ (página índice): ancho amplio para la rejilla, no la columna de lectura 760px */ .page-id-1214 .entry-content{max-width:1140px;} /* 13. Bloques visuales en posts: infografía .eninfo + caja de claves .enkeys */ .entry-content .eninfo{margin:28px 0;border:1px solid var(--en-border);border-radius:14px;overflow:hidden;} .eninfo-head{background:var(--en-red);color:#fff;padding:18px 22px;} .eninfo-head b{font-size:1.25rem;display:block;line-height:1.2;} .eninfo-head span{font-size:.9rem;opacity:.92;} .eninfo-body{padding:20px 22px;} .eninfo-stats{display:flex;flex-wrap:wrap;gap:12px;} .eninfo-stat{flex:1 1 160px;background:var(--en-red-soft);border-radius:12px;padding:16px 12px;text-align:center;} .eninfo-stat b{display:block;color:var(--en-red);font-size:1.1rem;line-height:1.15;margin-bottom:4px;} .eninfo-stat span{color:var(--en-text-soft);font-size:.85rem;} .eninfo ul{margin:0;padding-left:20px;}.eninfo li{margin:6px 0;} .eninfo-src{display:block;margin-top:12px;font-size:.8rem;color:var(--en-text-soft);} .enkeys{margin:28px 0;border-left:4px solid var(--en-red);background:var(--en-surface);border-radius:0 12px 12px 0;padding:18px 22px;} .enkeys b{display:block;margin-bottom:8px;color:var(--en-text);} .enkeys ul{margin:0;padding-left:20px;}.enkeys li{margin:6px 0;} /* ========================================================= 14. CENTRALIZADO — meta oculta + tarjetas uniformes en TODOS los listados Una sola fuente: estiliza el componente nativo de Kadence (.loop-entry), que usan categoría /category/, etiquetas, búsqueda y blog. NO por página. ========================================================= */ /* 14.1 Ocultar meta autor/fecha (los artículos llevan su "Última revisión" en el contenido). display:none conserva el