Tämä on CSS-tyylitiedosto, joka määrittelee "Guardian Headline Full" -fonttiperheen käytettäväksi verkkosivustolla. Se sisältää useita font-face-sääntöjä, joista jokainen määrittelee eri painon (light, regular, medium, semibold) ja tyylin (normaali tai kursivoitu) fontille. Jokaiselle muunnokselle sääntö tarjoaa fonttitiedostot eri formaateissa—WOFF2, WOFF ja TTF—jotta selaimet voivat valita yhteensopivimman. Fonttitiedostot on isännöity Guardianin asset-palvelimella, ja säännöt varmistavat, että fontti sovelletaan oikein sivun latautuessa.Tämä on CSS-koodilohko, joka määrittelee fonttityylit verkkosivustolle. Se asettaa eri fonttiperheet, painot ja tyylit Guardianin typografialle. Koodi sisältää font-face-säännöt "Guardian Headline Full" ja "Guardian Titlepiece" -fontille, määritellen eri fonttitiedostot (kuten woff2, woff ja ttf -formaatit) ja niitä vastaavat painot (kuten bold, italic, black, light ja regular). Nämä säännöt varmistavat, että fontit latautuvat oikein eri selaimissa ja laitteissa.Tässä on teksti kirjoitettuna sujuvaksi, luonnolliseksi englanniksi:
Tämä on joukko font-face-sääntöjä "Guardian Headline Full" -fonttiperheelle. Jokainen sääntö määrittelee eri tyylin ja painon fontille, osoittaen samoihin tiedostoihin mutta eri nimillä. Tiedostot on isännöity Guardianin asset-palvelimella.
Säännöt kattavat seuraavat tyylit:
- Regular (paino 400) normaali- ja kursiivityyleissä
- Medium (paino 500) normaali- ja kursiivityyleissä
- Semibold (paino 600) normaali- ja kursiivityyleissä
- Bold (paino 700) normaali- ja kursiivityyleissä
- Black (paino 900) normaali- ja kursiivityyleissä
Jokaiselle tyylille fonttitiedostot on tarjottu kolmessa formaatissa: WOFF2, WOFF ja TTF. Selain käyttää ensimmäistä tukemaansa formaattia tässä järjestyksessä.ine-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;
}
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body > div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive > div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name="body"] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body > div .content--interactive-grid #maincontent,
.content--interactive > div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name="body"] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body > div .content--interactive-grid #maincontent,
.content--interactive > div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name="body"] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body > div .content--interactive-grid .content__standfirst,
.content--interactive > div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name="body"] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body > div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive > div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name="body"] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ Tässä ei ole määritetty lisätyylejä /
}
}ent--immersive figcaption{padding:4px 0 0}#article-body>div .content--interactive-grid [data-gu-name=lines],#article-body>div .content--interactive-grid [data-gu-name=meta],.content--interactive>div .content--interactive-grid [data-gu-name=lines],.content--interactive>div .content--interactive-grid [data-gu-name=meta],#comment-body .content--interactive-grid [data-gu-name=lines],#comment-body .content--interactive-grid [data-gu-name=meta],[data-gu-name=body] .content--interactive-grid [data-gu-name=lines],[data-gu-name=body] .content--interactive-grid [data-gu-name=meta],#feature-body .content--interactive-grid [data-gu-name=lines],#feature-body .content--interactive-grid [data-gu-name=meta]{grid-area:2/1/5/2}#article-body>div .content--interactive-grid [data-gu-name=lines],.content--interactive>div .content--interactive-grid [data-gu-name=lines],#comment-body .content--interactive-grid [data-gu-name=lines],[data-gu-name=body] .content--interactive-grid [data-gu-name=lines],#feature-body .content--interactive-grid [data-gu-name=lines]{height:-moz-max-content;height:max-content;margin-top:5px}#article-body>div .content--interactive-grid [data-gu-name=meta],.content--interactive>div .content--interactive-grid [data-gu-name=meta],#comment-body .content--interactive-grid [data-gu-name=meta],[data-gu-name=body] .content--interactive-grid [data-gu-name=meta],#feature-body .content--interactive-grid [data-gu-name=meta]{margin-top:18px}}@media (min-width: 81.25em){#article-body>div .content--interactive-grid,.content--interactive>div .content--interactive-grid,#comment-body .content--interactive-grid,[data-gu-name=body] .content--interactive-grid,#feature-body .content--interactive-grid{grid-template-columns:219px 1px 620px 80px 300px}}body.ios .article__header .standfirst__inner p,body.android .article__header .standfirst__inner p{font-family:Guardian Headline,Guardian Egyptian Web,Guardian Headline Full,Georgia,serif;font-weight:500}body.ios .article__header .article-kicker__section,body.android .article__header .article-kicker__section{display:block}body.ios .article__header .article-kicker__section:first-letter,body.android .article__header .article-kicker__section:first-letter{text-transform:uppercase}body.ios .article__header .keyline-4,body.android .article__header .keyline-4{padding-top:12px!important}body.ios .article__header .meta__misc .byline__author,body.android .article__header .meta__misc .byline__author{font-family:Guardian Headline,Guardian Egyptian Web,Guardian Headline Full,Georgia,serif;font-weight:700}body.ios .article__header .meta__misc .byline__author a,body.android .article__header .meta__misc .byline__author a{font-weight:700}body.ios .article figure.element-image .figure__inner,body.android .article figure.element-image .figure__inner{height:auto!important}body.ios .article figure.element-atom+p,body.android .article figure.element-atom+p{margin-top:0}@media (scripting: enabled){:root article.content--interactive>div,:root .article{opacity:0;overflow:hidden}:root.interactive-loaded article.content--interactive>div,:root.interactive-loaded .article{opacity:1;transition:opacity 1s ease;overflow:unset}}[data-article-theme=News]{--active-pillar-100: #660505;--active-pillar-200: #8b0000;--active-pillar-300: #ab0613;--active-pillar-400: #c70000;--active-pillar-500: #ff5943;--active-pillar-600: #ffbac8;--furniture-card-gradient-color: rgba(139, 0, 0, .6)}[data-article-theme=Lifestyle]{--active-pillar-100: #510043;--active-pillar-200: #650054;--active-pillar-300: #7d0068;--active-pillar-400: #bb3b80;--active-pillar-500: #ffabdb;--active-pillar-600: #fec8d3;--furniture-card-gradient-color: rgba(101, 0, 84, .6)}[data-article-theme=Culture]{--active-pillar-100: #3e3323;--active-pillar-200: #574835;--active-pillar-300: #6b5840;--active-pillar-400: #866d50;--active-pillar-500: #eacca0;--active-pillar-600: #e7d4b9;--furniture-card-gradient-color: rgba(87, 72, 53, .6)}[data-article-theme=Sport]{--active-pillar-100: #003c60;--active-pillar-200: #004e7c;--active-pillar-300: #005689;--active-pillar-400: #0077b6;--activeTässä on uudelleenkirjoitettu teksti sujuvaksi, luonnolliseksi englanniksi:
---
- Pillar 500: #00b2ff;
- Active Pillar 600: #90dcff;
- Furniture card gradient color: rgba(0, 78, 124, .6)
Android-laitteille:
- Ylätyökalupalkin korkeus: 58px
- Alatyökalupalkin korkeus: 56px
- Näkymän korkeus (ilman ylätyökalupalkkia): calc(100vh - 58px)
iOS-laitteille:
- Ylätyökalupalkin korkeus: 44px
- Alatyökalupalkin korkeus: 50px
- Ylätyökalupalkin korkeus (vaihtoehtoinen): 20px
- Näkymän korkeus (ilman alatyökalupalkkia): calc(100vh - 50px)
Näytöillä, jotka ovat vähintään 670px korkeita iOS:ssä:
- Alatyökalupalkin korkeus: 84px
- Ylätyökalupalkin korkeus: 44px
Näytöillä, jotka ovat vähintään 800px korkeita iOS:ssä:
- Ylätyökalupalkin korkeus: 94px
Yläbannerin mainossäiliö on piilotettu oletuksena.
Interaktiivisille artikkeleille pääsisältöalueella ei ole täytettä.
Näytöillä, jotka ovat leveämpiä kuin 61.25em, interaktiivinen ruudukko käyttää yhtä saraketta ilman välejä, ja asettelualueet ovat järjestyksessä: title, headline, standfirst, media, lines, meta, body ja tyhjä tila.
Näytöillä, jotka ovat leveämpiä kuin 71.25em, ruudukosta tulee neljä saraketta: 79px, 1px, auto ja 79px, 10px väleillä. Asettelualueet on järjestetty seuraavasti: title, border, headline ja right column ensimmäisellä rivillä; sitten border, standfirst ja right column; sitten border, media ja right column; sitten border, body ja right column; ja lopuksi border ja right column.
Näytöillä, jotka ovat leveämpiä kuin 81.25em, sivusarakkeet laajenevat 159px:iin.
Otsikko-osio on piilotettu (nollakorkeus, overflow hidden).
Pääsisältöalueella ei ole yläreunaväliä.
Näytöillä, jotka ovat leveämpiä kuin 46.25em, pääsisällöllä ei ole oikeaa täytettä.
Interaktiivinen pääsarakkeen on sijoitettu suhteellisesti.
Kaikki elementtiatomit sen sisällä ovat piilotettuja (nollakorkeus, ei marginaalia tai täytettä).
Media-osio on liimautuva, sijoitettu vasempaan yläkulmaan, täyttäen koko näkymän leveyden ja korkeuden, z-indeksillä 0.
Median päälle on asetettu tumma peite (puoliläpinäkyvä musta), joka on alun perin näkymätön ja häivytetään sisään, kun tekstiä laajennetaan.
Näytöillä, jotka ovat leveämpiä kuin 46.25em, media-osio on 740px leveä, ilman vasenta marginaalia.
Näytöillä, jotka ovat leveämpiä kuin 61.25em, siitä tulee 630px leveä ja se on kohdistettu oikealle.
Kuvateksti median sisällä on sijoitettu yläreunaan ylimääräisellä täytteellä.
Kuvat ja lightbox-kuvat median sisällä alkavat näkymättöminä ja häivytetään sisään puolen sekunnin aikana.
Niiden sisäiset spanit ovat piilotettuja, ja niiden divit täyttävät koko korkeuden.
Valintaruudun etiketti on piilotettu.
Leveämmillä näytöillä linkkien sisällä olevat painikkeet ovat täysin näkyviä ja kerroksittain yläpuolella.
Kuvat on kohdistettu yläreunaan.
Kun kuvalla tai lightboxilla on "show-me"-luokka, siitä tulee näkyvä.
Käyttäjille, jotka suosivat vähennettyä liikettä, häivytystehoste on poistettu käytöstä.
Kuvat ja lightbox-kuvat on sijoitettu absoluuttisesti media-säiliön sisään.[data-gu-name=media] picture,
.content__main-column--interactive [data-gu-name=media] img,
.content__main-column--interactive [data-gu-name=media] gu-island[name=AppsLightboxImage] {
width: 100%;
height: 100%;
margin: 0;
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type label {
display: none !important;
}
@media (min-width: 46.25em) {
.content__main-column--interactive [data-gu-name=media] figure:first-of-type a.open-lightbox {
display: none;
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type picture + span {
display: block;
}
}
@media (min-width: 61.25em) {
.content__main-column--interactive [data-gu-name=media] figure:first-of-type picture + span label {
display: block;
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type picture + span #the-caption figcaption {
padding-top: 8px;
}
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.card-figure.video-container.loop:after {
content: "Video Loops are not supported as main media in SnapSlides. Remove the loop and choose a cinemagraph or a static picture instead.";
position: absolute;
top: 50px;
left: 8px;
color: #c70000;
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 20px;
padding: 2px 6px;
z-index: 100;
max-width: 500px;
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph {
height: 100vh;
width: 100vw;
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph div:has(video),
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph video {
height: 100vh;
width: 100%;
object-fit: cover;
}
@media (min-width: 46.25em) {
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph {
max-width: 740px;
}
}
@media (min-width: 61.25em) {
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph {
max-width: 630px;
}
}
.content__main-column--interactive [data-gu-name=media] .media-placeholder {
width: 100%;
height: 100%;
background-color: #ededed;
position: absolute;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.content__main-column--interactive [data-gu-name=media] .media-placeholder.show-me {
opacity: 1;
}
@media (min-width: 61.25em) {
.content__main-column--interactive [data-gu-name=media] .media-placeholder {
background-color: #fff;
}
}
@media (prefers-reduced-motion: reduce) {
.content__main-column--interactive [data-gu-name=media] .media-placeholder {
transition: none;
}
}
.content__main-column--interactive [data-gu-name=media] .card-figure figure > div {
width: 100%;
height: 100%;
padding: 0 10px;
display: flex;
justify-content: center;
align-items: center;
}
.content__main-column--interactive [data-gu-name=media] .card-figure figure > div > div {
border-radius: 8px;
height: auto;
max-height: 95%;
width: auto;
overflow: hidden;
}
.content__main-column--interactive [data-gu-name=media] .card-figure.show-me figure {
opacity: 1;
}
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait figure > div > div {
width: auto;
max-height: unset;
border-radius: 8px;
}
@media (min-width: 61.25em) {
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait figure > div > div {
height: 95%;
}
}
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait figure > div > div > div {
height: fit-content;
position: relative;
}
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph,
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph div:has(video),
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph video {
height: 100vh;
width: 100%;
margin: 0;
padding: 0 !important;
border-radius: 0;
}
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph video {
object-fit: cover;
}
.content__main-column--interactive [data-gu-name=media] .card-figure:has(>[data-component=youtube-embed]) {
display: fl
}Tässä on uudelleenkirjoitettu teksti sujuvaksi, luonnolliseksi englanniksi:
Sisältösarake käyttää flexboxia keskittääkseen kohteet sekä vaakasuunnassa että pystysuunnassa. Kun media-elementti sisältää YouTube-upotuksen, korttikuvan säiliö säätää korkeutensa sopimaan sisältöön, lisää pyöristetyt kulmat ja piilottaa ylivuodon. Iframet interaktiivisissa media-lohkoissa täyttävät säiliönsä koko korkeuden.
Korttien säiliö on sijoitettu suhteellisesti sivulle ja siirretty ylös koko näkymän korkeuden verran. Näytöillä, jotka ovat leveämpiä kuin 61.25em (noin 980px), säiliö on rajoitettu 460px leveäksi pienellä vasemmalla marginaalilla. Näytöillä, jotka ovat leveämpiä kuin 71.25em (noin 1140px), vasen marginaali poistetaan.
Tummateemaisten artikkeleiden reunaväri on asetettu tummanharmaaksi. Näytöillä, jotka ovat leveämpiä kuin 46.25em (noin 740px), artikkelin tausta muuttuu erittäin tummanharmaaksi. Mediapaikkamerkit ja korttikuvat näiden artikkeleiden sisällä käyttävät hieman vaaleampaa tummaa taustaa pienemmillä näytöillä ja vaihtuvat samaan tummanharmaaseen kuin artikkeli suuremmilla näytöillä.
iOS-sovelluksessa media-osiot täyttävät koko näkymän korkeuden, ja korttien säiliö on siirretty ylös saman verran. Meta-osio piilottaa säiliönsä, kun se sisältää "Listen to Article" -komponentin.
Kun järjestelmä on tummassa tilassa (ja sivusto ei ole pakotettu vaaleaan tilaan), samat tummateeman muutokset pätevät: artikkelin reunasta tulee tummanharmaa, taustasta tulee erittäin tummanharmaa suuremmilla näytöillä, ja mediapaikkamerkit sekä korttikuvat käyttävät asianmukaisia tummia sävyjä.
Juuri-elementti määrittelee jakopainikkeen värin aktiivisen pilarin perusteella ja asettaa läpinäkyvyysarvon. Artikkelikortit, joissa on "furniture"-tyyli, käyttävät space-between-asettelua ja niillä on täyte. Info-painike ilmestyy näiden korttien oikeaan yläkulmaan—se on pyöreä, puoliläpinäkyvä ja klikattava. Leveämmillä näytöillä se on sijoitettu kauemmaksi oikealle. Lightbox-painike on piilotettu pienillä näytöillä, ilmestyy keskikokoisilla näytöillä (mutta ei vastaa klikkauksiin) ja katoaa jälleen suurilla näytöillä.
Sarjan etiketit näissä korteissa näytetään lihavoituna valkoisena tekstinä värillisellä taustalla käyttäen serif-fonttia. Otsikko-osiolla on alareunaväli, ja pääotsikko on lihavoidussa, suuressa serif-fontissa. Alaotsikot käyttävät samaa serif-fonttia numeroineen.e-card [data-gu-name=headline] h2:has(strong) {
font-size: 24px;
padding-top: 0;
}
.article-card.furniture-card [data-gu-name=headline] h2:not(:has(strong)) {
font-size: 42px;
font-weight: 200;
}
.article-card.furniture-card [data-gu-name=standfirst] p {
font-size: 17px;
}
.article-card.furniture-card [data-gu-name=meta] {
display: grid;
grid-template-areas: "byline byline share";
grid-template-columns: 1fr 1fr auto;
}
@media (min-width: 61.25em) {
.article-card.furniture-card [data-gu-name=meta] {
grid-template-columns: 1fr;
grid-template-areas: "byline" "share";
}
}
.article-card.furniture-card [data-gu-name=meta] address {
grid-area: byline;
}
.article-card.furniture-card [data-gu-name=meta] address a {
border-bottom: none;
}
.article-card.furniture-card [data-gu-name=meta] address .byline a,
.article-card.furniture-card [data-gu-name=meta] address .byline span {
color: var(--active-pillar-400);
}
.article-card.furniture-card [data-gu-name=meta] address+div {
--article-link-text: var(--active-pillar-400);
}
.article-card.furniture-card [data-gu-name=meta] address+div a:hover {
color: #fff;
}
.article-card.furniture-card [data-gu-name=meta] address,
.article-card.furniture-card [data-gu-name=meta] address+div {
padding-top: 4px;
border-top: 1px solid var(--article-border);
}
.article-card.furniture-card [data-gu-name=meta] address+div {
grid-area: share;
}
@media (min-width: 61.25em) {
.article-card.furniture-card [data-gu-name=meta] address+div {
border-top: none;
padding-top: 0;
}
}
.article-card.furniture-card [data-gu-name=meta] .meta__social,
.article-card.furniture-card [data-gu-name=meta] .meta__comment {
padding-top: 0;
border: none;
}
.article-card.furniture-card .slides-counter {
border-radius: 18px;
padding: 0 4px 2px 6px;
background-color: #121212b3;
width: -moz-fit-content;
width: fit-content;
}
.article-card.furniture-card .slides-counter-wrapper {
padding: 4px 4px 3px 0;
color: #fff;
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 130%;
border-bottom: none;
margin: 0;
}
.article-card.furniture-card .slides-counter-wrapper svg {
margin-bottom: -3px;
}
@media (min-width: 46.25em) {
.article-card.furniture-card .slides-counter {
position: absolute;
}
}
@media (min-width: 61.25em) {
.article-card.furniture-card .slides-counter {
position: static;
padding: 0 5px 2px 8px;
}
.article-card.furniture-card .slides-counter-wrapper {
font-size: 15px;
}
.article-card.furniture-card .slides-counter-wrapper svg {
margin-bottom: -1px;
}
}
@media (min-width: 61.25em) {
.article-card.furniture-card {
padding: 10px 0;
}
}
article.feature-dark .article-card--content.furniture-card--content {
background: linear-gradient(0deg, #12121266 0% 100%), var(--furniture-card-gradient-color);
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=headline] h1 {
color: var(--active-pillar-500);
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] {
--byline: var(--active-pillar-500);
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] a,
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] svg,
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] button {
--article-link-text: var(--active-pillar-500);
--share-button: var(--active-pillar-500);
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .byline,
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .byline a,
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .byline span {
color: var(--active-pillar-500);
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .meta__social a,
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .meta__social button {
border-color: var(--article-border) !important;
}
article.feature-dark [data-component=series] {
background-color: var(--active-pillar-500);
color: #121212;
}
article.explainer [data-gu-name=headline] h1:before {
content: "Explainer";
display: block;
font-family: Guardian Headline Full, Guardian Egyptian Web, Georgia, ser;
}if;font-size:17px;font-weight:700;line-height:115%;color:#fff;background-color:var(--active-pillar-400);width:-moz-max-content;width:max-content;padding:3px 6px 4px}article.explainer.feature-dark [data-gu-name=headline] h1:before{background-color:var(--active-pillar-500);color:#121212}article:not(.feature-light):not(.feature-dark).news .article-card.furniture-card [data-gu-name=headline] h1{font-weight:500}[data-rendering-target=apps] article.feature-dark .article-card p{color:#dcdcdc!important}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta]{display:block}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] .byline>span>div{display:none!important}@media (min-width: 46.25em){[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] .byline>span:has(gu-island){display:block}}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] address,[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] address+div{border:none!important}@media (min-width: 61.25em){[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] address
