Toto je CSS stylopis, který definuje rodinu písem „Guardian Headline Full" pro použití na webových stránkách. Obsahuje několik pravidel @font-face, z nichž každé specifikuje jinou váhu (light, regular, medium, semibold) a styl (normal nebo italic) písma. Pro každou variantu pravidlo poskytuje soubory písem v různých formátech—WOFF2, WOFF a TTF—aby si prohlížeče mohly vybrat ten nejkompatibilnější. Soubory písem jsou hostovány na serveru aktiv Guardianu a pravidla zajišťují, že se písmo správně aplikuje při načtení stránky.Toto je blok CSS kódu, který definuje styly písem pro webové stránky. Nastavuje různé rodiny písem, váhy a styly pro typografii Guardianu. Kód obsahuje pravidla @font-face pro „Guardian Headline Full" a „Guardian Titlepiece," specifikující různé soubory písem (jako formáty woff2, woff a ttf) a jejich odpovídající váhy (jako bold, italic, black, light a regular). Tato pravidla zajišťují, že se písma správně načítají napříč různými prohlížeči a zařízeními.Zde je text přepsaný do plynulé, přirozené angličtiny:
Toto je sada pravidel @font-face pro rodinu písem „Guardian Headline Full". Každé pravidlo definuje jiný styl a váhu písma, přičemž ukazuje na stejnou sadu souborů, ale s různými názvy. Soubory jsou hostovány na serveru aktiv Guardianu.
Pravidla pokrývají následující styly:
- Regular (váha 400) v normálním a kurzívním stylu
- Medium (váha 500) v normálním a kurzívním stylu
- Semibold (váha 600) v normálním a kurzívním stylu
- Bold (váha 700) v normálním a kurzívním stylu
- Black (váha 900) v normálním a kurzívním stylu
Pro každý styl jsou soubory písem poskytnuty ve třech formátech: WOFF2, WOFF a TTF. Prohlížeč použije první formát, který podporuje, v tomto pořadí.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 {
/ Zde nejsou specifikovány žádné další styly /
}
}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;--activeZde je přepsaný text v plynulé, přirozené angličtině:
---
- Pillar 500: #00b2ff;
- Active Pillar 600: #90dcff;
- Furniture card gradient color: rgba(0, 78, 124, .6)
Pro zařízení s Androidem:
- Výška horního panelu nástrojů: 58px
- Výška spodního panelu nástrojů: 56px
- Výška viewportu (bez horního panelu nástrojů): calc(100vh - 58px)
Pro zařízení s iOS:
- Výška horního panelu nástrojů: 44px
- Výška spodního panelu nástrojů: 50px
- Výška horního panelu nástrojů (alternativní): 20px
- Výška viewportu (bez spodního panelu nástrojů): calc(100vh - 50px)
Na obrazovkách s výškou alespoň 670px na iOS:
- Výška spodního panelu nástrojů: 84px
- Výška horního panelu nástrojů: 44px
Na obrazovkách s výškou alespoň 800px na iOS:
- Výška horního panelu nástrojů: 94px
Kontejner horního bannerového reklamního prostoru je ve výchozím stavu skrytý.
U interaktivních článků nemá hlavní oblast obsahu žádný padding.
Na obrazovkách širších než 61.25em používá interaktivní mřížka jeden sloupec bez mezer a oblasti rozložení jsou uspořádány jako: title, headline, standfirst, media, lines, meta, body a prázdný prostor.
Na obrazovkách širších než 71.25em se mřížka stává čtyřsloupcovou: 79px, 1px, auto a 79px, s mezerami 10px. Oblasti rozložení jsou uspořádány jako: title, border, headline a pravý sloupec v prvním řádku; poté border, standfirst a pravý sloupec; poté border, media a pravý sloupec; poté border, body a pravý sloupec; a nakonec border a pravý sloupec.
Na obrazovkách širších než 81.25em se boční sloupce rozšiřují na 159px každý.
Sekce titulku je skrytá (nulová výška, přetečení skryté).
Hlavní oblast obsahu nemá žádný horní okraj.
Na obrazovkách širších než 46.25em nemá hlavní obsah žádný pravý padding.
Interaktivní hlavní sloupec je umístěn relativně.
Jakékoli element-atomy v něm jsou skryté (nulová výška, žádný okraj ani padding).
Sekce médií je lepivá, umístěná vlevo nahoře, zabírá plnou šířku a výšku viewportu, s z-indexem 0.
Přes média je umístěna tmavá vrstva (poloprůhledná černá), zpočátku neviditelná, a plynule se objeví, když je text rozbalen.
Na obrazovkách širších než 46.25em je sekce médií široká 740px, bez levého okraje.
Na obrazovkách širších než 61.25em se stává 630px širokou a je zarovnána doprava.
Popisek uvnitř sekce médií je umístěn nahoře s extra paddingem.
Obrázky a lightbox obrázky uvnitř sekce médií začínají neviditelné a plynule se objeví během půl sekundy.
Jejich vnitřní rozpětí jsou skrytá a jejich divy zabírají plnou výšku.
Popisek zaškrtávacího políčka je skrytý.
Na širších obrazovkách jsou všechna tlačítka uvnitř odkazů plně viditelná a vrstvená nad obsahem.
Obrázky jsou zarovnány nahoru.
Když má obrázek nebo lightbox třídu „show-me", stane se viditelným.
Pro uživatele, kteří preferují omezený pohyb, je efekt plynulého objevení zakázán.
Obrázky a lightbox obrázky jsou umístěny absolutně v rámci kontejneru médií.[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
}Zde je přepsaný text v plynulé, přirozené angličtině:
Obsahový sloupec používá flexbox k centrování prvků horizontálně i vertikálně. Když prvek média obsahuje YouTube embed, kontejner obrázku karty upraví svou výšku tak, aby odpovídal obsahu, přidá zaoblené rohy a skryje přetečení. Iframe uvnitř interaktivních bloků médií zabírají plnou výšku svého kontejneru.
Wrapper karet je umístěn relativně ke stránce a posunut nahoru o plnou výšku viewportu. Na obrazovkách širších než 61.25em (přibližně 980px) je wrapper omezen na 460px na šířku s malým levým okrajem. Na obrazovkách širších než 71.25em (přibližně 1140px) je tento levý okraj odstraněn.
Pro články s tmavým motivem je barva okraje nastavena na tmavě šedou. Na obrazovkách širších než 46.25em (přibližně 740px) se pozadí článku stává velmi tmavě šedým. Placeholdery médií a obrázky karet uvnitř těchto článků používají na menších obrazovkách mírně světlejší tmavé pozadí a na větších obrazovkách přecházejí na stejnou tmavě šedou jako článek.
V aplikaci pro iOS zabírají sekce médií plnou výšku viewportu a wrapper karet je posunut nahoru o stejnou výšku. Sekce meta skryje svůj kontejner, když obsahuje komponentu „Listen to Article".
Když je systém v tmavém režimu (a web není vynucen do světlého režimu), platí stejné úpravy tmavého motivu: okraj článku se stává tmavě šedým, pozadí se na větších obrazovkách stává velmi tmavě šedým a placeholdery médií a obrázky karet používají odpovídající tmavé odstíny.
Kořenový prvek definuje barvu tlačítka sdílení na základě aktivního pilíře a nastavuje hodnotu průhlednosti. Článkové karty se stylem „furniture" používají pro rozložení space-between a mají padding. Informační tlačítko se objevuje v pravém horním rohu těchto karet—je kruhové, poloprůhledné a klikatelné. Na širších obrazovkách je umístěno více vpravo. Tlačítko lightboxu je skryté na malých obrazovkách, objevuje se na středních obrazovkách (ale nereaguje na kliknutí) a na velkých obrazovkách opět mizí.
Popisky sérií v rámci těchto karet jsou zobrazeny jako tučný bílý text na barevném pozadí s použitím patkového písma. Sekce titulku má spodní okraj, přičemž hlavní nadpis je v tučném, velkém patkovém písmu. Podnadpisy používají stejné patkové písmo s číslicemi s horními dotahy.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+div{display:none}}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] .content__meta-container_dcr svg{display:none!important}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] [data-gu-name=follow]{margin-top:8px}@media (prefers-color-scheme: dark){:root:root
