/* ================================
CSS FILE INDEX:
1. Design Tokens
1.1. Colors
1.2. Fonts
1.3. Border Radius and Spacing
1.4. Shadows
1.5. Borders
2. Backgrounds
2.1. Solid Backgrounds
2.2. Alpha Backgrounds
2.3. Faded Backgrounds
2.4. Gradient Backgrounds
3. Typography
3.1. Font Sizes
3.2. Font Styles
3.3. Font Colors
3.4. Text Effects
3.5. Text Alignment
4. Navigation
4.1. Top Menu
4.2. Main Menu
4.3. Mobile Menu
5. Sections
5.1. Container
5.2. Hero Section
5.3. Inner Hero Section
5.4. Standard Section
6. Spacing
6.1. Margins
6.2. Padding
7. Buttons
7.1. Button Sizes
7.2. Button Colors
8. Borders
9. Boxes
9.1. Box Sizes
9.2. Box Radius
9.3. Box Shadows
9.4. Box Colors
9.5. Box Effects
9.6. Box Decorations
9.7. Responsive Float
9.8. Custom Boxes
10. Images
11. Footer
================================ */
:root {
/* Colors */
--primary-color: var(--color-midnight);
--primary-color-rgb: var(--color-midnight-rgb);
/* Twilight */
--color-moonlight: #9593E5;
--color-moonlight-rgb: 149, 147, 229;
--color-mist: #7C76C9;
--color-mist-rgb: 124, 118, 201;
--color-midnight: #6359AE;
--color-midnight-rgb: 99, 89, 174;
/* Grey */
--color-space: #111111;
--color-space-rgb: 17, 17, 17;
--color-soot: #26272f;
--color-soot-rgb: 38, 39, 47;
--color-storm: #575B75;
--color-storm-rgb: 87, 91, 117;
--color-smoke: #A3A4C9;
--color-smoke-rgb: 163, 164, 201;
--color-slate: #CED0F0;
--color-slate-rgb: 206, 208, 240;
--color-snow: #EBECF8;
--color-snow-rgb: 235, 236, 248;
--color-white: #FFFFFF;
--color-white-rgb: 255, 255, 255;
/* Cosmic Series */
/* Cosmic-Space */
--color-cosmic-space: #4D40C2;
--color-cosmic-space-rgb: 77, 64, 194;
--color-cosmic-space-900: #5F53C8;
--color-cosmic-space-900-rgb: 95, 83, 200;
--color-cosmic-space-800: #7166CE;
--color-cosmic-space-800-rgb: 113, 102, 206;
--color-cosmic-space-700: #8279D4;
--color-cosmic-space-700-rgb: 130, 121, 212;
--color-cosmic-space-600: #948CDA;
--color-cosmic-space-600-rgb: 148, 140, 218;
--color-cosmic-space-500: #A6A0E1;
--color-cosmic-space-500-rgb: 166, 160, 225;
--color-cosmic-space-400: #B8B3E7;
--color-cosmic-space-400-rgb: 184, 179, 231;
--color-cosmic-space-300: #CAC6ED;
--color-cosmic-space-300-rgb: 202, 198, 237;
--color-cosmic-space-200: #DBD9F3;
--color-cosmic-space-200-rgb: 219, 217, 243;
--color-cosmic-space-100: #EDECF9;
--color-cosmic-space-100-rgb: 237, 236, 249;
/* Cosmic */
--color-cosmic: #9480F7;
--color-cosmic-rgb: 148, 128, 247;
--color-cosmic-900: #9F8DF8;
--color-cosmic-900-rgb: 159, 141, 248;
--color-cosmic-800: #A999F9;
--color-cosmic-800-rgb: 169, 153, 249;
--color-cosmic-700: #B4A6F9;
--color-cosmic-700-rgb: 180, 166, 249;
--color-cosmic-600: #BFB3FA;
--color-cosmic-600-rgb: 191, 179, 250;
--color-cosmic-500: #CAC0FB;
--color-cosmic-500-rgb: 202, 192, 251;
--color-cosmic-400: #D4CCFC;
--color-cosmic-400-rgb: 212, 204, 252;
--color-cosmic-300: #DFD9FD;
--color-cosmic-300-rgb: 223, 217, 253;
--color-cosmic-200: #EAE6FD;
--color-cosmic-200-rgb: 234, 230, 253;
--color-cosmic-100: #F4F2FE;
--color-cosmic-100-rgb: 244, 242, 254;
/* Cosmic-Sky */
--color-cosmic-sky: #CD9CFF;
--color-cosmic-sky-rgb: 205, 156, 255;
--color-cosmic-sky-900: #D2A6FF;
--color-cosmic-sky-900-rgb: 210, 166, 255;
--color-cosmic-sky-800: #D7B0FF;
--color-cosmic-sky-800-rgb: 215, 176, 255;
--color-cosmic-sky-700: #DCBAFF;
--color-cosmic-sky-700-rgb: 220, 186, 255;
--color-cosmic-sky-600: #E1C4FF;
--color-cosmic-sky-600-rgb: 225, 196, 255;
--color-cosmic-sky-500: #E6CEFF;
--color-cosmic-sky-500-rgb: 230, 206, 255;
--color-cosmic-sky-400: #EBD7FF;
--color-cosmic-sky-400-rgb: 235, 215, 255;
--color-cosmic-sky-300: #F0E1FF;
--color-cosmic-sky-300-rgb: 240, 225, 255;
--color-cosmic-sky-200: #F5EBFF;
--color-cosmic-sky-200-rgb: 245, 235, 255;
--color-cosmic-sky-100: #FAF5FF;
--color-cosmic-sky-100-rgb: 250, 245, 255;
/* Nebula */
--color-nebula: #C775AB;
--color-nebula-rgb: 199, 117, 171;
--color-nebula-900: #CD83B3;
--color-nebula-900-rgb: 205, 131, 179;
--color-nebula-800: #D291BC;
--color-nebula-800-rgb: 210, 145, 188;
--color-nebula-700: #D89EC4;
--color-nebula-700-rgb: 216, 158, 196;
--color-nebula-600: #DDACCD;
--color-nebula-600-rgb: 221, 172, 205;
--color-nebula-500: #E3BAD5;
--color-nebula-500-rgb: 227, 186, 213;
--color-nebula-400: #E9C8DD;
--color-nebula-400-rgb: 233, 200, 221;
--color-nebula-300: #EED6E6;
--color-nebula-300-rgb: 238, 214, 230;
--color-nebula-200: #F4E3EE;
--color-nebula-200-rgb: 244, 227, 238;
--color-nebula-100: #F9F1F7;
--color-nebula-100-rgb: 249, 241, 247;
/* Bermuda */
--color-bermuda: #29C1C9;
--color-bermuda-rgb: 41, 193, 201;
--color-bermuda-900: #3EC7CE;
--color-bermuda-900-rgb: 62, 199, 206;
--color-bermuda-800: #54CDD4;
--color-bermuda-800-rgb: 84, 205, 212;
--color-bermuda-700: #69D4D9;
--color-bermuda-700-rgb: 105, 212, 217;
--color-bermuda-600: #7FDADF;
--color-bermuda-600-rgb: 127, 218, 223;
--color-bermuda-500: #94E0E4;
--color-bermuda-500-rgb: 148, 224, 228;
--color-bermuda-400: #A9E6E9;
--color-bermuda-400-rgb: 169, 230, 233;
--color-bermuda-300: #BFECF0;
--color-bermuda-300-rgb: 191, 236, 240;
--color-bermuda-200: #D4F3F4;
--color-bermuda-200-rgb: 212, 243, 244;
--color-bermuda-100: #EAF9FA;
--color-bermuda-100-rgb: 234, 249, 250;
/* Deepspace */
--color-deepspace: #1B1638;
--color-deepspace-rgb: 27, 22, 56;
/* Gradient to right */
--gradient-galactic-twilight-to-right: linear-gradient(to right, var(--color-moonlight), var(--color-midnight));
--gradient-cosmic-nebula-to-right: linear-gradient(to right, var(--color-nebula-800) 30%, var(--color-cosmic) 100%);
--gradient-galactic-dusk-to-right: linear-gradient(to right, var(--color-snow), var(--color-midnight), var(--color-space));
--gradient-cosmic-mist-to-right: linear-gradient(to right, var(--color-cosmic-sky-700), var(--color-cosmic-700));
--gradient-cosmic-light-to-right: linear-gradient(to right, var(--color-white), var(--color-cosmic-700));
--gradient-silver-to-right: linear-gradient(to right, var(--color-snow), var(--color-smoke));
/* Gradient to bottom */
--gradient-galactic-twilight-to-bottom: linear-gradient(to bottom, var(--color-moonlight), var(--color-midnight));
--gradient-cosmic-nebula-to-bottom: linear-gradient(to bottom, var(--color-nebula-800) 30%, var(--color-cosmic) 100%);
--gradient-galactic-dusk-to-bottom: linear-gradient(to bottom, var(--color-snow), var(--color-midnight), var(--color-space));
--gradient-cosmic-mist-to-bottom: linear-gradient(to bottom, var(--color-cosmic-sky-700), var(--color-cosmic-700));
--gradient-cosmic-light-to-bottom: linear-gradient(to bottom, var(--color-white), var(--color-cosmic-700));
--gradient-silver-to-bottom: linear-gradient(to bottom, var(--color-snow), var(--color-smoke));
--gradient-galactic-twilight-alpha-to-bottom: linear-gradient(to bottom, rgba(var(--color-moonlight-rgb), 0.6), rgba(var(--color-midnight-rgb), 0.2));
/* Dark Alpha */
--color-dark-alpha-10: rgba(var(--color-space-rgb), 0.1);
--color-dark-alpha-20: rgba(var(--color-space-rgb), 0.2);
--color-dark-alpha-30: rgba(var(--color-space-rgb), 0.3);
--color-dark-alpha-40: rgba(var(--color-space-rgb), 0.4);
--color-dark-alpha-50: rgba(var(--color-space-rgb), 0.5);
--color-dark-alpha-60: rgba(var(--color-space-rgb), 0.6);
--color-dark-alpha-70: rgba(var(--color-space-rgb), 0.7);
--color-dark-alpha-80: rgba(var(--color-space-rgb), 0.8);
--color-dark-alpha-90: rgba(var(--color-space-rgb), 0.9);
--color-dark-alpha-100: rgba(var(--color-space-rgb), 1.0);
/* Light Alpha */
--color-light-alpha-10: rgba(var(--color-white-rgb), 0.1);
--color-light-alpha-20: rgba(var(--color-white-rgb), 0.2);
--color-light-alpha-30: rgba(var(--color-white-rgb), 0.3);
--color-light-alpha-40: rgba(var(--color-white-rgb), 0.4);
--color-light-alpha-50: rgba(var(--color-white-rgb), 0.5);
--color-light-alpha-60: rgba(var(--color-white-rgb), 0.6);
--color-light-alpha-70: rgba(var(--color-white-rgb), 0.7);
--color-light-alpha-80: rgba(var(--color-white-rgb), 0.8);
--color-light-alpha-90: rgba(var(--color-white-rgb), 0.9);
--color-light-alpha-100: rgba(var(--color-white-rgb), 1.0);
/* Cosmic Alpha */
--color-cosmic-alpha-10: rgba(var(--color-cosmic-rgb), 0.1);
--color-cosmic-alpha-20: rgba(var(--color-cosmic-rgb), 0.2);
--color-cosmic-alpha-30: rgba(var(--color-cosmic-rgb), 0.3);
--color-cosmic-alpha-40: rgba(var(--color-cosmic-rgb), 0.4);
--color-cosmic-alpha-50: rgba(var(--color-cosmic-rgb), 0.5);
--color-cosmic-alpha-60: rgba(var(--color-cosmic-rgb), 0.6);
--color-cosmic-alpha-70: rgba(var(--color-cosmic-rgb), 0.7);
--color-cosmic-alpha-80: rgba(var(--color-cosmic-rgb), 0.8);
--color-cosmic-alpha-90: rgba(var(--color-cosmic-rgb), 0.9);
--color-cosmic-alpha-100: rgba(var(--color-cosmic-rgb), 1.0);
/* Font */
--body-font: 'Montserrat', Helvetica, Arial, sans-serif;
--body-font-weight-normal: 300;
--body-font-weight-medium: 400;
--body-font-weight-bold: 500;
--body-font-weight-extrabold: 600;
--title-font: 'Montserrat', Helvetica, Arial, sans-serif;
--title-font-weight-normal: 300;
--title-font-weight-medium: 400;
--title-font-weight-bold: 500;
--title-font-weight-extrabold: 600;
--font-code-family: 'Roboto Mono', monospace;
--font-code-weight: 400;
--font-thai-family: 'Kanit', sans-serif;
--font-thai-weight-normal: 300;
--font-thai-weight-bold: 400;
/* Round Corner */
--round-lg: 2rem;
--round-md: 1.5rem;
--round-sm: 1rem;
--round-xs: 0.5rem;
--round-xxs: 0.25rem;
/* Padding */
--padding-lg: 3em;
--padding-md: 2em;
--padding-sm: 1.5em;
--padding-xs: 1.25em;
--padding-xxs: 1em;
--padding-0: 0;
/* Spacing */
--spacing-xxl: 12rem;
--spacing-xl: 9rem;
--spacing-lg: 6rem;
--spacing-md: 3rem;
--spacing-sm: 1.5rem;
--spacing-xs: 0.75rem;
--spacing-xxs: 0.375rem;
/* Box Shadow Size */
--box-shadow-xl: 0 3vh 4vh; /* X-offset Y-offset Blur Radius */
--box-shadow-lg: 0 2vh 3vh;
--box-shadow-md: 0 1.3vh 3vh;
--box-shadow-sm: 0 0.6vh 1.5vh;
/* Box Shadow Colors */
--box-shadow-prime-10: rgb(var(--color-cosmic-space-rgb), 0.1);
--box-shadow-prime-30: rgb(var(--color-cosmic-space-rgb), 0.3);
--box-shadow-prime-50: rgb(var(--color-cosmic-space-rgb), 0.5);
--box-shadow-dark-10: rgb(var(--color-space-rgb), 0.1);
--box-shadow-dark-30: rgb(var(--color-space-rgb), 0.3);
--box-shadow-dark-50: rgb(var(--color-space-rgb), 0.5);
--box-shadow-light-10: rgb(var(--color-cosmic-rgb), 0.1);
--box-shadow-light-30: rgb(var(--color-cosmic-rgb), 0.3);
--box-shadow-light-50: rgb(var(--color-cosmic-rgb), 0.5);
/* Box Border */
--box-border-lg: 4px solid;
--box-border-md: 3px solid;
--box-border-sm: 2px solid;
--box-border-xs: 1px solid;
}
/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sometype+Mono:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,200;0,300;1,200;1,300&display=swap');
/* Preloader */
.mid-line {
position: absolute;
top: 50%;
transform: translate(0, -50%);
background-color: var(--color-storm);
height: 0px;
width: 100%;
overflow: hidden;
opacity: 0;
z-index: 1093;
animation: preloader-line 4s ease;
}
.pr-before {
position: absolute;
top: 0;
background-color: var(--color-space);
height: 0%;
width: 100%;
z-index: 1092;
animation: preloader-before 6s ease;
}
.pr-after {
position: absolute;
bottom: 1px;
background-color: var(--color-space);
height: 0%;
width: 100%;
z-index: 1092;
animation: preloader-after 6s ease;
}
.loading {
position: absolute;
z-index: 1094;
top: 50%;
left: 50%;
margin-top: -16px;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 0px;
opacity: 0;
color: var(--color-snow);
animation: preloader-loading 4s ease;
}
@keyframes preloader-line {
0% {
width: 0%;
height: 1px;
opacity: 1;
}
70% {
width: 100%;
height: 1px;
opacity: 1;
}
99% {
height: 1px;
opacity: 0;
}
100% {
height: 0px;
}
}
@keyframes preloader-loading {
0% {
font-size: 15px;
filter: blur(0px);
opacity: 1;
}
70% {
font-size: 15px;
filter: blur(0px);
opacity: 1;
}
99% {
filter: blur(25px);
font-size: 25px;
opacity: 0;
}
100% {
font-size: 0px;
}
}
@keyframes preloader-before {
0% {
height: 50%;
opacity: 1;
}
45% {
height: 50%;
}
70% {
height: 0%;
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes preloader-after {
0% {
height: 50%;
opacity: 1;
}
45% {
height: 50%;
}
70% {
height: 0%;
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Body */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
transition: opacity 0.7s ease-in;
}
body.fadein {
opacity: 1;
}
body.fadeout {
opacity: 0;
transition: opacity 0.5s ease-out;
}
/* BG */
/* BG Solid */
body.light-mode{
background: var(--color-snow);
font-size: 1.125rem;
line-height: 1.45em;
color: var(--color-space);
font-weight: var(--body-font-weight-normal);
}
body.dark-mode{
background: var(--color-space);
font-size: 1.125rem;
line-height: 1.45em;
color: var(--color-slate);
font-weight: var(--body-font-weight-normal);
}
.bg-light-mode{
background: var(--color-snow);
}
.bg-dark-mode{
background: var(--color-space);
}
.bg-moonlight {
background: var(--color-moonlight);
}
.bg-midnight {
background: var(--color-midnight);
}
.bg-cosmic-space {
background: var(--color-cosmic-space);
}
.bg-cosmic {
background: var(--color-cosmic);
}
.bg-cosmic-sky {
background: var(--color-cosmic-sky);
}
.bg-nebula {
background: var(--color-nebula);
}
.bg-bermuda {
background: var(--color-bermuda);
}
.bg-deepspace {
background: var(--color-deepspace);
}
.bg-space {
background: var(--color-space);
}
.bg-soot {
background: var(--color-soot);
}
.bg-storm {
background: var(--color-storm);
}
.bg-smoke {
background: var(--color-smoke);
}
.bg-slate{
background: var(--color-slate);
}
.bg-snow{
background: var(--color-snow);
}
.bg-violet-custom{
background: #725bc1;
}
/* BG Alpha */
/* BG Dark Alpha */
.bg-dark-alpha-10 {
background: var(--color-dark-alpha-10);
}
.bg-dark-alpha-20 {
background: var(--color-dark-alpha-20);
}
.bg-dark-alpha-30 {
background: var(--color-dark-alpha-30);
}
.bg-dark-alpha-40 {
background: var(--color-dark-alpha-40);
}
.bg-dark-alpha-50 {
background: var(--color-dark-alpha-50);
}
.bg-dark-alpha-60 {
background: var(--color-dark-alpha-60);
}
.bg-dark-alpha-70 {
background: var(--color-dark-alpha-70);
}
.bg-dark-alpha-80 {
background: var(--color-dark-alpha-80);
}
.bg-dark-alpha-90 {
background: var(--color-dark-alpha-90);
}
.bg-dark-alpha-100 {
background: var(--color-dark-alpha-100);
}
/* BG Light Alpha */
.bg-light-alpha-10 {
background: var(--color-light-alpha-10);
}
.bg-light-alpha-20 {
background: var(--color-light-alpha-20);
}
.bg-light-alpha-30 {
background: var(--color-light-alpha-30);
}
.bg-light-alpha-40 {
background: var(--color-light-alpha-40);
}
.bg-light-alpha-50 {
background: var(--color-light-alpha-50);
}
.bg-light-alpha-60 {
background: var(--color-light-alpha-60);
}
.bg-light-alpha-70 {
background: var(--color-light-alpha-70);
}
.bg-light-alpha-80 {
background: var(--color-light-alpha-80);
}
.bg-light-alpha-90 {
background: var(--color-light-alpha-90);
}
.bg-light-alpha-100 {
background: var(--color-light-alpha-100);
}
/* BG Cosmic Alpha */
.bg-cosmic-alpha-10 {
background: var(--color-cosmic-alpha-10);
}
.bg-cosmic-alpha-20 {
background: var(--color-cosmic-alpha-20);
}
.bg-cosmic-alpha-30 {
background: var(--color-cosmic-alpha-30);
}
.bg-cosmic-alpha-40 {
background: var(--color-cosmic-alpha-40);
}
.bg-cosmic-alpha-50 {
background: var(--color-cosmic-alpha-50);
}
.bg-cosmic-alpha-60 {
background: var(--color-cosmic-alpha-60);
}
.bg-cosmic-alpha-70 {
background: var(--color-cosmic-alpha-70);
}
.bg-cosmic-alpha-80 {
background: var(--color-cosmic-alpha-80);
}
.bg-cosmic-alpha-90 {
background: var(--color-cosmic-alpha-90);
}
.bg-cosmic-alpha-100 {
background: var(--color-cosmic-alpha-100);
}
/* BG Fade */
.gradient-bg-gtop {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
background-image: url('../images/background/gradientbg-gtop.png');
background-size: 100% 100%;
background-position: top;
background-repeat: repeat-x;
height: auto;
}
.bg-fade-light-to-dark-lg {
display: flex;
position: relative;
background-image: url('../images/background/fade-light-to-dark.png');
background-size: 100% 100% !important;
background-position: top;
background-repeat: repeat-x;
background-color: var(--color-space);
height: auto;
}
.bg-fade-light-to-dark-md {
display: flex;
position: relative;
background-image: url('../images/background/fade-light-to-dark.png');
background-size: 100% 50% !important;
background-position: top;
background-repeat: repeat-x;
background-color: var(--color-space);
height: auto;
}
.bg-fade-dark-to-light-lg {
display: flex;
position: relative;
background-image: url('../images/background/fade-dark-to-light.png');
background-size: 100% 100% !important;
background-position: top;
background-repeat: repeat-x;
background-color: var(--color-space);
height: auto;
}
.bg-fade-dark-to-light-md {
display: flex;
position: relative;
background-image: url('../images/background/fade-dark-to-light.png');
background-size: 100% 50% !important;
background-position: top;
background-repeat: repeat-x;
background-color: var(--color-space);
height: auto;
}
/* BG Gradient */
.bg-galactic-twilight-to-right {
background: var(--gradient-galactic-twilight-to-right);
}
.bg-galactic-dusk-to-right {
background: var(--gradient-galactic-dusk-to-right);
}
.bg-cosmic-nebula-to-right {
background: var(--gradient-cosmic-nebula-to-right);
}
.bg-cosmic-mist-to-right {
background: var(--gradient-cosmic-mist-to-right);
}
.bg-galactic-twilight-to-bottom {
background: var(--gradient-galactic-twilight-to-bottom);
}
.bg-galactic-dusk-to-bottom {
background: var(--gradient-galactic-dusk-to-bottom);
}
.bg-cosmic-nebula-to-bottom {
background: var(--gradient-cosmic-nebula-to-bottom);
}
.bg-cosmic-mist-to-bottom {
background: var(--gradient-cosmic-mist-to-bottom);
}
/* Font */
/* Font Size */
html {
font-size: 14px;
}
@media (min-width: 576px) {
html {
font-size: 16px;
}
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
@media (min-width: 992px) {
html {
font-size: 16px;
}
}
@media (min-width: 1200px) {
html {
font-size: 16px;
}
}
@media (min-width: 1400px) {
html {
font-size: 16px;
}
}
/* Headings */
H1, H2, H3 {
font-weight: var(--title-font-weight-normal);
}
H4, H5, H6 {
font-weight: var(--title-font-weight-normal);
}
H1 {
font-size: 2.9rem;
line-height: 1.3em;
}
H2 {
font-size: 2.25rem;
line-height: 1.3em;
}
H3 {
font-size: 1.95rem;
line-height: 1.3em;
}
H4 {
font-size: 1.56rem;
line-height: 1.3em;
}
H5 {
font-size: 1.25rem;
line-height: 1.5em;
}
H6 {
font-size: 1.17rem;
line-height: 1.5em;
}
/* Display */
H1.display {
font-size: 4rem;
line-height: 1.3em;
}
H2.display {
font-size: 3.75rem;
line-height: 1.3em;
}
H3.display {
font-size: 3.5rem;
line-height: 1.3em;
}
/* Text */
.text-md, .text-sm, .text-xs {
font-weight: var(--body-font-weight-normal);
}
.text-md {
font-size: 1rem;
line-height: 1.5em;
}
.text-sm {
font-size: 0.9rem;
line-height: 1.5em;
}
.text-xs {
font-size: 0.8rem;
line-height: 1.5em;
}
/* Code */
.code-xxl, .code-xl, .code-lg, .code-md, .code-sm, .code-xs {
font-family: var(--font-code-family);
font-weight: var(--font-code-weight);
}
.code-xxl {
font-size: 1.56rem;
line-height: 1.25em;
}
.code-xl {
font-size: 1.25rem;
line-height: 1.25em;
}
.code-lg {
font-size: 1.17rem;
line-height: 1.25em;
}
.code-md {
font-size: 1rem;
line-height: 1.45em;
}
.code-sm {
font-size: 0.9rem;
line-height: 1.45em;
}
.code-xs {
font-size: 0.8rem;
line-height: 1.45em;
}
/* Thai */
.thai-font {
font-family: var(--font-thai-family);
font-weight: var(--font-thai-weight-normal);
letter-spacing: 0.05em;
}
.thai-sm {
font-size: 1.6vh;
line-height: 1.6em;
}
/* Responsive */
@media (max-width: 430px) {
H1 {
font-size: 2.5rem;
line-height: 1.3em;
}
H2 {
font-size: 2.1rem;
line-height: 1.3em;
}
H3 {
font-size: 1.95rem;
line-height: 1.3em;
}
H4 {
font-size: 1.56rem;
line-height: 1.3em;
}
H5 {
font-size: 1.25rem;
line-height: 1.5em;
}
H6 {
font-size: 1.17rem;
line-height: 1.5em;
}
H1.display {
font-size: 3.5rem;
line-height: 1.3em;
}
H2.display {
font-size: 3.3rem;
line-height: 1.3em;
}
H3.display {
font-size: 3rem;
line-height: 1.3em;
}
}
#section-breaksilos H3 {
font-size: 1.95rem;
line-height: 1.3em;
}
#section-breaksilos H3.display {
font-size: 3.5rem;
line-height: 1.3em;
}
#section-breaksilos H5 {
font-size: 1.25rem;
line-height: 1.5em;
}
@media (max-width: 430px) {
#section-breaksilos H3 {
font-size: 1.75rem;
}
#section-breaksilos H3.display {
font-size: 2.99rem;
}
#section-breaksilos H5 {
font-size: 1.2rem;
}
}
#section-fhe H2, #section-tamperproof H2 {
font-size: 2.25rem;
line-height: 1.3em;
}
@media (max-width: 430px) {
#section-fhe H2, #section-tamperproof H2 {
font-size: 1.8rem;
}
}
#section-powerful H2.display {
font-size: 3.5rem;
line-height: 1.3em;
margin-bottom: 0.2em;
}
#section-powerful H2 {
font-size: 2.45rem;
line-height: 1.3em;
}
@media (max-width: 430px) {
#section-powerful H2.display {
margin-bottom: 0.3em;
}
#section-powerful H2 {
font-size: 2.25rem;
}
}
#section-accelerators H1 {
font-size: 2.9rem;
line-height: 1.3em;
}
#section-accelerators H6 {
font-size: 1.17rem;
line-height: 1.5em;
}
/* xs */
@media (max-width: 375px) {
#section-accelerators H1 {
font-size: 2.2rem;
}
#section-accelerators H6 {
font-size: 1.17rem;
}
}
/* sm iphone se-p *//* sm iphone 12 pro-p *//* sm iphone xr-p, iphone 14 pro max-p */
@media (min-width: 375px) and (max-width: 576px) {
#section-accelerators H1 {
font-size: 2.2rem;
}
#section-accelerators H6 {
font-size: 1.1rem;
}
}
/* md ipad-p, iphone se-l */
@media (min-width: 576px) and (max-width: 768px) {
#section-accelerators H1 {
font-size: 2.2rem;
}
#section-accelerators H6 {
font-size: 1.17rem;
}
}
/* lg ipad mini-p *//* lg ipad air-p, iphone xr-l, iphone 12 pro-l, iphone 14 pro max-l */
@media (min-width: 768px) and (max-width: 992px) {
#section-accelerators H1 {
font-size: 2.9rem;
}
#section-accelerators H6 {
font-size: 1.1rem;
}
}
/* xl */
@media (min-width: 992px) and (max-width: 1180px) {
#section-accelerators H1 {
font-size: 2.9rem;
}
#section-accelerators H6 {
font-size: 1rem;
}
}
/* xl ipad pro-p, ipad air-l */
@media (min-width: 1180px) and (max-width: 1200px) {
#section-accelerators H1 {
font-size: 2.9rem;
}
#section-accelerators H6 {
font-size: 1.08rem;
}
}
/* Font Style */
a {
font-weight:var(--body-font-weight-medium);
text-decoration: none;
color: var(--color-cosmic);
}
a.default {
color: var(--color-slate);
font-weight: 500;
padding-bottom: 0px;
border-bottom: 2px solid rgba(var(--color-cosmic-rgb), 0.3);
transition: all ease .3s;
}
a.default:hover {
color: var(--color-snow);
border-color: var(--color-cosmic);
}
a.cosmic {
color: var(--color-cosmic-900);
font-weight: 500;
padding-bottom: 0px;
border-bottom: 2px solid rgba(var(--color-cosmic-rgb), 0.3);
transition: all ease .3s;
}
a.cosmic:hover {
color: var(--color-slate);
border-color: rgba(var(--color-cosmic-rgb), 0.8);
}
.font-medium {
font-weight: var(--body-font-weight-medium);
}
H1 b, H2 b, H3 b, H4 b, H5 b, H6 b {
font-weight: var(--title-font-weight-medium);
}
b {
font-weight: var(--body-font-weight-bold);
}
em, i {
font-style: italic;
font-weight: var(--body-font-weight-medium);
}
/* Font Colors */
/* Shared Variables */
.text-link {
color:var(--color-cosmic);
border-bottom: 1px solid var(--color-cosmic);
padding-bottom: 0;
line-height: 1.2em;
width: fit-content;
}
.text-link a:hover {
color:var(--color-cosmic-700);
}
/* Light Mode */
.light-mode .text-hl {
color: var(--color-space);
}
.light-mode .text-subhl {
color: var(--color-storm);
}
.light-mode .text-hilight {
color: var(--color-cosmic-space);
}
.light-mode .text-body {
color: var(--color-storm) !important;
}
.light-mode .text-body-dark {
color: var(--color-soot);
}
.light-mode .text-body-light {
color: var(--color-smoke);
}
.light-mode .text-body-caption {
color: var(--color-smoke);
}
/* Dark Mode */
.dark-mode .text-hl {
color: var(--color-white);
}
.dark-mode .text-subhl {
color: var(--color-smoke);
}
.dark-mode .text-hilight {
color: var(--color-cosmic-900);
}
.dark-mode .text-body {
color: var(--color-smoke) !important;
}
.dark-mode .text-body-dark {
color: var(--color-storm);
}
.dark-mode .text-body-light {
color: var(--color-slate);
}
.dark-mode .text-body-caption {
color: var(--color-storm);
}
/* Specific Color */
.text-moonlight {
color: var(--color-moonlight);
}
.text-midnight {
color: var(--color-midnight);
}
.text-space {
color: var(--color-space);
}
.text-soot {
color: var(--color-soot);
}
.text-storm {
color: var(--color-storm);
}
.text-smoke {
color: var(--color-smoke);
}
.text-slate {
color: var(--color-slate);
}
.text-snow {
color: var(--color-snow);
}
.text-white {
color: var(--color-white);
}
.text-cosmic-space {
color: var(--color-cosmic-space);
}
.text-cosmic {
color: var(--color-cosmic);
}
.text-cosmic-sky {
color: var(--color-cosmic-sky);
}
.text-nebula {
color: var(--color-nebula);
}
.text-bermuda {
color: var(--color-bermuda);
}
.text-deepspace {
color: var(--color-deepspace);
}
.text-danger {
color: #F7374F !important;
}
/* Gradient Text */
.text-galactic-twilight {
background: var(--gradient-galactic-twilight-to-right);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-galactic-dusk {
background: var(--gradient-galactic-dusk-to-right);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-cosmic-nebula {
background: var(--gradient-cosmic-nebula-to-right);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-cosmic-mist {
background: var(--gradient-cosmic-mist-to-right);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-cosmic-light {
background: var(--gradient-cosmic-light-to-right);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-silver {
background: var(--gradient-silver-to-right);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Glowing Effect */
.glowing-text {
position: relative;
z-index: 1;
display: inline-block;
text-shadow: 0 0 2px rgba(var(--color-nebula-rgb), 0.5),
0 0 4px rgba(var(--color-cosmic-space-rgb), 0.1),
0 0 6px rgba(var(--color-cosmic-space-rgb), 0.1),
0 0 8px rgba(var(--color-cosmic-space-rgb), 0.3),
0 0 10px rgba(var(--color-bermuda-rgb), 0.3);
animation: outer-glow 5s ease-in-out infinite;
}
@keyframes outer-glow {
0% {
text-shadow: 0 0 2px rgba(var(--color-nebula-rgb), 0.5),
0 0 4px rgba(var(--color-cosmic-space-rgb), 0.1),
0 0 6px rgba(var(--color-cosmic-space-rgb), 0.1),
0 0 8px rgba(var(--color-cosmic-space-rgb), 0.3),
0 0 10px rgba(var(--color-bermuda-rgb), 0.3);
}
50% {
text-shadow:
0 0 2px rgba(var(--color-cosmic-space-rgb), 0.6),
0 0 6px rgba(var(--color-cosmic-space-rgb), 0.2),
0 0 8px rgba(var(--color-cosmic-space-rgb), 0.3),
0 0 10px rgba(var(--color-bermuda-rgb), 0.3);
}
100% {
text-shadow: 0 0 2px rgba(var(--color-nebula-rgb), 0.5),
0 0 4px rgba(var(--color-cosmic-space-rgb), 0.1),
0 0 6px rgba(var(--color-cosmic-space-rgb), 0.1),
0 0 8px rgba(var(--color-cosmic-space-rgb), 0.3),
0 0 10px rgba(var(--color-bermuda-rgb), 0.3);
}
}
/* Spotlight Effect */
.text-spotlight-full {
color: transparent;
background: linear-gradient(90deg, var(--color-nebula), var(--color-cosmic), var(--color-cosmic-space), var(--color-bermuda));
background-size: 300%;
-webkit-background-clip: text;
background-clip: text;
animation: gradient-move 5s ease-in-out infinite;
}
.text-spotlight-cosmic {
color: transparent;
background: linear-gradient(90deg, var(--color-cosmic), var(--color-cosmic-space), var(--color-snow));
background-size: 300%;
-webkit-background-clip: text;
background-clip: text;
animation: gradient-move 5s ease-in-out infinite;
}
.text-spotlight-light {
color: transparent;
background: linear-gradient(90deg, var(--color-white), var(--color-slate), var(--color-moonlight), var(--color-slate), var(--color-smoke));
background-size: 300%;
-webkit-background-clip: text;
background-clip: text;
animation: gradient-move 5s ease-in-out infinite;
}
@keyframes gradient-move {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Broken Effect */
.text-broken {
position: relative;
font-weight: var(--body-font-weight-bold);
color: var(--color-slate);
letter-spacing: 0.02em;
text-shadow: 0 0 0.3em var(--color-storm);
user-select: none;
white-space: nowrap;
filter: blur(0.004em);
animation: shake 2s linear forwards;
display: inline-block;
/* Ensure the text flows inline */
}
.text-broken span {
position: relative;
/* Keep span relative for inline behavior */
top: 0;
left: 0;
}
.text-broken::before,
.text-broken::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
/* Ensure the pseudo-elements cover the text properly */
height: 100%;
}
.text-broken::before {
animation: crack1 2s linear forwards;
-webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}
.text-broken::after {
animation: crack2 2s linear forwards;
-webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}
.broken-container {
display: flex;
justify-content: space-between; /* Space between left and right */
align-items: center; /* Vertically center */
width: 100%; /* Full width of the container */
padding: 20px;
}
.EffectText {
display: flex;
justify-content: flex-start; /* Align to the left */
align-items: center;
overflow: hidden;
min-height: 80px;
}
.WordsinMove {
position: relative;
color: #ffffff;
letter-spacing: 0.02em;
text-shadow: 0 0 0.15em var(--color-storm);
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s linear forwards;
font-weight: var(--title-font-weight-bold);
}
.WordsinMove span {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
-webkit-clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}
.WordsinMove::before,
.WordsinMove::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
}
.WordsinMove::before {
animation: crack1 2.5s linear forwards;
-webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}
.WordsinMove::after {
animation: crack2 2.5s linear forwards;
-webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}
@keyframes shake {
5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%, 30%, 40%, 50%, 70%, 80%, 90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%, 60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%, 85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
@keyframes crack1 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
@keyframes crack2 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
.text-split {
position: relative;
display: inline-block;
font-weight: var(--title-font-weight-medium);
background: repeating-linear-gradient(-10deg,
var(--color-snow) 0,
var(--color-snow) 23%,
transparent 26%,
transparent 28%,
var(--color-snow) 28%,
var(--color-snow) 50%,
transparent 50%,
transparent 52%,
var(--color-snow) 52%,
var(--color-snow) 80%,
var(--color-snow) 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/* Typewriter Effect */
.type {
color:#0000;
background:
linear-gradient(-90deg,var(--color-space) 2px,#0000 0) 10px 0,
linear-gradient(var(--color-space) 0 0) 0 0;
background-size:calc(var(--n)*1ch) 200%;
-webkit-background-clip:padding-box,text;
background-clip:padding-box,text;
background-repeat:no-repeat;
animation:
b .7s infinite steps(1),
t calc(var(--n)*.07s) steps(var(--n)) forwards;
}
.type-white {
color:#0000;
background:
linear-gradient(-90deg,var(--color-space) 2px,#0000 0) 10px 0,
linear-gradient(var(--color-white) 0 0) 0 0;
background-size:calc(var(--n)*1ch) 200%;
-webkit-background-clip:padding-box,text;
background-clip:padding-box,text;
background-repeat:no-repeat;
animation:
b .7s infinite steps(1),
t calc(var(--n)*.07s) steps(var(--n)) forwards;
}
.type-storm {
color:#0000;
background:
linear-gradient(-90deg,var(--color-space) 2px,#0000 0) 10px 0,
linear-gradient(var(--color-storm) 0 0) 0 0;
background-size:calc(var(--n)*1ch) 200%;
-webkit-background-clip:padding-box,text;
background-clip:padding-box,text;
background-repeat:no-repeat;
animation:
b .7s infinite steps(1),
t calc(var(--n)*.07s) steps(var(--n)) forwards;
}
.type-midnight {
color:#0000;
background:
linear-gradient(-90deg,var(--color-space) 2px,#0000 0) 10px 0,
linear-gradient(var(--color-midnight) 0 0) 0 0;
background-size:calc(var(--n)*1ch) 200%;
-webkit-background-clip:padding-box,text;
background-clip:padding-box,text;
background-repeat:no-repeat;
animation:
b .7s infinite steps(1),
t calc(var(--n)*.07s) steps(var(--n)) forwards;
}
.type-moonlight {
color:#0000;
background:
linear-gradient(-90deg,var(--color-space) 2px,#0000 0) 10px 0,
linear-gradient(var(--color-moonlight) 0 0) 0 0;
background-size:calc(var(--n)*1ch) 200%;
-webkit-background-clip:padding-box,text;
background-clip:padding-box,text;
background-repeat:no-repeat;
animation:
b .7s infinite steps(1),
t calc(var(--n)*.07s) steps(var(--n)) forwards;
}
.type-cosmic-space {
color:#0000;
background:
linear-gradient(-90deg,var(--color-space) 2px,#0000 0) 10px 0,
linear-gradient(var(--color-cosmic-space) 0 0) 0 0;
background-size:calc(var(--n)*1ch) 200%;
-webkit-background-clip:padding-box,text;
background-clip:padding-box,text;
background-repeat:no-repeat;
animation:
b .7s infinite steps(1),
t calc(var(--n)*.07s) steps(var(--n)) forwards;
}
.type-cosmic-sky {
color:#0000;
background:
linear-gradient(-90deg,var(--color-space) 2px,#0000 0) 10px 0,
linear-gradient(var(--color-cosmic-sky) 0 0) 0 0;
background-size:calc(var(--n)*1ch) 200%;
-webkit-background-clip:padding-box,text;
background-clip:padding-box,text;
background-repeat:no-repeat;
animation:
b .7s infinite steps(1),
t calc(var(--n)*.07s) steps(var(--n)) forwards;
}
@keyframes t{
from {background-size:0 200%}
}
@keyframes b{
50% {background-position:0 -100%,0 0}
}
/* Retype Effect */
.retype span.typed-text {
color: var(--color-cosmic);
}
.retype span.caret {
display: inline-block;
background-color: var(--color-cosmic);
margin-left: 0.1rem;
width: 2px;
animation: blink 1s infinite;
}
.retype span.caret.typing {
animation: none;
}
@keyframes retypeblink {
0% {
background-color: var(--color-cosmic);
}
49% {
background-color: var(--color-cosmic);
}
50% {
background-color: transparent;
}
99% {
background-color: transparent;
}
100% {
background-color: var(--color-cosmic);
}
}
/* Code typing Effect */
.code-typing {
white-space: nowrap;
overflow: hidden;
border-right: 12px solid;
animation: blinking .5s step-end infinite alternate;
}
.code-typing-20 {
width: 20ch;
animation: typing-20 2s steps(22), blinking .5s step-end infinite alternate;
}
.code-typing-30 {
width: 30ch;
animation: typing-30 3s steps(32), blinking .5s step-end infinite alternate;
}
@keyframes typing-20 {
from {
width: 0;
}
to {
width: 20ch;
}
}
@keyframes typing-30 {
from {
width: 0;
}
to {
width: 30ch;
}
}
@keyframes blinking {
50% {
border-color: transparent;
}
}
/* Blinking block caret */
.block-caret {
width: 1vh;
/* Width of one character */
height: 2.4vh;
/* Height matching the line height */
background-color: var(--color-storm);
/* Block caret color */
display: inline-block;
animation: blink 1s step-start infinite;
position: relative;
top: 0.5vh;
margin-top: -1vh;
}
/* Blinking effect */
@keyframes blink {
50% {
opacity: 0;
}
}
/* Mark Effect */
mark {
background-size: 0 100%;
background-repeat: no-repeat;
background-color: transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
transition: background-size 0.6s ease-in-out, border-left 0.3s ease-in-out, border-right 1.5s ease-in-out, color 0.6s ease-in-out;
font-weight: var(--body-font-weight-medium);
padding: 0;
}
/* Dark Mode */
.dark-mode .scroll-mark {
background-size: 100% 100%;
border-left: 1px solid var(--color-storm);
border-right: 1px solid var(--color-storm);
color: var(--color-snow);
}
.dark-mode .mark-cosmic {
background-image: linear-gradient(90deg, rgba(var(--color-cosmic-space-rgb), 0.9), rgba(var(--color-cosmic-space-rgb), 0.9));
}
.dark-mode .mark-bermuda {
background-image: linear-gradient(90deg, rgba(var(--color-bermuda-rgb), 0.5), rgba(var(--color-bermuda-rgb), 0.5));
}
/* Light Mode */
.light-mode .scroll-mark {
background-size: 100% 100%;
border-left: 1px solid var(--color-slate);
border-right: 1px solid var(--color-slate);
color: var(--color-space);
}
.light-mode .mark-cosmic {
background-image: linear-gradient(90deg, rgba(var(--color-cosmic-rgb), 0.5), rgba(var(--color-cosmic-rgb), 0.5));
}
.light-mode .mark-bermuda {
background-image: linear-gradient(90deg, rgba(var(--color-bermuda-rgb), 0.5), rgba(var(--color-bermuda-rgb), 0.5));
}
/* Wipe Effect */
h1 .wipe,
h2 .wipe,
h3 .wipe,
h4 .wipe,
h5 .wipe,
h6 .wipe {
font-weight: var(--title-font-weight-medium);
}
.wipe {
background-size: 0 100%;
background-repeat: no-repeat;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
transition: background-size 0.6s ease-in-out;
font-weight: var(--body-font-weight-medium);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.scroll-wipe {
background-size: 100% 100%;
color: transparent;
}
/* Dark Mode */
.dark-mode .wipe {
background-color: var(--color-storm);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
.dark-mode .text-hl .wipe {
background-image: linear-gradient(90deg, var(--color-white), var(--color-white));
}
.dark-mode .text-subhl .wipe {
background-image: linear-gradient(90deg, var(--color-snow), var(--color-snow));
}
.dark-mode .text-body .wipe {
background-image: linear-gradient(90deg, var(--color-snow), var(--color-snow));
}
.dark-mode .text-hilight .wipe {
background-image: linear-gradient(90deg, var(--color-cosmic), var(--color-cosmic));
}
/* Light Mode */
.light-mode .wipe {
background-color: var(--color-slate);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
.light-mode .text-hl .wipe {
background-image: linear-gradient(90deg, var(--color-space), var(--color-space));
}
.light-mode .text-subhl .wipe {
background-image: linear-gradient(90deg, var(--color-soot), var(--color-soot));
}
.light-mode .text-body .wipe {
background-image: linear-gradient(90deg, var(--color-soot), var(--color-soot));
}
.light-mode .text-hilight .wipe {
background-image: linear-gradient(90deg, var(--color-cosmic-space), var(--color-cosmic-space));
}
/* Fade in Effect */
.fade-in {
opacity: 0;
-webkit-transform: translate(0, 50px);
-moz-transform: translate(0, 50px);
-ms-transform: translate(0, 50px);
transform: translate(0, 50px);
-webkit-transition: opacity .6s .1s, transform .6s ease;
transition: opacity .6s .1s, transform .6s ease;
transition-delay: 0ms;
}
.fade-in-view {
opacity: 1 !important;
-webkit-transform: translate(0, 0) !important;
-moz-transform: translate(0, 0) !important;
-ms-transform: translate(0, 0) !important;
transform: translate(0, 0) !important;
}
/* Text Align */
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-top {
align-content: start;
}
.text-middle {
align-content: center;
}
.text-bottom {
align-content: end;
}
.xl-right-sm-center {
text-align: right;
}
@media (max-width: 820px) {
.xl-right-sm-center {
text-align: center;
margin-bottom: var(--spacing-md);
}
}
/* Header */
header {
z-index: 1;
}
header .container {
padding-top: 1vw;
}
/* Top Menu */
.toplogo {
height: 2.8rem;
position: relative;
}
.topmenu {
padding: 0;
}
/* Nav */
#mainmenu {
font-family: var(--body-font);
font-size: 3vh;
margin: 0 auto;
float: none;
color: var(--color-slate);
line-height: 1.8em;
position: relative;
top: 0;
}
#mainmenu a {
position: relative;
display: inline-block;
padding: 30px 18px;
text-decoration: none;
color: var(--color-slate);
text-align: center;
outline: none;
font-size: 1rem;
}
#mainmenu a:hover {
color: #ffffff;
}
#mainmenu a span {
position: relative;
width: 0%;
display: block;
font-size: 1rem;
line-height: 1.3em;
border-bottom: solid 2px #ffffff;
text-transform: none;
}
#mainmenu a span:hover {
color: #ffffff;
}
#mainmenu ul {
margin: 0px 0px;
padding: 2vh;
height: 30px;
border-radius: var(--round-md);
-moz-border-radius: var(--round-md);
-webkit-border-radius: 0px;
overflow: hidden;
background: rgba(255, 255, 255, 0.8);
-webkit-box-shadow: 2px 2px 30px 0px rgba(20, 20, 20, 0.1);
-moz-box-shadow: 2px 2px 30px 0px rgba(20, 20, 20, 0.1);
box-shadow: 2px 2px 30px 0px rgba(20, 20, 20, 0.1);
top: 40px;
}
header #mainmenu li ul li:first-child {
border: none;
}
#mainmenu li.has-child:after {
content: "";
padding-left: 10px;
position: relative;
top: -2px;
background-image: url('../../cifer/images/icon/dropdown-white.png');
background-size: 10px 8px;
background-repeat: no-repeat;
background-position-y: 4px;
}
#mainmenu li li a {
font-size: 1rem;
padding: 6px 16px;
border-top: none;
color: var(--color-storm);
width: 100%;
border-left: none;
text-align: left;
font-weight: 400;
}
#mainmenu li li a:hover,
#mainmenu ul li:hover>a,
#mainmenu li li a:hover,
#mainmenu ul li:hover>a {
background: #ffffff;
color: var(--color-cosmic);
}
@media (min-width: 993px) {
#mainmenu {
font-size: 1rem;
line-height: 1.8em;
}
#mainmenu li li {
font-size: 1.8vh;
}
}
@media (max-width: 992px) {
#mainmenu {
font-size: 2.8vh;
line-height: 1.8em;
}
#mainmenu a, #mainmenu a span, #mainmenu li, #mainmenu li li, #mainmenu li li a {
font-size: 2.8vh;
line-height: 2.4em;
}
}
@media (max-width: 820px) {
#mainmenu {
font-size: 2.4vh;
line-height: 1.8em;
}
#mainmenu a, #mainmenu a span, #mainmenu li, #mainmenu li li, #mainmenu li li a {
font-size: 2.4vh;
line-height: 2em;
}
}
@media (max-width: 390px) {
#mainmenu {
font-size: 2.4vh;
line-height: 1.8em;
}
#mainmenu li li {
font-size: 2.4vh;
}
}
@media (max-width: 375px) {
#mainmenu, #mainmenu a span, #mainmenu li li, #mainmenu li li a {
font-size: 2.6vh;
line-height: 2em;
}
#mainmenu a {
position: relative;
display: inline-block;
padding: 2vh 0;
text-decoration: none;
color: var(--color-storm);
text-align: left;
outline: none;
font-size: 2.6vh;
line-height: 2em;
}
}
/* Mobile Menu */
header.header-mobile {
background-image: url('../images/background/menu-gradient-bg.png');
background-size: cover;
background-position: center top;
background-repeat: repeat-x;
background-color: transparent;
margin-left: 0;
padding: 0;
position: absolute;
height: 16vh;
min-height: 16vh;
}
header.header-mobile .container {
max-width: 100% !important;
padding: 8vw;
}
/* lg ipad mini-p, ipad air-p */
@media (min-width: 768px) and (max-width: 992px) {
header.header-mobile .container {
padding: 6vw;
}
}
/* xl ipad pro-p, ipad mini-l, ipad air-l */
@media (min-width: 992px) and (max-width: 1400px) {
header.header-mobile .container {
padding: 4vw;
}
}
/* xxl macbook 13.6, 14, 15 */
@media (min-width: 1400px) {
header.header-mobile .container {
padding: 3vw;
}
}
header.header-mobile #mainmenu {
margin-top: 8vh;
}
header.header-mobile #mainmenu>li>span {
width: 4vh;
height: 4vh;
background: url(../images/ui/arrow-down-light.png) center no-repeat;
position: absolute;
right: 0;
z-index: 1100;
cursor: poInter;
margin-top: 1.6vh;
margin-right: 2vh;
}
.mobile-menu-expand {
}
#menu-btn {
width:2.4rem;
height:2.4rem;
padding:0;
margin:0;
}
.menubt {
width: 2rem;
position: relative;
top: 0.25rem;
}
@media (max-width: 1179px) {
header.header-mobile #mainmenu {
padding: 0 48px 0 22px;
}
}
@media (max-width: 992px) {
.mobile-menu-expand {
height:300vh;
}
}
@media (max-width: 896px) {
header.header-mobile #mainmenu {
padding: 0 48px 0 22px;
}
header.header-mobile #mainmenu li a {
color: #ffffff;
}
}
@media (max-width: 895px) {
header.header-mobile #mainmenu {
padding: 0 48px 0 12px;
}
}
@media (max-width: 844px) {
header.header-mobile #mainmenu {
padding: 0 48px 0 21px;
}
}
@media (max-width: 820px) {
header.header-mobile #mainmenu>li>span {
width: 4vh;
height: 4vh;
margin-top: 1.4vh;
margin-right: 1.8vh;
}
}
@media (max-width: 768px) {
header.header-mobile #mainmenu {
padding: 0 38px 0 12px;
}
header.header-mobile #mainmenu>li>span {
width: 4vh;
height: 4vh;
margin-top: 1.6vh;
margin-right: 2.4vh;
}
}
@media (max-width: 430px) {
}
@media (max-width: 375px) {
header.header-mobile #mainmenu>li>span {
width: 4vh;
height: 4vh;
margin-top: 2.4vh;
margin-right: 1.2vh;
}
}
/* Container */
.container {
width: 100%;
padding-left: 3vw;
padding-right: 3vw;
margin-left: auto;
margin-right: auto;
}
/* xs */
@media (max-width: 375px) {
.container {
padding-left: 8vw;
padding-right: 8vw;
}
}
/* sm iphone se-p *//* sm iphone 12 pro-p *//* sm iphone xr-p, iphone 14 pro max-p */
@media (min-width: 375px) and (max-width: 576px) {
.container {
padding-left: 8vw;
padding-right: 8vw;
}
}
/* md ipad-p, iphone se-l */
@media (min-width: 576px) and (max-width: 768px) {
.container {
padding-left: 8vw;
padding-right: 8vw;
}
}
/* lg ipad mini-p *//* lg ipad air-p, iphone xr-l, iphone 12 pro-l, iphone 14 pro max-l */
@media (min-width: 768px) and (max-width: 992px) {
.container {
max-width: 100%;
padding-left: 6vw;
padding-right: 6vw;
}
}
/* xl *//* xl ipad pro-p, ipad mini-l, ipad air-l */
@media (min-width: 992px) and (max-width: 1200px) {
.container {
max-width: 1200px;
padding-left: 4vw;
padding-right: 4vw;
}
}
/* xl macbook air 13, ipad pro-l */
@media (min-width: 1200px) and (max-width: 1400px) {
.container {
max-width: 1320px;
padding-left: 4vw;
padding-right: 4vw;
}
}
/* xxl macbook 13.6, 14, 15 */
@media (min-width: 1400px) {
.container {
max-width: 1320px;
padding-left: 3vw;
padding-right: 3vw;
}
}
/* Inner Hero */
.hero-inner-full {
padding: 12vh 0 0 0;
}
.hero-inner-half {
padding: 12vh 0 0 0;
}
.hero-inner-half-bottom {
padding-bottom: 4vh;
}
@media (max-width: 912px) {
.hero-inner-half-bottom {
padding-bottom: 0;
}
}
/* Beta Waitlis */
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist.png');
background-size: cover;
background-position-x: center;
background-position-y: top;
background-repeat: no-repeat;
height: 780px;
}
.beta-waitlist-gap {
height: 300px;
}
/* xs */
@media (max-width: 375px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-size: 110% !important;
height: 860px;
padding-bottom: 2rem;
}
.beta-waitlist-gap {
height: 200px;
}
}
/* sm iphone se-p, iphone 12 pro-p */
@media (min-width: 375px) and (max-width: 390px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-size: 110% !important;
height: 860px;
padding-bottom: 2rem;
}
.beta-waitlist-gap {
height: 220px;
}
}
/* sm iphone 12 pro-p */
@media (min-width: 390px) and (max-width: 414px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist-mobile.png');
height: 880px;
}
.beta-waitlist-gap {
height: 220px;
}
}
/* sm iphone xr-p, iphone 14 pro max-p */
@media (min-width: 414px) and (max-width: 576px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-size: 108% !important;
height: 920px;
}
.beta-waitlist-gap {
height: 260px;
}
}
/* md ipad-p */
@media (min-width: 576px) and (max-width: 768px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-size: 100% !important;
height: 880px;
}
.beta-waitlist-gap {
height: 360px;
}
}
/* lg ipad mini-p, ipad air-p */
@media (min-width: 768px) and (max-width: 820px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-size: 100% !important;
background-position-y: -430px;
height: 980px;
}
.beta-waitlist-gap {
height: 400px;
}
.beta-waitlist-bg H1 {
font-size: 2.7rem;
}
}
@media (min-width: 820px) and (max-width: 992px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-size: 100% !important;
background-position-y: -480px;
height: 1040px;
}
.beta-waitlist-gap {
height: 440px;
}
.beta-waitlist-bg H1 {
font-size: 2.7rem;
}
}
/* xl ipad pro-p, ipad mini-l */
@media (min-width: 992px) and (max-width: 1200px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist.png');
background-size: 160% !important;
background-position-y: -40px;
background-size: cover;
height: 1060px;
}
.beta-waitlist-gap {
height: 420px;
}
}
/* xl macbook air 13 */
@media (min-width: 1200px) and (max-width: 1240px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist.png');
background-size: 105% !important;
background-position-y: -10px;
height: 840px;
}
.beta-waitlist-gap {
height: 330px;
}
}
@media (min-width: 1240px) and (max-width: 1320px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist.png');
background-size: 105% !important;
background-position-y: -30px;
height: 840px;
}
.beta-waitlist-gap {
height: 330px;
}
}
@media (min-width: 1320px) and (max-width: 1400px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist.png');
background-position-y: -40px;
height: 880px;
}
.beta-waitlist-gap {
height: 360px;
}
}
@media (min-width: 1400px) and (max-width: 1520px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist.png');
background-position-y: -50px;
height: 900px;
}
.beta-waitlist-gap {
height: 360px;
}
}
@media (min-width: 1520px) and (max-width: 1660px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist.png');
background-position-y: -130px;
height: 940px;
}
.beta-waitlist-gap {
height: 400px;
}
}
/* xxl macbook 13.6, 14, 15 */
@media (min-width: 1660px) {
.beta-waitlist-bg {
background-image: url('../images/background/beta-waitlist.png');
background-position-y: -160px;
height: 940px;
}
.beta-waitlist-gap {
height: 400px;
}
}
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist.png');
background-size: cover;
background-position-x: center;
background-position-y: top;
background-repeat: no-repeat;
height: 780px;
}
.beta-waitlist-gap {
height: 300px;
}
/* xs */
@media (max-width: 375px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-size: 110% !important;
background-position-y: -70px;
height: 860px;
padding-bottom: 2rem;
}
.beta-waitlist-gap {
height: 200px;
}
}
/* sm iphone se-p, iphone 12 pro-p */
@media (min-width: 375px) and (max-width: 390px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-size: 110% !important;
background-position-y: -70px;
height: 860px;
padding-bottom: 2rem;
}
.beta-waitlist-gap {
height: 220px;
}
}
/* sm iphone 12 pro-p */
@media (min-width: 390px) and (max-width: 414px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-position-y: -120px;
height: 880px;
}
.beta-waitlist-gap {
height: 220px;
}
}
/* sm iphone xr-p, iphone 14 pro max-p */
@media (min-width: 414px) and (max-width: 576px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-size: 108% !important;
background-position-y: -140px;
height: 920px;
}
.beta-waitlist-gap {
height: 260px;
}
}
/* md ipad-p */
@media (min-width: 576px) and (max-width: 768px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-size: 100% !important;
height: 880px;
}
.beta-waitlist-gap {
height: 360px;
}
}
/* lg ipad mini-p, ipad air-p */
@media (min-width: 768px) and (max-width: 820px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-size: 100% !important;
background-position-y: -540px;
height: 980px;
}
.beta-waitlist-gap {
height: 400px;
}
.beta-waitlist-bg H1 {
font-size: 2.7rem;
}
}
@media (min-width: 820px) and (max-width: 992px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist-mobile.png');
background-size: 100% !important;
background-position-y: -580px;
height: 1040px;
}
.beta-waitlist-gap {
height: 440px;
}
.beta-waitlist-bg H1 {
font-size: 2.7rem;
}
}
/* xl ipad pro-p, ipad mini-l */
@media (min-width: 992px) and (max-width: 1200px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist.png');
background-size: 160% !important;
background-position-y: -110px;
background-size: cover;
height: 1060px;
}
.beta-waitlist-gap {
height: 420px;
}
}
/* xl macbook air 13 */
@media (min-width: 1200px) and (max-width: 1240px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist.png');
background-size: 105% !important;
background-position-y: -50px;
height: 840px;
}
.beta-waitlist-gap {
height: 330px;
}
}
@media (min-width: 1240px) and (max-width: 1320px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist.png');
background-size: 105% !important;
background-position-y: -90px;
height: 840px;
}
.beta-waitlist-gap {
height: 330px;
}
}
@media (min-width: 1320px) and (max-width: 1400px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist.png');
background-position-y: -90px;
height: 880px;
}
.beta-waitlist-gap {
height: 360px;
}
}
@media (min-width: 1400px) and (max-width: 1520px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist.png');
background-position-y: -130px;
height: 900px;
}
.beta-waitlist-gap {
height: 360px;
}
}
@media (min-width: 1520px) and (max-width: 1660px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist.png');
background-position-y: -170px;
height: 940px;
}
.beta-waitlist-gap {
height: 400px;
}
}
/* xxl macbook 13.6, 14, 15 */
@media (min-width: 1660px) {
.beta-waitlist-bg-submit {
background-image: url('../images/background/beta-waitlist.png');
background-position-y: -230px;
height: 940px;
}
.beta-waitlist-gap {
height: 400px;
}
}
/* Section */
.section-start {
padding-top: var(--spacing-lg);
}
.section-start-half {
padding-top: var(--spacing-md);
}
.section-end {
height: 1px;
margin: var(--spacing-lg) 0 0 0;
}
.light-mode .section-end-with-line {
height: 1px;
border-bottom: 1px solid var(--color-slate);
margin: var(--spacing-lg) 0 0 0;
}
.dark-mode .section-end-with-line {
height: 1px;
border-bottom: 1px solid var(--color-soot);
margin: var(--spacing-lg) 0 0 0;
}
.section-end-with-line-dark-violet {
height: 1px;
border-bottom: 1px solid #4a4077;
margin: var(--spacing-lg) 0 0 0;
}
.section-gap {
min-height: 1px;
margin-bottom: var(--spacing-md);
}
@media (max-width: 430px) {
.section-end {
min-height: 1px;
margin: 10vh 0 0 0;
}
}
/* Margin */
/* Zero */
.p-0 {
padding: 0;
}
.m-0 {
margin: 0;
}
/* Margin Top */
.mt-xxl {
margin-top: var(--spacing-xxl);
}
.mt-xl {
margin-top: var(--spacing-xl);
}
.mt-lg {
margin-top: var(--spacing-lg);
}
.mt-md {
margin-top: var(--spacing-md);
}
.mt-sm {
margin-top: var(--spacing-sm);
}
.mt-xs {
margin-top: var(--spacing-xs);
}
.mt-xxs {
margin-top: var(--spacing-xxs);
}
/* Margin Bottom */
.mb-xxl {
margin-bottom: var(--spacing-xxl);
}
.mb-xl {
margin-bottom: var(--spacing-xl);
}
.mb-lg {
margin-bottom: var(--spacing-lg);
}
.mb-md {
margin-bottom: var(--spacing-md);
}
.mb-sm {
margin-bottom: var(--spacing-sm);
}
.mb-xs {
margin-bottom: var(--spacing-xs);
}
.mb-xxs {
margin-bottom: var(--spacing-xxs);
}
/* Margin Left */
.ml-xxl {
margin-left: var(--spacing-xxl);
}
.ml-xl {
margin-left: var(--spacing-xl);
}
.ml-lg {
margin-left: var(--spacing-lg);
}
.ml-md {
margin-left: var(--spacing-md);
}
.ml-sm {
margin-left: var(--spacing-sm);
}
.ml-xs {
margin-left: var(--spacing-xs);
}
.ml-xxs {
margin-left: var(--spacing-xxs);
}
/* Margin Right */
.mr-xxl {
margin-right: var(--spacing-xxl);
}
.mr-xl {
margin-right: var(--spacing-xl);
}
.mr-lg {
margin-right: var(--spacing-lg);
}
.mr-md {
margin-right: var(--spacing-md);
}
.mr-sm {
margin-right: var(--spacing-sm);
}
.mr-xs {
margin-right: var(--spacing-xs);
}
.mr-xxs {
margin-right: var(--spacing-xxs);
}
/* Padding Right */
.pr-xxl {
padding-right: var(--spacing-xxl);
}
.pr-xl {
padding-right: var(--spacing-xl);
}
.pr-lg {
padding-right: var(--spacing-lg);
}
.pr-md {
padding-right: var(--spacing-md);
}
.pr-sm {
padding-right: var(--spacing-sm);
}
.pr-xs {
padding-right: var(--spacing-xs);
}
.pr-xxs {
padding-right: var(--spacing-xxs);
}
/* Button Size */
.btn {
text-wrap: nowrap;
height: fit-content;
width: fit-content;
}
.btn:hover {
color: inherit;
}
.btn-icon-xxl {
height: 6vh;
margin-right: 2vh;
}
.btn-icon-xl {
height: 4vh;
}
.btn-lg {
padding: 0.3em 1em 0.4em 1em;
font-size: 1.5rem;
border-radius: 0.3em;
min-width: 7em;
text-align: center;
line-height: 1.5em;
margin-bottom: 1.5rem;
transition: filter 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease;
width: fit-content;
}
.btn-lg:hover {
transform: translateY(-0.8vh);
box-shadow: 0 0.8vh 0.8vh rgba(0, 0, 0, 0.1);
}
.btn-icon-lg {
height: 2rem;
margin-top: -0.3em;
margin-right: 0.5em;
}
.btn-md {
padding: 0.4em 1.2em;
font-size: 1.3125rem;
border-radius: 0.3em;
min-width: 7em;
text-align: center;
line-height: 1.5em;
margin-bottom: 2vh;
transition: filter 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease;
width: fit-content;
}
.btn-md:hover {
transform: translateY(-0.8vh);
box-shadow: 0 0.8vh 0.8vh rgba(0, 0, 0, 0.1);
}
.btn-icon-md {
height: 1.75rem;
margin-top: -0.15em;
margin-right: 0.5em;
}
.btn-sm {
padding: 0.4em 1.2em;
font-size: 1rem;
border-radius: 0.3em;
min-width: 7em;
text-align: center;
line-height: 1.5em;
margin-bottom: 2vh;
transition: filter 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease;
width: fit-content;
}
.btn-sm:hover {
transform: translateY(-0.8vh);
box-shadow: 0 0.8vh 0.8vh rgba(0, 0, 0, 0.1);
}
.btn-icon-sm {
height: 1.1rem;
margin-top: -0.3em;
margin-right: 0.5em;
}
.btn-xs {
padding: 0.4em 1em;
font-size: 0.875rem;
border-radius: 0.3em;
text-align: center;
line-height: 1.4em;
margin-bottom: 2vh;
width: fit-content;
}
.btn-icon-xs {
height: 1rem;
margin-top: -0.3em;
margin-right: 0.5em;
}
.btn-icon-xxs {
height: 0.8rem;
margin-top: -0.3em;
margin-right: 0.5em;
}
.btn-hover {
transition: filter 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease;
}
.btn-hover:hover {
transform: translateY(-0.8vh);
box-shadow: 0 0.8vh 0.8vh rgba(0, 0, 0, 0.1);
}
/* Button Colors */
.btn-prime-lining {
position: relative;
display: inline-block;
color: var(--color-white);
background-color: var(--color-space);
border: 1px solid transparent;
background-image: linear-gradient(to bottom, #383363, #222044),
linear-gradient(45deg, transparent, var(--color-cosmic-space), var(--color-cosmic), var(--color-white), var(--color-cosmic), var(--color-cosmic-space), transparent);
background-origin: border-box;
background-clip: padding-box, border-box;
cursor: pointer;
transition: all 0.5s ease;
background-size: 400%;
animation: animate-border 16s infinite linear;
}
.btn-prime-lining a {
color: var(--color-snow);
font-weight: var(--body-font-weight-bold);
}
.btn-prime-lining a:hover {
color: var(--color-white);
}
@keyframes animate-border {
0% {
background-position: 0 0;
}
100% {
background-position: 400% 0;
}
}
.btn-primary {
color: var(--color-white);
background: var(--color-cosmic-space) !important;
border: 1px solid var(--color-cosmic-space) !important;
}
.btn-primary:hover {
filter: brightness(110%) !important;
}
.btn-primary a {
color: var(--color-white);
font-weight: var(--body-font-weight-bold);
}
.btn-primary a:hover{
color: var(--color-white) !important;
}
.btn-secondary {
color: var(--color-white);
background: rgba(var(--color-storm-rgb), 0.5) !important;
border: 1px solid var(--color-soot) !important;
}
.btn-secondary:hover {
filter: brightness(110%) !important;
}
.btn-secondary a {
color: var(--color-white);
font-weight: var(--body-font-weight-bold);
}
.btn-secondary a:hover{
color: var(--color-white);
}
.btn-dark-stroke {
color: var(--color-smoke);
font-weight: var(--body-font-weight-bold);
background: none;
border: 1px solid rgba(var(--color-storm-rgb), 0.9);
}
.btn-dark-stroke:hover {
filter: brightness(110%) !important;
}
.btn-dark-stroke a {
color: var(--color-smoke) !important;
font-weight: var(--body-font-weight-bold);
}
.btn-dark-stroke a:hover{
color: var(--color-smoke) !important;
}
.btn-prime {
color: var(--color-white);
background: var(--gradient-galactic-twilight-to-bottom) border-box;
border: 1px solid var(--color-midnight);
}
.btn-prime:hover {
filter: brightness(110%);
}
.btn-prime a {
color: var(--color-white);
font-weight: var(--body-font-weight-bold);
}
.btn-prime a:hover{
color: var(--color-white);
text-shadow: 0px 0.5vh 1vh var(--color-cosmic-space);
}
.btn-sec {
color: var(--color-storm);
background: none;
border: 1px solid var(--color-smoke);
}
.btn-sec:hover {
background: rgba(255,255,255,0.1);
border: 1px solid #ebecf7;
}
.btn-sec a {
color: var(--color-storm);
font-weight: var(--body-font-weight-bold);
}
.btn-sec a:hover{
color: var(--color-storm);
}
.btn-trd {
color: var(--color-slate);
background: none;
border: 1px solid var(--color-storm);
}
.btn-trd:hover {
filter: brightness(110%);
}
.btn-trd a {
color: var(--color-slate);
font-weight: var(--body-font-weight-bold);
}
.btn-trd a:hover{
color: #ffffff;
}
.btn-fth {
color: var(--color-cosmic);
background: none;
border: 1px solid var(--color-cosmic);
}
.btn-fth:hover {
filter: brightness(120%);
}
.btn-fth a {
color: var(--color-cosmic);
font-weight: var(--body-font-weight-bold);
}
.btn-fth a:hover{
color: var(--color-cosmic);
}
.btn-pro {
color: var(--color-space);
background: var(--gradient-cosmic-mist-to-right) border-box;
border: 1px solid var(--color-cosmic);
}
.btn-pro:hover {
filter: brightness(110%);
}
.btn-pro a {
color: var(--color-space);
font-weight: var(--body-font-weight-bold);
}
.btn-pro a:hover{
color: var(--color-space);
text-shadow: 0px 0.5vh 0.5vh var(--color-cosmic);
}
.btn-black {
color: var(--color-slate);
background: var(--color-space);
}
.btn-black:hover {
color: #ffffff;
filter: brightness(110%);
}
.btn-black a {
color: var(--color-slate);
font-weight: var(--body-font-weight-bold);
}
.btn-black a:hover{
color: #ffffff;
}
.btn-black-stroke {
color: var(--color-storm);
font-weight: var(--body-font-weight-bold);
background: none;
border: 1px solid var(--color-storm);
}
.btn-black-stroke:hover {
background: rgba(255,255,255,0.1);
border: 1px solid var(--color-smoke);
}
.btn-black-stroke a {
color: var(--color-soot);
font-weight: var(--body-font-weight-bold);
}
.btn-black-stroke a:hover{
color: var(--color-storm);
}
.btn-white {
color: var(--color-cosmic);
background: rgba(255, 255, 255, 0.5);
border: 2px solid #ffffff;
}
.btn-white a {
color: var(--color-cosmic);
font-weight: var(--body-font-weight-bold);
}
.btn-white a:hover{
color: var(--color-cosmic-space);
text-shadow: 0px 0.5vh 1vh var(--color-smoke);
}
.btn-mute-dark {
color: rgba(var(--color-storm-rgb), 0.5);
font-weight: var(--body-font-weight-bold);
background: none;
border: 1px solid rgba(var(--color-storm-rgb), 0.3);
}
.btn-mute-dark a {
color: rgba(var(--color-storm-rgb), 0.5);
font-weight: var(--body-font-weight-bold);
}
.btn-tag {
color: var(--color-storm);
background: rgba(var(--color-slate-rgb), 0.4);
font-weight: var(--body-font-weight-bold);
}
.btn-tag:hover {
filter: brightness(90%);
}
.btn-tag a {
color: var(--color-storm);
font-weight: var(--body-font-weight-normal);
}
.btn-tag a:hover{
color: var(--color-space);
text-shadow: 0px 0.5vh 1vh var(--color-storm);
}
.btn-tag-dark {
color: var(--color-smoke);
background: rgba(var(--color-smoke-rgb), 0.15);
}
.btn-tag-dark:hover {
filter: brightness(130%);
}
.btn-tag-dark a {
color: var(--color-smoke);
font-weight: var(--body-font-weight-normal);
}
.btn-tag-dark a:hover {
color: var(--color-slate);
}
.tag-u {
border-bottom: 1px solid rgba(var(--color-cosmic-rgb), 0.3);
width: fit-content;
font-weight: var(--body-font-weight-bold);
color: rgba(var(--color-cosmic-rgb), 0.4);
}
.btn-prime-stroke {
color: #ffffff;
background: linear-gradient(black, black) padding-box, linear-gradient(to right, var(--color-cosmic-sky) 0%, var(--color-cosmic) 50%, var(--color-cosmic-space) 100%) border-box;
border: 2px solid transparent;
}
.btn-prime-stroke a {
color: #ffffff;
}
.btn-prime-stroke a:hover{
color: #ffffff;
text-shadow: 0px 6px 4px var(--color-cosmic-space);
}
/* Border */
/* Dark Border Alphas */
.box-border-dark-10 {
border: var(--box-border-xs) var(--color-dark-alpha-10);
}
.box-border-dark-20 {
border: var(--box-border-xs) var(--color-dark-alpha-20);
}
.box-border-dark-30 {
border: var(--box-border-xs) var(--color-dark-alpha-30);
}
.box-border-dark-40 {
border: var(--box-border-xs) var(--color-dark-alpha-40);
}
.box-border-dark-50 {
border: var(--box-border-xs) var(--color-dark-alpha-50);
}
.box-border-dark-60 {
border: var(--box-border-xs) var(--color-dark-alpha-60);
}
.box-border-dark-70 {
border: var(--box-border-xs) var(--color-dark-alpha-70);
}
.box-border-dark-80 {
border: var(--box-border-xs) var(--color-dark-alpha-80);
}
.box-border-dark-90 {
border: var(--box-border-xs) var(--color-dark-alpha-90);
}
.box-border-dark-100 {
border: var(--box-border-xs) var(--color-dark-alpha-100);
}
/* Light Border Alphas */
.box-border-light-10 {
border: var(--box-border-xs) var(--color-light-alpha-10);
}
.box-border-light-20 {
border: var(--box-border-xs) var(--color-light-alpha-20);
}
.box-border-light-30 {
border: var(--box-border-xs) var(--color-light-alpha-30);
}
.box-border-light-40 {
border: var(--box-border-xs) var(--color-light-alpha-40);
}
.box-border-light-50 {
border: var(--box-border-xs) var(--color-light-alpha-50);
}
.box-border-light-60 {
border: var(--box-border-xs) var(--color-light-alpha-60);
}
.box-border-light-70 {
border: var(--box-border-xs) var(--color-light-alpha-70);
}
.box-border-light-80 {
border: var(--box-border-xs) var(--color-light-alpha-80);
}
.box-border-light-90 {
border: var(--box-border-xs) var(--color-light-alpha-90);
}
.box-border-light-100 {
border: var(--box-border-xs) var(--color-light-alpha-100);
}
/* Box Size */
.box-lg {
border-radius: var(--round-lg);
padding: var(--padding-lg);
display: block;
height: 100%;
}
.box-md {
border-radius: var(--round-md);
padding: var(--padding-md);
display: block;
height: 100%;
}
.box-sm {
border-radius: var(--round-sm);
padding: var(--padding-sm);
display: block;
height: 100%;
}
.box-xs {
border-radius: var(--round-xs);
padding: var(--padding-xs);
display: block;
height: 100%;
}
.box-xxs {
border-radius: var(--round-xxs);
padding: var(--padding-xxs);
display: block;
height: 100%;
}
@media (max-width: 430px) {
.box-lg {
border-radius: var(--round-lg);
padding: var(--padding-lg);
display: block;
height: 100%;
}
.box-md {
border-radius: var(--round-md);
padding: var(--padding-md);
display: block;
height: 100%;
}
.box-sm {
border-radius: var(--round-sm);
padding: var(--padding-md);
display: block;
height: 100%;
}
.box-xs {
border-radius: var(--round-xs);
padding: var(--padding-sm);
display: block;
height: 100%;
}
}
/* Box Round for Cropping Img */
.boxround-xl {
width:100%;
border-radius: var(--round-xl);
}
.boxround-lg {
width:100%;
border-radius: var(--round-lg);
}
.boxround-md {
width:100%;
border-radius: var(--round-md);
}
.boxround-sm {
width:100%;
border-radius: var(--round-sm);
}
.boxround-xs {
width:100%;
border-radius: var(--round-xs);
}
.boxround-xxs {
width:100%;
border-radius: var(--round-xxs);
}
.boxround-md-top {
width:100%;
border-radius: 2vh 2vh 0 0;
}
.boxround-sm-top {
width:100%;
border-radius: 1.6vh 1.6vh 0 0;
}
/* Box Shadow */
/* Prime Color Shadows */
.box-shadow-xl-prime-50 {
box-shadow: var(--box-shadow-xl) var(--box-shadow-prime-50);
}
.box-shadow-xl-prime-30 {
box-shadow: var(--box-shadow-xl) var(--box-shadow-prime-30);
}
.box-shadow-xl-prime-10 {
box-shadow: var(--box-shadow-xl) var(--box-shadow-prime-10);
}
.box-shadow-lg-prime-50 {
box-shadow: var(--box-shadow-lg) var(--box-shadow-prime-50);
}
.box-shadow-lg-prime-30 {
box-shadow: var(--box-shadow-lg) var(--box-shadow-prime-30);
}
.box-shadow-lg-prime-10 {
box-shadow: var(--box-shadow-lg) var(--box-shadow-prime-10);
}
.box-shadow-md-prime-50 {
box-shadow: var(--box-shadow-md) var(--box-shadow-prime-50);
}
.box-shadow-md-prime-30 {
box-shadow: var(--box-shadow-md) var(--box-shadow-prime-30);
}
.box-shadow-md-prime-10 {
box-shadow: var(--box-shadow-md) var(--box-shadow-prime-10);
}
.box-shadow-sm-prime-50 {
box-shadow: var(--box-shadow-sm) var(--box-shadow-prime-50);
}
.box-shadow-sm-prime-30 {
box-shadow: var(--box-shadow-sm) var(--box-shadow-prime-30);
}
.box-shadow-sm-prime-10 {
box-shadow: var(--box-shadow-sm) var(--box-shadow-prime-10);
}
/* Dark Color Shadows */
.box-shadow-xl-dark-50 {
box-shadow: var(--box-shadow-xl) var(--box-shadow-dark-50);
}
.box-shadow-xl-dark-30 {
box-shadow: var(--box-shadow-xl) var(--box-shadow-dark-30);
}
.box-shadow-xl-dark-10 {
box-shadow: var(--box-shadow-xl) var(--box-shadow-dark-10);
}
.box-shadow-lg-dark-50 {
box-shadow: var(--box-shadow-lg) var(--box-shadow-dark-50);
}
.box-shadow-lg-dark-30 {
box-shadow: var(--box-shadow-lg) var(--box-shadow-dark-30);
}
.box-shadow-lg-dark-10 {
box-shadow: var(--box-shadow-lg) var(--box-shadow-dark-10);
}
.box-shadow-md-dark-50 {
box-shadow: var(--box-shadow-md) var(--box-shadow-dark-50);
}
.box-shadow-md-dark-30 {
box-shadow: var(--box-shadow-md) var(--box-shadow-dark-30);
}
.box-shadow-md-dark-10 {
box-shadow: var(--box-shadow-md) var(--box-shadow-dark-10);
}
.box-shadow-sm-dark-50 {
box-shadow: var(--box-shadow-sm) var(--box-shadow-dark-50);
}
.box-shadow-sm-dark-30 {
box-shadow: var(--box-shadow-sm) var(--box-shadow-dark-30);
}
.box-shadow-sm-dark-10 {
box-shadow: var(--box-shadow-sm) var(--box-shadow-dark-10);
}
/* Light Color Shadows */
.box-shadow-xl-light-50 {
box-shadow: var(--box-shadow-xl) var(--box-shadow-light-50);
}
.box-shadow-xl-light-30 {
box-shadow: var(--box-shadow-xl) var(--box-shadow-light-30);
}
.box-shadow-xl-light-10 {
box-shadow: var(--box-shadow-xl) var(--box-shadow-light-10);
}
.box-shadow-lg-light-50 {
box-shadow: var(--box-shadow-lg) var(--box-shadow-light-50);
}
.box-shadow-lg-light-30 {
box-shadow: var(--box-shadow-lg) var(--box-shadow-light-30);
}
.box-shadow-lg-light-10 {
box-shadow: var(--box-shadow-lg) var(--box-shadow-light-10);
}
.box-shadow-md-light-50 {
box-shadow: var(--box-shadow-md) var(--box-shadow-light-50);
}
.box-shadow-md-light-30 {
box-shadow: var(--box-shadow-md) var(--box-shadow-light-30);
}
.box-shadow-md-light-10 {
box-shadow: var(--box-shadow-md) var(--box-shadow-light-10);
}
.box-shadow-sm-light-50 {
box-shadow: var(--box-shadow-sm) var(--box-shadow-light-50);
}
.box-shadow-sm-light-30 {
box-shadow: var(--box-shadow-sm) var(--box-shadow-light-30);
}
.box-shadow-sm-light-10 {
box-shadow: var(--box-shadow-sm) var(--box-shadow-light-10);
}
/* Box Color */
.box-light-30 {
background: rgba(255, 255, 255, 0.3);
}
.box-light-60 {
background: rgba(255, 255, 255, 0.6);
}
.box-light-10 {
background: rgba(255, 255, 255, 1);
}
.box-dark-10 {
background: rgba(17, 17, 17, 0.1);
}
.box-dark-30 {
background: rgba(17, 17, 17, 0.3);
}
.box-dark-60 {
background: rgba(17, 17, 17, 0.6);
}
.box-dark-100 {
background: rgba(17, 17, 17, 1);
}
.box-shadow-violet-10 {
box-shadow: 0vh 2vh 2.2vh rgb(148 128 247 / 0.1);
}
.box-shadow-violet-30 {
box-shadow: 0vh 2vh 2.2vh rgb(148 128 247 / 0.3);
}
.box-shadow-dark-10 {
box-shadow: 0vh 2vh 2.2vh rgb(0 0 0 / 0.1);
}
.box-shadow-dark-30 {
box-shadow: 0vh 2vh 2.2vh rgb(0 0 0 / 0.3);
}
.boxviolet {
background: #151236;
border-radius: var(--round-md);
padding: 4vh 3vh 3vh 3vh;
margin-bottom: 4vh;
display: block;
}
.boxgrey-violet-line {
background: #18181b;
border: 2px solid var(--color-cosmic-space);
border-radius: 24px;
padding: 32px 32px 40px 32px;
display: block;
height: 100%;
}
.boxlight-violet-line {
background: #ffffff;
border: 2px solid var(--color-cosmic-space);
border-radius: 24px;
padding: 32px 32px 40px 32px;
display: block;
height: 100%;
}
.boxdark-violet-sh {
background: #23242a;
border-radius: var(--round-md);
padding: var(--padding-md);
display: block;
box-shadow: 0vh 2vh 2.2vh rgb(148 128 247 / 0.1);
}
.box-glass-violet-container {
border-radius: var(--round-md);
padding: 0.3vh; /* Adjust as necessary to fit the desired border width */
background: linear-gradient(to bottom, #8f8ecd 0%, #524e9a 100%);
}
.box-glass-violet {
background: linear-gradient(to bottom, #5d5c7f 0%, #383661 100%);
border-radius: var(--round-md);
padding: var(--padding-md);
display: block;
height: 100%;
box-shadow: 0vh 2vh 2.2vh rgb(148 128 247 / 0.1);
}
.img-violet-sh {
box-shadow: 0vh 2vh 2.2vh rgb(87 71 177 / 0.3);
}
@media (max-width: 430px) {
.boxviolet {
padding: 4vh 4vh 3vh 4vh;
}
}
.boxblur {
/* From https://css.glass */
background: rgba(30, 4, 66, 0.64);
border-radius: 3vh;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.7px);
-webkit-backdrop-filter: blur(6.7px);
border: 1px solid rgba(30, 4, 66, 1);
padding: 48px 24px;
}
.boxblur-s {
/* From https://css.glass */
background: rgba(30, 4, 66, 0.64);
border-radius: 20px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.7px);
-webkit-backdrop-filter: blur(6.7px);
border: 1px solid rgba(30, 4, 66, 1);
padding: 32px 18px;
}
.boxteam {
margin: 1.2vh 0;
border-radius: var(--round-md);
padding-bottom: 3vh;
background: rgba(255, 255, 255, 0.3);
box-shadow: 0vh 2vh 2.2vh rgb(148 128 247 / 0.1);
}
@media (max-width: 430px) {
.boxteam {
margin: 2vh 0;
border-radius: 2.4vh;
padding-bottom: 3vh;
}
}
.teamsubhl {
padding:0 4vh 0 4vh;
}
@media (max-width: 430px) {
.teamsubhl {
padding:0 5vh 0 5vh;
}
}
/* Box Effect */
.box-hover-float {
transition: filter 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease;
}
.box-hover-float:hover {
transform: translateY(-1.2vh);
box-shadow: var(--box-shadow-xl) rgba(var(--color-cosmic-rgb), 0.5);
}
/* Box Decoration */
/* Grid Line */
.light-mode .grid-left {
border-left: 1px solid rgba(var(--color-storm-rgb), 0.2);
padding-left: 2.4vh;
}
/* Float */
.float-left-mb-right {
float: left;
}
.float-right-mb-left {
float: right;
}
@media (max-width: 991px) {
.float-left-mb-right {
float: right;
}
.float-right-mb-left {
float: left;
}
}
/* Box Custom */
/* Box Pro */
.box-pro {
background: rgba(var(--color-cosmic-rgb), 0.4);
border: 1px solid var(--color-moonlight);
}
/* Box Usecase */
.box-usecase-finance {
background: url(../images/img/usecase-finance.png) no-repeat top center;
background-size: 100% auto !important;
background-color: #eceaf6;
}
.box-usecase-healthcare {
background: url(../images/img/usecase-healthcare.png) no-repeat top center;
background-size: 100% auto !important;
background-color: #eceaf6;
}
.box-usecase-retail {
background: url(../images/img/usecase-retail.png) no-repeat top center;
background-size: 100% auto !important;
background-color: #eceaf6;
}
.box-usecase-manufacturing {
background: url(../images/img/usecase-manufacturing.png) no-repeat top center;
background-size: 100% auto !important;
background-color: #eceaf6;
}
.plus-bullet-list {
list-style: none; /* Remove default bullets */
margin-bottom: 0.8vh;
}
.plus-bullet-list li {
position: relative;
margin-left: -1.6vh; /* Adjust for custom bullet space */
}
.plus-bullet-list li::before {
content: "+";
position: absolute;
left: -1.6vh; /* Place the + where the bullet would normally be */
color: var(--color-storm); /* Customize the color of the + */
}
.box-usecase-content {
padding-top: 22vh;
}
@media (max-width: 430px) {
.box-usecase-content {
padding-top: 36vh;
}
}
/* Box FL FHE */
.box-product-fl-fhe-img {
margin-top: 8vh;
}
.box-product-fl-fhe {
position: relative;
width: 100%;
}
.overlay-left, .overlay-right {
position: absolute;
width: 60%;
padding: 0 var(--spacing-sm) 0 var(--spacing-sm);
}
.overlay-left {
transform: translate(-25%, -65%);
text-align: right;
border-left: none;
border-right: 1px solid var(--color-storm);
}
.overlay-right {
transform: translate(95%, -300%);
text-align: left;
border-left: 1px solid var(--color-storm);
border-right: none;
}
.overlay-left h6, .overlay-right h6 {
line-height: 2.4vh;
margin-bottom: 0.5vh;
}
@media (max-width: 1399px) {
.overlay-left, .overlay-right {
width: 80%;
}
.overlay-left {
transform: translate(-42%, -70%);
}
.overlay-right {
transform: translate(72%, -260%);
}
}
@media (max-width: 1280px) {
.overlay-left, .overlay-right {
width: 80%;
}
.overlay-left {
transform: translate(-42%, -60%);
}
.overlay-right {
transform: translate(72%, -240%);
}
}
@media (max-width: 1199px) {
.overlay-left, .overlay-right {
width: 65%;
}
.overlay-left {
transform: translate(-28%, -70%);
}
.overlay-right {
transform: translate(87%, -280%);
}
}
@media (max-width: 1143px) {
.overlay-left, .overlay-right {
width: 70%;
}
.overlay-left {
transform: translate(-33%, -65%);
}
.overlay-right {
transform: translate(81%, -280%);
}
}
@media (max-width: 1110px) {
.overlay-left, .overlay-right {
width: 65%;
}
.overlay-left {
transform: translate(-29%, -65%);
}
.overlay-right {
transform: translate(87%, -270%);
}
}
@media (max-width: 1040px) {
.overlay-left, .overlay-right {
width: 70%;
}
.overlay-left {
transform: translate(-34%, -65%);
}
.overlay-right {
transform: translate(81%, -260%);
}
}
@media (max-width: 997px) {
.overlay-left, .overlay-right {
width: 67%;
}
.overlay-left {
transform: translate(-30%, -60%);
}
.overlay-right {
transform: translate(84%, -230%);
}
}
@media (max-width: 902px) {
.overlay-left, .overlay-right {
width: 72%;
}
.overlay-left {
transform: translate(-35%, -60%);
}
.overlay-right {
transform: translate(78%, -220%);
}
}
@media (max-width: 848px) {
.overlay-left, .overlay-right {
width: 72%;
}
.overlay-left {
transform: translate(-35%, -50%);
}
.overlay-right {
transform: translate(78%, -190%);
}
}
@media (max-width: 814px) {
.overlay-left, .overlay-right {
width: 72%;
}
.overlay-left {
transform: translate(-35%, -50%);
}
.overlay-right {
transform: translate(78%, -185%);
}
}
@media (max-width: 781px) {
.overlay-left, .overlay-right {
width: 75%;
}
.overlay-left {
transform: translate(-38%, -50%);
}
.overlay-right {
transform: translate(75%, -180%);
}
}
@media (max-width: 768px) {
.box-product-fl-fhe-img {
margin-top: -2vh;
}
.box-product-fl-fhe {
position: relative;
width: 100%;
}
.overlay-left, .overlay-right {
position: relative;
width: 70%;
}
.overlay-left {
transform: translate(-23%, -60%);
text-align: left;
border-left: 1px solid var(--color-storm);;
border-right: none;
}
.overlay-right {
transform: translate(80%, -130%);
text-align: left;
border-left: 1px solid var(--color-storm);
border-right: none;
}
}
@media (max-width: 767px) {
.box-product-fl-fhe-img {
margin-top: -2vh;
}
.box-product-fl-fhe {
position: relative;
width: 100%;
}
.overlay-left, .overlay-right {
position: relative;
width: 50%;
}
.overlay-left {
transform: translate(4%, -60%);
}
.overlay-right {
transform: translate(108%, -130%);
}
}
@media (max-width: 705px) {
.overlay-left {
transform: translate(4%, -60%);
}
.overlay-right {
transform: translate(108%, -114%);
}
}
@media (max-width: 690px) {
.overlay-left {
transform: translate(4%, -60%);
}
.overlay-right {
transform: translate(108%, -133%);
}
}
@media (max-width: 659px) {
.overlay-left {
transform: translate(4%, -60%);
}
.overlay-right {
transform: translate(108%, -153%);
}
}
@media (max-width: 613px) {
.overlay-left {
transform: translate(4%, -60%);
}
.overlay-right {
transform: translate(108%, -137%);
}
}
@media (max-width: 552px) {
.overlay-left, .overlay-right {
position: relative;
width: 100%;
}
.overlay-left {
transform: translate(4%, -60%);
}
.overlay-right {
transform: translate(4%, -7%);
}
}
@media (max-width: 430px) {
.overlay-left, .overlay-right {
position: relative;
width: 100%;
}
.overlay-left {
transform: translate(4%, -20%);
}
.overlay-right {
transform: translate(4%, 0%);
}
.overlay-left h6, .overlay-right h6 {
line-height: 3.4vh;
margin-bottom: 0.5vh;
}
}
@media (max-width: 375px) {
.overlay-left {
transform: translate(1%, -30%);
}
.overlay-right {
transform: translate(1%, 0%);
}
}
/* Low-Code Box */
.box-lowcode {
margin-top: var(--spacing-xxl);
}
@media (max-width: 375px) {
.box-lowcode {
margin-top: var(--spacing-md);
}
}
/* Stars Box */
ul.li-stars {
list-style: none;
padding-left: 0;
}
ul.li-stars li {
position: relative;
padding-left: 2rem;
margin-bottom: 1rem;
}
ul.li-stars.cosmic li::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1.5rem;
height: 1.5rem;
background-image: url('../images/icon/stars-cosmic.png');
background-size: contain;
background-repeat: no-repeat;
}
ul.li-stars.bermuda li::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1.5rem;
height: 1.5rem;
background-image: url('../images/icon/stars-bermuda.png');
background-size: contain;
background-repeat: no-repeat;
}
/* Terminal Box */
.box-terminal {
background-image: url('../images/img/terminal-screen.png'); /* Use your terminal-screen image */
background-size: cover; /* Ensure the image covers the entire box */
background-position: left top; /* Center the background image */
padding: 5rem 3rem; /* Adjust padding to make it look like a box */
width: calc(100% + 100%); /* Extend width beyond the container */
transform: translateX(0); /* Shift box to the right */
color: var(--color-bermuda); /* Text color matching terminal style */
font-family: var(--font-code-family); /* Monospace font to simulate a terminal */
overflow: hidden; /* Prevent overflow */
height: 20rem;
}
.text-movein-container {
min-height: 40px; /* Ensure there’s enough space to scroll */
}
.text-movein-left {
position: relative;
white-space: nowrap;
transform: translateX(-200px); /* Start off-screen to the left */
transition: transform 1.5s ease; /* Smooth transition when moving */
}
.text-movein-right {
position: relative;
white-space: nowrap;
transform: translateX(200px); /* Start off-screen to the right */
transition: transform 1.5s ease; /* Smooth transition when moving */
}
/* Accelerator Box */
.box-accelerator {
padding: 2px;
/* Gradient border */
background:
linear-gradient(to top, rgba(var(--color-cosmic-400-rgb), 0), rgba(var(--color-cosmic-400-rgb), 0)), /* Inner background */
linear-gradient(to top, rgba(var(--color-moonlight-rgb), 0), rgba(var(--color-moonlight-rgb), 0)); /* Border gradient */
background-origin: border-box;
background-clip: content-box, border-box;
box-shadow: 0 4vh 5vh var(--box-shadow-prime-10);
}
.accelerating-line {
height: 2px;
width: 100%;
background: linear-gradient(to right, rgba(var(--color-moonlight-rgb), 0), rgba(var(--color-moonlight-rgb), 1));
}
/* Code box */
/*
.code-window {
background-image: url('assets/themes/cifer/images/img/vscode.png');
background-size: contain;
background-position: center top;
background-repeat: no-repeat;
margin-left: 2vh;
height: 59vh;
}
*/
.code-window {
z-index: 0;
}
.code-main {
width: 54vh;
position: relative;
top: 10vh;
left: 8vh;
}
@media (max-width: 768px) {
.code-window {
background-image: url('../images/img/vscode.png');
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
margin-left: 0;
}
}
pre {
margin: 0;
white-space: pre-wrap; /* Allows for wrapping */
font-family: monospace;
flex-grow: 1; /* Allow code block to take available space */
font-size: 0.75em;
color: #333333;
}
pre#code-block-1 {
color: #aaaaaa;
}
#copy-button-1, #copy-button-2 {
cursor: pointer;
transition: background-color 0.3s ease;
float: right;
border: none;
}
#copy-button-1:hover, #copy-button-2:hover {
background-color: #ffffff;
}
.code-container {
height: 45vh; /* Set fixed height */
overflow-y: auto; /* Enable vertical scrolling */
}
.code {
color: #ced0ed; /* Purple for keywords */
}
.keyword {
color: #bc89bd; /* Purple for keywords */
}
.module {
color: #71c6b1;
}
.builtin {
color: #61aeee; /* Blue for built-in functions */
}
.string {
color: #98c379; /* Green for strings */
}
.number {
color: #d19a66; /* Orange for numbers */
}
.comment {
color: #5c6370; /* Grey for comments */
font-style: italic;
}
.function {
color: #61aeee; /* Blue for function names */
}
.variable {
color: #e06c75; /* Red for variable names */
}
.class {
color: #e5c07b; /* Yellow for class names */
}
.parameter {
color: #abb2bf; /* Light grey for parameters */
}
/* Twitter */
.twitter-tweet {
width:80% !important;
margin: 0 auto;
}
.twitter-follow-button {
transform: scale(1.25);
transform-origin: top left;
}
@media (max-width:430px) {
.twitter-tweet {
width:100% !important;
margin: 0 auto;
}
}
/* Plans & Pricing */
.discount {
position: relative;
display: inline-block;
}
.discount .strike-through {
position: absolute;
top: 10%;
left: 45%;
width: 50%;
height: 1px;
background-color: var(--color-smoke);
transform: rotate(150deg);
transform-origin: left center;
}
/*
.discount .strike-through {
position: absolute;
top: 10%;
left: 100%;
width: 110%;
height: 2px;
background-color: var(--color-smoke);
transform: rotate(150deg);
transform-origin: left center;
}
*/
.discount .original-price {
color: var(--color-smoke);
}
.discount .new-price {
color: #ffffff;
}
.custom-list-grey {
list-style-type: none; /* Remove default bullets */
padding-left: 0; /* Remove padding since flexbox will handle it */
}
.custom-list-grey li {
display: flex; /* Use flexbox for alignment */
align-items: flex-start; /* Align the bullet image with the first line of text */
margin-bottom: 1.2vh; /* Space between list items */
}
.custom-list-grey li::before {
content: '';
background: url('../images/icon/icon-check-grey.png') no-repeat center center;
background-size: 1.4vh; /* Size of the bullet image */
background-position-y: 0.6vh;
width: 1.4vh; /* Same as background-size */
height: 2vh; /* Same as background-size */
margin-right: 1vh; /* Space between bullet and text */
flex-shrink: 0; /* Prevent shrinking of the bullet image */
}
.custom-list-grey li p {
margin: 0; /* Remove default margin from */
}
.custom-list-violet {
list-style-type: none; /* Remove default bullets */
padding-left: 0; /* Remove padding since flexbox will handle it */
}
.custom-list-violet li {
display: flex; /* Use flexbox for alignment */
align-items: flex-start; /* Align the bullet image with the first line of text */
margin-bottom: 1.2vh; /* Space between list items */
}
.custom-list-violet li::before {
content: '';
background: url('../images/icon/icon-check-violet.png') no-repeat center center;
background-size: 1.4vh; /* Size of the bullet image */
background-position-y: 0.6vh;
width: 1.4vh; /* Same as background-size */
height: 2vh; /* Same as background-size */
margin-right: 1vh; /* Space between bullet and text */
flex-shrink: 0; /* Prevent shrinking of the bullet image */
}
.custom-list-violet li p {
margin: 0; /* Remove default margin from
*/
}
.custom-list-white {
list-style-type: none; /* Remove default bullets */
padding-left: 0; /* Remove padding since flexbox will handle it */
}
.custom-list-white li {
display: flex; /* Use flexbox for alignment */
align-items: flex-start; /* Align the bullet image with the first line of text */
margin-bottom: 1.2vh; /* Space between list items */
}
.custom-list-white li::before {
content: '';
background: url('../images/icon/icon-check-white.png') no-repeat center center;
background-size: 1.4vh; /* Size of the bullet image */
background-position-y: 0.6vh;
width: 1.4vh; /* Same as background-size */
height: 2vh; /* Same as background-size */
margin-right: 1vh; /* Space between bullet and text */
flex-shrink: 0; /* Prevent shrinking of the bullet image */
}
.custom-list-white li p {
margin: 0; /* Remove default margin from
*/
}
/* Box Quote */
.box-quote-md {
border-left: 2px solid var(--color-storm);
padding-left: var(--spacing-sm);
}
.box-quote-sm {
border-left: 1px solid var(--color-storm);
padding-left: var(--spacing-sm);
}
.box-quote-light {
border-left: 1px solid var(--color-slate);
}
.box-quote-dark {
border-color: var(--color-storm);
}
.box-quote-light-hilight {
border-color: var(--color-midnight);
}
.box-quote-dark-hilight {
border-color: var(--color-cosmic);
}
.box-quote-none {
border: 0;
}
.box-quote-lining-vertical {
margin: 0 auto;
height: 100%;
position: relative;
padding: 0;
float: left;
}
/* Base structure for vertical lining */
.lining-vertical {
height: 100%;
width: 1px;
position: absolute;
left: 0;
background-color: transparent;
overflow: hidden;
}
.lining-vertical::before,
.lining-vertical::after {
position: absolute;
top: 0;
width: 100%;
height: 100%;
content: "";
}
.lining-vertical::after {
animation: rundown 3s infinite;
}
/* Dark Mode */
.dark-mode .lining::before {
background: var(--color-soot);
}
.dark-mode .lining::after {
background: var(--color-storm);
}
.dark-mode .lining-hilight::before {
background: var(--color-soot);
}
.dark-mode .lining-hilight::after {
background: var(--color-cosmic-space);
}
.dark-mode .lining-medium::before {
background: var(--color-storm);
}
.dark-mode .lining-medium::after {
background: var(--color-snow);
}
/* Light Mode */
.light-mode .lining::before {
background: var(--color-slate);
}
.light-mode .lining::after {
background: var(--color-smoke);
}
.light-mode .lining-hilight::before {
background: var(--color-slate);
}
.light-mode .lining-hilight::after {
background: var(--color-cosmic);
}
.light-mode .lining-medium::before {
background: var(--color-slate);
}
.light-mode .lining-medium::after {
background: var(--color-smoke);
}
@keyframes rundown {
0% {
transform: translateY(-100%);
}
60% {
transform: translateY(100%);
}
100% {
transform: translateY(100%);
}
}
/* Box Lining */
.box-lining-cosmic-md {
position: relative;
z-index: 0;
min-height: 200px;
width: 100%;
border-radius: var(--round-md);
overflow: hidden;
}
.box-lining-cosmic-md::before {
content: "";
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: var(--color-space);
background-repeat: no-repeat;
background-size: 100%100%, 50%50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(transparent 30%, var(--color-cosmic-space), var(--color-cosmic), var(--color-snow));
animation: lining-border 4s linear infinite;
}
.box-lining-cosmic-md::after {
content: "";
position: absolute;
z-index: -1;
left: 1px;
top: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
background: linear-gradient(var(--color-space), var(--color-space));
border-radius: var(--round-md);
}
@keyframes lining-border {
100% {
transform: rotate(1turn);
}
}
.box-lining-bermuda-md {
position: relative;
z-index: 0;
min-height: 200px;
width: 100%;
border-radius: var(--round-md);
overflow: hidden;
}
.box-lining-bermuda-md::before {
content: "";
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: var(--color-space);
background-repeat: no-repeat;
background-size: 100%100%, 50%50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(transparent 30%, var(--color-bermuda), var(--color-bermuda-400), var(--color-snow));
animation: lining-border 4s linear infinite;
}
.box-lining-bermuda-md::after {
content: "";
position: absolute;
z-index: -1;
left: 1px;
top: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
background: linear-gradient(var(--color-space), var(--color-space));
border-radius: var(--round-md);
}
/* Box Team */
.box-team {
width: 90%;
float: right;
}
.box-team-miranda {
background: url(../images/team/miranda-full.png) no-repeat top center;
background-size: 100% auto !important;
background-color: #000000;
}
.box-team-krikamol {
background: url(../images/team/krikamol-full.png) no-repeat top center;
background-size: 100% auto !important;
background-color: #000000;
}
.box-team-serin {
background: url(../images/team/serin-full.png) no-repeat top center;
background-size: 100% auto !important;
background-color: #000000;
}
.box-team-parit {
background: url(../images/team/parit-full.png) no-repeat top center;
background-size: 100% auto !important;
background-color: #000000;
}
.box-team-content {
padding-top: 32vh;
}
@media (max-width: 1280px) {
.box-team-content {
padding-top: 24vh;
}
}
@media (max-width: 1199px) {
.box-team {
width: 90%;
float: none;
margin: 0 auto;
}
.box-team-content {
padding-top: 40vh;
}
}
@media (max-width: 991px) {
.box-team {
width: 100%;
float: none;
margin: 0 auto;
}
.box-team-content {
padding-top: 32vh;
}
}
@media (max-width: 768px) {
.box-team-content {
padding-top: 24vh;
}
}
/* List */
.list-sub {
list-style-type: none;
margin-left: var(--spacing-xxs);
}
.list-lg {
list-style-type: none;
padding: 0;
margin: 0;
}
.list-lg li {
position: relative;
padding-left: 3vh;
}
.list-lg li::before {
content: '•';
position: absolute;
left: 0;
top: -0.3vh;
color: var(--color-cosmic);
font-size: 2em;
line-height: 3vh;;
}
/* Press */
.pressdate {
color: var(--color-cosmic);
font-size: 1.8vh;
margin-top: 2.4vh;
margin-bottom: 1.3vh;
}
.pressauthor {
color: var(--color-smoke);
font-size: 1.8vh;
margin-top: 1.8vh;
}
.presshero {
margin-bottom: 2.5rem;
border-radius: var(--round-sm);
}
.pressline {
height: 1px;
border-bottom: 1px solid var(--color-slate);
margin: 5.3vh 0 0 0;
}
@media (max-width: 768px) {
.pressline {
height: 1px;
border-bottom: 1px solid var(--color-storm);
margin: 6vh 0 0 0;
}
}
@media (max-width: 430px) {
.pressline {
height: 1px;
border-bottom: 1px solid var(--color-storm);
margin: 6vh 0 0 0;
}
}
@media (max-width: 375px) {
.pressline {
height: 1px;
border-bottom: 1px solid var(--color-storm);
margin: 6vh 0 0 0;
}
}
.tag-violet {
padding: 0.7vh 1.6vh;
color: #ffffff;
font-size: 2.2vh;
font-weight: 400;
background: linear-gradient(to right, #3a2ccf, #d6abff) border-box;
border-radius: 0.6vh;
margin-bottom: 2vh;
}
/* Icons */
/* Icon container */
.icon-container {
display: flex;
flex-wrap: wrap;
}
.icon {
display: inline-block;
}
.icon:hover {
filter: brightness(120%);
}
/* Icon size */
.icon-lg {
width: 4.4vh;
height: 4.4vh;
}
.icon-md {
width: 3.8vh;
height: 3.8vh;
}
.icon-sm {
width: 3.2vh;
height: 3.2vh;
}
@media (max-width: 375px) {
.icon-lg {
width: 4.4vh;
height: 4.4vh;
}
.icon-md {
width: 5.2vh;
height: 5.2vh;
}
.icon-sm {
width: 4.4vh;
height: 4.4vh;
}
}
/* Icon color */
.dark-mode .icon {
filter: brightness(90%);
}
.light-mode .icon {
filter: brightness(100%);
}
/* Images */
.featuredlogo {
height: 8vh;
margin-bottom: 4vh;
}
@media (max-width: 430px) {
.featuredlogo {
height: 10vh;
margin-bottom: 4vh;
}
}
.googlelogo {
height: 5vh;
margin-top: 4vh;
}
@media (max-width: 430px) {
.googlelogo {
height: 4.8vh;
margin-top: 4vh;
}
}
@media (max-width: 375px) {
.googlelogo {
height: 5.8vh;
margin-top: 8vh;
}
}
.dl-icon {
width: 10.6vh;
margin: 0 4vh 1.6vh 0;
}
@media (max-width: 430px) {
.dl-icon {
width: 13vh;
margin: 0 4vh 3vh 0;
}
}
@media (max-width: 375px) {
.dl-icon {
width: 13vh;
margin: 0 4vh 2.4vh 0;
}
}
.usecase-icon {
width: 11vh;
margin: 0 4vh 1.6vh 0;
}
@media (max-width: 430px) {
.usecase-icon {
width: 17vh;
margin: 0 4vh 2.6vh 0;
}
}
.socialicon {
width: 2.2vh;
margin-right: 1.1vh;
}
@media (max-width: 430px) {
.socialicon {
width: 2.8vh;
margin-right: 1.4vh;
}
}
.newstag {
background: #2a273d;
border-radius: 6px;
padding: 0.4vh 1.4vh;
color: #FFFFFF;
font-size: 1.4vh;
margin-top: 2.4vh;
margin-bottom: 1.3vh;
width: fit-content;
}
.integrate-box {
max-width: 44vh;;
}
.integrate-logo {
height: 3.6vh;
margin: 0.8vh 2.8vh 0.8vh 0;
opacity: 0.8;
}
.accelerating-box {
text-align: center;
}
.stanford-logo, .google-logo, .epicenter-logo {
opacity: 0.6;
}
.stanford-logo {
height: 3.2rem;
}
.google-logo {
height: 2.1rem;
}
.epicenter-logo {
height: 2.4rem;
}
.news-logo {
height: 8vh;
margin-right: 7.2vh;
margin-bottom: 5.2vh;
}
@media (max-width: 1199px) {
.integrate-box {
max-width: 100%;;
}
}
@media (max-width: 991px) {
.accelerating-box {
text-align: left;
}
}
@media (max-width: 768px) {
.integrate-logo {
height: 4vh;
}
}
@media (max-width: 430px) {
.integrate-logo {
height: 4.2vh;
}
}
/*Read me*/
.readme p {
font-size: 0.95rem;
}
.readme H2 {
font-size: 1.56rem;
margin-bottom: 1.5rem;
line-height: 1.3 !important;
}
.readme H2 .text-hilight {
color: var(--color-cosmic-space) !important;
}
.readme ol {
list-style: none;
counter-reset: list-counter;
padding-left: 0;
font-size: 0.85rem;
line-height: 1.3em;
}
.readme ol li {
display: flex;
align-items: center;
padding-left: 28px;
margin-bottom: 1rem;
position: relative;
}
.readme ol li::before {
content: counter(list-counter) ".";
counter-increment: list-counter;
position: absolute;
left: 0;
margin-right: 10px;
}
.readme ol li a {
text-decoration: none;
color: var(--color-cosmic-900);
border-bottom: 1px solid transparent;
padding-bottom: -6px;
}
.readme ol li a:hover {
border-bottom: 1px solid var(--color-cosmic);
}
.readme .list-margin {
margin-bottom: 1.7rem;
}
.readme table {
font-size: 0.85rem;
line-height: 1.3em;
}
.readme table th {
padding-top: 0 !important;
padding-bottom: 0.5rem !important;
}
.readme table td {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
padding-right: 1rem !important;
font-weight: 400;
}
.readme table td.title {
font-weight: 600;
}
.subhr {
border-top: 1px dashed var(--color-smoke);
margin: 2rem 0 2rem 0;
opacity: 0.75;
}
.float-sidenav ol li {
padding-left: 40px;
}
/* readme dark-mode */
.dark-mode .readme {
display: flex;
flex-direction: column;
color: var(--color-smoke);
font-weight: 400;
font-size: 0.95rem;
}
.dark-mode .readme H1, .dark-mode .readme H2, .dark-mode .readme H3, .dark-mode .readme H4, .dark-mode .readme H5, .dark-mode .readme H6 {
color: var(--color-slate);
line-height: 2em;
}
.dark-mode .readme hr {
border-color: var(--color-cosmic);
margin: 1rem 0 1rem 0;
}
.dark-mode .readme H3 {
font-size: 1.125rem;
margin-bottom: 0.6em;
margin-top: 2.5em;
font-weight: 400;
color: var(--color-slate);
}
.dark-mode .readme b {
color: var(--color-slate);
}
.dark-mode .readme table {
color: var(--color-smoke);
border-color: rgba(var(--color-cosmic-rgb), 0.25);
}
.dark-mode .readme table th {
color: var(--color-slate);
}
.dark-mode .readme table td.title {
color: rgba(var(--color-slate-rgb), 0.65);
}
.dark-mode .float-sidenav {
position: sticky;
top: 6rem;
max-height: 90vh;
font-size: 0.85rem;
color: var(--color-smoke) !important;
width: max-content;
}
.dark-mode .float-sidenav a:hover {
border-bottom: 1px solid transparent !important;
color: var(--color-cosmic-800) !important;
}
.dark-mode .float-sidenav li {
border-left: 1px solid rgba(var(--color-storm-rgb), 0.5);
margin: 0 !important;
padding: 6px 40px;
opacity: 0.5;
}
.dark-mode .float-sidenav li a {
text-decoration: none;
color: var(--color-smoke) !important;
}
.dark-mode .float-sidenav li::before {
left: 1rem !important;
}
.dark-mode .float-sidenav li:hover {
border-left: 1px solid var(--color-cosmic);
background-color: rgba(var(--color-cosmic-rgb), 0.1);
opacity: 0.75;
}
.dark-mode .float-sidenav li.active {
border-left: 1px solid var(--color-cosmic);
background-color: rgba(var(--color-cosmic-rgb), 0.1);
opacity: 1;
}
.dark-mode .box-summary {
background-color: var(--color-cosmic-alpha-10);
border: 1px solid var(--color-cosmic);
margin: 1.25rem 0 1.5rem 0;
padding: 1.25rem 1.5rem 1.3rem 1.5rem;
color: rgba(var(--color-slate-rgb), 0.8);
font-size: 0.9rem;
line-height: 1.5em;
}
/* readme light-mode */
.light-mode .readme {
display: flex;
flex-direction: column;
color: var(--color-storm);
font-weight: 400;
font-size: 0.95rem;
}
.light-mode .readme H1, .light-mode .readme H2, .light-mode .readme H3, .light-mode .readme H4, .light-mode .readme H5, .light-mode .readme H6 {
color: var(--color-soot);
line-height: 2em;
}
.light-mode .readme .text-hilight {
color: var(--color-cosmic-space) !important;
}
.light-mode .readme hr {
border-color: var(--color-cosmic);
margin: 1rem 0 1rem 0;
}
.light-mode .readme H3 {
font-size: 1.125rem;
margin-bottom: 0.6em;
margin-top: 2.5em;
font-weight: 400;
color: var(--color-soot);
}
.light-mode .readme b {
color: var(--color-soot);
font-weight: var(--body-font-weight-bold) !important;
}
.light-mode .readme table {
color: var(--color-storm);
border-color: rgba(var(--color-cosmic-rgb), 0.25);
}
.light-mode .readme table th {
color: var(--color-soot);
}
.light-mode .readme table td.title {
color: rgba(var(--color-soot-rgb), 0.65);
}
.light-mode .float-sidenav {
position: sticky;
top: 6rem;
max-height: 90vh;
font-size: 0.85rem;
color: var(--color-storm) !important;
width: max-content;
max-width: 20rem;
line-height: 1.5;
}
.light-mode .float-sidenav a:hover {
border-bottom: 1px solid transparent !important;
color: var(--color-storm) !important;
}
.light-mode .float-sidenav li {
border-left: 1px solid rgba(var(--color-storm-rgb), 0.5);
margin: 0 !important;
padding: 6px 40px;
opacity: 0.65;
}
.light-mode .float-sidenav li a {
text-decoration: none;
color: var(--color-storm) !important;
}
.light-mode .float-sidenav li::before {
left: 1rem !important;
}
.light-mode .float-sidenav li:hover {
border-left: 1px solid var(--color-cosmic);
background-color: rgba(var(--color-white-rgb), 0.1);
opacity: 0.85;
}
.light-mode .float-sidenav li.active {
border-left: 1px solid var(--color-cosmic);
background-color: rgba(var(--color-white-rgb), 0.4);
opacity: 1;
color: var(--color-cosmic-space);
}
.light-mode .readme a.default {
color: var(--color-cosmic-space);
font-weight: 500;
padding-bottom: 0px;
border-bottom: 2px solid rgba(var(--color-cosmic-rgb), 0.3);
transition: all ease .3s;
}
.light-mode .readme a.default:hover {
border-bottom: 2px solid rgba(var(--color-cosmic-rgb), 0.6);
}
.light-mode .box-summary {
background-color: var(--color-cosmic-alpha-10);
border: 1px solid var(--color-cosmic);
margin: 1.25rem 0 1.5rem 0;
padding: 1.25rem 1.5rem 1.3rem 1.5rem;
color: var(--color-storm);
font-size: 0.9rem;
line-height: 1.5em;
}
.float-sidenav.unlist ol {
list-style: none;
counter-reset: item;
}
.float-sidenav.unlist ol li {
counter-increment: item;
}
.float-sidenav.unlist ol li a {
counter-increment: item;
text-decoration: none;
color: var(--color-storm) !important;
}
.float-sidenav.unlist ol li::before {
content: '';
display: none;
}
.float-sidenav.unlist ul {
list-style-type: none;
padding-left: 0;
}
.float-sidenav.unlist li {
padding: 6px 16px;
}
@media (max-width: 992px) {
.table.no-stack [class*="col-"] {
float: initial !important;
display: table-cell !important;
width: auto !important;
}
}
/* Footer */
footer {
color: var(--color-storm);
background: none;
padding: 4rem 0 4rem 0;
margin: auto;
}
footer a {
color: var(--color-storm);
}
footer.light-mode, footer.light-mode a {
color: var(--color-storm);
}
footer.dark-mode, footer.dark-mode a {
color: var(--color-storm);
}
footer.dark-mode .text-link, footer.dark-mode .text-link a {
color: var(--color-smoke);
border-color: var(--color-storm);
}
.footer-left {
text-align: left;
}
.footer-right {
text-align: right;
margin-top: 0.5em;
}
@media only screen and (max-width: 1199px) {
.footer-left {
text-align: left;
}
.footer-right {
text-align: left;
margin-top: 1em;
}
}
.subfooter {
padding: 0;
}