ArticleTemplates/assets/scss/tones/_tone--special.scss

.tone--special {
    @include pillar-colour(
        color(tone-special-dark),
        color(tone-special-dark),
        color(tone-special-light),
        color(tone-special-mid),
        color(news-liveblog-background),
        color(tone-highlight),
    );

    // Light background in opinion articles
    &:not(.garnett--type-media) {

        .article__header .cutout__container,
        .article__body,
        .article__meta,
        .tags {
            background-color: color(tone-special-light);
        }

        @include mq($to: col4) {
            .article__header {
                background-color: color(tone-special-light);
            }
        }
        @include mq($from: col4) {
            .article__header {
                .article-kicker,
                .standfirst__inner,
                .meta,
                .main-media {
                    background-color: color(tone-special-light);
                }
            }
            &:not(.garnett--type-comment, .garnett--type-immersive) .article__header .headline {
                background-color: color(tone-special-light);
            }
        }

        .headline {
            color: color(tone-special-dark);
        }

        // Prevents highlight overlapping section copy
        .article-kicker__copy .article-kicker__series {
            line-height: 2.2rem;

            @include mq($from: col2) {
                line-height: 2.8rem;
            }
        }

        .article-kicker__highlight {
            background-color: color(tone-highlight);
            box-shadow: 2px 0 color(tone-highlight), -2px 0 color(tone-highlight);
        }
    }

    &.garnett--type-immersive {
        .standfirst,
        .article__header-info:before {
            background-color: color(tone-special-light);
        }

        .headline {
            color: color(brightness-100);
        }
        .article__series a {
            color: color(tone-highlight);
        }
    }

    .tags__list-item {
        a {
            @include tag-button(color(brightness-7), color(brightness-86));
        }
        &.more-button a {
            @include tag-more-button(color(brightness-7), darken(color(brightness-86), 10%));
        }
    }
}