/* ========================================================================== 100PHOTOGRAPHERS — Base Reset + componentes globales compartidos por todas las páginas (home, listado, fichas de fotógrafo). Requiere variables.css cargado antes que este archivo. ========================================================================== */ /* ---- Reset mínimo ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { /* Sin overflow-x aquí a propósito: al fijarlo también en (además de en , justo arriba), el navegador computa overflow-y:auto en AMBOS — pasa a contar como "contenedor de scroll" propio pese a no tener altura acotada (nunca llega a desplazarse de verdad), y por especificación eso es lo que usa position:sticky como referencia más cercana en vez de /el viewport real, rompiéndolo en toda la página. Con overflow-x:hidden solo en se sigue evitando el scroll horizontal (html envuelve a body) sin ese efecto secundario. */ font-family: var(--font-family-base); font-size: var(--font-body-md-size); font-weight: var(--font-body-md-weight); line-height: var(--font-body-md-line-height); color: var(--color-on-background); background-color: var(--color-background); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul, ol { list-style: none; } /* ---- Contenedor central (12 columnas desktop / 4 columnas mobile) ---- */ .container { width: 100%; max-width: var(--layout-max-width); margin-inline: auto; padding-inline: var(--space-margin-mobile); } @media (min-width: 1024px) { .container { padding-inline: var(--space-margin-desktop); } } /* ========================================================================== TopNavBar — fija, fondo negro, links en mayúsculas con tracking (project_brief.md 4. Component Specifications) ========================================================================== */ .top-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: var(--color-primary); color: var(--color-on-primary); } .top-navbar__inner { display: flex; align-items: center; justify-content: space-between; height: var(--navbar-height); } .top-navbar__logo { display: flex; align-items: center; height: calc(var(--navbar-height) - 24px); } .top-navbar__logo img { display: block; height: 100%; width: auto; } .top-navbar__nav { display: flex; align-items: center; gap: var(--space-md); margin-left: auto; margin-right: var(--space-md); } .top-navbar__link { color: var(--color-on-primary); font-size: var(--font-label-sm-size); font-weight: var(--font-label-sm-weight); letter-spacing: var(--font-label-sm-tracking); text-transform: uppercase; opacity: 0.85; transition: opacity 0.2s ease; } .top-navbar__link:hover { opacity: 1; } .top-navbar__menu-trigger { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-on-primary); font-size: var(--font-label-sm-size); font-weight: var(--font-label-sm-weight); letter-spacing: var(--font-label-sm-tracking); text-transform: uppercase; opacity: 0.85; transition: opacity 0.2s ease; } .top-navbar__menu-trigger-chevron { transition: transform 0.2s ease; } .top-navbar__menu-trigger:hover, .top-navbar__menu-trigger[aria-expanded="true"] { opacity: 1; } .top-navbar__menu-trigger[aria-expanded="true"] .top-navbar__menu-trigger-chevron { transform: rotate(180deg); } .top-navbar__link-icon { display: none; } .top-navbar__utilities { display: flex; align-items: center; gap: 0; } .top-navbar__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--color-on-primary); opacity: 0.85; transition: opacity 0.2s ease; } .top-navbar__icon-btn:hover { opacity: 1; } /* Logo cuadrado solo para móvil (a la izquierda del navbar, enlaza a inicio). */ .top-navbar__mobile-logo { display: none; } /* En móvil se oculta el logo de texto y todos los iconos (Inicio, Info, Instagram): quedan el logo cuadrado a la izquierda y la navegación (Diálogos, Artículos, Fotógrafos). */ .top-navbar__icon-btn--home { display: none; } @media (max-width: 767px) { /* Navbar móvil algo más alta para dar sitio al icono sobre cada enlace. */ :root { --navbar-height: 60px; } .top-navbar__logo { display: none; } .top-navbar__inner { justify-content: space-between; gap: var(--space-sm); } .top-navbar__mobile-logo { display: block; flex-shrink: 0; height: calc(var(--navbar-height) - 8px); } .top-navbar__mobile-logo img { display: block; height: 100%; width: auto; } .top-navbar__icon-btn--home { display: none; } .top-navbar__utilities { display: none; } .top-navbar__nav { margin: 0; gap: var(--space-sm); } .top-navbar__link, .top-navbar__menu-trigger { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; } .top-navbar__link-icon { display: block; } .top-navbar__menu-trigger-chevron { display: none; } } @media (max-width: 439px) { .top-navbar__link, .top-navbar__menu-trigger { font-size: 10px; } .top-navbar__link-icon { width: 14px; height: 14px; } .top-navbar__mobile-logo { align-self: center; height: calc(var(--navbar-height) * 0.65); } } /* ---- Megamenú: desplegado bajo el trigger "Directorio de fotógrafos" ---- */ .megamenu { position: absolute; top: var(--navbar-height); left: 0; right: 0; background-color: var(--color-background); color: var(--color-on-background); box-shadow: var(--shadow-hover); max-height: calc(100vh - var(--navbar-height)); overflow-y: auto; } .megamenu[hidden] { display: none; } .megamenu__search-wrap { position: relative; padding-top: var(--space-lg); } .megamenu__search { width: 100%; height: 48px; padding-inline: var(--space-sm); border: 1px solid var(--color-input-border); border-radius: var(--radius-full); background-color: var(--color-input-fill); font-size: var(--font-body-md-size); color: var(--color-on-surface); } .megamenu__search::placeholder { color: var(--color-on-surface-variant); } .megamenu__search-results { display: flex; flex-direction: column; gap: 2px; padding-block: var(--space-sm); } .megamenu__search-results[hidden] { display: none; } .megamenu__result-item { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-default); font-size: var(--font-body-md-size); } .megamenu__result-item:hover { background-color: var(--color-surface-container); } .megamenu__no-results { padding-block: var(--space-xs); font-size: var(--font-body-md-size); color: var(--color-on-surface-variant); } .megamenu__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); padding-block: var(--space-lg); } .megamenu__grid[hidden] { display: none; } @media (min-width: 640px) { .megamenu__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .megamenu__grid { grid-template-columns: repeat(5, 1fr); } } .megamenu__item { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; } .megamenu__thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-md); object-fit: cover; background-color: var(--color-surface-container-high); } .megamenu__thumb--placeholder { display: flex; align-items: center; justify-content: center; font-size: var(--font-label-sm-size); font-weight: 600; color: var(--color-on-surface-variant); } .megamenu__thumb--icon { display: flex; align-items: center; justify-content: center; background-color: transparent; color: var(--color-on-surface-variant); } .megamenu__item--view-all { border-radius: 12px; background-color: #e3e3e3; } .megamenu__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .megamenu__name { font-size: var(--font-body-md-size); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .megamenu__item:hover .megamenu__name { text-decoration: underline; } .megamenu__count { font-size: var(--font-label-sm-size); color: var(--color-on-surface-variant); } /* Megamenú en móvil: fondo negro, listado de texto blanco sin miniaturas, con separador blanco de 1px entre categorías. */ .megamenu__close { display: none; } @media (max-width: 767px) { .megamenu__close { display: block; margin: var(--space-xs) auto var(--space-lg); padding: var(--space-xs) var(--space-md); border: 1px solid #fff; border-radius: var(--radius-full); background: transparent; color: #fff; font-size: var(--font-body-md-size); font-weight: 600; } .megamenu { background-color: #000; color: #fff; } .megamenu__grid { display: flex; flex-direction: column; gap: 0; padding-block: var(--space-sm); } .megamenu__item { padding-block: var(--space-sm); border-bottom: 1px solid #fff; background-color: transparent; color: #fff; } /* La última categoría (el DOM termina con "Ver todos", que se muestra arriba). */ .megamenu__item:nth-last-child(2) { border-bottom: 0; } .megamenu__thumb { display: none; } /* "Ver todos": primero de la lista, con el nombre en mayúsculas y más grande. */ .megamenu__item--view-all { order: -1; border-radius: 0; } /* Icono de ojo a la izquierda (el resto de miniaturas están ocultas). */ .megamenu__item--view-all .megamenu__thumb--icon { display: flex; width: auto; height: auto; color: #fff; } .megamenu__item--view-all .megamenu__name { font-size: var(--font-body-lg-size, 18px); font-weight: 800; text-transform: uppercase; } .megamenu__body { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-sm); width: 100%; } .megamenu__count { flex-shrink: 0; color: #fff; } } /* ---- Explorador de categorías de las páginas (independiente del megamenú) ---- */ .category-explorer__search-wrap { position: relative; padding-top: var(--space-lg); } .category-explorer__search { width: 100%; height: 48px; padding-inline: var(--space-sm); border: 1px solid var(--color-input-border); border-radius: var(--radius-full); background-color: var(--color-input-fill); font-size: var(--font-body-md-size); color: var(--color-on-surface); } .category-explorer__search::placeholder { color: var(--color-on-surface-variant); } .category-explorer__search-results { display: flex; flex-direction: column; gap: 2px; padding-block: var(--space-sm); } .category-explorer__search-results[hidden] { display: none; } .category-explorer__result-item { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-default); font-size: var(--font-body-md-size); } .category-explorer__result-item:hover { background-color: var(--color-surface-container); } .category-explorer__no-results { padding-block: var(--space-xs); font-size: var(--font-body-md-size); color: var(--color-on-surface-variant); } .category-explorer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); padding-block: var(--space-lg); } .category-explorer__grid[hidden] { display: none; } @media (min-width: 640px) { .category-explorer__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .category-explorer__grid { grid-template-columns: repeat(5, 1fr); } } .category-explorer__item { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; } .category-explorer__thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-md); object-fit: cover; background-color: var(--color-surface-container-high); } .category-explorer__thumb--placeholder { display: flex; align-items: center; justify-content: center; font-size: var(--font-label-sm-size); font-weight: 600; color: var(--color-on-surface-variant); } .category-explorer__thumb--icon { display: flex; align-items: center; justify-content: center; background-color: transparent; color: var(--color-on-surface-variant); } .category-explorer__item--view-all { border-radius: 12px; background-color: #e3e3e3; } .category-explorer__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .category-explorer__name { font-size: var(--font-body-md-size); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .category-explorer__item:hover .category-explorer__name { text-decoration: underline; } .category-explorer__count { font-size: var(--font-label-sm-size); color: var(--color-on-surface-variant); } /* ========================================================================== "Categorías" — sección de cierre reutilizada tal cual en la ficha de fotógrafo (junto a "Fotógrafos relacionados", ver photographer.css) y en las páginas de categoría/época (categorias/, movimientos/, ver taxonomy.js). Fondo gris + título + .category-explorer (buscador y grid de categorías, ver category-explorer.js). ========================================================================== */ .related-section { background: linear-gradient(to top, #b2b2b2, var(--color-surface-dim)); padding-block: var(--space-xl); } .category-tags__title { margin-top: var(--space-xl); margin-bottom: var(--space-md); } @media (max-width: 767px) { .related-section .section-title { text-align: center; } } /* Bajo el título "Categorías" sobra el padding-top del buscador. */ .category-explorer .category-explorer__search-wrap { padding-top: 0; } /* ========================================================================== Botones Primary: solido negro, texto blanco, pill. Secondary: outline o gris sutil segun fondo de la seccion. ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); height: 48px; padding-inline: var(--space-md); border-radius: var(--radius-full); font-size: var(--font-body-md-size); font-weight: 600; white-space: nowrap; transition: opacity 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .btn-primary { background-color: var(--color-primary); color: var(--color-on-primary); } .btn-primary:hover { opacity: 0.85; } .btn-secondary { background-color: transparent; color: var(--color-on-surface); border: 1px solid var(--color-input-border); } .btn-secondary:hover { box-shadow: var(--shadow-ambient); } /* Variante para usar un botón secundario sobre fondo negro (ej. CTA final) */ .btn-secondary--on-dark { color: var(--color-on-primary); border-color: rgba(255, 255, 255, 0.4); } /* ========================================================================== Chips / Tags — especialidades, estilo, temática ========================================================================== */ .chip { display: inline-flex; align-items: center; height: 28px; padding-inline: var(--space-xs); border-radius: var(--radius-full); background-color: var(--color-chip-bg); color: var(--color-on-surface-variant); font-size: var(--font-label-sm-size); font-weight: var(--font-label-sm-weight); letter-spacing: var(--font-label-sm-tracking); text-transform: uppercase; } /* ========================================================================== Footer — fondo negro, links minimalistas, copyright ========================================================================== */ .site-footer { background-color: var(--color-primary); color: var(--color-on-primary); padding-block: var(--space-lg); } .site-footer__inner { display: flex; flex-direction: column; gap: var(--space-md); } @media (min-width: 768px) { .site-footer__inner { flex-direction: row; justify-content: space-between; align-items: center; } } .site-footer__links { display: flex; align-items: center; gap: var(--space-md); } .site-footer__links a { font-size: var(--font-label-sm-size); letter-spacing: var(--font-label-sm-tracking); text-transform: uppercase; opacity: 0.7; } .site-footer__links a:hover { opacity: 1; } .site-footer__icons { display: flex; align-items: center; gap: 0; } .site-footer__copyright { font-size: var(--font-label-sm-size); opacity: 0.5; } /* ========================================================================== Cookie banner — aviso inferior fijo, mismo lenguaje visual que el footer ========================================================================== */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background-color: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-hover); } .cookie-banner__inner { display: flex; flex-direction: column; gap: var(--space-sm); padding-block: var(--space-sm); } @media (min-width: 768px) { .cookie-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-md); } } .cookie-banner__text { font-size: var(--font-label-sm-size); line-height: 1.5; opacity: 0.85; } .cookie-banner__text a { text-decoration: underline; opacity: 1; } .cookie-banner__actions { flex-shrink: 0; } .cookie-banner__accept { height: 40px; } /* ========================================================================== Páginas legales — Aviso legal / Política de cookies ========================================================================== */ .legal-page { max-width: 760px; margin-inline: auto; padding-block: var(--space-xl) var(--space-lg); } .legal-page__title { font-size: var(--font-artist-name-size); font-weight: 700; margin-bottom: var(--space-xs); } .legal-page__updated { font-size: var(--font-label-sm-size); color: var(--color-on-surface-variant); margin-bottom: var(--space-lg); } .legal-page h2 { font-size: var(--font-section-title-size); font-weight: 600; margin-top: var(--space-lg); margin-bottom: var(--space-xs); } .legal-page p, .legal-page li { font-size: var(--font-body-md-size); line-height: 1.6; color: var(--color-on-surface); } .legal-page p + p { margin-top: var(--space-xs); } .legal-page ul { margin-top: var(--space-xs); padding-left: var(--space-md); list-style: disc; } .legal-page li + li { margin-top: 4px; } .legal-page a { text-decoration: underline; } /* ========================================================================== Utilidades compartidas ========================================================================== */ .section-title { font-size: var(--font-section-title-size); font-weight: var(--font-section-title-weight); } /* Empuja el contenido por debajo del TopNavBar fijo */ .page-content { padding-top: var(--navbar-height); } /* ========================================================================== Hoja de selección móvil (js/mobile-select.js) Sustituye el desplegable nativo de nativo funciona como siempre. ========================================================================== */ .mobile-select-wrap { position: relative; } .mobile-select-trigger { display: none; } @media (max-width: 767px) { .mobile-select-trigger { display: block; position: absolute; inset: 0; width: 100%; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; } } .mobile-select-sheet__backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.6); } .mobile-select-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 301; max-height: 80vh; display: flex; flex-direction: column; background: var(--color-surface-container-lowest); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-hover); animation: mobile-select-sheet-in 0.2s ease-out; } @keyframes mobile-select-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } .mobile-select-sheet__handle { flex: none; width: 36px; height: 4px; margin: 10px auto 4px; border-radius: var(--radius-full); background: var(--color-outline-variant); } .mobile-select-sheet__list { overflow-y: auto; padding: var(--space-xs) 0 max(var(--space-sm), env(safe-area-inset-bottom)); } .mobile-select-sheet__option { display: block; width: 100%; text-align: left; padding: 14px var(--space-md); font-size: var(--font-body-md-size); color: var(--color-on-surface); background: none; border: 0; } .mobile-select-sheet__option.is-selected { font-weight: 600; color: var(--color-primary); background: var(--color-surface-container-low); } body.mobile-select-open { overflow: hidden; }