.ac-footer { min-height: 830px; position: relative; text-align: center; color: $white-75; background-color: #1d3657; background-image: url("../img/background_footer.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1420px; font-family: $font-settings; font-weight: 600; box-sizing: border-box; p { font-size: 12px; font-weight: 300; color: $white-75 } .ac-footer-brand { max-width: 740px; max-height: 400px; width: 70vw; height: 100%; position: absolute; top: 48%; left: 50%; transform: translate(-50%,-50%); &:hover { .ac-icon-love-dark { background: url('../img/icon-heart-light.svg')no-repeat center center / contain } } .ac-footer-brand-icon { width: 110px; margin-top: 20px; } figure { margin: 20px 0 0; .ac-footer-brand-logo { margin: 0; width: inherit; } figcaption { text-indent: -9999px; color: transparent; } } } .ac-footer-brand p, .ac-footer-version { color: #496f92; text-transform: uppercase; font-weight: bold; font-size: 12px; margin: 0; font-weight: 600; float: none; } .ac-footer-links { width: 100%; padding: 1em 0px; float: left; br { @media (min-width: 960px) { display: none; } } } .ac-footer-link-item { font-size: 12px; color: $red-pink; font-weight: 400; margin-left: $margin; text-decoration: none; &:not(:first-of-type):before { content: '•'; position: relative; margin-right: $margin; color: $white-75; font-size: 1.2em; } } .ac-footer-container { padding-top: 0px; padding-bottom: 0px; } .ac-footer-btn.ac-footer-btn-cta { max-width: 160px; margin: 32px auto; } .ac-footer-version { position: relative; float: left; width: 100%; top: 620px; } .ac-footer-actions { width: 100%; background: $black; position: absolute; bottom: 0; min-height: $navigation-height; p { display: inline; line-height: $navigation-height; padding: 0; margin:0; font-size: 14px; color: $steel; text-transform: uppercase; } a { display: inline-block; margin-left: 0; &:nth-child(2) { margin-left: 32px; margin-right: $margin; } } } .ac-footer-btn, [class*="ac-footer-btn-ghost"] { background: $black; border: 1px solid mix($black, #fff, 90%); color: #fff; height: 40px; margin: 32px auto; line-height: 40px; padding: 0 1em; display: block; text-decoration: none; border-radius: 3px; text-transform: uppercase; font-weight: 600; font-size: 12px; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1); transition: background 0.1s ease; cursor: pointer; &:hover, &:active { background: $red-pink } } [class*="ac-footer-btn-ghost"] { background: transparent; border-color: currentColor; font-weight: bold; max-width: inherit; padding: 0 32px; } .ac-footer-btn-ghost-grey { color: $steel; &:hover { background: $steel; border-color: $steel; color: #fff; .ico-triangle { border-left-color: #fff } } } .ac-footer-btn-ghost-pink { color: $red-pink; &:hover { background: $red-pink; border-color: $red-pink; color: #fff; } } .ac-icon { position: absolute; left: 0; right: 0; width: 20px; height: 30px; margin: auto; } .ac-icon-love-dark { background: url('../img/icon-heart-dark.svg')no-repeat center center / contain } } /*! On small devices */ @media (max-width: $bp-medium){ .ac-footer { background-size: cover; background-position: 50% 70px; .ac-footer-links { text-align: center; .ac-footer-links:nth-child(2) { margin-bottom: $margin; display: block; } .ac-footer-link-item:nth-child(3):before { display: none; } } hr { display: none; } .ac-footer-actions { width: calc(#{$margin} + 100%); left: -$margin; padding-bottom: $margin; text-align: center; p { font-size: 12px; float: left; width: 100%; text-align: center; } .ac-footer-btn, a:nth-child(2) { width: calc(100% - 32px); max-width: calc(100% - 32px); margin: 0 auto; margin-bottom: 8px; float: none; position: relative; left: 8px; } } } } // Footer heartbeat @keyframes pulse{ 0% { box-shadow: 0 0 0 0 rgba($red-pink, 0.4); } 70% { box-shadow: 0 0 0 30px rgba($red-pink, 0); } 100% { box-shadow: 0 0 0 0 rgba($red-pink, 0); } } @keyframes pulseHeart{ 0% { transform: scale(1.3) } 70% { transform: scale(1.15) } 100% { transform: scale(1) } } .ac-icon-love-dark { display: block; position: relative; &:before { content: ''; display: block; width: 8px; height: 8px; position: absolute; top: 45%; bottom: 0; left: 50%; transform: translate(-50%,-50%); right: 0; z-index: -1; border-radius: 100%; } } .ac-footer-container:hover .ac-icon-love-dark{ animation: pulseHeart 1s ease infinite; &:before { animation: pulse 1s ease infinite !important; } } .ac-icon-triangle { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid $steel; position: relative; display: inline-block; margin-left: 8px; }