For iOS and Android, the article content no longer has scrollable overflow, and horizontal overflow is clipped. On Android, the progress bar wrapper is positioned 58px from the top.
The progress bar wrapper (class `svelte-6atxfw`) sticks to the top of the page, starting 1px below the top. It spans the full width of the viewport, with margins of -24px on top and bottom and -10px on the sides, and a 14px bottom margin. It starts invisible (opacity 0) and fades in over 0.5 seconds. Its z-index is 25.
At screen widths of 30em and above, the side margins change to -21px. At 41.25em, the wrapper width becomes 620px. At 46.25em, it becomes 740px. At 61.25em, it becomes 980px. At 71.25em, it becomes 1140px, and the left margin changes to -180px. At 81.25em, it becomes 1300px, with a left margin of -260px.
The progress bar itself (class `svelte-6atxfw`) is 6px tall, starts at 0 width, and uses the primary pillar color as its background. When the wrapper has the `active` class, it becomes fully visible.
The following font faces are defined for "Guardian Headline Full" with different weights and styles, all sourced from the Guardian's asset server:
- Light (300), normal style
- Light Italic (300), italic style
- Regular (400), normal style
- Regular Italic (400), italic style
- Medium (500), normal style
- Medium Italic (500), italic style