This CSS code defines the “Guardian Headline Full” font family with various weights and styles. It includes light (300), regular (400), medium (500), and semibold (600) versions, each in both normal and italic styles. The font files are provided in WOFF2, WOFF, and TrueType formats from the Guardian’s web assets.This CSS code defines several font families for the Guardian website’s headlines and titlepiece. It specifies different font weights and styles (normal and italic) for the “Guardian Headline Full” family, including light (300), regular (400), bold (700), and black (900) weights. Each font is provided in multiple formats (WOFF2, WOFF, and TrueType) for browser compatibility. Additionally, it defines the “Guardian Titlepiece” font family in bold weight (700) with the same file formats.This CSS code defines multiple font faces for the “Guardian Headline Full” font family, each with different weights and styles (normal and italic). The fonts are sourced from various file formats (WOFF2, WOFF, and TrueType) hosted on the Guardian’s assets server. The weights range from regular (400) to black (900), ensuring the font can be used in different typographical contexts while maintaining consistency across web platforms.This text appears to be CSS code defining font styles and responsive grid layouts for a website, likely The Guardian’s. It specifies font files for different weights and styles, then sets up grid templates that change at various screen widths to rearrange content areas like title, media, and body text. The code adjusts padding, column gaps, and element positioning across different device sizes for optimal display.For interactive grid figures with immersive captions in specific content areas, the caption padding is set to 4 pixels at the top and 0 elsewhere.
In various content sections, elements named “lines” and “meta” within interactive grids are positioned in the grid area from row 2 to 5 and column 1 to 2. The “lines” elements have a height that fits their content and a top margin of 5 pixels, while “meta” elements have an 18-pixel top margin.
On larger screens (min-width: 81.25em), the interactive grids in these sections use a five-column layout with specific widths.
For iOS and Android devices, article headers have customized styles: standfirst text uses a specific font family with medium weight, section kickers display as blocks with capitalized first letters, keylines have increased top padding, byline authors use a bold serif font, image figures adjust their height automatically, and paragraphs following atomic elements have no top margin.
Additionally, font faces for Guardian Headline Full in light and light italic weights are defined with their respective source files and formats.This text defines a custom font family called “Guardian Headline Full” with various styles and weights. It includes regular, medium, semibold, and bold versions, each available in normal and italic styles. The font files are provided in WOFF2, WOFF, and TrueType formats from the Guardian’s website.@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf’) format(‘truetype’);
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf’) format(‘truetype’);
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: ‘Guardian Titlepiece’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf’) format(‘truetype’);
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column–interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column–interactive {
margin-left: 240px;
}
}
.content__main-column–interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column–interactive .element-atom {
max-width: 100%;
}
}
.content__main-column–interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column–interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column–interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column–interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column–interactive .element-immersive {
width: calc(100vw – var(–scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(–half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(–half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column–interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column–interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column–interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column–interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column–interactive p,
.content__main-column–interactive ul {
max-width: 620px;
}
.content__main-column–interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: “”;
}
@media (min-width: 71.25em) {
.content__main-column–interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column–interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column–interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column–interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column–interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role=”inline”].element {
max-width: 620px;
}
}
:root {
–dateline: #606060;
–headerBorder: #dcdcdc;
–captionText: #999;
–captionBackground: hsla(0, 0%, 7%, 0.72);
–feature: #c70000;
–new-pillar-colour: var(–primary-pillar, var(–feature));
}
.content__main-column–interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-ga {
/ Additional styles can be added here if needed /
}The first paragraph in various content sections, such as article bodies, interactive content, comments, and features, will have a top padding of 14 pixels. Additionally, the first letter of these paragraphs will be styled with a specific font, size, and color, appearing as a large, uppercase drop cap.
For paragraphs following a horizontal rule, the top padding is removed.
Captions for showcase elements are set to a static position with a maximum width of 620 pixels.
Immersive elements span the full viewport width, adjusting to a maximum of 978 pixels on screens smaller than 71.24em. Their captions have padding that varies with screen size, from 10 pixels on smaller devices to 20 pixels on medium-sized screens.@media (max-width: 46.24em) {
.element.element–immersive.element-immersive {
margin-left: -10px !important;
margin-right: 0 !important;
left: 0;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.element.element–immersive.element-immersive {
margin-left: -20px !important;
}
.element.element–immersive.element-immersive figcaption {
padding-inline: 20px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name=headline] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(–headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name=meta] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name=standfirst] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name=standfirst] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name=standfirst] li a,
.furniture-wrapper [data-gu-name=standfirst] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(–headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name=standfirst] li a:hover,
.furniture-wrapper [data-gu-name=standfirst] a:hover {
text-decoration-color: var(–new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: 1px solid var(–headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role=inline].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name=meta]:before {
content: “”;
width: 540px;
position: absolute;
top: 0;
background-color: var(–headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name=standfirst] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=standfirst]:before {
content: “”;
width: 1px;
background-color: var(–headerBorder);
height: 100%;
position: absolute;
top: 0;
left: .5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .75fr [standfirst-end meta-end portrait-end];
}
}The CSS code defines styles for a webpage layout, adjusting elements like headlines, meta information, and media based on screen size. Headlines have a maximum width and font size that change on larger screens, while some lines and social elements are hidden or adjusted for different devices. Captions are styled with a background color and positioned absolutely, with a button to toggle visibility. Dark mode support is included with specific color variables for different themes. Media queries ensure the layout adapts to various viewport widths.For Android devices, the new pillar color is set to the dark mode pillar or feature color.
On iOS and Android, the first letter of the first paragraph following specific elements in feature, standard, and comment article containers is styled with the secondary pillar color, defaulting to black.
The article header height is set to zero in these containers on both operating systems.
The furniture wrapper in these containers has padding of 4 pixels on top, 10 pixels on the sides, and no padding at the bottom.
Within the furniture wrapper, content labels use a bold font from the Guardian headline family, display the new pillar color, and are capitalized.
Headlines in the furniture wrapper are 32 pixels in size, bold, have 12 pixels of bottom padding, and are colored dark gray.
Figure elements within the furniture wrapper are also styled accordingly.For Android devices, images in standard and comment articles are positioned relatively with a top margin of 14px, left margin of -10px, and a width equal to the viewport width minus the scrollbar width, while maintaining their aspect ratio.
On iOS and Android, images and their inner elements in feature, standard, and comment articles have a transparent background, a width matching the viewport minus the scrollbar width, and an automatically adjusted height.
The standfirst section in feature, standard, and comment articles on both iOS and Android has top and bottom padding of 4px and 24px respectively, with a right margin of -10px.
Paragraphs within the standfirst use the Guardian Headline or similar serif font family.
Links in the standfirst, including those in lists, are styled with the new pillar color, underlined with an offset of 6px, using the header border color for the underline, and no background image or bottom border.For iOS and Android devices, when hovering over links within the standfirst section of feature, standard, or comment articles, the text decoration color changes to the new pillar color.
Additionally, the meta section in these article types has no margin, and elements like byline, author names, and related links adopt the new pillar color for text.
The meta miscellaneous area has no padding, and any SVG icons within it are unaffected by these changes.For iOS and Android devices, the following styles apply to feature, standard, and comment article containers:
– SVG icons in the meta section use the new pillar color for strokes.
– The caption button in showcase elements is displayed as a flex container, centered with 5px padding, 28px dimensions, and positioned 14px from the right.
– Article body content has 12px horizontal padding.
– Regular image elements (excluding thumbnails and immersive ones) span the viewport width minus 24px and scrollbar width, with auto height and no margin. Their captions have no padding.
– Immersive image elements span the full viewport width minus scrollbar width.
– Quoted blockquotes in prose use the new pillar color for their decorative before element.
– Links in prose sections…For links in article bodies on iOS and Android devices, set their color to the primary pillar color, remove any background image, and add an underline positioned 6 pixels below the text, using the header border color for the underline. When these links are hovered over, change the underline color to the new pillar color.
In dark mode, adjust the furniture wrapper’s background to a dark gray (#1a1a1a) for both iOS and Android. Within this wrapper, set the content labels’ color to the new pillar color, make the headline text use the header border color without a background, and ensure standfirst paragraphs and their links, as well as byline authors and their links, adopt the header border color for text.For iOS and Android devices, the following styles apply to feature, standard, and comment article containers:
– Meta icons use the new pillar color for their stroke.
– Showcase image captions adopt the dateline color.
– Quoted text in article bodies displays in the new pillar color.
– Article content areas, including interactive sections and body elements, have a dark background.
– The first letter following an atom element in article content is styled with a drop cap effect.This CSS code targets the first letter of paragraphs that follow specific elements within various article containers on iOS and Android devices. It applies to different sections like feature articles, standard articles, and comment sections, ensuring consistent styling for drop caps or initial letter formatting across the platform.For Android devices, the first letter of paragraphs in various article containers and sections will be styled with a custom color variable, defaulting to white. On both iOS and Android, comment article standfirst elements have specific padding and margin adjustments. Additionally, all level-two headings in prose are set to a font size of 24 pixels.For iOS devices, the caption button in feature, standard, and comment article containers has a top padding of 6px and 5px on the sides. On Android, it’s 4px all around with top padding.
In dark mode, text and icon colors adjust for better readability, using lighter shades for follow text and standfirst, while links and bylines adopt the dark mode pillar color.
When the furniture wrapper includes a Guardian organization logo, the branding element is always displayed.
Labels and headlines within the furniture wrapper on iOS and Android, as well as standfirst paragraphs, use a medium font weight.
The page background is set to a soft pink (#fff4f2) for weekend essays, which also applies to article sections and sub-meta backgrounds.
Lines are hidden, and the furniture wrapper is positioned relatively. On larger screens, it uses a grid layout with specific row templates.
The article header or title area has a fixed height of 70px, increasing to 80px on wider screens. It includes a decorative book GIF in the bottom right corner, sized at 70x70px, growing to 110x110px on large displays. A horizontal line appears below the content labels on smaller screens, spanning the viewport width minus the scrollbar, but disappears on medium to large screens.For screens wider than 81.25em, adjust the furniture wrapper’s article header and title elements to a height of 125px. Also, set the headline’s top margin to -2px within the same wrapper.
Remove bottom padding from the headline’s inner divs. In the portrait main media headline wrapper, set the height to 100%, position it relatively, hide overflow, and add 24px bottom padding. Ensure h1 and a tags inside have no max-width and display a 2px thick underline with a 6px offset on hover.
Set the line height to 115%, font weight to 500, and font size to 36px for h1, a tags, and byline spans in the headline wrapper. Increase the font size to 50px for screens wider than 71.25em.
Position the standfirst relatively with 4px top padding, removing it for screens wider than 61.25em and setting it to 2px for those above 71.25em.
Display the branding island in the meta container and position the main media relatively, assigning it to the ‘portrait’ grid area for screens wider than 61.25em. Ensure the main media’s direct div is positioned relatively.The furniture wrapper styles the main media elements to display a decorative frame around images and their captions. On smaller screens, the image and caption span nearly the full viewport width with adjusted margins and padding. As the screen size increases, the layout adapts: the frame, image, and caption widths change at breakpoints of 46.25em, 61.25em, 71.25em, and 81.25em, with corresponding adjustments to positioning and spacing. The caption button’s placement also shifts at these breakpoints for optimal alignment. A placeholder div is centered within the media area when no media is present.The CSS code defines styles for a furniture wrapper’s main media section, setting paragraph text to 24px size, bold weight, underlined, with 115% line height and a specific color variable. For interactive content columns on wider screens, it removes left margin and hides a pseudo-element.
Blockquotes within supporting sidebars receive a background color from a variable, defaulting to a light pink. The first letter of the first paragraph is styled with a lighter weight, while drop caps use a headline font at 111px size, uppercase, floated left in a color variable.
Headings (h2) are styled in a dark orange color, 28px size (32px on larger screens), with normal weight and line height, and adjust to medium weight when containing strong text. Figures with iframes get the same background as blockquotes.
For app and mobile platforms, follow buttons are displayed with top margin and 14px font size, while media elements are set to fit their content. In dark mode, the background colors for article sections and weekend essays change to dark gray, and a book image is applied as a background after certain headers.This CSS code defines styles for mobile apps (iOS and Android) on The Guardian’s website. It sets background colors, font weights, and layout rules for different article types and screen sizes. The code also adjusts colors based on user preference for light or dark mode, ensuring proper display across various devices and settings.For iOS and Android devices, the content labels in feature, standard, and comment article containers have a font size of 17px, normal style, bold weight, and 115% line height.
Links within these labels use the new pillar color (defaulting to #c74600) and have no text transformation.
GIF containers and their images in these sections are set to 70px by 70px.
White book GIFs are hidden, while standard book GIFs appear only in dark mode.This CSS code hides certain GIF elements with the class “book-gif” on iOS and Android devices for feature, standard, and comment article containers. Instead, it displays white versions of these GIFs with the class “book-gif-white”.
Additionally, it adds a horizontal line at the bottom of the title and GIF wrapper sections on these devices. The line spans the full viewport width on smaller screens but reduces to half the viewport width on screens larger than 61.25em.For dark mode on iOS and Android devices, the background color behind article titles in feature, standard, and comment articles changes to #606060.
On larger screens (over 61.25em wide), the headline area in portrait-oriented main media sections is assigned to the ‘headline’ grid area for these article types on both iOS and Android.
Headlines and bylines (including author names and links) in feature, standard, and comment articles display with:
– 36px font size
– Normal font style
– Medium font weight (500)
– 115% line height
This styling applies consistently across both iOS and Android platforms for all mentioned article types and elements.For Android devices, the author’s name in comment articles is displayed in red. In dark mode, all author names across different article types on iOS and Android appear in a darker orange. On both iOS and Android, author profile pictures are hidden in all article types. Article headlines have no bottom margin or padding. The byline text is italicized, but the author’s name within it remains normal. The main media element adjusts its height automatically with a 4:5 aspect ratio and a transparent background.For iOS and Android devices, the following styles apply to images and captions in feature, standard, and comment articles:
– The main figure element takes up the full height and has no left margin.
– The inner figure container is positioned at the top-left corner.
– The element container has a transparent background, visible overflow, and no padding.
– Images are styled to be the full viewport width minus 40 pixels, with 20 pixels of left margin and 25 pixels of top margin.
– For images within the element’s inner container, the top margin is reduced to 13 pixels.
– Captions for figures are also styled consistently across these contexts.For all devices, figure captions within the main media container will have an automatic height.
On iOS and Android devices, captions in feature, standard, and comment articles are displayed as blocks with no maximum height, positioned relatively, and use a gray color defined by the –captionText variable.
For screens wider than 46.25em:
– Figures in these containers have no maximum width limit
– A pseudo-element before each figure spans almost the full viewport width with small margins
– Images inside figures take up most of the viewport width with consistent left and top margins
For screens wider than 61.25em:
– The same pseudo-element styling applies to maintain layout consistency across larger displays.For iOS and Android devices, the width of the figure element’s pseudo-element in article containers is set to half the viewport width minus 20 pixels and the scrollbar width.
Images within these figure elements have a width of half the viewport width minus 40 pixels and the scrollbar width, with a left margin of 18 pixels, auto height, no padding, and a top margin of 10 pixels.
On larger screens (min-width: 71.25em), the pseudo-element is positioned 4 pixels higher.
For even larger screens (min-width: 81.25em), the pseudo-element shifts 20 pixels to the left, and images adjust their width to half the viewport width minus 90 pixels and the scrollbar width, with a left margin of 12 pixels, a negative top margin of 10 pixels, and a top padding of 21 pixels.
In dark mode, the pseudo-element uses a white frame image as its background.
For the first image in the figure element, specific styles are applied similarly.For iOS and Android devices, the first image in feature, standard, and comment articles has specific styling:
On smaller screens:
– The image’s width spans the viewport minus 20px and scrollbar width
– It has no left margin and 10px padding
On medium screens (61.25em and up):
– Image width becomes half the viewport minus 30px and scrollbar width
– Adds 5px left margin, auto height, and 21px top padding
– Container height fills available space with 620px max width
– Pseudo-element matches image width and fills container height
On large screens (81.25em and up):
– Image width adjusts to half viewport minus 70px and scrollbar width
– Maintains 5px left margin, auto height, and 21px top padding
– Adds -10px top margin
– Pseudo-element styling continues from medium screensFor iOS and Android devices, the layout and styling of images and captions in feature, standard, and comment articles are adjusted as follows:
On smaller screens, the first image in the main media area is shifted 20 pixels to the left. When the screen width reaches at least 46.25em, the caption button is positioned 45 pixels from the bottom. For wider screens of 61.25em or more, the main media area is set to a portrait grid layout with a maximum width of 620 pixels and automatic height.
Images within these articles are relatively positioned with no top margin. Their inner container is absolutely positioned 15 pixels from the top and 20 pixels from the left, spanning the full viewport width minus 40 pixels, with height adjusting automatically. Images inside fill the container completely, cropping to fit as needed.
The caption button is placed 24 pixels from the right and 20 pixels from the bottom on smaller screens. At 46.25em screen width or larger, the inner container of the image adjusts its positioning accordingly.For Android devices, the inner figure element in feature, standard, and comment articles is set to 680px wide with automatic height, positioned 10px from the top and left edges. The caption button in these articles is placed 25px from the bottom on both iOS and Android.
On screens wider than 61.25em, figures in these articles adjust to half the viewport width minus 20px and the scrollbar width for both iOS and Android.
The standfirst section in these articles has no top margin, with 8px top padding and 10px right padding, and its decorative before element is hidden. Text elements within the standfirst, including paragraphs, links, and list items, use a 20px font size with normal style, medium weight, 115% line height, and no bottom padding.
On wider screens, the standfirst in feature, standard, and comment articles maintains these styles for both iOS and Android.For iOS and Android devices, the standfirst element in feature, standard, and comment article containers is assigned to the grid area named “standfirst.”
On these platforms, the meta element in the same article types has no top padding and positions its published date relatively. A horizontal line appears below the published date, spanning the full viewport width and colored light gray, extending slightly to the left.
On larger screens (over 61.25em wide), the meta element is placed in the “meta” grid area and displayed as a block, with the line beneath the published date shortening to half the viewport width.
For even wider screens (over 81.25em), the miscellaneous meta information loses its left margin.
In dark mode, the line below the published date changes to a darker gray color.
Additionally, on iOS, the meta and keyline elements in feature, standard, and comment articles have a preceding pseudo-element.For iOS and Android devices, the following styles apply:
– Hide meta and keyline elements before furniture wrappers in feature, standard, and comment article containers.
– Remove rich link elements from furniture wrappers in these containers.
– Hide cutout containers in comment headers for all article types.
– Set the background color of article and feature bodies to a weekend essay theme with a top margin.
– Style horizontal rules with specific dimensions, colors, and spacing.
– Apply drop cap styling to the first letter of the first paragraph or after a horizontal rule, using specific fonts, sizes, and colors.
– Make headings with strong or bold text semi-bold.
– In dark mode, adjust horizontal rule colors and link text decoration, and change drop cap colors.
– Ensure the first letter after an atom element is medium weight.
These rules ensure consistent presentation across mobile platforms while adapting to user preferences like dark mode.For iOS and Android devices, the first letter of the first paragraph after specific elements in comment sections or article bodies should have a light font weight and no top padding. Headings (h2) on these devices are styled with a burnt orange color, 28px font size, light weight, and specific margins. On Android, the cutout container is hidden.
In dark mode, certain elements have a gradient background, and the first letter of non-initial paragraphs in comments or article bodies appears in white. Headings in these sections take on a custom orange color.
When scripting is enabled, interactive content and headers start invisible and fade in smoothly once the page has loaded.
“It broke my heart,” said Surangel Whipps, the president of Palau, a small Pacific nation. He was attending the UN General Assembly in New York on September 23 when Donald Trump delivered his first post-re-election speech to the UN—a lengthy and disjointed address.
Whipps expected anger and grandstanding from the U.S. president, but what he heard was shocking. Trump dismissed the climate crisis as a “green scam,” “the greatest con job ever,” and “predictions made by stupid people.” This was an unprecedented assault on science and international cooperation from a leading global figure.
Palau, with its population of nearly 20,000, faces existential threats from rising seas, flooding, and stronger storms. If global temperatures rise above 1.5°C for an extended time, its people could become refugees—a fate they are determined to avoid. They see themselves as the first line of impact; worldwide, climate change could destroy the homes and livelihoods of hundreds of millions within decades.
“Our children need hope and inspiration,” Whipps emphasizes. “They need to see us uniting to tackle these challenges.”
Instead, they were met with a discouraging rant.
The Populist Wave
Whipps’s frustration is shared by vulnerable nations globally. Just as it seemed the world was starting to address the climate crisis, a wave of populism has emerged, reversing or endangering advancements in many democracies.
Trump’s remarks represent the most extreme example of a broader right-wing shift. In the EU, far-right factions are…Some governments have delayed key decisions on emissions targets and are pushing to abandon climate action altogether. In the UK, the leading Reform party openly embraces climate denial. In Argentina, Trump ally Javier Milei has aggressively cut climate policies along with economic measures.
Yet polls show that an overwhelming majority—89% globally—are worried about the climate crisis and want action. There have also been surprising wins for pro-climate leaders: Mark Carney in Canada, Anthony Albanese in Australia, and Claudia Sheinbaum, a climate scientist, in Mexico.
This week, these powerful global forces will collide in the small Amazonian city of Belém. The UN climate summit, COP30, begins on Monday, with a packed agenda for the Brazilian hosts—145 items to be decided over two weeks. Topics range from cutting greenhouse gases and financial aid for poor countries to Indigenous rights, clean energy, and forest protection.
While national disputes and competing interests will play a role, nature is telling its own story. Outside the air-conditioned conference halls, temperatures are rising rapidly. For two years, they have exceeded the relatively safe limit of 1.5°C above pre-industrial levels that nations once vowed to stay below. Evidence of climate breakdown is mounting: Hurricane Melissa recently devastated Jamaica, temperatures have surpassed 50°C in the Middle East, and ocean temperatures are soaring. Scientists warn that the first of several “tipping points”—the bleaching of coral reefs—may already have been reached.
At the heart of COP30 are two key questions: What can the world do to slow down global warming? And can it be done in time to prevent irreversible catastrophe?
‘Belém is the test’
Brazil’s presidency of COP30—the 30th Conference of the Parties under the UN climate convention since its signing at the 1992 Rio Earth Summit—is focused on the developing world. Brazil’s top priority is to maintain unity amid deep global divisions.
Some call this the most important COP since the Paris Agreement was signed a decade ago. In Paris, countries set national targets to curb greenhouse gas emissions, but those pledges were not enough to meet the 1.5°C limit set by the treaty. Six years later, at COP26 in Glasgow, a new round of pledges reduced projected warming—but only to around 2.7°C. Now, nations must update their targets again. With temperatures rising faster than expected, these updates must be urgent and ambitious.
“The Paris Agreement is our mandate; Belém is the test,” says Ban Ki-moon, who was UN Secretary-General during the Paris summit. “In a divided world, the Paris Agreement remains the one pact that shows humanity can unite—but it needs action, not words, to revive it. Succeed, and the agreement becomes a living plan that protects people and strengthens economies. Fail, and we risk losing both its promise and the people it was meant to protect.”
To help smooth negotiations, world leaders were invited to Belém this week, meeting on Thursday and Friday to motivate their teams before the official start. Trump was not among them, nor was Vladimir Putin, whose invasion of Ukraine funneled massive profits to the fossil fuel industry, which then invested in more fossil fuels.
China’s Xi Jinping did not attend in person but joined virtually in preparatory meetings, pledging further action to shift China toward a green economy. India has also sent encouraging signals: although Prime Minister Narendra Modi skipped the summit, he visited Brasília.In July, the tense conclusion of last year’s COP—where India’s negotiators rejected what they saw as an insufficient $300 billion pledge in climate finance from wealthy nations—might be avoided this time. However, Saudi Arabia, Russia, and a few allies have a track record of obstructing COPs, and Argentina could join them. Disputes and potential sabotage tactics are expected.
A significant ’emissions gap’ remains. The most effective way for climate-conscious countries to counter this threat is by developing robust national plans to reduce greenhouse gas emissions. Yet, aside from a few exceptions, this hasn’t occurred.
Nationally Determined Contributions (NDCs) form the foundation of the Paris Agreement, outlining how and how quickly countries will limit or cut carbon emissions to meet the goal of keeping global warming to 1.5°C above pre-industrial levels. As of now, fewer than 90 countries have submitted their NDCs, even though the official deadline was in February. China and the EU have only hinted at their plans without finalizing them.
According to UN estimates, the current NDCs would achieve just one-sixth of the emissions reductions needed to stay within the 1.5°C target. Brazil has been hesitant to address the shortcomings of these NDCs, with its presidency team arguing they are not a formal part of the COP30 mandate since individual nations are responsible for drafting them. Only after protests was space made on the agenda to discuss NDCs, and it’s still uncertain if there will be a concrete outcome to bridge the vast gap between pledged actions and what’s required.
Brazil emphasizes focusing on “implementation” over negotiations in closed rooms. In some areas and sectors, climate action is advancing in ways that were hard to imagine a decade ago. Renewables, led by solar and wind, made up over 90% of new global power capacity last year, with solar now being the cheapest electricity source ever. Global clean energy investment is projected to hit $2.2 trillion this year, roughly double that of fossil fuels. Last year, one in five new cars sold worldwide was electric, and clean energy now employs more people than fossil fuels.
This real-world progress makes climate action tangible for people, moving it from negotiation tables and corporate offices into everyday life, as UN climate chief Simon Stiell notes.
Developing countries will assess this COP based on how well it supports their key objectives: financial aid for adapting to climate impacts and investment in transitioning to clean energy. “We need a fair deal,” says Mohamed Adow of Power Shift Africa. “This isn’t charity—it’s investing in a stable, livable planet. The Global North must share clean energy technology with the Global South.”
Finance was a central issue at last year’s COP, but the agreement left many poor nations dissatisfied. COP29 set a goal of $1.3 trillion annually flowing to developing countries by 2035, but wealthy nations committed only $300 billion, relying on the private sector, carbon markets, and philanthropy for the rest. Without the U.S., even that modest $300 billion pledge seems harder to fulfill.
Cooperation among Global South countries, including China and middle-income nations already pursuing greener paths, will also be crucial. Arunabha Ghosh, chief executive…An expert from the Indian think tank Council on Energy, Environment and Water, who also serves as a special envoy to the Cop30 presidency, remarked: “We are all under collective siege, and when you’re in that position, sticking together increases your chances of surviving both the real and metaphorical hurricanes heading our way.”
People are seen observing cruise ships on the Guama River, which will accommodate delegations during the Cop30 climate summit.
World leaders arriving over the Amazon rainforest, where vast green expanses are marred by extensive logging, ranching, and small-scale farming, are well aware of Brazil’s primary demand: to commit to the Tropical Forests Forever Facility (TFFF). For the host country, this fund represents the most significant goal of Cop30, aimed at preserving existing forests.
Brazil aims to secure initial pledges of $25 billion for the TFFF, which it hopes will attract an additional $100 billion from global financial markets. The funds would support forested regions by rewarding efforts to reduce deforestation and financing biodiversity conservation.
However, the hosts appear less at ease addressing the core cause of the climate crisis: fossil fuels. At Cop28 in Dubai in 2023, a landmark resolution was adopted, calling for a global transition away from fossil fuels. It’s surprising that this was the first direct mention of the issue in 30 years of climate talks, previously blocked by oil-producing nations and the need for consensus within the UN.
After the agreement, other petrostates, led by Saudi Arabia, began to undermine it. At Cop29 in Azerbaijan, another oil and gas-dependent economy, attempts to reaffirm the resolution were obstructed.
Advocates hope to revive the debate this year, though around 50 countries are expected to resist discussing it.
Brazil is among the top 10 global exporters of oil and gas and is exploring new fields, including some off the Amazon coast. President Luiz Inácio Lula da Silva has defended the right of poorer nations to exploit their resources, arguing that wealthy countries, which have benefited from fossil fuels for two centuries and caused the crisis, should be the ones to halt their use.
Over the next two weeks, Brazil’s role is to facilitate this discussion, and its handling of the issue will be critical.
Leo Roberts of the E3G think tank stated, “It undermines Cop’s credibility if it can’t address fossil fuels.”
Civil society groups insist that any discussion on fossil fuels must occur within the framework of a global “just transition,” ensuring that workers, the poor, and vulnerable populations are not left behind or exploited in the shift to clean energy.
UN Secretary-General António Guterres highlighted this issue in July, noting, “The critical minerals essential for the clean energy revolution are often found in historically exploited countries. Today, we see a repeat of this pattern: communities mistreated, rights violated, environments destroyed, and nations trapped at the bottom of value chains while others profit. This extractive model deepens inequality and harm, and it must end.”
China dominates the global supply chain for critical minerals, while the US aims to expand its share. Historically, neither has been enthusiastic about UN regulations affecting their markets, but Lula has consistently championed workers’ rights.
With inevitable disputes over the agenda, a lack of trust between rich and poor nations, and potential threats from the US and its allies, Brazil may consider it a success if Cop30 proceeds without major disruptions. Democracy in Brazil, as in many countries grappling with populist politics and economic challenges, remains fragile.Keeping things together is already a challenge. Yet, as Meena Raman, head of programmes at the Third World Network, points out, the poor and vulnerable worldwide require and merit far greater support. Vague assurances of future improvements won’t protect them—they need immediate action, funding now, and a concrete strategy to stay as close as possible to the 1.5°C target.
She cautions that simply calling for the preservation of multilateralism is no longer enough. Instead, we must actively work to save the planet and shield the world’s most vulnerable. What’s essential is decisive, responsible action that puts justice, equity, and survival first.
Frequently Asked Questions
Of course Here is a list of FAQs about what COP30 can realistically accomplish framed in a natural tone with direct answers
BeginnerLevel Questions
1 What is COP30 anyway
COP30 is the 30th annual UN Conference of the Parties on climate change where nearly every country in the world meets to negotiate global action Its scheduled for 2025 in Belém Brazil
2 Whats the main goal of this meeting
The primary goal is for countries to submit new more ambitious national plans to cut greenhouse gas emissions as required by the Paris Agreement
3 With so much arguing can it really achieve anything
Yes but its helpful to think of it as a marathon not a sprint While perfect agreements are rare these conferences create essential pressure set global norms and often lead to smaller important deals on specific issues like funding or protecting forests
4 Whats a realistic outcome for the average person
A realistic outcome is a clear signal that the world is still committed to tackling climate change which encourages businesses and local governments to invest in clean energy and prepares communities for future climate impacts
Advanced Detailed Questions
5 What are the biggest hurdles COP30 faces
The main hurdles are
Funding Wealthy nations have yet to fully deliver on their promise to provide 100 billion a year to help developing nations
Equity Disagreements persist on which countries should cut emissions most drastically and who should pay for the damage already caused by climate change
Conflicting Interests Fossil fuelproducing nations and rapidly industrializing economies often have different priorities than small island nations or developed countries
6 What does phasing out fossil fuels mean and is that a realistic goal for COP30
Phasing out means systematically reducing and eventually stopping the use of coal oil and gas While a full global phaseout agreement is unlikely at COP30 due to strong opposition a more realistic goal is a stronger agreement to phase down fossil fuels and triple the worlds renewable energy capacity
7 How important is the loss and damage fund and what needs to happen with it
Its critically important especially for vulnerable countries
