/* ============================================================================= * custom.css — Estilos que complementan a Tailwind (CDN) * ============================================================================= * Concepto visual "Dos mundos": * · Biodiversidad / esperanza → secciones CLARAS (papel, verde, agua) * · La amenaza / la pérdida → secciones OSCURAS (bosque nocturno, ámbar) * Tipografía: Fraunces (titulares, serif orgánica) + Inter (cuerpo). * ===========================================================================*/ /* ───────────────────────────── Variables base ────────────────────────────── */ :root { --font-serif: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* Mundo claro */ --paper: #f7f6f1; /* fondo crema cálido */ --paper-2: #eef3ec; /* superficie salvia muy clara */ --ink: #14241d; /* texto principal (verde casi negro) */ /* Mundo oscuro */ --forest: #0f1f1a; /* fondo bosque nocturno */ --pine: #16302a; /* superficie oscura */ /* Acentos */ --leaf: #16a34a; /* verde fresco (claro) */ --leaf-lt: #4ade80; /* verde primavera (sobre oscuro) */ --water: #0d9488; /* turquesa (enlaces) */ --azure: #075985; /* azul de río (el "azul" del anillo) */ --alert: #ea580c; /* óxido/ámbar (amenaza) */ --cream: #f5f3ec; /* texto sobre oscuro */ } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background-color: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Fraunces se ve mejor con un punto de "opsz" alto en titulares grandes */ .font-serif { font-family: var(--font-serif); font-optical-sizing: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } /* ──────────────────── Animación de aparición al hacer scroll ──────────────── */ /* Todo va prefijado con .js (clase que pone un script en línea del ): sin JavaScript no hay observador que devuelva la opacidad, así que el contenido debe quedarse visible. Si no, la página entera sería "texto oculto" para un rastreador que no ejecute JS. */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; } .js .reveal[style*="--delay"] { transition-delay: var(--delay); } /* ──────────────── Antetítulos (los rótulos en caja alta) ──────────────────── */ /* El rótulo pequeño que precede a cada titular: "El conflicto", "Biodiversidad", "Pasa a la acción"… Estaban repartidos en tres variantes distintas (11, 12 y 14 px, con tres espaciados) y a esos tamaños la caja alta se lee mal: mucho interletraje y poca altura de x. Ahora es una sola clase y se ajusta aquí. El color y los márgenes siguen en cada sitio, porque sí cambian. */ .eyebrow { font-size: 1rem; /* 16 px */ line-height: 1.3; letter-spacing: .14em; font-weight: 600; text-transform: uppercase; } @media (max-width: 639px) { .eyebrow { font-size: .9375rem; letter-spacing: .12em; } /* 15 px */ } /* Variante para rótulos dentro de tarjetas y fichas, donde el tamaño completo competiría con el titular que tienen justo debajo. */ .eyebrow-xs { font-size: .875rem; /* 14 px */ line-height: 1.3; letter-spacing: .11em; font-weight: 600; text-transform: uppercase; } /* ───────────────────────────── NAVBAR (claro/sólido) ─────────────────────── */ /* Sobre el hero (transparente): texto claro. Al hacer scroll (.nav-solid): claro→tinta. */ #navbar .nav-link { color: rgba(245, 243, 236, .85); transition: color .25s ease; } #navbar .nav-link:hover { color: var(--leaf-lt); } #navbar .brand-text { color: #fff; transition: color .25s ease; } #navbar.nav-solid { background: rgba(247, 246, 241, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(20,36,29,.06), 0 8px 30px rgba(20,36,29,.06); } #navbar.nav-solid .nav-link { color: rgba(20, 36, 29, .7); } #navbar.nav-solid .nav-link:hover { color: var(--leaf); } #navbar.nav-solid .brand-text { color: var(--ink); } /* El logo (gota+sapo) cambia de color con el estado del nav */ #navbar .logo-mark { color: var(--leaf-lt); transition: color .25s ease; } #navbar.nav-solid .logo-mark { color: var(--leaf); } /* ───────────────────────────── HERO ──────────────────────────────────────── */ /* Carrusel: slides apiladas que se funden con opacidad */ #heroCarousel { z-index: 0; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease-in-out; will-change: opacity; } .hero-slide.is-active { opacity: 1; } .hero-img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-overlay { z-index: 1; } /* por encima de las fotos, bajo el contenido */ .hero-credit { font-size: 11px; letter-spacing: .03em; color: rgba(247, 246, 241, .72); background: rgba(15, 31, 26, .35); backdrop-filter: blur(4px); padding: 3px 9px; border-radius: 999px; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } } .hero-overlay { background: linear-gradient(to bottom, rgba(8,15,12,.30) 0%, rgba(8,15,12,.45) 45%, rgba(8,15,12,.80) 100%); } @keyframes bob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(8px) } } .scroll-hint { animation: bob 2s ease-in-out infinite; } /* ───────────────────────────── Tarjetas catálogo ─────────────────────────── */ .card-media { transition: transform .6s cubic-bezier(.16,1,.3,1); } .card:hover .card-media { transform: scale(1.06); } /* ───────────────────────────── Citas de fuentes ──────────────────────────── */ /* Superíndice [n] que enlaza a la sección de fuentes */ /* Las citas [n] son parte del mensaje: se leen a simple vista y se pueden pulsar con el dedo, no son una nota al pie decorativa. */ .cite { font-size: .78em; font-weight: 700; vertical-align: super; margin-left: 2px; padding: 0 1px; text-decoration: none; line-height: 0; } .cite-light { color: var(--leaf); } /* sobre fondo claro */ .cite-dark { color: var(--alert); } /* sobre fondo oscuro */ .cite:hover { text-decoration: underline; } /* ───────────────────────────── Modal (ficha) ─────────────────────────────── */ .modal-backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .35s ease; } .modal-panel { transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1); } .modal-closed .modal-panel { opacity: 0; transform: translateY(24px) scale(.98); } .modal-open .modal-panel { opacity: 1; transform: none; } .modal-closed .modal-backdrop { opacity: 0; } .modal-open .modal-backdrop { opacity: 1; } body.modal-active { overflow: hidden; } /* ───────────────────────────── Carrusel del modal ────────────────────────── */ .carousel-track { transition: transform .5s cubic-bezier(.16,1,.3,1); } .carousel-slide { flex: 0 0 100%; } .carousel-dot { transition: all .25s ease; } /* ───────────────────────────── Barra de scroll ───────────────────────────── */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--paper-2); } ::-webkit-scrollbar-thumb { background: #c3d0c5; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #a8bbaa; } ::selection { background: rgba(22,163,74,.25); color: var(--ink); }