style.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. .moreoninvest {
  2. //
  3. $moreon_orange: #ff8400;
  4. $moreon_blue: #6ca5d4;
  5. $moreon_red: #d04317;
  6. //
  7. $block_size: 6rem;
  8. $block_space: 1rem;
  9. //
  10. @mixin mobile {
  11. @media screen and (max-width: 700px) {
  12. @content;
  13. }
  14. }
  15. //
  16. background-color: #fefefe;
  17. position: relative;
  18. flex: none;
  19. display: flex;
  20. align-items: center;
  21. padding: 3rem 5rem;
  22. overflow: hidden;
  23. @include mobile {
  24. padding: 3rem 2rem;
  25. }
  26. &_logo {
  27. height: $block_size;
  28. z-index: 10;
  29. flex: none;
  30. @include mobile {
  31. height: $block_size / 1.5;
  32. }
  33. }
  34. &_text {
  35. flex: none;
  36. color: #fff;
  37. font-weight: bold;
  38. position: relative;
  39. display: flex;
  40. align-items: center;
  41. z-index: 10;
  42. padding-right: $block_size * 2;
  43. span {
  44. display: block;
  45. padding: $block_space #{$block_space * 2};
  46. background: $moreon_orange;
  47. border-radius: 0.625rem;
  48. width: calc(#{$block_size * 3} + 2vw);
  49. height: $block_size;
  50. text-transform: capitalize;
  51. @include mobile {
  52. padding: $block_space;
  53. }
  54. }
  55. &::after,
  56. &::before {
  57. display: block;
  58. content: '';
  59. width: $block_size;
  60. height: $block_size;
  61. border-radius: 0.625rem;
  62. position: absolute;
  63. }
  64. &::before {
  65. background: $moreon_blue;
  66. right: calc(#{$block_space} + #{$block_size} + 1vw);
  67. top: $block_space * 2;
  68. }
  69. &::after {
  70. background: $moreon_red;
  71. right: calc(#{$block_space * 3} + 1vw);
  72. top: -$block_space * 2;
  73. }
  74. }
  75. &_colorblocks {
  76. $block_size: $block_size / 1.5;
  77. z-index: 5;
  78. position: relative;
  79. flex: none;
  80. align-self: stretch;
  81. &::after,
  82. &::before {
  83. display: block;
  84. content: '';
  85. width: $block_size;
  86. height: $block_size;
  87. border-radius: 0.625rem;
  88. position: absolute;
  89. opacity: 0.5;
  90. }
  91. &--left {
  92. width: 35%;
  93. @include mobile {
  94. width: 15%;
  95. }
  96. &::before {
  97. background: $moreon_red;
  98. left: calc(35% + #{$block_space * 2});
  99. top: calc(50% + #{$block_space / 2});
  100. }
  101. &::after {
  102. background: $moreon_orange;
  103. left: calc(65% - #{$block_space * 2});
  104. bottom: calc(50% + #{$block_space / 2});
  105. }
  106. }
  107. &--right {
  108. width: 15%;
  109. &::before {
  110. background: $moreon_blue;
  111. right: calc(52% + #{$block_space / 2});
  112. bottom: calc(50% - #{$block_space / 2});
  113. }
  114. &::after {
  115. background: $moreon_orange;
  116. left: calc(52% + #{$block_space / 2});
  117. top: calc(50% - #{$block_space / 2});
  118. }
  119. }
  120. }
  121. }