publico dark mode by jah

/* ==UserStyle==
@name         publico dark mode
@version      20240204.08.57
@namespace    https://userstyles.world/user/jah
@description  dark mode para o jornal público, com algumas alterações e suporte para monitores 1440p
@author       jah
@license      CC
==/UserStyle== */

@-moz-document url-prefix("https://trinitymedia.ai/player/trinity-player.php?pageURL=https%3A%2F%2Fwww.publico.pt"), domain("publico.pt") {
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: 'publico-banner';
    src: url("https://static.publicocdn.com/files/site/assets/fonts/publico-bannerbold.woff2") format("woff2"),url("https://static.publicocdn.com/files/site/assets/fonts/publico-bannerbold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'publico-banner';
    src: url("https://static.publicocdn.com/files/site/assets/fonts/publico-bannerbolditalic.woff2") format("woff2"),url("https://static.publicocdn.com/files/site/assets/fonts/publico-bannerbolditalic.woff2") format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        /* grey scale */
        --w: #fff;
        --wAlpha: 0, 0%, 100%;
        --grey10: hsl(0, 0%, 86%);
        --grey15: hsl(0, 0%, 78%);
        --grey20: hsl(0, 0%, 69%);
        --grey25: hsl(0, 0%, 61%);
        --grey30: hsl(0, 0%, 53%);
        --grey40: hsl(0, 0%, 39%);
        --grey50: hsl(0, 0%, 28%);
        --grey60: hsl(0, 0%, 20%);
        --grey70: hsl(0, 0%, 13%);
        --grey80: hsl(0, 0%, 9%);
        --grey90: hsl(0, 0%, 7%);
        --grey100: hsl(0, 0%, 5%);

        /* colours */
        --yellow: #f8dc51;
        --yellowB: #f5cf12;
        --brand: hsl(353, 100%, 41%);
        --brandAlpha: 353, 100%, 41%;
        --main: hsl(353, 100%, 63%);
        --mainB: hsl(353, 100%, 97%);
        --mainAlpha: 353, 100%, 63%;
        --opiniao: #b90017;
        --opiniaoAlpha: 353, 100%, 36%;
        --verde: #72bf44;
        --verdeB: #9ff16e;
        --verdeAlpha: 98, 49%, 51%;
        --ipsilon: #f58220;
        --ipsilonAlpha: 28, 91%, 54%;
        --fugas: #40B0B6;
        --fugasAlpha: 183, 48%, 48%;
        --impar: #C7AFC2;
        --imparAlpha: 313, 18%, 73%;
        --p3: #B93C12;
        --p3Alpha: 15, 82%, 40%;
        --cinecartaz: #ffaa00;
        --cinecartazAlpha: 40, 100%, 50%;
        --paid: #e0eef3;
        --paidAlpha: 196, 44%, 92%;
        --paidB: #389cbd;
        --paidDark: 195, 44%, 22%;
        --gold: #bc9053;
        --BorderColor: var(--grey60);
        --ukraineA: 211, 100%, 36%;
        --ukraineB: 51, 100%, 50%;
        
        /* spacers */
        --spacer0: .5rem;
        --spacer10: 1rem;
        --spacer20: 1.5rem;
        --spacer30: 2rem;
        --spacer40: 2.5rem;
        --spacer50: 3.5rem;
        --p-grid-gap: 1.6rem;
        --p-grid-gutter: 3.2rem;

        --maxWb: 80vw;
        --maxW: 144.8rem;

        --colW: 20vw;
        --colGap: 2.4rem;

        /* misc */
        --trans: all .2s ease; /* rights are human rights */

        /* */
        --heading: normal normal 700 2.2rem/1.2 "publico-medium",publico,Georgia,serif;

        /**/
        --brand10: hsl(354deg, 67%, 94%);
        --brand15: hsl(353deg, 69%, 68%);
        --brand20: hsl(353deg, 69%, 54%);
        --brand25: hsl(353deg, 100%, 39%);
        --brand30: hsl(353deg, 100%, 33%);
        --brand40: hsl(353deg, 100%, 28%);
        --brand50: hsl(353deg, 100%, 25%);
        --brand60: hsl(353deg, 100%, 21%);
        --brand70: hsl(353deg, 100%, 18%);
        --brand80: hsl(353deg, 100%, 15%);
        --brand90: hsl(353deg, 100%, 11%);
        --brand100: hsl(353deg, 100%, 7%);
        /* */
        --desp: #5fc4ff;
        --despB: #2bb1ff;
        --despAlpha: 200, 100%, 39%;
        --verde: #72bf44;
        --verdeB: #9ff16e;
        --verdeAlpha: 98, 49%, 51%;
        --ipsilon: #f58220;
        --ipsilonAlpha: 28, 91%, 54%;
        --fugas: #40B0B6;
        --fugasAlpha: 183, 48%, 48%;
        --impar: #C7AFC2;
        --imparAlpha: 313, 18%, 73%;
        --p3: #B93C12;
        --p3Alpha: 15, 82%, 40%;
        --p3A: #2b1811;
        --p3B: #3d1d12;
        --cinecartaz: #ffaa00;
        --cinecartazAlpha: 40, 100%, 50%;
        --paid: #e0eef3;
        --paidAlpha: 196, 44%, 92%;
        --paidB: #389cbd;
        --paidDark: 195, 44%, 22%;

        --fontSans: "Libre Franklin";
        
        /* */
        --brand-primary: var(--brand15);
        --color-light: var(--grey10);
        --base-neutral-40: var(--grey10);
        --base-neutral-70: var(--grey100);
    }
    
    html.darkmode body.hp2022, html.darkmode body.v2020:not(.tone--paid), html.darkmode body.page--category-listing, html.darkmode body.page--static, html.darkmode body.layout--custom-post.tone--news, html.darkmode body.darkable {
        --background: var(--grey90);
    }
}


