519 lines
14 KiB
SCSS
519 lines
14 KiB
SCSS
@keyframes pulse {
|
|
to {
|
|
box-shadow: 0 0 0 var(--pi-spacing-xxx-small) transparent;
|
|
}
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0%;
|
|
}
|
|
25% {
|
|
background-position: 25%;
|
|
}
|
|
50% {
|
|
background-position: 50%;
|
|
}
|
|
75% {
|
|
background-position: 75%;
|
|
}
|
|
100% {
|
|
background-position: 100%;
|
|
}
|
|
}
|
|
|
|
@mixin topbarParentMenuItemLargeDevice {
|
|
border: 0.0625rem solid;
|
|
border-radius: var(--pi-border-radius-medium);
|
|
transition: 0.4s all ease-in-out;
|
|
animation: pulse 1.5s infinite 2s ease-in;
|
|
&:hover {
|
|
cursor: pointer;
|
|
animation: unset;
|
|
&::before {
|
|
height: 2.75rem;
|
|
width: 6rem;
|
|
margin-top: -0.125rem;
|
|
margin-left: -0.125rem;
|
|
opacity: 1;
|
|
filter: blur(0.1rem);
|
|
}
|
|
}
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
transition: all 0.3s ease;
|
|
border-radius: 0.75rem;
|
|
opacity: 0;
|
|
height: 0;
|
|
width: 0;
|
|
margin-top: 1.1875rem;
|
|
margin-left: 2.8125rem;
|
|
}
|
|
& > span {
|
|
& > span {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 2.25rem;
|
|
width: 6rem;
|
|
padding-bottom: 0.05rem;
|
|
background-size: 100%;
|
|
background-repeat: repeat;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-moz-background-clip: text;
|
|
-moz-text-fill-color: transparent;
|
|
transition: all 0.45s ease-Out;
|
|
|
|
font: {
|
|
weight: 400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin largeDeviceChildMenu(
|
|
$margin-left,
|
|
$background-color,
|
|
$grid-template-columns: repeat(2, 1fr)
|
|
) {
|
|
// Menu item
|
|
.pi-menu__children {
|
|
z-index: 99;
|
|
position: absolute;
|
|
margin-top: var(--pi-spacing-large);
|
|
margin-left: $margin-left;
|
|
border-radius: var(--pi-border-radius-large);
|
|
background-color: var(--pi-color-white);
|
|
box-shadow: var(--pi-box-shadow-double);
|
|
& > div {
|
|
display: grid;
|
|
grid-template-columns: $grid-template-columns;
|
|
gap: var(--pi-spacing-medium);
|
|
}
|
|
|
|
& > aside {
|
|
background-color: $background-color;
|
|
}
|
|
|
|
// Submenu entry
|
|
.pi-list-item {
|
|
min-width: 15.625rem;
|
|
&:not(:hover) {
|
|
.pi-list-item-content {
|
|
&.pi-list-item-content__left {
|
|
& > span {
|
|
//
|
|
&:nth-child(1) {
|
|
color: var(--pi-color-black);
|
|
}
|
|
&:nth-child(2) {
|
|
color: var(--pi-color-grey-300);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin largeDeviceChildMenuItemColor($background-color) {
|
|
// Submenu entry
|
|
.pi-list-item {
|
|
&:hover {
|
|
background-color: $background-color;
|
|
}
|
|
}
|
|
}
|
|
// Small device
|
|
@mixin smallDevieMenuSize($topbar-center-content-height: calc(100vh - 10rem)) {
|
|
.pi-website-topbar-content {
|
|
// Center
|
|
&.pi-website-topbar-content__center {
|
|
height: $topbar-center-content-height;
|
|
min-height: $topbar-center-content-height;
|
|
overflow: auto;
|
|
|
|
// Generic Scroll
|
|
&::-webkit-scrollbar {
|
|
width: var(--pi-spacing-xxx-small);
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
border-radius: var(--pi-border-radius-small);
|
|
background-color: var(--pi-color-grey-75);
|
|
|
|
&:hover {
|
|
background-color: var(--pi-color-grey-100);
|
|
transition: var(--pi-animation);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin smallDeviceMenuColor($border-color, $color) {
|
|
& > span {
|
|
border-color: $border-color;
|
|
& > span {
|
|
color: $color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pi-website-footer-content {
|
|
&.pi-website-footer-content__top-right {
|
|
.pi-menu-event-item {
|
|
&:nth-child(2) {
|
|
.pi-menu__children {
|
|
.pi-text {
|
|
color: var(--pi-color-primary);
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(3) {
|
|
.pi-menu__children {
|
|
.pi-text {
|
|
color: var(--pi-color-accent);
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(4) {
|
|
.pi-menu__children {
|
|
.pi-text {
|
|
color: var(--pi-color-highlighted);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html {
|
|
// Mobile
|
|
&.is-mobile {
|
|
@include smallDevieMenuSize;
|
|
}
|
|
// Mobile & Tablet
|
|
&:not(.is-desktop) {
|
|
// Small device
|
|
@media screen and (max-width: 62rem) {
|
|
.pi-website-topbar-content {
|
|
// Center
|
|
&.pi-website-topbar-content__center {
|
|
.pi-menu {
|
|
// Parent
|
|
&.pi-menu__parent {
|
|
& > nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--pi-spacing-xx-large);
|
|
padding-bottom: var(--pi-spacing-xx-large);
|
|
.pi-menu-event-item {
|
|
&.has-children {
|
|
& > span {
|
|
display: flex;
|
|
width: -webkit-fill-available;
|
|
border-bottom: 1px solid;
|
|
padding-bottom: var(--pi-spacing-xxx-small);
|
|
|
|
& > span {
|
|
padding-left: var(--pi-spacing-xx-small);
|
|
font: {
|
|
size: var(--pi-font-size-x-small);
|
|
}
|
|
}
|
|
}
|
|
// Company
|
|
&:nth-child(1) {
|
|
@include smallDeviceMenuColor(
|
|
var(--pi-color-primary-100),
|
|
var(--pi-color-primary)
|
|
);
|
|
}
|
|
// Investor
|
|
&:nth-child(2) {
|
|
@include smallDeviceMenuColor(
|
|
var(--pi-color-accent-100),
|
|
var(--pi-color-accent)
|
|
);
|
|
}
|
|
// Advisor
|
|
&:nth-child(3) {
|
|
@include smallDeviceMenuColor(
|
|
var(--pi-color-highlighted-100),
|
|
var(--pi-color-highlighted)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Children
|
|
&.pi-menu__children {
|
|
.pi-list-item {
|
|
padding-top: var(--pi-spacing-small);
|
|
padding-bottom: var(--pi-spacing-small);
|
|
&:nth-child(n + 2) {
|
|
padding-left: var(--pi-spacing-x-large);
|
|
.pi-list-item-content {
|
|
&.pi-list-item-content__left {
|
|
& > span {
|
|
&:nth-child(1) {
|
|
color: var(--pi-color-grey);
|
|
font: {
|
|
weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pi-list-item-content {
|
|
&.pi-list-item-content__left {
|
|
& > span {
|
|
&:nth-child(2) {
|
|
color: var(--pi-color-grey-300);
|
|
font: {
|
|
size: var(--pi-font-size-x-small);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tablet
|
|
&.is-tablet {
|
|
&.is-tablet__small {
|
|
@include smallDevieMenuSize(calc(100vh - 11.5rem));
|
|
}
|
|
}
|
|
|
|
// Tablet & Desktop
|
|
&:not(.is-mobile) {
|
|
// Large device
|
|
@media screen and (min-width: 62rem) {
|
|
.pi-shell__deale-website {
|
|
// Topbar
|
|
.pi-website-topbar {
|
|
.pi-menu {
|
|
.pi-menu-event-item {
|
|
@include topbarParentMenuItemLargeDevice;
|
|
}
|
|
// Parent
|
|
&.pi-menu__parent {
|
|
& > nav {
|
|
display: flex;
|
|
gap: var(--pi-spacing-medium);
|
|
}
|
|
.pi-menu-event-item {
|
|
&.has-children {
|
|
&:not(.is-selected) {
|
|
.pi-menu__children {
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
&.is-selected {
|
|
.pi-menu__children {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Child
|
|
&.pi-menu__children {
|
|
& > div,
|
|
& > aside {
|
|
// Menu items
|
|
& > div {
|
|
& > span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--pi-spacing-xxx-small);
|
|
}
|
|
}
|
|
}
|
|
// Child menu
|
|
& > div {
|
|
padding: var(--pi-spacing-medium);
|
|
border-radius: var(--pi-border-radius-large)
|
|
var(--pi-border-radius-large) 0 0;
|
|
// Child Menu items
|
|
& > div {
|
|
& > span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--pi-spacing-xxx-small);
|
|
}
|
|
}
|
|
}
|
|
// Aside menu
|
|
& > aside {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
width: 100%;
|
|
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large)
|
|
var(--pi-spacing-medium);
|
|
border-radius: 0 0 var(--pi-border-radius-large)
|
|
var(--pi-border-radius-large);
|
|
// Aside Menu items
|
|
& > div {
|
|
& > span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--pi-spacing-xxx-small);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pi-website-topbar-content {
|
|
// Center
|
|
&.pi-website-topbar-content__center {
|
|
.pi-menu {
|
|
&.pi-menu__parent {
|
|
& > nav {
|
|
& > .pi-menu-event-item {
|
|
// Company
|
|
&:nth-child(1) {
|
|
@include largeDeviceChildMenu(
|
|
-18.75rem,
|
|
var(--pi-color-primary-25)
|
|
);
|
|
@include largeDeviceChildMenuItemColor(
|
|
var(--pi-color-primary-25)
|
|
);
|
|
}
|
|
// Investor
|
|
&:nth-child(2) {
|
|
@include largeDeviceChildMenu(
|
|
-14.125rem,
|
|
var(--pi-color-accent-25)
|
|
);
|
|
@include largeDeviceChildMenuItemColor(
|
|
var(--pi-color-accent-25)
|
|
);
|
|
}
|
|
// Advisor
|
|
&:nth-child(3) {
|
|
@include largeDeviceChildMenu(
|
|
-14.625rem,
|
|
var(--pi-color-highlighted-25)
|
|
);
|
|
@include largeDeviceChildMenuItemColor(
|
|
var(--pi-color-highlighted-25)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Right
|
|
&.pi-website-topbar-content__right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: var(--pi-spacing-medium);
|
|
@include largeDeviceChildMenu(-100px, unset, 1fr);
|
|
.pi-menu {
|
|
&:not(.pi-menu__children) {
|
|
& > nav {
|
|
& > .pi-menu-event-item {
|
|
@include topbarParentMenuItemLargeDevice;
|
|
|
|
// Prices
|
|
&:nth-of-type(1) {
|
|
.pi-menu__children {
|
|
& > div {
|
|
.pi-list-item {
|
|
&:hover {
|
|
// Company Pricing
|
|
&:nth-child(1) {
|
|
color: var(--pi-color-primary);
|
|
background-color: var(--pi-color-primary-25);
|
|
}
|
|
// Investor Pricing
|
|
&:nth-child(2) {
|
|
color: var(--pi-color-accent);
|
|
background-color: var(--pi-color-accent-25);
|
|
}
|
|
// Advisor Pricing
|
|
&:nth-child(3) {
|
|
color: var(--pi-color-highlighted);
|
|
background-color: var(
|
|
--pi-color-highlighted-25
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Login
|
|
.pi-button__type--menu-item {
|
|
&.pi-button__action {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 2.25rem;
|
|
width: 7rem;
|
|
border-radius: var(--pi-border-radius-medium);
|
|
|
|
@include topbarParentMenuItemLargeDevice;
|
|
& > span {
|
|
padding-bottom: 0.1875rem;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-moz-background-clip: text;
|
|
-moz-text-fill-color: transparent;
|
|
|
|
font: {
|
|
weight: 400;
|
|
}
|
|
}
|
|
|
|
position: relative;
|
|
transition: all 0.45s ease-Out;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// LargeDevice
|
|
&.is-desktop {
|
|
}
|
|
}
|