ArticleTemplates/assets/scss/layout/_article--sponsorship.scss

/* Supported: tone--news, tone--feature1, tone--feature2, tone--feature3, tone--media, tone--podcast */

@mixin sponsorship {
    padding: 0;
    display: block;
    position: relative;
    font-size: 1.6rem;

    .sponsorship__inner {
        padding: 12px 0;
        position: relative;

        @include mq($from: col4) {
            margin-left: 240px;
            margin-right: 320px
        }
    }

    .sponsorship__formatted-sponsor-name {
        @include mq($to: col4) {
            padding: 0 0 0 12px;
        }
        display: inline-block;
        vertical-align: middle;
    }

    .sponsorship__logo {
        vertical-align: top;

        @include mq($to: col2) {
            float: right;
            margin-right: 12px;
        }
    }

    @include mq($from: col4) {
        padding: {
            left: 0;
        }
    }

    &.keyline::before {
        background-color: transparent;
    }
}

.is_advertising {
    @include mq($from: col4) {
        background-color: color(brightness-96);
    }

    /* Common */
    &.tone--news,
    &.tone--feature1,
    &.tone--feature2,
    &.tone--feature3,
    &.tone--media,
    &.tone--podcast {
        .section,
        .section__container .content__series-label,
        .headline,
        .standfirst,
        .byline,
        .article__body,
        .article__body > .prose > p:first-of-type::first-letter,
        .element-rich-link a::before,
        .element-rich-link a,
        .prose h2,
        .article--liveblog .article__header .section {
            font-family: $guardian-sans;
        }

        .article {
            .sponsorship.sponsored {
                display: none !important;
            }

            .sponsorship.paid {
                @include sponsorship;
            }

            .article {
                &__header {
                    .alerts,
                    .meta__pubdate,
                    .section__container {
                        display: none;
                    }

                    .headline,
                    .standfirst,
                    .standfirst__inner,
                    .sponsorship,
                    .meta,
                    .content__labels {
                        color: color(global-adv-text);
                    }

                    .headline {
                        padding-bottom: 18px;
                    }

                    .meta__misc .sponsorship__logo {
                        @include mq($to: col2) {
                            margin-right: 0px;
                        }
                    }

                    .meta__misc .byline {
                        font-style: normal;
                    }

                    .meta__misc,
                    .standfirst__inner {
                        padding-bottom: 12px;
                    }

                    a,
                    .byline {
                        color: color(global-adv-shade-1) !important;
                    }

                    .standfirst a {
                        text-decoration: none;
                    }

                    ul > li::before,
                    .bullet::before {
                        background-color: color(global-adv-bands);
                    }

                    ul > li,
                    ul > li strong {
                        color: color(brightness-7);
                    }

                    ul > li strong {
                        font-weight: bold;
                    }
                }

                &__body {
                    color: color(global-adv-text);

                    .prose p,
                    .prose li {
                        @include text-underline(color(global-adv-shade-1), lighten(color(global-adv-shade-1), 10%));
                    }

                    .prose .advert-slot--mpu {
                        border-top: 0;
                    }

                    .prose .element-pullquote blockquote,
                    .prose .element-pullquote blockquote cite,
                    .prose .element-pullquote blockquote::before,
                    .prose .element-pullquote blockquote::after {
                        color: color(global-adv-shade-1);
                    }

                    .prose figure figcaption,
                    .prose .element-rich-link {
                        border-color: rgba(color(global-adv-bands), .4);
                    }

                    .prose figure.portrait-thumbnail figcaption {
                        background: none;
                        border-top: 1px color(brightness-60) dotted;
                        border-bottom: 1px color(brightness-60) dotted;
                        color: color(brightness-20);
                    }

                    .prose figure.figure--thumbnail-with-caption {
                        background: none;
                    }
                }
            }

            .element-placeholder .element-placeholder__button {
                .touchpoint__button {
                    background-color: color(global-adv-shade-2);

                    &:active {
                        color: color(global-adv-bands);
                        background-color: color(global-adv-text);
                    }
                }

                .touchpoint__label {
                    color: color(global-adv-shade-2);
                    text-shadow: 0 0 4px  rgba(0, 0, 0, .5);
                }
            }

            .element-placeholder:active .touchpoint__button {
                color: color(global-adv-bands);
            }

            .tags {
                .inline-list .inline-list__item a {
                    color: color(brightness-100);
                    background-color: color(global-adv-bands);
                }

                .inline-list .inline-list__item.more-button a {
                    border: 1px solid rgba(color(global-adv-bands), 1);
                    color: color(global-adv-text);
                }
            }

            @include mq($from: col4) {
                background-color: color(brightness-96);

                .article {
                    &__header,
                    &__header .standfirst {
                        background-color: color(brightness-96);
                    }
                }

            }
        }

        .comments {
            display: none;
        }

    }

    /* News overrides */
    &.tone--news {
        .article {
            .article {
                &__header {
                    .meta {
                        border-bottom: 0;
                    }

                    .main-media {
                        figcaption {
                            border-bottom: 0;
                        }
                        @include mq($from: col4) {
                            border-bottom: 0;
                        }
                    }
                }

                &__body {
                    border-bottom: 1px rgba(color(global-adv-bands), .4) dotted;
                }
            }

            .tags {
                border-top: 0;
            }
        }

        @include mq($from: col4) {
            .audio-player__container, .audio-player__container_new {
                background: color(brightness-96);
            }
        }
    }

    /* Feature overrides */
    &.tone--feature1,
    &.tone--feature2,
    &.tone--feature3 {
        .article {
            a:active {
                color: lighten(color(global-adv-text), 10%);
            }

            .article__body > .prose:not(.prose--has-thumbnails-without-caps) > p {
                @include dropcap(color(global-adv-shade-1));
            }

            .article {
                &__header {
                    .headline {
                        background-color: color(brightness-74);
                    }

                    .standfirst__inner,
                    .meta {
                        border-bottom: 1px rgba(color(global-adv-bands), .4) dotted;
                    }
                }
            }
        }
    }

    /* Video overrides */
    &.tone--news[data-content-type='video'],
    &.tone--media[data-content-type='video'] {
        .article {
            .article {
                &__header {
                    .meta {
                        border-bottom: 1px rgba(color(global-adv-bands), .4) dotted;
                    }

                    .meta__published {
                        padding: 12px 0;
                    }

                    .meta .meta__misc {
                        border-top: 1px rgba(color(global-adv-bands), .4) dotted;

                        .sponsorship {
                            padding-top: 0;
                        }

                        .sponsorship__inner {
                            padding: 0;
                            margin: 0;
                        }

                        .sponsorship__formatted-sponsor-name {
                            padding-left: 0;
                        }

                        @include mq($from: col2) {
                            border-top: 0;
                            width: auto;
                            display: block;

                            .sponsorship__formatted-sponsor-name {
                                display: block;
                                padding-top: 0;
                                padding-bottom: 0;
                            }

                            .sponsorship__logo {
                                margin-left: 0;
                            }
                        }
                    }

                    .meta .standfirst {
                        @include mq($from: col4) {
                            padding-left: 0;
                            padding-right: 0;
                        }
                    }
                }
            }
        }
    }

    /* Audio overrides */
    &.tone--podcast,
    &.tone--news[data-content-type='audio'],
    &.tone--media[data-content-type='audio'] {
        .article {
            &__header {
                .headline {
                    margin-top: 0;
                }

                .meta {
                    display: none;
                }

                .cutout__background {
                    z-index: 1;
                }

                .cutout__container {
                    min-height: 155px;
                }

                @include mq($from: col4) {
                    .audio-player__container, .audio-player__container_new {
                        background-color: color(brightness-86);
                    }
                }

                .audio-player__wrapper,
                .audio-player {
                    background-color: color(tone-podcast-adv-ply-background);
                }

                .audio-player__button.touchpoint--primary .touchpoint__button,
                .audio-player__slider__knob {
                    background-color: color(global-adv-shade-2);

                    &:active {
                        background-color: darken(color(global-adv-shade-2), 10%);
                    }
                }

                .audio-player__slider__track {
                    background-color: color(tone-podcast-adv-ply-range);
                }
            }

            .sponsorship.sponsored {
                display: none !important;
            }

            .sponsorship.paid {
                @include sponsorship;
            }

            .sponsorship,
            .byline--mobile {
                border-bottom: 1px rgba(color(global-adv-bands), .4) dotted;
            }

            .byline,
            .byline a {
                color: color(global-adv-shade-1) !important;
            }

            &__body {
                .standfirst,
                .prose p {
                    color: color(global-adv-text);
                    @include text-underline(color(global-adv-shade-1), lighten(color(global-adv-shade-1), 10%));
                }
            }
        }
    }

    /* Gallery overrides */
    &.tone--news[data-content-type='gallery'],
    &.tone--media[data-content-type='gallery'] {
        .article {
            .article {
                &__header {
                    .meta {
                        border-bottom: 0;

                        .meta__misc {
                            border-top: 0;
                            border-bottom: 1px rgba(color(global-adv-bands), .4) dotted;
                        }
                    }

                    .standfirst {
                        border-bottom: 1px rgba(color(global-adv-bands), .4) dotted;
                    }

                    .sponsorship {
                        border-top: 0;
                    }

                    @include mq($from: col2) {
                        .sponsorship {
                            border-bottom: 0;
                            border-top: 1px rgba(color(global-adv-bands), .4) dotted;
                        }

                        .meta {
                            border-top: 1px rgba(color(global-adv-bands), .4) dotted;

                            .meta__misc {
                                border-top: 0;
                                border-bottom: 0;
                                border-left: 1px rgba(color(global-adv-bands), .4) dotted;
                            }
                        }

                        .standfirst {
                            border-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}