/* * skin-humanist.css — Variante estética HUMANIST / Cálido (Mozilla/Ford Foundation) * Capa dev de preview reversible. Activar: * NO es producción. Carga después de app.css, tokens.css, improvements.css, * immersive.css, glass.css. Sobreescribe always-on de immersive con !important. * Fecha: 2026-08-01 */ /* ─── Tokens locales del skin ─────────────────────────────────────────────── */ html[data-skin="humanist"] { --sk-warm: #B5562C; /* terracota — accent primario */ --sk-warm-2: #3E7C63; /* verde musgo — accent alternativo (sidebar cat) */ --sk-ink: #2a211b; /* tinta cálida oscura */ --sk-bg: #faf6f1; /* off-white cálido */ --sk-card-bg: #fffdfa; --sk-border: #eaded1; /* borde cálido */ --sk-shadow: 0 10px 24px -14px rgba(120, 70, 40, .22); } /* ─── Fondo de página ─────────────────────────────────────────────────────── */ html[data-skin="humanist"] body.homepage { background-color: var(--sk-bg) !important; background-image: none !important; /* cancela gradiente celeste de immersive */ } /* Textura textil/grano cálido — pseudo-elemento fijo, NO tapa contenido */ html[data-skin="humanist"] body.homepage::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='1' cy='1' r='.9' fill='%23B5562C'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 4px 4px; } /* ─── Navbar ──────────────────────────────────────────────────────────────── */ html[data-skin="humanist"] .site-navbar { background: var(--sk-ink) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) !important; } /* ─── Hero / Cover ────────────────────────────────────────────────────────── */ html[data-skin="humanist"] .homepage__cover { background: linear-gradient(160deg, #3d2d22 0%, #2a211b 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-skin="humanist"] .homepage__cover__header h1 { color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,.28) !important; } /* ─── Título principal "Media profiles" ──────────────────────────────────── */ html[data-skin="humanist"] .h3-title { font-family: var(--po-font-headline, "Chivo", sans-serif) !important; font-weight: 800 !important; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem) !important; color: var(--sk-ink) !important; } /* ─── Eyebrow ─────────────────────────────────────────────────────────────── */ html[data-skin="humanist"] .gl-eyebrow { font-family: var(--po-font-mono, monospace) !important; text-transform: uppercase !important; letter-spacing: .14em !important; color: var(--sk-warm) !important; } html[data-skin="humanist"] .gl-eyebrow::before { background-color: var(--sk-warm) !important; } /* ─── Cards ───────────────────────────────────────────────────────────────── */ html[data-skin="humanist"] .homepage__main__results .card { background: var(--sk-card-bg) !important; border: 1px solid var(--sk-border) !important; border-radius: 16px !important; box-shadow: var(--sk-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: transform .18s ease, box-shadow .18s ease !important; } html[data-skin="humanist"] .homepage__main__results .card:hover { transform: translateY(-3px) !important; box-shadow: 0 18px 32px -12px rgba(120, 70, 40, .28) !important; } /* Imagen vacía → gradiente cálido, NO celeste */ html[data-skin="humanist"] .card__image { background: linear-gradient(140deg, #f3e6da, #e9d3c0) !important; } html[data-skin="humanist"] .card__title { font-family: var(--po-font-headline, "Chivo", sans-serif) !important; font-weight: 700 !important; color: var(--sk-ink) !important; } /* Chip/tag en cards — cancela el chip glass de immersive */ html[data-skin="humanist"] .card .chip, html[data-skin="humanist"] .card [class*="chip"] { background: rgba(181, 86, 44, .10) !important; color: var(--sk-warm) !important; border: 1px solid rgba(181, 86, 44, .22) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ─── Sidebar ─────────────────────────────────────────────────────────────── */ html[data-skin="humanist"] .homepage__main__sidebar { background: var(--sk-card-bg) !important; border: 1px solid var(--sk-border) !important; border-radius: 16px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Bloques de categoría — Ford Foundation style: color sólido + texto blanco */ html[data-skin="humanist"] .sidebar__header { background: var(--sk-warm) !important; border-radius: 12px !important; padding: .55rem 1rem !important; margin-bottom: .5rem !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-skin="humanist"] .sidebar__header h3, html[data-skin="humanist"] .sidebar__header * { color: #fff !important; } /* Alternar segundo color en sidebar headers pares */ html[data-skin="humanist"] .sidebar__header:nth-of-type(even) { background: var(--sk-warm-2) !important; } html[data-skin="humanist"] .number { color: var(--sk-warm) !important; font-weight: 700 !important; } html[data-skin="humanist"] .label { color: var(--sk-ink) !important; } /* ─── Filtros / Búsqueda ──────────────────────────────────────────────────── */ html[data-skin="humanist"] .search__box, html[data-skin="humanist"] .search-form { background: #fdf7f0 !important; border: 1px solid var(--sk-border) !important; border-radius: 14px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-skin="humanist"] .form-control, html[data-skin="humanist"] select.filter { background: #fff !important; border: 1px solid var(--sk-border) !important; border-radius: 8px !important; color: var(--sk-ink) !important; } html[data-skin="humanist"] .form-control:focus, html[data-skin="humanist"] select.filter:focus { outline: none !important; border-color: var(--sk-warm) !important; box-shadow: 0 0 0 3px rgba(181, 86, 44, .18) !important; } /* ─── Botones ─────────────────────────────────────────────────────────────── */ html[data-skin="humanist"] .btn-blue, html[data-skin="humanist"] #apply-filters, html[data-skin="humanist"] .btn-advaned-filters { background: var(--sk-warm) !important; border-color: var(--sk-warm) !important; color: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-skin="humanist"] .btn-blue:hover, html[data-skin="humanist"] #apply-filters:hover, html[data-skin="humanist"] .btn-advaned-filters:hover { background: #8f3f1e !important; border-color: #8f3f1e !important; } /* ─── Footer ──────────────────────────────────────────────────────────────── */ html[data-skin="humanist"] .site-footer { background: var(--sk-ink) !important; color: #e8ddd4 !important; border-top: 3px solid var(--sk-warm) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-skin="humanist"] .site-footer a { color: #e8ddd4 !important; } html[data-skin="humanist"] .site-footer a:hover { color: #fff !important; } /* ─── Accesibilidad: reduced motion ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html[data-skin="humanist"] .homepage__main__results .card { transition: none !important; } html[data-skin="humanist"] .homepage__main__results .card:hover { transform: none !important; } }