Bu, bir web sitesinde kullanılmak üzere "Guardian Headline Full" yazı tipi ailesini tanımlayan bir CSS stil sayfasıdır. Yazı tipinin farklı ağırlıklarını (light, regular, medium, semibold) ve stillerini (normal veya italik) belirten birden fazla font-face kuralı içerir. Her varyasyon için kural, yazı tipi dosyalarını farklı formatlarda—WOFF2, WOFF ve TTF—sağlar, böylece tarayıcılar en uyumlu olanı seçebilir. Yazı tipi dosyaları Guardian'ın varlık sunucusunda barındırılır ve kurallar, sayfa yüklendiğinde yazı tipinin doğru şekilde uygulanmasını sağlar.
Bu, bir web sitesi için yazı tipi stillerini tanımlayan bir CSS kodu bloğudur. Guardian'ın tipografisi için farklı yazı tipi aileleri, ağırlıkları ve stilleri ayarlar. Kod, "Guardian Headline Full" ve "Guardian Titlepiece" için font-face kuralları içerir; çeşitli yazı tipi dosyalarını (woff2, woff ve ttf formatları gibi) ve bunlara karşılık gelen ağırlıkları (bold, italic, black, light ve regular gibi) belirtir. Bu kurallar, yazı tiplerinin farklı tarayıcılarda ve cihazlarda doğru şekilde yüklenmesini sağlar.
İşte akıcı, doğal İngilizceyle yeniden yazılmış metin:
Bu, "Guardian Headline Full" yazı tipi ailesi için bir dizi font-face kuralıdır. Her kural, yazı tipinin farklı bir stilini ve ağırlığını tanımlar ve aynı dosya kümesine farklı adlarla işaret eder. Dosyalar Guardian'ın varlık sunucusunda barındırılır.
Kurallar aşağıdaki stilleri kapsar:
- Regular (ağırlık 400) normal ve italik stillerde
- Medium (ağırlık 500) normal ve italik stillerde
- Semibold (ağırlık 600) normal ve italik stillerde
- Bold (ağırlık 700) normal ve italik stillerde
- Black (ağırlık 900) normal ve italik stillerde
Her stil için yazı tipi dosyaları üç formatta sağlanır: WOFF2, WOFF ve TTF. Tarayıcı, bu sırayla desteklediği ilk formatı kullanır.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 {
/ Burada ek stil belirtilmemiştir /
}
}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;--activeHere is the rewritten text in fluent, natural English:
---
- Pillar 500: #00b2ff;
- Active Pillar 600: #90dcff;
- Furniture card gradient color: rgba(0, 78, 124, .6)
Android cihazlar için:
- Üst araç çubuğu yüksekliği: 58px
- Alt araç çubuğu yüksekliği: 56px
- Görünüm alanı yüksekliği (üst araç çubuğu hariç): calc(100vh - 58px)
iOS cihazlar için:
- Üst araç çubuğu yüksekliği: 44px
- Alt araç çubuğu yüksekliği: 50px
- Üst araç çubuğu yüksekliği (alternatif): 20px
- Görünüm alanı yüksekliği (alt araç çubuğu hariç): calc(100vh - 50px)
iOS'ta en az 670px yüksekliğindeki ekranlarda:
- Alt araç çubuğu yüksekliği: 84px
- Üst araç çubuğu yüksekliği: 44px
iOS'ta en az 800px yüksekliğindeki ekranlarda:
- Üst araç çubuğu yüksekliği: 94px
Üst banner reklam kapsayıcısı varsayılan olarak gizlidir.
Etkileşimli makaleler için ana içerik alanında dolgu yoktur.
61.25em'den geniş ekranlarda, etkileşimli ızgara boşluksuz tek sütun kullanır ve düzen alanları şu sırayla düzenlenir: başlık, manşet, giriş, medya, çizgiler, meta, gövde ve boş bir alan.
71.25em'den geniş ekranlarda, ızgara dört sütunlu hale gelir: 79px, 1px, auto ve 79px, 10px boşluklarla. Düzen alanları şu şekilde düzenlenir: ilk satırda başlık, kenarlık, manşet ve sağ sütun; ardından kenarlık, giriş ve sağ sütun; sonra kenarlık, medya ve sağ sütun; sonra kenarlık, gövde ve sağ sütun; ve son olarak kenarlık ve sağ sütun.
81.25em'den geniş ekranlarda, yan sütunlar 159px'e genişler.
Başlık bölümü gizlidir (sıfır yükseklik, taşma gizli).
Ana içerik alanında üst kenar boşluğu yoktur.
46.25em'den geniş ekranlarda, ana içeriğin sağ dolgusu yoktur.
Etkileşimli ana sütun göreli olarak konumlandırılmıştır.
İçindeki herhangi bir öğe atomu gizlidir (sıfır yükseklik, kenar boşluğu veya dolgu yok).
Medya bölümü yapışkandır, sol üstte konumlandırılmıştır, tam görünüm alanı genişliğini ve yüksekliğini kaplar ve z-index değeri 0'dır.
Medyanın üzerine yarı saydam siyah bir karartma yerleştirilir, başlangıçta görünmezdir ve metin genişletildiğinde yavaşça görünür.
46.25em'den geniş ekranlarda, medya bölümü 740px genişliğindedir ve sol kenar boşluğu yoktur.
61.25em'den geniş ekranlarda, 630px genişliğe ulaşır ve sağa hizalanır.
Medyanın içindeki başlık, ekstra dolgu ile üstte konumlandırılmıştır.
Medyanın içindeki figürler ve lightbox görselleri yarım saniye içinde görünmeye başlar.
İç aralıkları gizlidir ve div'leri tam yükseklik alır.
Onay kutusu etiketi gizlidir.
Daha geniş ekranlarda, bağlantıların içindeki düğmeler tamamen görünür ve üstte katmanlanır.
Görseller üste hizalanır.
Bir figür veya lightbox "show-me" sınıfına sahip olduğunda görünür hale gelir.
Hareketi azaltmayı tercih eden kullanıcılar için solma efekti devre dışı bırakılır.
Figürler ve lightbox görselleri medya kapsayıcısı içinde mutlak olarak konumlandırılmıştır.[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 Döngüleri SnapSlides'ta ana medya olarak desteklenmez. Döngüyü kaldırın ve bunun yerine bir sinemagraf veya statik bir resim seçin.";
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
}İşte akıcı, doğal İngilizceyle yeniden yazılmış metin:
İçerik sütunu, öğeleri hem yatay hem dikey olarak ortalamak için flexbox kullanır. Bir medya öğesi YouTube yerleştirmesi içerdiğinde, kart figürünün kapsayıcısı içeriğe sığacak şekilde yüksekliğini ayarlar, köşeleri yuvarlatır ve taşmayı gizler. Etkileşimli medya bloklarındaki iframe'ler kapsayıcılarının tam yüksekliğini kaplar.
Kartlar sarmalayıcısı sayfaya göre konumlandırılır ve tam görünüm alanı yüksekliği kadar yukarı kaydırılır. 61.25em'den (yaklaşık 980px) geniş ekranlarda, sarmalayıcı 460px genişliğinde ve küçük bir sol kenar boşluğuyla sınırlandırılır. 71.25em'den (yaklaşık 1140px) geniş ekranlarda, bu sol kenar boşluğu kaldırılır.
Koyu temalı makaleler için kenarlık rengi koyu gri olarak ayarlanır. 46.25em'den (yaklaşık 740px) geniş ekranlarda, makale arka planı çok koyu gri olur. Bu makalelerdeki medya yer tutucuları ve kart figürleri, daha küçük ekranlarda biraz daha açık koyu bir arka plan kullanır ve daha büyük ekranlarda makaleyle aynı koyu griye geçer.
iOS uygulamasında, medya bölümleri tam görünüm alanı yüksekliğini kaplar ve kartlar sarmalayıcısı aynı miktarda yukarı kaydırılır. Meta bölümü, bir "Makaleyi Dinle" bileşeni içerdiğinde kapsayıcısını gizler.
Sistem koyu moddayken (ve site açık moda zorlanmadığında), aynı koyu tema ayarları uygulanır: makale kenarlığı koyu gri olur, arka plan daha büyük ekranlarda çok koyu gri olur ve medya yer tutucuları ile kart figürleri uygun koyu tonları kullanır.
Kök öğe, aktif temel sütununa dayalı bir paylaşım düğmesi rengi tanımlar ve bir opaklık değeri ayarlar. "furniture" stiline sahip makale kartları, düzen için space-between kullanır ve dolguya sahiptir. Bu kartların sağ üst köşesinde bir bilgi düğmesi görünür—dairesel, yarı saydam ve tıklanabilir. Daha geniş ekranlarda, daha sağa konumlandırılır. Bir lightbox düğmesi küçük ekranlarda gizlidir, orta ekranlarda görünür (ancak tıklamalara yanıt vermez) ve büyük ekranlarda tekrar kaybolur.
Bu kartlardaki seri etiketleri, renkli bir arka plan üzerinde kalın beyaz metin olarak görüntülenir ve serif yazı tipi kullanır. Başlık bölümü alt kenar boşluğuna sahiptir; ana başlık kalın, büyük bir serif yazı tipindedir. Alt başlıklar, astarlı rakamlarla aynı serif yazı tipini kullanır.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
