/* OAGS — estilos propios. Colores alineados al "Manual de identidad de marca OAGS". MANUAL: #FAF8EE blanco hueso · #2F221A negro wengue · #6C7C50 verde oliva #9CD242 verde manzana · #F5F0FA gris purpura claro DERIVADO (variacion HSL autorizada): #CAD3BB borde suave · #ADDA62 verde modo oscuro */ body{background:#FAF8EE;color:#2F221A} /* Aqui vivia una textura de ruido sobre el fondo de la pagina: un SVG con un filtro `feTurbulence` puesto como fondo del . Se retiro porque era la causa del desplazamiento a tirones. Un SVG con filtro no se guarda como imagen ya dibujada: el navegador tiene que recalcular el ruido fractal, de tres octavas, cada vez que dibuja un trozo nuevo de la pagina, y el fondo del cubre el documento entero. Medido en el navegador del usuario, bajando por la portada: con la textura se perdia entre el 14 y el 19 % de los cuadros y el percentil 95 estaba en 127 ms; sin ella, entre el 0 y el 2,5 % y el percentil 95 en 21 ms. Quitar solo esto rinde lo mismo que apagar todos los efectos del sitio a la vez. Se pagaba ademas por nada: iba a opacidad 0,02, invisible en la practica, y el modo oscuro ya la desactivaba. Si algun dia se quiere recuperar la textura, tiene que ser un archivo de imagen pequeno y ya dibujado, nunca un filtro SVG. */ /* Trama de tejido: concepto central de la marca, "tejido de datos, tejido de comunidad" */ .weave-texture{background-image:linear-gradient(0deg,rgba(108,124,80,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(108,124,80,.05) 1px,transparent 1px);background-size:8px 8px} /* Elevacion: sombra tenida con el tono tierra de marca, nunca gris carbon */ .card-hover{transition:transform .2s ease,box-shadow .2s ease} .card-hover:hover{box-shadow:0 10px 20px rgba(47,34,26,.12);transform:translateY(-2px)} .custom-scrollbar::-webkit-scrollbar{width:8px;height:8px} .custom-scrollbar::-webkit-scrollbar-track{background:#FAF8EE} .custom-scrollbar::-webkit-scrollbar-thumb{background:#CAD3BB;border-radius:4px} .custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#6C7C50} /* Cifras de indicador: el manual exige numeros tabulares para comparacion vertical */ .cifra{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1} /* Visible solo para las ayudas tecnicas. * * Se recorta a un pixel en vez de usar `display:none`, que lo sacaria tambien * del arbol de accesibilidad y lo dejaria sin anunciar, que es lo contrario de * lo que se busca. */ .visualmente-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; border:0} /* Saltar al contenido — obligatorio por WCAG 2.1 (criterio 2.4.1). * * Oculto con `clip-path` y no con `display:none` ni `visibility:hidden`: esas * dos lo sacarian del recorrido del tabulador, o sea que el enlace que existe * para quien navega con teclado seria inalcanzable con teclado. * * `main:focus` sin contorno porque el foco ahi es tecnico -lo recibe para que * el siguiente tabulador siga desde el contenido- y no corresponde a nada que * la persona haya activado. */ .oags-salto{position:absolute;top:.75rem;left:.75rem;z-index:60; padding:.5rem 1rem;border-radius:.5rem;background:#2F221A;color:#FAF8EE; font:700 .9rem/1 Mulish,system-ui,sans-serif;text-decoration:none; clip-path:inset(50%)} /* `:focus` y no `:focus-visible`: a este enlace solo se llega con teclado, asi * que no hay caso en que sobre, y `focus-visible` no responde al foco puesto * por codigo -por ejemplo desde una ayuda tecnica-. */ .oags-salto:focus{clip-path:none;outline:3px solid #2F221A; outline-offset:2px} main:focus{outline:none} /* Foco visible — obligatorio por WCAG 2.1 AA (Resolucion MinTIC 1519 de 2020) */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid #4C6B19;outline-offset:2px;border-radius:4px} /* Movimiento reducido — exigido por WCAG 2.1 */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} .card-hover:hover{transform:none} } /* Cabecera que se retira al bajar (ver oags-ui.js). Se mueve con transform y no con height para no reflotar la pagina entera. */ .oags-cabecera{transition:transform .28s cubic-bezier(.2,.8,.2,1);will-change:transform} .oags-cabecera-oculta{transform:translateY(-100%)} @media (prefers-reduced-motion:reduce){ .oags-cabecera{transition:none} .oags-cabecera-oculta{transform:none} } /* Heroe: dos capas sobre la fotografia. * * 1) ::before oscurece con el marron wengue para que el titular tenga contraste * pase lo que pase con la imagen. Se mezcla de forma normal y no en * multiply: un modo de mezcla obliga a Skia a apartar la region entera del * heroe, combinarla y devolverla cada vez que rasteriza una franja, y a lo * ancho de 1920 px eso se paga en cada tramo nuevo del desplazamiento. * 2) ::after funde el borde inferior con el blanco hueso del fondo, de modo que * la fotografia no termina en un corte recto: se disuelve en la pagina y la * tarjeta de cifras aparece sobre esa transicion. * * Si la foto todavia no existe, queda el color de marca y el titulo se lee igual. */ .oags-heroe{background-color:#2F221A;background-size:cover;background-position:center} .oags-heroe::before{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(47,34,26,.88) 0%,rgba(47,34,26,.66) 50%,rgba(47,34,26,.84) 100%)} .oags-heroe::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.95; background:linear-gradient(0deg,#FAF8EE 0%,rgba(250,248,238,0) 34%,rgba(250,248,238,0) 100%)} .oags-heroe > *{position:relative;z-index:1} /* Tarjetas de boletin. * * Todas se muestran completas y quietas. Antes se plegaban y desplegaban segun * la posicion del scroll, pero eso obligaba a animar `height` y `box-shadow`, y * ninguna de las dos es gratis: el alto rehace la maquetacion de todo lo que va * debajo y la sombra difusa se repinta entera, en cada cuadro de la animacion. * Como la tarjeta abierta cambiaba mientras se bajaba, esas animaciones no * paraban nunca y el desplazamiento se entrecortaba. Medido en la portada se * perdia cerca del 28 % de los cuadros; sin ellas, el 8 %. * * El unico movimiento que queda es al pasar el raton, y usa solo `transform`, * que la tarjeta grafica resuelve sin repintar ni recolocar nada. */ .boletin{position:relative;height:420px;overflow:hidden;border-radius:16px; background:#FFF;box-shadow:0 10px 20px rgba(47,34,26,.12)} .boletin__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .4s ease} .boletin:hover .boletin__foto{transform:scale(1.04)} .boletin__velo{position:absolute;inset:0; background:linear-gradient(to top,#2F221A 0%,rgba(47,34,26,.72) 45%,rgba(47,34,26,.15) 100%)} /* El texto va sobre la portada. */ .boletin__contenido{position:relative;display:flex;height:100%;flex-direction:column; justify-content:flex-end;padding:28px;color:#FFF} @media (prefers-reduced-motion:reduce){ .boletin__foto{transition:none} .boletin:hover .boletin__foto{transform:none} } /* Franja de cabecera de la consulta abierta. * * Va de lado a lado, como el heroe de inicio, pero mas baja: en esta pantalla * lo que importa es la tabla, y una imagen alta empujaria los filtros fuera de * la vista. * * Un solo desvanecido, de abajo hacia arriba, para que la fotografia se * disuelva en la pagina en vez de cortarse en seco. El titular se apoya en el: * ahi el fondo ya es casi el hueso de la pagina, asi que se lee sin tener que * oscurecer la imagen ni ponerle un velo por delante. * * Ocupa el tercio inferior y no la mitad: mas alto empezaba a comerse la * fotografia, que es lo que la franja tiene que enseñar. * * Es un degradado plano. Nada de `mix-blend-mode`: obliga al navegador a * apartar la zona, mezclarla y devolverla cada vez que la repinta, y eso ya * costo caro en la portada. * * El orden de capas va explicito porque los elementos posicionados se pintan * en el orden del arbol: sin el, la fotografia tapaba el desvanecido. */ .oags-franja{position:relative;display:flex;align-items:flex-end; min-height:340px;overflow:hidden;background:#FAF8EE; view-timeline-name:--franja} .oags-franja__foto{position:absolute;inset:0;z-index:0;width:100%;height:100%; object-fit:cover;object-position:70% 45%} .oags-franja::after{content:"";position:absolute;inset:0;z-index:1; pointer-events:none; background:linear-gradient(0deg,#FAF8EE 0%,rgba(250,248,238,.94) 9%,rgba(250,248,238,.66) 20%,rgba(250,248,238,.22) 32%,rgba(250,248,238,0) 44%)} .oags-franja__contenido{position:relative;z-index:2;padding-bottom:32px} @media (max-width:640px){ .oags-franja{min-height:260px} .oags-franja__contenido{padding-bottom:28px} } /* La fotografia se acerca un poco a medida que la franja sube por la pantalla. * * Se hace con `animation-timeline: view()`, que liga la animacion al recorrido * del elemento por la ventana. Lo resuelve el compositor: no hay manejador de * scroll, no se lee geometria y no se toca el hilo principal, que es * exactamente lo que hacia falta evitar despues de lo que costo el acordeon. * * Solo anima `transform`, que no rehace la maquetacion ni obliga a repintar. * La escala nunca baja de 1 porque la imagen esta en `object-fit: cover`: por * debajo asomaria el fondo por los bordes. * * Donde el navegador no lo soporta, la imagen se queda quieta y no se pierde * nada. Y si la persona pidio movimiento reducido, tampoco se mueve. */ @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ /* En forma larga y no abreviada: `animation: nombre linear both` deja la duracion en cero, y una animacion ligada al scroll necesita `auto` para tomar su duracion del recorrido. En abreviada no se movia nada. */ .oags-franja__foto{ animation-name:oags-acercar; animation-duration:auto; animation-timing-function:linear; animation-fill-mode:both; /* La linea de tiempo se declara en la franja y se referencia por nombre, en vez de usar `view()` sobre la propia imagen. `view()` toma como referencia el contenedor de scroll mas cercano, y la franja lo es: lleva `overflow:hidden` para redondear las esquinas. La imagen la llena por completo, asi que su recorrido dentro de ella era siempre el mismo y el progreso se quedaba clavado en la mitad. */ animation-timeline:--franja; /* Solo durante la salida. Con `cover` el recorrido empieza antes de que la franja asome, y como esta arriba del todo, al cargar la pagina ya iba por el 69 %: quedaba un acercamiento de tres centesimas que no se veia. Asi arranca quieta y se acerca mientras se sube. */ animation-range:exit 0% exit 100%} @keyframes oags-acercar{ from{transform:scale(1)} to{transform:scale(1.12)}} } } /* Marquilla de color de las tarjetas de boletin. * * Una franja a la izquierda que dice de un vistazo de que tipo es la * publicacion, sin tener que leer la etiqueta. Los colores son los roles del * manual, no tonos elegidos al azar, y viven aqui y no en la plantilla para * que anadir un tipo nuevo sea una linea en un solo archivo. * * El nombre del tipo viaja en `data-categoria`, que es el valor que guarda el * modelo: si alguien renombra la etiqueta que se muestra, el color no se * rompe. */ .boletin-tarjeta{border-left:4px solid var(--marquilla,#CAD3BB)} /* El mismo movimiento que en la portada: la fotografia se acerca un poco al * pasar el raton y el resto de la tarjeta se queda quieta. Se anima solo * `transform`, que no obliga a recalcular la maquetacion; animar la sombra fue * justo lo que se retiro de esta pantalla por costoso. * * `overflow:hidden` ya esta en la tarjeta, asi que la foto crece por dentro y * no se sale del borde redondeado. */ .boletin-tarjeta img{transition:transform .4s ease} .boletin-tarjeta:hover img{transform:scale(1.04)} @media (prefers-reduced-motion:reduce){ .boletin-tarjeta img{transition:none} .boletin-tarjeta:hover img{transform:none} } .boletin-tarjeta[data-categoria="boletin"]{--marquilla:#4C6B19} /* verde profundo */ .boletin-tarjeta[data-categoria="informe"]{--marquilla:#574E01} /* marron verdoso */ .boletin-tarjeta[data-categoria="nota"]{--marquilla:#D6065B} /* granate */ .boletin-tarjeta[data-categoria="infografia"]{--marquilla:#D6C41C} /* amarillo abejorro */ /* Linea bajo el encabezado de cada pantalla. * * Separa el titulo y su descripcion del contenido que viene debajo. Va aqui y * no repetida en cada plantilla para que las cinco vistas se corten a la misma * altura y con el mismo trazo. */ .oags-encabezado{padding-bottom:2rem;margin-bottom:2rem; border-bottom:1px solid #CAD3BB} /* Signo de interrogacion con su explicacion. * * Se abre al pasar el raton y tambien al llegar con el tabulador: un atributo * `title` a secas no aparece con teclado, y en un sitio publico eso deja fuera * a quien no usa raton. * * La explicacion existe siempre en el documento, solo esta oculta, asi que un * lector de pantalla la anuncia por `aria-describedby` sin necesidad de abrirla. * * Se usa `:focus` y no `:focus-visible` para abrirla: `focus-visible` solo * responde a la interaccion real de teclado, y aqui interesa que se abra * tambien al pulsar el signo con el dedo en un telefono, donde no hay raton * que pasar por encima. */ .ayuda{position:relative;display:inline-flex} .ayuda__signo{display:grid;place-items:center;width:16px;height:16px; border:1px solid #CAD3BB;border-radius:999px;background:#FFF; font:700 10px/1 Mulish,system-ui,sans-serif;color:#617048;cursor:pointer} .ayuda__signo:hover,.ayuda__signo:focus-visible{border-color:#4C6B19;color:#4C6B19} .ayuda__texto{position:absolute;left:50%;bottom:calc(100% + 8px); z-index:20;width:15rem;transform:translateX(-50%); padding:10px 12px;border-radius:10px; background:#2F221A;color:#FAF8EE; font:400 12px/1.45 Mulish,system-ui,sans-serif;text-align:left; opacity:0;visibility:hidden;transition:opacity .15s ease} .ayuda:hover .ayuda__texto, .ayuda__signo:focus + .ayuda__texto{opacity:1;visibility:visible} /* Cerca del borde derecho la burbuja se saldria de la pantalla. */ @media (max-width:640px){ .ayuda__texto{width:12rem} }