Hii ni karatasi ya mtindo wa CSS inayofafanua familia ya fonti ya "Guardian Headline Full" kwa matumizi kwenye tovuti. Inajumuisha sheria nyingi za font-face, kila moja ikibainisha uzito tofauti (nyepesi, kawaida, wastani, nusu-nzito) na mtindo (kawaida au italiki) wa fonti. Kwa kila tofauti, sheria hutoa faili za fonti katika miundo tofauti—WOFF2, WOFF, na TTF—ili vivinjari viweze kuchagua inayooana zaidi. Faili za fonti zinahifadhiwa kwenye seva ya mali za Guardian, na sheria zinahakikisha fonti inatumika ipasavyo wakati ukurasa unapopakia.Hii ni kizuizi cha msimbo wa CSS unaofafanua mitindo ya fonti kwa tovuti. Inaanzisha familia tofauti za fonti, uzito, na mitindo kwa ajili ya uchapaji wa Guardian. Msimbo unajumuisha sheria za font-face za "Guardian Headline Full" na "Guardian Titlepiece," zikibainisha faili mbalimbali za fonti (kama miundo ya woff2, woff, na ttf) na uzito wake sambamba (kama nzito, italiki, nyeusi, nyepesi, na kawaida). Sheria hizi zinahakikisha fonti zinapakia kwa usahihi katika vivinjari na vifaa mbalimbali.Hapa kuna maandishi yaliyoandikwa upya kwa Kiingereza fasaha na cha asili:
Hii ni seti ya sheria za font-face kwa familia ya fonti ya "Guardian Headline Full". Kila sheria inafafanua mtindo na uzito tofauti wa fonti, ikielekeza kwenye seti sawa ya faili lakini kwa majina tofauti. Faili zinahifadhiwa kwenye seva ya mali za Guardian.
Sheria zinashughulikia mitindo ifuatayo:
- Kawaida (uzito 400) katika mitindo ya kawaida na italiki
- Wastani (uzito 500) katika mitindo ya kawaida na italiki
- Nusu-nzito (uzito 600) katika mitindo ya kawaida na italiki
- Nzito (uzito 700) katika mitindo ya kawaida na italiki
- Nyeusi (uzito 900) katika mitindo ya kawaida na italiki
Kwa kila mtindo, faili za fonti hutolewa katika miundo mitatu: WOFF2, WOFF, na TTF. Kivinjari kitatumia muundo wa kwanza unaoungwa mkono, kwa mpangilio huo.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 {
/ Hakuna mitindo ya ziada iliyobainishwa hapa /
}
}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;--activeHapa kuna maandishi yaliyoandikwa upya kwa Kiingereza fasaha na cha asili:
---
- Pillar 500: #00b2ff;
- Active Pillar 600: #90dcff;
- Rangi ya gradient ya kadi ya samani: rgba(0, 78, 124, .6)
Kwa vifaa vya Android:
- Urefu wa upau wa zana wa juu: 58px
- Urefu wa upau wa zana wa chini: 56px
- Urefu wa eneo la kutazama (bila upau wa juu): calc(100vh - 58px)
Kwa vifaa vya iOS:
- Urefu wa upau wa zana wa juu: 44px
- Urefu wa upau wa zana wa chini: 50px
- Urefu wa upau wa zana wa juu (mbadala): 20px
- Urefu wa eneo la kutazama (bila upau wa chini): calc(100vh - 50px)
Kwenye skrini zenye urefu wa angalau 670px kwenye iOS:
- Urefu wa upau wa zana wa chini: 84px
- Urefu wa upau wa zana wa juu: 44px
Kwenye skrini zenye urefu wa angalau 800px kwenye iOS:
- Urefu wa upau wa zana wa juu: 94px
Kontena la tangazo la bango la juu limefichwa kwa chaguo-msingi.
Kwa makala shirikishi, eneo kuu la maudhui halina padding.
Kwenye skrini pana kuliko 61.25em, gridi shirikishi hutumia safu moja bila mapengo, na maeneo ya mpangilio yamepangwa kama: kichwa, kichwa kikuu, utangulizi, media, mistari, meta, mwili, na nafasi tupu.
Kwenye skrini pana kuliko 71.25em, gridi inakuwa safu nne: 79px, 1px, auto, na 79px, na mapengo ya 10px. Maeneo ya mpangilio yamepangwa kama: kichwa, mpaka, kichwa kikuu, na safu ya kulia katika safu ya kwanza; kisha mpaka, utangulizi, na safu ya kulia; kisha mpaka, media, na safu ya kulia; kisha mpaka, mwili, na safu ya kulia; na hatimaye mpaka na safu ya kulia.
Kwenye skrini pana kuliko 81.25em, safu za kando zinapanuka hadi 159px kila moja.
Sehemu ya kichwa imefichwa (urefu wa sifuri, overflow iliyofichwa).
Eneo kuu la maudhui halina ukingo wa juu.
Kwenye skrini pana kuliko 46.25em, maudhui makuu hayana padding ya kulia.
Safu kuu shirikishi imewekwa kwa nafasi ya jamaa.
Atomu zozote za vipengele ndani yake zimefichwa (urefu wa sifuri, hakuna ukingo au padding).
Sehemu ya media imewekwa kwa uthabiti, ikiwa juu-kushoto, ikichukua upana na urefu kamili wa eneo la kutazama, na z-index ya 0.
Kifuniko cheusi (nyeusi isiyo wazi) kinawekwa juu ya media, kikiwa kisichoonekana mwanzoni, na kinaonekana polepole wakati maandishi yanapopanuliwa.
Kwenye skrini pana kuliko 46.25em, sehemu ya media ina upana wa 740px, bila ukingo wa kushoto.
Kwenye skrini pana kuliko 61.25em, inakuwa 630px kwa upana na imepangiliwa kulia.
Maelezo ya picha ndani ya media yamewekwa juu na padding ya ziada.
Takwimu na picha za lightbox ndani ya media huanza zisioonekana na kuonekana polepole kwa nusu sekunde.
Span zao za ndani zimefichwa, na div zao huchukua urefu kamili.
Lebo ya kisanduku cha kuteua imefichwa.
Kwenye skrini pana, vitufe vyovyote ndani ya viungo vinaonekana kikamilifu na viko kwenye safu ya juu.
Picha zimepangiliwa juu.
Wakati takwimu au lightbox ina darasa la "show-me", inakuwa inayoonekana.
Kwa watumiaji wanaopendelea mwendo uliopunguzwa, athari ya kufifia imezimwa.
Takwimu na picha za lightbox zimewekwa kwa nafasi kamili ndani ya kontena la media.[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
}Hapa kuna maandishi yaliyoandikwa upya kwa Kiingereza fasaha na cha asili:
Safu ya maudhui hutumia flexbox kuweka vitu katikati kwa usawa na wima. Wakati kipengele cha media kina YouTube embed, kontena la takwimu ya kadi hurekebisha urefu wake ili kutoshea maudhui, huongeza pembe zilizozunguka, na huficha kufurika. Iframe ndani ya vitalu vya media shirikishi huchukua urefu kamili wa kontena lake.
Kifungu cha kadi kimewekwa kwa nafasi ya jamaa kwenye ukurasa na kusukumwa juu kwa urefu kamili wa eneo la kutazama. Kwenye skrini pana kuliko 61.25em (takriban 980px), kifungu kimepunguzwa hadi 460px kwa upana na ukingo mdogo wa kushoto. Kwenye skrini pana kuliko 71.25em (takriban 1140px), ukingo huo wa kushoto huondolewa.
Kwa makala zenye mada nyeusi, rangi ya mpaka imewekwa kuwa kijivu nyeusi. Kwenye skrini pana kuliko 46.25em (takriban 740px), mandharinyuma ya makala inakuwa kijivu nyeusi sana. Vihifadhi vya media na takwimu za kadi ndani ya makala hizi hutumia mandharinyuma meusi kidogo nyepesi kwenye skrini ndogo, na kubadilika hadi kijivu nyeusi sawa na makala kwenye skrini kubwa.
Katika programu ya iOS, sehemu za media huchukua urefu kamili wa eneo la kutazama, na kifungu cha kadi kimesukumwa juu kwa kiasi hicho. Sehemu ya meta huficha kontena lake wakati ina kipengele cha "Listen to Article".
Wakati mfumo uko katika hali ya giza (na tovuti haijalazimishwa kuwa hali ya mwanga), marekebisho sawa ya mada nyeusi yanatumika: mpaka wa makala unakuwa kijivu nyeusi, mandharinyuma inakuwa kijivu nyeusi sana kwenye skrini kubwa, na vihifadhi vya media na takwimu za kadi hutumia vivuli sahihi vya nyeusi.
Kipengele cha mizizi kinafafanua rangi ya kitufe cha kushiriki kulingana na nguzo inayotumika na kuweka thamani ya uwazi. Kadi za makala zilizo na mtindo wa "furniture" hutumia space-between kwa mpangilio na zina padding. Kitufe cha habari kinaonekana kwenye kona ya juu-kulia ya kadi hizi—ni cha duara, kisicho wazi kabisa, na kinachoweza kubofya. Kwenye skrini pana, kimewekwa zaidi kulia. Kitufe cha lightbox kimefichwa kwenye skrini ndogo, kinaonekana kwenye skrini za kati (lakini hakijibu kubofya), na kinatoweka tena kwenye skrini kubwa.
Lebo za mfululizo ndani ya kadi hizi zinaonyeshwa kama maandishi meupe mazito kwenye mandharinyuma ya rangi, kwa kutumia fonti ya serif. Sehemu ya kichwa kikuu ina ukingo wa chini, na kichwa kikuu kiko katika fonti nzito, kubwa ya serif. Vichwa vidogo vinatumia fonti sawa ya serif na nambari za lining.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}[
