/* ========================================================= MUT_MARIONA — navegación de tres zonas (css/nav-tyt.css) ========================================================= HOJA INDEPENDIENTE del nav, pareja de layouts/header-tyt.php. Tercera variante junto a nav.css (barra clásica) y nav-md.css (drawer). Se sirve cuando el parámetro "Estilo de navegación" vale "tyt". js/nav.js es COMPARTIDO y no se toca: mismos ids. CONTRATO con el core (idéntico al de nav.css): - SOLO tokens de styles.css §02, todos con fallback. NINGUNA clase del core: .tb-container es exclusiva de styles.css. - core.js escribe body[data-theme]; aquí solo se consume. - Estado del drawer: body.is-drawer-open (lo pone js/nav.js). - Las clases .current/.active de los
  • las pinta mod_menu: se LEEN, no son estado propio (el estado propio es .is-*). Decisión de layout: el header es FIXED y transparente porque el diseño lo quiere flotando sobre imagen a sangre. El hueco lo compensa .tb-main con padding-top; las páginas a sangre lo anulan con el sufijo de clase de página "tyt-flush". ───────────────────────────────────────────────────────── ÍNDICE ───────────────────────────────────────────────────────── §T1 Promobar (heredada, posición topbar) §T2 Barra de tres zonas + compensación de altura §T3 Zona 1 · marca (logo desenvuelto o texto) §T4 Zona 2 · caption contextual §T5 Zona 3 · menú (mod_menu) y selector de idioma §T6 Barra inferior de ficha · nombre del proyecto + créditos §T7 Burger + drawer móvil + overlay §T8 Responsive (≤768) ========================================================= */ /* ---------- §T1 · Promobar (posición topbar) ---------- */ .tb-promobar { background-color: var(--ink, #000); color: var(--paper, #fff); font-family: var(--nav-font, sans-serif); font-size: var(--nav-fs, 10px); letter-spacing: var(--nav-tracking, 0.08em); text-transform: uppercase; text-align: center; padding: 8px var(--gutter, 16px); } .tb-promobar p { margin: 0; } .tb-promobar a { color: inherit; } /* ---------- §T2 · Barra de tres zonas ---------- */ /* background-color en propiedad LARGA (regla del proyecto: el shorthand congela la transición). Aquí es transparent porque la barra flota sobre la imagen; si algún día lleva fondo, cambiar solo este valor. */ /* EL COLOR DE LA BARRA — modo de fusión, no un color fijo ─────────────────────────────────────────────────────────────────── La barra flota sobre las fotos y su texto tiene que ser SIEMPRE el contrario de lo que tiene detrás, píxel a píxel: negro sobre blanco, blanco sobre negro, y el color complementario sobre una foto de color. Eso no se puede hacer eligiendo un color; se hace fundiendo. El truco, y por eso el color es #fff y no #000: difference(blanco, fondo) = 255 − fondo O sea, texto blanco + difference = el negativo exacto del fondo. Sobre el papel blanco del sitio da NEGRO, que es como se ve en todas las páginas de texto. Poner el texto en negro NO funcionaría: difference con negro deja el fondo igual y el texto desaparece. Se puede cambiar a `exclusion` —lo mismo, pero más suave en los tonos medios— tocando esta sola línea. LÍMITE HONESTO: sobre un gris medio exacto, el negativo es otro gris medio y el texto se lee peor. Es inherente al efecto, no un fallo. El texto de la barra no lleva jerarquía de grises: todo va al mismo color y del contraste se encarga la fusión. */ .tb-tbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--gutter, 16px); min-height: var(--topbar-h, 34px); padding: 10px var(--gutter, 16px); background-color: transparent; color: #fff; mix-blend-mode: difference; font-family: var(--nav-font, sans-serif); font-size: var(--nav-fs, 10px); letter-spacing: var(--nav-tracking, 0.08em); text-transform: uppercase; } /* Tinta por ZONA según la foto que tenga debajo (js/custom.js §03). La barra flota sobre imagen, y en el mosaico son dos columnas: a la misma altura puede haber una foto negra bajo la marca y una blanca bajo el menú. Por eso el color no se decide para la barra entera. No se pintan colores, se REDEFINEN los tokens de la zona: así el menú, el selector de idioma, la barra "/" y la hamburguesa —que ya usan var(--ink) y var(--mute)— cambian solos, sin una regla más. El color declarado en la zona gana al heredado de la barra sin pelea de especificidad: un valor heredado siempre pierde contra uno declarado en el propio elemento. */ /* Sin escopar a .tb-tbar a propósito: estas dos clases las pone solo js/custom.js §03, y también las usa el poema de la home. */ .is-over-dark { --ink: var(--dark-ink, #fff); --mute: var(--dark-mute, #9a9a9a); color: var(--dark-ink, #fff); } .is-over-light { --ink: #000; --mute: #8a8a8a; color: #000; } .tb-tbar a { color: inherit; text-decoration: none; transition: color var(--t-ui, 0.2s ease), opacity var(--t-ui, 0.2s ease); } /* Hueco del header fijo: NINGUNO. La barra flota sobre el contenido, así que en este sitio la norma es que la imagen empiece a sangre pegada al borde superior —el mosaico, la home y las fichas de proyecto—. Reservar hueco aquí era lo que pintaba la franja blanca bajo el header. Las dos únicas páginas que son texto en la primera línea se separan ellas mismas, cada una en su hoja, y por eso no necesitan nada aquí: · Archive → .tb-archive (custom.css §M6) · Contacto → .tb-main .mut-contact (contact.css §C1) Si algún día se monta con el maquetador una página que empiece con texto, se le pone un pt-5 al primer bloque en M3 y listo. (El sufijo de clase "tyt-flush" ya no hace falta: era para anular esta franja y la franja ya no existe.) */ .tb-nav-tyt .tb-main { padding-top: 0; } /* ---------- §T3 · Zona 1 · marca ---------- */ .tb-tbar__mark { justify-self: start; min-width: 0; } .tb-tbar__mark .mark-logo { display: inline-flex; align-items: center; gap: 8px; } /* Imgs desenvueltas: la opacidad por tema aplica directa */ .tb-tbar__mark .mark-logo img { display: block; max-height: 18px; width: auto; } .tb-tbar__mark .l-dark { display: none; } body[data-theme="dark"] .tb-tbar__mark .l-light { display: none; } body[data-theme="dark"] .tb-tbar__mark .l-dark { display: block; } .mark-logo__text { white-space: nowrap; } /* ---------- §T4 · Zona 2 · caption contextual ---------- */ /* Centrado respecto a la PÁGINA, no respecto al hueco sobrante: por eso la rejilla es 1fr auto 1fr y esta columna es la del medio. */ .tb-tbar__caption { justify-self: center; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- §T5 · Zona 3 · menú e idioma ---------- */ .tb-tbar__end { justify-self: end; display: flex; align-items: center; gap: 24px; min-width: 0; } .tb-nav ul { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; } /* TODO EL MENÚ AL MISMO COLOR. Antes el inactivo iba en gris y el activo a tinta plena; con la fusión de arriba ese gris se convierte en un gris sucio sobre cualquier foto, así que se quita la jerarquía de color: todo hereda el blanco de la barra, que sobre papel se lee negro. El único matiz que queda es el del rollover. */ .tb-nav a { color: inherit; } .tb-nav a:hover { opacity: 0.55; } /* Selector de idioma (mod_languages en header-utils) — EN / ES ──────────────────────────────────────────────────────────────── mod_languages trae su propia hoja (media/mod_languages/css/…) que Joomla inyecta al renderizar el módulo, es decir DESPUÉS de esta. Por eso todo va escopado a .tb-utils .mod-languages: gana por especificidad sin tener que recurrir a !important. Markup real del módulo:
    El

    es texto para lectores de pantalla. Se recorta, no se borra: display:none se lo quitaría también a ellos. El orden EN / ES lo decide la ordenación de Idiomas de contenido, no el CSS. */ .tb-utils .mod-languages { margin: 0; padding: 0; } .tb-utils .mod-languages > p { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .tb-utils .mod-languages ul { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } /* Reset de lo que pinta la hoja del módulo: fondos, cajas y bordes */ .tb-utils .mod-languages li, .tb-utils .mod-languages li.lang-active { margin: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent; background-image: none; box-shadow: none; list-style: none; } .tb-utils .mod-languages li + li::before { content: "/"; margin-right: 6px; color: inherit; } .tb-utils .mod-languages a { display: inline; padding: 0; border: 0; border-radius: 0; background-color: transparent; background-image: none; text-decoration: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: uppercase; } /* El idioma activo no se distingue por color —ya no hay dos colores—: se distingue porque es el que NO enlaza a ningún sitio útil. Sin fondo, sin subrayado y sin negrita, como en el diseño. */ .tb-utils .mod-languages li.lang-active > a, .tb-utils .mod-languages a[aria-current="true"] { color: inherit; background-color: transparent; font-weight: inherit; } .tb-utils .mod-languages a:hover { opacity: 0.55; } /* ---------- §T6 · Barra inferior de ficha · nombre + créditos ---------- */ /* Solo en ficha de trabajo (header-tyt.php, $tbCreditsMode). Es la hermana de la barra de arriba, fija al PIE de la ventana: el nombre del proyecto a la izquierda y los créditos PH · DOP · ST · AD a la derecha. No lleva X: el menú se queda siempre arriba y se sale de la ficha por él. Las fichas de ARCHIVE cambian el reparto, más abajo. Misma receta que §T2: transparente, texto blanco y fusión `difference` para que se lea sobre cualquier foto. El pie de la web (custom.css §M8) es una pantalla entera con el sello centrado, así que la barra flota sobre papel en blanco y no hay que reservarle hueco. */ .tb-bbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: var(--gutter, 16px); min-height: var(--topbar-h, 34px); padding: 10px var(--gutter, 16px); background-color: transparent; color: #fff; mix-blend-mode: difference; font-family: var(--nav-font, sans-serif); font-size: var(--nav-fs, 10px); letter-spacing: var(--nav-tracking, 0.08em); text-transform: uppercase; } /* Nombre del proyecto: una línea, con puntos suspensivos si no cabe. Sin créditos (Archive sin ficha técnica) es lo único que hay en la barra y ocupa la fila entera; sigue pegado a la izquierda. */ .tb-bbar__name { justify-self: start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-bbar__credits { justify-self: end; min-width: 0; } .tb-credits { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0; padding: 0; min-width: 0; } .tb-credits__item { white-space: nowrap; } /* La etiqueta (PH, DOP…) se separa del nombre por espacio, no por color: con la fusión, un gris queda sucio sobre la foto. */ .tb-credits__role { margin-right: 5px; } .tb-credits__name { color: inherit; } /* FICHAS DE ARCHIVE (body.tb-work-archive, lo pone index.php). En escritorio el nombre del proyecto va ARRIBA, en el caption central de la barra, y abajo quedan solo los créditos, a la IZQUIERDA. Por eso aquí se apaga el nombre de abajo y los créditos se van al principio. Por debajo de 1100 px el caption central desaparece (§T7b) y el nombre no tendría dónde salir: ahí no aplica nada de esto y la barra vuelve al reparto de Selected Work —nombre abajo-izquierda, créditos abajo-derecha—, y en móvil se apila como en §T8. El umbral es el MISMO que el de §T7b a propósito: si se toca uno, tocar el otro. */ @media (min-width: 1101px) { .tb-work-archive .tb-bbar { grid-template-columns: 1fr; } .tb-work-archive .tb-bbar__name { display: none; } .tb-work-archive .tb-bbar__credits { justify-self: start; } .tb-work-archive .tb-credits { justify-content: flex-start; } } /* ---------- §T7 · Burger + drawer móvil ---------- */ .tb-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } .tb-burger__bar { display: block; width: 100%; height: 1px; background-color: currentColor; } /* El panel es una COLUMNA: cabecera arriba, menú debajo y el selector de idioma empujado al fondo. Y hereda la misma tipografía de interfaz que la barra —familia, cuerpo, tracking, caja alta— para que abrir el menú en móvil no cambie de registro tipográfico. */ .tb-drawer { position: fixed; inset: 0 0 0 auto; z-index: 120; display: flex; flex-direction: column; width: min(88vw, 380px); padding: var(--gutter, 16px); background-color: var(--paper, #fff); color: var(--ink, #000); font-family: var(--nav-font, sans-serif); font-size: var(--nav-fs, 10px); letter-spacing: var(--nav-tracking, 0.08em); text-transform: uppercase; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; visibility: hidden; } body.is-drawer-open .tb-drawer { transform: translateX(0); visibility: visible; } .tb-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--nav-font, sans-serif); font-size: var(--nav-fs, 10px); letter-spacing: var(--nav-tracking, 0.08em); text-transform: uppercase; } .tb-drawer__close { border: 0; background: none; color: inherit; font-size: 22px; line-height: 1; padding: 0; cursor: pointer; } .tb-drawer__nav { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* OJO: solo el ul del MENÚ. Antes esta regla cogía también el