Dyma'r testun wedi'i gyfieithu i'r Gymraeg heb unrhyw newidiadau, ychwanegiadau, neu awgrymiadau amgen:
Mae testun paragraff yn defnyddio'r ffont GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, neu serif. Mae wedi'i osod ar 0.9375rem, gydag uchder llinell o 1.4, pwysau arferol, ac arddull arferol. Trwch addurno testun yw 2px.
Mae Pennawd 2 yn defnyddio'r ffont GH Guardian Headline, Guardian Egyptian Web, Georgia, neu serif. Mae wedi'i osod ar 1.5rem, gydag uchder llinell o 1.15, pwysau trwm, ac arddull arferol. Trwch addurno testun yw 3px.
Mae'r dosbarth "src-headline-medium-17" yn defnyddio'r ffont GH Guardian Headline, Guardian Egyptian Web, Georgia, neu serif. Mae wedi'i osod ar 1.0625rem, gydag uchder llinell o 1.15, pwysau canolig (500), ac arddull arferol. Trwch addurno testun yw 2px.
Mae'r dosbarth "src-text-sans-14" yn defnyddio'r ffont GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, neu sans-serif. Mae wedi'i osod ar 0.875rem, gydag uchder llinell o 1.3, pwysau arferol, ac arddull arferol. Trwch addurno testun yw 2px.
Mae'r dosbarth "src-text-sans-bold-17" yn defnyddio'r ffont GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, neu sans-serif. Mae wedi'i osod ar 1.0625rem, gydag uchder llinell o 1.3, pwysau trwm (700), ac arddull arferol. Trwch addurno testun yw 2px.
Mae'r eiddo personol "--src-brand-400" wedi'i osod i #052962.
Pan fydd sgriptio wedi'i alluogi, mae'r erthygl gyda'r dosbarth "content--interactive" a'i div plentyn, yn ogystal ag elfennau gyda'r dosbarth "article", wedi'u cuddio i ddechrau gyda didreiddedd o 0 a gorlif cudd. Unwaith y bydd y dudalen wedi llwytho (a nodir gan y dosbarth "interactive-loaded"), mae'r elfennau hyn yn dod yn gwbl weladwy gyda thrawsnewidiad llyfn o 1 eiliad, ac mae eu gorlif wedi'i osod i "unset".
Mae'r ffont "Guardian Headline Full" wedi'i lwytho mewn sawl arddull. Ar gyfer y pwysau ysgafn (300) mewn arddull arferol, mae'r ffeiliau ffont yn dod o asedau'r Guardian. Mae'r un peth yn berthnasol ar gyfer yr italig ysgafn, arferol (400) arferol, italig arferol, canolig (500) arferol, ac arddulliau italig canolig. Mae pob un yn defnyddio'r fformatau woff2, woff, a truetype priodol.
@font-face { font-family: Guardian Headline Full; src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype"); font-weight: 500; font-style: italic; }
@font-face { font-family: Guardian Headline Full; src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff2) format("woff2"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff) format("woff"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.ttf) format("truetype"); font-weight: 600; font-style: normal; }
@font-face { font-family: Guardian Headline Full; src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.woff2) format("woff2"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.woff) format("woff"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf) format("truetype"); font-weight: 600; font-style: italic; }
@font-face { font-family: Guardian Headline Full; src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype"); font-weight: 700; font-style: normal; }
@font-face { font-family: Guardian Headline Full; src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype"); font-weight: 700; font-style: italic; }
@font-face { font-family: Guardian Headline Full; src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"), url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype"); font-weight: 900; font-style: italic; }
@font-face { font-family: Guardian Titlepiece; src: url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"), url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"), url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.ttf) format("truetype"); font-weight: 700; font-style: normal; }
:root:root [data-gu-name="media"], :root:root [data-gu-name="title"], :root:root [data-gu-name="headline"], :root:root [data-gu-name="standfirst"], :root:root [data-gu-name="lines"], :root:root [data-gu-name="meta"], :root:root [data-link-name="article section"] { display: none; }
:root:root article { --standfirst-text: #adc8f4; --byline: #adc8f4; --article-background: #224a8a; --article-text: #1a1a1a; --article-link-text: #ffffff; --textblock-text: #adc8f4; --article-border: #0077b6; --straight-lines: #224a8a; --share-button: #adc8f4; --share-button-border: #a; }Dyma'r testun wedi'i ailysgrifennu mewn Saesneg rhugl, naturiol:
```css
dc8f4}:root:root article figure.element-atom {
margin: 0;
}
:root:root .back-button {
border: 1px solid lightgray;
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 17px;
padding: 6px 18px;
border-radius: 40px;
width: fit-content;
display: flex;
align-items: center;
gap: 6px;
}
html.no-scroll {
overflow: hidden;
}
h2 {
color: var(--src-brand-400);
}
a {
border-bottom: none !important;
text-decoration: none;
}
img {
max-width: 100%;
max-height: 100%;
}
article {
position: relative;
}
/*
* Yn darparu'r cymysgedd `mq` o sass-mq gyda thorbwyntiau Guardian wedi'u gosod ymlaen llaw.
* Defnyddiwch ef fel hyn:
*
* `@include mq(leftCol) ...`
*
* Torbwyntiau sydd ar gael:
* - desktop: 61.25em
* - leftCol: 71.25em
* - mobile: 20em
* - mobileLandscape: 30em
* - mobileMedium: 23.4375em
* - phablet: 41.25em
* - tablet: 46.25em
* - wide: 81.25em
*/
/*
* Mae'r ffeil hon wedi'i chynhyrchu'n awtomatig gan src/source/generate/breakpoints.js
*/
/*
* Mae'r ffeil hon wedi'i chynhyrchu'n awtomatig gan src/source/generate/typography.js
*/
/
* Pentwr ffont Data
*
* @group typography
*/
/
* Pentwr ffont Serif
*
* @group typography
*/
/
* Pentwr ffont Pennawd
*
* @group typography
*/
/
* Pentwr ffont testun Sans serif
*
* @group typography
*/
/
* Pentwr ffont pennawd Sans serif
*
* @group typography
*/
/
* Gosodiadau graddfa ffont diofyn
* Gweler font-scale.html a font-scale.png am enghreifftiau gweledol
*
* @group typography
*/
/
* Cael pob lefel o ffont o'r raddfa ffont
*
* @param {String} $name - Enw'r matrics graddfa ffont (e.e., headline)
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale(header);
*
* @requires {variable} $font-scale
*
* @return {Map}
*
* @group typography
*/
/
* Cael gwybodaeth ar gyfer lefel benodol o raddfa ffont
*
* @param {String} $name - Enw'r raddfa ffont yn y matrics (e.e., headline)
* @param {Number} $level - Lefel yn y matrics
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale-level(header, 1);
*
* @requires {variable} $font-scale
* @requires {function} get-scale
*
* @return {Map}
*
* @group typography
*/
/
* Cael maint ffont ar gyfer lefel ym matrics y raddfa ffont
*
* @param {String} $name - Enw'r raddfa ffont yn y matrics (e.e., headline)
* @param {Number} $level - Lefel yn y matrics
* @param {Map} $font-scale - Cyfluniad
*
* @example
* font-size: get-font-size(header, 3);
*
* @requires {variable} $font-scale
* @requires {function} convert-to-px
* @requires {function} get-scale-level
*
* @return {Number}
*
* @group typography
*/
/
* Cael uchder llinell ar gyfer lefel ym matrics y raddfa ffont
*
* @param {String} $name - Enw'r raddfa ffont yn y matrics (e.e., headline)
* @param {Number} $level - Lefel yn y matrics
* @param {Map} $font-scale - Cyfluniad
*
* @example
* font-size: get-line-height(header, 3);
*
* @requires {variable} $font-scale
* @requires {function} convert-to-px
* @requires {function} get-scale-level
*
* @return {Number}
*
* @group typography
*/
/
* Trosi unrhyw werth i bicseli
*
* @param {Number} $value
*
* @example
* font-size: convert-to-px(14); // 14px
*
* @return {Number}
*
* @group typography
*/
/
* Gosodiadau teipograffeg diofyn, i'w cynnwys cyn gynted â phosibl yn yr HTML
* 1. Gwnewch i rendrad teip edrych yn fwy craff
2. Gosodwch fylchau llinell cymharol i 1.5 (16px 1.5 = 24px)
*
* @param {String} $font-family ($f-serif-text) - Ffont byd-eang diofyn
*
* @requires {variable} $f-serif-text
*
* @group typography
*/
/
* Llwybr byr maint ffont ac uchder llinell
*
* @param {Number} $size
* @param {Number} $line-height ($size)
*
* @example
* @include font-size(18, 24);
*
* @requires {function} convert-to-px
*
* @group typography
*/
/
* Llwybr byr arddullio ffont
* Nodyn: Dewiswch ddefnyddio'r cymysgeddau graddfa ffont i aros yn gyson â'r raddfa ffont
*
* @param {String} $family
* @param {String} $weight
* @param {Number} $size
* @param {Number} $line-height ($size)
*
* @example
* @include font(arial, bold, 18, 24);
*
* @requires {mixin} font-size
*
* @group typography
*/
```Teipograffeg
Priodweddau Teulu a Phwysau Pennawd
Angen y newidyn `$f-serif-headline`.
Grŵp: teipograffeg
Gosodiadau Teipograffeg Pennawd
Paramedrau:
- `$level` (Rhif)
- `$size-only` (Booleaidd)
Enghreifftiau:
- Cynnwys yr holl briodweddau (maint ffont, uchder llinell, teulu, pwysau):
`@include fs-header(3);`
- Cynnwys maint ffont ac uchder llinell yn unig:
`@include fs-header(3, $size-only: true);`
Angen:
- Swyddogaeth `get-font-size`
- Swyddogaeth `get-line-height`
- Cymysgedd `font-size`
- Cymysgedd `f-header`
Grŵp: teipograffeg
---
Priodweddau Teulu a Phwysau Pennawd
Angen y newidyn `$f-serif-headline`.
Grŵp: teipograffeg
Gosodiadau Teipograffeg Pennawd
Paramedrau:
- `$level` (Rhif)
- `$size-only` (Booleaidd)
Enghreifftiau:
- Cynnwys yr holl briodweddau (maint ffont, uchder llinell, teulu, pwysau):
`@include fs-headline(3);`
- Cynnwys maint ffont ac uchder llinell yn unig:
`@include fs-headline(3, $size-only: true);`
Angen:
- Swyddogaeth `get-font-size`
- Swyddogaeth `get-line-height`
- Cymysgedd `font-size`
- Cymysgedd `f-headline`
Grŵp: teipograffeg
---
Priodweddau Teulu a Phwysau Pennawd Corff
Angen y newidyn `$f-serif-text`.
Grŵp: teipograffeg
Gosodiadau Teipograffeg Pennawd Corff
Paramedrau:
- `$level` (Rhif)
- `$size-only` (Booleaidd)
Enghreifftiau:
- Cynnwys yr holl briodweddau (maint ffont, uchder llinell, teulu, pwysau):
`@include fs-bodyHeading(3);`
- Cynnwys maint ffont ac uchder llinell yn unig:
`@include fs-bodyHeading(3, $size-only: true);`
Angen:
- Swyddogaeth `get-font-size`
- Swyddogaeth `get-line-height`
- Cymysgedd `font-size`
- Cymysgedd `f-bodyHeading`
Grŵp: teipograffeg
---
Priodwedd Teulu Copi Corff
Angen y newidyn `$f-serif-text`.
Grŵp: teipograffeg
Gosodiadau Teipograffeg Copi Corff
Paramedrau:
- `$level` (Rhif)
- `$size-only` (Booleaidd)
Enghreifftiau:
- Cynnwys yr holl briodweddau (maint ffont, uchder llinell, teulu):
`@include fs-bodyCopy(3);`
- Cynnwys maint ffont ac uchder llinell yn unig:
`@include fs-bodyCopy(3, $size-only: true);`
Angen:
- Swyddogaeth `get-font-size`
- Swyddogaeth `get-line-height`
- Cymysgedd `font-size`
- Cymysgedd `f-bodyCopy`
Grŵp: teipograffeg
---
Priodwedd Teulu Data
Angen y newidyn `$f-data`.
Grŵp: teipograffeg
Gosodiadau Teipograffeg Data
Paramedrau:
- `$level` (Rhif)
- `$size-only` (Booleaidd)
Enghreifftiau:
- Cynnwys yr holl briodweddau (maint ffont, uchder llinell, teulu):
`@include fs-data(3);`
- Cynnwys maint ffont ac uchder llinell yn unig:
`@include fs-data(3, $size-only: true);`
Angen:
- Swyddogaeth `get-font-size`
- Swyddogaeth `get-line-height`
- Cymysgedd `font-size`
- Cymysgedd `f-data`
Grŵp: teipograffeg
---
Priodwedd Teulu Testun Sans
Angen y newidyn `$f-sans-serif-text`.
Grŵp: teipograffeg
Gosodiadau Teipograffeg Testun Sans
Paramedrau:
- `$level` (Rhif)
- `$size-only` (Booleaidd)
Enghreifftiau:
- Cynnwys yr holl briodweddau (maint ffont, uchder llinell, teulu):
`@include fs-textSans(3);`
- Cynnwys maint ffont ac uchder llinell yn unig:
`@include fs-textSans(3, $size-only: true);`
Angen:
- Swyddogaeth `get-font-size`
- Swyddogaeth `get-line-height`
- Cymysgedd `font-size`
- Cymysgedd `f-textSans`
Grŵp: teipograffeg
---
Priodwedd Teulu Pennawd Sans
Nid yw hwn yn rhan o'n matrics graddfa ffont ar hyn o bryd, felly nid oes cymysgedd `fs-` ar ei gyfer. Am nawr, rydym ond yn ei ddefnyddio fel ffont amnewid mewn ychydig o leoedd.
Angen y newidyn `$f-sans-serif-headline`.
Grŵp: teipograffeg
---
@font-face
```css
@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Light.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Light.woff") format("woff");
}
```@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Light.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Light.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-LightItalic.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-LightItalic.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-LightItalic.ttf") format("truetype");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.ttf") format("truetype");
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf") format("truetype");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}```css
@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.ttf") format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "Guardian Headline Full";
src: url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2") format("woff2"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff") format("woff"),
url("https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.ttf") format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "Guardian Titlepiece";
src: url("https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2") format("woff2"),
url("https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff") format("woff"),
url("https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
.atom.svelte-1tpye3j {
display: flex;
flex-direction: column;
gap: 4px;
}
.homepage-content.svelte-1tpye3j {
display: flex;
flex-direction: column;
gap: 14px;
transition: padding-bottom 0.3s ease;
}
.sticky-padding.svelte-1tpye3j {
padding-bottom: 100px;
transition: padding-bottom 0.3s ease;
}
h1.svelte-1tpye3j {
position: absolute;
top: 220px;
left: 0;
font-family: "Guardian Headline Full", "Guardian Egyptian Web", Georgia, serif;
font-weight: bold;
font-size: 88px;
line-height: 88%;
color: #0077b6;
z-index: -1;
font-v
