<h1 class="header-slideshow-content elementor-element elementor-invisible"
data-settings='{"animation":"fadeInRight","animation_delay":0}'
data-element_type="section">
- <span class="block text-xl mb-2"><?= $title ?></span>
- <span class="block text-2xl"><?= $body ?></span>
+ <span class="header-slideshow-title"><?= $title ?></span>
+ <span class="header-slideshow-body"><?= $body ?></span>
</h1>
<?php endif; ?>
&-content
.header-slideshow & // Need some extra specificity to override H1 CSS
- @apply text-purple-dark px-5 py-3
+ @apply text-purple-dark
+ font-smoothing()
background: $title_bg
- width: 50% // Size ratio for intermediate screens
- max-width: 870px
+ text-transform: none
+ padding: 0.75em 1em
+ margin-bottom: 0
z-index: 10
position: absolute
constrain(bottom, 9.2vw)
left: 6.4vw // Not using constrain because this shouldn't be capped on lower limits
- margin-bottom: 0
- text-transform: none
+ font-size: 2.1875vw // 42px in vw based on 1920px width
+above($content-max-width)
+ font-size: 42px // Base font size
left: 126px // From mockup
+below($breakpoint-slideshow)
bottom: 4em
+below($breakpoint-slideshow-images)
- width: 75%
+ font-size: 3.75vw
+
+ // Pink dash
&:before
- constrain(left, -1.7vw)
+ top: 1.2em
+ left: -0.6em
+ width: 1.2em
+ height: 5px
+
+ +below(1200px)
+ height: 4px
+ +below(900px)
+ height: 3px
.elementor-editor-active &, .elementor-editor-preview &
visibility: visible // Animation doesn't trigger in the editor for some reason so just show it
+
+ &-title
+ display: block
+ font-size: 1em // Inherits from parent element so both bits of text can be scaled together
+ margin-bottom: 0.5em
+
+ &-body
+ font-size: 1.333em
+ white-space: pre-line