Este código CSS define la familia tipográfica "Guardian Headline Full" con varios estilos y pesos. Incluye versiones ligera (300), normal (400), media (500) y seminegra (600), cada una en estilos normal y cursiva. Los archivos de fuente se proporcionan en formatos WOFF2, WOFF y TrueType desde los recursos web del Guardian.
Este código CSS define varias familias tipográficas para el sitio web del Guardian, especificando diferentes pesos y estilos con sus respectivos formatos de archivo (WOFF2, WOFF, TTF). También incluye consultas de medios para diseño responsive, ajustando estilos según el estado de scripting, las preferencias de movimiento del usuario y el tamaño de pantalla. Además, establece variables de color, propiedades de diseño para elementos interactivos y estilos específicos para componentes como la tarjeta de créditos y la promoción de cine, garantizando una apariencia consistente en todos los dispositivos.
La tarjeta de créditos utiliza fuentes y tamaños específicos para sus elementos de texto. Los enlaces y párrafos dentro de la tarjeta de créditos se muestran en inline-block con una fuente serif de 24px, peso negrita y 115% de altura de línea, con un margen inferior de 20px y un ancho máximo que se ajusta a su contenido. Los párrafos se establecen en minúsculas con espaciado de letras normal.
Un encabezado dentro de la tarjeta de créditos se posiciona absolutamente en el centro, usando una fuente sans-serif de 14px, texto en mayúsculas con 2px de espaciado de letras. Otros párrafos en la tarjeta también usan la misma fuente y tamaño sans-serif, algunos con estilo en mayúsculas y espaciado de letras.
Los enlaces en la tarjeta de créditos comparten la fuente serif, tamaño, peso, altura de línea, margen y propiedades de ancho máximo, y son de color blanco sin subrayado al pasar el cursor. El último enlace no tiene margen inferior. El contenedor de la tarjeta está posicionado absolutamente, centrado y usa flexbox para alinear elementos verticalmente.
Un iframe en la tarjeta de créditos tiene un ancho del 85% del viewport, una relación de aspecto 16:9, un ancho máximo de 680px y un margen inferior de 12px.
El contenedor de la galería interactiva tiene una altura mínima y fija establecida en la altura del viewport, fondo oscuro, alineación centrada y márgenes negativos que se ajustan en tamaños de pantalla grandes. Cuando contiene un elemento fijo, la alineación se restablece.
La galería interactiva en sí tiene un ancho basado en el viewport, un ancho máximo que cambia con el tamaño de pantalla, posicionamiento centrado, texto blanco, visualización flex, una altura máxima del 60% del viewport, desbordamiento oculto, borde y esquinas redondeadas. Incluye una superposición de degradado en la parte inferior y desactiva eventos de puntero para enlaces. Las figuras y leyendas están optimizadas para el rendimiento.
El contenedor interno de la galería tiene una posición relativa y ajusta su ancho. Cuando está fijo, cubre todo el viewport con fondo negro, posicionamiento fijo, desplazamiento habilitado y sin bordes ni esquinas redondeadas. Los elementos de texto en modo fijo tienen configuraciones específicas de padding, ancho máximo y color, y las figuras se escalan a tamaño completo con márgenes y opacidad ajustados. Las imágenes en modo fijo tienen un ancho máximo de 980px y están centradas.
Este código CSS define estilos para una galería interactiva. Garantiza que imágenes y videos se muestren correctamente con diseño responsive, adaptándose a diferentes tamaños de pantalla. Elementos de texto como encabezados y leyendas tienen fuentes, tamaños y colores específicos para consistencia. La galería incluye funciones interactivas como botones para abrir y cerrar superposiciones, con efectos hover para mejor experiencia de usuario. Los videos se configuran para cubrir completamente sus contenedores, y las leyendas tienen estilo para ser claras y legibles. El diseño está optimizado para vistas móviles y de escritorio, manteniendo una presentación limpia y atractiva.
El código CSS define estilos para un encabezado interactivo a pantalla completa con video de fondo y superposición de texto. Posiciona elementos para cubrir todo el viewport, oculta ciertos componentes y ajusta márgenes y padding para diferentes tamaños de pantalla. El texto del encabezado está centrado en la parte inferior con fondo semitransparente, usando fuentes y tamaños específicos que cambian en pantallas más grandes. El titular incluye una etiqueta "Entrevista" y se divide en partes con márgenes ajustados para alineación visual.
Para el encabezado de la columna interactiva principal, la segunda parte del titular tiene un tamaño de fuente de 17px, 125% de altura de línea, sin padding, peso de fuente normal, un ancho máximo de 280px y está centrado. En pantallas más anchas de 46.25em, el tamaño de fuente aumenta a 20px y el ancho máximo a 335px. Los nombres dentro de esta parte se muestran en cursiva.
La sección standfirst no tiene padding, y sus párrafos son blancos. La sección meta no tiene ancho máximo, y sus enlaces sociales y botones se vuelven negros al pasar el cursor sin subrayados, con sus iconos también cambiando a negro. La funcionalidad de comentarios está oculta, y los enlaces de autoría no tienen bordes.
En renderizado de aplicación, la altura del contenedor del encabezado se establece a la altura completa del viewport. La tarjeta de video cover está posicionada absolutamente, cubriendo toda el área con fondo negro semitransparente y diseño flex para distribución de contenido. El video poster se atenúa al 50% de brillo. El contenido de cover está centrado con una descripción que tiene márgenes superior e inferior y un ancho máximo del 80% (o 400px en pantallas más anchas). El texto está en una fuente sans-serif específica, mayúsculas con espaciado de letras y blanco, con encabezados en peso normal. El título está centrado y es blanco.
Los controles de video incluyen un botón de reproducción centrado con borde circular, texto e icono blancos, que cambia a texto oscuro al pasar el cursor. El contenedor de video snap está posicionado relativamente.
Cuando la pantalla tiene al menos 740 píxeles de ancho, el contenedor de video no tendrá márgenes laterales. El contenedor de video interno se desvanece suavemente en medio segundo. Para pantallas de aplicación, tanto el encabezado como el contenedor de video se establecen para llenar la altura completa de pantalla, adaptándose a vistas web y iOS.
Un conjunto de puntos para navegación de página permanece fijo en el lado derecho, centrado verticalmente, organizado en columna con pequeños espacios entre ellos. Aparecen suavemente y se sitúan sobre otro contenido. En pantallas más anchas, su posición se ajusta para mantenerse alineada con el centro del contenido. Cada punto es un pequeño rectángulo redondeado que cambia de color al pasar el cursor o estar activo.
Las flechas de navegación están fijas en la parte inferior derecha pero solo se muestran en pantallas grandes. Tienen estilo de botones redondeados con fondo oscuro difuminado y cambian de apariencia al pasar el cursor. Su posición también cambia con el ancho de pantalla para permanecer centradas.
Los botones interactivos para galerías y controles de video se aclaran de color al pasar el cursor, y su texto e iconos se vuelven oscuros.
**Créditos:**
Entrevista y cinematografía: David Levene
Editor multimedia: Laurence Topham
Diseño y desarrollo: Harry Fischer y Pip Lev
Editor de fotografía: Matt Fidler
Jefa de fotografía: Fiona Shields
"Love+War" estará disponible en Disney+ y National Geographic a partir del 7 de noviembre de 2025.
**Contenido de Irak 2003-2004:**
Reflexión: "Era muy joven e ingenua"
La cobertura incluye Irak y Afganistán.
**Advertencia:** Algunas imágenes pueden resultar angustiosas para los espectadores.
**Imágenes a pantalla completa:**
1. Una mujer iraquí busca a su esposo entre el humo de una fábrica de gas en llamas en Basora, Irak, mayo de 2003. Foto de Lynsey Addario.
2. Soldados estadounidenses heridos siendo transportados en autobús desde el hospital de Balad a un vuelo de evacuación durante la Batalla de Faluya, 13 de noviembre de 2004. Foto de Lynsey Addario/Getty Images.
3. Marines estadounidenses cargando a un soldado herido de la 173ª Battle Company en el valle de Korengal, Afganistán, 23 de octubre de 2007. Foto de Lynsey Addario.
4. Noor Nisa, de 18 años, de parto con su madre en la provincia de Badakhshan, Afganistán, noviembre de 2009. La primera esposa de su esposo murió en el parto. El bebé estaba por nacer, así que él decidió llevarla al hospital, a cuatro horas de su pueblo. Cuando el auto que pidió prestado falló, yo intervine y los llevé allí, donde Noor dio a luz a una niña.
Se muestran equipos de interacción femenina de marines estadounidenses con la suboficial HM2 Elena Woods, de 24 años, limpiando su arma después de regresar de una base de operaciones avanzada en Camp Delhi en Helmand, Afganistán, el 29 de abril de 2010. Estos equipos trabajaban con infantería de marina para conectar con mujeres afganas.
La cabo Lisa Gardner verifica los signos vitales de mujeres afganas en la aldea de Lakari durante una atención médica móvil en Helmand, sur de Afganistán, el 3 de mayo de 2010. Debido a normas culturales, muchas mujeres en Helmand no pueden salir de casa ni ver médicos hombres, así que Gardner registraba sus síntomas y pasaba la información a un médico para un diagnóstico básico antes de proporcionar medicación.
Miles de sirios cruzaron a Irak cerca de la frontera de Sahela en Dahuk, norte de Irak, el 21 de agosto de 2013. La Agencia de la ONU para los Refugiados reportó más de 30.000 entradas desde que la frontera reabrió la semana anterior, con cruces diarios de tres a cuatro mil. La mayoría eran refugiados kurdos escapando de violencia, dificultades económicas y escasez de esenciales como electricidad, agua y comida.
En Darfur de 2004 a 2009, el gobierno fue acusado de matar a su propia gente.
Niñas chadianas soportan una tormenta de arena en Bahaï, Chad, a unos siete kilómetros de la frontera sudanesa, el 18 de agosto de 2004. Muchos refugiados huyeron de Sudán a Chad mientras continuaba el conflicto en Darfur.
Lynsey Addario fotografió a rebeldes del Ejército de Liberación Sudanés, que controlaban partes de Darfur, el 19 de agosto de 2004.
Soldados del SLA esperan junto a su camión atascado en el barro en Darfur el 21 de agosto de 2004. Boicoteaban conversaciones de paz en Nigeria para protestar por ataques a civiles, alegando 75 muertes en seis aldeas. Desde que el conflicto comenzó en febrero de 2003, hasta 50.000 habían muerto, y más de un millón huyó de sus hogares temiendo a las milicias Janjaweed.
Soldados del SLA pasan junto a un cuerpo sin vida de un ataque a civiles en Farawyaiah, Darfur, el 24 de agosto de 2004. Se encontraron dieciséis cuerpos en barrancos después de que hombres de cinco aldeas fueran supuestamente asesinados por Janjaweed apoyados por fuerzas gubernamentales.
Soldados de la Unión Africana descubren la aldea de Tama aún humeante más de una semana después de un ataque de nómadas árabes respaldados por fuerzas gubernamentales al norte de Nyala en noviembre de 2005. La UA intentaba patrullar e investigar, pero los supervivientes habían huido a una aldea cercana, bloqueada por nómadas que disparaban a vehículos que se acercaban. Cientos de aldeas en Darfur fueron quemadas y saqueadas por nómadas árabes.
La aldea de Silea, recientemente bombardeada por el gobierno sudanés y atacada por Janjaweed en camellos, caballos y burros en Darfur Occidental el 28 de febrero de 2008. Los bombardeos fueron una respuesta a una emboscada. Dos meses antes, rebeldes del Movimiento Justicia e Igualdad habían tomado el control, y la inteligencia indicaba que vivían en estas aldeas y las usaban como base. Fotografía: Lynsey Addario/Getty Images
Ver imagen a pantalla completa: Mujeres sudanesas esperan ayuda de organizaciones humanitarias internacionales en la aldea de Selea, febrero de 2008. Fotografía: Lynsey Addario
Libia 2011
"Podías oír el metal silbar junto a tus oídos"
Advertencia: Algunos espectadores pueden encontrar las siguientes fotografías angustiosas
Ver imagen a pantalla completa: Libios protestan contra el coronel Muammar Gaddafi en Bengasi, Libia, 26 de febrero de 2011. Enfrentamientos entre fuerzas opositoras y leales a Gaddafi continuaban por todo el país. Fotografía: Lynsey Addario para The New York Times
Ver imagen a pantalla completa: Niños juegan cerca de un auto en llamas en un vecindario de Bengasi, Libia Oriental, 28 de febrero de 2011. Continuaban peligrosos enfrentamientos entre oposición y fuerzas pro-Gaddafi. Fotografía: Lynsey Addario para The New York Times
Ver imagen a pantalla completa: Soldados opositores enfrentan a tropas leales a Gaddafi en Brega, Libia, 4 de marzo de 2011. Fotografía: Lynsey Addario/Getty Images
Ver imagen a pantalla completa: Tropas opositoras disparan a un retrato de Gaddafi mientras celebran retomar la ciudad de sus fuerzas, al oeste de Ras Lanuf, 5 de marzo de 2011. Fotografía: Lynsey Addario/Getty Images
Ver imagen a pantalla completa: Tropas opositoras se congregan y corean mientras ataques aéreos gubernamentales golpean el puesto de control principal cerca de la refinería de Ras Lanuf, Libia Oriental, 11 de marzo. Fotografía: Lynsey Addario para The New York Times
Ver imagen a pantalla completa: Tropas opositoras queman neumáticos para cubierta de humo durante ataques aéreos mientras se retiran de Ras Lanuf, Libia Oriental, 11 de marzo. Fotografía: Lynsey Addario
Ver imagen a pantalla completa: Periodistas, incluidos los fotógrafos de The New York Times Tyler Hicks (derecha) y Lynsey Addario (extrema izquierda), se cubren durante un bombardeo del gobierno libio cerca de la refinería de petróleo de Ras Lanuf, 11 de marzo de 2011. Hicks, Addario y los corresponsales del NYT Stephen Farrell y Anthony Shadid fueron reportados desaparecidos tras quedar atrapados tras las líneas avanzadas de Gaddafi. Fotografía: Paul Conroy/Reuters
Ucrania 2022
"Se sentía muy tenso"
Advertencia: Algunos espectadores pueden encontrar las siguientes fotografías angustiosas
Ver imagen a pantalla completa: Ucranianos limpian escombros después de un ataque con misil a un edificio residencial en el sur de Kyiv, 25 de febrero de 2022. Tropas rusas habían entrado en la ciudad y los residentes se preparaban para una batalla. Fotografía: Lynsey Addario para The New York Times
Ver imagen a pantalla completa: Julia, una maestra y voluntaria ucraniana de 29 años, llora mientras espera ser desplegada contra fuerzas rusas en Kyiv, 26 de febrero de 2022. Fotografía: Lynsey Addario para The New York Times
Ver imagen a pantalla completa: Familias ucranianas corren a través de vías de tren para abordar un tren con dirección oeste desde Kyiv a Lviv en la estación principal, 4 de marzo de 2022. Las tensiones eran altas mientras los ucranianos se preparaban para el combate. Fotografía: Lynsey Addario para The New York Times
Ver imagen a pantalla completa: Un soldado ucraniano corre para asistir a una familia mientras otro voluntario yace herido después de un ataque de mortero cercano en Irpin, 6 de marzo de 2022. Civiles huían mientras soldados defendían el acceso a Kyiv. Fotografía: Lynsey Addario/Getty Images
Ver
