_onepage.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. #modular-hero {
  2. #to-start {
  3. bottom: 3.5rem;
  4. }
  5. }
  6. #modular-features {
  7. text-align: center;
  8. &.offset-box {
  9. .frame-box {
  10. margin: -3rem (-1rem - $layout-spacing) 3rem;
  11. padding: 1rem 1rem;
  12. background: $light-color;
  13. box-shadow: 0 0 75px 0 rgba($dark-color, 0.1);
  14. }
  15. }
  16. &.small {
  17. .columns {
  18. margin-top: -1rem;
  19. }
  20. .column:hover {
  21. .feature-icon i {
  22. color: $primary-color;
  23. }
  24. }
  25. .feature-icon {
  26. display: block;
  27. justify-content: left;
  28. i {
  29. position: relative;
  30. display: inherit;
  31. font-size: 70px;
  32. margin: 0 auto 1rem;
  33. transform: none;
  34. left: auto;
  35. top: auto;
  36. color: $gray-color;
  37. @extend .default-animation;
  38. }
  39. h6 {
  40. text-transform: none;
  41. }
  42. }
  43. }
  44. .frame-box {
  45. padding: 3rem 0;
  46. > p {
  47. max-width: 600px;
  48. margin-left: auto;
  49. margin-right: auto;
  50. }
  51. }
  52. .column {
  53. padding: 1rem;
  54. &:hover {
  55. .feature-icon {
  56. color: $gray-color;
  57. h6 {
  58. color: $primary-color;
  59. }
  60. }
  61. .feature-content {
  62. color: $gray-color-dark;
  63. }
  64. }
  65. }
  66. .feature-icon {
  67. font-size: 130px;
  68. height: 100px;
  69. color: $gray-color-light;
  70. display: flex;
  71. align-items: center;
  72. justify-content: center;
  73. position: relative;
  74. margin: 1rem 0;
  75. @extend .default-animation;
  76. i {
  77. position: absolute;
  78. left: 50%;
  79. top: 50%;
  80. transform: translateX(-50%) translateY(-50%);
  81. }
  82. h6 {
  83. background: $light-color;
  84. line-height: 1;
  85. z-index: 1;
  86. text-transform: uppercase;
  87. font-weight: 600;
  88. margin: 0;
  89. display: block;
  90. color: $gray-color-dark;
  91. }
  92. }
  93. .feature-content {
  94. color: $gray-color;
  95. }
  96. }
  97. #modular-text {
  98. padding-top: 4rem;
  99. padding-bottom: 4rem;
  100. }