/* * Cabecera y pie del sitio. * * Referencias: la instancia «Header» [figma 102,36 1236x38], el «Header Mobile» * [0,0 375x108] y la variante «Footer updated» [0,3278 1440x709] de Home, medida * sobre assets-figma/screens/home-desktop.png porque en el volcado va colapsada. * Solo consume tokens. */ /* ---------------------------------------------------------------- Saltar al contenido */ .acturion-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: var(--acturion-space-3) var(--acturion-space-5); background: var(--acturion-dark-blue); color: var(--acturion-soft-beige); } .acturion-skip:focus { left: 0; } /* ================================================================ Cabecera */ .acturion-header { --header-top: 36px; /* [figma] borde superior -> fila del header */ --header-row: 38px; /* [figma] alto de la fila */ --header-logo: 130px; /* [render] medido en leadership-desktop.png: 102..232 */ --header-mobile-h: 108px; /* [figma] alto del header mobile */ position: relative; z-index: 20; color: var(--acturion-dark-blue); } /* Solo cuando hay hero Y el hero lleva el texto encima del medio (>= 768, ver hero-video.css) la cabecera se superpone en claro. Por debajo de 768 la maqueta mobile saca el titular DEL medio y lo pone sobre el fondo beige: ahí la cabecera vuelve al flujo normal y al dark blue, o quedaba absoluta, en beige sobre beige (invisible) y con el titular del hero debajo, pegado al borde. */ @media (min-width: 768px) { .acturion-header--over-media { position: absolute; inset-block-start: 0; inset-inline: 0; color: var(--acturion-soft-beige); /* La franja admin de WordPress empuja el flujo normal del documento 32px hacia abajo, pero un elemento `position: absolute` sin ancestro posicionado escapa a ese empuje y se queda pegado al borde real del viewport. Resultado: con sesión iniciada, esta cabecera (páginas con hero) sale 32px más arriba que la de páginas sin hero, que sí van en flujo normal y sí reciben el empuje. Un visitante sin sesión nunca ve la franja admin, así que ahí ambos casos ya coinciden en la misma posición — el ajuste de abajo es solo para ver lo mismo estando logueado. */ /* .acturion-link (footer, «Contacts», «Read More»…) fija su propio dark-blue en vez de heredar, porque en el resto de contextos del sitio SÍ va sobre fondo claro. Aquí, sobre la foto del hero, hay que pisarlo o «Contacts» sale invisible. */ /* base.css le pone fondo opaco a .acturion-header para las páginas sin hero; aquí va encima de la foto/video y tiene que quedar transparente. */ background: transparent; } /* Reposiciona SOLO con sesión iniciada (clase que WordPress pone en ): 32px es el alto de la franja en escritorio, 46px el de la franja entre 768 y 782 (mismo corte de ancho que usa WordPress para la suya, 783px). No toca nada para un visitante real. */ body.admin-bar .acturion-header--over-media { inset-block-start: 32px; } } @media (min-width: 768px) and (max-width: 782px) { body.admin-bar .acturion-header--over-media { inset-block-start: 46px; } } /* Sobre la foto/vídeo del hero, «Contacts» hereda el beige de la cabecera en vez del dark-blue del componente. Se hace cambiando la property y no `color` a secas: así el :hover/:focus de .acturion-link, que existe para pisar el rosa de Hello Elementor, reafirma este beige y no el azul (ver components.css). */ .acturion-header--over-media .acturion-header__contacts { --acturion-link-ink: currentColor; } /* [figma] en la cabecera (189:8757 escritorio, 189:9370 menú mobile) la instancia del Secondary button pisa la posición del filete: texto de 25 y línea en y=29, a 4px del texto (space-1) en vez de los 8 del componente. Es lo que lo deja a la misma altura que el filete de los enlaces del nav. */ /* [figma MCP branch 2026-09-18] la instancia de «Contacts» del header PISA el tamaño del componente: 18 Medium, no los 21 del «Secondary button» del kit. Verificado en los dos nodos de la barra — escritorio I1582:8355;809:26283 y panel mobile I1365:8351;882:23625 — contra una instancia suelta de la misma sección (I1365:8351;882:23168), que sí da 21. Por eso se pisa solo aquí: «Read More», «LinkedIn» y los CTA del pie siguen en 21. */ .acturion-header__contacts { padding-bottom: var(--acturion-space-1); font-size: var(--acturion-body-18); } .acturion-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--acturion-space-5); min-height: var(--header-mobile-h); } .acturion-header__logo { display: flex; flex: 0 0 auto; color: inherit; text-decoration: none; } .acturion-header__logo svg { width: var(--header-logo); height: auto; display: block; } /* ---------------------------------------------------------------- Botón de menú */ .acturion-header__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; } /* Reafirma transparente: Hello Elementor trae `button:focus`/`:hover` con fondo rosa Y `color: #fff` — el color también hay que pisarlo porque las barras se pintan con currentColor: tras tocar el botón en móvil el :focus se queda y las barras quedaban blancas (invisibles) hasta tocar en otra parte. Con el panel abierto no afecta: la regla [aria-expanded="true"] va después a igual especificidad y mantiene el beige. */ .acturion-header__toggle:hover, .acturion-header__toggle:focus { background: transparent; color: inherit; } /* Tres trazos compuestos con la propia caja: sin assets ni pseudo-elementos extra. */ .acturion-header__burger, .acturion-header__burger::before, .acturion-header__burger::after { display: block; width: 32px; height: 2px; background: currentColor; transition: transform var(--acturion-duration) var(--acturion-ease), opacity var(--acturion-duration) var(--acturion-ease); } .acturion-header__burger { position: relative; } .acturion-header__burger::before, .acturion-header__burger::after { content: ""; position: absolute; left: 0; } .acturion-header__burger::before { top: -9px; } .acturion-header__burger::after { top: 9px; } /* Aspa cuando el panel está abierto. */ [aria-expanded="true"] .acturion-header__burger { background: transparent; } [aria-expanded="true"] .acturion-header__burger::before { top: 0; transform: rotate(45deg); } [aria-expanded="true"] .acturion-header__burger::after { top: 0; transform: rotate(-45deg); } /* ---------------------------------------------------------------- Panel / navegación */ /* [figma] «Menu Mobile» 1365:8351: panel dark blue a pantalla completa con el logotipo grande en claro, los enlaces en 18, «Contacts» con su filete a todo el ancho y una franja de barras de degradado pegada al borde inferior. */ .acturion-header__panel { --menu-gap-logo: 57px; /* [figma] base del logo (175) -> «About» (232) */ /* [figma] fin del texto de «Careers» (~404) -> «Contacts» (449) = 45, menos los 6 del filete reservado bajo cada enlace (space-1 + 2px), que ya alargan la caja del nav. */ --menu-gap-contacts: 39px; --menu-strip-h: 120px; /* [figma] franja de barras del pie del panel */ position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; /* El padding superior reserva la fila de la cabecera: el botón de cerrar (el toggle, que queda por encima) sigue ocupando ese hueco. */ padding: var(--header-mobile-h) var(--acturion-gutter) 0; background: var(--acturion-dark-blue); color: var(--acturion-soft-beige); overflow-y: auto; /* Cerrado: invisible, sin foco y sin clics. Se atenúa en vez de deslizarse desde fuera: un panel colocado con translateX(100%) queda a la derecha del viewport y ALARGA el documento —a 768 metía scroll horizontal en toda la página—. Con inset:0 nunca sale de la ventana. */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--acturion-duration) var(--acturion-ease), visibility 0s linear var(--acturion-duration); } .acturion-header__panel-logo { flex: 0 0 auto; } /* [figma] el logotipo del panel ocupa el ancho de contenido completo (327 a 375). */ .acturion-header__panel-logo svg { width: 100%; height: auto; display: block; } /* Franja de barras del pie: mismas proporciones que el gráfico de barras de las secciones (sections.css), a sangre completa dentro del panel. `margin-top: auto` la manda al fondo aunque el contenido no llene la pantalla. */ .acturion-header__panel-strip { flex: 0 0 auto; display: flex; height: var(--menu-strip-h); margin-top: auto; margin-inline: calc(-1 * var(--acturion-gutter)); } .acturion-header__panel-strip span { flex: 1 1 0; min-width: 0; background: var(--acturion-gradient-1) left top / 100% var(--bar-split, 29.5%) no-repeat, var(--acturion-gradient-2) left bottom / 100% calc(100% - var(--bar-split, 29.5%)) no-repeat; } .acturion-header__panel-strip span:nth-child(3n + 1) { --bar-split: 50.17%; } .acturion-header__panel-strip span:nth-child(3n + 2) { --bar-split: 32.32%; } .acturion-header__panel-strip span:nth-child(3n + 3) { --bar-split: 73.4%; } .acturion-header__panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .acturion-nav { margin-top: var(--menu-gap-logo); } .acturion-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; /* [figma] menú mobile: paso de 50 entre enlaces de 18/1.2 (21.6) + los 6 del filete reservado bajo cada enlace (space-1 + 2px). */ gap: 22px; font-size: var(--acturion-body-18); /* [figma MCP branch 2026-09-18] los enlaces del menú son Medium, no Regular: leído en el nodo de escritorio (I1582:8355;809:26275) y en el del panel mobile (I1365:8351;882:23614). Iban en el 400 heredado del body y quedaban más finos que «Contacts», que sí es Medium. */ font-weight: var(--acturion-weight-medium); } .acturion-nav__list a { /* [figma] «Menu links» (189:9871): texto de 22 y filete de 2px en y=26, o sea a 4px del texto (space-1); el Secondary button estándar lo lleva a 8. Caja de bloque para que el filete sume alto. Va siempre reservado, en transparente, y solo cambia de color: el texto no salta ni al pasar el ratón ni en la página activa. */ display: inline-block; padding-bottom: var(--acturion-space-1); border-bottom: 2px solid transparent; color: inherit; text-decoration: none; } /* [figma] «Menu links» Hover (189:9871) y render de «Header» Hover (189:8748): filete de 2px llenos, en las mismas filas de píxel que el de «Contacts». El text-decoration del navegador salía de ~1px y 8px más arriba que el de «Contacts». */ .acturion-nav__list a:hover, .acturion-nav__list a:focus-visible, .acturion-nav__list .current-menu-item > a { border-bottom-color: currentColor; } @media (max-width: 1023px) { /* Dentro del panel oscuro «Contacts» hereda el beige del panel: .acturion-link fija su propio dark-blue pensando en los fondos claros del resto del sitio. Mismo motivo que arriba para hacerlo por property y no con `color`. */ .acturion-header__panel .acturion-header__contacts { --acturion-link-ink: currentColor; margin-top: var(--menu-gap-contacts); margin-bottom: var(--acturion-space-8); } /* Con el panel abierto el logotipo pequeño de la cabecera desaparece: en el diseño del menú solo queda el botón de cerrar arriba y el logotipo grande dentro del panel. La clase la pone menu.js junto con is-open. */ .acturion-header.is-menu-open .acturion-header__logo { opacity: 0; pointer-events: none; } /* [figma] el botón de cerrar es un aro de 47 con el aspa dentro, en claro. `position: fixed` + z-index: el panel (fixed, inset 0, z 19) es un hermano POSTERIOR dentro del stacking context del header y tapaba al botón estático; además, si la página estaba scrolleada, el header quedaba fuera de pantalla y el menú se abría sin forma de cerrarlo. Fijo al viewport queda siempre en la esquina del diseño (x307, y32) y por encima del panel. */ .acturion-header__toggle[aria-expanded="true"] { position: fixed; top: 32px; right: var(--acturion-gutter); z-index: 21; color: var(--acturion-soft-beige); border: 1px solid currentColor; border-radius: 50%; } [aria-expanded="true"] .acturion-header__burger::before, [aria-expanded="true"] .acturion-header__burger::after { width: 14px; /* [figma] aspa de 14 dentro del aro */ left: 9px; } } @media (min-width: 1024px) { .acturion-header__inner { min-height: 0; padding-top: var(--header-top); align-items: flex-start; } .acturion-header__toggle { display: none; } /* [figma] fila de 1236: 132 (logo) + 189 + 330 (nav) + 189 + 396 (contacts). Con space-between los dos huecos salen solos. */ /* `display: contents` disuelve el panel: logo, nav y «Contacts» quedan como los tres hijos flex de la fila, y el space-between reparte los dos huecos igual que en el diseño. Anidado, la nav se pegaba al logo. */ .acturion-header__panel { display: contents; /* En escritorio deja de ser panel: se anulan los estados del móvil. */ opacity: 1; visibility: visible; pointer-events: auto; /* `display: contents` quita la CAJA del panel pero no lo saca de la cadena de herencia: su `color: dark-blue` (pensado para el fondo beige del panel móvil) seguía heredándose al nav y a «Contacts», tapando el beige que les tocaba heredar de .acturion-header--over-media sobre las fotos de hero. Por eso el logo (hijo directo del header) sí salía en beige y el nav no. */ color: inherit; } /* El logotipo grande y la franja de barras son piezas del panel móvil: en la barra de escritorio no existen. */ .acturion-header__panel-logo, .acturion-header__panel-strip { display: none; } /* El nav y «Contacts» llevan el mismo filete bajo el texto (padding-bottom space-1 + 2px de borde) que el texto del logo no tiene: con las cajas alineadas por abajo, ese espacio dejaría los textos 6px más arriba de donde los pone el diseño. Se compensa bajando ambos ese mismo tanto, y así los dos filetes quedan a la misma altura. */ .acturion-nav, .acturion-header__contacts { align-self: flex-end; margin-bottom: calc(-1 * (var(--acturion-space-1) + 2px)); } .acturion-nav { margin-top: 0; } .acturion-nav__list { flex-direction: row; gap: var(--acturion-space-6); /* [figma] ~32 entre elementos */ font-size: var(--acturion-body-18); } .acturion-header__contacts { flex: 0 0 var(--acturion-col); max-width: var(--acturion-col); } /* Con «Contacts» apagado desde el Personalizador la fila se queda sin su tercer hijo y el space-between pegaría el menú al borde derecho. El pseudo-elemento ocupa esa columna para que logo y menú no se muevan del sitio del diseño. */ .acturion-header--no-contacts .acturion-header__inner::after { content: ""; flex: 0 0 var(--acturion-col); max-width: var(--acturion-col); } } /* ================================================================ Pie */ .acturion-footer { --footer-top: 50px; /* [figma] mobile: última sección -> logotipo = 100 en total (50 + los 50 de la sección) */ --footer-logo: 156px; /* [figma] logotipo del pie en mobile (24..180 en «Footer updated») */ /* [figma 1365:23478 mobile] logotipo (27) -> «Company» (78) = 51; con los 88 del desktop el logo quedaba flotando a media altura entre sección y columnas. */ --footer-gap: 51px; --footer-link-gap: 22px; /* [figma] paso de 44 entre enlaces de 18/1.2 */ padding-block: var(--footer-top) 0; background: var(--acturion-color-bg); color: var(--acturion-dark-blue); } .acturion-footer__logo { display: flex; /* Sin esto el enlace ocupa toda la fila y el área pulsable se va a 1236. */ width: fit-content; color: inherit; text-decoration: none; } /* Ancho explícito, no `min(--footer-logo, 100%)`: el enlace es `width: fit-content`, así que ese 100% se resolvía contra el ancho intrínseco del propio SVG y el logotipo se quedaba en los 130 de la cabecera en vez de los 287 del pie. */ .acturion-footer__logo svg { width: var(--footer-logo); max-width: 100%; height: auto; display: block; } .acturion-footer__columns { margin-top: var(--footer-gap); display: grid; gap: var(--acturion-space-8); } .acturion-footer__label, .acturion-footer__office-name { margin: 0 0 var(--acturion-space-5); font-size: var(--acturion-description); font-weight: var(--acturion-weight-regular); line-height: var(--acturion-lh-body); color: color-mix(in srgb, var(--acturion-dark-blue) 45%, transparent); } .acturion-footer__list, .acturion-footer__contact, .acturion-footer__legal-list { list-style: none; margin: 0; padding: 0; } /* [figma] en mobile la lista de «Company» va en dos columnas (About Us/News, Leadership/Careers, Insurance/Contacts: primero se llena la columna 1 completa, no fila a fila) — con `columns` en vez de grid porque el orden del HTML ya es ese y no hay que reordenar nada. En desktop vuelve a una sola columna. */ .acturion-footer__list { columns: 2; column-gap: var(--acturion-space-6); font-size: var(--acturion-body-18); /* [figma] esta lista pesa Medium; el resto del pie (contacto, legales, créditos) se queda en Regular — comparado en 1365:21562 vs 1365:21576/21607. */ font-weight: var(--acturion-weight-medium); } .acturion-footer__list li { break-inside: avoid; } /* Margen y no `row-gap`: Chrome ignora row-gap en un layout multicolumna, así que los enlaces quedaban pegados a su line-height (paso de 21.6 en vez de ~44). */ .acturion-footer__list li:not(:last-child) { margin-bottom: var(--footer-link-gap); } .acturion-footer__list a, .acturion-footer__contact a { color: inherit; text-decoration: none; } .acturion-footer__list a:hover, .acturion-footer__list a:focus-visible, .acturion-footer__contact a:hover, .acturion-footer__contact a:focus-visible { text-decoration: underline; /* [figma] los subrayados del kit son filetes de 2px llenos (Secondary button, campos del CTA); el grosor por defecto del navegador (~1px) se veía flaco. */ text-decoration-thickness: 2px; text-underline-offset: 0.3em; } /* [figma] icono de 24 y texto a 40; items separados por 16. */ .acturion-footer__contact { display: flex; flex-direction: column; gap: var(--acturion-space-4); font-size: var(--acturion-body-18); } .acturion-footer__contact-item { display: flex; /* [figma] el icono va al TOP de la primera línea (pin vs dirección de 3 líneas). Sin esto, el stretch + `svg { height: auto }` de base.css estiraban el SVG al alto del bloque y el dibujo quedaba centrado (medido: 65px en la dirección). */ align-items: flex-start; gap: var(--acturion-space-4); line-height: var(--acturion-lh-body); } .acturion-footer__contact-icon { flex: 0 0 auto; display: inline-flex; } /* [inventado] dos sedes en el pie (pedido 2026-09-22; el diseño solo traía una): cada sede es un grupo (rótulo + dirección + teléfono) separado 32 del siguiente y del email común. El rótulo de sede (.acturion-footer__office-name) comparte la regla de la etiqueta «Contact» (12 Regular al 45 %), pedido del cliente. */ .acturion-footer__offices { display: flex; flex-direction: column; gap: var(--acturion-space-6); } /* ---------------------------------------------------------------- Barra inferior */ /* [figma] en mobile la barra legal es UNA columna (Privacy, Terms, créditos, uno debajo de otro); la fila con los créditos a la derecha es cosa del desktop. */ .acturion-footer__bottom { margin-top: var(--acturion-space-10); padding-block: var(--acturion-space-8); border-top: 1px solid var(--acturion-dark-blue); display: flex; flex-direction: column; gap: var(--acturion-space-5); font-size: var(--acturion-body-14); } .acturion-footer__legal-list { display: flex; flex-direction: column; gap: var(--acturion-space-4); } .acturion-footer__legal-list a { color: inherit; } /* El crédito «Designed by League Agency» se retiró el 2026-09-22 a petición del cliente; queda solo el © (sin año), atenuado como el resto de la barra. */ .acturion-footer__credits { margin: 0; color: color-mix(in srgb, var(--acturion-dark-blue) 55%, transparent); } @media (min-width: 768px) { .acturion-footer { --footer-top: 100px; /* [figma] borde del bloque -> logotipo en desktop */ --footer-logo: 287px; /* [figma] logotipo del pie en desktop */ --footer-gap: 88px; /* [figma] logotipo (155) -> etiquetas (243) en desktop */ } /* [figma] la columna de contacto arranca en 420 = 396 + 24. */ .acturion-footer__columns { grid-template-columns: var(--acturion-col) 1fr; column-gap: var(--acturion-space-5); } .acturion-footer__bottom { flex-direction: row; flex-wrap: wrap; justify-content: space-between; } /* [render] en desktop el © va a la derecha, alineado a la derecha y pegado abajo (contact-desktop.png, esquina inferior derecha). */ .acturion-footer__credits { align-self: flex-end; text-align: right; } .acturion-footer__list li:not(:last-child) { margin-bottom: 0; } /* [figma] en desktop «Company» vuelve a ser una sola columna vertical. Flex y no `columns: 1`: el `row-gap` de un layout multi-columna solo separa filas cuando hay más de una columna — con una sola, no hace nada y los

quedaban pegados a su propio line-height (paso de 21.6 en vez de 44). */ .acturion-footer__list { columns: auto; display: flex; flex-direction: column; gap: var(--footer-link-gap); } } @media (prefers-reduced-motion: reduce) { .acturion-header__panel, .acturion-header__burger, .acturion-header__burger::before, .acturion-header__burger::after { transition: none; } }