Browse code

Update

Benjamin Roth authored on17/03/2023 09:52:56
Showing1 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,320 @@
1
+@import "../../variables-layout";
2
+
3
+@import "../../../_vendor/node_modules/bootstrap/scss/functions";
4
+@import "../../../_vendor/node_modules/bootstrap/scss/variables";
5
+@import "../../../_vendor/node_modules/bootstrap/scss/mixins";
6
+
7
+@import "../../scss-variables";
8
+@import "../../_theme/variables-layout";
9
+
10
+html body {
11
+
12
+  //Adjust the Centering of Text if Header is fixed
13
+
14
+  &.theme-4 {
15
+    .ce_rsce_headimagelogo .mainimage--content .mainimage--content-inner {
16
+      margin-top: rfs-value(40px);
17
+    }
18
+  }
19
+
20
+  .ce_rsce_headimagelogo {
21
+    margin-top: 0px !important;
22
+
23
+    .swiper-slide {
24
+      overflow: hidden;
25
+    }
26
+
27
+    &.pull-content {
28
+      > .ce--inner {
29
+        margin-bottom: rfs-value(-200px);
30
+      }
31
+
32
+      & + * {
33
+        z-index: 5;
34
+        position: relative;
35
+      }
36
+
37
+      .mainimage--content {
38
+        top: 35%;
39
+        //transform: translate(0%, -35%) !important;
40
+      }
41
+    }
42
+
43
+    .with-boxed-logo {
44
+      margin-bottom: 6rem;
45
+    }
46
+
47
+    .boxed-logo {
48
+      display: inline-block;
49
+      position: absolute;
50
+      right: 50%;
51
+      transform: translate(50%, 50%);
52
+      bottom: 0;
53
+      text-align: center;
54
+      z-index: 5;
55
+
56
+
57
+      @include media-breakpoint-down(sm) {
58
+        width: 80%;
59
+      }
60
+
61
+
62
+      img {
63
+        max-width: calc(300px + 4rem);
64
+        width: 100%;
65
+        height: auto;
66
+        padding: 2rem;
67
+        background-color: $body-bg;
68
+        box-shadow: $box-shadow;
69
+      }
70
+    }
71
+
72
+    .mainslider {
73
+      &.with-diagonalCut {
74
+        &:after {
75
+          content: "";
76
+          position: absolute;
77
+          bottom: 0;
78
+          left: 0;
79
+          border-right: 100vw solid $body-bg;
80
+          border-top: 10vw solid transparent;
81
+          z-index: 9;
82
+        }
83
+      }
84
+
85
+      &:not(.not-fullHeight):not(.no-text) {
86
+        .image--holder {
87
+          height: 100vh;
88
+        }
89
+      }
90
+
91
+
92
+      .swiper-button-prev {
93
+        @include media-breakpoint-up(sm) {
94
+          left: 2.5vw;
95
+        }
96
+
97
+      }
98
+
99
+      .swiper-button-next {
100
+        @include media-breakpoint-up(sm) {
101
+          right: 2.5vw;
102
+        }
103
+      }
104
+
105
+    }
106
+
107
+    .ce--mainimage {
108
+      position: relative;
109
+      //overflow: hidden;
110
+
111
+      .image--holder {
112
+        position: relative;
113
+        background-size: cover !important;
114
+        background-position: center center;
115
+        //overflow: hidden;
116
+
117
+        @media (orientation: landscape) {
118
+          //height: rfs-value(450px);
119
+        }
120
+
121
+        &.with-video {
122
+          overflow: hidden;
123
+        }
124
+
125
+        video {
126
+          min-width: 100vw;
127
+          min-height: 100vh;
128
+          width: auto;
129
+          height: auto;
130
+          z-index: -1000;
131
+          overflow: hidden;
132
+          max-width: none;
133
+          object-fit: fill;
134
+          transform: translate(-50%, -50%);
135
+          position: absolute;
136
+          top: 50%;
137
+          left: 50%;
138
+          max-height: none;
139
+        }
140
+
141
+        .mainimage--content {
142
+          height: 100%;
143
+          width: 100vw;
144
+
145
+          > .container {
146
+            position: relative;
147
+            height: 100%;
148
+          }
149
+
150
+          .mainimage--content-inner {
151
+            display: inline-block;
152
+            position: absolute;
153
+            width: 100%;
154
+            padding: 10px 1rem 10px 0px;
155
+
156
+            @include media-breakpoint-down(sm) {
157
+              width: 100%;
158
+              padding-left: 1rem;
159
+              padding-right: 1rem;
160
+            }
161
+
162
+            &:not([class*="pos-"]) {
163
+              transform: translate(0%, -50%);
164
+              top: 50%;
165
+              left: 0;
166
+            }
167
+
168
+            &[class*="-bottom"] {
169
+              bottom: rfs-value(75px);
170
+            }
171
+
172
+            span {
173
+              display: block;
174
+              line-height: 1;
175
+
176
+              &.first-line {
177
+                font-weight: $font-weight-bold;
178
+
179
+
180
+                &:not([class*="dynamic-fontsize"]) {
181
+                  @include font-size(26px);
182
+                  @include media-breakpoint-up(md) {
183
+                    @include font-size(36px);
184
+                  }
185
+                }
186
+              }
187
+
188
+              &.second-line {
189
+                @include font-size(18px);
190
+                margin-top: 8px;
191
+                font-weight: $font-weight-semibold;
192
+
193
+                &:not([class*="dynamic-fontsize"]) {
194
+                  @include font-size(18px);
195
+                  @include media-breakpoint-up(md) {
196
+                    @include font-size(22px);
197
+                  }
198
+                }
199
+
200
+
201
+              }
202
+            }
203
+
204
+            h1 {
205
+              font-weight: $font-weight-bold;
206
+
207
+              &:not([class*="dynamic-fontsize"]) {
208
+                @include font-size(36px);
209
+              }
210
+            }
211
+
212
+            .infotext--text {
213
+              margin-top: 1.25rem;
214
+            }
215
+
216
+            .button--wrapper {
217
+              > .btn {
218
+                margin-bottom: rfs-value(5px);
219
+              }
220
+            }
221
+          }
222
+        }
223
+      }
224
+
225
+      &.style-1 {
226
+        .mainimage--content {
227
+          .mainimage--content-inner {
228
+            @include media-breakpoint-down(sm) {
229
+              width: 75% !important;
230
+              max-width: 75% !important;
231
+            }
232
+
233
+            span:not([class*="dynamic-fontsize"]) {
234
+              &:first-of-type {
235
+                @include font-size(70px);
236
+              }
237
+
238
+              &:last-of-type {
239
+                @include font-size(60px);
240
+              }
241
+            }
242
+
243
+            h1:not([class*="dynamic-fontsize"]) {
244
+              @include font-size(70px);
245
+            }
246
+
247
+            h1 {
248
+              margin-bottom: 0px;
249
+            }
250
+
251
+            .button--wrapper {
252
+              margin-top: 1.75rem;
253
+            }
254
+          }
255
+        }
256
+      }
257
+
258
+      &.style-2 {
259
+        .mainimage--content {
260
+          .container {
261
+            @include media-breakpoint-down(sm) {
262
+              padding: 0px;
263
+            }
264
+          }
265
+
266
+          .mainimage--content-inner {
267
+            position: absolute;
268
+            z-index: 10;
269
+            min-width: 50vw;
270
+
271
+            @include media-breakpoint-up(md) {
272
+              max-width: 75%;
273
+            }
274
+
275
+
276
+            &:before {
277
+              content: "";
278
+              position: absolute;
279
+              right: 0;
280
+              bottom: 0;
281
+              width: 100%;
282
+              background-color: var(--bs-white);
283
+              height: 100%;
284
+
285
+              @include media-breakpoint-up(sm) {
286
+                width: 100vw;
287
+              }
288
+            }
289
+
290
+            .mainimage--content-inner--wrapper {
291
+              //padding: 10px 2rem 10px 0px;
292
+
293
+              @include media-breakpoint-up(sm) {
294
+                &:after {
295
+                  content: "";
296
+                  display: block;
297
+                  position: absolute;
298
+                  left: 100%;
299
+                  top: 0;
300
+                  clip-path: polygon(0 0, 0% 100%, 100% 0);
301
+                  background-color: var(--bs-white);
302
+                  width: 200px;
303
+                  height: 100%;
304
+                }
305
+              }
306
+
307
+              > * {
308
+                position: relative;
309
+              }
310
+
311
+              .button--wrapper {
312
+                margin-top: 1.5rem;
313
+              }
314
+            }
315
+          }
316
+        }
317
+      }
318
+    }
319
+  }
320
+}
0 321
\ No newline at end of file