mirror of
https://github.com/Dvorinka/Portfolio.git
synced 2026-06-03 19:32:56 +00:00
Tomas Dvorak
1076 lines
18 KiB
CSS
1076 lines
18 KiB
CSS
:root {
|
|
--ultramarine-blue: #1a5eff;
|
|
--silver-metallic: hsl(240, 4%, 71%);
|
|
--fiery-rose_12: hsla(355, 61%, 7%, 0.12);
|
|
--eerie-black-1: #212121;
|
|
--eerie-black-2: hsl(0, 0%, 12%);
|
|
--smokey-black: #090909;
|
|
--silver-sand: hsl(240, 4%, 76%);
|
|
--ocean-green: hsl(161, 50%, 57%);
|
|
--fiery-rose: hsl(354, 86%, 65%);
|
|
--alice-blue: hsl(214, 32%, 91%);
|
|
--davys-gray: hsl(0, 0%, 34%);
|
|
--blue-ryb: hsl(222, 100%, 45%);
|
|
--white_50: hsla(0, 0%, 100%, 0.5);
|
|
--white: hsl(0, 0%, 100%);
|
|
--onyx-1: hsl(0, 0%, 23%);
|
|
--onyx-2: hsl(0, 0%, 20%);
|
|
--ff-poppins: 'Poppins', sans-serif;
|
|
--ff-open-sans: 'Open Sans', sans-serif;
|
|
--fs-1: calc(2.3rem + 2.1vw);
|
|
--fs-2: calc(2.1rem + 0.9vw);
|
|
--fs-3: calc(2rem + 0.3vw);
|
|
--fs-4: 2rem;
|
|
--fs-5: 1.8rem;
|
|
--fs-6: 1.5rem;
|
|
--fs-7: 1.4rem;
|
|
--fs-8: 1.3rem;
|
|
--fs-9: 1.2rem;
|
|
--fw-400: 400;
|
|
--fw-500: 500;
|
|
--fw-600: 600;
|
|
--fw-700: 700;
|
|
--fw-800: 800;
|
|
--section-padding: 120px;
|
|
--shadow: 0 10px 30px hsla(0, 0%, 0%, 0.1);
|
|
--radius-pill: 500px;
|
|
--radius-circle: 50%;
|
|
--radius-5: 5px;
|
|
--radius-8: 8px;
|
|
--radius-16: 16px;
|
|
--transition: 0.25s ease;
|
|
--cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
|
|
--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#RESET
|
|
\*-----------------------------------*/
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
li { list-style: none; }
|
|
|
|
a,
|
|
img,
|
|
span,
|
|
button,
|
|
ion-icon { display: block; }
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
img { height: auto; }
|
|
|
|
input,
|
|
button {
|
|
background: none;
|
|
border: none;
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
input,
|
|
table { width: 100%; }
|
|
|
|
button { cursor: pointer; }
|
|
|
|
ion-icon { pointer-events: none; }
|
|
|
|
html {
|
|
font-family: var(--ff-open-sans);
|
|
font-size: 10px;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--smokey-black);
|
|
color: var(--silver-sand);
|
|
font-size: 1.6rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
body.active { overflow-y: hidden; }
|
|
|
|
:focus-visible { outline-offset: 4px; }
|
|
|
|
::-webkit-scrollbar { width: 10px; }
|
|
|
|
::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }
|
|
|
|
::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
|
|
|
|
::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#REUSED STYLE
|
|
\*-----------------------------------*/
|
|
|
|
.container { padding-inline: 15px; }
|
|
|
|
.h1,
|
|
.h2,
|
|
.h3 {
|
|
color: var(--white);
|
|
font-family: var(--ff-poppins);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.h1 {
|
|
font-size: var(--fs-1);
|
|
font-weight: var(--fw-800);
|
|
}
|
|
|
|
.h2 { font-size: var(--fs-2); }
|
|
|
|
.h3 { font-size: var(--fs-5); }
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
}
|
|
|
|
.btn {
|
|
max-width: max-content;
|
|
padding: var(--padding-y, 13px) 28px;
|
|
font-family: var(--ff-poppins);
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
.btn-primary {
|
|
color: var(--white);
|
|
background-color: var(--ultramarine-blue);
|
|
font-size: var(--fs-6);
|
|
border-radius: var(--radius-pill);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.btn-primary:is(:hover, :focus) { background-color: var(--blue-ryb); }
|
|
|
|
.w-100 { width: 100%; }
|
|
|
|
.section { padding-block: var(--section-padding); }
|
|
|
|
.section-title { margin-block-end: 24px; }
|
|
|
|
.text-center { text-align: center; }
|
|
|
|
.grid-list {
|
|
display: grid;
|
|
gap: 30px;
|
|
}
|
|
|
|
.bg-gray { background-color: var(--eerie-black-1); }
|
|
.bg-green { background-color: #018749; }
|
|
|
|
.btn-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: var(--white);
|
|
font-family: var(--ff-poppins);
|
|
font-size: var(--fs-6);
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
.btn-link > * { transition: var(--transition); }
|
|
|
|
.btn-link:is(:hover, :focus) {
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: #00ccff;
|
|
}
|
|
|
|
.btn-link:is(:hover, :focus) ion-icon { transform: translateX(5px); }
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#HEADER
|
|
\*-----------------------------------*/
|
|
|
|
.header .btn-group { display: none; }
|
|
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding-block: 28px;
|
|
background-color: var(--smokey-black);
|
|
transition: var(--transition);
|
|
z-index: 4;
|
|
}
|
|
|
|
.header.active {
|
|
background-color: var(--eerie-black-1);
|
|
padding-block: 18px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.header .container,
|
|
.navbar-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-open-btn {
|
|
color: var(--white_50);
|
|
font-size: 30px;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.nav-open-btn:is(:hover, :focus) { color: var(--ultramarine-blue); }
|
|
|
|
.navbar {
|
|
position: fixed;
|
|
background-color: var(--eerie-black-1);
|
|
color: var(--alice-blue);
|
|
top: 0;
|
|
right: -400px;
|
|
max-width: 400px;
|
|
width: 100%;
|
|
height: 100vh;
|
|
padding: 40px 16px;
|
|
z-index: 2;
|
|
visibility: hidden;
|
|
transition: 0.25s var(--cubic-in);
|
|
}
|
|
|
|
.navbar.active {
|
|
visibility: visible;
|
|
transform: translateX(-400px);
|
|
transition: 0.5s var(--cubic-out);
|
|
}
|
|
|
|
.navbar-top { margin-block-end: 30px; }
|
|
|
|
.nav-close-btn {
|
|
background-color: var(--fiery-rose_12);
|
|
color: var(--fiery-rose);
|
|
font-size: 20px;
|
|
padding: 5px;
|
|
border-radius: var(--radius-circle);
|
|
}
|
|
|
|
.nav-close-btn ion-icon { --ionicon-stroke-width: 45px; }
|
|
|
|
.navbar-link {
|
|
font-family: var(--ff-poppins);
|
|
font-size: var(--fs-6);
|
|
padding: 8px 16px;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.navbar-link:is(:hover, :focus) { color: var(--ultramarine-blue); }
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: var(--smokey-black);
|
|
transition: var(--transition);
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.overlay.active {
|
|
pointer-events: all;
|
|
opacity: 0.75;
|
|
visibility: visible;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#HERO
|
|
\*-----------------------------------*/
|
|
|
|
.hero { padding-block-start: calc(var(--section-padding) + 50px); margin-bottom: 100px;}
|
|
|
|
.hero .container {
|
|
display: grid;
|
|
gap: 70px;
|
|
margin-top: 100px;
|
|
}
|
|
|
|
.hero-text {
|
|
font-size: var(--fs-4);
|
|
margin-block: 10px 50px;
|
|
}
|
|
|
|
.play-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: var(--fs-7);
|
|
font-family: var(--ff-poppins);
|
|
font-weight: var(--fw-500);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.play-btn .icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 2px solid var(--white);
|
|
border-radius: var(--radius-circle);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.play-btn .span {
|
|
color: var(--silver-metallic);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.play-btn:is(:hover, :focus) .span { color: var(--white); }
|
|
|
|
.play-btn:is(:hover, :focus) .icon {
|
|
background-color: var(--white);
|
|
color: var(--ultramarine-blue);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#PROMO
|
|
\*-----------------------------------*/
|
|
|
|
.promo .section-text {
|
|
padding-inline: 8px;
|
|
margin-block-end: 50px;
|
|
}
|
|
|
|
.promo-card {
|
|
border-radius: var(--radius-5);
|
|
padding: 40px 25px;
|
|
}
|
|
|
|
.promo-card .card-icon {
|
|
background-color: var(--onyx-1);
|
|
color: var(--white);
|
|
width: max-content;
|
|
font-size: 24px;
|
|
padding: 20px;
|
|
border-radius: var(--radius-circle);
|
|
margin-block-end: 20px;
|
|
}
|
|
|
|
|
|
.promo-card .card-icon ion-icon { --ionicon-stroke-width: 50px; }
|
|
|
|
.promo-card .card-text {
|
|
color: var(--alice-blue);
|
|
margin-block: 20px 16px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#STATS
|
|
\*-----------------------------------*/
|
|
.stats{
|
|
padding: 120px 0 120px 0;
|
|
}
|
|
.stats .container {
|
|
display: grid;
|
|
gap: 50px;
|
|
}
|
|
|
|
.stats .section-text:last-of-type { margin-block: 16px; }
|
|
|
|
.stats-list {
|
|
display: grid;
|
|
gap: 15px;
|
|
}
|
|
|
|
.stats-card {
|
|
padding: 17px;
|
|
border-radius: var(--radius-5);
|
|
}
|
|
|
|
.stats-card .card-title {
|
|
font-size: var(--fs-3);
|
|
margin-block-end: 10px;
|
|
}
|
|
|
|
.stats-card .card-text {
|
|
font-size: var(--fs-7);
|
|
color: var(--alice-blue);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#MARKET
|
|
\*-----------------------------------*/
|
|
|
|
.market .section-text { margin-block-end: 24px; }
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
padding-block-end: 15px;
|
|
}
|
|
|
|
.table-container::-webkit-scrollbar { height: 10px; }
|
|
|
|
.table-container::-webkit-scrollbar-track { background-color: var(--eerie-black-2); }
|
|
|
|
.table-container::-webkit-scrollbar-thumb { background-color: var(--davys-gray); }
|
|
|
|
.table-container::-webkit-scrollbar-button { width: 15px; }
|
|
|
|
.market-table {
|
|
background-color: var(--eerie-black-2);
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.table-head { background-color: var(--onyx-2); }
|
|
|
|
.table-heading {
|
|
color: var(--white);
|
|
font-size: var(--fs-7);
|
|
font-weight: var(--fw-600);
|
|
text-align: left;
|
|
padding: 16px 30px;
|
|
}
|
|
|
|
.table-body .table-row:not(:last-child) { border-block-end: 1px dashed var(--davys-gray); }
|
|
|
|
.table-data { padding: 12px 30px; }
|
|
|
|
.table-data.wrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
}
|
|
|
|
.table-data.wrapper img { width: 30px; }
|
|
|
|
.table-data .coin-name {
|
|
font-size: var(--fs-6);
|
|
font-weight: var(--fw-600);
|
|
margin-block-end: 5px;
|
|
}
|
|
|
|
.table-data .span { font-size: var(--fs-8); }
|
|
|
|
.table-data:not(.wrapper) {
|
|
vertical-align: top;
|
|
font-size: var(--fs-7);
|
|
}
|
|
|
|
.table-data .wrapper-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.table-data .icon { font-size: 12px; }
|
|
|
|
.table-data .icon.red { color: var(--fiery-rose); }
|
|
|
|
.table-data .icon.green { color: var(--ocean-green); }
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#CTA
|
|
\*-----------------------------------*/
|
|
|
|
.cta .btn-primary {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin-inline: auto;
|
|
margin-block-start: 30px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#INSTRUCTION
|
|
\*-----------------------------------*/
|
|
|
|
.instruction .section-text { margin-block-end: 50px; }
|
|
|
|
.instruction-card {
|
|
padding: 30px;
|
|
border-radius: var(--radius-8);
|
|
}
|
|
|
|
.instruction-card .card-icon {
|
|
background-color: var(--smokey-black);
|
|
width: 50px;
|
|
height: 50px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: var(--radius-circle);
|
|
margin-block-end: 15px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#APP
|
|
\*-----------------------------------*/
|
|
|
|
.app-card {
|
|
padding: 25px;
|
|
border-radius: var(--radius-16);
|
|
display: grid;
|
|
gap: 50px;
|
|
}
|
|
|
|
.app-card .section-text { margin-block-end: 25px; }
|
|
|
|
.app-card .btn-primary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border: 2px solid var(--ultramarine-blue);
|
|
--padding-y: 10px;
|
|
}
|
|
|
|
.app-card .btn-primary ion-icon { font-size: 25px; }
|
|
|
|
.app-card :is(.btn-text, .btn-title) { font-family: var(--ff-open-sans); }
|
|
|
|
.app-card .btn-text {
|
|
font-size: var(--fs-9);
|
|
font-weight: var(--fw-400);
|
|
line-height: 1;
|
|
}
|
|
|
|
.app-card .btn-primary:is(:hover, :focus) { background-color: transparent; }
|
|
|
|
.app-card .btn-title { font-weight: var(--fw-600); }
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#FOOTER
|
|
\*-----------------------------------*/
|
|
|
|
.footer {
|
|
text-align: center;
|
|
color: var(--alice-blue);
|
|
}
|
|
|
|
.footer .logo {
|
|
max-width: max-content;
|
|
margin-inline: auto;
|
|
margin-block-end: 30px;
|
|
}
|
|
|
|
.footer-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px 30px;
|
|
margin-block: 54px 50px;
|
|
}
|
|
|
|
.footer-link {
|
|
color: var(--white);
|
|
font-weight: var(--fw-600);
|
|
padding-block-end: 4px;
|
|
border-block-end: 2px solid transparent;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.footer-link:is(:hover, :focus) { border-color: var(--ultramarine-blue); }
|
|
|
|
.social-list-title {
|
|
font-size: var(--fs-3);
|
|
font-weight: var(--fw-700);
|
|
margin-block-end: 24px;
|
|
}
|
|
|
|
.social-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.social-link {
|
|
background-color: var(--eerie-black-1);
|
|
color: var(--white);
|
|
font-size: 18px;
|
|
padding: 16px;
|
|
border-radius: var(--radius-circle);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.social-link:is(:hover, :focus) { background-color: var(--ultramarine-blue); }
|
|
|
|
.footer-bottom {
|
|
border-block-start: 1px solid var(--eerie-black-2);
|
|
padding-block: 16px;
|
|
}
|
|
|
|
.copyright {
|
|
line-height: 1.3;
|
|
margin-block-end: 16px;
|
|
}
|
|
|
|
.footer-bottom-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 575px) {
|
|
.market{
|
|
display: none;
|
|
}
|
|
}
|
|
@media (min-width: 575px) {
|
|
|
|
|
|
.container {
|
|
max-width: 540px;
|
|
width: 100%;
|
|
margin-inline: auto;
|
|
}
|
|
.video{
|
|
width: 510px;
|
|
height: 280px;
|
|
}
|
|
|
|
|
|
/**
|
|
* APP
|
|
*/
|
|
|
|
.app-card .card-banner {
|
|
max-width: max-content;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* responsive for large than 768px screen
|
|
*/
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
/**
|
|
* REUSED STYLE
|
|
*/
|
|
|
|
.video{
|
|
width: 640px;
|
|
height: 360px;
|
|
}
|
|
|
|
.container { max-width: 720px; }
|
|
|
|
.grid-list { grid-template-columns: 1fr 1fr; }
|
|
|
|
/**
|
|
* HEADER
|
|
*/
|
|
|
|
.header .btn-group {
|
|
display: flex;
|
|
margin-inline: auto 30px;
|
|
}
|
|
|
|
.ghost-btn {
|
|
color: var(--alice-blue);
|
|
font-size: var(--fs-6);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.ghost-btn:is(:hover, :focus) { color: var(--ultramarine-blue); }
|
|
|
|
.header .btn-primary { border-radius: var(--radius-5); }
|
|
|
|
|
|
|
|
/**
|
|
* STATS
|
|
*/
|
|
|
|
.stats-list {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 25px;
|
|
}
|
|
|
|
|
|
/**
|
|
* APP
|
|
*/
|
|
|
|
.app-card { padding: 50px; }
|
|
|
|
|
|
|
|
/**
|
|
* FOOTER
|
|
*/
|
|
|
|
.footer-bottom { padding-block: 26px; }
|
|
|
|
.footer-bottom .container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.copyright { margin-block-end: 0; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* responsive for large than 992px screen
|
|
*/
|
|
|
|
@media (min-width: 992px) {
|
|
|
|
/**
|
|
* REUSED STYLE
|
|
*/
|
|
|
|
.container { max-width: 960px; }
|
|
|
|
.grid-list { grid-template-columns: repeat(3, 1fr); }
|
|
|
|
:is(.section-title, .section-text).text-center { margin-inline: auto; }
|
|
|
|
.section-text.text-center { max-width: 60ch; }
|
|
|
|
.section-title.text-center { max-width: 30ch; }
|
|
|
|
.video{
|
|
width: 640px;
|
|
height: 360px;
|
|
}
|
|
|
|
/**
|
|
* HERO
|
|
*/
|
|
|
|
.hero .container {
|
|
grid-template-columns: 0.8fr 1fr;
|
|
align-items: center;
|
|
gap: 25px;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* STATS
|
|
*/
|
|
|
|
.stats .container {
|
|
grid-template-columns: 1fr 1fr;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* INSTRUCTION
|
|
*/
|
|
|
|
.instruction .grid-list { grid-template-columns: repeat(4, 1fr); }
|
|
|
|
|
|
|
|
/**
|
|
* APP
|
|
*/
|
|
|
|
.app-card {
|
|
grid-template-columns: 1fr 1fr;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* FOOTER
|
|
*/
|
|
|
|
.footer-top .container { max-width: 580px;}
|
|
|
|
.footer-list { column-gap: 60px; }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media (min-width: 1200px) {
|
|
|
|
/**
|
|
* REUSED STYLE
|
|
*/
|
|
|
|
.container { max-width: 1140px; }
|
|
|
|
|
|
|
|
/**
|
|
* HEADER
|
|
*/
|
|
|
|
.nav-open-btn,
|
|
.navbar-top { display: none; }
|
|
|
|
.navbar {
|
|
all: unset;
|
|
display: block;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.navbar-list { display: flex; }
|
|
|
|
.navbar-link { font-weight: var(--fw-600); }
|
|
|
|
.header .btn-group { margin-inline: 0; }
|
|
|
|
|
|
|
|
/**
|
|
* APP
|
|
*/
|
|
|
|
.app-card { padding-inline: 80px; }
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar{
|
|
width: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-button{
|
|
display: none;
|
|
}
|
|
|
|
::-webkit-scrollbar-track{
|
|
background-color: #212121;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb{
|
|
background-color: #dfdfdf;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover{
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.video{
|
|
border-radius: 10px;
|
|
border: 5px solid #1a5eff;
|
|
filter: drop-shadow(0 0 0.75rem #1a5eff);
|
|
}
|
|
|
|
.gradienttext{
|
|
background: linear-gradient(90deg, rgba(201,0,255,1) 4%, rgba(119,0,255,1) 32%, rgba(0,212,255,1) 72%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.gradienttext2{
|
|
background-image: -webkit-linear-gradient(180deg, #ff3c00, #ff9500);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-animation: hue 10s infinite linear;
|
|
}
|
|
|
|
|
|
.gradienttext3{
|
|
background: linear-gradient(to right,#00C9FF,#20ff20);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
@-webkit-keyframes hue {
|
|
from {
|
|
-webkit-filter: hue-rotate(0deg);
|
|
}
|
|
to {
|
|
-webkit-filter: hue-rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
#active-count {
|
|
transition: color 0.5s ease;
|
|
}
|
|
|
|
.gradient-border-card {
|
|
position: relative;
|
|
padding: 40px 25px; /* Match the padding */
|
|
border-radius: var(--radius-5); /* Match the border-radius */
|
|
flex: 1 1;
|
|
transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
box-shadow: 0 0 0 1px transparent, 0 2px 4px transparent, 0 12px 24px transparent;
|
|
height: 100%; /* Or set a specific height to match `.promo-card` */
|
|
z-index: 1;
|
|
overflow: hidden; /* Ensure content doesn't overflow */
|
|
}
|
|
|
|
.gradient-border-card .shimmer {
|
|
background: linear-gradient(
|
|
112deg,
|
|
transparent 30%,
|
|
rgba(var(--geist-foreground-rgb), 0.1) 40%,
|
|
rgba(var(--geist-foreground-rgb), 0.3) 50%,
|
|
rgba(var(--geist-foreground-rgb), 0.1) 60%,
|
|
transparent 80%
|
|
);
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 20;
|
|
pointer-events: none;
|
|
border-radius: inherit;
|
|
background-size: 200% auto;
|
|
background-position: 0;
|
|
animation: shimmer 18s cubic-bezier(0.8, 0, 0.05, 1) infinite;
|
|
animation-delay: var(--delay);
|
|
border-radius: var(--radius-5); /* Match the border-radius */
|
|
}
|
|
|
|
/* New styles for circular overlay */
|
|
.gradient-border-card i {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -1px;
|
|
padding: var(--border-size);
|
|
--border-size: 2px;
|
|
--padding: 1px;
|
|
--border-bg: conic-gradient(
|
|
from 180deg at 50% 50%,
|
|
#b700ff 0deg,
|
|
#7700ff 20deg,
|
|
#7700ff 80deg,
|
|
#0077ff 112.5deg,
|
|
#00a2ff 228.75deg,
|
|
rgba(42, 138, 246, 0) 360deg
|
|
);
|
|
overflow: hidden;
|
|
padding: calc(var(--padding) + var(--border-size));
|
|
display: inline-block;
|
|
z-index: 0;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
perspective: 1000;
|
|
transform: translateZ(0);
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
z-index: -1;
|
|
border-radius: calc(var(--radius-5) + var(--border-size)); /* Match the border-radius */
|
|
clip-path: polygon(
|
|
0% 0%,
|
|
100% 0%,
|
|
100% 100%,
|
|
0% 100%
|
|
);
|
|
}
|
|
|
|
.gradient-border-card i:before {
|
|
content: "";
|
|
display: block;
|
|
background: var(--border-bg);
|
|
box-shadow: 0 0 40px 20px var(--border-bg); /* Use the variable */
|
|
width: calc(100% * 1.41421356237);
|
|
padding-bottom: calc(100% * 1.41421356237);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) scale(1.4); /* Center the rotating element and make it larger */
|
|
border-radius: 100%;
|
|
z-index: -2;
|
|
animation: landing_spin__XlUIM 5s linear infinite;
|
|
scale: 1.2;
|
|
}
|
|
|
|
|
|
|
|
@keyframes landing_spin__XlUIM {
|
|
0% {
|
|
transform: translate(-50%, -50%) scale(1.4) rotate(1turn);
|
|
}
|
|
to {
|
|
transform: translate(-50%, -50%) scale(1.4) rotate(0);
|
|
}
|
|
}
|
|
|
|
::selection {
|
|
background: #ffffff;
|
|
color: #000000;
|
|
}
|
|
|
|
.gradienttext2::selection{
|
|
background-color: rgba(255, 255, 255, 0.144);
|
|
} |