/* ============================================================ HEADER NUEVO - San Vicente Fundación Fusiona visualmente logo_bar + main_menu_bar en una sola barra oscura semitransparente. No modifica bloques ni menús existentes en Drupal, solo aplica estilos nuevos. ALCANCE (actualizado): - .r-header--home -> estilos visuales del header (todas las páginas) - body.has-header-overlay .r-header--home -> posicionamiento superpuesto sobre el slider (SOLO home + nodos marcados con field_header_superpuesto). - .r-header--portal / .r-header--rionegro / .r-header--medellin -> se agregan cuando la ruta o el subdominio corresponden a un portal (ver svf_theme_portal_activo() en svf_theme.theme). La clase 'has-header-overlay' la agrega svf_theme_preprocess_html() al . Sin ella el header se comporta como barra normal en flujo, no flotante. BREAKPOINT: 1200px, alineado con r-mobilenav.css y con el resto del sitio. Por debajo de ese ancho manda la barra móvil definida en r-mobilenav.css (fondo morado, orden logo | CTA | buscador | hamburguesa); aquí solo se libera el hamburguesa y se apaga el menú horizontal. ============================================================ */ /* ------------------------------------------------------------ Contenedor general del header — estado NORMAL (en flujo) Aplica a cualquier página que no tenga overlay. ------------------------------------------------------------ */ .r-header--home { position: relative; width: 100%; z-index: 20; } /* Fondo sólido para las páginas sin slider detrás: sin esto el menú blanco quedaría ilegible sobre fondo blanco. */ .r-header--home .r-logo { background-color: var(--svf-negro-marca, #0A0E0C); padding: 0; } /* ------------------------------------------------------------ Estado OVERLAY — header flotante sobre el slider ------------------------------------------------------------ */ body.has-header-overlay .r-header--home { position: absolute; top: 0; left: 0; width: 100%; z-index: 20; background: transparent; /* El contenedor deja pasar el mouse por defecto; solo sus elementos interactivos reales vuelven a capturar clics. Así el botón contextual del slider (visible para usuarios logueados) sigue siendo accesible debajo del header. */ pointer-events: none; } body.has-header-overlay .r-header--home .logo__menu__principal, body.has-header-overlay .r-header--home nav.block-menu, body.has-header-overlay .r-header--home .search-block-form, body.has-header-overlay .r-header--home .r-header-portal { pointer-events: auto; } /* Degradado que sustituye al fondo sólido cuando hay slider. */ body.has-header-overlay .r-header--home .r-logo { background-color: transparent; background: linear-gradient( to bottom, rgba(10, 14, 12, 0.75) 0%, rgba(10, 14, 12, 0.55) 45%, rgba(10, 14, 12, 0.2) 80%, rgba(10, 14, 12, 0) 100% ); padding: 0; padding-bottom: 40px; /* extiende el degradado más allá del contenido para un desvanecido más largo */ } /* Cuando el usuario está logueado, Drupal Toolbar reserva espacio arriba del body (normalmente ~39px o ~79px si el toolbar tiene 2 filas de menú abierto). El header absoluto debe empezar DESPUÉS de esa franja, o queda tapado detrás de la Toolbar. Solo aplica en modo overlay: en flujo normal no hace falta. */ body.has-header-overlay.toolbar-fixed .r-header--home { top: 39px; /* altura estándar de la barra de admin en una fila */ } body.has-header-overlay.toolbar-fixed.toolbar-vertical .r-header--home, body.has-header-overlay.toolbar-fixed.toolbar-tray-open.toolbar-vertical .r-header--home { top: 39px; left: 0; } /* Si el usuario tiene el menú de administración expandido en horizontal (segunda fila con "Contenido, Estructura..."), la Toolbar ocupa más alto. Drupal agrega 'toolbar-horizontal' + 'toolbar-tray-open' en ese caso. */ body.has-header-overlay.toolbar-tray-open.toolbar-horizontal .r-header--home { top: 79px; } /* Oculta la franja r-top si llegara a tener contenido en el futuro (hoy no imprime nada porque no tiene bloques asignados) */ .r-header--home .r-top { display: none; } /* La región main_menu_bar quedó vacía (sin bloque asignado), así que no imprime HTML — no necesita estilos, pero se deja oculta por si acaso para evitar espacios en blanco. */ .r-header--home .r-main-menu:empty { display: none; } /* ------------------------------------------------------------ Fila interna: logo + menú + buscador en una sola línea ------------------------------------------------------------ */ .r-header--home .r-logo_col { display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; gap: 0; } .r-header--home .logo__menu__principal { display: flex; align-items: center; gap: 12px; padding: 20px 0px; } .r-header--home .navbar-brand__btn-menu { display: none; /* botón hamburguesa: se activa solo en móvil, ver media query abajo */ } .r-header--home .brand-img { max-width: 260px; height: auto; } /* ------------------------------------------------------------ Menú principal (Menú Home) - ul.menu > li.menu-item > a ------------------------------------------------------------ */ .r-header--home nav.block-menu { flex: 1; display: flex; align-items: stretch; justify-content: center; align-self: stretch; padding: 0; margin: 0; } .r-header--home nav.block-menu .menu { display: flex; align-items: stretch; align-self: stretch; height: 100%; gap: 0; list-style: none; margin: 0; padding: 0; } .r-header--home nav.block-menu .menu-item { display: flex; align-items: center; } .r-header--home nav.block-menu .menu-item a { display: flex; align-items: center; height: 100%; color: #ffffff; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; line-height: 100%; letter-spacing: 0; padding: 32px 20px; transition: background-color 0.2s ease, color 0.2s ease; } .r-header--home nav.block-menu .menu-item a:hover, .r-header--home nav.block-menu .menu-item a:focus, .r-header--home nav.block-menu .menu-item a.is-active { background-color: var(--svf-nav-activo, #85AA1A); color: #000000; } /* "Dona aquí" como botón pill, distinto del resto de items. Selector por texto no es posible en CSS puro, así que se apunta por posición (último ítem del menú). Si reordenas el menú y "Dona aquí" deja de ser el último, ajusta este selector a :nth-child(N) según su posición real. */ .r-header--home nav.block-menu .menu-item:last-child a { height: auto; background-color: var(--svf-acento-suave, #E1EDC3); color: var(--svf-acento-oscuro, #1f2a17); border: none; border-radius: 999px; padding: 10px 22px; font-weight: 700; margin-left: 8px; margin-right: 12px; } .r-header--home nav.block-menu .menu-item:last-child a:hover { background-color: var(--svf-acento, #85AA1A); color: var(--svf-acento-oscuro, #1f2a17); } /* ------------------------------------------------------------ Buscador — 3 estados: normal, hover, expandido ------------------------------------------------------------ */ .r-header--home .search-block-form { position: relative; display: flex; align-items: center; padding: 0; align-self: stretch; } /* Estado normal: el ícono de lupa ya existe nativamente en el tema vía background-image en .btn-search (ico-search.svg) + .btn-ico--bg (background-size/position/repeat). Solo se ajusta el layout para que quede en fila junto al texto "Buscar", y se agrega el texto vía ::after ya que Drupal no lo trae en el markup. */ .r-header--home .search-block-form .btn-search { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: auto; height: 100%; padding: 0 32px 0 42px; /* más espacio interno a los lados */ background-image: none !important; /* se reemplaza el ícono nativo por el ::before de abajo, para poder controlar su color en hover */ background-color: transparent !important; border: none !important; border-bottom: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; color: #ffffff; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; position: relative; } .r-header--home .search-block-form .btn-search:hover, .r-header--home .search-block-form .btn-search:focus, .r-header--home .search-block-form .btn-search:active { border: none !important; outline: none !important; box-shadow: none !important; } .r-header--home .search-block-form .btn-search::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background-color: currentColor; /* hereda el color del texto: blanco normal, negro en hover */ -webkit-mask-image: url("../img/icons/ico-search.svg"); mask-image: url("../img/icons/ico-search.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .r-header--home .search-block-form .btn-search:hover { background-color: var(--svf-acento, #85AA1A) !important; color: #000000; } .r-header--home .search-block-form .btn-search::after { content: "Buscar"; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; } /* Estado expandido: al hacer clic, Drupal agrega la clase "active-search" al contenedor .search-block-form. El botón lupa+texto se oculta y aparece el campo de búsqueda real. */ .r-header--home .search-block-form.active-search .btn-search { display: none; } .r-header--home .search-block-form .content { display: none !important; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 290px !important; max-width: calc(100vw - 32px); background: #ffffff; border-radius: 5px; padding: 3px 3px 3px 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); z-index: 30; } .r-header--home .search-block-form.active-search .content { display: flex !important; align-items: center; } .r-header--home .search-block-form .search-form { display: flex; align-items: center; gap: 6px; width: 100% !important; max-width: 100%; margin: 0 !important; } .r-header--home .search-block-form .js-form-item-keys { flex: 1; width: auto !important; margin: 0 !important; } .r-header--home .search-block-form input.form-search { width: 100% !important; max-width: 100%; border: none; outline: none; padding: 8px 15px; font-family: 'Inter', sans-serif; font-size: 14px; color: #1a1a1a; background: transparent; } .r-header--home .search-block-form input.form-search::placeholder { font-size: 12px; } /* El botón submit real de Drupal se reutiliza visualmente como la "X" de cierre (mismo elemento, sin agregar HTML nuevo). El texto "Buscar" se oculta y se reemplaza por un ícono de X vía mask-image. Un pequeño script en el Twig intercepta el clic para cerrar el buscador en vez de enviar el formulario vacío. */ .r-header--home .search-block-form button.form-submit { position: static !important; width: 32px !important; height: 32px !important; flex-shrink: 0; padding: 0 !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; border: none !important; border-radius: 50% !important; background-color: transparent !important; background-image: none !important; color: transparent !important; /* oculta el texto "Buscar" sin quitarlo del DOM (accesible por lectores de pantalla) */ font-size: 0 !important; line-height: 0 !important; box-shadow: none !important; cursor: pointer; position: relative !important; } .r-header--home .search-block-form button.form-submit::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background-color: #1a1a1a; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* ------------------------------------------------------------ Integración con el slider (.c-slider / Slick Slider) El header se superpone sobre el slider mediante position: absolute + z-index (solo con .has-header-overlay). El slider en sí no se modifica; solo se asegura que quede detrás visualmente y que el overlay oscuro del header no le quite legibilidad a las flechas/dots nativos de Slick. ------------------------------------------------------------ */ .c-slider { position: relative; z-index: 1; /* por debajo del header, que usa z-index: 20 */ } /* Evita que el contenido de texto del primer tramo del slide (el que coincide en altura con el header) quede tapado por el overlay oscuro; empuja el título/body hacia abajo lo suficiente para no chocar con el menú. Solo aplica cuando el header está flotando encima. */ body.has-header-overlay .c-slider__item-content { padding-top: 110px; } /* Imagen placeholder del slider (c-slider.png): su función es solo mantener el aspect-ratio del slide mientras el background-image real se muestra detrás. Si el archivo no existe (404), el navegador mostraría un ícono roto — se oculta visualmente sin quitarla del flujo/tamaño. */ .c-slider__item-img { opacity: 0; display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------ DESKTOP: header a ancho completo. Los .container de Bootstrap limitan a 1320px, y con 6 ítems de menú + "Dona aquí" + buscador el texto de los enlaces se parte en dos líneas. Se suelta el límite SOLO dentro del header, para no alterar el ancho de los componentes de contenido. El contenedor a soltar es el de .r-logo: todo (logo, menú y buscador) vive dentro de .r-logo_col; .r-main-menu está vacío. ------------------------------------------------------------ */ @media (min-width: 1200px) { .r-header--home .r-logo .container, .r-header--home .r-main-menu .container { max-width: none; width: 100%; padding-left: 40px; padding-right: 40px; } /* Los enlaces del menú nunca parten en dos líneas */ .r-header--home nav.block-menu .menu-item a { white-space: nowrap; } } /* ------------------------------------------------------------ MÓVIL / TABLET (< 1200px) El aspecto de la barra (fondo morado y orden logo | CTA | buscador | hamburguesa) lo define r-mobilenav.css. Aquí solo se desactiva lo que este archivo impone para desktop y que, por especificidad, le ganaba a r-mobilenav.css: - .r-header--home .navbar-brand__btn-menu (0,2,0) mantenía el hamburguesa oculto frente a .navbar-brand__btn-menu (0,1,0). - flex-wrap: wrap partía la barra en dos filas. ------------------------------------------------------------ */ @media (max-width: 1199.98px) { .r-header--home .r-logo_col { justify-content: flex-start; align-items: center; flex-wrap: nowrap; padding: 15px; } .r-header--home .navbar-brand__btn-menu { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; } .r-header--home .navbar-brand__btn-menu span { display: block; width: 22px; height: 2px; background-color: #ffffff; } /* El menú horizontal no existe en la barra móvil: lo reemplaza el panel off-canvas. Se oculta por elemento y no por ID de bloque, para no depender del nombre que genere Drupal. Esto además elimina el "Dona aquí" duplicado: el pill visible en móvil es el que coloca r-mobilenav.js, no el del menú. */ .r-header--home nav.block-menu { display: none; } } /* ============================================================ Ajustes slider Home — ocultar flechas, subir texto, dots OJO: estos valores están calibrados a la altura del slider de la HOME. Por eso van scopeados a .c-slider--home. Para sliders de páginas interiores usa .c-slider--interna (bloque de abajo) y recalibra 'bottom'. ============================================================ */ .c-slider__item-title { font-size: 50px !important; line-height: 60px !important; } .c-slider__item-body { max-width: 100%; font-size: 25px; line-height: 30px; } /* 1. Ocultar flechas prev/next */ .c-slider .slick-prev, .c-slider .slick-next { display: none !important; } /* 2. Subir título y descripción de cada slide (calibrado a la home) */ .c-slider__item-content--bottom { bottom: 10% !important; text-align: left !important; margin-left: 3%; } /* 3. Dots inferiores — versión robusta */ .c-slider .slick-dots { bottom: 135px !important; /* calibrado a la altura del slider de la home */ z-index: 1001 !important; display: flex !important; justify-content: center; gap: 8px; } .c-slider .slick-dots li { width: auto !important; height: auto !important; margin: 0 !important; } .c-slider .slick-dots li button { display: block !important; width: 10px !important; height: 10px !important; padding: 0 !important; border-radius: 50% !important; background-color: rgba(255, 255, 255, 0.5) !important; opacity: 1 !important; font-size: 0 !important; /* anula cualquier texto/símbolo nativo del button */ line-height: 0 !important; } /* Neutraliza el punto nativo que Slick dibuja con ::before (normalmente un carácter "•" vía font-family: slick) */ .c-slider .slick-dots li button::before { content: "" !important; display: none !important; } .c-slider .slick-dots li.slick-active button { background-color: var(--svf-acento, #85AA1A) !important; width: 12px !important; height: 12px !important; } /* Oculta los dots cuando solo hay un slide activo (un único punto no aporta nada) */ .c-slider .slick-dots:has(li:only-child) { display: none !important; } /* ------------------------------------------------------------ Modificador para sliders de páginas interiores. Agrega la clase .c-slider--interna junto a .c-slider en el Twig del bloque nuevo y ajusta estos valores a la altura real. ------------------------------------------------------------ */ .c-slider--interna .c-slider__item-content--bottom { bottom: 25% !important; /* AJUSTAR según la altura del slider interior */ } .c-slider--interna .slick-dots { bottom: 30px !important; /* AJUSTAR */ } .c-slider--interna .c-slider__item-title { font-size: 38px !important; line-height: 46px !important; } /* Region r-page-top: los bloques full-bleed necesitan flujo de bloque. */ section.r-page-top .col.r_col.r-page-top_col { display: block !important; align-items: initial !important; } /* ============================================================ Franja superior de portal (Rionegro / Medellín) y etiqueta del portal junto al logo. La franja se alimenta del menú "menu-portal-superior". Los enlaces de menú de Drupal core no admiten clases propias, así que el estilo se aplica POR POSICIÓN: el primer ítem es el pill de retorno al portal principal, y los siguientes son accesos de usuario con ícono. Si se reordena el menú, cambia el diseño. La franja se imprime desde header.html.twig, fuera de .r-top y de .r-logo, así que no la afecta el display:none de .r-top. ============================================================ */ .r-header-portal { background-color: #383d38; position: relative; z-index: 20; } .r-header-portal__inner { display: flex; align-items: center; width: 100%; min-height: 56px; margin: 0 auto; padding: 8px 40px; /* alineado con el padding del header en desktop */ } /* ------------------------------------------------------------ Lista del menú drupal_menu() devuelve un solo