Este código CSS define a família de fontes "Guardian Headline Full" com vários estilos e pesos. Inclui versões light (300), regular (400), medium (500) e semibold (600), cada uma em estilos normal e itálico. Os arquivos de fonte são fornecidos nos formatos WOFF2, WOFF e TrueType a partir dos recursos web do Guardian.
Este código CSS define várias famílias de fontes para o site do Guardian, especificando diferentes pesos e estilos com seus respectivos formatos de arquivo (WOFF2, WOFF, TTF). Também inclui media queries para design responsivo, ajustando estilos com base no status de script, preferências de movimento do usuário e tamanho de tela. Além disso, define variáveis de cor, propriedades de layout para elementos interativos e estilos específicos para componentes como o cartão de créditos e promoção de filmes, garantindo uma aparência consistente em todos os dispositivos.
O cartão de créditos usa fontes e tamanhos específicos para seus elementos de texto. Links e parágrafos dentro do cartão de créditos são exibidos em inline-block com uma fonte serifada de 24px, peso negrito e altura de linha de 115%, com uma margem inferior de 20px e uma largura máxima que se ajusta ao seu conteúdo. Os parágrafos são definidos em minúsculas com espaçamento normal entre letras.
Um título dentro do cartão de créditos é posicionado absolutamente no centro, usando uma fonte sem serifa de 14px, texto em maiúsculas com espaçamento de 2px entre letras. Outros parágrafos no cartão também usam a mesma fonte sem serifa e tamanho, com alguns tendo estilo em maiúsculas e espaçamento entre letras.
Links no cartão de créditos compartilham as propriedades de fonte serifada, tamanho, peso, altura de linha, margem e largura máxima, e são coloridos de branco sem sublinhado ao passar o mouse. O último link não tem margem inferior. O contêiner do cartão é posicionado absolutamente, centralizado e usa flexbox para alinhar os itens verticalmente.
Um iframe no cartão de créditos tem uma largura de 85% da viewport, uma proporção de 16:9, uma largura máxima de 680px e uma margem inferior de 12px.
O wrapper da galeria interativa tem uma altura mínima e fixa definida para a altura da viewport, um fundo escuro, alinhamento centralizado e margens negativas que se ajustam em tamanhos de tela maiores. Ao conter um elemento fixo, o alinhamento é redefinido.
A galeria interativa em si tem uma largura baseada na viewport, uma largura máxima que muda com o tamanho da tela, posicionamento centralizado, texto branco, exibição flex, uma altura máxima de 60% da viewport, overflow oculto, uma borda e cantos arredondados. Inclui uma sobreposição de gradiente na parte inferior e desativa eventos de ponteiro para links. Figuras e legendas são otimizadas para desempenho.
O contêiner interno da galeria tem uma posição relativa e ajusta sua largura. Quando fixo, cobre toda a viewport com um fundo preto, posicionamento fixo, rolagem habilitada e sem bordas ou cantos arredondados. Elementos de texto dentro do modo fixo têm configurações específicas de preenchimento, largura máxima e cor, e as figuras são dimensionadas para o tamanho total com margens e opacidade ajustadas. Imagens no modo fixo têm uma largura máxima de 980px e são centralizadas.
Este código CSS define estilos para uma galeria interativa. Garante que imagens e vídeos sejam exibidos corretamente com design responsivo, ajustando-se a diferentes tamanhos de tela. Elementos de texto como títulos e legendas têm fontes, tamanhos e cores específicos para consistência. A galeria inclui recursos interativos, como botões para abrir e fechar sobreposições, com efeitos de hover para melhor experiência do usuário. Os vídeos são definidos para cobrir totalmente seus contêineres, e as legendas são estilizadas para serem claras e legíveis. O layout é otimizado para visualizações móveis e desktop, mantendo uma apresentação limpa e envolvente.
O código CSS define estilos para um cabeçalho interativo em tela cheia com um vídeo de fundo e sobreposição de texto. Posiciona elementos para cobrir toda a viewport, oculta certos componentes e ajusta margens e preenchimento para diferentes tamanhos de tela. O texto do cabeçalho é centralizado na parte inferior com um fundo semitransparente, usando fontes e tamanhos específicos que mudam em telas maiores. O título inclui um rótulo "Entrevista" e é dividido em partes com margens ajustadas para alinhamento visual.
Para o cabeçalho da coluna interativa principal, a segunda parte do título tem um tamanho de fonte de 17px, altura de linha de 125%, sem preenchimento, peso de fonte normal, uma largura máxima de 280px e é centralizada. Em telas maiores que 46,25em, o tamanho da fonte aumenta para 20px e a largura máxima para 335px. Nomes dentro desta parte são exibidos em itálico.
A seção standfirst não tem preenchimento, e seus parágrafos são brancos. A seção meta não tem largura máxima, e seus links sociais e botões ficam pretos ao passar o mouse sem sublinhados, com seus ícones também mudando para preto. A funcionalidade de comentários está oculta, e os links de autoria não têm bordas.
Na renderização de aplicativo, a altura do wrapper do cabeçalho é definida para a altura total da viewport. O cartão de capa de vídeo é posicionado absolutamente, cobrindo toda a área com um fundo preto semitransparente e um layout flex para distribuição de conteúdo. O vídeo pôster é escurecido para 50% do brilho. O conteúdo da capa é centralizado com uma descrição que tem margens superior e inferior e uma largura máxima de 80% (ou 400px em telas mais largas). O texto está em uma fonte sem serifa específica, em maiúsculas com espaçamento entre letras, e branco, com títulos em peso normal. O título é centralizado e branco.
Os controles de vídeo incluem um botão de reprodução centralizado com uma borda circular, texto e ícone brancos, que mudam para texto escuro ao passar o mouse. O wrapper do vídeo snap é posicionado relativamente.
Quando a tela tem pelo menos 740 pixels de largura, o wrapper de vídeo não terá margens laterais. O contêiner de vídeo dentro se desvanece suavemente para dentro ou para fora ao longo de meio segundo. Para exibições em aplicativos, tanto o cabeçalho quanto o wrapper de vídeo são definidos para preencher a altura total da tela, adaptando-se às visualizações web e iOS.
Um conjunto de pontos para navegação de página permanece fixo no lado direito, centralizado verticalmente, dispostos em uma coluna com pequenos espaços entre eles. Eles aparecem suavemente e ficam acima de outro conteúdo. Em telas mais largas, sua posição é ajustada para permanecer alinhada com o centro do conteúdo. Cada ponto é um pequeno retângulo arredondado que muda de cor ao passar o mouse ou quando ativo.
Setas de navegação são fixas na parte inferior direita, mas só aparecem em telas maiores. São estilizadas como botões arredondados com um fundo escuro desfocado e mudam de aparência ao passar o mouse. Sua posição também muda com a largura da tela para permanecer centralizada.
Botões interativos para galerias e controles de vídeo clareiam de cor ao passar o mouse, e seu texto e ícones ficam escuros.
Créditos:
Entrevista e cinematografia: David Levene
Editor multimídia: Laurence Topham
Design e desenvolvimento: Harry Fischer e Pip Lev
Editor de imagens: Matt Fidler
Chefe de fotografia: Fiona Shields
"Love+War" estará disponível no Disney+ e National Geographic a partir de 7 de novembro de 2025.
Conteúdo do Iraque 2003-2004:
Reflexão: "Eu era tão jovem e tão ingênua"
A cobertura inclui Iraque e Afeganistão.
Aviso: Algumas imagens podem ser angustiantes para os espectadores.
Imagens em tela cheia:
1. Uma mulher iraquiana procura por seu marido em meio à fumaça de uma fábrica de gás em chamas em Basra, Iraque, maio de 2003. Foto de Lynsey Addario.
2. Soldados americanos feridos sendo transportados de ônibus do hospital de Balad para um voo de evacuação durante a Batalha de Fallujah, 13 de novembro de 2004. Foto de Lynsey Addario/Getty Images.
3. Fuzileiros navais dos EUA carregando um soldado ferido da 173ª Battle Company no Vale de Korengal, Afeganistão, 23 de outubro de 2007. Foto de Lynsey Addario.
4. Noor Nisa, 18 anos, em trabalho de parto com sua mãe na província de Badakhshan, Afeganistão, novembro de 2009. A primeira esposa de seu marido morreu no parto. O bebê estava para nascer, então ele decidiu levá-la ao hospital, a quatro horas de distância de sua vila. Quando o carro que ele pegou emprestado quebrou, eu intervim e os levei até lá, onde Noor deu à luz uma menina.
Fuzileiras navais americanas em equipes de engajamento feminino são mostradas com a suboficial Elena Woods, 24 anos, limpando sua arma após voltar de uma base operacional avançada no Campo Delhi em Helmand, Afeganistão, em 29 de abril de 2010. Essas equipes trabalhavam com a infantaria de fuzileiros navais para se conectar com mulheres afegãs.
A cabo Lisa Gardner verifica os sinais vitais de mulheres afegãs na vila de Lakari durante uma ação médica de extensão em Helmand, sul do Afeganistão, em 3 de maio de 2010. Devido a normas culturais, muitas mulheres em Helmand não podem sair de casa ou consultar médicos homens, então Gardner registrou seus sintomas e passou as informações para um médico para um diagnóstico básico antes de fornecer medicamentos.
Milhares de sírios cruzaram para o Iraque perto da fronteira de Sahela em Dahuk, norte do Iraque, em 21 de agosto de 2013. A Agência da ONU para Refugiados relatou que mais de 30.000 haviam entrado desde a reabertura da fronteira na semana anterior, com cruzamentos diários de três a quatro mil. A maioria eram refugiados curdos escapando da violência, dificuldades econômicas e escassez de itens essenciais como eletricidade, água e comida.
Em Darfur, de 2004 a 2009, o governo foi acusado de matar seu próprio povo.
Meninas chadianas suportam uma tempestade de areia em Bahaï, Chade, cerca de sete quilômetros da fronteira sudanesa, em 18 de agosto de 2004. Muitos refugiados fugiram do Sudão para o Chade enquanto o conflito continuava em Darfur.
Lynsey Addario fotografou rebeldes do Exército de Libertação do Sudão, que controlavam partes de Darfur, em 19 de agosto de 2004.
Soldados do SLA esperam ao lado de seu caminhão atolado na lama em Darfur em 21 de agosto de 2004. Eles estavam boicotando as negociações de paz na Nigéria para protestar contra ataques a civis, alegando 75 mortes em seis aldeias. Desde o início do conflito em fevereiro de 2003, até 50.000 haviam morrido, e mais de um milhão fugiram de suas casas temendo as milícias Janjaweed.
Soldados do SLA passam por um corpo morto de um ataque a civis em Farawyaiah, Darfur, em 24 de agosto de 2004. Dezesseis corpos foram encontrados em ravinas após homens de cinco aldeias terem sido supostamente mortos por Janjaweed apoiados por forças governamentais.
Soldados da União Africana descobrem a aldeia de Tama ainda fumegando mais de uma semana após um ataque de nômades árabes apoiados por forças governamentais ao norte de Nyala em novembro de 2005. A UA tentou patrulhar e investigar, mas os sobreviventes haviam fugido para uma aldeia próxima, bloqueada por nômades que atiravam em veículos que se aproximavam. Centenas de aldeias em Darfur foram queimadas e saqueadas por nômades árabes.
A aldeia de Silea, recentemente bombardeada pelo governo sudanês e atacada por Janjaweed em camelos, cavalos e burros em Darfur Ocidental em 28 de fevereiro de 2008. Os bombardeios foram uma resposta a uma emboscada. Dois meses antes, rebeldes do Movimento Justiça e Igualdade haviam assumido o controle, e a inteligência indicava que estavam vivendo nessas aldeias e as usando como base. Fotografia: Lynsey Addario/Getty Images
Ver imagem em tela cheia: Mulheres sudanesas esperam por ajuda de organizações humanitárias internacionais na aldeia de Selea, fevereiro de 2008. Fotografia: Lynsey Addario
Líbia 2011
‘Dava para ouvir o metal zunir pelos ouvidos’
Aviso: Alguns espectadores podem achar as seguintes fotografias angustiantes
Ver imagem em tela cheia: Líbios protestam contra o coronel Muammar Gaddafi em Benghazi, Líbia, 26 de fevereiro de 2011. Conflitos entre forças de oposição e partidários de Gaddafi estavam ocorrendo em todo o país. Fotografia: Lynsey Addario para The New York Times
Ver imagem em tela cheia: Crianças brincam perto de um carro em chamas em um bairro de Benghazi, Líbia Oriental, 28 de fevereiro de 2011. Confrontos perigosos continuaram entre forças de oposição e pró-Gaddafi. Fotografia: Lynsey Addario para The New York Times
Ver imagem em tela cheia: Soldados da oposição enfrentam tropas lealistas de Gaddafi em Brega, Líbia, 4 de março de 2011. Fotografia: Lynsey Addario/Getty Images
Ver imagem em tela cheia: Tropas da oposição atiram em um retrato de Gaddafi enquanto celebram a retomada da cidade de suas forças, a oeste de Ras Lanuf, 5 de março de 2011. Fotografia: Lynsey Addario/Getty Images
Ver imagem em tela cheia: Tropas da oposição se reúnem e cantam enquanto ataques aéreos do governo atingem o principal ponto de controle perto da refinaria de Ras Lanuf, Líbia Oriental, 11 de março. Fotografia: Lynsey Addario para The New York Times
Ver imagem em tela cheia: Tropas da oposição queimam pneus para cobertura de fumaça durante ataques aéreos enquanto recuam de Ras Lanuf, Líbia Oriental, 11 de março. Fotografia: Lynsey Addario
Ver imagem em tela cheia: Jornalistas, incluindo os fotógrafos do New York Times Tyler Hicks (direita) e Lynsey Addario (extrema esquerda), se protegem durante um bombardeio do governo líbio perto da refinaria de petróleo de Ras Lanuf, 11 de março de 2011. Hicks, Addario e os correspondentes do NYT Stephen Farrell e Anthony Shadid foram dados como desaparecidos após serem pegos atrás das linhas avançadas de Gaddafi. Fotografia: Paul Conroy/Reuters
Ucrânia 2022
‘Parecia muito tenso’
Aviso: Alguns espectadores podem achar as seguintes fotografias angustiantes
Ver imagem em tela cheia: Ucranianos limpam detritos após um ataque de míssil a um edifício residencial no sul de Kiev, 25 de fevereiro de 2022. Tropas russas haviam entrado na cidade, e os residentes se preparavam para uma batalha. Fotografia: Lynsey Addario para The New York Times
Ver imagem em tela cheia: Julia, uma professora e voluntária ucraniana de 29 anos, chora enquanto espera para ser enviada contra as forças russas em Kiev, 26 de fevereiro de 2022. Fotografia: Lynsey Addario para The New York Times
Ver imagem em tela cheia: Famílias ucranianas correm pelos trilhos do trem para embarcar em um trem com destino a Lviv a partir de
