<section class="supt-section-manifesto ">
<div class="supt-section-manifesto__common">
<div class="supt-section-manifesto__common__inner">
<span class="supt-line">
<span class="supt-line__inner"></span>
</span>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-2">
<div class="supt-section-manifesto__badge-wrapper">
<div class="supt-section-manifesto__badge">
<div class="supt-section-manifesto__badge__inner">
<span class="supt-section-manifesto__badge__number">
0
<span class="supt-section-manifesto__badge__numbers">
<span>
1
</span>
<span>
2
</span>
<span>
3
</span>
<span>
4
</span>
</span>
<svg class="supt-section-manifesto__badge__stroke" viewbox="0 0 82 83" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M41 1C63.3675 1 81.5 19.1325 81.5 41.5C81.5 63.8675 63.3675 82 41 82C18.6325 82 0.5 63.8675 0.5 41.5C0.5 19.1325 18.6325 1 41 1Z" stroke="#ED002F" />
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="supt-section-manifesto__images">
<div class="supt-section-manifesto__image">
<img src="/sites/gv/files/flmngr/superhuit/services/manifesto/deter.webp" alt="">
</div>
<div class="supt-section-manifesto__image">
<img src="/sites/gv/files/flmngr/superhuit/services/manifesto/detect.webp" alt="">
</div>
<div class="supt-section-manifesto__image">
<img src="/sites/gv/files/flmngr/superhuit/services/manifesto/verify.webp" alt="">
</div>
<div class="supt-section-manifesto__image">
<img src="/sites/gv/files/flmngr/superhuit/services/manifesto/intervene.webp" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="supt-section-manifesto__steps">
<div class="supt-section-manifesto__step" data-step="0" data-image="/sites/gv/files/flmngr/superhuit/services/manifesto/deter.webp">
<div class="container">
<div class="row justify-content-between align-items-center">
<!-- Left column: Content -->
<div class="col-12 col-md-5">
<div class="supt-section-manifesto__content">
<div class="supt-section-manifesto__title">
<h2 class="supt-section-manifesto__heading">Deter</h2>
</div>
<h3 class="supt-section-manifesto__subtitle">Home protection starts with deterrence</h3>
<div class="supt-section-manifesto__text">
<p>We deter intruders by showing that we protect the property.</p>
<ul>
<li>Deterrence signs are placed in plain sight by our security experts.</li>
<li>Additional outdoor detectors are positioned in key places.</li>
</ul>
</div>
<div class="supt-section-manifesto__image">
<img src="/sites/gv/files/flmngr/superhuit/services/manifesto/deter.webp" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="supt-section-manifesto__step" data-step="1" data-image="/sites/gv/files/flmngr/superhuit/services/manifesto/detect.webp">
<div class="container">
<div class="row justify-content-between align-items-center">
<!-- Left column: Content -->
<div class="col-12 col-md-5">
<div class="supt-section-manifesto__content">
<div class="supt-section-manifesto__title">
<h2 class="supt-section-manifesto__heading">Detect</h2>
</div>
<h3 class="supt-section-manifesto__subtitle">When an alarm is triggered...</h3>
<div class="supt-section-manifesto__text">
<p>The clear objective is to never miss a real incident</p>
<p>A professionally installed personalised security survey ensures system effectiveness, range, and privacy compliance.</p>
<p>Multiple components protect vulnerabilities and cover key angles:</p>
<ul>
<li>Shock sensors detect intruders before entry</li>
<li>LockGuard™ protects the front door</li>
<li>Connected video & photodetectors are placed in key passage areas</li>
</ul>
</div>
<div class="supt-section-manifesto__image">
<img src="/sites/gv/files/flmngr/superhuit/services/manifesto/detect.webp" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="supt-section-manifesto__step" data-step="2" data-image="/sites/gv/files/flmngr/superhuit/services/manifesto/verify.webp">
<div class="container">
<div class="row justify-content-between align-items-center">
<!-- Left column: Content -->
<div class="col-12 col-md-5">
<div class="supt-section-manifesto__content">
<div class="supt-section-manifesto__title">
<h2 class="supt-section-manifesto__heading">Verify</h2>
</div>
<h3 class="supt-section-manifesto__subtitle">... We take rapid action to verify...</h3>
<div class="supt-section-manifesto__text">
<p>With 24/7 in-house monitoring centres in every country, fully connected with two-way audio.</p>
<p>Thanks to thorough verification methods, including images, audio, Artificial Intelligence, and human expertise. Approximately 99.5% of alarm signals do not require on-site assistance.</p>
<p>By providing verification of fire and break-ins as well as personal protection.</p>
<p>We aim to intervene only for genuine threats to avoid costly or unnecessary events.</p>
</div>
<div class="supt-section-manifesto__image">
<img src="/sites/gv/files/flmngr/superhuit/services/manifesto/verify.webp" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="supt-section-manifesto__step" data-step="3" data-image="/sites/gv/files/flmngr/superhuit/services/manifesto/intervene.webp">
<div class="container">
<div class="row justify-content-between align-items-center">
<!-- Left column: Content -->
<div class="col-12 col-md-5">
<div class="supt-section-manifesto__content">
<div class="supt-section-manifesto__title">
<h2 class="supt-section-manifesto__heading">Intervene</h2>
</div>
<h3 class="supt-section-manifesto__subtitle">... And either reassure or intervene</h3>
<div class="supt-section-manifesto__text">
<p>Through the quality of verification, supporting our intervention with confidence.</p>
<p>With the high levels of trust from third parties we’ve earned from decades of experience.</p>
<p>Through direct contact with first responders (Police, Fire, Ambulance) to send help.</p>
<p>With immediate intervention via ZeroVision™ to expel intruders.</p>
</div>
<div class="supt-section-manifesto__image">
<img src="/sites/gv/files/flmngr/superhuit/services/manifesto/intervene.webp" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
No notes defined.
<section class="supt-section-manifesto {{ modifiers|modifiersAttr }}">
<div class="supt-section-manifesto__common">
<div class="supt-section-manifesto__common__inner">
{% if modifiers|contains('dark') %}
{% include 'atoms/line/line--glow.twig' %}
{% else %}
{% include 'atoms/line/line.twig' %}
{% endif %}
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-2">
<div class="supt-section-manifesto__badge-wrapper">
<div class="supt-section-manifesto__badge">
<div class="supt-section-manifesto__badge__inner">
<span class="supt-section-manifesto__badge__number">
0
<span class="supt-section-manifesto__badge__numbers">
{% for index, step in steps %}
<span>
{{ index + 1 }}
</span>
{% endfor %}
</span>
{% if modifiers|contains('dark') %}
<svg class="supt-section-manifesto__badge__stroke" viewbox="0 0 210 210" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="65" y="65" width="80" height="80" rx="40" stroke="white" stroke-width="2" shape-rendering="crispEdges" filter="url(#supt-badge-line-filter-glow)"/>
<defs>
<filter id="supt-badge-line-filter-glow" x="0" y="0" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_11324_10591"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_11324_10591" result="effect2_dropShadow_11324_10591"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="8"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_11324_10591" result="effect3_dropShadow_11324_10591"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="12"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect3_dropShadow_11324_10591" result="effect4_dropShadow_11324_10591"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="16"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect4_dropShadow_11324_10591" result="effect5_dropShadow_11324_10591"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="32"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect5_dropShadow_11324_10591" result="effect6_dropShadow_11324_10591"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect6_dropShadow_11324_10591" result="shape"/>
</filter>
</defs>
</svg>
{% else %}
<svg class="supt-section-manifesto__badge__stroke" viewbox="0 0 82 83" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M41 1C63.3675 1 81.5 19.1325 81.5 41.5C81.5 63.8675 63.3675 82 41 82C18.6325 82 0.5 63.8675 0.5 41.5C0.5 19.1325 18.6325 1 41 1Z" stroke="#ED002F"/>
</svg>
{% endif %}
</span>
</div>
</div>
</div>
</div>
{# <div class="col-12 col-md-6"> #}
<div class="supt-section-manifesto__images">
{% for index, step in steps %}
<div class="supt-section-manifesto__image">
<img src="{{ path(step.image) }}" alt="">
</div>
{% endfor %}
</div>
{# </div> #}
</div>
</div>
</div>
</div>
<div class="supt-section-manifesto__steps">
{% for index, step in steps %}
<div class="supt-section-manifesto__step" data-step="{{ index }}" data-image="{{ step.image }}">
<div class="container">
<div
class="row justify-content-between align-items-center">
<!-- Left column: Content -->
<div class="col-12 col-md-5">
<div class="supt-section-manifesto__content">
<div
class="supt-section-manifesto__title">
{# <span class="supt-section-manifesto__number">0{{ index + 1 }}</span> #}
<h2 class="supt-section-manifesto__heading">{{ step.title }}</h2>
</div>
<h3 class="supt-section-manifesto__subtitle">{{ step.subtitle }}</h3>
<div class="supt-section-manifesto__text">
{{ step.content }}
</div>
<div class="supt-section-manifesto__image">
<img src="{{ path(step.image) }}" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
{
"steps": [
{
"title": "Deter",
"subtitle": "Home protection starts with deterrence",
"content": "<p>We deter intruders by showing that we protect the property.</p><ul><li>Deterrence signs are placed in plain sight by our security experts.</li><li>Additional outdoor detectors are positioned in key places.</li></ul>",
"image": "/sites/gv/files/flmngr/superhuit/services/manifesto/deter.webp"
},
{
"title": "Detect",
"subtitle": "When an alarm is triggered...",
"content": "<p>The clear objective is to never miss a real incident</p><p>A professionally installed personalised security survey ensures system effectiveness, range, and privacy compliance.</p><p>Multiple components protect vulnerabilities and cover key angles:</p><ul><li>Shock sensors detect intruders before entry</li><li>LockGuard™ protects the front door</li><li>Connected video & photodetectors are placed in key passage areas</li></ul>",
"image": "/sites/gv/files/flmngr/superhuit/services/manifesto/detect.webp"
},
{
"title": "Verify",
"subtitle": "... We take rapid action to verify...",
"content": "<p>With 24/7 in-house monitoring centres in every country, fully connected with two-way audio.</p><p>Thanks to thorough verification methods, including images, audio, Artificial Intelligence, and human expertise. Approximately 99.5% of alarm signals do not require on-site assistance.</p><p>By providing verification of fire and break-ins as well as personal protection.</p><p>We aim to intervene only for genuine threats to avoid costly or unnecessary events.</p>",
"image": "/sites/gv/files/flmngr/superhuit/services/manifesto/verify.webp"
},
{
"title": "Intervene",
"subtitle": "... And either reassure or intervene",
"content": "<p>Through the quality of verification, supporting our intervention with confidence.</p><p>With the high levels of trust from third parties we’ve earned from decades of experience.</p><p>Through direct contact with first responders (Police, Fire, Ambulance) to send help.</p><p>With immediate intervention via ZeroVision™ to expel intruders.</p>",
"image": "/sites/gv/files/flmngr/superhuit/services/manifesto/intervene.webp"
}
]
}
import { animate, onScroll } from 'animejs';
import { Line, LineGlow } from '@/components/atoms/line';
import { Sizes } from '@/js/Sizes';
const NUMBER_HEIGHT = 21;
const STROKE_DASHOFFSET = 260;
export class SectionManifesto {
$element: HTMLElement;
$badge: HTMLElement;
$badgeStroke: HTMLElement;
$numbers: HTMLElement;
$steps: NodeListOf<HTMLElement>;
$imagesContainer: HTMLElement;
$imageWrappers: NodeListOf<HTMLElement>;
$images: NodeListOf<HTMLElement>;
line: LineGlow | Line;
isDark: boolean;
currentIndex: number = 0;
sizes: Sizes;
hasInitAnimation: boolean = false;
constructor($element: HTMLElement) {
this.$element = $element;
this.$steps = this.$element.querySelectorAll('.supt-section-manifesto__step');
this.$imagesContainer = this.$element.querySelector(
'.supt-section-manifesto__images'
) as HTMLElement;
this.$imageWrappers = this.$element.querySelectorAll('.supt-section-manifesto__image');
this.$images = this.$element.querySelectorAll('.supt-section-manifesto__image img');
this.$badge = this.$element.querySelector('.supt-section-manifesto__badge') as HTMLElement;
this.$numbers = this.$element.querySelector(
'.supt-section-manifesto__badge__numbers'
) as HTMLElement;
this.$badgeStroke = this.$element.querySelector(
'.supt-section-manifesto__badge__stroke'
) as HTMLElement;
this.isDark = this.$element.classList.contains('-dark');
const lineOptions = {
scale: {
mobile: { x: [0, 1], y: [1, 1] },
desktop: { x: [1, 1], y: [0, 1] },
},
threshold: {
enter: 'center top',
leave: 'bottom bottom',
},
};
const $line = this.$element.querySelector('.supt-line') as HTMLElement;
this.line = this.isDark
? new LineGlow($line, this.$element, lineOptions)
: new Line($line, this.$element, lineOptions);
this.sizes = new Sizes(); // Use Singleton
this.init();
window.addEventListener('resize', this.handleResize.bind(this));
}
private init(): void {
this.setupIntersectionObserver();
if (this.sizes.isDesktop) {
this.setupScrollAnimation();
}
}
private setupIntersectionObserver(): void {
// Configure intersection observer options
const options: IntersectionObserverInit = {
root: null, // Use viewport as root
rootMargin: '-50% 0px -50% 0px', // Trigger when element is in center 50% of viewport
threshold: 0, // Trigger as soon as any part enters the center area
};
// Create intersection observer
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Get the step index from data attribute
const stepElement = entry.target as HTMLElement;
const stepIndex = parseInt(stepElement.dataset.step || '0', 10);
// Update current index if it's different
if (stepIndex !== this.currentIndex) {
this.updateCurrentStep(stepIndex);
}
}
});
}, options);
// Start observing all step elements
this.$steps.forEach(step => {
observer.observe(step);
});
}
// Public method to manually set current step (useful for navigation)
updateCurrentStep(index: number): void {
const oldIndex = this.currentIndex;
this.currentIndex = index;
// Update numbers
animate(this.$numbers, {
translateY: -NUMBER_HEIGHT * index,
duration: 500,
easing: 'easeInOutQuad',
});
const isScrollingDown = index > oldIndex;
// Hide old image
animate(this.$imageWrappers[oldIndex], {
clipPath: isScrollingDown
? ['inset(0 0 0% 0)', 'inset(0 0 100% 0)']
: ['inset(0% 0 0 0)', 'inset(100% 0 0 0)'],
duration: 500,
ease: 'inOut',
});
// Show new image
animate(this.$imageWrappers[index], {
clipPath: isScrollingDown
? ['inset(100% 0 0 0)', 'inset(0% 0 0 0)']
: ['inset(0 0 100% 0)', 'inset(0 0 0% 0)'],
duration: 500,
ease: 'inOut',
});
animate(this.$images[index], {
scale: [1.2, 1],
duration: 750,
});
}
private setupScrollAnimation(): void {
this.hasInitAnimation = true;
// Badge stroke animation
animate(this.$badgeStroke, {
strokeDashoffset: [STROKE_DASHOFFSET, 0],
ease: 'linear',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'center 39%',
leave: 'center 49%',
sync: true,
}),
});
/**
* Section Display animation on scroll
*/
// Badge scale animation
animate(this.$badge, {
scale: [0.3, 1, 1, 1, 1, 0.3],
y: ['-55vh', '0vh', '0vh', '0vh', '0vh', '10vh'],
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: { target: '15vh', container: 'bottom' },
leave: { target: 'bottom', container: 'top' },
sync: true,
}),
});
// // Line Y scale animation
// animate(this.line.$element, {
// scaleY: [0.5, 1, 1, 1, 1, 0.5],
// transformOrigin: ['0% 100%', '0% 100%', '0% 0%', '0% 0%'],
// autoplay: onScroll({
// container: document.body,
// target: this.$element,
// enter: { target: 'top', container: 'bottom' },
// leave: { target: 'bottom', container: 'top' },
// sync: true,
// }),
// });
// Small parallax effect on 1st step
animate(this.$steps[0], {
y: ['60%', '0%'],
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: { target: '50vh', container: 'bottom' },
leave: { target: 'top', container: 'top' },
sync: true,
}),
});
// Clip path on images
// animate(this.$imagesContainer, {
// clipPath: [
// 'inset(50% 50% 50% 50%)',
// 'inset(0% 0% 0% 0%)',
// 'inset(0% 0% 0% 0%)',
// 'inset(0% 0% 0% 0%)',
// 'inset(0% 0% 0% 0%)',
// 'inset(50% 50% 50% 50%)',
// ],
// y: ['20%', '0%', '0%', '0%', '0%', '20%'],
// opacity: [0.5, 1, 1, 1, 1, 0.5],
// autoplay: onScroll({
// container: document.body,
// target: this.$element,
// enter: { target: '40vh', container: 'bottom' },
// leave: { target: 'bottom', container: 'top' },
// sync: true,
// }),
// });
// Small parallax effect on last step
animate(this.$steps[this.$steps.length - 1], {
y: ['0%', '-30%'],
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: { target: 'bottom', container: 'bottom' },
leave: { target: 'bottom', container: 'top' },
sync: true,
}),
});
}
private handleResize(): void {
if (this.sizes.isDesktop && !this.hasInitAnimation) {
this.setupScrollAnimation();
}
}
}
.supt-section-manifesto {
background-color: $color-grey-background;
@media (min-width: $breakpoint-md) {
margin-top: -100vh;
}
position: relative;
.container,
.row {
height: 100%;
}
/* Common */
&__common {
position: sticky;
top: 0;
@media (min-width: $breakpoint-md) {
margin-bottom: 100vh;
}
&__inner {
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
padding: $spacing-8 0 $spacing-6;
background-color: $color-grey-background;
z-index: 1;
display: none;
@media (min-width: $breakpoint-md) {
height: 100vh;
padding: 0;
background: none;
display: flex;
}
}
.supt-section-manifesto__images {
display: none;
@media (min-width: $breakpoint-md) {
display: block;
}
}
.supt-section-manifesto__image {
clip-path: inset(100% 0 0 0);
&:not(:first-child) {
position: absolute;
inset: 0;
}
/* Initial state */
&:first-child {
clip-path: inset(0 0 0 0);
}
}
}
.supt-line {
position: absolute;
transform-origin: bottom;
z-index: 1;
--line-xs-width: 100%;
--line-xs-height: 1px;
--line-md-width: 1px;
--line-md-height: 100%;
/* &.-glow {
inset: 0;
} */
&__inner {
transform: scaleX(0);
transform-origin: left;
@media (min-width: $breakpoint-md) {
transform: scaleY(0);
transform-origin: top;
}
}
}
&__badge-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
&__badge {
padding: 18px 16px 16px 18px;
border-radius: 9999px;
background: $color-grey-background;
/* box-shadow:
8px 8px 16px 0px $color-grey-1,
-8px -8px 16px 0px $color-white; */
box-shadow:
8px 8px 16px 0px rgba(0, 0, 0, 0.3),
-8px -8px 16px 0px rgba(255, 255, 255, 0.5);
position: relative;
z-index: 1;
&__inner {
width: 80px;
height: 80px;
padding: 0px 2px 3px 0px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: $color-grey-background;
position: relative;
box-shadow:
-1px -1px 0px 0px $color-white inset,
-2px -2px 2px 0px $color-grey-2 inset,
-1px -1px 0px 0px $color-white,
-2px -2px 2px 0px $color-grey-2;
}
&__number {
@extend %t-body-s;
line-height: 21px;
color: $color-grey-5;
display: flex;
height: 21px;
overflow: hidden;
}
&__numbers {
display: flex;
flex-direction: column;
}
&__stroke {
position: absolute;
top: -2px;
left: -2px;
width: calc(100% + 2px);
height: calc(100% + 2px);
stroke-dasharray: 260;
stroke-dashoffset: 260;
}
}
/* Images */
&__images {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
}
&__image {
/* aspect-ratio: 1/1; */
overflow: hidden;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* Steps */
&__steps {
@mixin clamp --step-padding-y, $spacing-8, $spacing-32, $breakpoint-xs, $breakpoint-xl;
}
&__step {
position: relative;
padding: var(--step-padding-y) 0;
@media (min-width: $breakpoint-md) {
height: 100vh;
}
.supt-section-manifesto__image {
margin-top: $spacing-8;
@media (min-width: $breakpoint-md) {
display: none;
}
}
}
&__content {
@media (min-width: $breakpoint-md) {
padding-right: $spacing-8;
}
}
&__number,
&__heading {
@extend %t-h2;
font-weight: 500;
margin: 0;
}
&__title {
display: flex;
align-items: center;
gap: $spacing-4;
}
&__number,
&__heading {
color: $color-main;
}
&__subtitle {
@extend %t-h4;
font-weight: 500;
color: $color-black;
margin-top: $spacing-2;
}
&__text {
margin-top: $spacing-8;
display: flex;
flex-direction: column;
gap: $spacing-2;
@media (min-width: $breakpoint-md) {
margin-top: $spacing-9;
gap: $spacing-3;
}
@media (min-width: $breakpoint-lg) {
margin-top: $spacing-10;
gap: $spacing-4;
}
p {
@extend %paragraph-section-text;
color: $color-grey-5;
}
ul {
@extend %list-section-text;
list-style: disc;
padding-left: $spacing-4;
li {
/* margin-top: $spacing-2; */
}
}
}
&.-dark {
background: none;
.supt-section-manifesto__heading,
.supt-section-manifesto__number,
.supt-section-manifesto__text p,
.supt-section-manifesto__text ul li {
color: $color-white;
}
.supt-section-manifesto__subtitle {
color: rgba(255, 255, 255, 0.6);
}
.supt-section-manifesto__badge {
background-color: $color-medium;
box-shadow:
8px 8px 16px 0 rgba(102, 0, 14, 0.3),
-8px -8px 16px 0 rgba(233, 53, 89, 0.4);
&__inner {
background: $color-medium;
box-shadow:
-1px -1px 0 0 #eb2f54 inset,
-2px -2px 2px 0 rgba(63, 0, 11, 0.8) inset,
-1px -1px 0 0 #eb2f54,
-2px -2px 2px 0 rgba(102, 0, 14, 0.8);
}
&__number {
color: $color-white;
}
&__stroke {
width: 210px;
height: 210px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
}