Ce code CSS définit une famille de polices personnalisée appelée "Guardian Headline Full" avec plusieurs styles et graisses. Il inclut des versions légère, normale, moyenne et semi-gras, chacune en styles normal et italique. Les fichiers de police sont fournis en trois formats — WOFF2, WOFF et TrueType — et sont hébergés sur les serveurs du Guardian.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-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;
}
div#maincontent:focus {
box-shadow: none !important;
}
body {
--primary-text-color: #121212;
--secondary-text-color: #707070;
--tertiary-text-color: #707070;
--primary-bg-color: #ffffff;
--secondary-bg-color: #f3f3f3;
--tertiary-bg-color: #f6f6f6;
--primary-line-color: #333333;
--secondary-line-color: #dcdcdc;
--border-divider-color: #dcdcdc;
--axis-color: #bababa;
--primary-button-color: #121212;
--primary-button-text-color: #ffffff;
--primary-button-highlight-color: #333333;
--highlight-color: #ffe500;
--highlighted-text-color: #121212;
--info-color: #00b2ff;
--news-grey-01: #121212;
--news-grey-02: #707070;
--news-grey-03: #a1a1a1;
--news-grey-04: #bababa;
--news-grey-05: #dcdcdc;
--news-grey-06: #f3f3f3;
--news-core-01: #005689;
--news-core-02: #0094da;
--news-core-03: #c70000;
--news-core-04: #23b4a9;
--news-core-05: #494949;
--news-core-06: #cca36e;
}
@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme=light]) body {
--primary-text-color: #dcdcdc;
--secondary-text-color: #c8c8c8;
--tertiary-text-color: #999999;
--primary-bg-color: #1a1a1a;
--secondary-bg-color: #383838;
--tertiary-bg-color: #121212;
--primary-line-color: #dcdcdc;
--secondary-line-color: #707070;
--border-divider-color: #606060;
--axis-color: var(--news-grey-04);
--primary-button-color: #383838;
--primary-button-text-color: #dcdcdc;
--primary-button-highlight-color: #707070;
--highlight-color: #cda500;
--highlighted-text-color: #121212;
--info-color: #0077b6;
--news-grey-01: #dcdcdc;
--news-grey-02: #c8c8c8;
--news-grey-03: #a1a1a1;
--news-grey-04: #707070;
--news-grey-05: #494949;
--news-grey-06: #383838;
--news-core-01: #0077b6;
--news-core-02: #00b2ff;
--news-core-03: #e33824;
--news-core-04: #23b4a9;
--news-core-05: #494949;
}
}:root {
--f100-mobile-background: none;
--f100-desktop-background: none;
}
.element-immersive {
width: auto;
left: auto;
right: auto;
}
.interactive-atom {
margin: 0;
padding: 0;
}
@media (max-width: 46.24em) {
.ios .element--immersive,
.android .element--immersive {
width: 100vw !important;
position: relative;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
}
}
@media (min-width: 46.25em) {
.ios .article__body,
.android .article__body {
padding-right: 12px !important;
}
}
.ios figure.element.element-atom,
.ios figure.interactive.interactive-atom.interactive--loading,
.android figure.element.element-atom,
.android figure.interactive.interactive-atom.interactive--loading {
padding: 0 !important;
}
.gv-right-render {
position: relative;
height: 100%;
width: auto;
}
.gv-detail-overlay {
top: 0;
left: 100%;
width: calc(100% - 40px);
height: 100%;
max-width: 400px;
z-index: 1050;
}
@media (min-width: 61.25em) {
.gv-detail-overlay {
display: block;
width: 320px;
height: 100%;
min-height: 400px;
}
}
@media (min-width: 81.25em) {
.gv-detail-overlay {
width: 400px;
height: auto;
min-height: 360px;
}
}
.gv-detail-overlay.opened {
transform: translate(-100%);
}
@media (min-width: 61.25em) {
.gv-detail-overlay.opened {
display: block;
}
}
.gv-detail-overlay.fix-pos {
position: fixed;
}
.gv-detail-overlay.abs-pos {
position: absolute;
}
.gv-detail-overlay.opened:before {
width: 20px;
height: 100%;
display: block;
content: "";
position: absolute;
left: -20px;
}
.gv-detail-scroll-area {
position: absolute;
padding: 0 0 100%;
top: 0;
left: 0;
bottom: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background-color: #fff;
box-shadow: -2px 0 6px rgba(0, 0, 0, 0.2);
}
@media (min-width: 61.25em) {
.gv-detail-scroll-area {
overflow: hidden;
box-shadow: none;
border-top: 1px solid #ffbb00;
border-bottom: none;
padding: 0 0 0 10px;
}
.gv-detail-scroll-area.add-border-bottom {
border-top: none;
}
}
.gv-detail-items-list {
position: relative;
width: calc(100% - 30px);
}
@media (min-width: 61.25em) {
.gv-detail-items-list {
width: 280px;
}
}
@media (min-width: 81.25em) {
.gv-detail-items-list {
width: 600px;
}
}
.gv-detail-item {
display: block;
height: auto;
margin: 0 0 24px;
padding-bottom: 12px;
}
@media (min-width: 61.25em) {
.gv-detail-item {
border-bottom: none;
}
}
.gv-detail-item.selected {
opacity: 1;
}
@media (min-width: 61.25em) {
.gv-detail-item.selected {
padding-top: 0;
display: block;
}
}
.gv-detail-item.no-border,
.gv-detail-item:first-child {
border: none;
}
.gv-detail-text1,
.gv-detail-text2,
.gv-detail-head-text {
font-size: 14px;
line-height: 20px;
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
}
.gv-detail-text1 h1,
.gv-detail-text2 h1,
.gv-detail-head-text h1 {
font-size: 20px;
line-height: 24px;
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
font-weight: 900;
}
.gv-detail-head-text {
height: auto;
margin-left: 12px;
}
.gv-detail-head-text h1 {
color: #333;
font-size: 28px;
line-height: 32px;
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
font-weight: 400;
font-weight: 200;
}
@media (min-width: 61.25em) {
.gv-detail-head-text h1 {
font-size: 36px;
line-height: 40px;
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
font-weight: 400;
font-weight: 200;
}
}
@media (min-width: 61.25em) {
.gv-detail-head-text {
margin-left: 0;
}
}
.gv-detail-head-text:before,
.gv-detail-head-text:after {
content: "";
display: block;
top: 0;
height: 1px;
width: 100vw;
margin-left: 90px;
border-bottom: 1px solid #dcdcdc;
}
@media (min-width: 61.25em) {
.gv-detail-head-text:before,
.gv-detail-head-text:after {
width: 50vw;
}
}
.gv-detail-head-text:after {
border-bottom: none;
border-top: 1px solid #dcdcdc;
}
@media (min-width: 61.25em) {
.gv-detail-head-text:after {
padding-bottom: 2px;
}
}
.gv-detail-main {
width: 100%;
height: auto;
margin: 0;
}
@media (min-width: 61.25em) {
.gv-detail-main {
height: auto;
}
}
.gv-detail-description {
margin-top: 12px;
font-size: 14px;
line-height: 20px;
font-family: Guardian Text Egyptian Web, Georgia, serif;
color: #333;
min-height: 24px;
}
@media (min-width: 61.25em) {
.gv-detail-description {
font-size: 16px;
line-height: 24px;
font-family: Guardian Text Egyptian Web, Georgia, serif;
height: auto;
}
}
.gv-detail-list-wrapper ul {
margin: 0;
padding: 0;
}
.gv-detail-list-wrapper ul li {
font-size: 14px;
line-height: 20px;
}Les styles CSS définissent une mise en page réactive pour un composant de galerie ou de vue en liste. Les éléments de liste ont une largeur minimale qui augmente sur les écrans plus grands, avec un texte en gras et sans puces. Les images de profil sont des vignettes circulaires avec un rapport d'aspect fixe. Un bouton de bascule permet de passer entre les vues en grille et en liste, changeant de position et de couleur sur le bureau. Les options de filtre incluent un menu déroulant au style personnalisé. Les titres s'ajustent en taille et en marge supérieure selon les points de rupture, avec une image de fond en pleine largeur qui s'adapte de manière réactive. L'en-tête de l'article a un fond transparent avec un pseudo-élément fournissant l'image de fond, qui change de la version mobile à la version bureau à des largeurs d'écran spécifiques..article__header:before {
background-size: auto 100%;
height: 350px;
background-image: var(--f100-desktop-background);
background-size: cover;
}
@media (min-width: 61.25em) {
article .content--interactive:before,
.article__header:before {
background-size: auto 100%;
height: 450px;
}
}
.gv-wrapper {
border-top: 1px solid #dcdcdc;
}
.gv-wrapper select {
background: var(--primary-bg-color) url(https://interactive.guim.co.uk/atoms/2025/09/top100-footballers-men/assets/v/1765877613169/down-arrow-blue-dark.png) no-repeat 93% 50%;
background-size: 16px auto;
}
.gv-header {
display: none !important;
}
.element-atom,
.interactive-atom {
margin: 0 !important;
height: auto;
}
.interactive-ad-banner {
display: flex;
justify-content: center;
}
.interactive-ad-banner .hide-until-tablet {
display: none;
}
@media (min-width: 46.25em) {
.interactive-ad-banner .hide-until-tablet {
display: inherit;
}
}
@media (min-width: 46.25em) {
.interactive-ad-banner .mobile-only {
display: none;
}
}
@media (min-width: 46.25em) {
.interactive-ad-banner .ad-slot--rendered {
margin: 0 0 80px;
}
}
#gv-mobile-dummy {
position: absolute;
display: block;
}
@media (min-width: 61.25em) {
#gv-mobile-dummy {
display: none;
}
}
.gv-no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
select:focus {
outline: none;
}
.gv-wrap-all {
position: relative;
width: 100%;
max-width: 1300px;
vertical-align: top;
margin: 1px auto 0;
min-height: 100vh;
border-top: 1px solid var(--
