Wannan shi ne takardar salon CSS wanda ke bayyana dangin rubutu na "Guardian Headline Full" don amfani a gidan yanar gizo. Ya ƙunshi ƙa'idodin font-face da yawa, kowanne yana ƙayyade nauyi daban (light, regular, medium, semibold) da salo (normal ko italic) na rubutun. Ga kowane bambancin, ƙa'idar tana ba da fayilolin rubutu a cikin nau'ikan daban-daban—WOFF2, WOFF, da TTF—domin masu bincike su iya zaɓar wanda ya fi dacewa. Fayilolin rubutun ana ɗaukar su ne a sabar hanyar sadarwa ta Guardian, kuma ƙa'idodin suna tabbatar da cewa an yi amfani da rubutun daidai lokacin da shafin ya ɗauka.
Wannan shi ne toshe na lambar CSS wanda ke bayyana salon rubutu don gidan yanar gizo. Yana saita nau'ikan dangin rubutu daban-daban, nauyi, da salo don rubutun Guardian. Lambar ta ƙunshi ƙa'idodin font-face don "Guardian Headline Full" da "Guardian Titlepiece," tare da ƙayyadaddun fayilolin rubutu daban-daban (kamar woff2, woff, da ttf) da nauyinsu daidai (kamar bold, italic, black, light, da regular). Waɗannan ƙa'idodin suna tabbatar da cewa rubutun yana ɗauka daidai a cikin masu bincike da na'urori daban-daban.
Anan ga rubutun da aka sake rubuta shi cikin Ingilishi mai kyau, na halitta:
Wannan shi ne saitin ƙa'idodin font-face don dangin rubutu na "Guardian Headline Full." Kowace ƙa'ida tana bayyana salo da nauyi daban na rubutun, tana nuni zuwa saitin fayiloli iri ɗaya amma da sunaye daban-daban. Fayilolin ana ɗaukar su ne a sabar hanyar sadarwa ta Guardian.
Ƙa'idodin sun rufe salon masu zuwa:
- Regular (nauyi 400) a cikin salon normal da italic
- Medium (nauyi 500) a cikin salon normal da italic
- Semibold (nauyi 600) a cikin salon normal da italic
- Bold (nauyi 700) a cikin salon normal da italic
- Black (nauyi 900) a cikin salon normal da italic
Ga kowane salo, ana ba da fayilolin rubutu a cikin nau'ikan uku: WOFF2, WOFF, da TTF. Mai bincike zai yi amfani da nau'in farko da yake goyon baya, a cikin wannan tsari.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 {
/ Babu ƙarin salon da aka ƙayyade anan /
}
}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;--activeAnan ga rubutun da aka sake rubuta shi cikin Ingilishi mai kyau, na halitta:
---
- Pillar 500: #00b2ff;
- Active Pillar 600: #90dcff;
- Furniture card gradient color: rgba(0, 78, 124, .6)
Don na'urorin Android:
- Tsayin toolbar na sama: 58px
- Tsayin toolbar na ƙasa: 56px
- Tsayin viewport (ban da toolbar na sama): calc(100vh - 58px)
Don na'urorin iOS:
- Tsayin toolbar na sama: 44px
- Tsayin toolbar na ƙasa: 50px
- Tsayin toolbar na sama (madadin): 20px
- Tsayin viewport (ban da toolbar na ƙasa): calc(100vh - 50px)
A kan allo aƙalla 670px tsayi akan iOS:
- Tsayin toolbar na ƙasa: 84px
- Tsayin toolbar na sama: 44px
A kan allo aƙalla 800px tsayi akan iOS:
- Tsayin toolbar na sama: 94px
Akwatin tallan banner na sama an ɓoye shi ta tsohuwar hanya.
Don labaran mu'amala, yankin babban abun ciki ba shi da padding.
A kan allo fiye da 61.25em, grid ɗin mu'amala yana amfani da ginshiƙi ɗaya ba tare da gibi ba, kuma an tsara wuraren kamar: title, headline, standfirst, media, lines, meta, body, da sarari mara amfani.
A kan allo fiye da 71.25em, grid ɗin ya zama ginshiƙai huɗu: 79px, 1px, auto, da 79px, tare da gibin 10px. An tsara wuraren kamar: title, border, headline, da right column a layi na farko; sannan border, standfirst, da right column; sannan border, media, da right column; sannan border, body, da right column; kuma a ƙarshe border da right column.
A kan allo fiye da 81.25em, ginshiƙan gefe sun faɗaɗa zuwa 159px kowanne.
Sashin take an ɓoye shi (tsayin sifili, overflow hidden).
Babban yankin abun ciki ba shi da tazarar sama.
A kan allo fiye da 46.25em, babban abun ciki ba shi da dama padding.
Babban ginshiƙin mu'amala an saita shi a matsayin relative.
Duk wani element atom a cikinsa an ɓoye shi (tsayin sifili, babu margin ko padding).
Sashin media yana daɗe, an saita shi a saman-hagu, yana ɗaukar cikakken faɗin viewport da tsayi, tare da z-index na 0.
Wani duhu mai rufi (semi-transparent black) an sanya shi a kan media, da farko ba a gani, kuma yana bayyana a hankali lokacin da aka faɗaɗa rubutun.
A kan allo fiye da 46.25em, sashin media yana da faɗin 740px, ba tare da tazarar hagu ba.
A kan allo fiye da 61.25em, ya zama 630px faɗi kuma an daidaita shi zuwa dama.
Rubutun ƙarƙashin hoto a cikin media an saita shi a saman tare da ƙarin padding.
Figures da lightbox images a cikin media sun fara ba a gani ba kuma suna bayyana a hankali cikin rabin daƙiƙa.
An ɓoye ƙananan spans ɗinsu, kuma divs ɗinsu suna ɗaukar cikakken tsayi.
An ɓoye alamar checkbox.
A kan allo masu faɗi, duk wani maɓalli a cikin links yana bayyana gaba ɗaya kuma yana saman.
Hotuna an daidaita su zuwa sama.
Lokacin da figure ko lightbox ke da class ɗin "show-me," ya zama bayyane.
Ga masu amfani waɗanda suka fi son rage motsi, an kashe tasirin fade.
Figures da lightbox images an saita su a matsayin absolute a cikin akwatin 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
}Anan ga rubutun da aka sake rubuta shi cikin Ingilishi mai kyau, na halitta:
Ginshiƙin abun ciki yana amfani da flexbox don daidaita abubuwa a tsakiya a kwance da kuma a tsaye. Lokacin da kafofin watsa labarai ya ƙunshi YouTube embed, akwatin card figure yana daidaita tsayinsa don dacewa da abun ciki, yana ƙara sasanninta masu zagaye, kuma yana ɓoye duk wani abu da ya wuce. Iframes a cikin toshe na kafofin watsa labarai na mu'amala suna ɗaukar cikakken tsayin akwatin su.
Akwatin cards an saita shi a matsayin relative zuwa shafin kuma an motsa shi sama da cikakken tsayin viewport. A kan allo fiye da 61.25em (kimanin 980px), akwatin yana iyakance zuwa 460px faɗi tare da ƙaramin tazarar hagu. A kan allo fiye da 71.25em (kimanin 1140px), an cire wannan tazarar hagu.
Ga labaran da ke da jigon duhu, an saita launin iyaka zuwa launin toka mai duhu. A kan allo fiye da 46.25em (kimanin 740px), bangon labarin ya zama launin toka mai duhu sosai. Media placeholders da card figures a cikin waɗannan labaran suna amfani da duhu mai ɗan haske a kan ƙananan allo, suna canzawa zuwa duhu mai duhu iri ɗaya da labarin a kan manyan allo.
A cikin app ɗin iOS, sassan kafofin watsa labarai suna ɗaukar cikakken tsayin viewport, kuma akwatin cards an motsa shi sama da wannan adadin. Sashin meta yana ɓoye akwatin sa lokacin da ya ƙunshi abun "Listen to Article."
Lokacin da tsarin ke cikin yanayin duhu (kuma ba a tilasta shafin zuwa haske ba), ana amfani da daidaitattun gyare-gyaren jigon duhu: iyakar labarin ya zama launin toka mai duhu, bangon ya zama launin toka mai duhu sosai a kan manyan allo, kuma media placeholders da card figures suna amfani da inuwar duhu daidai.
Tushen element yana bayyana launin maɓallin rabawa dangane da active pillar kuma yana saita ƙimar opacity. Labaran da ke da salon "furniture" suna amfani da space-between don layout kuma suna da padding. Maɓallin bayani yana bayyana a kusurwar sama-dama na waɗannan cards—yana da zagaye, semi-transparent, kuma ana iya danna shi. A kan allo masu faɗi, an saita shi ƙarin zuwa dama. Maɓallin lightbox an ɓoye shi a kan ƙananan allo, yana bayyana a kan matsakaicin allo (amma baya amsa dannawa), kuma ya ɓace a kan manyan allo.
Alamun jerin a cikin waɗannan cards ana nuna su azaman farin rubutu mai ƙarfi a kan launi mai launi, ta amfani da rubutun serif. Sashin headline yana da tazarar ƙasa, tare da babban taken a cikin rubutun serif mai ƙarfi, babba. Ƙananan taken suna amfani da wannan rubutun serif tare da lambobi masu layi.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){
