Ga shi rubutun da aka sake rubutawa a cikin Hausa mai kyau, ba tare da ƙara, canza, ko ba da shawarar wasu fassarori ba:
Rubutun sakin layi yana amfani da font GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, ko serif. An saita shi a 0.9375rem, tare da tsayin layi na 1.4, nauyi na al'ada, da salo na al'ada. Kaurin adon rubutu shine 2px.
Heading 2 yana amfani da font GH Guardian Headline, Guardian Egyptian Web, Georgia, ko serif. An saita shi a 1.5rem, tare da tsayin layi na 1.15, nauyi mai ƙarfi, da salo na al'ada. Kaurin adon rubutu shine 3px.
Ajin "src-headline-medium-17" yana amfani da font GH Guardian Headline, Guardian Egyptian Web, Georgia, ko serif. An saita shi a 1.0625rem, tare da tsayin layi na 1.15, nauyi na tsakiya (500), da salo na al'ada. Kaurin adon rubutu shine 2px.
Ajin "src-text-sans-14" yana amfani da font GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, ko sans-serif. An saita shi a 0.875rem, tare da tsayin layi na 1.3, nauyi na al'ada, da salo na al'ada. Kaurin adon rubutu shine 2px.
Ajin "src-text-sans-bold-17" yana amfani da font GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, ko sans-serif. An saita shi a 1.0625rem, tare da tsayin layi na 1.3, nauyi mai ƙarfi (700), da salo na al'ada. Kaurin adon rubutu shine 2px.
Kayan mallaka na al'ada "--src-brand-400" an saita shi zuwa #052962.
Lokacin da aka kunna rubutun, labarin tare da ajin "content--interactive" da ɗansa div, da kuma abubuwa masu ajin "article", an fara ɓoye su da rashin haske na 0 da kuma ɓoye abin da ya wuce. Da zarar shafin ya ɗora (wanda ajin "interactive-loaded" ya nuna), waɗannan abubuwa sun zama bayyane gaba ɗaya tare da canji mai santsi na daƙiƙa 1, kuma an saita abin da ya wuce zuwa "unset".
An ɗora font "Guardian Headline Full" a cikin salo da yawa. Don nauyi mai haske (300) a cikin salo na al'ada, ana samun fayilolin font daga kadarorin Guardian. Hakanan yana aiki don nauyi mai haske mai karkata, na yau da kullun (400) na al'ada, na yau da kullun mai karkata, na tsakiya (500) na al'ada, da na tsakiya mai karkata. Kowanne yana amfani da nau'ikan woff2, woff, da truetype masu dacewa.
@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; }
Ga rubutun da aka sake rubutawa a cikin Ingilishi mai kyau, na halitta:
```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;
}
/*
* Yana ba da `mq` mixin daga sass-mq tare da wuraren katsewa na Guardian da aka saita.
* Yi amfani da shi kamar haka:
*
* `@include mq(leftCol) ...`
*
* Wuraren katsewa da ake samu:
* - desktop: 61.25em
* - leftCol: 71.25em
* - mobile: 20em
* - mobileLandscape: 30em
* - mobileMedium: 23.4375em
* - phablet: 41.25em
* - tablet: 46.25em
* - wide: 81.25em
*/
/*
* Wannan fayil ɗin an ƙirƙira shi ta atomatik ta src/source/generate/breakpoints.js
*/
/*
* Wannan fayil ɗin an ƙirƙira shi ta atomatik ta src/source/generate/typography.js
*/
/
* Tarin font na bayanai
*
* @group typography
*/
/
* Tarin font na Serif
*
* @group typography
*/
/
* Tarin font na kanun labarai
*
* @group typography
*/
/
* Tarin font na rubutu maras serif
*
* @group typography
*/
/
* Tarin font na kanun labarai maras serif
*
* @group typography
*/
/
* Saitunan ma'aunin font na asali
* Duba font-scale.html da font-scale.png don misalai na gani
*
* @group typography
*/
/
* Samu duk matakan font daga ma'aunin font
*
* @param {String} $name - Sunan matrix ma'aunin font (misali, headline)
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale(header);
*
* @requires {variable} $font-scale
*
* @return {Map}
*
* @group typography
*/
/
* Samu bayani game da takamaiman matakin ma'aunin font
*
* @param {String} $name - Sunan ma'aunin font a cikin matrix (misali, headline)
* @param {Number} $level - Mataki a cikin matrix
* @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
*/
/
* Samu girman font don mataki a cikin matrix ma'aunin font
*
* @param {String} $name - Sunan ma'aunin font a cikin matrix (misali, headline)
* @param {Number} $level - Mataki a cikin matrix
* @param {Map} $font-scale - Tsari
*
* @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
*/
/
* Samu tsayin layi don mataki a cikin matrix ma'aunin font
*
* @param {String} $name - Sunan ma'aunin font a cikin matrix (misali, headline)
* @param {Number} $level - Mataki a cikin matrix
* @param {Map} $font-scale - Tsari
*
* @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
*/
/
* Maida kowane ƙima zuwa pixels
*
* @param {Number} $value
*
* @example
* font-size: convert-to-px(14); // 14px
*
* @return {Number}
*
* @group typography
*/
/
* Saitunan rubutu na asali, don haɗawa da wuri-wuri a cikin HTML
* 1. Sanya nau'in rubutu ya zama mai kaifi
2. Saita tazarar layi na dangi zuwa 1.5 (16px 1.5 = 24px)
*
* @param {String} $font-family ($f-serif-text) - Font na duniya na asali
*
* @requires {variable} $f-serif-text
*
* @group typography
*/
/
* Gajeriyar girman font da tsayin layi
*
* @param {Number} $size
* @param {Number} $line-height ($size)
*
* @example
* @include font-size(18, 24);
*
* @requires {function} convert-to-px
*
* @group typography
*/
/
* Gajeriyar salon rubutu
* Lura: Zabi yin amfani da mixins na ma'aunin font don kasancewa daidai da ma'aunin font
*
* @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
*/```
Rubutu
Kaddarorin Iyali da Nauyi na Kanun Labarai
Yana buƙatar ma'auni `$f-serif-headline`.
Rukuni: rubutu
Saitunan Rubutu na Kanun Labarai
Sigogi:
- `$level` (Lamba)
- `$size-only` (Mai Gaskiya)
Misalai:
- Haɗa duk kaddarorin (girman font, tsayin layi, iyali, nauyi):
`@include fs-header(3);`
- Haɗa girman font da tsayin layi kawai:
`@include fs-header(3, $size-only: true);`
Yana buƙatar:
- Aiki `get-font-size`
- Aiki `get-line-height`
- Mixin `font-size`
- Mixin `f-header`
Rukuni: rubutu
---
Kaddarorin Iyali da Nauyi na Kanun Labarai
Yana buƙatar ma'auni `$f-serif-headline`.
Rukuni: rubutu
Saitunan Rubutu na Kanun Labarai
Sigogi:
- `$level` (Lamba)
- `$size-only` (Mai Gaskiya)
Misalai:
- Haɗa duk kaddarorin (girman font, tsayin layi, iyali, nauyi):
`@include fs-headline(3);`
- Haɗa girman font da tsayin layi kawai:
`@include fs-headline(3, $size-only: true);`
Yana buƙatar:
- Aiki `get-font-size`
- Aiki `get-line-height`
- Mixin `font-size`
- Mixin `f-headline`
Rukuni: rubutu
---
Kaddarorin Iyali da Nauyi na Kanun Jiki
Yana buƙatar ma'auni `$f-serif-text`.
Rukuni: rubutu
Saitunan Rubutu na Kanun Jiki
Sigogi:
- `$level` (Lamba)
- `$size-only` (Mai Gaskiya)
Misalai:
- Haɗa duk kaddarorin (girman font, tsayin layi, iyali, nauyi):
`@include fs-bodyHeading(3);`
- Haɗa girman font da tsayin layi kawai:
`@include fs-bodyHeading(3, $size-only: true);`
Yana buƙatar:
- Aiki `get-font-size`
- Aiki `get-line-height`
- Mixin `font-size`
- Mixin `f-bodyHeading`
Rukuni: rubutu
---
Kaddarorin Iyali na Kwafin Jiki
Yana buƙatar ma'auni `$f-serif-text`.
Rukuni: rubutu
Saitunan Rubutu na Kwafin Jiki
Sigogi:
- `$level` (Lamba)
- `$size-only` (Mai Gaskiya)
Misalai:
- Haɗa duk kaddarorin (girman font, tsayin layi, iyali):
`@include fs-bodyCopy(3);`
- Haɗa girman font da tsayin layi kawai:
`@include fs-bodyCopy(3, $size-only: true);`
Yana buƙatar:
- Aiki `get-font-size`
- Aiki `get-line-height`
- Mixin `font-size`
- Mixin `f-bodyCopy`
Rukuni: rubutu
---
Kaddarorin Iyali na Bayanai
Yana buƙatar ma'auni `$f-data`.
Rukuni: rubutu
Saitunan Rubutu na Bayanai
Sigogi:
- `$level` (Lamba)
- `$size-only` (Mai Gaskiya)
Misalai:
- Haɗa duk kaddarorin (girman font, tsayin layi, iyali):
`@include fs-data(3);`
- Haɗa girman font da tsayin layi kawai:
`@include fs-data(3, $size-only: true);`
Yana buƙatar:
- Aiki `get-font-size`
- Aiki `get-line-height`
- Mixin `font-size`
- Mixin `f-data`
Rukuni: rubutu
---
Kaddarorin Iyali na Rubutu Maras Serif
Yana buƙatar ma'auni `$f-sans-serif-text`.
Rukuni: rubutu
Saitunan Rubutu na Rubutu Maras Serif
Sigogi:
- `$level` (Lamba)
- `$size-only` (Mai Gaskiya)
Misalai:
- Haɗa duk kaddarorin (girman font, tsayin layi, iyali):
`@include fs-textSans(3);`
- Haɗa girman font da tsayin layi kawai:
`@include fs-textSans(3, $size-only: true);`
Yana buƙatar:
- Aiki `get-font-size`
- Aiki `get-line-height`
- Mixin `font-size`
- Mixin `f-textSans`
Rukuni: rubutu
---
Kaddarorin Iyali na Kanun Labarai Maras Serif
Wannan ba wani ɓangare na matrix ma'aunin font ɗinmu ba a halin yanzu, don haka babu `fs-` mixin don shi. A yanzu, muna amfani da shi kawai azaman maye gurbin font a wurare kaɗan.
Yana buƙatar ma'auni `$f-sans-serif-headline`.
Rukuni: rubutu
---
@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-variant-numeric: lining-nums;
}
@media (min-width: 61.25em) {
h1.svelte-1tpye3j {
top: 220px;
}
}
p.standfirst.svelte-1tpye3j {
color: #fff !important;
max-width: 450px;
padding-bottom: 10px;
}
@media (min-width: 61.25em) {
p.standfirst.svelte-1tpye3j {
font-size: 20px;
max-width: 600px;
}
}
.standfirst-container.svelte-1tpye3j {
max-width: 600px;
border-bottom: 1px solid #0077b6;
}
.tooltip.svelte-1tpye3j {
position: relative;
z-index: 2;
margin-top: -40px;
opacity: 0;
}
@media (min-width: 61.25em) {
.tooltip.s
