_joincallout.scss
3.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
.join-callout{
background-color: #a3d55f;
margin: 0px -25% 0px -25%;
padding: 0px 25%;
h2{
color:#231F20 ;
}
@media screen and (max-width: 900px) {
margin: 0px -20% 0px -20%;
padding: 0px 20%;
}
@media screen and (max-width: 600px) {
margin: 0px -30px 0px -30px;
padding: 0px 30px;
}
.wp-block-group__inner-container {
margin-top: -120px;
@media screen and (max-width: 900px) {
margin-top: -75px;
}
@media screen and (max-width: 600px) {
margin-top:120px;
}
.wp-block-columns{
margin-bottom: 0px;
}
.wp-block-column{
display: flex;
flex-direction: column;
}
.wp-block-image {
margin-bottom: 0px;
img{
margin-bottom: 0px;
position: relative;
z-index: 2;
}
}
}
}
.join-callout::before{
position: relative;
z-index: 1;
top: -120px;
content: "";
display: block;
width: 150%;
height: 120px;
margin: 0 -25%;
background-position: top left;
background-size: cover;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1369.39 118.32"><defs><style> .cls-1 { fill: %23a3d55f; stroke-width: 0px; } </style></defs><path id="Subtraction_3" data-name="Subtraction 3" class="cls-1" d="M1369.39,118.28L0,118.32C0,57.99,0,60.48,0,59.76l1.78-1.57c9.81-7.27,20.38-13.46,31.52-18.46,12.26-5.54,24.88-10.24,37.78-14.05,23.89-7.2,51.85-13.01,83.11-17.27C193.3,3.23,232.69.53,272.13.35c1.34,0,2.55,0,3.61.02h.06c9.46-.24,19.03-.36,28.43-.36,14.1,0,28.39.28,42.48.82,13.43.52,27.11,1.3,40.67,2.32,25.04,1.88,50.2,4.59,76.92,8.27,50.22,6.92,97.44,16.16,143.1,25.1h0l1.67.33h0c45.52,8.91,92.59,18.12,141.28,24.89,26.2,3.65,50.81,6.32,75.22,8.18,27.39,2.09,53.84,3.1,80.87,3.1,21.49,0,43.44-.67,65.24-2,82.01-5,158.29-7.53,226.7-7.53,26.88,0,52.6.4,76.43,1.18,19.07.62,36.99,1.5,53.25,2.59,27.46,1.85,40.14,3.6,40.69,3.68l.61,47.35Z"/></svg>');
@media screen and (max-width: 900px) {
margin: 0px -20% 0px -20%;
padding: 0px 20%;
width: 140%;
top: -73px;
height: 75px;
}
@media screen and (max-width: 600px) {
top: -48px;
height: 50px;
width: calc(100% + 60px);
margin:120px -30px 0 -30px !important;
}
}
.join-callout.blue{
background-color: #3DB5E6;
}
.join-callout.blue::before{
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1369.39 118.32"><defs><style> .cls-1 { fill: %233DB5E6; stroke-width: 0px; } </style></defs><path id="Subtraction_3" data-name="Subtraction 3" class="cls-1" d="M1369.39,118.28L0,118.32C0,57.99,0,60.48,0,59.76l1.78-1.57c9.81-7.27,20.38-13.46,31.52-18.46,12.26-5.54,24.88-10.24,37.78-14.05,23.89-7.2,51.85-13.01,83.11-17.27C193.3,3.23,232.69.53,272.13.35c1.34,0,2.55,0,3.61.02h.06c9.46-.24,19.03-.36,28.43-.36,14.1,0,28.39.28,42.48.82,13.43.52,27.11,1.3,40.67,2.32,25.04,1.88,50.2,4.59,76.92,8.27,50.22,6.92,97.44,16.16,143.1,25.1h0l1.67.33h0c45.52,8.91,92.59,18.12,141.28,24.89,26.2,3.65,50.81,6.32,75.22,8.18,27.39,2.09,53.84,3.1,80.87,3.1,21.49,0,43.44-.67,65.24-2,82.01-5,158.29-7.53,226.7-7.53,26.88,0,52.6.4,76.43,1.18,19.07.62,36.99,1.5,53.25,2.59,27.46,1.85,40.14,3.6,40.69,3.68l.61,47.35Z"/></svg>');
}
.page-template-no-title{
.join-callout::before{
width: 120vw;
margin: 180px 0 0% 0%;
}
}