// ----------------------------------------------------------------------------- // This file contains all styles related to the footer of the site/application. // ----------------------------------------------------------------------------- /* Footer */ #colophon { border-top: 1px solid #e1e1e1; background-color: #fff; .footer-widgets-area { background: #272f32; padding-top: 40px; } .before-footer-area { background: #242b2f; padding-top: 40px; } .after-footer-area { background: #272f32; padding-top: 40px; padding-bottom: 55px; .site-title { color: #FFF; &:hover, &:focus, &:active { color: $color__brand-red; } } } .regular-footer-area { > .container { border-bottom: 1px solid #2f383c; } } } .site-info { background-color: $color__brand-red; padding: 15px 0; *, a { font-size: 15px; line-height: 25px; font-family: "Lato"; color: #FFF; } } .back-to-top { display: inline-block; height: 30px; width: 30px; position: fixed; bottom: 40px; right: 10px; color: $color__brand-red; border: 1px solid $color__brand-red; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; font-size: 23px; text-align: center; white-space: nowrap; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; line-height: 25px; z-index: 100; -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15); } .back-to-top.back-to-top-is-visible, .back-to-top.back-to-top-fade-out, .no-touch .back-to-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .back-to-top.back-to-top-is-visible { visibility: visible; opacity: 1; } .no-touch .back-to-top:hover { border: 1px solid $color__brand-red; opacity: 1; color: $color__brand-red; } @media only screen and (max-width: 768px) { .back-to-top { line-height: 0; } } @media only screen and (min-width: 768px) { .back-to-top { right: 20px; bottom: 20px; width: 30px; height: 30px; line-height: 25px; } } @media only screen and (min-width: 1024px) { .back-to-top { height: 30px; width: 30px; right: 30px; bottom: 30px; line-height: 25px; } } .back-to-top { background: #FF3D2E; color: #fff; border: none; } .back-to-top:hover { background: #000; color: #fff; } .back-to-top span { display: block; line-height: 27px; } .back-to-top.back-to-top-is-visible { animation: anim-back-to-top 850ms linear both; } #back-to-top span, #back-top-top:active, #back-top-top:focus, #back-top-top:link { color: #fff; } .site-footer { > .widgets-area { padding: 40px 0 0 0; } p.no-margin { margin-bottom: 0; } .newsmag-social-footer { list-style-type: none; margin: 0 0 30px; padding: 0; li { display: inline-block; margin-right: 15px; a { &[href*="wordpress.org"], &[href*="wordpress.com"] { color: #21759b; } &[href*="facebook.com"] { color: #3b5998; } &[href*="twitter.com"] { color: #33ccff; } &[href*="dribbble.com"] { color: #ea4c89; } &[href*="plus.google.com"] { color: #dd4b39; } &[href*="pinterest.com"] { color: #c8232c; } &[href*="github.com"] { color: #171515; } &[href*="tumblr.com"] { color: #34526f; } &[href*="youtube.com"] { color: #c4302b; } &[href*="flickr.com"] { color: #ff0084; } &[href*="vimeo.com"] { color: #1AB7EA; } &[href*="instagram.com"] { color: #3f729b; } &[href*="codepen.io"] { color: #000; } &[href*="linkedin.com"] { color: #0e76a8; } } } } }