_footer.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. .site-footer {
  2. position: relative;
  3. background-position: center center;
  4. background-repeat: no-repeat;
  5. background-size: cover;
  6. overflow: hidden;
  7. background-color: rgb(255, 255, 255);
  8. box-shadow: 0px -1px 0px 0px rgba(239, 239, 239, 1);
  9. &__upper {
  10. padding-top: 120px;
  11. padding-bottom: 120px;
  12. }
  13. }
  14. .site-footer__bottom {
  15. background-color: #fff9ff;
  16. .inner-container {
  17. display: flex;
  18. justify-content: center;
  19. align-items: center;
  20. text-align: center;
  21. padding-top: 44px;
  22. padding-bottom: 44px;
  23. }
  24. }
  25. .site-footer__copy {
  26. font-size: 16px;
  27. font-weight: 400;
  28. color: #74727a;
  29. margin: 0;
  30. a {
  31. color: $thm-base-color;
  32. transition: all .4s ease;
  33. &:hover {
  34. color: #fff;
  35. }
  36. }
  37. }
  38. .site-footer__social {
  39. display: flex;
  40. align-items: center;
  41. a {
  42. width: 56px;
  43. height: 56px;
  44. border-radius: 50%;
  45. background-color: $thm-base-color;
  46. text-align: center;
  47. line-height: 56px;
  48. color: #fff;
  49. background-size: 200% auto;
  50. font-size: 18px;
  51. transition: all .4s ease;
  52. +a {
  53. margin-left: 10px;
  54. }
  55. &:hover {
  56. background-position: right center;
  57. }
  58. &.fa-facebook-square {
  59. background-image: linear-gradient(40deg, rgb(255,169,92) 0%, rgb(255,67,192) 51%, rgb(255,169,92) 100%);
  60. }
  61. &.fa-twitter {
  62. background-image: linear-gradient(40deg, rgb(13,184,255) 0%, rgb(243,50,255) 51%, rgb(13,184,255) 100%);
  63. }
  64. &.fa-instagram {
  65. background-image: linear-gradient( 40deg, rgb(57,174,255) 0%, rgb(60,255,83) 51%, rgb(57,174,255) 100%);
  66. }
  67. &.fa-pinterest-p {
  68. background-image: linear-gradient( 40deg, rgb(255,112,62) 0%, rgb(255,236,78) 51%, rgb(255,112,62) 100%);
  69. }
  70. }
  71. }
  72. .footer-widget__links-wrap {
  73. @media (min-width: 1200px) {
  74. padding-right: 55px;
  75. }
  76. }
  77. .footer-widget__title {
  78. font-size: 18px;
  79. font-weight: 500;
  80. color: $thm-black;
  81. margin: 0;
  82. line-height: 1em;
  83. margin-bottom: 40px;
  84. }
  85. .footer-widget__links {
  86. margin: 0;
  87. margin-top: -5px;
  88. li {
  89. line-height: 1em;
  90. +li {
  91. margin-top: 20px;
  92. }
  93. a {
  94. font-size: 16px;
  95. font-weight: 400;
  96. color: #74727a;
  97. transition: all .4s ease;
  98. &:hover {
  99. color: $thm-base-color-2;
  100. }
  101. }
  102. }
  103. }
  104. .footer-widget__contact {
  105. font-size: 16px;
  106. font-weight: 400;
  107. color: #74727a;
  108. margin: 0;
  109. line-height: 30px;
  110. a {
  111. color: inherit;
  112. transition: all .4s ease;
  113. &:hover {
  114. color: $thm-base-color;
  115. }
  116. }
  117. }
  118. .footer-widget__contact+.footer-widget__contact {
  119. margin-top: 15px;
  120. }
  121. .footer-widget__mailchimp {
  122. padding-left: 70px;
  123. }
  124. .footer-widget__logo {
  125. margin-bottom: 40px;
  126. }