/* ============================================================= custom.css — Personalizaciones sobre template.css + presets Debe cargarse DESPUÉS de template.css y preset3.css ============================================================= */ /* ------------------------------------------------------------- 1. ENLACES GLOBALES Cambiado de azul #0e69d9 a dorado imperial ------------------------------------------------------------- */ a { color: #BA7517; } a:hover { color: #412402; } /* ------------------------------------------------------------- 2. PAGINACIÓN — números activos en dorado ------------------------------------------------------------- */ .pagination { --bs-pagination-active-bg: #a29535 !important; --bs-pagination-active-border-color: #413b0c !important; --bs-pagination-active-color: #ffffff !important; --bs-pagination-color: #54540b !important; --bs-pagination-hover-color: #413b0c !important; --bs-pagination-hover-bg: rgb(162 149 53 / 15%) !important; --bs-pagination-hover-border-color: #a29535 !important; } /* ------------------------------------------------------------- 3. HEADER PRINCIPAL — #sp-header ------------------------------------------------------------- */ #sp-header { background-color: #a29535 !important; color: #f0f0f0; border-radius: 10px; } /* ------------------------------------------------------------- 4. BARRA SUPERIOR — #sp-top-bar ------------------------------------------------------------- */ #sp-top-bar { background-color: #413b0c !important; color: #d4d4d4; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); border-radius: 10px; } /* ------------------------------------------------------------- 5. STICKY HEADER ------------------------------------------------------------- */ .sticky .sticky__wrapper { top: 0; position: fixed; -webkit-transform: translate3d(0, 0, 0); z-index: 111; -webkit-animation-name: fade-in-down; animation-name: fade-in-down; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: #413b0c !important; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } .sticky.white .sticky__wrapper, .sticky.onepage .sticky__wrapper, .sticky.transparent .sticky__wrapper { background-color: #413b0c !important; } /* ------------------------------------------------------------- 6. FOOTER ------------------------------------------------------------- */ #sp-footer { background: #413b0c !important; } #sp-footer a { color: #cdc166 !important; } #sp-footer a:hover { color: #f0e89a !important; } /* ------------------------------------------------------------- 7. CUERPO PRINCIPAL (SP Page Builder) ------------------------------------------------------------- */ .com-sppagebuilder #sp-main-body { padding: 0; background-color: #a29535; } /* ------------------------------------------------------------- 8. FONDO BLANCO EN CONTENIDO ------------------------------------------------------------- */ #sp-component { background-color: rgb(255 255 255 / 84%); border-radius: 10px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.18); color: #54540b; padding: 20px; } .com-sppagebuilder #sp-component { padding: 0; } /* ------------------------------------------------------------- 9. COLUMNA ESPECÍFICA — SP Page Builder ------------------------------------------------------------- */ #column-id-1482797163 { padding: 50px 55px; background-color: #ffffff; } /* ------------------------------------------------------------- 10. HAMBURGUESA / OFFCANVAS TOGGLER (móvil) ------------------------------------------------------------- */ #offcanvas-toggler .js-menu-toggle span.lines, #offcanvas-toggler .js-menu-toggle span.lines:before, #offcanvas-toggler .js-menu-toggle span.lines:after { background: #000000; } /* ------------------------------------------------------------- 11. BREADCRUMB — apuntando a section exterior correctamente El div#sp-breadcrumb interior tiene el mismo ID que la section exterior — usamos "section#sp-breadcrumb" para evitar conflictos y apuntar al elemento correcto ------------------------------------------------------------- */ section#sp-breadcrumb { background: #fdf6e3 !important; padding: 0 !important; font-family: Georgia, serif !important; font-size: 14px !important; letter-spacing: 0.03em !important; border-bottom: 1px solid #BA7517 !important; margin: 0 !important; } section#sp-breadcrumb .container { padding-top: 4px !important; padding-bottom: 4px !important; } section#sp-breadcrumb .row { margin: 0 !important; --bs-gutter-y: 0 !important; } section#sp-breadcrumb .col-lg-12 { padding-top: 0 !important; padding-bottom: 0 !important; } section#sp-breadcrumb .sp-column, section#sp-breadcrumb .sp-module, section#sp-breadcrumb .sp-module-content { padding: 0 !important; margin: 0 !important; } section#sp-breadcrumb a { color: #BA7517 !important; text-decoration: none !important; pointer-events: auto !important; cursor: pointer !important; } section#sp-breadcrumb a:hover { color: #412402 !important; text-decoration: underline !important; } section#sp-breadcrumb, section#sp-breadcrumb span, section#sp-breadcrumb .breadcrumb-item { color: #412402 !important; } section#sp-breadcrumb + section { margin-top: 0 !important; padding-top: 0 !important; } /* 11.1 — FIX caja de espacio extra bajo el texto. Causa real: el módulo mod_breadcrumbs de Joomla 6 imprime su propio markup (nav.mod-breadcrumbs__wrapper > ol.mod-breadcrumbs > li.mod-breadcrumbs__item), con clases distintas a Bootstrap/.breadcrumb genérico. Ese nivel nunca se había reseteado (solo se tocó hasta .sp-module-content), así que el padding/line-height propio de esas clases se acumulaba como aire visible dentro de la barra dorada. Confirmado con Chrome DevTools → Layout tab. */ section#sp-breadcrumb .mod-breadcrumbs__wrapper { padding: 0 !important; margin: 0 !important; line-height: 14px !important; } section#sp-breadcrumb ol.mod-breadcrumbs { padding: 0 !important; margin: 0 !important; line-height: 14px !important; min-height: 0 !important; gap: 0 !important; /* por si el
    es flex y trae gap heredado del framework SP Page Builder */ } section#sp-breadcrumb .mod-breadcrumbs__item { padding: 0 !important; margin: 0 !important; line-height: 14px !important; display: inline-flex !important; align-items: center !important; } section#sp-breadcrumb .mod-breadcrumbs__item::before { line-height: 14px !important; } /* ------------------------------------------------------------- 12. CORRECCIÓN BUG — animación appear-in webkit ------------------------------------------------------------- */ @-webkit-keyframes appear-in { 0% { opacity: 0; -webkit-transform: translate3d(0, -10px, 0) scale(0.7) perspective(1200px) rotateX(-60deg); transform: translate3d(0, -10px, 0) scale(0.7) perspective(1200px) rotateX(-60deg); } 45% { opacity: 0.4; -webkit-transform: translate3d(0, 20%, 0) scale(1.05) perspective(600px) rotateX(-15deg); transform: translate3d(0, 20%, 0) scale(1.05) perspective(600px) rotateX(-15deg); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1) perspective(1000px) rotateX(0deg); transform: translate3d(0, 0, 0) scale(1) perspective(1000px) rotateX(0deg); } } /* ------------------------------------------------------------- 13. MENÚ PRINCIPAL — reducir padding para que quepan más ítems Sin tocar font-size (mantiene 15px actual) ------------------------------------------------------------- */ #sp-menu .sp-megamenu-parent > li > a { padding-left: 8px !important; padding-right: 8px !important; } /* ------------------------------------------------------------- 14. ERROR 404 — solo foto + botón, sin texto/icono duplicado ------------------------------------------------------------- */ .error-page .error-page-inner { background-position: center 25% !important; } .error-page .btn-error { position: relative; top: 18vh; } .error-page .pe-7s-compass, .error-page .error-code, .error-page .error-code-message, .error-page .error-message { display: none !important; } /* ------------------------------------------------------------- 15. FOOTER MENU — NUEVO (14/07/2026) Requiere "Module Class" = gpj-footer-menu en el módulo Footer Menu (pestaña Advanced), para no afectar a otros menús del sitio que compartan las mismas clases Bootstrap (mod-menu, nav-item). ------------------------------------------------------------- */ .gpj-footer-menu .mod-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; } .gpj-footer-menu .nav-item { margin: 0; } .gpj-footer-menu .nav-item a { color: #cdc166; text-decoration: none; font-size: 14px; padding: 0 16px; border-right: 1px solid rgba(205, 193, 102, 0.4); white-space: nowrap; display: inline-block; } .gpj-footer-menu .nav-item:last-child a { border-right: none; } .gpj-footer-menu .nav-item a:hover { color: #f0e89a; text-decoration: underline; } /* ------------------------------------------------------------- 16. ICONOS DE SUBMENÚ — Font Awesome vía Link Class ------------------------------------------------------ POR QUÉ ESTE MÉTODO (y no otros dos que se probaron y fallaron): - "Link Icon Class" (Joomla, Link Type tab): en este megamenú de SP Page Builder Pro, esa clase se aplica directamente al completo en vez de crear un icono aparte — la fuente de Font Awesome (.fas) secuestra el font-family de TODO el enlace y rompe el texto visible del menú (bug confirmado por inspección en "Noble Genealogy": NOBLE GENEALOGY). - HTML directo en el campo "Title" del menú (ej. Noble Genealogy): Joomla lo bloquea por su filtro de seguridad de texto (Global Configuration > Text Filters), que elimina cualquier etiqueta HTML de ese campo — se guarda solo el texto plano, sin el icono. - Lo que SÍ funciona: usar el campo "Link Class" (no "Link Icon Class") de cada item de menú — Joomla no lo reconoce como una clase de icono, así que no dispara el bug, y no pasa por el filtro de texto porque no es HTML, es solo el nombre de una clase. CÓMO AÑADIR UN ICONO A UN SUBMENÚ NUEVO (receta, 2 pasos): 1. En Menús → editar ese item → pestaña "Link Type" → campo "Link Class" → escribir un nombre propio, ej. menu-icon-contact (prefijo "menu-icon-" + nombre corto de la página). Dejar "Link Icon Class" VACÍO siempre. 2. Añadir UNA línea aquí abajo, junto a las demás, con el código Unicode del icono elegido. El código se saca entrando en fontawesome.com/search, abriendo el icono deseado, y copiando su "Unicode" (aparece en la propia ficha del icono, formato tipo e537 — aquí se escribe con el prefijo \ delante: \e537). La regla base de abajo (que aplica a todos los "menu-icon-*") solo se escribe UNA VEZ — no hay que tocarla para cada icono nuevo, solo añadir su línea de content. ------------------------------------------------------------- */ /* Regla base — común a todos los iconos de submenú */ #sp-menu a[class*="menu-icon-"]::before { font-family: "Font Awesome 7 Free"; font-weight: 900; margin-right: 6px; display: inline-block; } /* Un icono por submenú */ .menu-icon-home::before { content: "\f015"; } /* fa-house — Home */ .menu-icon-about::before { content: "\f521"; } /* fa-crown — About Grand Prince */ .menu-icon-genealogy::before { content: "\e537"; } /* fa-people-roof — Noble Genealogy */ .menu-icon-honor::before { content: "\f5a2"; } /* fa-medal — Hall of Honor */ .menu-icon-press::before { content: "\f030"; } /* fa-camera — Press & Media */ .menu-icon-faq::before { content: "\f059"; } /* fa-circle-question — FAQ */ .menu-icon-contact::before { content: "\f0e0"; } /* fa-envelope — Contact */ .menu-icon-events::before { content: "\f073"; } /* fa-calendar-days — Royal Order & Events */ .menu-icon-order::before { content: "\f3ed"; } /* fa-shield-halved — Imperial Order of Rurikovich */ .menu-icon-ceremony::before { content: "\f518"; } /* fa-book-open — Knighthood Ceremony */ .menu-icon-apply::before { content: "\f573"; } /* fa-file-signature — Apply for Knighthood */ .menu-icon-news::before { content: "\f1ea"; } /* fa-newspaper — News */ .menu-icon-business::before { content: "\f0b1"; } /* fa-briefcase — Business & Consulting */ .menu-icon-podcast::before { content: "\f2ce"; } /* fa-podcast — Podcast */ .menu-icon-shop::before { content: "\f54e"; } /* fa-store — Royal Shop */ .menu-icon-foundation::before { content: "\f4be"; } /* fa-hand-holding-heart — Foundation */ .menu-icon-about-foundation::before { content: "\f4be"; } /* fa-hand-holding-heart — About the Foundation */ .menu-icon-volunteers::before { content: "\f0c0"; } /* fa-users — Volunteers */ .menu-icon-donation::before { content: "\f4c0"; } /* fa-hand-holding-dollar — Donation */ /* IMPORTANTE: cada regla de arriba solo se ve en el menú cuyo item tenga puesto ese mismo nombre exacto en su campo "Link Class" (Menús → editar item → Link Type → Link Class). Si un menú no tiene su Link Class relleno todavía, esa línea no hace nada — no es un error, solo falta ese paso en ese item concreto. Se recomienda verificar cada código Unicode en fontawesome.com/search antes de darlo por definitivo — son propuestas, no confirmadas glifo por glifo todavía. */ /* ------------------------------------------------------------- 17. FIX — texto de menú partido en dos líneas tras añadir iconos (21/07/2026) ------------------------------------------------------ CAUSA RAÍZ: el menú ya iba justo de espacio antes de los iconos (de ahí la sección 13, que ya reducía el padding). Al añadir icono + margin-right a CADA item a la vez, la suma de ese extra en los 7-8 items del menú superó el ancho disponible de la columna #sp-menu (col-lg-8, ancho fijo). El navegador entonces partía "Royal Order & Events" en dos líneas (white-space normal por defecto), y como el contenedor tiene una altura pensada para una sola línea, la segunda línea quedaba empujada fuera del área visible — parecía "texto cortado" pero en realidad era texto partido. Confirmado con Computed: width real del enlace 181.25px, insuficiente para el texto + icono a la vez. FIX: impedir que el texto se parta en dos líneas (white-space: nowrap) y recuperar espacio apretando un poco más el padding lateral (ya tocado en la sección 13) y el margen del icono (definido en la sección 16). ------------------------------------------------------------- */ #sp-menu .sp-megamenu-parent > li > a { white-space: nowrap !important; padding-left: 5px !important; padding-right: 5px !important; font-size: 14px !important; } #sp-menu a[class*="menu-icon-"]::before { margin-right: 4px !important; } /* ------------------------------------------------------------- 18. FIX — hueco vacío bajo la galería Hall of Honor (24/07/2026) ------------------------------------------------------ CAUSA RAÍZ: el plugin de sistema "Responsify" (plg_system_wf_responsify) envuelve el