|
5 | 5 | height: 100%;
|
6 | 6 | grid-template-rows: auto;
|
7 | 7 | position: relative;
|
8 |
| - @media screen and (max-width: 768px) { |
9 |
| - |
| 8 | + margin-bottom: 100px; |
| 9 | + @media screen and (min-width: 746px) { |
| 10 | + margin-bottom: 180px; |
10 | 11 | }
|
11 | 12 | @media screen and (min-width: 1000px) {
|
12 | 13 | top: $mobile_header_height + 32px;
|
|
41 | 42 | }
|
42 | 43 |
|
43 | 44 | .main-content {
|
| 45 | + margin-bottom: 5rem; |
44 | 46 | padding-bottom: 0;
|
45 | 47 | }
|
46 | 48 |
|
|
55 | 57 | .main-background {
|
56 | 58 | height: 700px;
|
57 | 59 | }
|
58 |
| -} |
59 |
| - |
60 |
| -.announcement .main-content-wrapper { |
61 |
| - margin-bottom: 5rem; |
62 |
| - margin-top: 100px; |
63 |
| - @media screen and (min-width: 746px) { |
64 |
| - margin-top: 180px; |
65 |
| - } |
66 |
| -} |
67 |
| - |
68 |
| -.announcement .card-container { |
69 |
| - display: grid; |
70 |
| - grid-template-columns: repeat(2, 1fr); |
71 |
| - gap: 20px; |
72 | 60 |
|
73 |
| - .card { |
74 |
| - border: none; |
75 |
| - a { |
76 |
| - color: $black; |
77 |
| - } |
78 |
| - .card-body { |
79 |
| - padding: 0; |
80 |
| - |
81 |
| - img { |
82 |
| - width: 100%; |
83 |
| - height: 207px; |
84 |
| - object-fit: cover; |
85 |
| - padding: 20px 0; |
| 61 | + .card-container { |
| 62 | + display: grid; |
| 63 | + grid-template-columns: repeat(2, 1fr); |
| 64 | + gap: 20px; |
| 65 | + padding-top: 3rem; |
| 66 | + .card { |
| 67 | + border: none; |
| 68 | + a { |
| 69 | + color: $black; |
| 70 | + } |
| 71 | + .card-body { |
| 72 | + padding: 0; |
| 73 | + |
| 74 | + img { |
| 75 | + width: 100%; |
| 76 | + height: 207px; |
| 77 | + object-fit: cover; |
| 78 | + padding: 20px 0; |
| 79 | + } |
| 80 | + } |
86 | 81 | }
|
| 82 | + @media screen and (min-width: 1000px) { |
| 83 | + grid-template-columns: repeat(3, 1fr); |
| 84 | + gap: 36px; |
87 | 85 | }
|
88 | 86 | }
|
89 |
| - |
90 |
| - @media screen and (min-width: 1000px) { |
91 |
| - grid-template-columns: repeat(3, 1fr); |
92 |
| - gap: 36px; |
93 |
| - } |
94 |
| - |
95 |
| -} |
96 |
| - |
97 |
| - |
98 |
| -.announcement .dark-background-section { |
99 |
| - background-color: $black; |
100 |
| - .line-content { |
101 |
| - padding: 100px 0; |
102 |
| - display: flex; |
103 |
| - flex-wrap: nowrap; |
104 |
| - align-items: center; |
105 |
| - .row { |
106 |
| - gap: 10px; |
107 |
| - @include desktop { |
108 |
| - gap: 0; |
| 87 | + |
| 88 | + .dark-background-section { |
| 89 | + background-color: $black; |
| 90 | + .line-content { |
| 91 | + padding: 100px 0; |
| 92 | + display: flex; |
| 93 | + flex-wrap: nowrap; |
| 94 | + align-items: center; |
| 95 | + .row { |
| 96 | + gap: 10px; |
| 97 | + @include desktop { |
| 98 | + gap: 0; |
| 99 | + } |
| 100 | + } |
| 101 | + h1 { |
| 102 | + color: $white; |
109 | 103 | }
|
110 |
| - } |
111 |
| - h1 { |
112 |
| - color: $white; |
113 | 104 | }
|
114 | 105 | }
|
115 |
| -} |
116 |
| - |
117 |
| -.announcement .contact-us-section { |
118 |
| - background-color: $code_background_color; |
119 |
| -} |
120 |
| - |
121 |
| -.announcement .light-background-section { |
122 |
| - background-color: $white; |
123 |
| - .content { |
124 |
| - padding: 80px 0; |
125 |
| - } |
126 |
| -} |
127 | 106 |
|
128 |
| -.announcement .body-side-text { |
129 |
| - .lead { |
130 |
| - margin-bottom: rem(25px); |
131 |
| - padding-top: rem(50px); |
132 |
| - } |
133 |
| -} |
134 |
| - |
135 |
| -.announcement .body-side-image { |
136 |
| - background-repeat: no-repeat; |
137 |
| - background-position: center; |
138 |
| - background-size: contain; |
139 |
| -} |
140 |
| - |
141 |
| -.announcement .contact-us-section { |
142 |
| - padding: 20px 0; |
143 |
| - .row { |
144 |
| - justify-content: center; |
| 107 | + .contact-us-section { |
| 108 | + background-color: $code_background_color; |
| 109 | + padding: 20px 0; |
| 110 | + .row { |
| 111 | + justify-content: center; |
145 | 112 |
|
146 |
| - .hbspt-form { |
147 |
| - padding: 20px 0; |
| 113 | + .hbspt-form { |
| 114 | + padding: 20px 0; |
148 | 115 |
|
149 |
| - .hs-button { |
150 |
| - background-image: url($baseurl + "/assets/images/chevron-right-orange.svg"); |
151 |
| - background-size: 6px 13px; |
152 |
| - background-position: top 9px right 11px; |
153 |
| - background-repeat: no-repeat; |
154 |
| - border-radius: 0; |
155 |
| - border: none; |
156 |
| - background-color: $light_grey; |
157 |
| - color: $quick_start_grey; |
158 |
| - font-weight: 400; |
159 |
| - position: relative; |
160 |
| - letter-spacing: 0.25px; |
161 |
| - padding: rem(2px) rem(32px) rem(2px) rem(12px); |
162 |
| - margin: 10px 0; |
163 |
| - } |
| 116 | + .hs-button { |
| 117 | + background-image: url($baseurl + "/assets/images/chevron-right-orange.svg"); |
| 118 | + background-size: 6px 13px; |
| 119 | + background-position: top 9px right 11px; |
| 120 | + background-repeat: no-repeat; |
| 121 | + border-radius: 0; |
| 122 | + border: none; |
| 123 | + background-color: $light_grey; |
| 124 | + color: $quick_start_grey; |
| 125 | + font-weight: 400; |
| 126 | + position: relative; |
| 127 | + letter-spacing: 0.25px; |
| 128 | + padding: rem(2px) rem(32px) rem(2px) rem(12px); |
| 129 | + margin: 10px 0; |
| 130 | + } |
164 | 131 |
|
165 |
| - fieldset.form-columns-2, fieldset.form-columns-1 { |
166 |
| - max-width: 100%; |
167 |
| - .hs-form-field { |
| 132 | + fieldset.form-columns-2, fieldset.form-columns-1 { |
168 | 133 | max-width: 100%;
|
169 |
| - padding: 10px 0; |
170 |
| - width: 100%; |
171 |
| - input { |
172 |
| - border: none; |
173 |
| - width: 100%; |
174 |
| - } |
175 |
| - textarea { |
176 |
| - border: none; |
| 134 | + .hs-form-field { |
| 135 | + max-width: 100%; |
| 136 | + padding: 10px 0; |
177 | 137 | width: 100%;
|
| 138 | + input { |
| 139 | + border: none; |
| 140 | + width: 100%; |
| 141 | + } |
| 142 | + textarea { |
| 143 | + border: none; |
| 144 | + width: 100%; |
| 145 | + } |
178 | 146 | }
|
179 | 147 | }
|
180 | 148 | }
|
181 | 149 | }
|
182 | 150 | }
|
183 |
| -} |
184 | 151 |
|
| 152 | + .light-background-section { |
| 153 | + background-color: $white; |
| 154 | + .content { |
| 155 | + padding: 80px 0; |
| 156 | + } |
| 157 | + } |
| 158 | + |
| 159 | + .body-side-text { |
| 160 | + .lead { |
| 161 | + margin-bottom: rem(25px); |
| 162 | + padding-top: rem(50px); |
| 163 | + } |
| 164 | + } |
| 165 | + .body-side-image { |
| 166 | + background-repeat: no-repeat; |
| 167 | + background-position: center; |
| 168 | + background-size: cover; |
| 169 | + } |
| 170 | +} |
185 | 171 |
|
0 commit comments