_common.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. body {
  2. font-family: $thm-font;
  3. color: $thm-text-color;
  4. font-size: 18px;
  5. line-height: 34px;
  6. }
  7. a:active,
  8. a:hover,
  9. a:focus,
  10. a:visited {
  11. text-decoration: none;
  12. }
  13. .page-wrapper {
  14. position: relative;
  15. margin: 0 auto;
  16. width: 100%;
  17. min-width: 300px;
  18. overflow: hidden;
  19. }
  20. .thm-base-bg {
  21. background-color: $thm-base-color;
  22. }
  23. .thm-base-bg-2 {
  24. background-color: $thm-base-color-2;
  25. }
  26. .thm-gray-bg {
  27. background-color: $thm-gray;
  28. }
  29. @media(min-width: 1200px) {
  30. .container {
  31. max-width: 1200px;
  32. }
  33. }
  34. .block-title {
  35. margin-bottom: 45px;
  36. &__title {
  37. margin: 0;
  38. margin-top: -10px;
  39. font-size: 50px;
  40. font-weight: 400;
  41. color: $thm-black;
  42. line-height: 1.2em;
  43. span {
  44. font-weight: 700;
  45. }
  46. }
  47. }
  48. .thm-btn {
  49. border: none;
  50. display: inline-block;
  51. vertical-align: middle;
  52. outline: none;
  53. font-size: 16px;
  54. font-weight: 500;
  55. color: $thm-black;
  56. padding: 13px 41px;
  57. border-radius: 5px;
  58. transition: background .4s ease, color .4s ease;
  59. background-image: linear-gradient(90deg, rgb(255, 78, 181) 0%, rgb(255, 160, 101) 100%);
  60. position: relative;
  61. &:before {
  62. content: '';
  63. position: absolute;
  64. top: 2px;
  65. right: 2px;
  66. bottom: 2px;
  67. left: 2px;
  68. border-radius: 5px;
  69. background-color: #fff;
  70. transform: scaleX(1);
  71. transition: transform .4s ease;
  72. }
  73. span {
  74. position: relative;
  75. }
  76. &:hover {
  77. color: #fff;
  78. &:before {
  79. transform: scaleX(0);
  80. }
  81. }
  82. }
  83. .post-pagination {
  84. display: flex;
  85. justify-content: center;
  86. align-items: center;
  87. a {
  88. border-radius: 50%;
  89. background-color: $thm-gray;
  90. font-size: 15px;
  91. font-weight: 600;
  92. text-align: center;
  93. padding: 8px 19px;
  94. color: $thm-black;
  95. transition: all .4s ease;
  96. &:hover,
  97. &.active {
  98. background-color: $thm-black;
  99. color: #fff;
  100. }
  101. +a {
  102. margin-left: 15px;
  103. }
  104. }
  105. }
  106. .preloader {
  107. position: fixed;
  108. background-color: #fff;
  109. background-position: center center;
  110. background-repeat: no-repeat;
  111. top: 0;
  112. left: 0;
  113. right: 0;
  114. bottom: 0;
  115. z-index: 9991;
  116. display: flex;
  117. justify-content: center;
  118. align-items: center;
  119. text-align: center;
  120. &__image {
  121. animation-fill-mode: both;
  122. animation-name: flipInY;
  123. animation-duration: 2s;
  124. animation-iteration-count: infinite;
  125. }
  126. }
  127. .scroll-to-top {
  128. display: inline-block;
  129. width: 45px;
  130. height: 45px;
  131. background-image: linear-gradient(to right, rgb(255, 78, 181) 0%, rgb(255, 160, 101) 51%, rgb(255, 78, 181) 100%);
  132. background-size: 200% auto;
  133. position: fixed;
  134. bottom: 40px;
  135. right: 40px;
  136. z-index: 99;
  137. text-align: center;
  138. transition: .4s;
  139. display: none;
  140. border-radius: 50%;
  141. i {
  142. color: #fff;
  143. font-size: 18px;
  144. line-height: 45px;
  145. }
  146. &:hover {
  147. background-position: right center;
  148. i {
  149. color: #fff;
  150. }
  151. }
  152. }