Αυτό είναι ένα μπλοκ κώδικα CSS που ορίζει μια οικογένεια γραμματοσειρών που ονομάζεται "Guardian Headline Full" και καθορίζει από πού να φορτωθούν διαφορετικά αρχεία γραμματοσειρών. Περιλαμβάνει πολλαπλά βάρη γραμματοσειράς (light, regular, medium, semibold) και στυλ (κανονικό και πλάγιο), το καθένα με το δικό του σύνολο αρχείων προέλευσης σε διαφορετικές μορφές (WOFF2, WOFF και TTF) που φιλοξενούνται στον ιστότοπο του Guardian. Ο κώδικας διασφαλίζει ότι η γραμματοσειρά είναι διαθέσιμη για χρήση σε μια ιστοσελίδα συνδέοντας αυτά τα αρχεία.Αυτό είναι ένα φύλλο στυλ CSS που ορίζει όψεις γραμματοσειρών για την τυπογραφία του Guardian. Φορτώνει διάφορα αρχεία γραμματοσειρών (σε μορφές WOFF2, WOFF και TTF) για τις οικογένειες γραμματοσειρών "Guardian Headline Full" και "Guardian Titlepiece", προσδιορίζοντας διαφορετικά βάρη (light, regular, bold, black) και στυλ (κανονικό ή πλάγιο) για το καθένα. Οι διευθύνσεις URL δείχνουν σε αρχεία γραμματοσειρών που φιλοξενούνται στον διακομιστή στοιχείων του Guardian.Αυτό είναι ένα μπλοκ κώδικα CSS που ορίζει την οικογένεια γραμματοσειρών "Guardian Headline Full" με διάφορα βάρη και στυλ. Περιλαμβάνει πολλαπλούς κανόνες @font-face, καθένας από τους οποίους καθορίζει τα αρχεία προέλευσης της γραμματοσειράς σε διαφορετικές μορφές (woff2, woff και truetype) και τις αντίστοιχες ιδιότητες font-weight και font-style. Τα βάρη κυμαίνονται από 400 (regular) έως 900 (black), με διαθέσιμα και κανονικά και πλάγια στυλ για κάθε βάρος. Τα αρχεία γραμματοσειρών φιλοξενούνται στον διακομιστή στοιχείων του Guardian.Αυτό είναι ένα μπλοκ κώδικα CSS που ορίζει στυλ γραμματοσειράς και κανόνες διάταξης για μια ιστοσελίδα, πιθανώς από τον ιστότοπο του Guardian. Ρυθμίζει προσαρμοσμένες γραμματοσειρές (όπως "Guardian Headline" και "Guardian Titlepiece") με διαφορετικά βάρη και μορφές και στη συνέχεια χρησιμοποιεί ένα σύστημα διάταξης πλέγματος για να τακτοποιήσει ενότητες περιεχομένου (όπως τίτλο, επικεφαλίδα, σώμα κ.λπ.) με αποκριτικό τρόπο σε διαφορετικά μεγέθη οθόνης. Η διάταξη προσαρμόζει τις στήλες και το διάκενο σε διάφορα σημεία διακοπής (π.χ., 30em, 46.25em, 61.25em, 71.25em) για να διασφαλίσει τη σωστή εμφάνιση σε κινητά, tablet και επιτραπέζιους υπολογιστές.Για διαδραστικά σχήματα πλέγματος με καθηλωτικές λεζάντες, το στυλ της λεζάντας εφαρμόζει padding 4px στο επάνω μέρος και 0 στο κάτω μέρος. Αυτό ισχύει σε διάφορες περιοχές περιεχομένου, συμπεριλαμβανομένων των σωμάτων άρθρων, διαδραστικού περιεχομένου, ενοτήτων σχολίων και σωμάτων χαρακτηριστικών.
Στη διαδραστική διάταξη πλέγματος, οι ενότητες γραμμών και μεταδεδομένων τοποθετούνται στην περιοχή πλέγματος που εκτείνεται από τη σειρά 2, στήλη 1 έως τη σειρά 5, στήλη 2. Η ενότητα γραμμών έχει ύψος που ταιριάζει στο περιεχόμενό της, με επάνω περιθώριο 5px. Η ενότητα μεταδεδομένων έχει επάνω περιθώριο 18px.
Για οθόνες πλάτους άνω των 81.25em (1300px), το διαδραστικό πλέγμα χρησιμοποιεί διάταξη στηλών 219px, 1px, 620px, 80px και 300px.
Σε συσκευές iOS και Android, το κείμενο standfirst στις κεφαλίδες άρθρων χρησιμοποιεί την οικογένεια γραμματοσειρών Guardian Headline με μεσαίο βάρος. Η ενότητα kicker του άρθρου εμφανίζεται ως μπλοκ, με το πρώτο γράμμα κεφαλαίο. Το στοιχείο keyline-4 έχει επιπλέον επάνω padding 12px. Τα ονόματα συγγραφέων στην υπογραφή χρησιμοποιούν έντονο βάρος στη γραμματοσειρά Guardian Headline και οι σύνδεσμοι εντός αυτών είναι επίσης έντονοι. Οι εικόνες σε σχήματα άρθρων έχουν το ύψος τους ρυθμισμένο σε αυτόματο και οι παράγραφοι που ακολουθούν διαδραστικά άτομα δεν έχουν επάνω περιθώριο.Η γραμματοσειρά Guardian Headline Full ορίζεται με πολλαπλές μορφές αρχείων (woff2, woff και ttf) για ελαφρύ βάρος και κανονικό στυλ, καθώς και ελαφρύ πλάγιο στυλ.Δεν μπορώ να βοηθήσω με αυτό το αίτημα επειδή το κείμενο που παρείχατε είναι κώδικας CSS για τον ορισμό γραμματοσειρών ιστού, όχι περιεχόμενο φυσικής γλώσσας που μπορεί να ξαναγραφτεί σε άπταιστα Αγγλικά. Εάν έχετε ένα διαφορετικό κείμενο με το οποίο θέλετε να σας βοηθήσω, παρακαλώ μοιραστείτε το και θα χαρώ να σας βοηθήσω.Ορίστε το κείμενο ξαναγραμμένο σε άπταιστα, φυσικά Αγγλικά:
```
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}@media (min-width: 71.25em){.content__main-column--interactive{margin-left:160px}}@media (min-width: 81.25em){.content__main-column--interactive{margin-left:240px}}.content__main-column--interactive .element-atom{max-width:620px}@media (max-width: 46.24em){.content__main-column--interactive .element-atom{max-width:100%}}.content__main-column--interactive .element-showcase{margin-left:0}@media (min-width: 46.25em){.content__main-column--interactive .element-showcase{max-width:620px}}@media (min-width: 71.25em){.content__main-column--interactive .element-showcase{max-width:860px}}.content__main-column--interactive .element-immersive{max-width:1100px}@media (max-width: 46.24em){.content__main-column--interactive .element-immersive{width:calc(100vw - var(--scrollbar-width, 0px));position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--half-scrollbar-width, 0px))!important;margin-right:calc(-50vw + var(--half-scrollbar-width, 0px))!important}}@media (min-width: 46.25em){.content__main-column--interactive .element-immersive{transform:translate(-20px);width:calc(100% + 60px)}}@media (max-width: 71.24em){.content__main-column--interactive .element-immersive{margin-left:0;margin-right:0}}@media (min-width: 71.25em){.content__main-column--interactive .element-immersive{transform:translate(0);width:auto}}@media (min-width: 81.25em){.content__main-column--interactive .element-immersive{max-width:1260px}}.content__main-column--interactive p,.content__main-column--interactive ul{max-width:620px}.content__main-column--interactive:before{position:absolute;top:0;height:calc(100% + 15px);min-height:100px;content:""}@media (min-width: 71.25em){.content__main-column--interactive:before{border-left:1px solid #dcdcdc;z-index:-1;left:-10px}}@media (min-width: 81.25em){.content__main-column--interactive:before{border-left:1px solid #dcdcdc;left:-11px}}.content__main-column--interactive .element-atom{margin-top:0;margin-bottom:0;padding-bottom:12px;padding-top:12px}.content__main-column--interactive p+.element-atom{padding-top:0;padding-bottom:0;margin-top:12px;margin-bottom:12px}.content__main-column--interactive .element-inline{max-width:620px}@media (min-width: 61.25em){figure[data-spacefinder-role=inline].element{max-width:620px}}[data-gu-name=media]:has(figure.loop) figure.loop figcaption:not(.hidden){z-index:6}[data-gu-name=media]:has(figure.loop) figure.loop button[data-link-name*=gu-video-loop]{align-self:flex-end;margin-bottom:40px;margin-right:3px}[data-gu-name=media]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid=unmute-icon]),[data-gu-name=media]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid=mute-icon]) {
right: 0;
padding-left: 10px;
}
[data-gu-name=media]:has(figure.loop) #caption-button {
z-index: 100;
}
@media (min-width: 61.25em) {
[data-gu-name=media]:has(figure.loop) #caption-button {
bottom: 20px;
}
}
@media (min-width: 46.25em) {
[data-gu-name=media]:has(figure.cinemagraph) .cinemagraph>div {
max-height: unset;
}
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] {
width: 100%;
max-width: 620px;
display: block;
margin-top: 12px;
margin-bottom: 12px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}
@media (min-width: 71.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}
@media (min-width: 81.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, .72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
:root:root {
--subheading-text: var(--secondary-pillar);
--pullquote-text: var(--secondary-pillar);
--pullquote-icon: var(--secondary-pillar);
--block-quote-text: var(--article-text);
}
:root:root blockquote {
--block-quote-fill: var(--secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme=light]) {
--subheading-text: var(--darkmode-pillar);
--pullquote-text: var(--darkmode-pillar);
--pullquote-icon: var(--darkmode-pillar);
}
:root:root:not([data-color-scheme=light]) blockquote {
--block-quote-fill: var(--darkmode-pillar);
}
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body>div .element-atom:first-of-type+p:first-of-type,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#article-body>div hr:not(.last-horizontal-rule)+p,
.content--interactive>div .element-atom:first-of-type+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
.content--interactive>div hr:not(.last-horizontal-rule)+p,
#comment-body .element-atom:first-of-type+p:first-of-type,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#comment-body hr:not(.last-horizontal-rule)+p,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p,
#feature-body .element-atom:first-of-type+p:first-of-type,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#feature-body hr:not(.last-horizontal-rule)+p {
padding-top: 14px;
}
#article-body>div .element-atom:first-of-type+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#article-body>div hr:not(.last-horizontal-rule)+p:first-letter,
.content--interactive>div .element-atom:first-of-type+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div hr:not(.last-horizontal-rule)+p:first-letter,
#comment-body .element-atom:first-of-type+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#comment-body hr:not(.last-horizontal-rule)+p:first-letter,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p:first-letter,
#feature-body .element-atom:first-of-type+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#feature-body hr:not(.last-horizontal-rule)+p:first-letter {
/ Δεν ορίζεται συγκεκριμένο στυλ εδώ, αλλά ο επιλογέας διατηρείται για πιθανή διαμόρφωση στυλ /
}Αυτό είναι ένα μπλοκ κώδικα CSS, όχι ένα κείμενο που πρέπει να ξαναγραφτεί σε φυσικά Αγγλικά. Περιέχει επιλογείς και κανόνες στυλ για έναν ιστότοπο, πιθανώς τις σελίδες άρθρων του Guardian. Εάν θέλετε, μπορώ να εξηγήσω τι κάνει αυτό το CSS σε απλά Αγγλικά ή μπορείτε να παρέχετε ένα διαφορετικό κείμενο για επανεγγραφή. Ενημερώστε με πώς θέλετε να προχωρήσουμε!figure.element.element--showcase.element-showcase,
[data-gu-name="body"] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name="headline"] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name="standfirst"] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name="standfirst"] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name="standfirst"] li a,
.furniture-wrapper [data-gu-name="standfirst"] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name="standfirst"] li a:hover,
.furniture-wrapper [data-gu-name="standfirst"] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role="inline"].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: 0.5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
left: -0.5px;
}
}
.furniture-wrapper #headline,
.furniture-wrapper [data-gu-name="headline"],
.furniture-wrapper .headline {
position: relative;
}
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
font-weight: 500;
max-width: 540px;
font-size: 36px;
line-height: 115%;
}
@media (min-width: 71.25em) {
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
font-size: 50px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper #keyline,
.furniture-wrapper [data-gu-name="keyline"],
.furniture-wrapper .keyline,
.furniture-wrapper #lines,
.furniture-wrapper [data-gu-name="lines"],
.furniture-wrapper .lines {
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper #keyline,
.furniture-wrapper [data-gu-name="keyline"],
.furniture-wrapper .keyline,
.furniture-wrapper #lines,
.furniture-wrapper [data-gu-name="lines"],
.furniture-wrapper .lines {
display: none;
}
}
.furniture-wrapper #lines,
.furniture-wrapper [data-gu-name="lines"],
.furniture-wrapper .lines {
stroke: var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
margin-right: 0;
}
.furniture-wrapper #meta .social-icon,
.furniture-wrapper #meta .comment,
.furniture-wrapper #meta .comment__link,
.furniture-wrapper #meta .comment__link .comment__icon,
.furniture-wrapper #meta .comment__link .comment__icon svg,
.furniture-wrapper [data-gu-name="meta"] .social-icon,
.furniture-wrapper [data-gu-name="meta"] .comment,
.furniture-wrapper [data-gu-name="meta"] .comment__link,
.furniture-wrapper [data-gu-name="meta"] .comment__link .comment__icon,
.furniture-wrapper [data-gu-name="meta"] .comment__link .comment__icon svg {
border-color: var(--headerBorder);
}
.furniture-wrapper #meta .meta__misc,
.furniture-wrapper [data-gu-name="meta"] .meta__misc {
display: none;
}
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"],
.furniture-wrapper .standfirst {
padding-left: 10px;
position: relative;
}
@media (min-width: 61.25em) {
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"],
.furniture-wrapper .standfirst {
padding-top: 4px;
}
}
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p,
.furniture-wrapper .standfirst p {
font-weight: 500;
font-size: 20px;
line-height: 115%;
padding-bottom: 8px;
}
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
position: relative;
margin-top: 0;
margin-bottom: 12px;
}
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
width: 100%;
}
@media (min-width: 61.25em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-bottom: 0;
}
}
@media (max-width: 61.24em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
width: calc(100vw - var(--scrollbar-width, 0px));
margin-left: -10px;
}
}
.furniture-wrapper #main-media figcaption,
.furniture-wrapper [data-gu-name="media"] figcaption {
position: absolute;
bottom: 0;
background-color: var(--captionBackground);
color: var(--captionText);
padding: 6px 8px;
font-size: 12px;
line-height: 14px;
}
.furniture-wrapper #main-media figcaption span,
.furniture-wrapper [data-gu-name="media"] figcaption span {
color: var(--headerBorder);
}
.furniture-wrapper #main-media figcaption span:first-child,
.furniture-wrapper [data-gu-name="media"] figcaption span:first-child {
display: none;
}
.furniture-wrapper #main-media figcaption span:nth-child(2),
.furniture-wrapper [data-gu-name="media"] figcaption span:nth-child(2) {
display: inline;
}
@media (max-width: 46.24em) {
.furniture-wrapper #main-media figcaption,
.furniture-wrapper [data-gu-name="media"] figcaption {
padding: 8px 10px;
}
}
.furniture-wrapper #main-media figcaption.hidden,
.furniture-wrapper [data-gu-name="media"] figcaption.hidden {
opacity: 0;
}
.furniture-wrapper #main-media #caption-button,
.furniture-wrapper [data-gu-name="media"] #caption-button {
position: absolute;
bottom: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.5);
border: none;
border-radius: 50%;
padding: 8px;
cursor: pointer;
z-index: 10;
}
.furniture-wrapper #main-media #caption-button svg,
.furniture-wrapper [data-gu-name="media"] #caption-button svg {
width: 16px;
height: 16px;
transform: scale(0.8);
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-top: 20px;
height: auto;
}
.content__main-column--interactive h2 {
max-width: 620px;
}
}
@media (prefers-color-scheme: dark) {
body.ios:not([data-color-scheme=light]),
body.android:not([data-color-scheme=light]) {
--feature: #ff7f0f;
--darkmode-pillar: #ff7f0f;
--new-pillar-colour: var(--darkmode-pillar);
}
}
body.ios #feature-article-container .furniture-wrapper #headline > div:first-child,
body.ios #standard-article-container .furniture-wrapper #headline > div:first-child,
body.ios #comment-article-container .furniture-wrapper #headline > div:first-child,
body.android #feature-article-container .furniture-wrapper #headline > div:first-child,
body.android #standard-article-container .furniture-wrapper #headline > div:first-child,
body.android #comment-article-container .furniture-wrapper #headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
body.ios #feature-article-container .furniture-wrapper #headline h1,
body.ios #standard-article-container .furniture-wrapper #headline h1,
body.ios #comment-article-container .furniture-wrapper #headline h1,
body.android #feature-article-container .furniture-wrapper #headline h1,
body.android #standard-article-container .furniture-wrapper #headline h1,
body.android #comment-article-container .furniture-wrapper #head
