499 lines
10 KiB
CSS
499 lines
10 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
/* ── tenext color tokens (extracted from source) ── */
|
|
--tenext-bg-dark: #1f1f1f;
|
|
--tenext-bg-card-dark: #282828;
|
|
--tenext-bg-card-border: #3f3f3f;
|
|
--tenext-accent-teal: #45d0bd;
|
|
--tenext-accent-blue: #44b6e9;
|
|
--tenext-accent-red: #ef6464;
|
|
--tenext-accent-red-hover: #f57e7e;
|
|
--tenext-purple-start: #8258c8;
|
|
--tenext-purple-mid: #6766c8;
|
|
--tenext-purple-end: #2c84c8;
|
|
--tenext-card-purple: #343f78;
|
|
--tenext-card-purple-2: #56619e;
|
|
--tenext-card-lavender: #ac8de0;
|
|
--tenext-text-muted: #87899b;
|
|
--tenext-surface-muted: #ecf0f4;
|
|
|
|
/* button gradient angles */
|
|
--button-border-gradient-angle: 92deg;
|
|
--button-gradient-colorstop-1: 0%;
|
|
--button-gradient-colorstop-2: 100%;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: #ffffff;
|
|
--color-foreground: #1f1f1f;
|
|
--color-tenext-dark: #1f1f1f;
|
|
--color-tenext-card-dark: #282828;
|
|
--color-tenext-card-border: #3f3f3f;
|
|
--color-tenext-teal: #45d0bd;
|
|
--color-tenext-blue: #44b6e9;
|
|
--color-tenext-red: #ef6464;
|
|
--color-tenext-red-hover: #f57e7e;
|
|
--color-tenext-purple-start: #8258c8;
|
|
--color-tenext-purple-mid: #6766c8;
|
|
--color-tenext-purple-end: #2c84c8;
|
|
--color-tenext-card-purple: #343f78;
|
|
--color-tenext-card-purple-2: #56619e;
|
|
--color-tenext-card-lavender: #ac8de0;
|
|
--color-tenext-text-muted: #87899b;
|
|
--color-tenext-surface-muted: #ecf0f4;
|
|
|
|
--font-sans: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
|
|
--font-sora: var(--font-sora), sans-serif;
|
|
--font-dm-sans: var(--font-dm-sans), sans-serif;
|
|
}
|
|
|
|
/* ── Base resets ── */
|
|
* {
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
background: #ffffff;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
background: #ffffff;
|
|
color: #1f1f1f;
|
|
font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
a,
|
|
button {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* ── tenext button base ── */
|
|
.tenext-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-family: var(--font-sora), sans-serif;
|
|
text-decoration: none;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tenext-button .button-inner {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Solid variant */
|
|
.tenext-button-solid {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
/* Gradient border variant */
|
|
.tenext-button-gradient-border {
|
|
background: transparent;
|
|
border: none;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
.tenext-button-gradient-border::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 1.5px;
|
|
background: linear-gradient(
|
|
var(--button-border-gradient-angle),
|
|
var(--tenext-accent-teal) var(--button-gradient-colorstop-1),
|
|
var(--tenext-accent-blue) var(--button-gradient-colorstop-2)
|
|
);
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.tenext-button-gradient-border .button-inner::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
background: transparent;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tenext-button-gradient-border .button-inner::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
background: linear-gradient(
|
|
var(--button-border-gradient-angle),
|
|
var(--tenext-accent-teal) var(--button-gradient-colorstop-1),
|
|
var(--tenext-accent-blue) var(--button-gradient-colorstop-2)
|
|
);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.tenext-button-gradient-border:hover .button-inner::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tenext-button-gradient-border:hover {
|
|
color: #333333;
|
|
}
|
|
|
|
/* Gradient fill variant */
|
|
.tenext-button-gradient-fill {
|
|
background: linear-gradient(
|
|
var(--button-border-gradient-angle),
|
|
var(--tenext-accent-teal) var(--button-gradient-colorstop-1),
|
|
var(--tenext-accent-blue) var(--button-gradient-colorstop-2)
|
|
);
|
|
border: none;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.tenext-button-gradient-fill::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 1.5px;
|
|
background: linear-gradient(
|
|
var(--button-border-gradient-angle),
|
|
var(--tenext-accent-teal) var(--button-gradient-colorstop-1),
|
|
var(--tenext-accent-blue) var(--button-gradient-colorstop-2)
|
|
);
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* ── Gradient text ── */
|
|
.gradient-text-purple {
|
|
background: linear-gradient(103deg, #8258c8 0%, #2c84c8 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.gradient-text-counter {
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* ── Marquee animation ── */
|
|
@keyframes marquee {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.marquee-track {
|
|
animation: marquee 80s linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
.marquee-text {
|
|
display: inline-block;
|
|
font-size: clamp(50px, 8.4vw, 120px);
|
|
font-weight: 400;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ── Counter animation ── */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ── tenext heading animation ── */
|
|
@keyframes headingReveal {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-heading-reveal {
|
|
animation: headingReveal 0.8s ease-out forwards;
|
|
}
|
|
|
|
/* ── Shared reveal and hover motion ── */
|
|
@keyframes premiumRevealDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes premiumRevealUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(18px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes heroBgFloat {
|
|
0%,
|
|
100% {
|
|
transform: translate3d(
|
|
var(--hero-parallax-x, 0),
|
|
var(--hero-parallax-y, 0),
|
|
0
|
|
)
|
|
scale(1.02);
|
|
}
|
|
50% {
|
|
transform: translate3d(
|
|
calc(var(--hero-parallax-x, 0px) + 2px),
|
|
calc(var(--hero-parallax-y, 0px) - 3px),
|
|
0
|
|
)
|
|
scale(1.025);
|
|
}
|
|
}
|
|
|
|
@keyframes scrollFloat {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-4px);
|
|
}
|
|
}
|
|
|
|
@keyframes scrollWidgetEntrance {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.navbar-reveal {
|
|
opacity: 0;
|
|
animation: premiumRevealDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
|
animation-delay: 80ms;
|
|
}
|
|
|
|
.nav-link-swap {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-link-swap > .text-active {
|
|
display: inline-block;
|
|
transition:
|
|
opacity 0.3s ease,
|
|
transform 0.3s ease;
|
|
}
|
|
|
|
.nav-link-swap > span:not(.text-active) {
|
|
position: absolute;
|
|
left: 21px;
|
|
top: 14px;
|
|
opacity: 0;
|
|
transform: translateY(150%);
|
|
transition:
|
|
opacity 0.3s ease,
|
|
transform 0.3s ease;
|
|
}
|
|
|
|
.nav-link-swap:hover > .text-active {
|
|
opacity: 0;
|
|
transform: translateY(-150%);
|
|
}
|
|
|
|
.nav-link-swap:hover > span:not(.text-active) {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.dropdown-reveal {
|
|
opacity: 0;
|
|
transform: translateY(5px);
|
|
animation: premiumRevealUp 0.28s cubic-bezier(0.4, 0.28, 0.31, 1.28) forwards;
|
|
}
|
|
|
|
.hero-bg-motion {
|
|
animation: heroBgFloat 8s ease-in-out infinite;
|
|
transition: transform 0.35s ease-out;
|
|
will-change: transform;
|
|
}
|
|
|
|
.hero-reveal {
|
|
opacity: 0;
|
|
animation: premiumRevealUp 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
|
animation-delay: 580ms;
|
|
}
|
|
|
|
.scroll-widget {
|
|
opacity: 0;
|
|
animation: scrollWidgetEntrance 0.7s ease 1.05s forwards;
|
|
transform: rotate(-90deg) translateX(-50%) translateY(100%);
|
|
transform-origin: left bottom;
|
|
}
|
|
|
|
.scroll-widget .scroll-btn-decoration {
|
|
display: inline-block;
|
|
animation: scrollFloat 3.4s ease-in-out 1.7s infinite;
|
|
}
|
|
|
|
.reveal-on-view {
|
|
opacity: 0;
|
|
transform: translateY(22px);
|
|
transition:
|
|
opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
|
|
transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
|
|
transition-delay: var(--reveal-delay, 0ms);
|
|
}
|
|
|
|
.reveal-on-view.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.tenext-card {
|
|
transition:
|
|
transform 0.32s ease,
|
|
box-shadow 0.32s ease,
|
|
border-color 0.32s ease;
|
|
}
|
|
|
|
.tenext-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow:
|
|
0 22px 55px rgba(31, 31, 31, 0.16),
|
|
0 0 0 1px rgba(69, 208, 189, 0.22);
|
|
}
|
|
|
|
/* ── Scroll down button decoration ── */
|
|
.scroll-btn-decoration {
|
|
position: relative;
|
|
}
|
|
|
|
.scroll-btn-decoration::before,
|
|
.scroll-btn-decoration::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: transparent;
|
|
}
|
|
|
|
.scroll-btn-decoration::before {
|
|
top: -20px;
|
|
left: 0;
|
|
border-bottom-left-radius: 20px;
|
|
box-shadow: 0 20px 0 0 #ffffff;
|
|
}
|
|
|
|
.scroll-btn-decoration::after {
|
|
bottom: -20px;
|
|
left: 0;
|
|
border-top-left-radius: 20px;
|
|
box-shadow: 0 -20px 0 0 #ffffff;
|
|
}
|
|
|
|
/* ── Subheading tag ── */
|
|
.tenext-subheading {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: var(--font-sora), sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: 16px;
|
|
position: relative;
|
|
}
|
|
|
|
.tenext-subheading::before {
|
|
content: "";
|
|
width: 30px;
|
|
height: 1px;
|
|
background: currentColor;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
.navbar-reveal,
|
|
.hero-reveal,
|
|
.scroll-widget,
|
|
.dropdown-reveal,
|
|
.reveal-on-view {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
/* Stop looping / decorative motion entirely */
|
|
.marquee-track,
|
|
.hero-bg-motion,
|
|
.scroll-widget .scroll-btn-decoration {
|
|
animation: none !important;
|
|
}
|
|
|
|
/* Neutralize hover-lift so pointer movement doesn't shift layout */
|
|
.tenext-card:hover {
|
|
transform: none;
|
|
}
|
|
}
|