Dette er et CSS-stylesheet, der definerer skriftfamilien "Guardian Headline Full" til brug på et website. Det indeholder flere font-face-regler, som hver angiver en forskellig vægt (light, regular, medium, semibold) og stil (normal eller kursiv) af skrifttypen. For hver variant angiver reglen skrifttypefilerne i forskellige formater—WOFF2, WOFF og TTF—så browsere kan vælge den mest kompatible. Skrifttypefilerne er hostet på Guardians asset-server, og reglerne sikrer, at skrifttypen anvendes korrekt, når siden indlæses.Dette er en blok af CSS-kode, der definerer skrifttypestile til et website. Den opsætter forskellige skriftfamilier, vægte og stilarter til Guardians typografi. Koden inkluderer font-face-regler for "Guardian Headline Full" og "Guardian Titlepiece," som specificerer forskellige skrifttypefiler (som woff2-, woff- og ttf-formater) og deres tilsvarende vægte (såsom fed, kursiv, black, light og regular). Disse regler sikrer, at skrifttyperne indlæses korrekt på tværs af forskellige browsere og enheder.Her er teksten omskrevet til flydende, naturligt engelsk:
Dette er et sæt font-face-regler for skriftfamilien "Guardian Headline Full". Hver regel definerer en anden stil og vægt af skrifttypen, der peger på det samme sæt filer, men med forskellige navne. Filerne er hostet på Guardians assets-server.
Reglerne dækker følgende stilarter:
- Regular (vægt 400) i normal og kursiv stil
- Medium (vægt 500) i normal og kursiv stil
- Semibold (vægt 600) i normal og kursiv stil
- Bold (vægt 700) i normal og kursiv stil
- Black (vægt 900) i normal og kursiv stil
For hver stil leveres skrifttypefilerne i tre formater: WOFF2, WOFF og TTF. Browseren vil bruge det første format, den understøtter, i den rækkefølge.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 {
/ Ingen yderligere stilarter specificeret her /
}
}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;--activeHer er den omskrevne tekst på flydende, naturligt engelsk:
---
- Pillar 500: #00b2ff;
- Active Pillar 600: #90dcff;
- Furniture card gradient color: rgba(0, 78, 124, .6)
For Android-enheder:
- Øverste værktøjslinjehøjde: 58px
- Nederste værktøjslinjehøjde: 56px
- Viewport-højde (ekskl. øverste værktøjslinje): calc(100vh - 58px)
For iOS-enheder:
- Øverste værktøjslinjehøjde: 44px
- Nederste værktøjslinjehøjde: 50px
- Øverste værktøjslinjehøjde (alternativ): 20px
- Viewport-højde (ekskl. nederste værktøjslinje): calc(100vh - 50px)
På skærme med mindst 670px højde på iOS:
- Nederste værktøjslinjehøjde: 84px
- Øverste værktøjslinjehøjde: 44px
På skærme med mindst 800px højde på iOS:
- Øverste værktøjslinjehøjde: 94px
Den øverste bannerannoncebeholder er skjult som standard.
For interaktive artikler har hovedindholdsområdet ingen polstring.
På skærme bredere end 61.25em bruger det interaktive grid en enkelt kolonne uden mellemrum, og layoutområderne er ordnet som: title, headline, standfirst, media, lines, meta, body og et tomt område.
På skærme bredere end 71.25em bliver griddet fire kolonner: 79px, 1px, auto og 79px, med 10px mellemrum. Layoutområderne er arrangeret som: title, border, headline og right column i første række; derefter border, standfirst og right column; derefter border, media og right column; derefter border, body og right column; og til sidst border og right column.
På skærme bredere end 81.25em udvides sidekolonnerne til 159px hver.
Titelafsnittet er skjult (nul højde, overflow hidden).
Hovedindholdsområdet har ingen topmargin.
På skærme bredere end 46.25em har hovedindholdet ingen højre polstring.
Den interaktive hovedkolonne er placeret relativt.
Eventuelle element-atomer inde i den er skjulte (nul højde, ingen margin eller polstring).
Mediesektionen er sticky, placeret øverst til venstre, og fylder hele viewportens bredde og højde, med en z-index på 0.
Et mørkt overlay (halvgennemsigtigt sort) placeres over mediet, oprindeligt usynligt, og toner ind, når teksten udvides.
På skærme bredere end 46.25em er mediesektionen 740px bred, uden venstre margin.
På skærme bredere end 61.25em bliver den 630px bred og er justeret til højre.
Billedteksten inde i mediet er placeret øverst med ekstra polstring.
Figurer og lightbox-billeder inde i mediet starter usynlige og toner ind over et halvt sekund.
Deres indre spænd er skjulte, og deres div'er fylder fuld højde.
Checkbox- etiketten er skjult.
På bredere skærme er eventuelle knapper inde i links fuldt synlige og lagt ovenpå.
Billeder er justeret til toppen.
Når en figur eller lightbox har klassen "show-me", bliver den synlig.
For brugere, der foretrækker reduceret bevægelse, er tone-effekten deaktiveret.
Figurer og lightbox-billeder er placeret absolut inde i mediebeholderen.[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 er ikke understøttet som hovedmedie i SnapSlides. Fjern loopet, og vælg en cinemagraph eller et statisk billede i stedet.";
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
Her er den omskrevne tekst på flydende, naturligt engelsk:
Indholdskolonnen bruger flexbox til at centrere elementer både vandret og lodret. Når et medieelement indeholder en YouTube-embed, justerer kortfigurens beholder sin højde til at passe indholdet, tilføjer afrundede hjørner og skjuler overflow. Iframes inde i interaktive medieblokke fylder hele højden af deres beholder.
Kort-wrapperen er placeret relativt i forhold til siden og flyttet op med fuld viewport-højde. På skærme bredere end 61.25em (ca. 980px) er wrapperen begrænset til 460px bred med en lille venstre margin. På skærme bredere end 71.25em (ca. 1140px) fjernes den venstre margin.
For mørke temaartikler er kantfarven sat til en mørkegrå. På skærme bredere end 46.25em (ca. 740px) bliver artikelbaggrunden en meget mørkegrå. Mediepladsholdere og kortfigurer inde i disse artikler bruger en lidt lysere mørk baggrund på mindre skærme, og skifter til den samme mørkegrå som artiklen på større skærme.
I iOS-appen fylder mediesektioner hele viewport-højden, og kort-wrapperen flyttes op med samme mængde. Metasektionen skjuler sin beholder, når den indeholder en "Listen to Article"-komponent.
Når systemet er i mørk tilstand (og siden ikke er tvunget til lys tilstand), anvendes de samme mørke tema-justeringer: artikelkanten bliver mørkegrå, baggrunden bliver meget mørkegrå på større skærme, og mediepladsholdere og kortfigurer bruger de passende mørke nuancer.
Rodelementet definerer en delingsknapfarve baseret på den aktive pillar og sætter en opacitetsværdi. Artikelkort med "furniture"-stilen bruger space-between til layout og har polstring. En infoknap vises i øverste højre hjørne af disse kort—den er cirkulær, halvgennemsigtig og klikbar. På bredere skærme er den placeret længere til højre. En lightbox-knap er skjult på små skærme, vises på mellemstore skærme (men reagerer ikke på klik), og forsvinder igen på store skærme.
Serieetiketter inde i disse kort vises som fed hvid tekst på en farvet baggrund, med en serif-skrifttype. Overskriftssektionen har bundmargin, med hovedoverskriften i en fed, stor serif-skrifttype. Underoverskrifter bruger den samme serif-skrifttype med lining-tal.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:not([data-color-scheme=light]) article .article-card--content.furniture-card--content{background:linear-gradient(0deg,#12121266 0% 100%),var(--furniture-card-gradient-color)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=headline] h1{color:var(--active-pillar-500)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta]{--byline: var(--active-pillar-500)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] a,:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] svg{--article-link-text: var(--active-pillar-500);--share-button: var(--active-pillar-500)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] .byline,:root:root:not([data-color-scheme