*, html * {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body, body.hp2022 {
    background-color: var(--grey100);
    color: var(--grey10);
}

a, a:hover {
    opacity: 1;
    transition: var(--trans);
    text-decoration: underline;
    text-decoration-color: hsla(var(--mainAlpha), .15);
    text-decoration-style: dashed;
    text-underline-offset: 25%;
    text-decoration-thickness: 1px;
}

a:hover {
    text-decoration-color: var(--brand15);
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
}

html.darkmode body.hp2022 a:hover:not(.btn--subscribe--header):not(.btn--offer--header):not(.aside--cta__button):not(.button--subscriptions):not(.masthead__branding__heading a) {
    color: unset;
    fill: unset;
    opacity: unset;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1.6rem;
}

p {
    margin-bottom: 2.4rem;
}

br {
    content: '';
    margin-top: .4rem;
    display: block;
}

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea {
    height: 4rem;
    margin: 0;
    padding: 0 1.2rem;
    border: .1rem solid var(--BorderColor);
    border-radius: .2rem;
    background-color: var(--w);
    box-shadow: unset;
    color: var(--grey100);
    transition: var(--trans);
    display: flex;
    align-items: center;
}

[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, textarea:focus {
    border: .1rem solid var(--grey50);
    box-shadow: 0 0 1.6rem -.4rem var(--brand60);
}

[type='text']:hover, [type='password']:hover, [type='date']:hover, [type='datetime']:hover, [type='datetime-local']:hover, [type='month']:hover, [type='week']:hover, [type='email']:hover, [type='number']:hover, [type='search']:hover, [type='tel']:hover, [type='time']:hover, [type='url']:hover, [type='color']:hover, textarea:hover {
    box-shadow: 0 0 .8rem -.4rem var(--brand20);
}

textarea {
    padding: .8rem 1.2rem;
}

textarea::placeholder,
input::placeholder {
    color: var(--grey40);
}

textarea:-ms-input-placeholder,
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--grey40);
}

textarea::-ms-input-placeholder,
input::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--grey40);
}

::selection {
    color: var(--grey100);
    background-color: var(--brand15);
}

* > ::selection {
    color: var(--grey100) !important;
    background-color: var(--brand15) !important;
}

/* set text colours */
.popular__item a:hover, body.v2020:not(.tone--paid) .button.optin-expert__button:hover, body.v2020:not(.tone--paid) .story__actions .button-feedback:hover, .tabs-title>a:hover, .tabs-title>a:focus, .tabs-title>a[aria-selected=true] {
    color: var(--w);
}
.latest__item__headline a:hover{
    color: var(--w) !important;
}

.tone--azul.layout--longform-full .story__header-inner h1.headline.story__headline, .tone--azul.v2020.layout--longform .story__header-inner h1.headline.story__headline, body.v2020 .story .lead, .tabs-title>a, .hero__title, .hero__subtitle, .aniv__summary, .aniv__header, .aniv__header h3, .aniv__header h1, .page--search .headline-list__blurb, .intro-lead h2, .question--container .question, .section p, #extra-navbar ul li a, .tabs-content, .module--comments .module__heading--major, .newsletter-subscription__form .callout p, .stack_social_tools .header_socialTools>h2, .layout--longform-full .story__headline, .layout--longform-full .story__labels .kicker, .tone--opinion .story__header .byline a, .menuFactos a.link-todos-active, .menuFactos a.link-todos:hover, .menuFactos .wrapper a, .new-prova-dos-factos h2, .fonts-a-loaded .page__content .page__header .page__title, .page__content .page__header .page__blurb p, .media-badge, .label.label--updating, .masthead--thin .mini-nav ul a, .site-message.site-message--breaking .site-message__kicker, .site-message.site-message--breaking .site-message__headline, .live-highlights__item h3 a, .masthead__nav a, .theme__ul, .theme__title a, .block__header a, .article__title a, .latest__item a, .popular__item a, .column__header a, .article__lead, .aside__description, .article__related__item h3 a,  #main-footer h3, .headline a, .headline_ a, .social-tools__menu > li > a, .card--embed .card__blurb, .page.special-longform .cover .special__headline h1, .page.special-longform, .page.special-longform .special__details, .special-inst-article-bar .page-header--container .page-header--wrapper .page-header h1, .page--listing .module__button--more, ...