/* ==========================================================================
COLECCIONES EN LÍNEA — Hoja de tema (paleta + tipografía + accesibilidad)
Museo Nacional de Colombia
Qué es este archivo
-------------------
Una sola hoja que, enlazada DESPUÉS de las hojas actuales del sitio,
aplica en las tres páginas (portada, listado y ficha) los colores y las
indicaciones gráficas del PDF de revisión, ajusta la tipografía y corrige
los contrastes que no cumplían accesibilidad.
Cómo enlazarla (en cada .html, como ÚLTIMO )
--------------------------------------------------
index.html → después de styles.css y home.css
list-object.html → después de styles.css
info-object.html → después de styles.css y detail.css
Ejemplo:
No hace falta tocar el HTML ni el JS: engancha por las clases que ya existen.
Tipografía incluida (Open Sans)
-------------------------------
Esta hoja carga la fuente por su cuenta con @font-face; no dependes de
internet ni de Google Fonts. Solo asegúrate de que los archivos estén en:
assets/fonts/OpenSans-Medium.ttf
assets/fonts/OpenSans-MediumItalic.ttf
assets/fonts/OpenSans-Bold.ttf
assets/fonts/OpenSans-ExtraBold.ttf
(Ya vienen en esa carpeta. Las rutas del @font-face son relativas a este
archivo, por eso apuntan a ../fonts/). Estructura esperada:
assets/css/museo-tema.css ← esta hoja
assets/fonts/OpenSans-*.ttf ← las fuentes
Glosario rápido de la paleta (los "--nombre" son variables reutilizables)
-------------------------------------------------------------------------
--tinta #30302e Casi negro. Texto principal, franjas y botones oscuros.
--tinta-suave #636362 Gris medio. Texto secundario y cifras de filtros.
--arena #bab09f Beige/arena. Pestañas y acentos.
--marfil #f1efec Blanco roto. Fondos suaves y botones "Ver más".
--papel #ffffff Blanco. Tarjetas y fondo general.
Estados de pieza:
--estado-investigacion #f4f3b5 Amarillo — "En investigación"
--estado-reserva #e96b5a Rojo — "En reserva"
--estado-publicable #a2d5b2 Verde — "Imagen publicable"
--estado-alerta #f2b3ab Coral — reservado para avisos suaves
Nota de accesibilidad (AA/AAA): todos los textos van con color oscuro sobre
los fondos de color para garantizar contraste. El único límite es el rojo
"En reserva" (ver comentario en su bloque más abajo).
========================================================================== */
/* ==========================================================================
1) TOKENS — se redefinen las variables que el sitio ya usa y se agregan
las nuevas. Al redefinirlas aquí, todo lo que en el CSS original usa
var(--azul), var(--texto), etc. adopta la paleta automáticamente.
========================================================================== */
:root{
/* Variables nuevas de la paleta del PDF */
--tinta:#30302e;
--tinta-suave:#636362;
--arena:#bab09f;
--arena-clara:#e7e2d9; /* derivada, para hovers y bordes suaves */
--marfil:#f1efec;
--marfil-hover:#e6e1d9; /* derivada, para hover de botones claros */
--papel:#ffffff;
--estado-investigacion:#f4f3b5;
--estado-reserva:#e96b5a;
--estado-publicable:#a2d5b2;
--estado-alerta:#f2b3ab;
/* Anillo de foco accesible, en color de marca */
--foco:#30302e;
/* --- Se sobrescriben los tokens originales del sitio --- */
--azul:#30302e; /* franjas y barras oscuras */
--gris:#f1efec; /* fondos suaves */
--linea:#d8d3c9; /* líneas/bordes, en tono cálido */
--texto:#30302e; /* texto principal */
--muted:#636362; /* texto secundario */
--accent:#bab09f; /* acento */
--card:#ffffff;
/* --- Tipografía --- */
/* Open Sans (cargada abajo con @font-face). El stack de sistema queda como
respaldo por si algún archivo faltara. */
--fuente-base: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--fuente-titulos: var(--fuente-base);
}
/* ==========================================================================
2) TIPOGRAFÍA — Open Sans autoalojada (@font-face)
Cortes incluidos: Medium (500), Medium Italic (500), Bold (700),
ExtraBold (800). No hay corte Regular en el paquete, así que el Medium
cubre también el peso normal (rango 400 500) para evitar simulaciones.
font-display:swap → el texto se ve de inmediato con la fuente de
respaldo y cambia a Open Sans al cargar (sin “pantallazo” en blanco).
========================================================================== */
@font-face{
font-family:"Open Sans";
src:url("../fonts/OpenSans-Medium.ttf") format("truetype");
font-weight:400 500;
font-style:normal;
font-display:swap;
}
@font-face{
font-family:"Open Sans";
src:url("../fonts/OpenSans-MediumItalic.ttf") format("truetype");
font-weight:400 500;
font-style:italic;
font-display:swap;
}
@font-face{
font-family:"Open Sans";
src:url("../fonts/OpenSans-Bold.ttf") format("truetype");
font-weight:700;
font-style:normal;
font-display:swap;
}
@font-face{
font-family:"Open Sans";
src:url("../fonts/OpenSans-ExtraBold.ttf") format("truetype");
font-weight:800;
font-style:normal;
font-display:swap;
}
body{
font-family:var(--fuente-base);
font-size:15px; /* base algo mayor para lectura cómoda */
font-weight:500; /* Medium como peso de lectura */
line-height:1.6;
color:var(--tinta);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* Titulares en Bold (700) por defecto */
h1,h2,h3,h4,h5{
font-family:var(--fuente-titulos);
color:var(--tinta);
font-weight:700;
letter-spacing:.01em;
}
/* Titulares "display" grandes en ExtraBold (800), como el rótulo del PDF */
.intro h1,
.home-hero h1,
.object-title{
font-weight:800;
}
/* Limpieza del H1 del listado: se retiran los guiones decorativos
(' -------- ') que metía el CSS original con :before/:after. */
.intro h1{
color:var(--tinta);
letter-spacing:.06em;
}
.intro h1:before,
.intro h1:after{ content:none; }
.intro .small{ color:var(--tinta-suave); }
/* ==========================================================================
3) ESTRUCTURA GLOBAL — franjas, header y foco (las 3 páginas)
========================================================================== */
/* Franjas superior e inferior y botón "volver arriba": tinta oscura */
.franja{ background:var(--tinta); }
.franja-inferior{ background:var(--tinta); }
.back-to-top{ background:var(--tinta); color:var(--papel); }
.back-to-top:hover{ background:#1f1f1d; }
/* Foco visible unificado y accesible (reemplaza el azul #0b5cab original).
Alto contraste sobre todos los fondos claros del sitio. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
outline:3px solid var(--foco);
outline-offset:3px;
}
/* Enlaces de texto en contenido: tinta con subrayado, hover en arena oscura */
a{ color:var(--tinta); }
/* ==========================================================================
4) PÁGINA DE LISTADO (list-object.html)
========================================================================== */
/* Migas de pan */
.breadcrumbs a{ color:var(--tinta-suave); }
.breadcrumbs a:hover{ color:var(--tinta); text-decoration:underline; }
.breadcrumbs-current,
.breadcrumbs [aria-current="page"]{ color:var(--tinta); font-weight:600; }
/* Barra de búsqueda: campo + botón "Buscar" (oscuro, como el PDF) */
.basic-search input,
#searchInput{
border:1px solid var(--linea);
background:var(--papel);
color:var(--tinta);
}
.basic-search input::placeholder{ color:var(--tinta-suave); }
.btn{
background:var(--tinta);
color:var(--papel);
}
.btn:hover{ background:#45443f; }
/* Enlace "Búsqueda avanzada" */
.advanced-toggle{ color:var(--tinta); }
.advanced-grid input,
.advanced-grid select{
border:1px solid var(--linea);
background:var(--papel);
color:var(--tinta);
}
/* Botón "Limpiar filtros" (el PDF lo marca oscuro, #30302e) */
.clear-filters{
background:var(--tinta);
color:var(--papel);
border:1px solid var(--tinta);
}
.clear-filters:hover{ background:#45443f; }
/* Títulos de grupo de filtros (Colección, Área, ...) */
.filter-group h3{
color:var(--tinta);
border-bottom:1px solid var(--linea);
}
/* Ítems de faceta y su conteo */
.filter-item{ color:var(--tinta); }
.filter-item:hover,
.filter-item.active{ color:#000; }
.filter-count{ color:var(--tinta-suave); } /* pasa de #6c757d (límite) a AA holgado */
/* Barra "Total de piezas encontradas" */
.summary-row h2{ color:var(--tinta); }
.summary-row #resultsCount{ color:var(--tinta); }
/* Botón flotante de filtros (móvil) */
.filters-toggle{
border:1px solid var(--linea);
background:var(--papel);
color:var(--tinta);
}
.filters-toggle:hover,
.filters-toggle:focus-visible{ background:var(--marfil); }
/* Tarjetas de resultado (generadas por demo.js) */
.masonry-item{
background:var(--papel);
border:1px solid var(--linea);
}
/* Chip de colección sobre la tarjeta: marfil con texto oscuro (legible) */
.masonry-info .badge,
.badge{
background:var(--marfil);
color:var(--tinta);
border:1px solid var(--arena-clara);
}
.masonry-info h5{ color:var(--tinta); }
.masonry-info p{ color:var(--tinta-suave); }
/* Botón "Ver detalle / Ver más" en tarjeta: claro con texto oscuro (PDF) */
.btn-vermas{
background:var(--marfil);
color:var(--tinta) !important;
border:1px solid var(--arena);
}
.btn-vermas:hover{ background:var(--marfil-hover); }
/* Paginación */
.pagination button{
border:1px solid var(--linea);
background:var(--papel);
color:var(--tinta);
}
.pagination button:hover{ background:var(--marfil); }
.pagination button[aria-current="page"]{
background:var(--tinta);
color:var(--papel);
border-color:var(--tinta);
}
.pagination button:disabled{ color:var(--tinta-suave); }
/* ==========================================================================
5) PORTADA (index.html)
========================================================================== */
.home-eyebrow,
.home-note-kicker,
.home-section-kicker{ color:var(--tinta-suave); }
.home-hero h1,
.home-section-heading h2,
.home-about h2{ color:var(--tinta); }
.home-lead,
.home-section-description{ color:var(--tinta-suave); }
/* Campo de búsqueda del hero */
.home-search input{
border:1px solid var(--linea);
background:var(--papel);
color:var(--tinta);
}
.home-search input::placeholder{ color:var(--tinta-suave); }
.home-search input:focus{ border-color:var(--arena); }
/* Botón "Buscar" del hero: oscuro */
.home-search-button{
background:var(--tinta);
color:var(--papel);
}
.home-search-button:hover{ background:#45443f; }
/* Enlaces rápidos "Explora:" */
.home-quick-links span{ color:var(--tinta-suave); }
.home-quick-links a{ color:var(--tinta); text-decoration:underline; }
.home-quick-links a:hover{ color:#000; }
/* Nota lateral del hero */
.home-hero-note{
background:var(--marfil);
border:1px solid var(--arena-clara);
}
.home-hero-note a{ color:var(--tinta); text-decoration:underline; }
/* Enlaces de sección ("Ver toda la colección", etc.) */
.home-section-link{ color:var(--tinta); }
.home-section-link:hover{ color:#000; }
/* Tarjetas de colección, favoritos y servicios: borde y texto de marca */
.collection-card,
.featured-card,
.service-card{
background:var(--papel);
border:1px solid var(--linea);
}
.collection-card h3,
.featured-card__title,
.service-card h3{ color:var(--tinta); }
.featured-card__collection,
.service-card-label{ color:var(--tinta-suave); }
/* Píldoras "Lo más buscado" */
.topic-pill{
background:var(--marfil);
color:var(--tinta);
border:1px solid var(--arena-clara);
}
.topic-pill span{ color:var(--tinta-suave); }
.topic-pill:hover{ background:var(--marfil-hover); border-color:var(--arena); }
/* Franja suave de secciones alternas */
.home-section--soft{ background:var(--marfil); }
/* Enlaces legales del pie */
.home-legal-links button{ color:var(--tinta); }
.home-legal-links button:hover{ color:#000; }
/* Ventanas modales */
.site-modal-kicker{ color:var(--tinta-suave); }
.site-modal-dialog h2,
.site-modal-body h3{ color:var(--tinta); }
.site-modal-accept{
background:var(--tinta);
color:var(--papel);
}
.site-modal-accept:hover{ background:#45443f; }
.site-modal-close{ color:var(--tinta); }
/* ==========================================================================
6) FICHA DE OBJETO (info-object.html)
========================================================================== */
/* Botón "Volver": oscuro (PDF) */
.back-btn{
background:var(--tinta);
color:var(--papel);
}
.back-btn:hover{ background:#45443f; }
.detail-card{
background:var(--papel);
border:1px solid var(--linea);
}
/* Caja de imagen principal: marfil (PDF) */
.main-image-box{ background:var(--marfil); }
.thumbs img{ border:2px solid var(--linea); }
.object-title{ color:var(--tinta); }
.meta p{ color:var(--tinta); }
.meta strong{ color:var(--tinta); }
/* --- Etiquetas de estado de la pieza (badges) ---
Todas con texto tinta oscuro para máximo contraste. */
.badge-detail{
background:var(--marfil);
color:var(--tinta);
}
/* "En investigación" — amarillo (contraste AAA con tinta) */
.badge-detail.badge-warning{
background:var(--estado-investigacion);
color:var(--tinta);
}
/* "Imagen publicable" — verde (contraste AAA con tinta) */
.badge-detail.badge-ok{
background:var(--estado-publicable);
color:var(--tinta);
}
/* "En reserva" — rojo. Se añade esta clase por si el sistema real marca
piezas en reserva (en el demo actual no está en el HTML, pero queda lista).
Úsala así: En reserva
AVISO DE CONTRASTE: el rojo #e96b5a con texto oscuro queda en ~4.1:1
(cumple AA para texto grande / negrita ≥18.66px). Por eso el texto va en
negrita. Si tu revisión exige AA estricto en texto pequeño, cambia solo la
línea del fondo por un rojo un punto más profundo, p. ej.:
background:#d84f3c; (con texto tinta llega a ~4.7:1, AA normal)
*/
.badge-detail.badge-danger{
background:var(--estado-reserva);
color:var(--tinta);
font-weight:700;
}
/* Aviso de restricción (si aparece) — coral suave con texto oscuro */
.restriction{
background:var(--estado-alerta);
color:var(--tinta);
}
/* Pestañas de la ficha: arena, con la activa en relleno sólido (PDF) */
.tab-buttons{ border-bottom:1px solid var(--linea); }
.tab-buttons button{
background:var(--marfil);
color:var(--tinta);
}
.tab-buttons button:hover{ background:var(--arena-clara); }
.tab-buttons button.active{
background:var(--arena); /* arena sólida, texto oscuro = 6:1 (AA) */
color:var(--tinta);
font-weight:700;
}
.tab-panel{ color:var(--tinta); }
/* ==========================================================================
8) IMÁGENES — anti-desborde global + imágenes de obra al 100% del contenedor
========================================================================== */
/* Regla segura para TODAS las imágenes: nunca superan el ancho de su
contenedor y conservan proporción (height:auto). No deforma logos,
miniaturas ni las imágenes con recorte: esas tienen reglas propias más
específicas que mantienen su tamaño y su object-fit. */
img{
max-width:100%;
height:auto;
}
/* Imágenes de OBRA dentro de las cards: ocupan el 100% del contenedor.
- .collection-card img : corrige el desborde del Home. El HTML mete un
directo que el CSS del sitio no dimensionaba (estilaba
.collection-card-visual, que no existe en el marcado) y por eso se salía.
- .masonry-image img : tarjetas del listado (ya venía al 100%, se refuerza).
Intencionalmente NO se tocan .featured-card__image (ya usa object-fit:cover
en un marco 4:3), .thumbs img (miniatura fija) ni los logos: así no se
deforma ninguna. */
.collection-card img,
.masonry-image img{
width:100%;
height:auto;
display:block;
}
/* Tarjeta del listado: que la IMAGEN defina el alto del contenedor.
Se elimina el alto mínimo fijo (260px) que traía el sitio y se conserva
overflow:hidden para que nada se salga del recuadro. */
.masonry-image{
min-height:0;
overflow:hidden;
}
/* ==========================================================================
9) PANEL DE FILTROS (cajón lateral) — solo CSS
· La cabecera "Filtros" queda fija arriba.
· "Limpiar filtros" queda anclado abajo, estático.
· Solo la lista de filtros hace scroll; pasa por detrás de ambos.
· El botón flotante que abre el cajón queda pegado al borde de la página.
Se logra con flexbox + order + position:sticky, sin tocar HTML ni JS.
========================================================================== */
.filters{
display:flex;
flex-direction:column;
}
/* Cabecera (título "Filtros" + botón cerrar ×): fija en la parte superior */
.filters-header{
position:sticky;
top:0;
z-index:3;
flex:0 0 auto;
margin-bottom:0;
padding-bottom:12px;
background:var(--papel);
border-bottom:1px solid var(--linea);
}
/* "Limpiar filtros": anclado al fondo del panel y estático.
- order:99 lo lleva al final visual sin mover el HTML (viene 2º en el DOM).
- margin-top:auto lo empuja al fondo cuando hay pocos filtros.
- position:sticky + bottom:0 lo mantiene visible mientras se hace scroll,
estés donde estés dentro de la lista.
El padding del panel (16px) deja el margen inferior y lateral respetado. */
.clear-filters{
order:99;
position:sticky;
bottom:0;
z-index:3;
flex:0 0 auto;
margin:auto 0 0;
box-shadow:0 -6px 14px rgba(48,48,46,.14);
}
/* Botón flotante que invoca los filtros: pegado al borde izquierdo */
.filters-toggle{
left:0;
border-left:0;
border-top-left-radius:0;
border-bottom-left-radius:0;
background:var(--tinta);
color:var(--papel);
border-color:var(--tinta);
}
.filters-toggle:hover,
.filters-toggle:focus-visible{
background:#1f1f1d;
color:var(--papel);
}
/* Header sin sombra paralela (se conserva la línea de borde inferior).
El sitio pinta la sombra en .header-institucional y en su ::before, por eso
se anulan ambas con !important; el border-bottom se mantiene intacto. */
.header-institucional{
box-shadow:none !important;
border-bottom:1px solid rgba(48,48,46,.14) !important;
}
.header-institucional::before{
box-shadow:none !important;
}
/* ==========================================================================
9B) LEGIBILIDAD — quiebre de palabras largas
Evita que una palabra/URL/código que no cabe se salga o se solape con
el contenido. overflow-wrap:break-word solo parte la palabra cuando de
verdad no cabe (no corta palabras normales), así que es seguro global.
========================================================================== */
h1,h2,h3,h4,h5,h6,p,li,a,span,
.masonry-info,
.masonry-info h5,
.masonry-info p,
.collection-card-content,
.collection-card h3,
.collection-card p,
.featured-card__title,
.service-card h3,
.service-card p,
.meta,
.meta p,
.object-title,
.breadcrumbs-current,
.badge,
.badge-detail{
overflow-wrap:break-word;
word-break:break-word;
}
/* ==========================================================================
10) MÓVIL — media query única para todo lo táctil (≤768px)
Solo ajustes de tema (tamaños de texto, targets y adaptaciones de
color). La rejilla/estructura ya la maneja el CSS original del sitio.
========================================================================== */
@media (max-width:768px){
body{ font-size:15px; line-height:1.6; }
/* Jerarquía de títulos algo más contenida en pantallas pequeñas */
.intro h1{ font-size:24px; letter-spacing:.04em; }
.home-hero h1{ font-size:26px; }
.home-section-heading h2{ font-size:20px; }
.object-title{ font-size:22px; }
.summary-row h2{ font-size:18px; }
/* Áreas táctiles cómodas (mínimo 44px de alto) */
.btn,
.home-search-button,
.clear-filters,
.btn-vermas,
.back-btn,
.filters-toggle,
.pagination button,
.tab-buttons button{
min-height:44px;
}
/* El botón "Buscar" del hero a ancho completo bajo el campo */
.home-search-button{ width:100%; }
/* Chips y píldoras: que respiren y no se corten */
.topic-pill,
.badge,
.badge-detail{
font-size:13px;
line-height:1.3;
}
/* Pestañas de ficha: permiten envolver sin perder el color activo */
.tab-buttons{ gap:6px; }
.tab-buttons button{ flex:1 1 auto; text-align:center; }
/* Panel de filtros deslizante en móvil conserva fondo claro legible */
.filters{ background:var(--papel); }
/* Franja inferior un poco más discreta en móvil */
.franja-inferior{ margin-top:28px; }
}
/* Afinado para teléfonos muy angostos */
@media (max-width:420px){
.intro h1{ font-size:21px; }
.home-hero h1{ font-size:23px; }
.home-quick-links{ gap:6px; }
}
/* Colecciones: dos columnas en celular (el sitio las bajaba a una sola desde
900px). Se mantiene 4 en desktop y 2 en tablet/celular hacia abajo. */
@media (max-width:900px){
.collection-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
}
/* Listado de piezas: dos columnas en celular. La rejilla usa column-count y el
sitio lo bajaba a 1 desde 620px; aquí se mantiene en 2. Nuestra hoja carga
de última, así que gana sin !important. */
@media (max-width:620px){
.masonry-grid{
column-count:2;
column-gap:14px;
}
}
/* Cards más compactas en móvil: se baja el padding de los cuerpos (venían en
22px las de colección, 16–18px las demás) a 10px para aprovechar el ancho. */
@media (max-width:768px){
.collection-card-content{ padding:10px; }
.masonry-info{ padding:10px; }
.featured-card__body{ padding:10px; }
.service-card{ padding:10px; }
}
/* ==========================================================================
FIN — museo-tema.css
========================================================================== */