File: //var/www/quadcode.com/src/components/header/Header.svelte
<script lang="ts">
import { menuMobile, popupForm } from '../../store';
import { onMount } from 'svelte';
import turnkey from '../../assets/header/turnkey.svg';
import brokerage from '../../assets/header/brokerage.svg';
import propFirm from '../../assets/header/prop-firm.svg';
import binaryOPtions from '../../assets/header/binary-options.svg';
import tradingPlatform from '../../assets/header/TradingPlatform2x.png';
import backOffice from '../../assets/header/BackOffice2x.png';
import marketingGuide from '../../assets/header/marketing-guide.svg';
import blog from '../../assets/header/blog.svg';
import videoTutorials from '../../assets/header/video-tutorials.svg';
import glossary from '../../assets/header/glossary.svg';
import calculator from '../../assets/header/calculator.svg';
import about from '../../assets/header/about.svg';
import teamSvg from '../../assets/header/team.svg';
import events from '../../assets/header/events.svg';
import tradingPlatformIcon from '../../assets/header/platform.svg';
import backOfficeIcon from '../../assets/header/backoffice.svg';
import team from '../../assets/header/team.jpg';
import Lang from './Lang.svelte';
import { localeLink, t } from '$lib/translations';
import HeaderBanner from '$components/header/HeaderBanner.svelte';
export let withoutBanner = false;
export let className = '';
let prevClassName = className;
let linkText = '';
let visible = '';
let scrollY = 0;
let openMenu = false;
let type = 0;
let dropOpen = false;
let activeItem = 0;
let dropPosition = { left: 0, top: 66 };
const updateDropTop = () => {
const body = document.querySelector('body');
const hasBanner = body?.classList.contains('banner');
dropPosition.top = hasBanner ? 118 : 66;
};
const setType = (id: number, dropOpenVal = true) => {
type = id;
dropOpen = dropOpenVal;
activeItem = 0;
if (dropOpenVal) {
setTimeout(() => {
const activeLink = document.querySelector('.nav_drop.active');
if (activeLink) {
const rect = activeLink.getBoundingClientRect();
const headerRect = document.querySelector('.header')?.getBoundingClientRect();
if (headerRect) {
const dropdownWidths: Record<number, number> = {
2: 550,
3: 698,
4: 310,
5: 568
};
const dropdownWidth = dropdownWidths[id] || 300;
const linkCenter = rect.left + rect.width / 2 - headerRect.left;
const dropdownLeft = linkCenter - dropdownWidth / 2;
if (id === 3){
dropPosition.left = rect.left - headerRect.left - 224;
} else{
dropPosition.left = Math.max(0, dropdownLeft);
}
}
}
}, 0);
}
};
const setActiveItem = (id: number) => {
activeItem = id;
};
const setDropOpen = (active: boolean) => {
dropOpen = active;
type = 0;
activeItem = 0;
};
menuMobile.subscribe((value) => {
openMenu = value;
});
let lastKnownScrollPosition = 0;
let deltaY = 0;
onMount(() => {
scrollY = window.scrollY < 0 ? 0 : window.scrollY;
className = (window.scrollY < 0 ? 0 : window.scrollY) > 0 ? '' : prevClassName;
window.addEventListener('scroll', function () {
scrollY = window.scrollY < 0 ? 0 : window.scrollY;
className = (window.scrollY < 0 ? 0 : window.scrollY) > 0 ? '' : prevClassName;
let ticking = false;
if (!ticking) {
window.requestAnimationFrame(function () {
deltaY = (window.scrollY < 0 ? 0 : window.scrollY) - lastKnownScrollPosition;
lastKnownScrollPosition = window.scrollY < 0 ? 0 : window.scrollY;
ticking = false;
});
ticking = true;
}
const body = document.querySelector('body');
const hideStartPosition = body?.classList.contains('banner') ? 150 : 134;
if (deltaY > 0 && (window.scrollY < 0 ? 0 : window.scrollY) > hideStartPosition) {
visible = 'hide';
setDropOpen(false);
} else {
visible = '';
}
});
});
</script>
{#if dropOpen}
<div class="header-bg" />
{/if}
<header
class="header {className} {scrollY > 0 ? 'active' : ''} {dropOpen ? 'drop' : ''} {visible}"
on:mouseleave={() => setDropOpen(false)}
role="presentation"
>
{#if !withoutBanner}
<HeaderBanner />
{/if}
<div class="container container-main">
<div class="header__list header__list_top">
<div class="header__left">
<div class="header__item">
<div class="logo">
<a aria-label="link to home page" href="/{localeLink()}">{linkText}</a>
</div>
</div>
<div class="header__item header__item_disable">
<div class="nav nav_top" role="menu">
<div
class="nav_drop {className} {type === 3 ? 'active nav-drop--modules' : ''} {![3, 0].includes(type) ? 'opacity' : ''}"
on:mousemove={() => setType(3)}
role="menuitem"
tabindex="0"
>
{$t('Modules')}
<div class="nav_dropArrow">
<div class="nav_dropArrowItem nav_dropArrowItemUp" />
<div class="nav_dropArrowItem nav_dropArrowItemDown" />
</div>
</div>
<div
class="nav_drop {className} {type === 4 ? 'active nav-drop--resources' : ''} {![4, 0].includes(type) ? 'opacity' : ''}"
on:mousemove={() => setType(4)}
role="menuitem"
tabindex="0"
>
{$t('Resources')}
<div class="nav_dropArrow">
<div class="nav_dropArrowItem nav_dropArrowItemUp" />
<div class="nav_dropArrowItem nav_dropArrowItemDown" />
</div>
</div>
<a
href="/for-traders"
class="nav_drop {className} {![1, 0].includes(type) ? 'opacity' : ''}"
role="menuitem"
tabindex="0"
on:mouseenter={() => setType(1, false)}
on:mouseleave={() => setType(0, false)}
>
{$t('For Traders')}
</a>
<div
class="nav_drop {className} {type === 5 ? 'active nav-drop--more' : ''} {![5, 0].includes(type) ? 'opacity' : ''}"
on:mousemove={() => setType(5)}
role="menuitem"
tabindex="0"
>
{$t('More')}
<div class="nav_dropArrow">
<div class="nav_dropArrowItem nav_dropArrowItemUp" />
<div class="nav_dropArrowItem nav_dropArrowItemDown" />
</div>
</div>
</div>
</div>
</div>
<div class="header__right">
<div class="header__item header__item_lang">
<Lang {className} />
</div>
<div class="header__item header__item_button">
<div
class="header__button"
on:click={() => popupForm.set(true)}
on:keydown={(event) => {
if (event.key === 'Escape') {
popupForm.set(false);
}
}}
role="menuitem"
tabindex="0"
>
{$t('Leave request')}
</div>
<div
aria-label="button-burger"
class="btn-burger {openMenu ? 'btn-burger--close' : ''}"
on:click={() => menuMobile.set(!openMenu)}
on:keydown={() => menuMobile.set(false)}
role="button"
tabindex="0"
>
<div class="burger-lines">
<span />
<span />
<span />
</div>
</div>
</div>
</div>
</div>
<div class="header__list header__list_bottom">
<div class="header__item header__item_disable">
<div class="nav nav_bottom" role="menu">
<a href="{localeLink()}/turnkey-solution" class="nav_link {className}" role="menuitem" tabindex="0">
{$t('Turnkey Solution')}
</a>
<a href="{localeLink()}/white-label-broker" class="nav_link {className}" role="menuitem" tabindex="0">
{$t('Forex / CFD')}
</a>
<a href="{localeLink()}/prop-firm" class="nav_link {className}" role="menuitem" tabindex="0">
{$t('Prop Firm')}
</a>
<a href="{localeLink()}/white-label-binary-options" class="nav_link {className}" role="menuitem" tabindex="0">
{$t('Binary Options')}
</a>
<a href="{localeLink()}/exchange-clearing" class="nav_link {className}" role="menuitem" tabindex="0">
{$t('Exchange & Clearing')}
</a>
</div>
</div>
</div>
</div>
<div
class="header__drop {dropOpen ? 'open' : ''} {type === 2 ? 'type-2' : ''} {type === 3 ? 'type-3' : ''} {type === 4 ? 'type-4' : ''} {type === 5 ? 'type-5' : ''}"
style="left: {dropPosition.left}px; top: {dropPosition.top}px"
>
<div class="listOne {type === 2 ? 'active' : 0}">
<div class="listOne__list">
<a
href="{localeLink()}/turnkey-solution"
class="listOne__listItem {![1, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Turnkey Solution"
on:mousemove={() => setActiveItem(1)}
>
<img src={turnkey} alt="turnkey solution page image" class="listOne__listItemIcon" loading="lazy" />
<p class="listOne__listItemText">{$t('Turnkey Solution')}</p>
</a>
<a
href="{localeLink()}/white-label-broker"
class="listOne__listItem {![2, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Forex / CFD"
on:mousemove={() => setActiveItem(2)}
>
<img src={brokerage} alt="white-label-broker-page-image" class="listOne__listItemIcon" loading="lazy" />
<p class="listOne__listItemText">{$t('Forex / CFD')}</p>
</a>
<a
href="{localeLink()}/prop-firm"
class="listOne__listItem {![3, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Prop Firm"
on:mousemove={() => setActiveItem(3)}
>
<img src={propFirm} alt="white-label-broker-page-image" class="listOne__listItemIcon" loading="lazy" />
<p class="listOne__listItemText">{$t('Prop Firm')}</p>
</a>
<a
href="{localeLink()}/white-label-binary-options"
class="listOne__listItem {![4, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Binary Options"
on:mousemove={() => setActiveItem(4)}
>
<img src={binaryOPtions} alt="white-label-broker-page-image" class="listOne__listItemIcon" loading="lazy" />
<p class="listOne__listItemText">{$t('Binary Options')}</p>
</a>
</div>
<p class="listOne__content">
{#if [1, 0].includes(activeItem)}
{@html $t(
'White label brokerage platform tailored to your brand. Start your own brokerage with fully customisable solutions in just 2 weeks.'
)}
{:else if [2].includes(activeItem)}
{@html $t(
'An all-in-one turnkey solution for launching your own forex brokerage business hassle-free and at minimal cost.'
)}
{:else if [3].includes(activeItem)}
{@html $t(
'Launch your own Prop Firm with a fully customizable white-label platform. Equipped with advanced risk management tools and seamless infrastructure, you can get up and running in just 2 weeks.'
)}
{:else if [4].includes(activeItem)}
{@html $t(
'White-label binary options platform tailored to your needs. Launch your own highly engaging, fully customizable trading platform with advanced tools in just 2 weeks.'
)}
{/if}
</p>
</div>
<div class="listTwo {type === 3 ? 'active' : 0}">
<div class="listTwo__list">
<a
href="{localeLink()}/trading-platform"
class="listTwo__listItem {![4, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Trading Platform"
on:mousemove={() => setActiveItem(4)}
>
<img src={tradingPlatform} alt="back-office" class="listTwo__listItemImage" loading="lazy" />
<div class="listTwo__list-item">
<img class="listThree__listItemIcon" src={tradingPlatformIcon} alt="" />
<div>
<p class="listTwo__listItemText">{$t('Trading Platform')}</p>
<p class="listTwo__listItemSubtext">{$t("Ready-To-Go White Label Solution")}</p>
</div>
</div>
</a>
<a
href="{localeLink()}/back-office"
class="listTwo__listItem {![5, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Back Office"
on:mousemove={() => setActiveItem(5)}
>
<img src={backOffice} alt="back-office" class="listTwo__listItemImage" loading="lazy" />
<div class="listTwo__list-item">
<img src={backOfficeIcon} alt="back-office" class="listThree__listItemIcon" loading="lazy" />
<div>
<p class="listTwo__listItemText">{$t('Back Office')}</p>
<p class="listTwo__listItemSubtext">{$t("Back Office Software for Brokers")}</p>
</div>
</div>
</a>
</div>
</div>
<div class="listThree {type === 4 ? 'active' : 0}">
<div class="listThree__list">
<a
href="{localeLink()}/marketing-guide"
class="listThree__listItem {![31, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Software as a service"
on:mousemove={() => setActiveItem(31)}
>
<img src={marketingGuide} alt="" class="listThree__listItemIcon" loading="lazy" />
<div>
<p class="listThree__listItemText">{$t('Marketing Guide')}</p>
<p class="listThree__listItemSubtext">{$t('Strategies, channels, checklists')}</p>
</div>
</a>
<a
href="{localeLink()}/blog"
class="listThree__listItem {![32, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Software as a service"
on:mousemove={() => setActiveItem(32)}
>
<img src={blog} alt="" class="listThree__listItemIcon" loading="lazy" />
<div>
<p class="listThree__listItemText">{$t('Blog')}</p>
<p class="listThree__listItemSubtext">{$t("News, cases, ideas")}</p>
</div>
</a>
<a
href="{localeLink()}/video-tutorials"
class="listThree__listItem {![33, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Software as a service"
on:mousemove={() => setActiveItem(33)}
>
<img src={videoTutorials} alt="" class="listThree__listItemIcon" loading="lazy" />
<div>
<p class="listThree__listItemText">{$t('Video Tutorials')}</p>
<p class="listThree__listItemSubtext">{$t("Step-by-step videos")}</p>
</div>
</a>
<a
href="{localeLink()}/glossary"
class="listThree__listItem {![34, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Software as a service"
on:mousemove={() => setActiveItem(34)}
>
<img src={glossary} alt="" class="listThree__listItemIcon" loading="lazy" />
<div>
<p class="listThree__listItemText">{$t('Glossary')}</p>
<p class="listThree__listItemSubtext">{$t("Terms with simple explanations")}</p>
</div>
</a>
<a
href="{localeLink()}/brokerage-profit-calculator"
class="listThree__listItem {![35, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Software as a service"
on:mousemove={() => setActiveItem(35)}
>
<img src={calculator} alt="" class="listThree__listItemIcon" loading="lazy" />
<div>
<p class="listThree__listItemText">{$t('Profit Calculator')}</p>
<p class="listThree__listItemSubtext">{$t("Quick calculations")}</p>
</div>
</a>
</div>
</div>
<div class="listFour {type === 5 ? 'active' : 0}">
<div class="listFour__list">
<a
href="{localeLink()}/about"
class="listFour__list-item {![8, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page About Us"
on:mousemove={() => setActiveItem(8)}
>
<img src={about} alt="" class="listThree__listItemIcon" />
<div>
<span class="listFour__listLink">{$t('About Us')}</span>
<p class="listThree__listItemSubtext">{$t("Who we are, what we do")}</p>
</div>
</a>
<a
href="{localeLink()}/team"
class="listFour__list-item {![9, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Team"
on:mousemove={() => setActiveItem(9)}
>
<img src={teamSvg} alt="" class="listThree__listItemIcon" />
<div>
<span class="listFour__listLink">{$t('Team')}</span>
<p class="listThree__listItemSubtext">{$t("People behind the product")}</p>
</div>
</a>
<a
href="{localeLink()}/events"
class="listFour__list-item {![11, 0].includes(activeItem) ? 'active' : ''}"
aria-label="Page Events"
on:mousemove={() => setActiveItem(11)}
>
<img src={events} alt="" class="listThree__listItemIcon" />
<div>
<span class="listFour__listLink">{$t('Events')}</span>
<p class="listThree__listItemSubtext">{$t("Upcoming webinars")}</p>
</div>
</a>
</div>
<img src={team} alt={'team'} />
</div>
</div>
</header>
<style lang="scss">
@import 'src/scss/mixins';
@import 'src/scss/variables';
@import 'src/scss/media';
.header {
padding-bottom: 16px;
@include breakpoint-down('tabL') {
padding-bottom: 0;
}
}
//:global(body.banner) {
// .header {
// padding-bottom: 20px;
// @include breakpoint-down('tabM') {
// padding-bottom: 0;
// }
// &.hideMenu {
// @include breakpoint-down('tabM') {
// transform: translateY(-94px);
// }
// }
// }
//}
.container-main {
position: relative;
max-width: 1440px;
width: 100%;
margin: 0 auto;
padding: 0 56px;
@media (max-width: 1366px) {
padding: 0 40px;
}
@media (max-width: 1024px) {
padding: 0 32px;
}
@media (max-width: 480px) {
padding: 0 24px;
}
@media (max-width: 393px) {
padding: 0 20px;
}
}
.header-bg {
position: fixed;
pointer-events: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
background: $techGrey5;
z-index: 100;
}
.header {
position: fixed;
width: 100%;
z-index: 100;
top: 0;
background: $headerDark;
transition: transform 0.3s cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s,
background 0.3s cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
& :global(.lang) {
@include breakpoint-down('mobL') {
display: none;
}
}
& :global(.lang__list) {
left: -40px;
background-color: #161618;
border: none;
border-radius: 20px;
box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
}
& :global(.lang__inner a) {
color: #f9fbfc;
&:hover {
background-color: #202023;
}
}
& :global(.lang__inner a.active) {
color: #ff282b;
background-color: #202023;
}
&__webinars {
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 43px 12px 24px;
gap: 9px;
background: rgba(50, 50, 50, 0.05);
border-radius: 24px;
@media (max-width: 1366px) {
border-radius: 18px;
padding: 9px 30px 9px 18px;
}
@media (max-width: 768px) {
display: none;
}
a {
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 1.1;
color: #141414;
position: relative;
&:after {
display: block;
width: 8px;
height: 8px;
background: #e62334;
border-radius: 50%;
content: ' ';
position: absolute;
top: 0;
bottom: 0;
right: -23px;
margin: auto;
@media (max-width: 1366px) {
width: 6px;
height: 6px;
right: -16px;
}
}
}
}
:global(.lang__text) {
color: #f9fbfc;
}
:global(.lang__arrow) {
color: #f9fbfc;
}
&__list {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
&_top {
background-color: #28282c;
border-radius: 24px;
padding: 12px 12px 12px 16px;
margin-top: 16px;
margin-bottom: 24px;
padding-left: 16px;
@include breakpoint-down('deskS') {
gap: 50px;
}
@media (max-width: 1140px) {
gap: 10px;
}
@include breakpoint-down('tabL') {
margin-bottom: 16px;
}
}
}
&__left {
display: flex;
align-items: center;
gap: 32px;
}
&__right {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
@include breakpoint-down('deskL') {
gap: 8px;
}
@media (max-width: 1365px) {
gap: 14px;
}
}
&__logo {
background-image: url('../../assets/new-home-logo.svg');
}
&__item {
display: flex;
@include breakpoint-down('deskS') {
&:first-of-type {
flex: 1;
}
}
&_lang {
align-items: center;
}
&_disable {
@include breakpoint-down('tabL') {
display: none;
}
}
&_button {
gap: 8px;
}
}
&__button {
@include smallCTA;
font-weight: 450;
padding: 8px 16px;
border-radius: 40px;
background: #ff282b;
color: $techWhite;
cursor: pointer;
transition: background 0.2s ease-in-out;
@include breakpoint-down('deskS') {
padding: 8px 16px;
font-size: 14px;
line-height: 20px;
}
@media (max-width: 580px) {
display: none;
}
&:active {
background: #c70214;
}
&:hover {
background: #e60019;
}
}
&__drop {
display: none;
position: absolute;
padding: 16px;
border-radius: 32px;
background: #161618;
box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.2), 0px 30px 60px -30px rgba(0, 0, 0, 0.3), 0px 50px 100px -20px rgba(0, 0, 0, 0.38);
&:global(.open) {
opacity: 1;
pointer-events: all;
display: block;
}
&:global(.type-2) {
width: 550px;
}
&:global(.type-3) {
width: 698px;
}
&:global(.type-4) {
width: 310px;
}
&:global(.type-5) {
width: 568px;
}
}
&.ghostWhite {
.header {
&__logo {
background-image: url('../../assets/new-home-logo.svg');
}
&__webinars {
background: rgba(255, 255, 255, 0.7);
}
}
}
&.hide {
transform: translateY(calc(-100% - 1px));
pointer-events: none;
@include breakpoint-down('tabM') {
transform: translateY(calc(-100% - 1px));
}
}
&.hideMenu {
transform: translateY(calc(-100% - 1px));
@include breakpoint-down('tabM') {
transform: translateY(calc(-100% - 1px));
}
}
}
:global(.header.drop .headerTabsItem) {
&:first-of-type {
color: $techGrey30 !important;
&:hover {
color: $fontPrimary !important;
}
}
&:last-of-type {
color: $fontPrimary !important;
}
}
:global(.header.active .headerTabsItem) {
&:first-of-type {
color: $techGrey30 !important;
&:hover {
color: $fontPrimary !important;
}
}
&:last-of-type {
color: $fontPrimary !important;
}
}
.btn-burger {
display: none;
cursor: pointer;
background: $fill3Default;
border-radius: 48px;
height: 36px;
width: 44px;
align-items: center;
justify-content: center;
@include breakpoint-down('tabL') {
display: flex;
}
&--close {
background: $fill3Default;
.burger-lines {
gap: 0;
span {
&:nth-child(1) {
transform: translateY(1px) rotate(45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
transform: translateY(-1px) rotate(-45deg);
}
}
}
}
}
.burger-lines {
display: flex;
flex-direction: column;
gap: 3px;
span {
width: 12px;
height: 1px;
background: $techWhite;
border-radius: 1px;
transition: all 0.2s ease-in-out;
transform-origin: center;
}
}
.nav {
display: flex;
letter-spacing: 0.2px;
align-items: center;
&_top {
gap: 20px;
}
&_bottom {
padding-left: 16px;
gap: 32px;
letter-spacing: -0.3px;
line-height: 18px;
}
&_link {
color: $techWhite;
transition: 0.2s ease-in-out;
white-space: nowrap;
letter-spacing: -0.1px;
font-size: 14px;
&:global(.ghostWhite) {
color: $techWhite;
}
&:hover {
color: $techWhite;
}
}
&_drop {
display: flex;
align-items: center;
cursor: pointer;
transition: 0.2s ease-in-out;
color: $techWhite;
font-size: 14px;
&:global(.ghostWhite) {
color: $techWhite;
}
&:global(.active) {
color: $techWhite;
.nav_dropArrowItemDown {
transform: translateY(18px);
}
.nav_dropArrowItemUp {
transform: translateY(0);
}
}
&:global(.opacity) {
opacity: 0.6;
}
&:hover {
color: $techWhite;
opacity: 1;
}
}
&_dropArrow {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
&_dropArrowItem {
width: 10px;
height: 7px;
transition: 0.2s ease;
margin: 0 9px;
}
&_dropArrowItemUp {
transform: translateY(-18px);
background-image: url('../../assets/icons/white-arrow-up.svg');
position: absolute;
transition: 0.2s ease;
}
&_dropArrowItemDown {
background-image: url('../../assets/icons/white-arrow.svg');
width: 12px;
height: 8px;
background-size: contain;
background-repeat: no-repeat;
}
}
.listOne {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 40px;
width: fit-content;
@include breakpoint-down('deskL') {
gap: 32px;
align-items: flex-start;
}
&__list {
display: flex;
gap: 40px;
@include breakpoint-down('deskL') {
gap: 10px;
}
}
&__listItem {
width: 100%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
transition: 0.3s ease-in-out;
text-decoration: none;
color: inherit;
&:global(.active) {
.listOne__listItemText {
color: $techWhite;
}
}
&:hover {
text-decoration: none;
}
}
&__listItemIcon {
width: 48px;
height: 48px;
padding: 10px;
border: 2px solid #202023;
border-radius: 18px;
}
&__listItemText {
font-weight: 500;
text-align: center;
color: $techWhite;
transition: color 0.3s ease-in-out;
}
&__content {
@include xSmallDefault;
width: 100%;
max-width: 486px;
padding: 17px 24px;
@include breakpoint-down('deskL') {
padding: 20px 24px;
}
}
}
.listThree {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 40px;
width: fit-content;
@include breakpoint-down('deskL') {
gap: 32px;
align-items: flex-start;
}
&__list {
display: flex;
flex-direction: column;
gap: 10px;
}
&__listItem {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
line-height: 20px;
width: 100%;
position: relative;
display: flex;
transition: 0.3s ease-in-out;
text-decoration: none;
color: inherit;
&:global(.active) {
.listThree__listItemText {
color: $techWhite;
}
}
&:hover {
text-decoration: none;
}
}
&__listItemIcon {
width: 48px;
height: 48px;
padding: 10px;
border: 2px solid #202023;
border-radius: 18px;
}
&__listItemText {
margin-bottom: 2px;
color: $techWhite;
transition: color 0.3s ease-in-out;
}
&__listItemSubtext {
color: #7d8387;
}
}
.listTwo {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
text-align: left;
width: fit-content;
&__list {
display: flex;
gap: 14px;
}
&__list-item {
display: flex;
gap: 12px;
align-items: center;
}
&__listItem {
width: 100%;
position: relative;
display: flex;
flex-direction: column;
transition: 0.3s ease-in-out;
text-decoration: none;
color: inherit;
&:global(.active) {
opacity: 0.3;
}
&:hover {
text-decoration: none;
}
}
&__listItemImage {
max-width: 326px;
min-width: 220px;
margin-bottom: 12px;
}
&__listItemText {
margin-bottom: 2px;
font-size: 14px;
line-height: 20px;
color: $techWhite;
}
&__listItemSubtext {
color: #7d8387;
font-size: 14px;
line-height: 20px;
}
&__content {
color: $techWhite;
width: 100%;
max-width: 240px;
}
}
.listFour {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 12px;
font-size: 14px;
line-height: 20px;
&__list-item {
display: flex;
gap: 12px;
align-items: center;
text-decoration: none;
color: inherit;
img {
width: 48px !important;
height: 48px !important;
}
&:hover {
text-decoration: none;
}
&:global(.active) {
.listFour__listLink {
color: $techWhite;
}
}
}
img {
max-width: 277px;
width: 100%;
border-radius: 16px;
}
&__content {
display: flex;
align-items: center;
gap: 40px;
@include breakpoint-down('deskL') {
gap: 32px;
}
}
&__contentText {
@include xSmallDefault;
max-width: 199px;
min-width: 199px;
width: 100%;
color: $techWhite;
@include breakpoint-down('deskL') {
max-width: 192px;
min-width: 192px;
}
}
&__list {
width: 100%;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
}
&__listLink {
font-size: 14px;
line-height: 20px;
font-weight: 500;
display: inline-block;
margin-bottom: 2px;
transition: 0.3s ease-in-out;
color: $techWhite;
}
}
.header {
&:global(.drop) {
.nav_drop {
color: $techWhite;
}
}
}
.listOne,
.listTwo,
.listThree,
.listFour {
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.3s 0.1s;
&:global(.active) {
height: auto;
overflow: initial;
opacity: 1;
}
}
</style>