| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148 |
- .moreoninvest {
- //
- $moreon_orange: #ff8400;
- $moreon_blue: #6ca5d4;
- $moreon_red: #d04317;
- //
- $block_size: 6rem;
- $block_space: 1rem;
- //
- @mixin mobile {
- @media screen and (max-width: 700px) {
- @content;
- }
- }
- //
- background-color: #fefefe;
- position: relative;
- flex: none;
- display: flex;
- align-items: center;
- padding: 3rem 5rem;
- overflow: hidden;
- @include mobile {
- padding: 3rem 2rem;
- }
- &_logo {
- height: $block_size;
- z-index: 10;
- flex: none;
- @include mobile {
- height: $block_size / 1.5;
- }
- }
- &_text {
- flex: none;
- color: #fff;
- font-weight: bold;
- position: relative;
- display: flex;
- align-items: center;
- z-index: 10;
- padding-right: $block_size * 2;
- span {
- display: block;
- padding: $block_space #{$block_space * 2};
- background: $moreon_orange;
- border-radius: 0.625rem;
- width: calc(#{$block_size * 3} + 2vw);
- height: $block_size;
- text-transform: capitalize;
- @include mobile {
- padding: $block_space;
- }
- }
- &::after,
- &::before {
- display: block;
- content: '';
- width: $block_size;
- height: $block_size;
- border-radius: 0.625rem;
- position: absolute;
- }
- &::before {
- background: $moreon_blue;
- right: calc(#{$block_space} + #{$block_size} + 1vw);
- top: $block_space * 2;
- }
- &::after {
- background: $moreon_red;
- right: calc(#{$block_space * 3} + 1vw);
- top: -$block_space * 2;
- }
- }
- &_colorblocks {
- $block_size: $block_size / 1.5;
- z-index: 5;
- position: relative;
- flex: none;
- align-self: stretch;
- &::after,
- &::before {
- display: block;
- content: '';
- width: $block_size;
- height: $block_size;
- border-radius: 0.625rem;
- position: absolute;
- opacity: 0.5;
- }
- &--left {
- width: 35%;
- @include mobile {
- width: 15%;
- }
- &::before {
- background: $moreon_red;
- left: calc(35% + #{$block_space * 2});
- top: calc(50% + #{$block_space / 2});
- }
- &::after {
- background: $moreon_orange;
- left: calc(65% - #{$block_space * 2});
- bottom: calc(50% + #{$block_space / 2});
- }
- }
- &--right {
- width: 15%;
- &::before {
- background: $moreon_blue;
- right: calc(52% + #{$block_space / 2});
- bottom: calc(50% - #{$block_space / 2});
- }
- &::after {
- background: $moreon_orange;
- left: calc(52% + #{$block_space / 2});
- top: calc(50% - #{$block_space / 2});
- }
- }
- }
- }
|