html {
-webkit-text-size-adjust: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
a {
text-decoration: none;
}
img,
svg,
video,
canvas {
max-width: 100%;
} #menu-panel {
will-change: transform;
}  * {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
}
img,
video,
canvas,
svg {
max-width: 100%;
} :root {
--tft-ease: cubic-bezier(0.22, 1, 0.36, 1);
--tft-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
--tft-body: 'Plus Jakarta Sans', sans-serif;
--tft-display: 'Space Grotesk', sans-serif;
--font-body: 'Plus Jakarta Sans', sans-serif;
--font-display: 'Space Grotesk', sans-serif;
} ::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #0d2620;
}
::-webkit-scrollbar-thumb {
background: rgba(212, 245, 76, 0.2);
border-radius: 20px;
border: 2px solid #0d2620;
}
::-webkit-scrollbar-thumb:hover {
background: #d4f54c;
} * {
scrollbar-width: thin;
scrollbar-color: rgba(212, 245, 76, 0.2) #0d2620;
} .reveal-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 1.2s var(--tft-ease), transform 1.2s var(--tft-ease);
will-change: transform, opacity;
}
.reveal-up.active {
opacity: 1;
transform: translateY(0);
} .bg-brand-bg {
background-color: #0d2620 !important;
}
.text-white {
color: #fff !important;
}
.overflow-hidden {
overflow: hidden !important;
}  *,
::before,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
.\!container {
width: 100% !important
}
.container {
width: 100%
}
@media (min-width:640px) {
.\!container {
max-width: 640px !important
}
.container {
max-width: 640px
}
}
@media (min-width:768px) {
.\!container {
max-width: 768px !important
}
.container {
max-width: 768px
}
}
@media (min-width:1024px) {
.\!container {
max-width: 1024px !important
}
.container {
max-width: 1024px
}
}
@media (min-width:1280px) {
.\!container {
max-width: 1280px !important
}
.container {
max-width: 1280px
}
}
@media (min-width:1536px) {
.\!container {
max-width: 1536px !important
}
.container {
max-width: 1536px
}
}
.pointer-events-none {
pointer-events: none
}
.pointer-events-auto {
pointer-events: auto
}
.invisible {
visibility: hidden
}
.static {
position: static
}
.fixed {
position: fixed
}
.absolute {
position: absolute
}
.relative {
position: relative
}
.sticky {
position: sticky
}
.inset-0 {
inset: 0
}
.inset-\[-5\%\] {
inset: -5%
}
.inset-x-0 {
left: 0;
right: 0
}
.inset-y-0 {
top: 0;
bottom: 0
}
.-bottom-10 {
bottom: -2.5rem
}
.-bottom-4 {
bottom: -1rem
}
.-bottom-6 {
bottom: -1.5rem
}
.-bottom-8 {
bottom: -2rem
}
.-left-10 {
left: -2.5rem
}
.-left-20 {
left: -5rem
}
.-left-6 {
left: -1.5rem
}
.-right-20 {
right: -5rem
}
.-right-4 {
right: -1rem
}
.-right-40 {
right: -10rem
}
.-right-8 {
right: -2rem
}
.-top-8 {
top: -2rem
}
.bottom-0 {
bottom: 0
}
.bottom-12 {
bottom: 3rem
}
.bottom-20 {
bottom: 5rem
}
.bottom-6 {
bottom: 1.5rem
}
.bottom-8 {
bottom: 2rem
}
.bottom-\[-40px\] {
bottom: -40px
}
.bottom-\[52px\] {
bottom: 52px
}
.bottom-\[74px\] {
bottom: 74px
}
.left-0 {
left: 0
}
.left-1\/2 {
left: 50%
}
.left-12 {
left: 3rem
}
.left-4 {
left: 1rem
}
.left-\[-20px\] {
left: -20px
}
.right-0 {
right: 0
}
.right-12 {
right: 3rem
}
.right-20 {
right: 5rem
}
.right-4 {
right: 1rem
}
.right-\[-10px\] {
right: -10px
}
.top-0 {
top: 0
}
.top-1\/2 {
top: 50%
}
.top-20 {
top: 5rem
}
.top-4 {
top: 1rem
}
.top-40 {
top: 10rem
}
.top-8 {
top: 2rem
}
.top-\[-20px\] {
top: -20px
}
.top-\[12vh\] {
top: 12vh
}
.top-\[150px\] {
top: 150px
}
.top-\[16px\] {
top: 16px
}
.top-\[20\%\] {
top: 20%
}
.top-\[60\%\] {
top: 60%
}
.top-\[70px\] {
top: 70px
}
.top-\[8px\] {
top: 8px
}
.isolate {
isolation: isolate
}
.z-0 {
z-index: 0
}
.z-10 {
z-index: 10
}
.z-20 {
z-index: 20
}
.z-30 {
z-index: 30
}
.z-40 {
z-index: 40
}
.z-50 {
z-index: 50
}
.z-\[100\] {
z-index: 100
}
.z-\[110\] {
z-index: 110
}
.z-\[12\] {
z-index: 12
}
.z-\[55\] {
z-index: 55
}
.z-\[60\] {
z-index: 60
}
.order-1 {
order: 1
}
.order-2 {
order: 2
}
.col-span-12 {
grid-column: span 12/span 12
}
.row-span-2 {
grid-row: span 2/span 2
}
.mx-16 {
margin-left: 4rem;
margin-right: 4rem
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem
}
.-ml-8 {
margin-left: -2rem
}
.-mr-12 {
margin-right: -3rem
}
.-mr-40 {
margin-right: -10rem
}
.-mt-12 {
margin-top: -3rem
}
.-mt-40 {
margin-top: -10rem
}
.mb-0 {
margin-bottom: 0
}
.mb-1 {
margin-bottom: .25rem
}
.mb-10 {
margin-bottom: 2.5rem
}
.mb-12 {
margin-bottom: 3rem
}
.mb-16 {
margin-bottom: 4rem
}
.mb-2 {
margin-bottom: .5rem
}
.mb-20 {
margin-bottom: 5rem
}
.mb-24 {
margin-bottom: 6rem
}
.mb-3 {
margin-bottom: .75rem
}
.mb-32 {
margin-bottom: 8rem
}
.mb-4 {
margin-bottom: 1rem
}
.mb-40 {
margin-bottom: 10rem
}
.mb-5 {
margin-bottom: 1.25rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.ml-2 {
margin-left: .5rem
}
.ml-32 {
margin-left: 8rem
}
.ml-6 {
margin-left: 1.5rem
}
.ml-auto {
margin-left: auto
}
.mr-2 {
margin-right: .5rem
}
.mr-3 {
margin-right: .75rem
}
.mt-10 {
margin-top: 2.5rem
}
.mt-12 {
margin-top: 3rem
}
.mt-16 {
margin-top: 4rem
}
.mt-2 {
margin-top: .5rem
}
.mt-20 {
margin-top: 5rem
}
.mt-4 {
margin-top: 1rem
}
.mt-40 {
margin-top: 10rem
}
.mt-6 {
margin-top: 1.5rem
}
.mt-8 {
margin-top: 2rem
}
.mt-auto {
margin-top: auto
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.block {
display: block
}
.inline-block {
display: inline-block
}
.inline {
display: inline
}
.flex {
display: flex
}
.inline-flex {
display: inline-flex
}
.grid {
display: grid
}
.hidden {
display: none
}
.aspect-\[1\.8\/1\] {
aspect-ratio: 1.8/1
}
.aspect-\[3\/4\] {
aspect-ratio: 3/4
}
.aspect-\[4\/5\] {
aspect-ratio: 4/5
}
.aspect-square {
aspect-ratio: 1/1
}
.aspect-video {
aspect-ratio: 16/9
}
.h-1 {
height: .25rem
}
.h-1\.5 {
height: .375rem
}
.h-1\/2 {
height: 50%
}
.h-10 {
height: 2.5rem
}
.h-11 {
height: 2.75rem
}
.h-12 {
height: 3rem
}
.h-14 {
height: 3.5rem
}
.h-16 {
height: 4rem
}
.h-2 {
height: .5rem
}
.h-20 {
height: 5rem
}
.h-24 {
height: 6rem
}
.h-28 {
height: 7rem
}
.h-3 {
height: .75rem
}
.h-32 {
height: 8rem
}
.h-4 {
height: 1rem
}
.h-48 {
height: 12rem
}
.h-5 {
height: 1.25rem
}
.h-6 {
height: 1.5rem
}
.h-7 {
height: 1.8rem
}
.h-64 {
height: 16rem
}
.h-8 {
height: 2rem
}
.h-999 {
height: 2.8rem
}
.h-96 {
height: 24rem
}
.h-\[100dvh\] {
height: 100dvh
}
.h-\[140px\] {
height: 140px
}
.h-\[18px\] {
height: 18px
}
.h-\[1px\] {
height: 1px
}
.h-\[2px\] {
height: 2px
}
.h-\[300px\] {
height: 300px
}
.h-\[34px\] {
height: 34px
}
.h-\[360px\] {
height: 360px
}
.h-\[40\%\] {
height: 40%
}
.h-\[50\%\] {
height: 50%
}
.h-\[50px\] {
height: 50px
}
.h-\[58px\] {
height: 58px
}
.h-\[600px\] {
height: 600px
}
.h-\[60px\] {
height: 60px
}
.h-\[60vh\] {
height: 60vh
}
.h-\[70px\] {
height: 70px
}
.h-\[70vh\] {
height: 70vh
}
.h-\[90vh\] {
height: 90vh
}
.h-\[calc\(100dvh-70px\)\] {
height: calc(100dvh - 70px)
}
.h-auto {
height: auto
}
.h-fit {
height: -moz-fit-content;
height: fit-content
}
.h-full {
height: 100%
}
.h-px {
height: 1px
}
.h-screen {
height: 100vh
}
.max-h-0 {
max-height: 0
}
.min-h-\[33\.33\%\] {
min-height: 33.33%
}
.min-h-\[800px\] {
min-height: 800px
}
.min-h-screen {
min-height: 100vh
}
.w-0 {
width: 0
}
.w-1 {
width: .25rem
}
.w-1\.5 {
width: .375rem
}
.w-1\/4 {
width: 25%
}
.w-10 {
width: 2.5rem
}
.w-12 {
width: 3rem
}
.w-14 {
width: 3.5rem
}
.w-16 {
width: 4rem
}
.w-2 {
width: .5rem
}
.w-20 {
width: 5rem
}
.w-24 {
width: 6rem
}
.w-28 {
width: 7rem
}
.w-3 {
width: .75rem
}
.w-32 {
width: 8rem
}
.w-4 {
width: 1rem
}
.w-48 {
width: 12rem
}
.w-5 {
width: 1.25rem
}
.w-6 {
width: 1.5rem
}
.w-64 {
width: 16rem
}
.w-72 {
width: 18rem
}
.w-8 {
width: 2rem
}
.w-96 {
width: 24rem
}
.w-\[100px\] {
width: 100px
}
.w-\[140px\] {
width: 140px
}
.w-\[150\%\] {
width: 150%
}
.w-\[150px\] {
width: 150px
}
.w-\[1px\] {
width: 1px
}
.w-\[20px\] {
width: 20px
}
.w-\[260px\] {
width: 260px
}
.w-\[28px\] {
width: 28px
}
.w-\[300px\] {
width: 300px
}
.w-\[40px\] {
width: 40px
}
.w-\[50px\] {
width: 50px
}
.w-\[58px\] {
width: 58px
}
.w-\[600px\] {
width: 600px
}
.w-\[60px\] {
width: 60px
}
.w-\[70\%\] {
width: 70%
}
.w-\[70px\] {
width: 70px
}
.w-full {
width: 100%
}
.w-px {
width: 1px
}
.w-screen {
width: 100vw
}
.max-w-2xl {
max-width: 42rem
}
.max-w-3xl {
max-width: 48rem
}
.max-w-4xl {
max-width: 56rem
}
.max-w-5xl {
max-width: 64rem
}
.max-w-6xl {
max-width: 72rem
}
.max-w-\[1200px\] {
max-width: 1200px
}
.max-w-\[1240px\] {
max-width: 1240px
}
.max-w-\[1320px\] {
max-width: 1320px
}
.max-w-\[1400px\] {
max-width: 1400px
}
.max-w-\[1500px\] {
max-width: 1500px
}
.max-w-\[200px\] {
max-width: 200px
}
.max-w-\[500px\] {
max-width: 500px
}
.max-w-md {
max-width: 28rem
}
.max-w-sm {
max-width: 24rem
}
.max-w-xl {
max-width: 36rem
}
.max-w-xxl {
max-width: 90%
}
.max-w-xs {
max-width: 20rem
}
.flex-1 {
flex: 1 1 0%
}
.flex-shrink {
flex-shrink: 1
}
.shrink-0 {
flex-shrink: 0
}
.origin-center {
transform-origin: center
}
.-translate-x-1\/2 {
--tw-translate-x: -50%
}
.-translate-x-1\/2,
.-translate-x-4 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-x-4 {
--tw-translate-x: -1rem
}
.-translate-x-full {
--tw-translate-x: -100%
}
.-translate-x-full,
.-translate-y-1\/2 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-y-1\/2 {
--tw-translate-y: -50%
}
.translate-x-1\/4 {
--tw-translate-x: 25%
}
.translate-x-1\/4,
.translate-y-4 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-4 {
--tw-translate-y: 1rem
}
.translate-y-\[-20px\] {
--tw-translate-y: -20px
}
.-rotate-2,
.translate-y-\[-20px\] {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-rotate-2 {
--tw-rotate: -2deg
}
.-rotate-90 {
--tw-rotate: -90deg
}
.-rotate-90,
.rotate-12 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-12 {
--tw-rotate: 12deg
}
.rotate-3 {
--tw-rotate: 3deg
}
.rotate-3,
.rotate-6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-6 {
--tw-rotate: 6deg
}
.scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1
}
.scale-100,
.scale-105 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-105 {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05
}
.scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1
}
.scale-110,
.scale-50 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-50 {
--tw-scale-x: .5;
--tw-scale-y: .5
}
.scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95
}
.scale-95,
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@keyframes bounce {
0%,
to {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(.8, 0, 1, 1)
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, .2, 1)
}
}
.animate-bounce {
animation: bounce 1s infinite
}
@keyframes ping {
75%,
to {
transform: scale(2);
opacity: 0
}
}
.animate-ping {
animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite
}
@keyframes pulse {
50% {
opacity: .5
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}
.cursor-pointer {
cursor: pointer
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.resize-none {
resize: none
}
.resize {
resize: both
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.flex-col {
flex-direction: column
}
.flex-wrap {
flex-wrap: wrap
}
.items-start {
align-items: flex-start
}
.items-end {
align-items: flex-end
}
.items-center {
align-items: center
}
.items-stretch {
align-items: stretch
}
.justify-end {
justify-content: flex-end
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.gap-0 {
gap: 0
}
.gap-1 {
gap: .25rem
}
.gap-10 {
gap: 2.5rem
}
.gap-12 {
gap: 3rem
}
.gap-16 {
gap: 4rem
}
.gap-2 {
gap: .5rem
}
.gap-20 {
gap: 5rem
}
.gap-24 {
gap: 6rem
}
.gap-3 {
gap: .75rem
}
.gap-32 {
gap: 8rem
}
.gap-4 {
gap: 1rem
}
.gap-6 {
gap: 1.5rem
}
.gap-8 {
gap: 2rem
}
.gap-x-20 {
-moz-column-gap: 5rem;
column-gap: 5rem
}
.gap-y-10 {
row-gap: 2.5rem
}
.space-y-0>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px*(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px*var(--tw-space-y-reverse))
}
.space-y-32>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(8rem*(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(8rem*var(--tw-space-y-reverse))
}
.space-y-4>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem*var(--tw-space-y-reverse))
}
.space-y-6>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem*(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem*var(--tw-space-y-reverse))
}
.self-start {
align-self: flex-start
}
.overflow-hidden {
overflow: hidden
}
.overflow-x-auto {
overflow-x: auto
}
.overflow-y-auto {
overflow-y: auto
}
.overflow-x-hidden {
overflow-x: hidden
}
.whitespace-nowrap {
white-space: nowrap
}
.rounded {
border-radius: .25rem
}
.rounded-\[2\.5rem\] {
border-radius: 2.5rem
}
.rounded-\[2px\] {
border-radius: 2px
}
.rounded-\[2rem\] {
border-radius: 2rem
}
.rounded-\[4px\] {
border-radius: 4px
}
.rounded-full {
border-radius: 9999px
}
.rounded-sm {
border-radius: .125rem
}
.rounded-bl-\[40px\] {
border-bottom-left-radius: 40px
}
.rounded-tr-3xl {
border-top-right-radius: 1.5rem
}
.border {
border-width: 1px
}
.border-2 {
border-width: 2px
}
.border-4 {
border-width: 4px
}
.border-x {
border-left-width: 1px;
border-right-width: 1px
}
.border-y {
border-top-width: 1px
}
.border-b,
.border-y {
border-bottom-width: 1px
}
.border-l {
border-left-width: 1px
}
.border-l-2 {
border-left-width: 2px
}
.border-r {
border-right-width: 1px
}
.border-t {
border-top-width: 1px
}
.border-black\/10 {
border-color: rgba(0, 0, 0, .1)
}
.border-black\/5 {
border-color: rgba(0, 0, 0, .05)
}
.border-brand-lime {
--tw-border-opacity: 1;
border-color: rgb(212 245 76/var(--tw-border-opacity, 1))
}
.border-brand-lime\/20 {
border-color: rgba(212, 245, 76, .2)
}
.border-brand-lime\/30 {
border-color: rgba(212, 245, 76, .3)
}
.border-brand-lime\/40 {
border-color: rgba(212, 245, 76, .4)
}
.border-brand-sidebar {
--tw-border-opacity: 1;
border-color: rgb(9 64 48/var(--tw-border-opacity, 1))
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235/var(--tw-border-opacity, 1))
}
.border-gray-400 {
--tw-border-opacity: 1;
border-color: rgb(156 163 175/var(--tw-border-opacity, 1))
}
.border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255/var(--tw-border-opacity, 1))
}
.border-white\/10 {
border-color: hsla(0, 0%, 100%, .1)
}
.border-white\/20 {
border-color: hsla(0, 0%, 100%, .2)
}
.border-white\/5 {
border-color: hsla(0, 0%, 100%, .05)
}
.bg-\[\#161f1d\] {
--tw-bg-opacity: 1;
background-color: rgb(22 31 29/var(--tw-bg-opacity, 1))
}
.bg-\[\#f8f9fa\] {
--tw-bg-opacity: 1;
background-color: rgb(248 249 250/var(--tw-bg-opacity, 1))
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0/var(--tw-bg-opacity, 1))
}
.bg-black\/10 {
background-color: rgba(0, 0, 0, .1)
}
.bg-black\/20 {
background-color: rgba(0, 0, 0, .2)
}
.bg-black\/40 {
background-color: rgba(0, 0, 0, .4)
}
.bg-black\/5 {
background-color: rgba(0, 0, 0, .05)
}
.bg-brand-bg {
--tw-bg-opacity: 1;
background-color: rgb(13 38 32/var(--tw-bg-opacity, 1))
}
.bg-brand-bg\/40 {
background-color: rgba(13, 38, 32, .4)
}
.bg-brand-bg\/60 {
background-color: rgba(13, 38, 32, .6)
}
.bg-brand-bg\/70 {
background-color: rgba(13, 38, 32, .7)
}
.bg-brand-dark {
--tw-bg-opacity: 1;
background-color: rgb(22 31 29/var(--tw-bg-opacity, 1))
}
.bg-brand-dark\/50 {
background-color: rgba(22, 31, 29, .5)
}
.bg-brand-lime {
--tw-bg-opacity: 1;
background-color: rgb(212 245 76/var(--tw-bg-opacity, 1))
}
.bg-brand-lime\/10 {
background-color: rgba(212, 245, 76, .1)
}
.bg-brand-lime\/5 {
background-color: rgba(212, 245, 76, .05)
}
.bg-brand-menu {
--tw-bg-opacity: 1;
background-color: rgb(10 61 46/var(--tw-bg-opacity, 1))
}
.bg-brand-sidebar {
--tw-bg-opacity: 1;
background-color: rgb(9 64 48/var(--tw-bg-opacity, 1))
}
.bg-brand-sidebar\/10 {
background-color: rgba(9, 64, 48, .1)
}
.bg-brand-sidebar\/20 {
background-color: rgba(9, 64, 48, .2)
}
.bg-brand-sidebar\/5 {
background-color: rgba(9, 64, 48, .05)
}
.bg-brand-sidebar\/90 {
background-color: rgba(9, 64, 48, .9)
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246/var(--tw-bg-opacity, 1))
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251/var(--tw-bg-opacity, 1))
}
.bg-transparent {
background-color: transparent
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}
.bg-white\/10 {
background-color: hsla(0, 0%, 100%, .1)
}
.bg-white\/20 {
background-color: hsla(0, 0%, 100%, .2)
}
.bg-white\/5 {
background-color: hsla(0, 0%, 100%, .05)
}
.bg-white\/50 {
background-color: hsla(0, 0%, 100%, .5)
}
.bg-white\/60 {
background-color: hsla(0, 0%, 100%, .6)
}
.bg-\[radial-gradient\(circle_at_center\2c rgba\(212\2c 245\2c 76\2c 0\.04\)_0\%\2c transparent_70\%\)\] {
background-image: radial-gradient(circle at center, rgba(212, 245, 76, .04) 0, transparent 70%)
}
.bg-\[radial-gradient\(circle_at_center\2c rgba\(212\2c 245\2c 76\2c 0\.1\)_0\%\2c transparent_70\%\)\] {
background-image: radial-gradient(circle at center, rgba(212, 245, 76, .1) 0, transparent 70%)
}
.bg-\[radial-gradient\(circle_at_center\2c transparent_0\%\2c rgba\(0\2c 0\2c 0\2c 0\.4\)_100\%\)\] {
background-image: radial-gradient(circle at center, transparent 0, rgba(0, 0, 0, .4) 100%)
}
.bg-\[url\(\'assets\/img\/about_hero\.png\'\)\] {
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/about_hero.png)
}
.bg-\[url\(\'assets\/img\/services_hero_bg_1774118938321\.png\'\)\] {
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/cover-1.png)
}
.bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops))
}
.bg-gradient-to-t {
background-image: linear-gradient(to top, var(--tw-gradient-stops))
}
.from-black\/60 {
--tw-gradient-from: rgba(0, 0, 0, .6) var(--tw-gradient-from-position);
--tw-gradient-to: transparent var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-brand-bg {
/ /
--tw-gradient-to: rgba(13, 38, 32, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-brand-bg\/20 {
--tw-gradient-from: rgba(13, 38, 32, .2) var(--tw-gradient-from-position);
--tw-gradient-to: rgba(13, 38, 32, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-brand-bg\/95 {
--tw-gradient-from: rgba(13, 38, 32, .95) var(--tw-gradient-from-position);
--tw-gradient-to: rgba(13, 38, 32, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-brand-lime {
--tw-gradient-from: #d4f54c var(--tw-gradient-from-position);
--tw-gradient-to: rgba(212, 245, 76, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.via-brand-bg\/10 {
--tw-gradient-to: rgba(13, 38, 32, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgba(13, 38, 32, .1) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-brand-bg\/20 {
--tw-gradient-to: rgba(13, 38, 32, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgba(13, 38, 32, .2) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-brand-bg\/40 {
--tw-gradient-to: rgba(13, 38, 32, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgba(13, 38, 32, .4) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-brand-bg\/60 {
--tw-gradient-to: rgba(13, 38, 32, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgba(13, 38, 32, .6) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-transparent {
--tw-gradient-to: transparent var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.to-black\/60 {
--tw-gradient-to: rgba(0, 0, 0, .6) var(--tw-gradient-to-position)
}
.to-black\/80 {
--tw-gradient-to: rgba(0, 0, 0, .8) var(--tw-gradient-to-position)
}
.to-brand-bg {
--tw-gradient-to: #0d2620 var(--tw-gradient-to-position)
}
.to-transparent {
--tw-gradient-to: transparent var(--tw-gradient-to-position)
}
.bg-cover {
background-size: cover
}
.bg-center {
background-position: 50%
}
.stroke-\[1\] {
stroke-width: 1
}
.object-cover {
-o-object-fit: cover;
object-fit: cover
}
.p-10 {
padding: 2.5rem
}
.p-12 {
padding: 3rem
}
.p-2 {
padding: .5rem
}
.p-4 {
padding: 1rem
}
.p-6 {
padding: 1.5rem
}
.p-8 {
padding: 2rem
}
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem
}
.px-12 {
padding-left: 3rem;
padding-right: 3rem
}
.px-16 {
padding-left: 4rem;
padding-right: 4rem
}
.px-2 {
padding-left: .5rem;
padding-right: .5rem
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.px-\[25vw\] {
padding-left: 25vw;
padding-right: 25vw
}
.px-\[8\%\] {
padding-left: 8%;
padding-right: 8%
}
.py-0\.5 {
padding-top: .125rem;
padding-bottom: .125rem
}
.py-1 {
padding-top: .25rem;
padding-bottom: .25rem
}
.py-1\.5 {
padding-top: .375rem;
padding-bottom: .375rem
}
.py-2 {
padding-top: .5rem;
padding-bottom: .5rem
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem
}
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem
}
.py-3 {
padding-top: .75rem;
padding-bottom: .75rem
}
.py-32 {
padding-top: 8rem;
padding-bottom: 8rem
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.py-40 {
padding-top: 10rem;
padding-bottom: 10rem
}
.py-48 {
padding-top: 12rem;
padding-bottom: 12rem
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem
}
.py-56 {
padding-top: 14rem;
padding-bottom: 14rem
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem
}
.py-60 {
padding-top: 15rem;
padding-bottom: 15rem
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem
}
.pb-20 {
padding-bottom: 5rem
}
.pb-24 {
padding-bottom: 6rem
}
.pb-32 {
padding-bottom: 8rem
}
.pb-4 {
padding-bottom: 1rem
}
.pb-6 {
padding-bottom: 1.5rem
}
.pb-64 {
padding-bottom: 16rem
}
.pb-8 {
padding-bottom: 2rem
}
.pl-10 {
padding-left: 2.5rem
}
.pl-4 {
padding-left: 1rem
}
.pl-5 {
padding-left: 1.25rem
}
.pl-6 {
padding-left: 1.5rem
}
.pr-12 {
padding-right: 3rem
}
.pr-8 {
padding-right: 2rem
}
.pt-12 {
padding-top: 3rem
}
.pt-16 {
padding-top: 4rem
}
.pt-2 {
padding-top: .5rem
}
.pt-20 {
padding-top: 5rem
}
.pt-32 {
padding-top: 8rem
}
.pt-40 {
padding-top: 10rem
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-right {
text-align: right
}
.align-middle {
vertical-align: middle
}
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
}
.font-body {
font-family: Plus Jakarta Sans, sans-serif
}
.font-display {
font-family: Space Grotesk, serif
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.text-5xl {
font-size: 3rem;
line-height: 1
}
.text-6xl {
font-size: 3rem;
line-height: 1
}
.text-7xl {
font-size: 4.5rem;
line-height: 1
}
.text-8xl {
font-size: 5rem;
line-height: 1
}
.text-\[100px\] {
font-size: 100px
}
.text-\[10px\] {
font-size: 10px
}
.text-\[110px\] {
font-size: 110px
}
.text-\[11px\] {
font-size: 11px
}
.text-\[12vw\] {
font-size: 12vw
}
.text-\[15px\] {
font-size: 15px
}
.text-\[15vw\] {
font-size: 15vw
}
.text-\[18px\] {
font-size: 18px
}
.text-\[24px\] {
font-size: 24px
}
.text-\[300px\] {
font-size: 300px
}
.text-\[45px\] {
font-size: 45px
}
.text-\[8px\] {
font-size: 8px
}
.text-\[9px\] {
font-size: 9px
}
.text-\[clamp\(70px\2c 13vw\2c 200px\)\] {
font-size: clamp(70px, 13vw, 200px)
}
.text-base {
font-size: 1rem;
line-height: 1.5rem
}
.text-lg {
font-size: 1rem;
line-height: 1.75rem
}
.text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.text-xs {
font-size: .75rem;
line-height: 1rem
}
.font-black {
font-weight: 900
}
.font-bold {
font-weight: 700
}
.font-light {
font-weight: 300
}
.font-medium {
font-weight: 500
}
.font-semibold {
font-weight: 600
}
.uppercase {
text-transform: uppercase
}
.lowercase {
text-transform: lowercase
}
.italic {
font-style: italic
}
.not-italic {
font-style: normal
}
.leading-\[0\.75\] {
line-height: .75
}
.leading-\[0\.85\] {
line-height: .85
}
.leading-\[0\.8\] {
line-height: .8
}
.leading-\[0\.95\] {
line-height: .95
}
.leading-\[0\.9\] {
line-height: .9
}
.leading-\[1\.15\] {
line-height: 1.15
}
.leading-none {
line-height: 1
}
.leading-relaxed {
line-height: 1.625
}
.leading-tight {
line-height: 1.25;
font-size: 37px;
}
.tracking-\[0\.15em\] {
letter-spacing: .15em
}
.tracking-\[0\.1em\] {
letter-spacing: .1em
}
.tracking-\[0\.2em\] {
letter-spacing: .2em
}
.tracking-\[0\.3em\] {
letter-spacing: .3em
}
.tracking-\[0\.45em\] {
letter-spacing: .45em
}
.tracking-\[0\.4em\] {
letter-spacing: .4em
}
.tracking-\[0\.5em\] {
letter-spacing: .5em
}
.tracking-\[0\.6em\] {
letter-spacing: .6em
}
.tracking-\[0\.8em\] {
letter-spacing: .8em
}
.tracking-tight {
letter-spacing: -.025em
}
.tracking-tighter {
letter-spacing: -.05em
}
.tracking-wide {
letter-spacing: .025em
}
.tracking-wider {
letter-spacing: .05em
}
.tracking-widest {
letter-spacing: .1em
}
.text-black\/20 {
color: rgba(0, 0, 0, .2)
}
.text-black\/30 {
color: rgba(0, 0, 0, .3)
}
.text-black\/35 {
color: rgba(0, 0, 0, .35)
}
.text-black\/40 {
color: rgba(0, 0, 0, .4)
}
.text-black\/45 {
color: rgba(0, 0, 0, .45)
}
.text-black\/50 {
color: rgba(0, 0, 0, .5)
}
.text-brand-bg {
--tw-text-opacity: 1;
color: rgb(13 38 32/var(--tw-text-opacity, 1))
}
.text-brand-lime {
--tw-text-opacity: 1;
color: rgb(212 245 76/var(--tw-text-opacity, 1))
}
.text-brand-sidebar {
--tw-text-opacity: 1;
color: rgb(9 64 48/var(--tw-text-opacity, 1))
}
.text-brand-sidebar\/30 {
color: rgba(9, 64, 48, .3)
}
.text-brand-sidebar\/40 {
color: rgba(9, 64, 48, .4)
}
.text-brand-sidebar\/60 {
color: rgba(9, 64, 48, .6)
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175/var(--tw-text-opacity, 1))
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255/var(--tw-text-opacity, 1))
}
.text-white\/20 {
color: hsla(0, 0%, 100%, .2)
}
.text-white\/30 {
color: hsla(0, 0%, 100%, .3)
}
.text-white\/40 {
color: hsla(0, 0%, 100%, .4)
}
.text-white\/5 {
color: hsla(0, 0%, 100%, .05)
}
.text-white\/50 {
color: hsla(0, 0%, 100%, .5)
}
.text-white\/60 {
color: hsla(0, 0%, 100%, .6)
}
.text-white\/70 {
color: hsla(0, 0%, 100%, .7)
}
.text-white\/80 {
color: hsla(0, 0%, 100%, .8)
}
.text-white\/90 {
color: hsla(0, 0%, 100%, .9)
}
.text-white\/95 {
color: hsla(0, 0%, 100%, .95)
}
.underline {
text-decoration-line: underline
}
.decoration-brand-lime\/0 {
text-decoration-color: rgba(212, 245, 76, 0)
}
.decoration-brand-lime\/30 {
text-decoration-color: rgba(212, 245, 76, .3)
}
.decoration-white\/10 {
text-decoration-color: hsla(0, 0%, 100%, .1)
}
.decoration-white\/5 {
text-decoration-color: hsla(0, 0%, 100%, .05)
}
.decoration-\[2px\] {
text-decoration-thickness: 2px
}
.underline-offset-8 {
text-underline-offset: 8px
}
.underline-offset-\[10px\] {
text-underline-offset: 10px
}
.underline-offset-\[20px\] {
text-underline-offset: 20px
}
.underline-offset-\[30px\] {
text-underline-offset: 30px
}
.opacity-0 {
opacity: 0
}
.opacity-10 {
opacity: .1
}
.opacity-100 {
opacity: 1
}
.opacity-20 {
opacity: .2
}
.opacity-30 {
opacity: .3
}
.opacity-40 {
opacity: .4
}
.opacity-5 {
opacity: .05
}
.opacity-50 {
opacity: .5
}
.opacity-60 {
opacity: .6
}
.opacity-70 {
opacity: .7
}
.opacity-80 {
opacity: .8
}
.opacity-\[0\.02\] {
opacity: .02
}
.opacity-\[0\.03\] {
opacity: .03
}
.opacity-\[0\.05\] {
opacity: .05
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color)
}
.shadow,
.shadow-2xl {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color)
}
.shadow-\[0_0_10px_rgba\(212\2c 245\2c 76\2c 0\.5\)\] {
--tw-shadow: 0 0 10px rgba(212, 245, 76, .5);
--tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_0_15px_rgba\(212\2c 245\2c 76\2c 0\.6\)\] {
--tw-shadow: 0 0 15px rgba(212, 245, 76, .6);
--tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_15px_30px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
--tw-shadow: 0 15px 30px rgba(0, 0, 0, .5);
--tw-shadow-colored: 0 15px 30px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_20px_50px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
--tw-shadow: 0 20px 50px rgba(0, 0, 0, .5);
--tw-shadow-colored: 0 20px 50px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[10px_0_30px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
--tw-shadow: 10px 0 30px rgba(0, 0, 0, .2);
--tw-shadow-colored: 10px 0 30px var(--tw-shadow-color)
}
.shadow-\[10px_0_30px_rgba\(0\2c 0\2c 0\2c 0\.2\)\],
.shadow-lg {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)
}
.shadow-md,
.shadow-sm {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color)
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px
}
.outline {
outline-style: solid
}
.ring-\[1\.5px\] {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1.5px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.ring-brand-sidebar {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(9 64 48/var(--tw-ring-opacity, 1))
}
.ring-offset-\[1\.5px\] {
--tw-ring-offset-width: 1.5px
}
.blur {
--tw-blur: blur(8px)
}
.blur,
.blur-3xl {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.blur-3xl {
--tw-blur: blur(64px)
}
.blur-\[100px\] {
--tw-blur: blur(100px)
}
.blur-\[100px\],
.blur-\[150px\] {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.blur-\[150px\] {
--tw-blur: blur(150px)
}
.brightness-50 {
--tw-brightness: brightness(.5)
}
.brightness-50,
.drop-shadow-2xl {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.drop-shadow-2xl {
--tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, .15))
}
.drop-shadow-\[0_20px_50px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
--tw-drop-shadow: drop-shadow(0 20px 50px rgba(0, 0, 0, .5))
}
.drop-shadow-\[0_20px_50px_rgba\(0\2c 0\2c 0\2c 0\.5\)\],
.drop-shadow-lg {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, .04)) drop-shadow(0 4px 3px rgba(0, 0, 0, .1))
}
.grayscale {
--tw-grayscale: grayscale(100%)
}
.filter,
.grayscale {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.backdrop-blur-md {
--tw-backdrop-blur: blur(12px)
}
.backdrop-blur-md,
.backdrop-blur-sm {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(4px)
}
.backdrop-blur-xl {
--tw-backdrop-blur: blur(24px)
}
.backdrop-blur-xl,
.backdrop-filter {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.duration-100 {
transition-duration: .1s
}
.duration-1000 {
transition-duration: 1s
}
.duration-300 {
transition-duration: .3s
}
.duration-500 {
transition-duration: .5s
}
.duration-700 {
transition-duration: .7s
}
.duration-\[2s\] {
transition-duration: 2s
}
.ease-\[cubic-bezier\(0\.77\2c 0\2c 0\.175\2c 1\)\] {
transition-timing-function: cubic-bezier(.77, 0, .175, 1)
}
.ease-in-out {
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, .2, 1)
}
.selection\:bg-brand-lime ::-moz-selection {
--tw-bg-opacity: 1;
background-color: rgb(212 245 76/var(--tw-bg-opacity, 1))
}
.selection\:bg-brand-lime ::selection {
--tw-bg-opacity: 1;
background-color: rgb(212 245 76/var(--tw-bg-opacity, 1))
}
.selection\:text-brand-sidebar ::-moz-selection {
--tw-text-opacity: 1;
color: rgb(9 64 48/var(--tw-text-opacity, 1))
}
.selection\:text-brand-sidebar ::selection {
--tw-text-opacity: 1;
color: rgb(9 64 48/var(--tw-text-opacity, 1))
}
.selection\:bg-brand-lime::-moz-selection {
--tw-bg-opacity: 1;
background-color: rgb(212 245 76/var(--tw-bg-opacity, 1))
}
.selection\:bg-brand-lime::selection {
--tw-bg-opacity: 1;
background-color: rgb(212 245 76/var(--tw-bg-opacity, 1))
}
.selection\:text-brand-sidebar::-moz-selection {
--tw-text-opacity: 1;
color: rgb(9 64 48/var(--tw-text-opacity, 1))
}
.selection\:text-brand-sidebar::selection {
--tw-text-opacity: 1;
color: rgb(9 64 48/var(--tw-text-opacity, 1))
}
.after\:absolute:after {
content: var(--tw-content);
position: absolute
}
.after\:bottom-0:after {
content: var(--tw-content);
bottom: 0
}
.after\:left-4:after {
content: var(--tw-content);
left: 1rem
}
.after\:right-4:after {
content: var(--tw-content);
right: 1rem
}
.after\:h-px:after {
content: var(--tw-content);
height: 1px
}
.after\:bg-gray-100:after {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(243 244 246/var(--tw-bg-opacity, 1))
}
.hover\:-translate-y-1:hover {
--tw-translate-y: -0.25rem
}
.hover\:-translate-y-1:hover,
.hover\:rotate-0:hover {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:rotate-0:hover {
--tw-rotate: 0deg
}
.hover\:scale-100:hover {
--tw-scale-x: 1;
--tw-scale-y: 1
}
.hover\:scale-100:hover,
.hover\:scale-105:hover {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05
}
.hover\:scale-110:hover {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:border-brand-lime:hover {
--tw-border-opacity: 1;
border-color: rgb(212 245 76/var(--tw-border-opacity, 1))
}
.hover\:border-brand-lime\/20:hover {
border-color: rgba(212, 245, 76, .2)
}
.hover\:border-brand-sidebar:hover {
--tw-border-opacity: 1;
border-color: rgb(9 64 48/var(--tw-border-opacity, 1))
}
.hover\:bg-\[\#f0f2f1\]:hover {
--tw-bg-opacity: 1;
background-color: rgb(240 242 241/var(--tw-bg-opacity, 1))
}
.hover\:bg-brand-lime:hover {
--tw-bg-opacity: 1;
background-color: #fff;
}
.hover\:bg-brand-sidebar:hover {
--tw-bg-opacity: 1;
background-color: rgb(9 64 48/var(--tw-bg-opacity, 1))
}
.hover\:bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}
.hover\:bg-white\/5:hover {
background-color: hsla(0, 0%, 100%, .05)
}
.hover\:text-brand-bg:hover {
--tw-text-opacity: 1;
color: rgb(13 38 32/var(--tw-text-opacity, 1))
}
.hover\:text-brand-lime:hover {
--tw-text-opacity: 1;
color: rgb(212 245 76/var(--tw-text-opacity, 1))
}
.hover\:text-brand-sidebar:hover {
--tw-text-opacity: 1;
color: rgb(9 64 48/var(--tw-text-opacity, 1))
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255/var(--tw-text-opacity, 1))
}
.hover\:underline:hover {
text-decoration-line: underline
}
.hover\:decoration-brand-lime\/100:hover {
text-decoration-color: #d4f54c
}
.hover\:shadow-\[0_0_30px_rgba\(212\2c 245\2c 76\2c 0\.3\)\]:hover {
--tw-shadow: 0 0 30px rgba(212, 245, 76, .3);
--tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.hover\:grayscale-0:hover {
--tw-grayscale: grayscale(0);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.focus\:border-brand-lime:focus {
--tw-border-opacity: 1;
border-color: rgb(212 245 76/var(--tw-border-opacity, 1))
}
.active\:scale-95:active {
--tw-scale-x: .95;
--tw-scale-y: .95;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:pointer-events-auto {
pointer-events: auto
}
.group:hover .group-hover\:mb-12 {
margin-bottom: 3rem
}
.group:hover .group-hover\:w-\[28px\] {
width: 28px
}
.group:hover .group-hover\:translate-x-1,
.group\/btn:hover .group-hover\/btn\:translate-x-1 {
--tw-translate-x: 0.25rem
}
.group:hover .group-hover\:translate-x-1,
.group:hover .group-hover\:translate-x-2,
.group\/btn:hover .group-hover\/btn\:translate-x-1 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:translate-x-2 {
--tw-translate-x: 0.5rem
}
.group:hover .group-hover\:translate-y-0 {
--tw-translate-y: 0px
}
.group:hover .group-hover\:rotate-0,
.group:hover .group-hover\:translate-y-0 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:rotate-0 {
--tw-rotate: 0deg
}
.group:hover .group-hover\:rotate-\[-45deg\] {
--tw-rotate: -45deg
}
.group:hover .group-hover\:rotate-\[-45deg\],
.group:hover .group-hover\:scale-105 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:scale-105 {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05
}
.group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:border-brand-lime {
--tw-border-opacity: 1;
border-color: rgb(212 245 76/var(--tw-border-opacity, 1))
}
.group:hover .group-hover\:bg-brand-lime {
--tw-bg-opacity: 1;
background-color: rgb(212 245 76/var(--tw-bg-opacity, 1))
}
.group:hover .group-hover\:bg-brand-lime\/20 {
background-color: rgba(212, 245, 76, .2)
}
.group:hover .group-hover\:bg-brand-sidebar {
--tw-bg-opacity: 1;
background-color: rgb(9 64 48/var(--tw-bg-opacity, 1))
}
.group:hover .group-hover\:text-brand-lime {
--tw-text-opacity: 1;
color: rgb(212 245 76/var(--tw-text-opacity, 1))
}
.group:hover .group-hover\:text-brand-lime\/20 {
color: rgba(212, 245, 76, .2)
}
.group:hover .group-hover\:text-brand-sidebar {
--tw-text-opacity: 1;
color: rgb(9 64 48/var(--tw-text-opacity, 1))
}
.group:hover .group-hover\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255/var(--tw-text-opacity, 1))
}
.group:hover .group-hover\:text-white\/60 {
color: hsla(0, 0%, 100%, .6)
}
.group:hover .group-hover\:underline {
text-decoration-line: underline
}
.group:hover .group-hover\:opacity-100 {
opacity: 1
}
.group:hover .group-hover\:opacity-20 {
opacity: .2
}
.group:hover .group-hover\:opacity-60 {
opacity: .6
}
.group:hover .group-hover\:opacity-90 {
opacity: .9
}
.group:hover .group-hover\:opacity-\[0\.05\] {
opacity: .05
}
.group:hover .group-hover\:grayscale-0 {
--tw-grayscale: grayscale(0);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.group.tft-acc-active .group-\[\.tft-acc-active\]\:rotate-45 {
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@media (min-width:640px) {
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
@media (min-width:768px) {
.md\:-bottom-12 {
bottom: -3rem
}
.md\:-bottom-8 {
bottom: -2rem
}
.md\:-left-12 {
left: -3rem
}
.md\:-left-20 {
left: -5rem
}
.md\:-right-10 {
right: -2.5rem
}
.md\:-top-14 {
top: -3.5rem
}
.md\:bottom-12 {
bottom: 3rem
}
.md\:bottom-32 {
bottom: 8rem
}
.md\:left-8 {
left: 2rem
}
.md\:left-\[140px\] {
left: 140px
}
.md\:right-12 {
right: 3rem
}
.md\:top-0 {
top: 0
}
.md\:z-40 {
z-index: 40
}
.md\:order-1 {
order: 1
}
.md\:order-2 {
order: 2
}
.md\:col-span-2 {
grid-column: span 2/span 2
}
.md\:col-span-3 {
grid-column: span 3/span 3
}
.md\:col-span-4 {
grid-column: span 4/span 4
}
.md\:col-span-5 {
grid-column: span 5/span 5
}
.md\:col-span-8 {
grid-column: span 8/span 8
}
.md\:mb-0 {
margin-bottom: 0
}
.md\:mb-12 {
margin-bottom: 3rem
}
.md\:mb-24 {
margin-bottom: 6rem
}
.md\:mb-4 {
margin-bottom: 1rem
}
.md\:ml-16 {
margin-left: 4rem
}
.md\:ml-\[140px\] {
margin-left: 140px
}
.md\:mt-0 {
margin-top: 0
}
.md\:mt-12 {
margin-top: 3rem
}
.md\:mt-48 {
margin-top: 12rem
}
.md\:block {
display: block
}
.md\:flex {
display: flex
}
.md\:hidden {
display: none
}
.md\:aspect-\[3\/4\] {
aspect-ratio: 3/4
}
.md\:h-12 {
height: 3rem
}
.md\:h-2\.5 {
height: .625rem
}
.md\:h-24 {
height: 6rem
}
.md\:h-32 {
height: 8rem
}
.md\:h-36 {
height: 9rem
}
.md\:h-6 {
height: 1.5rem
}
.md\:h-\[480px\] {
height: 480px
}
.md\:h-\[70vh\] {
height: 70vh
}
.md\:h-\[80vh\] {
height: 80vh
}
.md\:h-\[90vh\] {
height: 90vh
}
.md\:h-auto {
height: auto
}
.md\:h-screen {
height: 100vh
}
.md\:min-h-0 {
min-height: 0
}
.md\:w-1\/2 {
width: 50%
}
.md\:w-1\/3 {
width: 33.333333%
}
.md\:w-12 {
width: 3rem
}
.md\:w-2\.5 {
width: .625rem
}
.md\:w-24 {
width: 6rem
}
.md\:w-32 {
width: 8rem
}
.md\:w-36 {
width: 9rem
}
.md\:w-6 {
width: 1.5rem
}
.md\:w-64 {
width: 16rem
}
.md\:w-\[350px\] {
width: 350px
}
.md\:w-\[360px\] {
width: 360px
}
.md\:w-\[85\%\] {
width: 85%
}
.md\:w-auto {
width: auto
}
.md\:-translate-x-full {
--tw-translate-x: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.md\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr))
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.md\:flex-row {
flex-direction: row
}
.md\:flex-row-reverse {
flex-direction: row-reverse
}
.md\:items-center {
align-items: center
}
.md\:justify-start {
justify-content: flex-start
}
.md\:justify-end {
justify-content: flex-end
}
.md\:gap-16 {
gap: 4rem
}
.md\:gap-20 {
gap: 5rem
}
.md\:gap-32 {
gap: 8rem
}
.md\:overflow-visible {
overflow: visible
}
.md\:rounded-none {
border-radius: 0
}
.md\:border-b-0 {
border-bottom-width: 0
}
.md\:border-r {
border-right-width: 1px
}
.md\:p-12 {
padding: 3rem
}
.md\:p-20 {
padding: 5rem
}
.md\:p-24 {
padding: 6rem
}
.md\:p-6 {
padding: 1.5rem
}
.md\:p-8 {
padding: 2rem
}
.md\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem
}
.md\:px-12 {
padding-left: 3rem;
padding-right: 3rem
}
.md\:px-16 {
padding-left: 4rem;
padding-right: 4rem
}
.md\:px-20 {
padding-left: 5rem;
padding-right: 5rem
}
.md\:px-24 {
padding-left: 6rem;
padding-right: 6rem
}
.md\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.md\:px-\[35vw\] {
padding-left: 35vw;
padding-right: 35vw
}
.md\:py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem
}
.md\:py-48 {
padding-top: 12rem;
padding-bottom: 12rem
}
.md\:py-56 {
padding-top: 14rem;
padding-bottom: 14rem
}
.md\:py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem
}
.md\:py-64 {
padding-top: 16rem;
padding-bottom: 16rem
}
.md\:py-80 {
padding-top: 20rem;
padding-bottom: 20rem
}
.md\:pl-16 {
padding-left: 4rem
}
.md\:pl-\[140px\] {
padding-left: 140px
}
.md\:pt-24 {
padding-top: 6rem
}
.md\:pt-56 {
padding-top: 14rem
}
.md\:pt-\[120px\] {
padding-top: 120px
}
.md\:text-left {
text-align: left
}
.md\:text-right {
text-align: right
}
.md\:text-2xl {
font-size: 1rem;
line-height: 2rem
}
.md\:text-3xl {
font-size: 1.475rem;
line-height: 2.25rem
}
.md\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.md\:text-5xl {
font-size: 3rem
}
.md\:text-5xl,
.md\:text-6xl {
line-height: 1
}
.md\:text-6xl {
font-size: 3.75rem
}
.md\:text-7xl {
font-size: 4.5rem
}
.md\:text-7xl,
.md\:text-8xl {
line-height: 1
}
.md\:text-8xl {
font-size: 6rem
}
.md\:text-9xl {
font-size: 6rem;
line-height: 1
}
.md\:text-\[10px\] {
font-size: 10px
}
.md\:text-\[10vw\] {
font-size: 10vw
}
.md\:text-\[11vw\] {
font-size: 11vw
}
.md\:text-\[140px\] {
font-size: 140px
}
.md\:text-\[100px\] {
font-size: 100px
}
.md\:text-\[110px\] {
font-size: 110px
}
.md\:text-\[120px\] {
font-size: 120px
}
.md\:text-\[90px\] {
font-size: 90px
}
.md\:text-\[150px\] {
font-size: 150px
}
.md\:text-\[160px\] {
font-size: 160px
}
.md\:text-\[80px\] {
font-size: 80px
}
.md\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.md\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.md\:text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.md\:text-xs {
font-size: .75rem;
line-height: 1rem
}
}
@media (min-width:1024px) {
.lg\:col-span-2 {
grid-column: span 2/span 2
}
.lg\:block {
display: block
}
.lg\:flex {
display: flex
}
.lg\:h-\[550px\] {
height: 550px
}
.lg\:w-1\/2 {
width: 50%
}
.lg\:w-1\/3 {
width: 33.333333%
}
.lg\:w-2\/3 {
width: 66.666667%
}
.lg\:w-5\/12 {
width: 41.666667%
}
.lg\:w-7\/12 {
width: 58.333333%
}
.lg\:w-\[400px\] {
width: 400px
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.lg\:flex-row {
flex-direction: row
}
.lg\:items-end {
align-items: flex-end
}
.lg\:items-center {
align-items: center
}
.lg\:justify-between {
justify-content: space-between
}
.lg\:gap-12 {
gap: 3rem
}
.lg\:gap-48 {
gap: 12rem
}
.lg\:border-l {
border-left-width: 1px
}
.lg\:p-10 {
padding: 2.5rem
}
.lg\:p-12 {
padding: 3rem
}
.lg\:p-20 {
padding: 5rem
}
.lg\:px-24 {
padding-left: 6rem;
padding-right: 6rem
}
.lg\:px-32 {
padding-left: 8rem;
padding-right: 8rem
}
.lg\:py-40 {
padding-top: 10rem;
padding-bottom: 10rem
}
.lg\:pl-32 {
padding-left: 8rem
}
.lg\:pt-20 {
padding-top: 5rem
}
.lg\:text-5xl {
font-size: 3rem
}
.lg\:text-5xl,
.lg\:text-7xl {
line-height: 1
}
.lg\:text-7xl {
font-size: 4.5rem
}
.lg\:text-9xl {
font-size: 8rem;
line-height: 1
}
.lg\:text-\[100px\] {
font-size: 100px
}
.lg\:text-\[12vw\] {
font-size: 8vw
}
.lg\:text-\[5\.5rem\] {
font-size: 5.5rem
}
}
@media (min-width:1280px) {
.xl\:w-\[350px\] {
width: 350px
}
.xl\:w-\[450px\] {
width: 450px
}
}
html {
scroll-behavior: smooth;
}
img {
max-width: 100%;
}
.no-js-note {
display: none;
} html,
body {
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
a:hover,
a:focus {
color: inherit;
}
ul,
ol {
list-style: none !important;
margin: 0;
padding-left: 0;
}
li::marker {
content: '' !important;
}
#menu-panel ul,
#menu-panel li {
list-style: none !important;
}
#menu-panel ul[id$="-submenu"] {
padding-left: 0 !important;
margin-left: 0 !important;
}
#menu-panel ul[id$="-submenu"] li {
width: 100%;
display: flex;
justify-content: flex-end;
}
#menu-panel ul[id$="-submenu"] a {
text-decoration: none !important;
}
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-blue-900,
a.text-blue-500,
a.text-blue-600,
a.text-blue-700,
a.text-blue-800,
a.text-blue-900 {
color: #d4f54c !important;
}
.realiz-logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-family: 'Space Grotesk', serif;
font-size: 1.35rem;
line-height: 1;
font-style: italic;
text-transform: lowercase;
color: #094030;
}
.filter-tab {
color: rgba(255, 255, 255, .58) !important;
transform: none !important;
padding-bottom: .9rem;
letter-spacing: .14em;
}
.filter-tab::after {
left: 0 !important;
transform: none !important;
bottom: 0 !important;
height: 3px !important;
border-radius: 999px;
}
.filter-tab.active {
color: #d4f54c !important;
transform: none !important;
}
.filter-tab.active::after {
width: 36px !important;
}
#index-hero-prev,
#index-hero-next,
#index-hero-prev svg,
#index-hero-next svg {
background: transparent !important;
backdrop-filter: none !important;
} .social-item {
opacity: 0 !important;
transform: translateY(12px);
transition: opacity .25s ease, transform .25s ease !important
}
.group:hover .social-item,
.aside-group:hover .social-item {
opacity: 1 !important;
transform: translateY(0)
}
.group:not(:hover) .social-item,
.aside-group:not(:hover) .social-item {
opacity: 0 !important;
transform: translateY(12px)
}
.group:hover .social-1,
.aside-group:hover .social-1 {
transition-delay: .16s
}
.group:hover .social-2,
.aside-group:hover .social-2 {
transition-delay: .12s
}
.group:hover .social-3,
.aside-group:hover .social-3 {
transition-delay: .08s
}
.group:hover .social-4,
.aside-group:hover .social-4 {
transition-delay: .04s
}
.group:hover .social-5,
.aside-group:hover .social-5 {
transition-delay: 0s
} .no-scrollbar::-webkit-scrollbar,
.menu-no-scrollbar::-webkit-scrollbar {
display: none !important;
}
.no-scrollbar,
.menu-no-scrollbar {
-ms-overflow-style: none !important;
scrollbar-width: none !important;
overflow-x: hidden !important;
}
#main-scroll-container::-webkit-scrollbar,
nav#menu-panel::-webkit-scrollbar {
width: 6px;
height: 6px
}
#main-scroll-container::-webkit-scrollbar-track,
nav#menu-panel::-webkit-scrollbar-track {
background: #0d2620
}
#main-scroll-container::-webkit-scrollbar-thumb,
nav#menu-panel::-webkit-scrollbar-thumb {
background: rgba(212, 245, 76, .32);
border-radius: 999px
}
#main-scroll-container::-webkit-scrollbar-thumb:hover,
nav#menu-panel::-webkit-scrollbar-thumb:hover {
background: #d4f54c
}
.reveal-up .w-12.h-12,
.group .w-\[48px\].h-\[58px\],
.group .w-\[58px\].h-\[58px\] {
display: flex;
align-items: center;
justify-content: center
}
.group [data-lucide="hand"] {
display: block;
margin: auto
}
#kinetic-cursor::after {
transition: none !important
}
img[src=""],
img:not([src]) {
background: #071e18
}  .tft-page-about-alt :root {
--tft-bg: #0d2620;
--tft-sidebar: #094030;
--tft-menu: #0a3d2e;
--tft-lime: #d4f54c;
--tft-white: #ffffff;
--tft-text-muted: rgba(255, 255, 255, 0.4);
--tft-text-low: rgba(255, 255, 255, 0.2);
--tft-border: rgba(212, 245, 76, 0.2);
}
.tft-page-about-alt {
margin: 0;
background-color: var(--tft-bg);
color: var(--tft-white);
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: default;
} .tft-page-about-alt .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-about-alt ::-webkit-scrollbar {
width: 5px;
}
.tft-page-about-alt ::-webkit-scrollbar-track {
background: var(--tft-bg);
}
.tft-page-about-alt ::-webkit-scrollbar-thumb {
background: rgba(212, 245, 76, 0.3);
border-radius: 10px;
}
.tft-page-about-alt ::-webkit-scrollbar-thumb:hover {
background: var(--tft-lime);
} .tft-page-about-alt .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-about-alt .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-about-alt .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-about-alt .menu-toggle:hover {
transform: scale(1.05);
}
.tft-page-about-alt .menu-toggle.menu-open {
border-color: var(--tft-lime) !important;
transform: scale(1);
}
.tft-page-about-alt .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-about-alt .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030;
}
.tft-page-about-alt .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-about-alt .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
75% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-about-alt .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-about-alt .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-about-alt .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-about-alt .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-about-alt .group:hover .social-2 {
transition-delay: 0.10s;
}
.tft-page-about-alt .group:hover .social-3 {
transition-delay: 0.05s;
}
.tft-page-about-alt .group:hover .social-4 {
transition-delay: 0s;
} .tft-page-about-alt .parallax-target {
transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tft-page-about-alt .reveal-up {
opacity: 0;
transform: translateY(40px);
transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tft-page-about-alt .reveal-up.active {
opacity: 1;
transform: translateY(0);
}
.tft-page-about-alt .dna-gradient {
background: linear-gradient(135deg, rgba(212, 245, 76, 0.1) 0%, transparent 100%);
}
.tft-page-about-alt .capability-card {
transition: all 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.tft-page-about-alt .capability-card:hover {
background-color: #d4f54c;
color: #0d2620;
transform: translateY(-10px);
}
.tft-page-about-alt .capability-card:hover svg {
stroke: #0d2620;
transform: scale(1.1) rotate(-5deg);
}
.tft-page-about-alt .step-progress-line {
position: absolute;
left: 2rem;
top: 2rem;
bottom: -6rem;
width: 1px;
background: rgba(255, 255, 255, 0.1);
z-index: 10;
}
.tft-page-about-alt .step-progress-fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: #d4f54c;
transition: height 0.8s ease;
}
.tft-page-about-alt .hero-stroke-text {
-webkit-text-stroke: 2px rgba(255, 255, 255, 0.2);
color: transparent;
transition: all 0.8s ease;
}
.tft-page-about-alt .hero-stroke-text:hover {
-webkit-text-stroke-color: #d4f54c;
} .tft-page-about-v2 {
margin: 0;
background-color: #0d2620;
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
overflow-x: hidden;
} .tft-page-about-v2 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-about-v2 .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-about-v2 .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-about-v2 .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-about-v2 .menu-toggle.menu-open {
background-color: #d4f54c !important;
border-color: #d4f54c !important;
transform: scale(1);
}
.tft-page-about-v2 .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-about-v2 .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-about-v2 .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-about-v2 .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-about-v2 .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-about-v2 .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-about-v2 .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-about-v2 .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-about-v2 .group:hover .social-2 {
transition-delay: 0.10s;
} .tft-page-about-v2 .reveal-up {
opacity: 0;
transform: translateY(40px);
transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tft-page-about-v2 .reveal-up.active {
opacity: 1;
transform: translateY(0);
}
.tft-page-about-v2 .parallax-bg {
transition: transform 0.1s linear;
} .tft-page-about-v2 .timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: rgba(212, 245, 76, 0.1);
transform: translateX(-50%);
}
.tft-page-about-v2 .timeline-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #d4f54c;
box-shadow: 0 0 20px #d4f54c;
} .tft-page-about-v2 .team-card img {
filter: grayscale(1) contrast(1.2);
transition: all 0.6s ease;
}
.tft-page-about-v2 .team-card:hover img {
filter: grayscale(0) contrast(1);
transform: scale(1.05);
} .tft-page-about-v2 .stat-item {
border-right: 1px solid rgba(255, 255, 255, 0.05);
}
@media (max-width: 768px) {
.tft-page-about-v2 .stat-item {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
} .tft-page-about :root {
--tft-bg: #0d2620;
--tft-sidebar: #094030;
--tft-menu: #0a3d2e;
--tft-lime: #d4f54c;
--tft-cream: #f4f3ea;
--tft-sage: #e2e4d9;
--tft-dark: #0d2620;
}
.tft-page-about {
margin: 0;
overflow: hidden;
background-color: var(--tft-bg);
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: default;
} .tft-page-about .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-about .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-about .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-about .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-about .menu-toggle.menu-open {
background-color: var(--tft-lime) !important;
border-color: var(--tft-lime) !important;
transform: scale(1);
}
.tft-page-about .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-about .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: var(--tft-sidebar) !important;
}
.tft-page-about .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-about .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: var(--tft-sidebar) !important;
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-about .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-about .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-about .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-about .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-about .group:hover .social-2 {
transition-delay: 0.10s;
}
.tft-page-about .group:hover .social-3 {
transition-delay: 0.05s;
}
.tft-page-about .group:hover .social-4 {
transition-delay: 0s;
} .tft-page-about .tft-about-page {
background-color: var(--tft-cream);
color: var(--tft-dark);
height: 100%;
overflow-y: auto;
position: relative;
}
.tft-page-about .tft-heading {
font-family: 'Space Grotesk', serif;
font-weight: 300;
color: var(--tft-sidebar);
font-size: clamp(2.5rem, 5vw, 4rem);
}
.tft-page-about .tft-subtitle {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.2em;
opacity: 0.5;
font-weight: 700;
color: var(--tft-sidebar);
}
.tft-page-about .tft-container {
padding: 0 8%;
max-width: 1400px;
margin: 0 auto;
}
.tft-page-about .tft-about__section {
padding: 8rem 0;
}
.tft-page-about .tft-about__section--sage {
background-color: var(--tft-sage);
}
.tft-page-about .tft-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: white;
border: 1px solid rgba(13, 38, 32, 0.1);
border-top: 5px solid var(--tft-sidebar);
margin-top: 4rem;
overflow: hidden;
}
@media (max-width: 768px) {
.tft-page-about .tft-stats {
grid-template-columns: repeat(2, 1fr);
}
}
.tft-page-about .tft-stat {
padding: 3rem 1.5rem;
text-align: center;
border-right: 1px solid rgba(13, 38, 32, 0.1);
}
.tft-page-about .tft-stat:last-child {
border-right: none;
}
.tft-page-about .tft-stat__num {
display: block;
font-family: 'Space Grotesk', serif;
font-size: 3.5rem;
color: var(--tft-sidebar);
}
.tft-page-about .tft-stat__label {
font-size: 0.65rem;
letter-spacing: 0.25em;
font-weight: 700;
text-transform: uppercase;
opacity: 0.6;
color: var(--tft-sidebar);
}
.tft-page-about .tft-staff__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 4rem;
margin-top: 4rem;
}
.tft-page-about .tft-staff__card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.tft-page-about .tft-staff__img-wrap {
width: 240px;
height: 240px;
border-radius: 50%;
overflow: hidden;
border: 12px solid rgba(255, 255, 255, 0.4);
margin-bottom: 2rem;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}
.tft-page-about .tft-staff__img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1);
transition: filter 0.5s ease;
}
.tft-page-about .tft-staff__card:hover .tft-staff__img {
filter: grayscale(0);
}
.tft-page-about .tft-heading,
.tft-page-about .tft-heading * {
color: #ffffff !important;
}
.tft-page-about .tft-staff__name {
font-family: 'Space Grotesk', serif;
font-size: 2.2rem;
color: var(--tft-sidebar);
}
.tft-page-about .tft-staff__role {
background: var(--tft-lime);
padding: 4px 16px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--tft-sidebar);
margin: 0.5rem 0 1.5rem;
}
.tft-page-about .tft-service {
background: var(--tft-cream);
display: flex;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(13, 38, 32, 0.1);
height: 180px;
transition: transform 0.4s ease;
}
.tft-page-about .tft-service:hover {
transform: translateY(-8px);
}
.tft-page-about .tft-service__icon-area {
width: 140px;
background: var(--tft-sidebar);
display: flex;
align-items: center;
justify-content: center;
}
.tft-page-about .tft-service__content {
padding: 2.5rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.tft-page-about .tft-service__title {
font-family: 'Space Grotesk', serif;
font-size: 2rem;
color: var(--tft-sidebar);
margin-bottom: 0.5rem;
}
.tft-page-about .tft-service__text {
font-size: 0.85rem;
opacity: 0.6;
line-height: 1.6;
color: var(--tft-sidebar);
}
.tft-page-about .tft-footer__wrap {
background: var(--tft-sidebar);
color: white;
padding: 6rem 8% 4rem;
position: relative;
}
.tft-page-about .tft-footer__up-btn {
position: absolute;
right: 8%;
top: -40px;
width: 44px;
height: 80px;
border-radius: 22px;
border: 1px solid var(--tft-lime);
background: var(--tft-sidebar);
color: var(--tft-lime);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.3s;
}
.tft-page-about .tft-footer__up-btn:hover {
background: var(--tft-lime);
color: var(--tft-sidebar);
} .tft-page-blog {
margin: 0;
background-color: #0d2620;
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
overflow-x: hidden;
} .tft-page-blog .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-blog ::-webkit-scrollbar {
width: 5px;
}
.tft-page-blog ::-webkit-scrollbar-track {
background: var(--brand-bg, #0d2620);
}
.tft-page-blog ::-webkit-scrollbar-thumb {
background: rgba(212, 245, 76, 0.3);
border-radius: 10px;
}
.tft-page-blog ::-webkit-scrollbar-thumb:hover {
background: #d4f54c;
} .tft-page-blog .menu-no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-blog .menu-no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-blog .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-blog .menu-toggle.menu-open {
background-color: #d4f54c !important;
border-color: #d4f54c !important;
transform: scale(1);
}
.tft-page-blog .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-blog .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-blog .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-blog .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-blog .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-blog .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-blog .aside-group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-blog .aside-group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-blog .aside-group:hover .social-2 {
transition-delay: 0.10s;
} .tft-page-blog .blog-card-img {
transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tft-page-blog .blog-card:hover .blog-card-img {
transform: scale(1.05);
}
.tft-page-blog .sidebar-widget {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.tft-page-blog .search-input:focus {
border-color: #d4f54c;
outline: none;
}
.tft-page-blog .reveal-up {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tft-page-blog .reveal-up.active {
opacity: 1;
transform: translateY(0);
}
.tft-page-blog .line-clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.tft-page-blog .category-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #d4f54c;
opacity: 0;
transition: opacity 0.3s ease;
}
.tft-page-blog .category-item:hover .category-dot {
opacity: 1;
} .tft-page-contact :root {
--tft-bg: #0d2620;
--tft-sidebar: #094030;
--tft-menu: #0a3d2e;
--tft-lime: #d4f54c;
--tft-white: #ffffff;
--tft-text-muted: rgba(255, 255, 255, 0.4);
--tft-text-low: rgba(255, 255, 255, 0.2);
--tft-border: rgba(212, 245, 76, 0.2);
}
.tft-page-contact {
margin: 0;
overflow-x: hidden;
background-color: var(--tft-bg);
color: var(--tft-white);
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: default;
} .tft-page-contact .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-contact .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-contact .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-contact .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-contact .menu-toggle:hover {
transform: scale(1.05);
}
.tft-page-contact .menu-toggle.menu-open {
border-color: var(--tft-lime) !important;
transform: scale(1);
}
.tft-page-contact .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-contact .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
}
.tft-page-contact .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-contact .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
75% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-contact .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-contact .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-contact .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-contact .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-contact .group:hover .social-2 {
transition-delay: 0.10s;
}
.tft-page-contact .group:hover .social-3 {
transition-delay: 0.05s;
}
.tft-page-contact .group:hover .social-4 {
transition-delay: 0s;
} .tft-page-contact .contact-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--tft-border);
padding: 1.5rem 0;
font-size: 1.25rem;
color: var(--tft-white);
outline: none;
transition: border-bottom-color 0.4s ease;
}
.tft-page-contact .contact-input:focus {
border-bottom-color: var(--tft-lime);
}
.tft-page-contact .contact-label {
position: absolute;
left: 0;
top: 1.5rem;
font-size: 1.25rem;
color: var(--tft-text-low);
pointer-events: none;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tft-page-contact .contact-input:focus~.contact-label,
.tft-page-contact .contact-input:not(:placeholder-shown)~.contact-label {
top: -0.5rem;
font-size: 0.875rem;
color: var(--tft-lime);
}
.tft-page-contact .reveal-up {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tft-page-contact .reveal-up.active {
opacity: 1;
transform: translateY(0);
} @keyframes float {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(2deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
.tft-page-contact .animate-float {
animation: float 6s ease-in-out infinite;
} .tft-page-home-7 :root {
x--brand-sidebar: #094030;
--brand-lime: #d4f54c;
--brand-bg: #0d2620; --brand-menu: #0a3d2e;
--brand-text: #f7f7f3;
}
.tft-page-home-7 {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--brand-bg);
color: var(--brand-text);
overflow: hidden;
margin: 0;
}
.tft-page-home-7 .font-display {
font-family: 'Space Grotesk', sans-serif;
} .tft-page-home-7 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-home-7 .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-home-7 ::-webkit-scrollbar {
width: 5px;
}
.tft-page-home-7 ::-webkit-scrollbar-track {
background: var(--brand-bg, #0d2620);
}
.tft-page-home-7 ::-webkit-scrollbar-thumb {
background: rgba(212, 245, 76, 0.3);
border-radius: 10px;
}
.tft-page-home-7 ::-webkit-scrollbar-thumb:hover {
background: #d4f54c;
} .tft-page-home-7 .menu-no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-home-7 .menu-no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-home-7 .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-home-7 .menu-toggle.menu-open {
background-color: #d4f54c !important;
border-color: #d4f54c !important;
transform: scale(1);
}
.tft-page-home-7 .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-home-7 .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-home-7 .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-home-7 .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-home-7 .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-home-7 .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-home-7 .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-home-7 .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-home-7 .group:hover .social-2 {
transition-delay: 0.10s;
}
.tft-page-home-7 .group:hover .social-3 {
transition-delay: 0.05s;
}
.tft-page-home-7 .group:hover .social-4 {
transition-delay: 0s;
} .tft-page-home-7 .tft-grid {
position: fixed;
inset: 0;
background-image: linear-gradient(to right, rgba(9, 64, 48, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(9, 64, 48, 0.08) 1px, transparent 1px);
background-size: 25% 100%;
pointer-events: none;
z-index: 1;
} .tft-page-home-7 .tft-arch-wrapper {
position: relative;
width: 48vw;
height: 60vh;
margin-top: auto;
margin-bottom: 0;
z-index: 10;
}
.tft-page-home-7 .tft-arch-container {
width: 100%;
height: 100%;
border-radius: 25vw 25vw 0 0;
overflow: hidden;
position: relative;
box-shadow: none;
cursor: pointer;
background: transparent;
}
.tft-page-home-7 .tft-arch-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
} .tft-page-home-7 .tft-grain {
position: fixed;
inset: 0;
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/grain-texture.png);
opacity: 0.03;
pointer-events: none;
z-index: 90;
} .tft-page-home-7 .tft-grid {
position: fixed;
inset: 0;
background-image: linear-gradient(to right, rgba(212, 245, 76, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(212, 245, 76, 0.03) 1px, transparent 1px);
background-size: 20% 100%;
pointer-events: none;
z-index: 1;
} .tft-page-home-7 .tft-arch-wrapper {
position: absolute;
bottom: -20px; left: 50%;
transform: translateX(-50%);
width: 60vw;
height: 65vh;
z-index: 10;
}
.tft-page-home-7 .tft-arch-container {
width: 100%;
height: 100%;
border-radius: 30vw 30vw 0 0;
overflow: hidden;
position: relative;
box-shadow: 0 -30px 120px -20px rgba(0, 0, 0, 0.7);
cursor: pointer;
border: 1px solid rgba(212, 245, 76, 0.2);
background: transparent;
}
.tft-page-home-7 .tft-arch-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 2.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 1s ease;
transform: scale(1.1);
}
.tft-page-home-7 .tft-arch-container::after {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 40px 100px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
.tft-page-home-7 .tft-arch-container:hover .tft-arch-img {
transform: scale(1.05);
} .tft-page-home-7 .tft-nav-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
position: absolute;
top: 45%; z-index: 40;
}
.tft-page-home-7 .tft-nav-btn.btn-prev {
left: -8vw;
}
.tft-page-home-7 .tft-nav-btn.btn-next {
right: -8vw;
}
.tft-page-home-7 .tft-nav-btn span {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.5em;
font-weight: 700;
opacity: 0.3;
color: var(--brand-lime);
transition: all 0.4s ease;
}
.tft-page-home-7 .tft-nav-btn:hover {
transform: translateY(-5px);
}
.tft-page-home-7 .tft-nav-btn:hover span {
opacity: 1;
letter-spacing: 0.6em;
}
.tft-page-home-7 .tft-avatar-wrap {
width: 55px;
height: 55px;
border-radius: 50%;
padding: 2px;
background: rgba(212, 245, 76, 0.05);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
}
.tft-page-home-7 .tft-avatar-wrap::before {
content: '';
position: absolute;
inset: -4px;
border: 1px solid rgba(212, 245, 76, 0.1);
border-radius: 50%;
transition: all 0.4s ease;
}
.tft-page-home-7 .tft-nav-btn:hover .tft-avatar-wrap {
background: var(--brand-lime);
transform: scale(1.15) rotate(15deg);
}
.tft-page-home-7 .tft-nav-btn:hover .tft-avatar-wrap::before {
inset: -8px;
opacity: 0;
}
.tft-page-home-7 .tft-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
} .tft-page-home-7 .tft-case-bubble {
width: 160px;
height: 160px;
background: var(--brand-lime);
color: var(--brand-sidebar);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Space Grotesk', serif;
font-style: italic;
font-size: 24px;
font-weight: 500;
line-height: 0.9;
position: absolute;
bottom: 40px;
right: -40px;
z-index: 50;
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
cursor: pointer;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
.tft-page-home-7 .tft-case-bubble span:first-child {
font-size: 18px;
opacity: 0.7;
letter-spacing: 0.1em;
font-family: 'Plus Jakarta Sans';
font-style: normal;
text-transform: uppercase;
}
.tft-page-home-7 .tft-case-bubble:hover {
transform: scale(1.1) rotate(15deg);
background: white;
} .tft-page-home-7 .tft-watermark {
position: fixed;
bottom: -5vh;
left: 50%;
transform: translateX(-50%);
font-size: 22vw;
font-weight: 950;
color: rgba(212, 245, 76, 0.015);
font-family: 'Plus Jakarta Sans', sans-serif;
white-space: nowrap;
letter-spacing: -0.08em;
pointer-events: none;
z-index: 0;
text-transform: uppercase;
}
.tft-page-home-7 .no-scrollbar::-webkit-scrollbar {
display: none;
} .tft-page-home-2 :root {
--tft-bg: #0d2620;
--tft-sidebar: #094030;
--tft-menu: #0a3d2e;
--tft-lime: #d4f54c;
--tft-h2-cream: #f7f7f3;
--tft-h2-dark: #0a3d2e;
--tft-h2-border: rgba(10, 61, 46, 0.15);
}
.tft-page-home-2 {
margin: 0;
overflow: hidden;
background-color: var(--tft-bg);
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
} .tft-page-home-2 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-home-2 .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-home-2 .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-home-2 .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-home-2 .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-home-2 .menu-toggle.menu-open {
background-color: #d4f54c !important;
border-color: #d4f54c !important;
transform: scale(1);
}
.tft-page-home-2 .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-home-2 .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-home-2 .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-home-2 .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-home-2 .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-home-2 .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-home-2 .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-home-2 .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-home-2 .group:hover .social-2 {
transition-delay: 0.10s;
}
.tft-page-home-2 .group:hover .social-3 {
transition-delay: 0.05s;
}
.tft-page-home-2 .group:hover .social-4 {
transition-delay: 0s;
}
.tft-page-home-2 .social-badge {
width: 3rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.tft-page-home-2 .social-badge:hover {
transform: translateY(-4px);
background: #fff;
color: #094030;
border-color: #fff;
}
.tft-page-home-2 .social-badge svg {
width: 1.15rem;
height: 1.15rem;
} .tft-page-home-2 .tft-h2 {
background-color: var(--tft-h2-cream);
color: var(--tft-h2-dark);
height: 100%;
overflow-y: auto;
overflow-x: hidden;
position: relative;
} .tft-page-home-2 .tft-grain {
position: fixed;
inset: -50%;
width: 200%;
height: 200%;
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/noise.svg);
opacity: 0.15;
pointer-events: none;
z-index: 99;
animation: grain-shift 8s steps(10) infinite;
}
@keyframes grain-shift {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
30% {
transform: translate(3%, -15%);
}
50% {
transform: translate(-10%, 10%);
}
70% {
transform: translate(15%, 5%);
}
90% {
transform: translate(-3%, 3%);
}
} .tft-page-home-2 .tft-grid-bg {
position: absolute;
inset: 0;
background-image: linear-gradient(var(--tft-h2-border) 1px, transparent 1px), linear-gradient(90deg, var(--tft-h2-border) 1px, transparent 1px);
background-size: 100px 100px;
pointer-events: none;
opacity: 0.5;
}
.tft-page-home-2 .tft-h2__hero {
min-height: 80vh;
display: flex;
align-items: center;
padding: 10rem 8% 4rem;
gap: 4rem;
overflow: hidden;
position: relative;
z-index: 10;
}
.tft-page-home-2 .tft-h2__hero-img-box {
position: relative;
width: clamp(300px, 35vw, 450px);
aspect-ratio: 0.8/1;
border: 1px solid var(--tft-h2-dark);
border-radius: 200px 200px 40px 200px;
padding: 1rem;
background: white;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.1);
transition: transform 0.8s ease;
z-index: 10;
}
.tft-page-home-2 .tft-h2__hero-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
clip-path: circle(100% at 50% 50%);
transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.tft-page-home-2 .tft-h2__hero-img--masking {
clip-path: circle(0% at 50% 50%);
}
.tft-page-home-2 .tft-h2__hero-title {
font-family: 'Space Grotesk', serif;
font-size: clamp(3.5rem, 7vw, 7rem);
line-height: 0.9;
font-weight: 300;
position: relative;
z-index: 10;
}
.tft-page-home-2 .tft-char-wrap {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
.tft-page-home-2 .tft-char {
display: inline-block;
transform: translateY(110%);
transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tft-page-home-2 .tft-revealed .tft-char {
transform: translateY(0);
}
.tft-page-home-2 .tft-reveal {
opacity: 0;
transform: translateY(30px);
transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tft-page-home-2 .tft-reveal--active {
opacity: 1;
transform: translateY(0);
} .tft-page-home-2 .tft-bento {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
}
.tft-page-home-2 .tft-bento__item {
background: white;
border: 1px solid var(--tft-h2-border);
padding: 3rem;
border-radius: 2rem;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.tft-page-home-2 .tft-bento__item:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08);
border-color: var(--tft-h2-dark);
}
.tft-page-home-2 .tft-bento__item--dark {
background: var(--tft-h2-dark);
color: white;
border: none;
}
.tft-page-home-2 .tft-bento__item--dark:hover {
background: #0c4d3b;
}
.tft-page-home-2 .tft-bento__item--lime:hover {
background: #ecff8f;
border-color: var(--tft-lime);
}
.tft-page-home-2 .tft-bento__item--feature {
background: linear-gradient(135deg, rgba(212, 245, 76, 0.28), rgba(255, 255, 255, 0.92) 58%), white;
box-shadow: 0 30px 80px rgba(10, 61, 46, 0.08);
}
.tft-page-home-2 .tft-bento__feature-orb {
position: absolute;
inset: auto -4rem -4rem auto;
width: 12rem;
height: 12rem;
border-radius: 999px;
background: radial-gradient(circle, rgba(212, 245, 76, 0.35), transparent 70%);
pointer-events: none;
}
.tft-page-home-2 .tft-compass-shell {
position: relative;
width: 11rem;
height: 11rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: radial-gradient(circle at 35% 35%, #ffffff, #f6f8ef 72%);
border: 1px solid rgba(10, 61, 46, 0.12);
box-shadow: 0 26px 60px rgba(10, 61, 46, 0.14);
overflow: hidden;
}
.tft-page-home-2 .tft-compass-shell__inner {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.tft-page-home-2 .tft-compass-shell::before {
content: "";
position: absolute;
inset: 12px;
border-radius: 999px;
border: 1px dashed rgba(10, 61, 46, 0.12);
}
.tft-page-home-2 .tft-compass-shell .lucide-compass,
.tft-page-home-2 .tft-compass-shell [data-lucide="compass"] {
display: block;
width: 4.5rem;
height: 4.5rem;
margin: 0;
flex: 0 0 auto;
transform-origin: center;
}
.tft-page-home-2 .tft-stat-intro {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 4rem;
}
.tft-page-home-2 .tft-stat-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 768px) {
.tft-page-home-2 .tft-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.tft-page-home-2 .tft-stat-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.tft-page-home-2 .tft-stat-card {
position: relative;
overflow: hidden;
min-height: 220px;
padding: 2rem;
border-radius: 2rem;
border: 1px solid rgba(10, 61, 46, 0.12);
background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(247, 247, 243, 0.98));
box-shadow: 0 24px 60px rgba(10, 61, 46, 0.08);
transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}
.tft-page-home-2 .tft-stat-card:hover {
transform: translateY(-10px);
border-color: rgba(212, 245, 76, 0.55);
box-shadow: 0 34px 90px rgba(10, 61, 46, 0.12);
}
.tft-page-home-2 .tft-stat-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(212, 245, 76, 0.09), transparent 42%);
pointer-events: none;
}
.tft-page-home-2 .tft-stat-card::after {
content: "";
position: absolute;
right: -30px;
top: -30px;
width: 110px;
height: 110px;
border-radius: 999px;
background: radial-gradient(circle, rgba(212, 245, 76, 0.22), transparent 72%);
}
.tft-page-home-2 .tft-stat-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(10, 61, 46, 0.35);
}
.tft-page-home-2 .tft-stat-divider {
width: 100%;
height: 1px;
margin-top: 1.5rem;
background: linear-gradient(90deg, rgba(10, 61, 46, 0.18), rgba(10, 61, 46, 0.03));
}
.tft-page-home-2 .tft-floating-shape {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid var(--tft-lime);
opacity: 0.1;
border-radius: 50%;
pointer-events: none;
transition: transform 0.8s ease;
}
.tft-page-home-2 .tft-bento__item:hover .tft-floating-shape {
transform: scale(2) rotate(20deg);
opacity: 0.2;
} .tft-page-home-2 .tft-pulse-wrap {
position: relative;
width: 120px;
height: 120px;
}
.tft-page-home-2 .tft-pulse-circle {
position: absolute;
inset: 0;
border: 1.5px solid var(--tft-lime);
border-radius: 50%;
animation: tft-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
opacity: 0;
box-shadow: 0 0 15px var(--tft-lime);
}
.tft-page-home-2 .tft-pulse-circle--1 {
animation-delay: 0s;
}
.tft-page-home-2 .tft-pulse-circle--2 {
animation-delay: 0.6s;
}
@keyframes tft-pulse {
0% {
transform: scale(0.8);
opacity: 0.8;
}
100% {
transform: scale(1.6);
opacity: 0;
}
} .tft-page-home-2 .tft-tab-active {
background: var(--tft-h2-dark);
color: white;
border-color: var(--tft-h2-dark);
}
.tft-page-home-2 .tft-tab {
border: 1px solid var(--tft-h2-border);
transition: all 0.4s ease;
}
.tft-page-home-2 .tft-tab:hover {
border-color: var(--tft-h2-dark);
transform: translateY(-3px);
}
.tft-page-home-2 .tft-acc-item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 2rem;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
overflow: hidden;
position: relative;
color: #ffffff;
}
.tft-page-home-2 .tft-acc-item:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.05);
border-color: rgba(212, 245, 76, 0.2);
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
}
.tft-page-home-2 .tft-acc-active {
border-color: var(--tft-lime);
background: rgba(212, 245, 76, 0.05);
box-shadow: 0 60px 120px rgba(0, 0, 0, 0.4);
transform: scale(1.02);
z-index: 20;
}
.tft-page-home-2 .tft-acc-active .tft-acc-body {
max-height: 500px;
padding: 0 3rem 3.5rem;
opacity: 1;
transform: translateY(0);
}
.tft-page-home-2 .tft-acc-body {
max-height: 0;
overflow: hidden;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0;
padding: 0 3rem;
transform: translateY(20px);
color: rgba(255, 255, 255, 0.6);
}
.tft-page-home-2 .tft-acc-trigger {
padding: 2.5rem 3rem;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
cursor: pointer;
user-select: none;
}
.tft-page-home-2 .tft-acc-active .tft-acc-trigger i {
transform: rotate(45deg);
color: var(--brand-sidebar);
border-color: var(--tft-lime);
}
.tft-page-home-2 .tft-acc-trigger span {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.25em;
transition: all 0.4s ease;
color: var(--tft-lime);
}
.tft-page-home-2 .tft-acc-active .tft-acc-trigger span {
letter-spacing: 0.35em;
color: var(--tft-lime);
}
.tft-page-home-2 .tft-img-frame {
border-radius: 4rem;
background: #1a1a1a;
box-shadow: 0 100px 150px rgba(0, 0, 0, 0.5);
}
.tft-page-home-2 .tft-img-frame::after {
content: '';
position: absolute;
inset: -1px;
border: 2px solid var(--tft-lime);
border-radius: inherit;
opacity: 0;
transition: opacity 0.5s ease;
z-index: -1;
}
.tft-page-home-2 .tft-img-frame:hover::after {
opacity: 0.5;
}
.tft-page-home-2 .tft-img-frame:hover {
transform: scale(1.02) rotate(1deg);
}
.tft-page-home-2 .tft-btn-discover {
position: relative;
overflow: hidden;
padding: 1rem 2.5rem;
border-radius: 99px;
background: var(--tft-h2-dark);
color: white;
transition: all 0.4s ease;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.tft-page-home-2 .tft-btn-discover::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--tft-lime);
transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
}
.tft-page-home-2 .tft-btn-discover:hover::before {
left: 0;
}
.tft-page-home-2 .tft-btn-discover span {
position: relative;
z-index: 2;
color: inherit;
transition: color 0.4s ease;
}
.tft-page-home-2 .tft-btn-discover:hover span {
color: var(--tft-h2-dark);
}
.tft-page-home-2 .tft-tab-digit {
position: absolute;
top: -60px;
right: -20px;
font-family: 'Space Grotesk', serif;
font-size: 18rem;
color: var(--tft-h2-dark);
opacity: 0.03;
font-style: italic;
pointer-events: none;
}
@media (max-width: 1024px) {
.tft-page-home-2 .tft-faq-grid {
grid-template-columns: 1fr;
}
.tft-page-home-2 .tft-tab-digit {
font-size: 10rem;
top: 0;
}
} .tft-page-home-2 .tft-bg-text {
position: absolute;
font-family: 'Space Grotesk', serif;
font-size: 25vw;
line-height: 1;
color: var(--tft-h2-dark);
opacity: 0.03;
font-style: italic;
white-space: nowrap;
pointer-events: none;
z-index: 1;
}
.tft-page-home-2 .animate-spin-slow {
animation: spin 8s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} .tft-page-home-2 .tft-marquee {
overflow: hidden;
white-space: nowrap;
background: var(--tft-h2-dark);
color: var(--tft-h2-cream);
padding: 1.5rem 0;
}
.tft-page-home-2 .tft-marquee__inner {
display: inline-block;
animation: marquee 20s linear infinite;
}
.tft-page-home-2 .tft-marquee__text {
font-family: 'Space Grotesk', serif;
font-size: 4rem;
font-style: italic;
margin-right: 2rem;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@media (max-width: 1024px) {
.tft-page-home-2 .tft-bento {
grid-template-columns: 1fr;
}
.tft-page-home-2 .tft-bento__item {
grid-column: span 1 !important;
}
.tft-page-home-2 .tft-marquee__text {
font-size: 2rem;
}
} html,
.tft-page-home-3 {
margin: 0;
max-width: 100%;
overflow-x: hidden;
}
.tft-page-home-3 {
overflow: hidden;
background-color: #0d2620;
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: default;
--brand-sidebar: #094030;
--brand-lime: #d4f54c;
--brand-bg: #0d2620;
} .tft-page-home-3 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-home-3 .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-home-3 .book-shadow {
box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);
}
.tft-page-home-3 .page-left {
box-shadow: inset -10px 0 20px rgba(0, 0, 0, 0.5);
}
.tft-page-home-3 .page-right {
box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
.tft-page-home-3 .page-left {
box-shadow: inset -20px 0 30px rgba(0, 0, 0, 0.5);
}
.tft-page-home-3 .page-right {
box-shadow: inset 20px 0 30px rgba(0, 0, 0, 0.5);
}
} .tft-page-home-3 .perspective-container {
perspective: 1500px;
}
.tft-page-home-3 .book-3d {
transform-style: preserve-3d;
transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
} .tft-page-home-3 .fade-overlay {
transition: opacity 0.5s ease-in-out;
}
.tft-page-home-3 .img-pan {
transition: transform 10s ease-out;
transform: scale(1);
}
.tft-page-home-3 .img-pan.zoomed {
transform: scale(1.08);
}
.tft-page-home-3 .text-reveal {
display: inline-block;
transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.tft-page-home-3 .text-hidden {
transform: translateY(110%);
} .tft-page-home-3 .h4-col {
transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
flex: 1;
}
@media (min-width: 768px) {
.tft-page-home-3 .h4-col:hover {
flex: 1.3;
}
}
.tft-page-home-3 .h4-content {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.tft-page-home-3 .h4-col:hover .h4-content,
.tft-page-home-3 .h4-col.pre-active .h4-content {
opacity: 1;
transform: translateY(0);
}
.tft-page-home-3 .h4-col:hover .overlay-dim,
.tft-page-home-3 .h4-col.pre-active .overlay-dim {
opacity: 0.3;
} .tft-page-home-3 .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-home-3 .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-home-3 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-home-3 .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-home-3 .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-home-3 .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-home-3 .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-home-3 .menu-toggle.menu-open {
background-color: #d4f54c !important;
border-color: #d4f54c !important;
transform: scale(1);
}
.tft-page-home-3 .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-home-3 .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-home-3 .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-home-3 .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-home-3 .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-home-3 .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-home-3 .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-home-3 .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-home-3 .group:hover .social-2 {
transition-delay: 0.10s;
}
.tft-page-home-3 .group:hover .social-3 {
transition-delay: 0.05s;
}
.tft-page-home-3 .group:hover .social-4 {
transition-delay: 0s;
} .tft-page-home-3 .h3-slider-track {
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-x: contain;
cursor: grab;
}
.tft-page-home-3 .h3-slider-track.active {
cursor: grabbing;
}
.tft-page-home-3 .h3-slider-track::-webkit-scrollbar {
display: none;
}
.tft-page-home-3 .h3-card {
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateY(var(--ty, 0px)) skewX(var(--skew, 0deg)) scale(var(--scale, 0.85));
filter: brightness(0.4) grayscale(100%);
scroll-snap-align: center;
}
.tft-page-home-3 .h3-card.is-active {
--scale: 1;
filter: brightness(1) grayscale(0%);
z-index: 30;
}
@media (min-width: 768px) {
.tft-page-home-3 .h3-card.is-active:hover {
--ty: -30px;
}
}
.tft-page-home-3 .h3-category {
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
opacity: 0;
transform: translateY(10px);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
background: rgb(13 38 32);
backdrop-filter: blur(4px);
padding: 2px 8px;
border-radius: 2px;
width: fit-content;
}
.tft-page-home-3 .h3-card.is-active .h3-category {
opacity: 1 !important;
transform: translateY(0);
}
.tft-page-home-3 .h3-card-img {
filter: contrast(1.1) brightness(0.9);
transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), filter 1s ease;
}
.tft-page-home-3 .h3-card.is-active .h3-card-img {
filter: contrast(1.2) brightness(1.1);
}
.tft-page-home-3 .h3-card.is-active:hover .h3-card-img {
transform: scale(1.15);
}
.tft-page-home-3 .h3-img-wrap {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.02);
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.tft-page-home-3 .h3-card.is-active .h3-img-wrap {
border-color: rgba(255, 255, 255, 0.1);
}
.tft-page-home-3 .h3-card.is-active:hover .h3-img-wrap {
border-color: rgba(212, 245, 76, 0.3);
box-shadow: 0 60px 100px -20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(212, 245, 76, 0.1);
}
.tft-page-home-3 .h3-title {
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), text-shadow 0.8s ease, opacity 0.8s ease;
opacity: 0.3;
transform: translateY(20px);
}
.tft-page-home-3 .h3-card.is-active .h3-title {
opacity: 1;
transform: translateY(0);
}
.tft-page-home-3 .h3-card.is-active:hover .h3-title {
transform: translateX(30px) translateY(-10px);
text-shadow: 0 40px 60px rgba(0, 0, 0, 1);
} .tft-page-home-3 .h3-btn-wrapper {
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateY(40px);
opacity: 0;
border-radius: 4px;
}
.tft-page-home-3 .h3-card.is-active .h3-btn-wrapper {
opacity: 0.6;
transform: translateY(20px);
}
.tft-page-home-3 .h3-card.is-active:hover .h3-btn-wrapper {
transform: translateY(0);
opacity: 1;
}
.tft-page-home-3 .h3-btn-main {
background: white;
color: #094030;
transition: all 0.5s ease;
position: relative;
overflow: hidden;
}
.tft-page-home-3 .h3-btn-main span {
position: relative;
z-index: 10;
}
.tft-page-home-3 .h3-btn-main::before {
content: '';
position: absolute;
inset: 0;
background: var(--brand-lime);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
z-index: 0;
}
.tft-page-home-3 .h3-btn-wrapper:hover .h3-btn-main::before {
transform: scaleX(1);
transform-origin: left;
}
.tft-page-home-3 .h3-btn-main span {
position: relative;
z-index: 1;
} .tft-page-home-3 .h3-reflection {
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(212, 245, 76, 0.1) 0%, transparent 60%);
mix-blend-mode: overlay;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease;
z-index: 15;
}
.tft-page-home-3 .h3-card:hover .h3-reflection {
opacity: 1;
}
.tft-page-home-3 .h3-meta {
position: absolute;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
z-index: 20;
opacity: 0.4;
transition: all 0.6s ease;
}
.tft-page-home-3 .menu-panel-glow {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%), radial-gradient(circle at top right, rgba(212, 245, 76, 0.08), transparent 35%), #0a3d2e;
}
.tft-page-home-3 .menu-row {
position: relative;
overflow: hidden;
transition: transform 0.35s ease, padding 0.35s ease;
}
.tft-page-home-3 .menu-row::before {
content: "";
position: absolute;
inset: 10px -20px;
background: linear-gradient(90deg, rgba(212, 245, 76, 0.14), transparent 72%);
opacity: 0;
transform: translateX(-24px);
transition: transform 0.35s ease, opacity 0.35s ease;
pointer-events: none;
}
.tft-page-home-3 .menu-row:hover {
transform: translateX(8px);
padding-left: 10px;
}
.tft-page-home-3 .menu-row:hover::before {
opacity: 1;
transform: translateX(0);
}
.tft-page-home-3 .menu-submenu a {
display: inline-flex;
align-items: center;
gap: 0.8rem;
transition: color 0.3s ease, transform 0.3s ease, letter-spacing 0.3s ease;
}
.tft-page-home-3 .menu-submenu a::before {
content: "";
width: 18px;
height: 1px;
background: rgba(212, 245, 76, 0.35);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.tft-page-home-3 .menu-submenu a:hover {
color: #fff;
transform: translateX(-6px);
letter-spacing: 0.02em;
}
.tft-page-home-3 .menu-submenu a:hover::before {
transform: scaleX(1);
}
.tft-page-home-3 .h3-card:hover .h3-meta {
opacity: 0.8;
transform: translateY(-10px);
} .tft-page-home-3 .h3-btn-wrapper {
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateY(40px);
opacity: 0;
border-radius: 4px;
}
.tft-page-home-3 .h3-card:hover .h3-btn-wrapper {
transform: translateY(0);
opacity: 1;
}
.tft-page-home-3 .h3-btn-main {
background: white;
color: var(--brand-sidebar);
transition: all 0.5s ease;
position: relative;
overflow: hidden;
}
.tft-page-home-3 .h3-btn-main::before {
content: '';
position: absolute;
inset: 0;
background: var(--brand-lime);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
z-index: 0;
}
.tft-page-home-3 .h3-btn-wrapper:hover .h3-btn-main::before {
transform: scaleX(1);
transform-origin: left;
}
.tft-page-home-3 .h3-btn-main span {
position: relative;
z-index: 1;
} .tft-page-home-3 .h3-bg-lines {
position: absolute;
inset: 0;
background-image: linear-gradient(to right, rgba(212, 245, 76, 0.03) 1px, transparent 1px);
background-size: 15% 100%;
pointer-events: none;
z-index: 1;
}
.tft-page-home-3 .h3-v-line {
position: absolute;
top: 0;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, transparent, rgba(212, 245, 76, 0.08), transparent);
pointer-events: none;
}
@keyframes rotateCompass {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.tft-page-home-3 .h3-compass {
position: absolute;
top: 50%;
left: 50%;
width: 80vh;
height: 80vh;
border: 1px dashed rgba(212, 245, 76, 0.04);
border-radius: 50%;
pointer-events: none;
z-index: 0;
animation: rotateCompass 60s linear infinite;
}
.tft-page-home-3 .h3-compass::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 110%;
height: 110%;
border: 1px solid rgba(212, 245, 76, 0.02);
border-radius: 50%;
transform: translate(-50%, -50%);
} .tft-page-home-3 .h5-list-item {
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-family: 'Space Grotesk', serif;
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.4s ease;
display: flex;
align-items: center;
background: transparent;
position: relative;
}
@media (min-width: 768px) {
.tft-page-home-3 .h5-list-item {
font-size: 1.5rem;
padding: 1.5rem 1rem;
}
}
.tft-page-home-3 .h5-list-item:hover,
.tft-page-home-3 .h5-list-item.active {
color: rgba(255, 255, 255, 1);
transform: translateX(10px);
}
.tft-page-home-3 .h5-list-item::before {
content: '+';
color: transparent;
margin-right: 0.75rem;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 300;
transition: color 0.4s ease;
}
.tft-page-home-3 .h5-list-item.active::before {
color: white;
}
.tft-page-home-3 .h5-list-item.active {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
}
.tft-page-home-3 .h5-list-item::after {
content: '';
position: absolute;
left: -100px;
top: 50%;
width: 100px;
height: 1px;
background: rgba(255, 255, 255, 0.05);
transition: background 0.4s ease;
}
.tft-page-home-3 .h5-list-item.active::after {
background: rgba(255, 255, 255, 0.2);
}
.tft-page-home-3 .h5-image {
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s ease, opacity 0.8s ease;
transform-origin: center;
}
.tft-page-home-3 .h5-image.animating-out {
opacity: 0;
transform: scale(1.15) translateY(20px);
filter: blur(12px) brightness(0.5);
}
.tft-page-home-3 .h5-image.animating-in {
opacity: 0;
transform: scale(0.9) translateY(-20px);
filter: blur(10px) brightness(1.5);
} .tft-page-home-3 #view-home-6 {
background-color: #fafbfc;
}
.tft-page-home-3 .h6-row {
transition: background-color 0.5s ease;
border-color: rgba(0, 0, 0, 0.06);
}
.tft-page-home-3 .h6-row:hover {
background-color: #ffffff;
} .tft-page-home-3 .h6-row:hover {
cursor: none;
}
.tft-page-home-3 .h6-row:hover * {
cursor: none;
} .tft-page-home-3 .h6-fan-img {
opacity: 0;
transform: translate(0, 20px) rotate(0deg) scale(0.8);
transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-home-3 .group:hover .h6-fan-img {
opacity: 1;
transform: translate(var(--x), 0) rotate(var(--r)) scale(1);
}
.tft-page-home-3 .h3-slider-track {
scrollbar-width: none;
}
.tft-page-home-3 .h3-slider-track::-webkit-scrollbar {
display: none;
}
.tft-page-home-3 .h3-index {
transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
opacity: 0.05;
transform: scale(0.8) translateX(50px);
font-style: italic;
}
.tft-page-home-3 .h3-card.is-active .h3-slider-track {
scrollbar-width: none;
}
.tft-page-home-3 .h3-index {
opacity: 0.15;
transform: scale(1) translateX(0);
color: var(--brand-lime);
} @keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.tft-page-home-3 .animate-marquee {
animation: marquee 25s linear infinite;
width: 200%;
} .tft-page-home-3 .h8-nav-item {
transition: color 0.3s ease;
color: rgba(255, 255, 255, 0.4);
}
.tft-page-home-3 .h8-nav-item:hover {
color: white;
}
.tft-page-home-3 .h8-nav-item.active {
color: white;
}
.tft-page-home-3 .h8-nav-line {
transition: width 0.4s ease, background-color 0.4s ease;
width: 2rem;
background-color: rgba(255, 255, 255, 0.3);
}
.tft-page-home-3 .h8-nav-item:hover .h8-nav-line {
background-color: rgba(255, 255, 255, 0.8);
width: 3rem;
}
.tft-page-home-3 .h8-nav-item.active .h8-nav-line {
width: 5rem;
background-color: #d4f54c;
} .tft-page-home-3 .arch-bg-grid {
background-image: linear-gradient(to bottom right, transparent 49.9%, rgba(9, 64, 48, 0.15) 50%, transparent 50.1%), linear-gradient(to top right, transparent 49.9%, rgba(9, 64, 48, 0.15) 50%, transparent 50.1%), linear-gradient(to right, transparent 49.9%, rgba(9, 64, 48, 0.15) 50%, transparent 50.1%), linear-gradient(to bottom, transparent 49.9%, rgba(9, 64, 48, 0.15) 50%, transparent 50.1%);
background-size: 100% 100%, 100% 100%, 33.33% 100%, 100% 33.33%;
background-position: center;
} .tft-page-home-4 {
margin: 0;
overflow: hidden;
background-color: #0d2620;
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: default;
} .tft-page-home-4 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-home-4 .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-home-4 .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-home-4 .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-home-4 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-home-4 .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-home-4 .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-home-4 .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-home-4 .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-home-4 .menu-toggle.menu-open {
background-color: #d4f54c !important;
border-color: #d4f54c !important;
transform: scale(1);
}
.tft-page-home-4 .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-home-4 .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-home-4 .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-home-4 .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-home-4 .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-home-4 .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-home-4 .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-home-4 .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-home-4 .group:hover .social-2 {
transition-delay: 0.10s;
}
.tft-page-home-4 .group:hover .social-3 {
transition-delay: 0.05s;
}
.tft-page-home-4 .group:hover .social-4 {
transition-delay: 0s;
} .tft-page-home-4 .h4-col {
transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
flex: 1;
}
@media (min-width: 768px) {
.tft-page-home-4 .h4-col:hover {
flex: 1.3;
}
}
.tft-page-home-4 .h4-content {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.tft-page-home-4 .h4-col:hover .h4-content,
.tft-page-home-4 .h4-col.pre-active .h4-content {
opacity: 1;
transform: translateY(0);
}
.tft-page-home-4 .h4-col:hover .overlay-dim,
.tft-page-home-4 .h4-col.pre-active .overlay-dim {
opacity: 0.3;
} .tft-page-home-5 {
margin: 0;
overflow: hidden;
background-color: #0d2620;
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: default;
} .tft-page-home-5 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-home-5 .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-home-5 .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-home-5 .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-home-5 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-home-5 .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-home-5 .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-home-5 .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-home-5 .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-home-5 .menu-toggle.menu-open {
background-color: #d4f54c !important;
border-color: #d4f54c !important;
transform: scale(1);
}
.tft-page-home-5 .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-home-5 .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-home-5 .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-home-5 .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-home-5 .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-home-5 .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-home-5 .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-home-5 .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-home-5 .group:hover .social-2 {
transition-delay: 0.10s;
}
.tft-page-home-5 .group:hover .social-3 {
transition-delay: 0.05s;
}
.tft-page-home-5 .group:hover .social-4 {
transition-delay: 0s;
} .tft-page-home-5 .h5-list-item {
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-family: 'Space Grotesk', serif;
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: color 0.28s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.28s ease, letter-spacing 0.28s ease, opacity 0.28s ease;
display: flex;
align-items: center;
background: transparent;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.tft-page-home-5 .h5-list-item {
font-size: 1.5rem;
padding: 1.5rem 0.5rem;
}
}
.tft-page-home-5 .h5-list-item:hover,
.tft-page-home-5 .h5-list-item.active {
color: rgba(255, 255, 255, 1);
transform: translateX(10px);
letter-spacing: 0.015em;
}
.tft-page-home-5 .h5-list-item::before {
content: '+';
color: transparent;
margin-right: 0.75rem;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 300;
transition: color 0.24s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.tft-page-home-5 .h5-list-item.active::before {
color: white;
}
.tft-page-home-5 .h5-list-item:hover::before,
.tft-page-home-5 .h5-list-item.active::before {
transform: translateX(4px) rotate(90deg);
}
.tft-page-home-5 .h5-list-item.active {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 65%, transparent 100%);
}
.tft-page-home-5 .h5-list-item::after {
content: '';
position: absolute;
left: -100px;
top: 50%;
width: 100px;
height: 1px;
background: rgba(255, 255, 255, 0.05);
transition: background 0.24s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.tft-page-home-5 .h5-list-item.active::after {
background: rgba(255, 255, 255, 0.24);
transform: translateX(16px);
}
.tft-page-home-5 .h5-list-item::selection {
background: rgba(212, 245, 76, 0.22);
}
.tft-page-home-5 .h5-list-item:not(.active) {
opacity: 0.74;
}
.tft-page-home-5 .h5-list-item:hover,
.tft-page-home-5 .h5-list-item.active {
opacity: 1;
}
.tft-page-home-5 .h5-image-shell {
position: absolute;
inset: 0;
overflow: hidden;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
}
.tft-page-home-5 .h5-image-frame,
.tft-page-home-5 .h5-image-veil {
position: absolute;
inset: 0;
pointer-events: none;
}
.tft-page-home-5 .h5-image-frame {
border: 1px solid rgba(255, 255, 255, 0.08);
z-index: 5;
}
.tft-page-home-5 .h5-image-frame::before,
.tft-page-home-5 .h5-image-frame::after {
content: "";
position: absolute;
background: rgba(255, 255, 255, 0.72);
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}
.tft-page-home-5 .h5-image-frame::before {
width: 52px;
height: 1px;
top: 18px;
left: 18px;
}
.tft-page-home-5 .h5-image-frame::after {
width: 1px;
height: 52px;
right: 18px;
bottom: 18px;
}
.tft-page-home-5 .h5-image-wrap:hover .h5-image-frame::before {
transform: translateX(12px);
}
.tft-page-home-5 .h5-image-wrap:hover .h5-image-frame::after {
transform: translateY(-12px);
}
.tft-page-home-5 .h5-image-veil {
z-index: 4;
background: linear-gradient(to top, rgba(4, 12, 10, 0.48), rgba(4, 12, 10, 0.14) 42%, rgba(255, 255, 255, 0.01));
transition: opacity 0.42s ease;
}
.tft-page-home-5 .h5-image-meta {
position: absolute;
top: 18px;
right: 18px;
z-index: 6;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
pointer-events: none;
}
.tft-page-home-5 .h5-image-index,
.tft-page-home-5 .h5-image-tag {
background: rgba(8, 26, 22, 0.52);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.88);
}
.tft-page-home-5 .h5-image-index {
padding: 0.65rem 0.85rem;
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
}
.tft-page-home-5 .h5-image-tag {
writing-mode: vertical-rl;
transform: rotate(180deg);
padding: 1rem 0.55rem;
font-size: 0.64rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(212, 245, 76, 0.9);
}
.tft-page-home-5 .h5-image-wrap {
position: relative;
isolation: isolate;
overflow: hidden;
--h5-shift-x: 0px;
--h5-shift-y: 0px;
}
.tft-page-home-5 .h5-image-layer {
position: absolute;
inset: -8%;
background-size: cover;
background-position: center;
transform-origin: center;
will-change: transform, opacity, clip-path, filter;
}
.tft-page-home-5 .h5-image-current {
z-index: 2;
transform: translate3d(var(--h5-shift-x), var(--h5-shift-y), 0) scale(1);
transition: filter 0.52s ease, opacity 0.52s ease, transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.tft-page-home-5 .h5-image-next {
z-index: 3;
opacity: 0;
clip-path: inset(0 0 100% 0);
transform: scale(1.08) translate3d(0, 26px, 0);
transition: clip-path 0.68s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease, transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}
.tft-page-home-5 .h5-image-wrap.is-dir-prev .h5-image-next {
clip-path: inset(100% 0 0 0);
transform: scale(1.08) translate3d(0, -26px, 0);
}
.tft-page-home-5 .h5-image-wrap:hover .h5-image-current {
transform: translate3d(var(--h5-shift-x), var(--h5-shift-y), 0) scale(1.045);
filter: saturate(1.02) contrast(1.04);
}
.tft-page-home-5 .h5-image-wrap:hover .h5-image-veil {
opacity: 0.74;
}
.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-current {
filter: saturate(0.9) brightness(0.78);
transform: translate3d(0, 0, 0) scale(0.96);
}
.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-next {
opacity: 1;
clip-path: inset(0 0 0 0);
transform: scale(1);
}
.tft-page-home-5 .h5-image-meta {
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}
.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-meta {
opacity: 0;
transform: translateY(-12px);
}
.tft-page-home-5 .h5-image-shell::after {
content: "";
position: absolute;
inset: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
opacity: 0;
transform: scale(0.985);
transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
z-index: 6;
}
.tft-page-home-5 .h5-image-wrap:hover .h5-image-shell::after,
.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-shell::after {
opacity: 1;
transform: scale(1);
}
.tft-page-home-5 .h5-counter-wrap {
position: relative;
width: 92px;
height: 92px;
display: grid;
place-items: center;
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.tft-page-home-5 .h5-counter-core {
position: relative;
z-index: 2;
width: 68px;
height: 68px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 10px !important;
background: transparent;
box-shadow: none;
}
.tft-page-home-5 .h5-counter-ring {
position: absolute;
inset: 0;
}
.tft-page-home-5 .h5-counter-ring path {
stroke: rgba(212, 245, 76, 0.9);
}
.tft-page-home-5 #h5-counter {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
min-height: 1em;
transform: none;
transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}
.tft-page-home-5 .h5-counter-wrap.is-updating {
transform: rotate(-8deg) scale(0.96);
}
.tft-page-home-5 .h5-counter-wrap.is-updating #h5-counter {
opacity: 0.35;
transform: translateY(8px);
}
.tft-page-home-5 #h5-btn-prev,
.tft-page-home-5 #h5-btn-next {
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.tft-page-home-5 #h5-btn-prev:hover,
.tft-page-home-5 #h5-btn-next:hover {
transform: translateY(-4px) scale(1.04);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
@media (max-width: 767px) {
.tft-page-home-5 .h5-image-meta {
top: 12px;
right: 12px;
}
.tft-page-home-5 .h5-image-index {
padding: 0.5rem 0.65rem;
font-size: 0.58rem;
}
.tft-page-home-5 .h5-image-tag {
display: none;
}
} .tft-page-home-6 {
margin: 0;
overflow: hidden;
background-color: #0d2620;
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: default;
} .tft-page-home-6 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-home-6 .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-home-6 .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-home-6 .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-home-6 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-home-6 .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-home-6 .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-home-6 .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-home-6 .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-home-6 .menu-toggle.menu-open {
background-color: #d4f54c !important;
border-color: #d4f54c !important;
transform: scale(1);
}
.tft-page-home-6 .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-home-6 .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-home-6 .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-home-6 .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-home-6 .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-home-6 .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-home-6 .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-home-6 .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-home-6 .group:hover .social-2 {
transition-delay: 0.10s;
}
.tft-page-home-6 .group:hover .social-3 {
transition-delay: 0.05s;
}
.tft-page-home-6 .group:hover .social-4 {
transition-delay: 0s;
} .tft-page-home-6 #view-home-6 {
background-color: #fafbfc;
}
.tft-page-home-6 .h6-row {
position: relative;
transition: background-color 0.4s ease, transform 0.4s ease;
border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
margin-bottom: 0;
overflow: hidden;
} .tft-page-home-6 .h6-row::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #d4f54c;
transform-origin: left;
transform: scaleX(0);
transition: transform 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 15;
pointer-events: none;
}
.tft-page-home-6 .h6-row:hover::after {
transform: scaleX(1);
}
.tft-page-home-6 .h6-row:hover {
background-color: #ffffff;
transform: scale(1.002);
z-index: 5;
cursor: none;
} .tft-page-home-6 .h6-row>div:nth-child(2) {
padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;
}
@media (min-width: 768px) {
.tft-page-home-6 .h6-row>div:nth-child(2) {
padding-top: 0.75rem !important; padding-bottom: 0.75rem !important;
}
}
.tft-page-home-6 .h6-row:hover * {
cursor: none;
} .tft-page-home-6 {
overflow-x: hidden !important;
width: 100vw;
}
.tft-page-home-6 #view-home-6 {
width: 100%;
overflow-x: hidden !important;
}
.tft-page-home-6 .h6-index {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
}
.tft-page-home-6 .h6-index::before {
content: "";
position: absolute;
width: 52px;
height: 52px;
border-radius: 999px;
background: radial-gradient(circle, rgb(212 245 76 / 54%), rgba(212, 245, 76, 0.06) 65%, hsl(0deg 0% 0% / 12%) 72%);
opacity: 0;
transform: scale(0.7);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.tft-page-home-6 .h6-row:hover .h6-index::before {
opacity: 1;
transform: scale(1);
}
.tft-page-home-6 .group:hover .group-hover\:text-brand-lime {
--tw-text-opacity: 1;
color: #000 !important;
}
.tft-page-home-6 .h6-fan-img {
opacity: 0;
transform: translate(0, 10px) rotate(0deg) scale(0.9);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
will-change: transform, opacity;
}
.tft-page-home-6 .h6-row:hover .h6-fan-img {
opacity: 1;
transform: translate(var(--x), 0) rotate(var(--r)) scale(1);
transition-delay: var(--d);
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.tft-page-home-6 .animate-marquee {
animation: marquee 25s linear infinite;
width: 200%;
} .tft-page-home-7 {
margin: 0;
overflow: hidden;
background-color: #0d2620;
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: default;
} .tft-page-home-7 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-home-7 .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-home-7 .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-home-7 .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-home-7 .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-home-7 .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-home-7 .no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-home-7 .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-home-7 .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-home-7 .menu-toggle.menu-open {
background-color: #d4f54c !important;
border-color: #d4f54c !important;
transform: scale(1);
}
.tft-page-home-7 .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-home-7 .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-home-7 .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-home-7 .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-home-7 .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-home-7 .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-home-7 .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-home-7 .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-home-7 .group:hover .social-2 {
transition-delay: 0.10s;
}
.tft-page-home-7 .group:hover .social-3 {
transition-delay: 0.05s;
}
.tft-page-home-7 .group:hover .social-4 {
transition-delay: 0s;
} .tft-page-home-7 .h7-card {
position: relative;
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, rgba(9, 64, 48, 0.82), rgba(9, 64, 48, 0.68));
transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.tft-page-home-7 .h7-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(212, 245, 76, 0.08), transparent 36%, rgba(0, 0, 0, 0.14));
opacity: 0;
transition: opacity 0.18s ease;
z-index: 1;
}
.tft-page-home-7 .h7-card::after {
content: "";
position: absolute;
inset: 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
opacity: 0;
transform: scale(0.96);
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 1;
}
.tft-page-home-7 .h7-card:hover {
transform: translateY(-8px);
border-color: rgba(212, 245, 76, 0.28);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.tft-page-home-7 .h7-card:hover::before,
.tft-page-home-7 .h7-card:hover::after {
opacity: 1;
transform: scale(1);
}
.tft-page-home-7 .h7-card-img {
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease;
filter: brightness(0.62) saturate(0.95);
}
.tft-page-home-7 .h7-card:hover .h7-card-img {
transform: scale(1.09);
filter: brightness(0.9) saturate(1.05);
}
.tft-page-home-7 .h7-card-content {
position: relative;
z-index: 2;
}
.tft-page-home-7 .h7-kicker {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-size: 10px;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.tft-page-home-7 .h7-kicker::before {
content: "";
width: 18px;
height: 1px;
background: rgba(212, 245, 76, 0.75);
}
.tft-page-home-7 .h7-badge {
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.88);
background: rgba(255, 255, 255, 0.06);
transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tft-page-home-7 .h7-card:hover .h7-badge {
transform: translateY(-2px);
background: #d4f54c;
color: #094030;
border-color: #d4f54c;
}
.tft-page-home-7 .h7-index {
position: absolute;
top: 22px;
right: 22px;
width: 46px;
height: 46px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(9, 64, 48, 0.62);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #d4f54c;
font-size: 11px;
letter-spacing: 0.24em;
backdrop-filter: blur(8px);
transition: transform 0.15s ease, background-color 0.15s ease;
z-index: 2;
}
.tft-page-home-7 .h7-card:hover .h7-index {
transform: scale(1.06);
background: rgba(212, 245, 76, 0.14);
}
.tft-page-home-7 .h7-desc {
max-width: 19rem;
color: rgba(255, 255, 255, 0.76);
line-height: 1.7;
transition: color 0.15s ease, transform 0.15s ease;
}
.tft-page-home-7 .h7-card:hover .h7-desc {
color: rgba(255, 255, 255, 0.94);
transform: translateY(-2px);
}
.tft-page-home-7 .h7-card {
transform-style: preserve-3d;
}
.tft-page-home-7 .h7-card-content {
z-index: 3;
}
.tft-page-home-7 .h7-card-title,
.tft-page-home-7 .h7-desc,
.tft-page-home-7 .h7-index,
.tft-page-home-7 .h7-badge {
transition: transform .2s ease, color .18s ease, opacity .18s ease;
}
.tft-page-home-7 .h7-card:hover .h7-card-title {
transform: translateY(-4px);
color: #ffffff;
}
.tft-page-home-7 .h7-card:hover .h7-desc {
transform: translateY(-2px);
}
.tft-page-home-7 .h7-card:hover .h7-badge {
box-shadow: 0 16px 30px rgba(212, 245, 76, .18);
} .tft-page-index {
margin: 0;
overflow: hidden;
background-color: #0d2620;
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
cursor: default;
} .tft-page-index .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-index .view-section {
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
} .tft-page-index .book-shadow {
box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);
}
.tft-page-index .page-left {
box-shadow: inset -10px 0 20px rgba(0, 0, 0, 0.5);
}
.tft-page-index .page-right {
box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
.tft-page-index .page-left {
box-shadow: inset -20px 0 30px rgba(0, 0, 0, 0.5);
}
.tft-page-index .page-right {
box-shadow: inset 20px 0 30px rgba(0, 0, 0, 0.5);
}
} .tft-page-index .perspective-container {
perspective: 1500px;
}
.tft-page-index .book-3d {
transform-style: preserve-3d;
transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
} .tft-page-index .fade-overlay {
transition: opacity 0.5s ease-in-out;
}
.tft-page-index .img-pan {
transition: transform 10s ease-out;
transform: scale(1);
}
.tft-page-index .img-pan.zoomed {
transform: scale(1.08);
}
.tft-page-index .text-reveal {
display: inline-block;
transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.tft-page-index .text-hidden {
transform: translateY(110%);
} .tft-page-index .h4-col {
transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
flex: 1;
}
@media (min-width: 768px) {
.tft-page-index .h4-col:hover {
flex: 1.3;
}
}
.tft-page-index .h4-content {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.tft-page-index .h4-col:hover .h4-content,
.tft-page-index .h4-col.pre-active .h4-content {
opacity: 1;
transform: translateY(0);
}
.tft-page-index .h4-col:hover .overlay-dim,
.tft-page-index .h4-col.pre-active .overlay-dim {
opacity: 0.3;
} .tft-page-index ::-webkit-scrollbar {
width: 5px;
}
.tft-page-index ::-webkit-scrollbar-track {
background: #0d2620;
}
.tft-page-index ::-webkit-scrollbar-thumb {
background: rgba(212, 245, 76, 0.3);
border-radius: 10px;
}
.tft-page-index ::-webkit-scrollbar-thumb:hover {
background: #d4f54c;
} .tft-page-index .menu-no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-index .menu-no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-index .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-index .menu-toggle.menu-open {
background-color: #d4f54c !important;
border-color: #d4f54c !important;
transform: scale(1);
}
.tft-page-index .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-index .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-index .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-index .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-index .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-index .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-index .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-index .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-index .group:hover .social-2 {
transition-delay: 0.10s;
}
.tft-page-index .group:hover .social-3 {
transition-delay: 0.05s;
}
.tft-page-index .group:hover .social-4 {
transition-delay: 0s;
} .tft-page-project-detail :root {
--brand-bg: #0d2620;
--brand-lime: #d4f54c;
}
.tft-page-project-detail {
margin: 0;
background-color: var(--brand-bg);
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
overflow-x: hidden;
} .tft-page-project-detail .tft-title {
font-size: clamp(3rem, 10vw, 8rem);
}
.tft-page-project-detail .tft-subtitle {
font-size: clamp(1.25rem, 3vw, 2.5rem);
} .tft-page-project-detail ::-webkit-scrollbar {
width: 5px;
}
.tft-page-project-detail ::-webkit-scrollbar-track {
background: var(--brand-bg, #0d2620);
}
.tft-page-project-detail ::-webkit-scrollbar-thumb {
background: rgba(212, 245, 76, 0.3);
border-radius: 10px;
}
.tft-page-project-detail ::-webkit-scrollbar-thumb:hover {
background: #d4f54c;
} .tft-page-project-detail .menu-no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-project-detail .menu-no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-project-detail .reveal-up {
transform: translateY(50px);
opacity: 0;
transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.tft-page-project-detail .reveal-up.is-visible {
transform: translateY(0);
opacity: 1;
} .tft-page-project-detail .tft-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
}
.tft-page-project-detail .grid-item-wide {
grid-column: span 12;
}
.tft-page-project-detail .grid-item-mid-l {
grid-column: span 8;
}
.tft-page-project-detail .grid-item-mid-r {
grid-column: span 4;
}
.tft-page-project-detail .grid-item-sm {
grid-column: span 6;
} .tft-page-project-detail .tft-scan-wrapper {
position: relative;
overflow: hidden;
}
.tft-page-project-detail .tft-scan-wrapper::after {
content: '';
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent, rgba(212, 245, 76, 0.1), transparent);
animation: scan 6s linear infinite;
pointer-events: none;
}
@keyframes scan {
0% {
top: -100%;
}
100% {
top: 100%;
}
} .tft-page-project-detail .tft-next-pjt {
position: relative;
cursor: pointer;
transition: transform 0.3s ease;
} .tft-page-project-detail .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-project-detail .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tft-page-project-detail .menu-toggle.menu-open {
color: #094030 !important;
}
.tft-page-project-detail .hamburger-line {
transition: all 0.4s ease;
transform-origin: center;
}
.tft-page-project-detail .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-project-detail .menu-toggle.menu-open .line-2 {
opacity: 0;
}
.tft-page-project-detail .menu-toggle.menu-open .line-3 {
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
} .tft-page-project-detail .tft-hero {
height: 100dvh;
position: relative;
overflow: hidden;
}
.tft-page-project-detail .tft-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.1);
transition: transform 0.1s linear;
}
.tft-page-project-detail .tft-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(13, 38, 32, 0.3) 0%, rgba(13, 38, 32, 0.95) 100%);
} .tft-page-project-detail .tft-spec-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-block: 1.5rem;
} .tft-page-services {
margin: 0;
background-color: #0d2620;
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
overflow-x: hidden;
} .tft-page-services .noise-bg::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/noise.svg);
opacity: 0.05;
pointer-events: none;
z-index: 50;
} .tft-page-services .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-services ::-webkit-scrollbar {
width: 5px;
}
.tft-page-services ::-webkit-scrollbar-track {
background: var(--brand-bg, #0d2620);
}
.tft-page-services ::-webkit-scrollbar-thumb {
background: rgba(212, 245, 76, 0.3);
border-radius: 10px;
}
.tft-page-services ::-webkit-scrollbar-thumb:hover {
background: #d4f54c;
} .tft-page-services .menu-no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-services .menu-no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-services .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-services .menu-toggle.menu-open {
background-color: #d4f54c !important;
border-color: #d4f54c !important;
transform: scale(1);
}
.tft-page-services .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-services .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-services .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-services .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
} .tft-page-services .reveal-up {
opacity: 0;
transform: translateY(50px);
transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tft-page-services .reveal-up.active {
opacity: 1;
transform: translateY(0);
} .tft-page-services .service-card {
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
border: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
z-index: 1;
}
.tft-page-services .service-card:hover {
border-color: #d4f54c;
background: rgba(212, 245, 76, 0.02);
transform: translateY(-10px);
}
.tft-page-services .service-card-img {
filter: grayscale(1) contrast(1.1) brightness(0.8);
transition: filter 0.8s ease;
}
.tft-page-services .service-card:hover .service-card-img {
filter: grayscale(0) contrast(1) brightness(1);
} .tft-page-services .service-card:hover i,
.tft-page-services .service-card:hover svg {
color: #0d2620 !important;
stroke: #0d2620 !important;
} .tft-page-services .step-dot {
transition: all 0.5s ease;
box-shadow: 0 0 0 rgba(212, 245, 76, 0);
}
.tft-page-services .step-item.active .step-dot {
background: #d4f54c;
box-shadow: 0 0 20px #d4f54c, 0 0 40px rgba(212, 245, 76, 0.3);
} .tft-page-services .faq-deck {
display: grid;
gap: 1.25rem;
}
.tft-page-services .faq-panel {
position: relative;
overflow: hidden;
border: 1px solid rgba(212, 245, 76, 0.12);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), radial-gradient(circle at top right, rgba(212, 245, 76, 0.12), transparent 34%);
transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.tft-page-services .faq-panel::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(212, 245, 76, 0.08), transparent 32%, transparent 68%, rgba(212, 245, 76, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.tft-page-services .faq-panel:hover {
transform: translateY(-4px);
border-color: rgba(212, 245, 76, 0.3);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}
.tft-page-services .faq-panel:hover::before,
.tft-page-services .faq-panel.is-open::before {
opacity: 1;
}
.tft-page-services .faq-panel.is-open {
border-color: rgba(212, 245, 76, 0.42);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)), radial-gradient(circle at top right, rgba(212, 245, 76, 0.22), transparent 40%);
box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
}
.tft-page-services .faq-trigger {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1.5rem;
align-items: center;
text-align: left;
background: transparent;
border: 0;
padding: 2rem;
color: inherit;
cursor: pointer;
}
.tft-page-services .faq-kicker {
display: block;
margin-bottom: 0.9rem;
font-size: 0.65rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: rgba(212, 245, 76, 0.7);
}
.tft-page-services .faq-title {
margin: 0;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: clamp(1.6rem, 2vw, 2.2rem);
line-height: 1.05;
letter-spacing: -0.03em;
transition: color 0.24s ease, transform 0.24s ease;
}
.tft-page-services .faq-panel:hover .faq-title,
.tft-page-services .faq-panel.is-open .faq-title {
color: #d4f54c;
transform: translateX(4px);
}
.tft-page-services .faq-summary {
display: block;
margin-top: 0.9rem;
color: rgba(255, 255, 255, 0.44);
font-size: 0.98rem;
line-height: 1.75;
max-width: 44rem;
}
.tft-page-services .faq-orb {
width: 64px;
height: 64px;
border-radius: 9999px;
border: 1px solid rgba(212, 245, 76, 0.2);
background: rgba(255, 255, 255, 0.03);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
flex-shrink: 0;
}
.tft-page-services .faq-orb::before,
.tft-page-services .faq-orb::after {
content: "";
position: absolute;
background: #d4f54c;
border-radius: 999px;
transition: transform 0.28s ease, opacity 0.28s ease;
}
.tft-page-services .faq-orb::before {
width: 20px;
height: 2px;
}
.tft-page-services .faq-orb::after {
width: 2px;
height: 20px;
}
.tft-page-services .faq-panel:hover .faq-orb,
.tft-page-services .faq-panel.is-open .faq-orb {
border-color: rgba(212, 245, 76, 0.45);
background: rgba(212, 245, 76, 0.08);
box-shadow: 0 0 30px rgba(212, 245, 76, 0.12);
}
.tft-page-services .faq-panel.is-open .faq-orb {
transform: rotate(180deg) scale(1.04);
}
.tft-page-services .faq-panel.is-open .faq-orb::after {
transform: scaleY(0);
opacity: 0;
}
.tft-page-services .faq-content {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}
.tft-page-services .faq-panel.is-open .faq-content {
opacity: 1;
}
.tft-page-services .faq-content-inner {
padding: 0 2rem 2rem;
}
.tft-page-services .faq-content-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.8fr);
gap: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tft-page-services .faq-.tft-page-services {
margin: 0;
color: rgba(255, 255, 255, 0.66);
line-height: 1.85;
font-size: 1rem;
}
.tft-page-services .faq-meta {
padding: 1.1rem 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
.tft-page-services .faq-meta-label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.68rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
}
.tft-page-services .faq-meta-value {
margin: 0;
color: #f2f7ea;
font-size: 0.98rem;
line-height: 1.7;
}
@media (max-width: 768px) {
.tft-page-services .faq-trigger {
padding: 1.5rem;
grid-template-columns: minmax(0, 1fr);
}
.tft-page-services .faq-orb {
width: 52px;
height: 52px;
}
.tft-page-services .faq-content-inner {
padding: 0 1.5rem 1.5rem;
}
.tft-page-services .faq-content-grid {
grid-template-columns: 1fr;
}
} .tft-page-services .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-services .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-services .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-services .group:hover .social-2 {
transition-delay: 0.1s;
}
.tft-page-services .group:hover .social-3 {
transition-delay: 0.05s;
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-services .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-single-post {
margin: 0;
background-color: #0d2620;
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
overflow-x: hidden;
} .tft-page-single-post ::-webkit-scrollbar {
width: 5px;
}
.tft-page-single-post ::-webkit-scrollbar-track {
background: var(--brand-bg, #0d2620);
}
.tft-page-single-post ::-webkit-scrollbar-thumb {
background: rgba(212, 245, 76, 0.3);
border-radius: 10px;
}
.tft-page-single-post ::-webkit-scrollbar-thumb:hover {
background: #d4f54c;
} .tft-page-single-post .menu-no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-single-post .menu-no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-single-post .progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(255, 255, 255, 0.05);
z-index: 100;
}
.tft-page-single-post .progress-bar {
width: 0%;
height: 3px;
background: #d4f54c;
transition: width 0.1s ease;
} .tft-page-single-post .menu-toggle {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}
.tft-page-single-post .menu-toggle.menu-open {
background-color: #d4f54c !important;
border-color: #d4f54c !important;
transform: scale(1);
}
.tft-page-single-post .hamburger-line {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.tft-page-single-post .menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg);
background-color: #094030 !important;
}
.tft-page-single-post .menu-toggle.menu-open .line-2 {
opacity: 0;
transform: translateX(15px);
}
.tft-page-single-post .menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg);
background-color: #094030 !important;
}  .tft-page-single-post .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} @keyframes wave {
0% {
transform: rotate(0deg);
}
15% {
transform: rotate(20deg);
}
30% {
transform: rotate(-15deg);
}
45% {
transform: rotate(20deg);
}
60% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.tft-page-single-post .animate-wave {
animation: wave 1.5s ease-in-out infinite;
transform-origin: 70% 70%;
} .tft-page-single-post .social-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tft-page-single-post .group:hover .social-item {
opacity: 1;
transform: translateY(0);
}
.tft-page-single-post .group:hover .social-1 {
transition-delay: 0.15s;
}
.tft-page-single-post .group:hover .social-2 {
transition-delay: 0.10s;
}
.tft-page-single-post .social-badge {
width: 3rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.tft-page-single-post .social-badge:hover {
transform: translateY(-4px);
border-color: #d4f54c;
background: #d4f54c;
color: #094030;
}
.tft-page-single-post .social-badge svg {
width: 1rem;
height: 1rem;
} .tft-page-single-post .article-body p {
font-size: clamp(1rem, 1.2vw, 1.25rem);
line-height: 1.8;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 2rem;
font-weight: 300;
}
.tft-page-single-post .article-body h2 {
font-family: 'Space Grotesk', serif;
font-size: clamp(2rem, 3vw, 3.5rem);
line-height: 1.2;
margin: 4rem 0 2rem;
}
.tft-page-single-post .article-body blockquote {
border-left: 2px solid #d4f54c;
padding-left: 2rem;
margin: 3rem 0;
font-family: 'Space Grotesk', serif;
font-style: italic;
font-size: 1.5rem;
color: #d4f54c;
} .tft-page-single-post .toc-link.active {
color: #d4f54c;
transform: translateX(5px);
}
.tft-page-single-post .toc-link {
transition: all 0.3s ease;
} .tft-page-single-post .form-input:focus {
border-color: #d4f54c;
outline: none;
background: rgba(255, 255, 255, 0.05);
} .tft-page-single-post .comment-item {
border-left: 1px solid rgba(255, 255, 255, 0.05);
}
.tft-page-single-post .reveal-up {
opacity: 0;
transform: translateY(30px);
transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tft-page-single-post .reveal-up.active {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 1024px) {
.tft-page-single-post .toc-sidebar {
display: none;
}
} .tft-page-works-alt {
margin: 0;
background-color: #0d2620;
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
overflow-x: hidden;
transition: background-color 1s cubic-bezier(0.19, 1, 0.22, 1);
} .tft-page-works-alt .noise-bg::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/noise.svg);
opacity: 0.05;
pointer-events: none;
z-index: 200;
} .tft-page-works-alt .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-works-alt .split-container {
display: flex;
height: 100vh;
width: 100vw;
}
.tft-page-works-alt .left-panel {
width: 50%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
z-index: 20;
padding-left: clamp(160px, 20vw, 300px);
padding-top: 35vh;
padding-bottom: 60vh;
scroll-behavior: smooth;
}
.tft-page-works-alt .left-panel {
scrollbar-width: thin;
scrollbar-color: rgba(212, 245, 76, 0.45) rgba(255, 255, 255, 0.04);
}
@supports (scrollbar-gutter: stable) {
.tft-page-works-alt .left-panel {
scrollbar-gutter: stable;
}
}
.tft-page-works-alt .left-panel::-webkit-scrollbar {
width: 8px;
}
.tft-page-works-alt .left-panel::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.04);
}
.tft-page-works-alt .left-panel::-webkit-scrollbar-thumb {
background: rgba(212, 245, 76, 0.35);
border-radius: 999px;
}
.tft-page-works-alt .left-panel::-webkit-scrollbar-thumb:hover {
background: rgba(212, 245, 76, 0.7);
}
.tft-page-works-alt .right-panel {
width: 50%;
height: 100%;
position: relative;
overflow: hidden;
z-index: 10;
background: #000;
} .tft-page-works-alt .project-item {
position: relative;
margin-bottom: 15rem;
cursor: pointer;
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.tft-page-works-alt .project-item h2 {
font-family: 'Space Grotesk', serif;
font-size: clamp(60px, 9vw, 150px);
line-height: 0.75;
letter-spacing: -0.06em;
color: rgba(255, 255, 255, 0.03);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
pointer-events: none;
}
.tft-page-works-alt .project-item.active h2,
.tft-page-works-alt .project-item:hover h2 {
color: #d4f54c;
transform: translateX(50px);
font-style: italic;
opacity: 1;
}
.tft-page-works-alt .project-item .item-num {
position: absolute;
left: -90px;
top: 25px;
font-size: 13px;
font-weight: 900;
color: #d4f54c;
opacity: 0;
letter-spacing: 0.5em;
transition: opacity 0.8s;
}
.tft-page-works-alt .project-item.active .item-num {
opacity: 1;
} .tft-page-works-alt .viewport-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 1;
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transition: opacity 1s ease-in-out;
transform: scale(1.3);
}
.tft-page-works-alt .viewport-image.active {
opacity: 1;
z-index: 2;
animation: kinetic-wipe 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes kinetic-wipe {
0% {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transform: scale(1.4) rotate(5deg);
filter: brightness(0) blur(20px);
}
100% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transform: scale(1) rotate(0deg);
filter: brightness(1) blur(0);
}
} .tft-page-works-alt #kinetic-cursor {
width: 150px;
height: 150px;
border-radius: 50%;
border: 1px solid rgba(212, 245, 76, 0.15);
position: fixed;
pointer-events: none;
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
transition: width 0.8s, height 0.8s, border-color 0.8s;
}
.tft-page-works-alt #kinetic-cursor::after {
content: "VIEW";
font-size: 10px;
font-weight: 900;
color: #d4f54c;
letter-spacing: 0.5em;
opacity: 0;
transition: opacity 0.5s;
}
.tft-page-works-alt .project-item:hover~#kinetic-cursor,
.tft-page-works-alt #kinetic-cursor.on-item {
width: 200px;
height: 200px;
border-color: #d4f54c;
}
.tft-page-works-alt .project-item:hover~#kinetic-cursor::after,
.tft-page-works-alt #kinetic-cursor.on-item::after {
opacity: 1;
} .tft-page-works :root {
--tft-bg: #0d2620;
--tft-sidebar: #094030;
--tft-lime: #d4f54c;
--tft-white: #ffffff;
--tft-glass: rgba(255, 255, 255, 0.05);
--tft-ease: cubic-bezier(0.19, 1, 0.22, 1);
}
.tft-page-works {
background-color: var(--tft-bg);
color: var(--tft-white);
font-family: 'Plus Jakarta Sans', sans-serif;
overflow-x: hidden;
margin: 0;
} .tft-page-works .noise-bg::before {
content: "";
position: fixed;
inset: 0;
background: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/noise.svg);
opacity: 0.04;
pointer-events: none;
z-index: 100;
} .tft-page-works .tft-ambiance {
position: fixed;
inset: 0;
background: radial-gradient(circle at 80% 20%, rgba(212, 245, 76, 0.03) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(212, 245, 76, 0.02) 0%, transparent 40%);
pointer-events: none;
z-index: 1;
} .tft-page-works .text-vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
} .tft-page-works ::-webkit-scrollbar {
width: 5px;
}
.tft-page-works ::-webkit-scrollbar-track {
background: var(--tft-bg);
}
.tft-page-works ::-webkit-scrollbar-thumb {
background: rgba(212, 245, 76, 0.3);
border-radius: 10px;
}
.tft-page-works ::-webkit-scrollbar-thumb:hover {
background: var(--tft-lime);
} .tft-page-works .menu-no-scrollbar::-webkit-scrollbar {
display: none;
}
.tft-page-works .menu-no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} .tft-page-works .tft-elite-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 768px) {
.tft-page-works .tft-elite-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.tft-page-works .tft-elite-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.tft-page-works .tft-card {
position: relative;
overflow: hidden;
background: var(--tft-sidebar);
transition: all 1.2s var(--tft-ease);
}
.tft-page-works .tft-card__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 2s var(--tft-ease);
scale: 1.1;
}
.tft-page-works .tft-card:hover .tft-card__media {
transform: scale(1.15) rotate(1deg);
}
.tft-page-works .tft-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(13, 38, 32, 0.9) 0%, transparent 60%);
opacity: 0.6;
transition: opacity 0.8s var(--tft-ease);
}
.tft-page-works .tft-card:hover .tft-card__overlay {
opacity: 0.9;
}
.tft-page-works .tft-card__content {
position: absolute;
inset: 0;
padding: clamp(2rem, 5vw, 4rem);
display: flex;
flex-direction: column;
justify-content: flex-end;
transform: translateY(20px);
transition: transform 0.8s var(--tft-ease);
}
.tft-page-works .tft-card:hover .tft-card__content {
transform: translateY(0);
}
.tft-page-works .tft-card__content,
.tft-page-works .tft-card__overlay {
pointer-events: none;
}
.tft-page-works .tft-card__link {
position: absolute;
inset: 0;
z-index: 5;
}
.tft-page-works .tft-card__link:focus-visible {
outline: 2px solid var(--tft-lime);
outline-offset: -8px;
}
.tft-page-works .tft-card__title {
font-size: clamp(2.5rem, 5vw, 6rem);
line-height: 0.9;
letter-spacing: -0.04em;
margin-bottom: 1.5rem;
} .tft-page-works .filter-tab {
position: relative;
color: rgba(255, 255, 255, 0.3);
transition: all 0.6s var(--tft-ease);
cursor: pointer;
}
.tft-page-works .filter-tab.active {
color: var(--tft-lime);
transform: scale(1.1);
}
.tft-page-works .filter-tab::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
width: 0;
height: 2px;
background: var(--tft-lime);
transform: translateX(-50%);
transition: width 0.6s var(--tft-ease);
}
.tft-page-works .filter-tab.active::after {
width: 30px;
} .tft-page-works .tft-title {
font-size: clamp(4rem, 12vw, 15rem);
line-height: 0.8;
letter-spacing: -0.05em;
}
.tft-page-works .tft-italic {
font-style: italic;
font-family: 'Space Grotesk', serif;
} .tft-page-works #tft-cursor {
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--tft-lime);
color: var(--tft-sidebar);
position: fixed;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.4em;
z-index: 400;
opacity: 0;
transform: scale(0) translate(-50%, -50%);
transition: opacity 0.4s, transform 0.6s var(--tft-ease);
mix-blend-mode: normal;
}
.tft-page-works .tft-elite-grid:hover~#tft-cursor {
opacity: 1;
transform: scale(1) translate(-50%, -50%);
} .tft-page-works .reveal-up {
opacity: 0;
transform: translateY(60px);
transition: all 1.2s var(--tft-ease);
}
.tft-page-works .reveal-up.active {
opacity: 1;
transform: translateY(0);
} .tft-slider-btn {
width: 68px;
height: 68px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
border: none !important; position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
overflow: hidden;
color: white;
z-index: 10;
} .tft-slider-btn--prev {
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%);
}
.tft-slider-btn--next {
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%);
}
.tft-slider-btn:hover {
transform: translateY(-5px) scale(1.03);
background: rgba(212, 245, 76, 0.1);
color: var(--tft-lime);
}
.tft-slider-btn i {
font-size: 1.4rem;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 2;
}
.tft-slider-btn--prev:hover i {
transform: translateX(-4px);
}
.tft-slider-btn--next:hover i {
transform: translateX(4px);
} .tft-slider-btn::before {
content: '';
position: absolute;
width: 150%;
height: 150%;
background: radial-gradient(circle at center, var(--tft-lime) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.6s ease, transform 0.6s ease;
z-index: 0;
}
.tft-slider-btn--prev::before {
top: -75%;
left: -75%;
transform: scale(0.5);
}
.tft-slider-btn--next::before {
bottom: -75%;
right: -75%;
transform: scale(0.5);
}
.tft-slider-btn:hover::before {
opacity: 0.25;
transform: scale(1);
}
.tft-slider-bg {
display: none !important;
} .tft-page-home-2 .bg-white,
.tft-page-home-2 .bg-\[\#f8f9fa\],
.tft-page-home-2 .bg-brand-sidebar\/5,
.tft-page-home-2 .bg-brand-lime,
.tft-page-home-2 .bg-gray-50,
.tft-page-home-2 aside,
.tft-page-home-2 .tft-bento__item:not(.tft-bento__item--dark),
.tft-page-home-2 .tft-stat-card {
color: #094030;
}
.tft-page-home-2 .text-brand-sidebar {
color: #094030 !important;
} .tft-page-index .tft-slider-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 1.5rem;
}
.tft-page-index .tft-slider-meta {
display: flex;
align-items: center;
gap: 1.25rem;
font-family: var(--tft-sans, 'Plus Jakarta Sans', sans-serif);
font-size: clamp(0.7rem, 1.4vw, 0.8rem);
text-transform: uppercase;
letter-spacing: 0.6em;
color: white;
margin-bottom: 0.75rem;
}
.tft-page-index .tft-slider-index {
color: var(--tft-lime);
font-weight: 700;
}
.tft-page-index .tft-slider-h1 {
font-size: clamp(4.5rem, 14vw, 11rem);
line-height: 1.05;
color: white;
margin: 0;
display: flex;
flex-direction: column;
}
.tft-page-index .tft-slider-h1--italic {
font-family: var(--tft-serif, 'Space Grotesk', serif);
font-style: italic;
font-weight: 400;
margin-right: -0.1em;
}
.tft-page-index .tft-slider-h1--bold {
font-family: var(--tft-sans, 'Plus Jakarta Sans', sans-serif);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.04em;
transform: translateX(12%); }
.tft-page-index .text-reveal-wrap {
display: block;
overflow: hidden;
padding-bottom: 0.18em; }
.tft-page-index .text-reveal {
display: inline-block;
transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.tft-page-index .tft-slider-action {
margin-top: 3.5rem;
opacity: 0;
transform: translateY(30px);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}
.tft-page-index .tft-slider-action.is-visible {
opacity: 1;
transform: translateY(0);
}
.tft-page-index .tft-btn-view {
position: relative;
display: inline-block;
width: 240px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--tft-sans, 'Plus Jakarta Sans', sans-serif);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3em;
color: white;
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
}
.tft-page-index .tft-btn-view::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
height: 1.5px;
background: var(--tft-lime);
transform: translateX(-50%);
transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.tft-page-index .tft-btn-view:hover {
background: rgba(255, 255, 255, 0.06);
letter-spacing: 0.4em;
border-color: rgba(255, 255, 255, 0.25);
transform: scale(1.02);
}
.tft-page-index .tft-btn-view:hover::after {
width: 100%;
} footer span.font-display,
footer h4.font-display,
.tft-footer-logo {
text-transform: lowercase !important;
letter-spacing: -0.05em !important;
} .tft-page-home-2 .tft-acc-trigger span {
color: var(--tft-lime) !important;
font-size: 13px;
letter-spacing: 0.2em;
font-weight: 800;
} .tft-page-single-post .tft-comment-form-wrap {
padding: 4rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 2rem;
position: relative;
overflow: hidden;
margin-top: 6rem;
}
.tft-page-single-post .tft-comment-form-header {
margin-bottom: 3rem;
}
.tft-page-single-post .tft-label-mini {
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4em;
color: var(--tft-lime);
margin-bottom: 1rem;
opacity: 0.6;
}
.tft-page-single-post .tft-comment-form {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media (min-width: 768px) {
.tft-page-single-post .tft-comment-form {
grid-template-columns: 1fr 1fr;
}
}
.tft-page-single-post .tft-input-group {
position: relative;
width: 100%;
}
.tft-page-single-post .tft-comment-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem 0;
font-size: 1.1rem;
color: white;
outline: none;
transition: all 0.4s ease;
}
.tft-page-single-post .tft-comment-input:focus {
border-bottom-color: var(--tft-lime);
}
.tft-page-single-post .tft-comment-label {
position: absolute;
left: 0;
top: 1.5rem;
font-size: 1rem;
color: rgba(255, 255, 255, 0.3);
pointer-events: none;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
.tft-page-single-post .tft-comment-input:focus~.tft-comment-label,
.tft-page-single-post .tft-comment-input:not(:placeholder-shown)~.tft-comment-label {
top: -0.5rem;
font-size: 0.7rem;
color: var(--tft-lime);
letter-spacing: 0.2em;
}
.tft-page-single-post .tft-comment-textarea {
height: 150px;
resize: none;
} .tft-page-single-post .tft-btn-submit-discourse {
background: #094030; color: #fff;
border: 1px solid rgba(212, 245, 76, 0.35);
padding: 1.25rem 3.5rem;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.35em;
border-radius: 4px;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.tft-page-single-post .tft-btn-submit-discourse:hover {
background: var(--tft-lime, #d4f54c);
color: #0d2620 !important;
border-color: #d4f54c;
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(186, 255, 65, 0.15);
}
.tft-page-single-post .tft-btn-submit-discourse:hover span {
color: #0d2620 !important;
} .mt-24 button.text-brand-lime,
.comment-item button {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
cursor: pointer;
box-shadow: none !important;
outline: none !important;
min-width: unset !important;
height: auto !important;
transition: all 0.3s ease;
}
.mt-24 button.text-brand-lime:hover,
.comment-item button:hover {
color: #fff !important;
text-decoration: none; } .mt-24 button.text-brand-lime,
.comment-item button {
position: relative;
z-index: 1;
} .mt-24 button.text-brand-lime::after,
.comment-item button::after {
content: '';
position: absolute;
inset-inline-start: auto;
inset-inline-end: -10px; top: 50%;
transform: translateY(-50%) scale(0);
width: 24px;
height: 24px;
background: var(--tft-lime);
opacity: 0;
border-radius: 50%;
transition: all 0.5s var(--tft-ease);
z-index: -1;
} .mt-24 button.text-brand-lime :is(i,
svg),
.comment-item button :is(i,
svg) {
transition: all 0.4s var(--tft-ease);
color: var(--tft-lime);
} .mt-24 button.text-brand-lime:hover :is(i,
svg),
.comment-item button:hover :is(i,
svg) {
transform: translate(6px, -3px) rotate(-10deg) scale(1.1);
color: #fff !important;
}
.mt-24 button.text-brand-lime:hover::after,
.comment-item button:hover::after {
opacity: 0.15;
transform: translateY(-50%) scale(1);
} .tft-page-contact .tft-premium-form-wrap {
padding: clamp(2rem, 5vw, 5rem);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1.5rem;
position: relative;
overflow: hidden;
box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
}
.tft-page-contact .tft-premium-form-wrap::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(212, 245, 76, 0.03) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.tft-page-contact .tft-form-header {
margin-bottom: clamp(3rem, 8vw, 5rem);
position: relative;
z-index: 1;
}
.tft-page-contact .tft-label-mini {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5em;
color: var(--tft-lime);
margin-bottom: 1.25rem;
opacity: 0.9;
}
.tft-page-contact .tft-contact-form {
display: grid;
grid-template-columns: 1fr;
gap: 3.5rem;
position: relative;
z-index: 1;
}
@media (min-width: 768px) {
.tft-page-contact .tft-contact-form {
grid-template-columns: 1fr 1fr;
}
}
.tft-page-contact .tft-input-group {
position: relative;
width: 100%;
}
.tft-page-contact .tft-contact-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.08);
padding: 1.75rem 0;
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
color: white;
outline: none;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.tft-page-contact .tft-contact-input:focus {
border-bottom-color: var(--tft-lime);
}
.tft-page-contact .tft-contact-label {
position: absolute;
left: 0;
top: 1.75rem;
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.25);
pointer-events: none;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 700;
}
.tft-page-contact .tft-contact-input:focus~.tft-contact-label,
.tft-page-contact .tft-contact-input:not(:placeholder-shown)~.tft-contact-label {
top: -0.75rem;
font-size: 0.75rem;
color: var(--tft-lime);
letter-spacing: 0.3em;
opacity: 1;
}
.tft-page-contact .tft-contact-textarea {
height: 220px;
resize: none;
}
.tft-page-contact .tft-btn-submit-contact {
background: var(--tft-lime);
color: var(--tft-sidebar);
padding: 1.75rem 4rem;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.4em;
border-radius: 6px;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
cursor: pointer;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
border: none;
display: flex;
align-items: center;
gap: 1.25rem;
width: fit-content;
position: relative;
overflow: hidden;
}
.tft-page-contact .tft-btn-submit-contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
z-index: 0;
}
.tft-page-contact .tft-btn-submit-contact:hover {
transform: translateY(-8px);
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
color: var(--tft-sidebar);
}
.tft-page-contact .tft-btn-submit-contact:hover::before {
transform: scaleX(1);
transform-origin: left;
}
.tft-page-contact .tft-btn-submit-contact span,
.tft-page-contact .tft-btn-submit-contact i {
position: relative;
z-index: 1;
}
.tft-page-contact .tft-btn-submit-contact:hover i {
transform: translateX(8px);
} .tft-page-contact .tft-social-grid-wrap {
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: clamp(4rem, 10vw, 8rem);
padding-bottom: clamp(4rem, 10vw, 8rem);
}
.tft-page-contact .tft-social-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
@media (min-width: 640px) {
.tft-page-contact .tft-social-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.tft-page-contact .tft-social-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.tft-page-contact .tft-social-card {
position: relative;
padding: 3rem;
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
text-decoration: none;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
overflow: hidden;
height: 100%;
}
.tft-page-contact .tft-social-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(212, 245, 76, 0.08) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.6s ease;
}
.tft-page-contact .tft-social-card:hover {
transform: translateY(-12px) scale(1.02);
background: rgba(255, 255, 255, 0.02);
border-color: rgba(212, 245, 76, 0.2);
box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
}
.tft-page-contact .tft-social-card:hover::before {
opacity: 1;
}
.tft-page-contact .tft-social-icon {
width: 2rem;
height: 2rem;
color: var(--tft-lime);
opacity: 0.4;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
margin-bottom: 2rem;
}
.tft-page-contact .tft-social-card:hover .tft-social-icon {
opacity: 1;
transform: scale(1.2) rotate(-8deg);
}
.tft-page-contact .tft-social-title {
font-family: var(--font-display);
font-size: 1.8rem;
color: white;
margin-bottom: 0.5rem;
transition: all 0.4s ease;
}
.tft-page-contact .tft-social-desc {
font-family: var(--font-body);
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.35);
line-height: 1.6;
letter-spacing: 0.02em;
transition: all 0.4s ease;
}
.tft-page-contact .tft-social-card:hover .tft-social-desc {
color: rgba(255, 255, 255, 0.6);
}
.tft-page-contact .tft-social-arrow {
position: absolute;
bottom: 2.5rem;
right: 2.5rem;
width: 1.25rem;
height: 1.25rem;
color: var(--tft-lime);
opacity: 0;
transform: translate(-10px, 10px);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.tft-page-contact .tft-social-card:hover .tft-social-arrow {
opacity: 1;
transform: translate(0, 0);
} .rlz-filter {
position: relative;
z-index: 50;
margin-block-end: clamp(1.5rem, 4vw, 3rem);
} .rlz-filter__nav {
display: none;
}
@media (min-width: 1024px) {
.rlz-filter__nav {
display: block;
}
}
.rlz-filter__list {
display: flex;
flex-wrap: wrap;
gap: clamp(1rem, 2vw, 3rem);
list-style: none !important;
padding: 0;
margin: 0;
}
.rlz-filter__btn {
background: transparent;
border: none;
padding: 0.5rem 0;
color: var(--tft-white);
opacity: 0.4;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: all 0.6s var(--tft-ease);
position: relative;
text-align: left;
}
.rlz-filter__btn::before {
content: '';
position: absolute;
inset-inline-start: 0;
bottom: 0;
width: 0;
height: 1px;
background: var(--tft-lime);
transition: width 0.6s var(--tft-ease);
}
.rlz-filter__index {
font-family: var(--tft-sans, 'Plus Jakarta Sans', sans-serif);
font-size: 8px;
font-weight: 800;
letter-spacing: 0.2em;
margin-block-end: 4px;
color: var(--tft-lime);
transform: translateY(4px);
transition: transform 0.6s var(--tft-ease);
}
.rlz-filter__label {
font-family: var(--tft-sans, 'Plus Jakarta Sans', sans-serif);
font-size: clamp(10px, 1vw, 12px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4em;
}
.rlz-filter__btn:hover,
.rlz-filter__btn.active {
opacity: 1;
}
.rlz-filter__btn:hover .rlz-filter__index,
.rlz-filter__btn.active .rlz-filter__index {
transform: translateY(0);
}
.rlz-filter__btn.active::before {
width: 100%;
} .rlz-filter__mobile-trigger {
display: flex;
align-items: center;
gap: 12px;
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: var(--tft-lime);
color: #0d2620 !important; padding: 14px 32px;
border-radius: 999px;
border: none;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
font-family: var(--tft-font-display);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.3em;
z-index: 100;
cursor: pointer;
transition: all 0.4s var(--tft-ease);
}
.rlz-filter__mobile-trigger:hover {
transform: translateX(-50%) translateY(-5px);
background: white;
color: #0d2620 !important;
}
@media (min-width: 1024px) {
.rlz-filter__mobile-trigger {
display: none;
}
}
#main-scroll-container {
overflow-x: hidden !important;
} .rlz-filter-drawer {
position: fixed;
inset: 0;
background: rgba(9, 64, 48, 0.98);
backdrop-filter: blur(25px);
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.6s var(--tft-ease);
}
.rlz-filter-drawer.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.rlz-filter-drawer__close {
position: absolute;
top: 40px;
right: 40px;
width: 64px;
height: 64px;
border-radius: 50%;
border: 1px solid rgba(212, 245, 76, 0.2);
background: transparent;
color: var(--tft-lime);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.4s var(--tft-ease);
z-index: 1010;
}
.rlz-filter-drawer__close:hover {
background: var(--tft-lime);
color: var(--tft-sidebar);
transform: rotate(90deg) scale(1.1);
}
.rlz-filter-drawer__list {
display: flex;
flex-direction: column;
gap: 20px;
text-align: center;
list-style: none !important;
}
.rlz-filter-drawer__btn {
background: transparent;
border: none;
font-family: var(--tft-font-display);
font-size: clamp(2.5rem, 8vw, 4.5rem);
font-style: italic;
color: white;
opacity: 0.6; transition: all 0.4s var(--tft-ease);
cursor: pointer;
}
.rlz-filter-drawer__btn:hover,
.rlz-filter-drawer__btn.active {
opacity: 1;
color: var(--tft-lime);
transform: scale(1.05) translateX(10px);
} .rlz-filter__list {
flex-wrap: nowrap !important;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.rlz-filter__list::-webkit-scrollbar {
display: none;
}
.rlz-filter__item {
flex-shrink: 0;
} .tft-page-works .tft-elite-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(2rem, 5vw, 6rem);
width: 100%;
}
.tft-page-works .tft-card {
position: relative;
grid-column: span 12;
overflow: hidden;
background: #000;
transition: clip-path 1.2s cubic-bezier(0.85, 0, 0.15, 1);
}
@media (min-width: 768px) {
.tft-page-works .tft-card {
grid-column: span 6;
}
}
@media (min-width: 1024px) {
.tft-page-works .tft-card {
grid-column: span 4;
}
}
.tft-page-works .tft-card__media-wrap {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
clip-path: inset(0 0 0 0);
transition: clip-path 1.2s var(--tft-ease);
}
.tft-page-works .tft-card:hover .tft-card__media-wrap {
clip-path: inset(4% 4% 4% 4%);
}
.tft-page-works .tft-card__media {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) brightness(0.7);
transition: transform 2.4s var(--tft-ease), filter 1.2s var(--tft-ease);
scale: 1.1;
will-change: transform;
}
.tft-page-works .tft-card:hover .tft-card__media {
transform: scale(1.05);
filter: grayscale(0) brightness(0.9);
}
.tft-page-works .tft-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(9, 64, 48, 0.95) 0%, transparent 50%);
opacity: 0;
transition: opacity 1.2s var(--tft-ease);
z-index: 2;
}
.tft-page-works .tft-card:hover .tft-card__overlay {
opacity: 1;
}
.tft-page-works .tft-card__content {
position: absolute;
inset: 0;
padding: clamp(2rem, 5vw, 4rem);
display: flex;
flex-direction: column;
justify-content: flex-end;
z-index: 5;
pointer-events: none;
}
.tft-page-works .tft-card__title-mask {
overflow: hidden;
display: block;
}
.tft-page-works .tft-card__title {
font-size: clamp(2.2rem, 3.5vw, 4.5rem) !important;
line-height: 0.95 !important;
margin: 0 !important;
word-break: break-word;
hyphens: auto;
transform: translateY(110%);
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.tft-page-works .tft-card:hover .tft-card__title {
transform: translateY(0);
}
.tft-page-works .tft-card__meta {
font-family: var(--tft-font-body);
font-size: 9px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.6em;
color: var(--tft-lime);
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 1rem;
opacity: 0;
transform: translateX(-20px);
transition: all 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.tft-page-works .tft-card:hover .tft-card__meta {
opacity: 1;
transform: translateX(0);
}
.tft-page-works .tft-card__meta::before {
content: '';
width: 20px;
height: 1px;
background: var(--tft-lime);
} #tft-cursor.is-viewing {
width: 120px;
height: 120px;
background: var(--tft-lime);
color: #000;
border-color: var(--tft-lime);
mix-blend-mode: normal;
font-size: 10px;
font-weight: 900;
} .rlz-magnetic {
display: inline-block;
transition: transform 0.2s linear;
will-change: transform;
} body .menu-toggle {
transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.35s ease;
cursor: pointer;
overflow: hidden !important;
position: relative;
border: none !important;
display: flex !important;
align-items: center;
justify-content: center;
}
body .menu-toggle .hamburger-line {
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 28px !important;
height: 2px !important;
background-color: #094030  !important; transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
transform-origin: center;
} body .menu-toggle .line-1 {
transform: translate(-50%, -8px) !important;
}
body .menu-toggle .line-2 {
transform: translate(-50%, 0) !important;
width: 20px !important;
opacity: 0.8 !important;
}
body .menu-toggle .line-3 {
transform: translate(-50%, 8px) !important;
} body .menu-toggle:hover {
transform: scale(1.06);
background-color: #fff !important; box-shadow: 0 0 30px rgba(212, 245, 76, 0.4);
}
body .menu-toggle:hover .hamburger-line {
background-color: #094030 !important; }
body .menu-toggle:hover .line-1 {
transform: translate(-50%, -8px) translateX(3px) !important;
opacity: 1 !important;
}
body .menu-toggle:hover .line-2 {
transform: translate(-50%, 0) translateX(1px) !important;
width: 28px !important;
opacity: 1 !important;
}
body .menu-toggle:hover .line-3 {
transform: translate(-50%, 8px) translateX(3px) !important;
opacity: 1 !important;
} body .menu-toggle.menu-open {
background-color: #d4f54c !important;
transform: scale(1) rotate(180deg);
}
body .menu-toggle.menu-open .hamburger-line {
background-color: #0d2620 !important;
width: 28px !important;
opacity: 1 !important;
}
body .menu-toggle.menu-open .line-1 {
transform: translate(-50%, -50%) rotate(45deg) !important;
}
body .menu-toggle.menu-open .line-2 {
opacity: 0 !important;
transform: translate(100%, -50%) !important;
}
body .menu-toggle.menu-open .line-3 {
transform: translate(-50%, -50%) rotate(-45deg) !important;
} .tft-page-works .tft-card {
transition: opacity 0.8s var(--tft-ease), transform 0.8s var(--tft-ease), clip-path 1.2s var(--tft-ease);
}
.tft-page-works .tft-card.is-filtering {
opacity: 0;
transform: scale(0.95) translateY(10px);
pointer-events: none;
}  .tft-share-grid {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.tft-share-item {
display: flex;
align-items: center;
gap: 1.25rem;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.tft-share-icon {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
color: white;
background: transparent;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
flex-shrink: 0;
}
.tft-share-label {
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.3em;
color: rgba(255, 255, 255, 0.3);
opacity: 0;
transform: translateX(-10px);
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
pointer-events: none;
white-space: nowrap;
}
.tft-share-item:hover .tft-share-icon {
background: var(--tft-lime);
color: var(--tft-sidebar);
border-color: var(--tft-lime);
transform: scale(1.1) rotate(-5deg);
box-shadow: 0 10px 30px rgba(186, 255, 41, 0.3);
}
.tft-share-item:hover .tft-share-label {
opacity: 1;
transform: translateX(0);
color: white;
} .toc-link {
position: relative;
transition: all 0.4s ease;
}
.toc-link.active {
color: var(--tft-lime) !important;
padding-inline-start: 1.5rem;
}
.toc-link.active::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 50%;
width: 1rem;
height: 1px;
background: var(--tft-lime);
transform: translateY(-50%);
}
.article-body section {
scroll-margin-top: 15vw;
}/*/*/.tft-toc-list {
position: relative;
padding-inline-start: 1rem;
border-inline-start: 1px solid rgba(255, 255, 255, 0.04);
margin-block-start: 2rem;
}
.toc-link {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.85rem 0 0.85rem 2rem;
font-family: var(--font-display);
font-size: 1.1rem;
font-style: italic;/**/color: rgba(255, 255, 255, 0.25) !important;
text-decoration: none;
transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
position: relative;
}
.tft-toc-num {
font-family: var(--font-body);
font-size: 9px;
font-weight: 800;
font-style: normal;
letter-spacing: 0.15em;
opacity: 0.3;
transition: all 0.4s ease;
} .toc-link::after {
content: '';
position: absolute;
inset-inline-start: -1px;
top: 50%;
transform: translateY(-50%) scaleY(0);
width: 2px;
height: 14px;
background: rgb(186 255 65 / 63%);
transition: transform 0.4s var(--tft-ease);
transform-origin: center;
}
.toc-link:hover {
color: rgba(255, 255, 255, 0.9) !important;
padding-inline-start: 2.5rem;
}
.toc-link:hover::after {
transform: translateY(-50%) scaleY(1);
}
.toc-link:hover .tft-toc-num {
opacity: 0.8;
} .toc-link.active {
color: var(--tft-lime) !important;
font-style: normal;
padding-inline-start: 3.5rem;
}
.toc-link.active .tft-toc-num {
opacity: 1;
color: white;
} .toc-link.active::before {
content: '';
position: absolute;
inset-inline-start: -1px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 36px;
background: rgba(186, 255, 65, 1);
box-shadow: 0 0 20px rgba(186, 255, 65, 1);
z-index: 10;
border-radius: 1px;
}
.toc-link.active .tft-toc-text {
font-weight: 500;
} .tft-share-hub {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tft-share-hub__item {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.75rem;
border-radius: 99px;
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
text-decoration: none;
width: 60%;
min-width: 180px;
}
.tft-share-hub__icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--tft-sidebar);
color: var(--tft-lime);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.tft-share-hub__label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.4);
transition: all 0.4s ease;
}
.tft-share-hub__item:hover {
background: var(--tft-lime);
border-color: rgba(186, 255, 65, 0.7); transform: translateX(10px);
box-shadow: 0 10px 25px rgba(186, 255, 65, 0.1); }
.tft-share-hub__item:hover .tft-share-hub__icon {
background: var(--tft-sidebar);
color: white;
transform: scale(0.9) rotate(-10deg);
}
.tft-share-hub__item:hover .tft-share-hub__label {
color: var(--tft-sidebar);
} .article-body section {
scroll-margin-top: 15vh;
} .tft-timeline__path {
background-image: linear-gradient(to right, transparent, var(--tft-sidebar) 50%, transparent);
opacity: 0.15;
height: 1px;
}
.tft-timeline__card {
position: relative;
z-index: 2;
transition: all 0.6s var(--tft-ease);
}
.tft-timeline__card:hover {
transform: translateY(-5px);
}
.tft-timeline__card h3 span.italic {
transition: color 0.6s var(--tft-ease);
}
.tft-timeline__card:hover h3 span.italic {
color: var(--tft-sidebar);
opacity: 1;
}
@media (max-width: 1023px) {
.tft-timeline__path {
display: none;
}
.tft-timeline__card {
padding-bottom: 4rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.tft-timeline__card:last-child {
border-bottom: none;
}
} .tft-process-dot {
transition: all 0.5s var(--tft-ease);
box-shadow: 0 0 0 rgba(212, 245, 76, 0);
}
.tft-process-item:hover .tft-process-dot {
background: #d4f54c;
border-color: #d4f54c;
box-shadow: 0 0 20px #d4f54c, 0 0 40px rgba(212, 245, 76, 0.3);
transform: scale(1.4);
}
.tft-process-item:hover h3 {
color: #d4f54c;
transition: color 0.4s var(--tft-ease);
} .tft-spec-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding: 1.5rem 0;
transition: all 0.4s var(--tft-ease);
}
.tft-spec-item:last-child {
border-bottom: none;
}
.tft-spec-item:hover {
padding-left: 1rem;
border-bottom-color: var(--tft-lime);
}
@media (max-width: 767px) {
.tft-spec-item {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
} .tft-hero {
perspective: 1000px;
}
.tft-hero__hud {
position: absolute;
top: 5vh;
left: 0;
width: 100%;
z-index: 20;
padding: 0 5vw;
display: flex;
justify-content: space-between;
align-items: center;
}
.hud-path {
flex: 1;
height: 1px;
background: repeating-linear-gradient(90deg, rgba(212, 245, 76, 0.2) 0, rgba(212, 245, 76, 0.2) 4px, transparent 4px, transparent 8px);
margin: 0 2rem;
opacity: 0.3;
}
.hud-node {
display: flex;
align-items: center;
gap: 0.75rem;
}
.hud-status-blink {
width: 5px;
height: 5px;
background: var(--tft-lime);
border-radius: 50%;
animation: tft-pulse-glow 2s infinite;
}
@keyframes tft-pulse-glow {
0% {
transform: scale(1);
opacity: 1;
box-shadow: 0 0 0 0 rgba(212, 245, 76, 0.7);
}
70% {
transform: scale(1.5);
opacity: 0;
box-shadow: 0 0 0 6px rgba(212, 245, 76, 0);
}
100% {
transform: scale(1);
opacity: 0;
box-shadow: 0 0 0 0 rgba(212, 245, 76, 0);
}
}
.tft-hero__scanline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 15vh;
background: linear-gradient(to bottom, transparent, rgba(212, 245, 76, 0.05), transparent);
z-index: 5;
pointer-events: none;
animation: tft-scan 8s linear infinite;
}
@keyframes tft-scan {
0% {
transform: translateY(-100vh);
}
100% {
transform: translateY(100vh);
}
} .tft-title-elite {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center; }
.title-sup {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(40px, 8vw, 85px); letter-spacing: 0.05em;
color: var(--tft-lime);
margin-bottom: -1.5rem; position: relative;
z-index: 2;
display: block;
line-height: 1;
}
.title-base {
display: block;
font-family: var(--font-body);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.06em;
line-height: 0.8;
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.title-sup {
margin-bottom: 0.5rem;
font-size: clamp(24px, 8vw, 32px);
}
.title-base {
font-size: clamp(48px, 15vw, 80px) !important;
line-height: 1;
}
.tft-title-elite {
gap: 0.25rem;
}
.hud-path {
display: none;
}
} .tft-h2__metrics {
position: relative;
background-color: #ffffff;
background-image: radial-gradient(circle at 20% 30%, rgba(212, 245, 76, 0.04) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(212, 245, 76, 0.04) 0%, transparent 50%), linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px;
overflow: hidden;
}
.tft-h2__metrics::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.03;
pointer-events: none;
z-index: 0;
} .tft-page-home-2 aside {
box-shadow: 4px 0 25px rgba(0, 0, 0, 0.04) !important;
border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
} .tft-h2 .realiz-logo-mark {
font-size: 1.5rem;
font-weight: 500;
color: #0d2620;
letter-spacing: -0.02em;
} .tft-h2__exploration-wrap {
background-image: radial-gradient(circle at -10% -10%, rgba(212, 245, 76, 0.03) 0%, transparent 40%), linear-gradient(rgba(0, 0, 0, 0.01) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(0, 0, 0, 0.01) 1.5px, transparent 1.5px);
background-size: 100% 100%, 80px 80px, 80px 80px;
}
.tft-tab {
background: rgb(11 65 49 / 7%);
color: rgb(12 66 50);
border: 1px solid rgba(0, 0, 0, 0.05);
cursor: pointer !important;
position: relative;
z-index: 20;
}
.tft-tab:hover {
background: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.9);
transform: translateY(-2px);
}
.tft-tab-active {
background: #0c4131 !important;
color: #d4f54c !important;
border-color: #0d2620 !important;
box-shadow: 0 10px 30px rgba(13, 38, 32, 0.15);
} .footer-subscribe-wrap {
overflow: visible !important;
} #tab-content,
#tab-img {
transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
will-change: opacity, transform;
} .tft-img-frame {
perspective: 1500px;
}
.tft-img-frame>div:first-child {
transform-origin: center;
transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.8s ease;
will-change: transform;
background: #094030;
}
.tft-img-frame:hover>div:first-child {
transform: rotateX(2deg) rotateY(-4deg) scale(1.02);
box-shadow: 0 50px 100px rgba(9, 64, 48, 0.15);
} .tft-img-frame .absolute.bg-brand-lime {
animation: tft-lime-float 6s ease-in-out infinite;
z-index: 20;
}
@keyframes tft-lime-float {
0%,
100% {
transform: translate(0, 0) rotate(12deg);
}
33% {
transform: translate(-10px, -20px) rotate(6deg);
}
66% {
transform: translate(6px, -15px) rotate(18deg);
}
}
.tft-img-frame:hover .absolute.bg-brand-lime {
animation-play-state: paused;
transform: translate(0, 0) rotate(0deg) scale(1.1);
box-shadow: 0 40px 80px rgba(212, 245, 76, 0.35);
} .tft-btn-submit-discourse,
.tft-btn-submit-contact {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1.25rem 3rem;
background: #0d2620 !important; color: #ffffff !important; font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
border: 1px solid #d4f54c !important; border-radius: 4px;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
position: relative;
overflow: hidden;
z-index: 10;
}
.tft-btn-submit-discourse::before,
.tft-btn-submit-contact::before {
content: '';
position: absolute;
inset: 0;
background: #d4f54c; transform: translateX(-101%);
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
z-index: -1;
}
.tft-btn-submit-discourse:hover::before,
.tft-btn-submit-contact:hover::before {
transform: translateX(0);
}
.tft-btn-submit-discourse:hover,
.tft-btn-submit-contact:hover {
color: #0d2620 !important; transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(212, 245, 76, 0.35);
} .tft-contact-input,
.tft-comment-input {
color: #ffffff !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.tft-contact-input:focus,
.tft-comment-input:focus {
border-bottom: 1px solid #d4f54c !important;
} .tft-premium-info-grid {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 3rem;
border-radius: 1.5rem;
position: relative;
overflow: hidden;
}
.tft-premium-info-grid::after {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 200px;
height: 200px;
background: #d4f54c;
filter: blur(140px);
opacity: 0.05;
pointer-events: none;
} @media (max-width: 767px) {
#menu-panel {
width: 100% !important;
left: 0 !important;
top: 0 !important;
height: 100dvh !important;
background: radial-gradient(circle at 0% 0%, #0d2620 0%, #000000 100%) !important;
backdrop-filter: blur(20px);
padding-top: 80px !important;
z-index: 100 !important;
}
.tft-mobile-menu-footer {
margin-top: auto;
padding-top: 3rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.tft-mobile-contact-link {
font-family: var(--font-display);
font-size: 1.5rem;
color: #d4f54c;
text-decoration: none;
transition: opacity 0.3s ease;
}
.tft-mobile-social-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.tft-mobile-social-item {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 10px;
font-weight: 700;
} .menu-row {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.menu-open .menu-row {
opacity: 1;
transform: translateY(0);
}
.menu-open .menu-row:nth-child(1) {
transition-delay: 0.1s;
}
.menu-open .menu-row:nth-child(2) {
transition-delay: 0.15s;
}
.menu-open .menu-row:nth-child(3) {
transition-delay: 0.2s;
}
.menu-open .menu-row:nth-child(4) {
transition-delay: 0.25s;
}
.menu-open .menu-row:nth-child(5) {
transition-delay: 0.3s;
}
} .tft-vanguard-footer {
background: var(--brand-sidebar); color: var(--text-white, #ffffff);
padding: 0 0 4rem;
position: relative;
overflow: hidden;
z-index: 10;
} .tft-footer-status-bar {
border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.04);
padding: 1.75rem 8%;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(13, 38, 32, 0.4); backdrop-filter: blur(12px);
box-shadow: inset 0 1px 0 rgba(212, 245, 76, 0.05); }
.tft-status-indicator {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.35em;
color: var(--brand-lime, #d4f54c);
}
.tft-status-indicator span.opacity-40 {
font-weight: 400;
letter-spacing: 0.1em;
}
.tft-status-dot {
width: 7px;
height: 7px;
background: var(--brand-lime, #d4f54c);
border-radius: 50%;
position: relative;
box-shadow: 0 0 10px var(--brand-lime, #d4f54c);
}
.tft-status-dot::after {
content: '';
position: absolute;
inset: -5px;
border-radius: 50%;
background: var(--brand-lime, #d4f54c);
opacity: 0.4;
animation: tft-pulse 2.5s infinite;
}
@keyframes tft-pulse {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(3.5);
opacity: 0;
}
} .tft-footer-hero {
padding: 10rem 8% 12rem;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tft-footer-big-type {
font-family: var(--font-display);
font-size: clamp(3.5rem, 13vw, 11rem); line-height: 0.8;
letter-spacing: -0.05em;
font-style: italic;
color: var(--text-white, #ffffff);
display: block;
transition: all 0.7s var(--tft-ease);
text-decoration: none;
}
.tft-footer-big-type:hover {
color: var(--brand-lime, #d4f54c);
transform: perspective(1000px) rotateX(10deg); }
.tft-footer-big-type span {
display: block;
font-family: var(--font-body);
font-style: normal;
font-weight: 500; text-transform: uppercase;
letter-spacing: 0.2em; font-size: clamp(0.9rem, 2vw, 1.8rem);
margin-bottom: 3.5rem;
color: var(--brand-lime, #d4f54c); opacity: 0.8;
} .tft-footer-main-grid {
padding: 2rem 2%;
display: grid;
grid-template-columns: 2.2fr 1fr 1.8fr 1fr;
gap: 2rem;
}
@media (max-width: 1024px) {
.tft-footer-main-grid {
grid-template-columns: 1.5fr 1fr;
gap: 3rem;
}
}
@media (max-width: 768px) {
.tft-footer-main-grid {
grid-template-columns: 1fr;
gap: 4rem;
}
}
.tft-footer-column h4 {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
color: rgba(255, 255, 255, 0.25);
margin-bottom: 3rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tft-footer-link {
display: block;
font-family: var(--font-display);
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
margin-bottom: 1.25rem;
transition: all 0.4s var(--tft-ease);
position: relative;
width: fit-content;
overflow: hidden;
}
.tft-footer-link:hover {
color: var(--brand-lime, #d4f54c);
transform: translateX(8px);
}
.tft-footer-link::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background: var(--brand-lime, #d4f54c);
transform: translateX(-101%);
transition: transform 0.4s var(--tft-ease);
}
.tft-footer-link:hover::after {
transform: translateX(0);
} .tft-footer-socials {
display: flex;
flex-direction: column;
gap: 0.75rem;
} .tft-footer-bottom {
padding: 3rem 8%;
border-top: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
justify-content: space-between;
align-items: center;
}
.tft-copyright {
font-family: var(--font-body);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.3em;
color: rgba(255, 255, 255, 0.15);
}
.tft-back-to-top {
width: 65px;
height: 65px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-white, #ffffff);
transition: all 0.5s var(--tft-ease);
background: transparent;
backdrop-filter: blur(5px);
}
.tft-back-to-top:hover {
background: var(--brand-lime, #d4f54c);
border-color: var(--brand-lime, #d4f54c);
color: var(--brand-sidebar, #094030);
transform: rotate(360deg) scale(1.1);
} .tft-vanguard-footer .reveal-up {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s var(--tft-ease);
}
.tft-vanguard-footer .reveal-up.active {
opacity: 1;
transform: translateY(0);
} .tft-footer-newsletter {
position: relative;
display: flex;
align-items: center;
}
.tft-footer-newsletter-input {
width: 100%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
padding: 1.25rem 4rem 1.25rem 1.5rem;
font-family: var(--font-body);
font-size: 14px;
color: var(--text-white, #ffffff);
transition: all 0.4s var(--tft-ease);
}
.tft-footer-newsletter-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.05);
border-color: var(--brand-lime, #d4f54c);
}
.tft-aurora__nav-btn {
position: relative;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.4s var(--tft-ease);
}
.tft-nav-btn__ring {
display: none; }
.tft-aurora__nav-btn:hover {
background: rgba(212, 245, 76, 0.1);
border-color: var(--brand-lime, #d4f54c);
transform: scale(1.05);
}
.tft-aurora__nav-btn.aurora-prev:hover i {
transform: translateX(-5px);
}
.tft-aurora__nav-btn.aurora-next:hover i {
transform: translateX(5px);
}
.tft-aurora__nav-btn:active {
transform: scale(0.95);
}
.tft-aurora__nav-btn i {
transition: transform 0.3s var(--tft-ease);
color: white;
}
.tft-aurora__nav-btn:hover i {
color: var(--brand-lime, #d4f54c);
}
.tft-footer-submit-btn {
position: absolute;
right: 8px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: var(--brand-lime, #d4f54c);
color: var(--brand-sidebar, #094030);
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.4s var(--tft-ease);
}
.tft-footer-submit-btn:hover {
background: #ffffff;
transform: scale(1.05);
}
.tft-footer-submit-btn svg {
width: 18px;
height: 18px;
} .sidebar-widget {
background: rgba(255, 255, 255, 0.02);
border-top: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.sidebar-widget:hover {
background: rgba(255, 255, 255, 0.04);
border-top-color: var(--brand-lime-alpha, rgba(163, 255, 0, 0.3));
} .tft-sidebar-search-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.tft-sidebar-search-input {
width: 100%;
height: 48px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
padding: 0 52px 0 20px;
font-family: var(--font-body);
font-size: 13px;
color: white;
transition: all 0.4s ease;
}
.tft-sidebar-search-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.06);
border-color: var(--brand-lime, #d4f54c);
}
.tft-sidebar-search-btn {
position: absolute;
right: 4px;
width: 40px;
height: 40px;
background: var(--brand-lime, #d4f54c);
color: var(--brand-sidebar, #094030);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border-radius: 4px;
border: none;
cursor: pointer;
}
.tft-sidebar-search-btn:hover {
background: white;
transform: scale(1.05);
} .tft-widget-featured {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
background: var(--brand-sidebar, #094030);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 30px;
border-radius: 4px;
}
.tft-widget-featured__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.4;
filter: grayscale(100%);
transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.tft-widget-featured:hover .tft-widget-featured__img {
filter: grayscale(0%);
opacity: 0.6;
transform: scale(1.1);
}
.tft-widget-featured__content {
position: relative;
z-index: 10;
} .tft-tag-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.tft-tag-item {
padding: 12px 15px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.4);
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 4px;
}
.tft-tag-item:hover {
background: var(--brand-lime, #d4f54c);
border-color: var(--brand-lime, #d4f54c);
color: var(--brand-sidebar, #094030);
transform: translateY(-3px);
} .tft-widget-stats {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 4px;
}
.tft-stat-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tft-stat-row:last-child {
border-bottom: none;
}
.tft-stat-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
opacity: 0.3;
font-family: var(--font-body);
}
.tft-stat-value {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
color: var(--brand-lime, #d4f54c);
font-size: 16px;
} .tft-social-pulse-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.tft-social-pulse-item {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 18px;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.4s var(--tft-ease);
text-decoration: none;
border-radius: 4px;
}
.tft-social-pulse-item:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--brand-lime, #d4f54c);
}
.tft-pulse-dot {
width: 6px;
height: 6px;
background: var(--brand-lime, #d4f54c);
border-radius: 50%;
position: relative;
}
.tft-pulse-dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: var(--brand-lime, #d4f54c);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: tft-pulse-social 2s infinite;
}
@keyframes tft-pulse-social {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.8;
}
100% {
transform: translate(-50%, -50%) scale(3.5);
opacity: 0;
}
} .tft-elite-highlight {
position: relative;
display: inline-block;
padding: 0 12px;
z-index: 1;
color: var(--brand-sidebar, #094030) !important;
}
.tft-elite-highlight::before {
content: '';
position: absolute;
bottom: 5%;
left: 0;
width: 100%;
height: 95%;
background: var(--brand-lime, #d4f54c);
z-index: -1;
transform: rotate(-1deg);
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.tft-elite-highlight:hover::before {
height: 100%;
transform: rotate(0deg);
} .tft-team-card-elite {
position: relative;
overflow: hidden;
border-radius: 4px;
background: #f8f8f8;
}
.tft-team-card-elite__img-wrap {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
}
.tft-team-card-elite__img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.tft-team-card-elite:hover .tft-team-card-elite__img {
filter: grayscale(0%);
transform: scale(1.1);
}
.tft-team-card-elite__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(9, 64, 48, 0.8) 0%, transparent 60%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 30px;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
pointer-events: none;
}
.tft-team-card-elite:hover .tft-team-card-elite__overlay {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.tft-team-card-elite__glass {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 4px;
}
.tft-team-card-elite__social {
display: flex;
gap: 15px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.tft-team-card-elite__social-link {
color: white;
opacity: 0.5;
transition: all 0.3s ease;
}
.tft-team-card-elite__social-link:hover {
color: var(--brand-lime, #d4f54c);
opacity: 1;
transform: translateY(-2px);
}
.tft-team-specialty-hud {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px;
}
.tft-team-dot {
width: 6px;
height: 6px;
background: var(--brand-lime, #d4f54c);
border-radius: 50%;
animation: tft-pulse-social 2s infinite;
} .tft-hero-glass-wrap {
position: relative;
padding: 3rem;
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(20px);
border-left: 2px solid var(--brand-lime, #d4f54c);
border-radius: 4px;
} .tft-cta-portal {
background-color: var(--brand-sidebar, #094030) !important;
position: relative;
overflow: hidden;
} .tft-cta-portal {
background-color: #000 !important;
position: relative;
overflow: hidden;
}
.tft-cta-portal::after {
content: none !important;
}
.tft-cta-parallax {
position: absolute;
inset: 0;
opacity: 0.6 !important;
background-size: cover;
background-position: center;
filter: none !important;
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.tft-cta-portal::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.22);
z-index: 1;
pointer-events: none;
}
.tft-cta-portal .container {
position: relative;
z-index: 2;
} .tft-btn-blade-lg {
position: relative;
display: inline-flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem 3.5rem;
background: var(--brand-lime, #d4f54c);
color: var(--brand-sidebar, #094030);
text-transform: uppercase;
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.5em;
text-decoration: none;
border-radius: 4px; transition: all 0.5s var(--tft-ease);
box-shadow: 0 0 0 rgba(163, 255, 0, 0);
}
.tft-btn-blade-lg:hover {
background: #ffffff;
color: var(--brand-sidebar, #094030);
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 30px rgba(163, 255, 0, 0.2);
}
.tft-btn-blade-lg i {
width: 14px;
height: 14px;
transition: transform 0.5s var(--tft-ease);
}
.tft-btn-blade-lg:hover i {
transform: translateX(6px);
} .tft-timeline-pulse {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background: linear-gradient(to bottom, transparent, rgba(163, 255, 0, 0.4) 15%, rgba(163, 255, 0, 0.4) 85%, transparent);
transform: translateX(-50%);
z-index: 1;
}
.tft-milestone-dot-glow {
position: absolute;
top: 0;
left: 50%;
width: 12px;
height: 12px;
background: var(--brand-lime, #d4f54c);
border-radius: 50%;
transform: translate(-50%, 0);
box-shadow: 0 0 20px rgba(163, 255, 0, 0.6);
z-index: 2;
}
.tft-milestone-dot-glow::after {
content: '';
position: absolute;
inset: -10px;
border: 1px solid rgba(163, 255, 0, 0.2);
border-radius: 50%;
animation: tft-pulse-social 3s infinite;
}
.tft-milestone-glass {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 2.5rem;
border-radius: 4px;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.tft-timeline-item:hover .tft-milestone-glass {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(163, 255, 0, 0.3);
transform: translateY(-8px);
} .tft-studio-hud {
display: flex;
flex-direction: column;
gap: 0.5rem;
position: absolute;
right: 5%;
bottom: 10%;
text-align: right;
pointer-events: none;
z-index: 2;
}
.tft-hud-label {
font-family: var(--font-body);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.4em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.3);
}
.tft-hud-value {
transform: translateY(0);
pointer-events: auto;
}
.tft-team-card-elite__glass {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 4px;
}
.tft-team-card-elite__social {
display: flex;
gap: 15px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.tft-team-card-elite__social-link {
color: white;
opacity: 0.5;
transition: all 0.3s ease;
}
.tft-team-card-elite__social-link:hover {
color: var(--brand-lime, #d4f54c);
opacity: 1;
transform: translateY(-2px);
}
.tft-team-specialty-hud {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px;
}
.tft-team-dot {
width: 6px;
height: 6px;
background: var(--brand-lime, #d4f54c);
border-radius: 50%;
animation: tft-pulse-social 2s infinite;
} .tft-hero-glass-wrap {
position: relative;
padding: 3rem;
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(20px);
border-left: 2px solid var(--brand-lime, #d4f54c);
border-radius: 4px;
} .tft-cta-portal {
background-color: var(--brand-sidebar, #094030) !important;
position: relative;
overflow: hidden;
}
.tft-cta-portal::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(163, 255, 0, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.tft-cta-parallax {
position: absolute;
inset: 0;
opacity: 0.15;
background-size: cover;
background-position: center;
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.tft-cta-portal:hover .tft-cta-parallax {
transform: scale(1.05);
opacity: 0.2;
} .tft-btn-blade-lg {
position: relative;
display: inline-flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem 3.5rem;
background: var(--brand-lime, #d4f54c);
color: var(--brand-sidebar, #094030);
text-transform: uppercase;
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.5em;
text-decoration: none;
border-radius: 4px; transition: all 0.5s var(--tft-ease);
box-shadow: 0 0 0 rgba(163, 255, 0, 0);
}
.tft-btn-blade-lg:hover {
background: #ffffff;
color: var(--brand-sidebar, #094030);
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 30px rgba(163, 255, 0, 0.2);
}
.tft-btn-blade-lg i {
width: 14px;
height: 14px;
transition: transform 0.5s var(--tft-ease);
}
.tft-btn-blade-lg:hover i {
transform: translateX(6px);
} .tft-evolution-track {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.tft-evolution-guide {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.1);
transform: translateX(-50%);
}
.tft-milestone {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 120px;
width: 100%;
}
.tft-milestone--reverse {
flex-direction: row-reverse;
}
.tft-milestone__content {
width: 42%;
}
.tft-milestone__year-side {
width: 42%;
}
.tft-milestone-marker {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: var(--brand-lime, #d4f54c);
border-radius: 50%;
border: 3px solid var(--brand-bg, #094030);
z-index: 10;
} .tft-sidebar-logo-vertical {
position: relative;
height: 200px;
width: 60px;
display: flex;
align-items: center;
justify-content: center;
margin: 4rem 0;
}
.tft-sidebar-logo-vertical img {
position: absolute;
width: 300px;
height: auto;
max-width: none;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.3);
}
.tft-hud-value {
transform: translateY(0);
pointer-events: auto;
}
.tft-team-card-elite__glass {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 4px;
}
.tft-team-card-elite__social {
display: flex;
gap: 15px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.tft-team-card-elite__social-link {
color: white;
opacity: 0.5;
transition: all 0.3s ease;
}
.tft-team-card-elite__social-link:hover {
color: var(--brand-lime, #d4f54c);
opacity: 1;
transform: translateY(-2px);
}
.tft-team-specialty-hud {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px;
}
.tft-team-dot {
width: 6px;
height: 6px;
background: var(--brand-lime, #d4f54c);
border-radius: 50%;
animation: tft-pulse-social 2s infinite;
} .tft-hero-glass-wrap {
position: relative;
padding: 3rem;
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(20px);
border-left: 2px solid var(--brand-lime, #d4f54c);
border-radius: 4px;
} .tft-cta-portal {
background-color: var(--brand-sidebar, #094030) !important;
position: relative;
overflow: hidden;
}
.tft-cta-portal::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(163, 255, 0, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.tft-cta-parallax {
position: absolute;
inset: 0;
opacity: 0.15;
background-size: cover;
background-position: center;
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.tft-cta-portal:hover .tft-cta-parallax {
transform: scale(1.05);
opacity: 0.2;
} .tft-btn-blade-lg {
position: relative;
display: inline-flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem 3.5rem;
background: var(--brand-lime, #d4f54c);
color: var(--brand-sidebar, #094030);
text-transform: uppercase;
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.5em;
text-decoration: none;
border-radius: 4px; transition: all 0.5s var(--tft-ease);
box-shadow: 0 0 0 rgba(163, 255, 0, 0);
}
.tft-btn-blade-lg:hover {
background: #ffffff;
color: var(--brand-sidebar, #094030);
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 30px rgba(163, 255, 0, 0.2);
}
.tft-btn-blade-lg i {
width: 14px;
height: 14px;
transition: transform 0.5s var(--tft-ease);
height: 25px;
}
.tft-btn-blade-lg:hover i {
transform: translateX(6px);
} .tft-evolution-track {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.tft-evolution-guide {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.1);
transform: translateX(-50%);
}
.tft-milestone {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 120px;
width: 100%;
}
.tft-milestone--reverse {
flex-direction: row-reverse;
}
.tft-milestone__content {
width: 42%;
}
.tft-milestone__year-side {
width: 42%;
}
.tft-milestone-marker {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: var(--brand-lime, #d4f54c);
border-radius: 50%;
border: 3px solid var(--brand-bg, #094030);
z-index: 10;
} .tft-sidebar-logo-vertical {
position: relative;
height: 200px;
width: 60px;
display: flex;
align-items: center;
justify-content: center;
margin: 4rem 0;
}
.tft-sidebar-logo-vertical img {
position: absolute;
width: 300px;
height: auto;
max-width: none;
transform: rotate(-90deg);
opacity: 0.85;
transition: all 0.4s var(--tft-ease);
} .tft-sidebar-logo-vertical:hover img {
transform: rotate(-90deg) translateY(0) !important;
opacity: 1;
} .h5-list-item {
position: relative;
padding: 1.5rem 0;
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 300;
color: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
white-space: nowrap;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.h5-list-item::before {
content: '+';
position: absolute;
left: -2rem;
opacity: 0;
transform: translateX(-10px);
transition: all 0.4s ease;
color: var(--brand-lime, #d4f54c);
}
.h5-list-item:hover,
.h5-list-item.active {
color: white;
padding-left: 1.5rem;
}
.h5-list-item:hover::before,
.h5-list-item.active::before {
opacity: 1;
transform: translateX(0);
} .h5-image-wrap {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #0d2620;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
transform: perspective(1000px) rotateY(var(--h5-shift-x, 0deg)) rotateX(var(--h5-shift-y, 0deg));
transition: transform 0.1s ease;
}
.h5-image-shell {
position: absolute;
inset: 0;
overflow: hidden;
}
.h5-image-layer {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
}
.h5-image-next {
opacity: 0;
transform: scale(1.1);
} .h5-image-wrap.is-transitioning .h5-image-next {
opacity: 1 !important;
transform: scale(1) !important;
z-index: 2;
}
.h5-image-wrap.is-transitioning .h5-image-current {
opacity: 0.5;
transform: scale(0.95);
z-index: 1;
} .h5-image-meta {
position: absolute;
bottom: 3rem;
left: 3rem;
z-index: 10;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.h5-image-index {
font-family: var(--font-body);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--brand-lime, #d4f54c) !important;
}
.h5-image-tag {
font-family: var(--font-display);
font-size: 1.2rem;
font-style: italic;
color: white;
} .h5-counter-wrap {
position: relative;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.h5-counter-ring {
transform: rotate(-90deg);
stroke-dasharray: 283;
stroke-dashoffset: 283;
transition: stroke-dashoffset 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.h5-counter-wrap.is-updating .h5-counter-ring {
stroke-dashoffset: 0;
}
.h5-counter-core {
position: absolute;
} .tft-location-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
width: 100%;
}
@media (max-width: 640px) {
.tft-location-wrap {
flex-direction: column;
gap: 1rem;
}
}
.tft-location-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1.5rem, 4vw, 3rem);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 999px;
font-family: var(--font-display);
font-size: clamp(0.75rem, 1.2vw, 0.9rem);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #fff;
overflow: hidden;
transition: transform 0.6s var(--tft-ease), border-color 0.4s var(--tft-ease);
isolation: isolate;
cursor: pointer;
text-decoration: none;
backdrop-filter: blur(8px);
white-space: nowrap;
}
@media (max-width: 640px) {
.tft-location-btn {
width: 240px; }
} .tft-page-home-7 .tft-avatar-wrap {
background: var(--brand-lime) !important; border: 2px solid rgba(255, 255, 255, 0.2);
}
.tft-page-home-7 .tft-nav-btn:hover .tft-avatar-wrap {
background: #fff !important; box-shadow: 0 0 30px rgba(212, 245, 76, 0.4);
}
.tft-page-home-7 .tft-avatar {
opacity: 0.85;
transition: opacity 0.4s ease;
}
.tft-page-home-7 .tft-nav-btn:hover .tft-avatar {
opacity: 1;
} .tft-page-home-7::before {
content: '';
position: fixed;
inset: 0;
background-image: repeating-linear-gradient(45deg, rgba(212, 245, 76, 0.01) 0px, rgba(212, 245, 76, 0.01) 1px, transparent 1px, transparent 50px);
pointer-events: none;
z-index: 1;
} .tft-page-home-7 .tft-watermark {
text-shadow: 0 0 100px rgba(212, 245, 76, 0.05);
background: linear-gradient(to bottom, rgba(212, 245, 76, 0.02), transparent);
} .tft-page-home-7 .tft-case-bubble {
background: #d4f54c !important; color: #094030 !important; font-weight: 700 !important;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.3) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.tft-page-home-7 .tft-case-bubble span:first-child {
font-size: 16px !important;
text-align: center !important;
display: block !important;
width: 100% !important;
opacity: 0.8 !important;
letter-spacing: 0.2em !important;
margin-bottom: 5px !important;
}
.tft-page-home-7 .tft-case-bubble:hover {
background: #ffffff !important;
color: #094030 !important;
transform: scale(1.1) rotate(15deg) !important;
}
.tft-location-btn__text {
position: relative;
z-index: 2;
transition: color 0.4s var(--tft-ease);
}
.tft-location-btn__bg {
position: absolute;
top: 50%;
left: 50%;
width: 150%;
aspect-ratio: 1/1;
background: #d4f54c; border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.6s var(--tft-ease);
z-index: 1;
} .tft-location-btn:hover {
border-color: #d4f54c;
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(212, 245, 76, 0.15);
}
.tft-location-btn:hover .tft-location-btn__bg {
transform: translate(-50%, -50%) scale(1);
}
.tft-location-btn:hover .tft-location-btn__text {
color: #094030; } @media (max-width: 480px) {
.tft-location-btn {
width: 100%;
text-align: center;
}
} .tft-page-home-7 .h7-card {
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.tft-page-home-7 .h7-card::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid var(--brand-lime);
opacity: 0;
transform: scale(0.98);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 5;
pointer-events: none;
}
.tft-page-home-7 .h7-card:hover {
transform: translateY(-12px) !important;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4) !important;
}
.tft-page-home-7 .h7-card:hover::before {
opacity: 0.4;
transform: scale(1);
inset: 12px;
} .tft-page-home-7 .h7-card-content {
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.tft-page-home-7 .h7-card:hover .h7-card-content {
transform: translateY(-8px) !important;
}
.tft-page-home-7 .h7-title {
transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.tft-page-home-7 .h7-card:hover .h7-title {
transform: translateX(10px);
}
.tft-page-home-7 .h7-desc {
opacity: 0.6;
transform: translateY(10px);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.tft-page-home-7 .h7-card:hover .h7-desc {
opacity: 1;
transform: translateY(0);
} .tft-page-home-7 .h7-badge {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
transition: all 0.4s ease !important;
}
.tft-page-home-7 .h7-badge::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 150%;
aspect-ratio: 1;
background: var(--brand-lime);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: -1;
}
.tft-page-home-7 .h7-card:hover .h7-badge {
color: var(--brand-sidebar) !important;
border-color: var(--brand-lime) !important;
}
.tft-page-home-7 .h7-card:hover .h7-badge::before {
transform: translate(-50%, -50%) scale(1);
} .tft-page-home-7 .h7-index {
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.tft-page-home-7 .h7-card:hover .h7-index {
background: var(--brand-lime) !important;
color: var(--brand-sidebar) !important;
transform: scale(1.1) rotate(10deg) !important;
box-shadow: 0 0 20px rgba(212, 245, 76, 0.4);
} .tft-page-home-7 .h7-card::after {
content: '';
position: absolute;
inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.85) 100%);
opacity: 0; transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.5s ease;
z-index: 2;
pointer-events: none;
}
.tft-page-home-7 .h7-card:hover::after {
opacity: 1; }
.tft-page-home-7 .h7-card-content {
z-index: 10 !important; } .tft-page-home-7 .h7-title {
letter-spacing: -0.0125em;
transform: translateY(-5px);
}
.tft-page-about-alt .tft-capability-card:hover .tft-capability-card__description {
color: var(--tft-bg) !important;
opacity: 1;
transform: translateY(-8px);
} .capability-card p {
transition: color 0.3s ease;
} .capability-card:hover p {
color: #0d2620;
} .tft-cat-badge {
margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
opacity: 0;
transform: translateY(20px);
transition: opacity 1s var(--tft-ease-out), transform 1s var(--tft-ease-out);
}
.tft-cat-badge.is-visible {
opacity: 1;
transform: translateY(0);
}
.tft-cat-badge__pill {
display: inline-flex;
align-items: center;
padding: clamp(0.4rem, 0.8vh, 0.6rem) clamp(1rem, 2vw, 1.5rem);
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(212, 245, 76, 0.15);
border-radius: 100px;
gap: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: all 0.4s var(--tft-ease);
}
.tft-cat-badge__pill:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(212, 245, 76, 0.4);
box-shadow: 0 15px 40px rgba(212, 245, 76, 0.1);
transform: translateY(-2px);
}
.tft-cat-badge__index {
color: var(--tft-lime);
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: clamp(0.75rem, 1.2vw, 0.9rem);
letter-spacing: 0.1em;
}
.tft-cat-badge__divider {
width: 1px;
height: 12px;
background: rgba(255, 255, 255, 0.2);
}
.tft-cat-badge__label {
color: rgba(255, 255, 255, 0.9);
font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
font-weight: 500;
font-size: clamp(0.7rem, 1vw, 0.8rem);
text-transform: uppercase;
letter-spacing: 0.3em;
} [dir="rtl"] .tft-cat-badge__pill {
padding-inline: clamp(1rem, 2vw, 1.5rem);
} .tft-cat-badge__pill {
padding-inline: clamp(1.2rem, 3vw, 2rem);
gap: 0;
} .tft-slider-h1 {
transition: transform 0.8s var(--tft-ease-out), opacity 0.8s var(--tft-ease-out);
}
.tft-slider-h1.is-animating {
transform: translateY(30px) skewY(4deg);
opacity: 0;
}
.text-reveal-wrap {
display: block;
overflow: hidden;
padding-top: 0.05em;
padding-bottom: 0.05em;
margin-top: -0.05em;
margin-bottom: -0.05em;
}
.text-reveal {
display: block;
transform: translateY(0);
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-animating .text-reveal {
transform: translateY(110%);
} .tft-cat-badge,
.tft-slider-action {
transition: transform 0.7s var(--tft-ease-out), opacity 0.7s var(--tft-ease-out);
transition-delay: 0.1s;
}
.tft-cat-badge.is-animating {
transform: translateY(-20px) scale(0.9);
opacity: 0;
transition-delay: 0s;
}
.tft-slider-action.is-animating {
transform: translateY(20px) scale(0.9);
opacity: 0;
transition-delay: 0s;
}
#webgl-canvas {
transition: transform 0.8s var(--tft-ease-out);
}
.is-animating #webgl-canvas {
transform: scale(1.08) rotate(1deg);
} .tft-h2__metrics-enhanced {
background-image: linear-gradient(rgba(10, 61, 46, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 61, 46, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
}
.tft-stat-card-new {
position: relative;
padding: clamp(2rem, 4vh, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
background: #ffffff;
border: 1px solid rgba(10, 61, 46, 0.08);
border-radius: 2.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 380px;
transition: all 0.6s var(--tft-ease-out);
overflow: hidden;
}
.tft-stat-card-new:hover {
transform: translateY(-12px);
border-color: var(--tft-lime);
box-shadow: 0 40px 90px -20px rgba(10, 61, 46, 0.12);
}
.tft-stat-card-new::before {
content: '';
position: absolute;
top: 10%;
right: 10%;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(212, 245, 76, 0.15) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.6s ease;
}
.tft-stat-card-new:hover::before {
opacity: 1;
}
.tft-stat-card-new__top {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4em;
color: rgba(10, 61, 46, 0.3);
}
.tft-stat-card-new__index {
padding: 4px 8px;
border-bottom: 1px solid rgba(10, 61, 46, 0.1);
}
.tft-stat-card-new__body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.tft-stat-card-new__number {
font-family: var(--tft-display, 'Space Grotesk', serif);
font-size: clamp(3.5rem, 6vw, 5.5rem);
color: var(--tft-bg);
line-height: 1;
letter-spacing: -0.04em;
font-weight: 600;
transition: transform 0.6s var(--tft-ease-out);
}
.tft-stat-card-new:hover .tft-stat-card-new__number {
transform: scale(1.05);
}
.tft-stat-card-new__bottom {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.tft-stat-card-new__label {
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.35em;
color: rgba(10, 61, 46, 0.4);
}
.tft-stat-card-new__line {
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(10, 61, 46, 0.1) 0%, rgba(10, 61, 46, 0.02) 100%);
transition: transform 0.6s var(--tft-ease-out);
transform-origin: left;
}
.tft-stat-card-new:hover .tft-stat-card-new__line {
background: var(--tft-lime);
transform: scaleX(1.1);
} .tft-h2__hero {
min-height: 100vh;
padding: 0;
display: flex;
align-items: center;
background-color: var(--tft-h2-dark);
position: relative;
z-index: 10;
overflow: hidden;
}
.tft-h2__hero-bg-overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at 65% 35%, rgba(212, 245, 76, 0.06) 0%, transparent 75%);
pointer-events: none;
z-index: 1;
}
.tft-h2__hero-metadata {
opacity: 0;
transition: opacity 1.2s var(--tft-ease-out), transform 1.2s var(--tft-ease-out);
z-index: 50;
pointer-events: none;
} .tft-h2__hero-metadata.top-12 {
top: 3.5rem;
left: 3.5rem;
transform: translateY(-15px);
}
.tft-h2__hero-metadata.bottom-12 {
bottom: 3.5rem;
right: 3.5rem;
transform: translateY(15px);
}
.on-reveal .tft-h2__hero-metadata {
opacity: 1;
transform: translateY(0);
}
.tft-h2__hero-img-box-v2 {
position: relative;
width: clamp(280px, 40vw, 520px);
aspect-ratio: 0.85/1;
padding: 1.25rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
border-radius: 4rem 4rem 10.5rem 4rem;
box-shadow: 0 45px 110px -25px rgba(0, 0, 0, 0.5);
transition: all 0.9s var(--tft-ease-out);
z-index: 20;
} .tft-h2__shutter-overlay {
position: absolute;
inset: 0;
background: var(--tft-h2-dark);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.75s var(--tft-ease-out);
z-index: 5;
}
.tft-h2__hero-img-v2 {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
} .tft-h2__hero-title-v2 {
font-size: clamp(3.2rem, 7.5vw, 8rem);
letter-spacing: -0.045em;
font-weight: 600;
line-height: 0.82;
position: relative;
z-index: 30;
}
.reveal-inner {
display: inline-block;
transform: translateY(115%);
transition: transform 1.2s var(--tft-ease-out);
}
.on-reveal .reveal-inner {
transform: translateY(0);
} .reveal-up {
opacity: 0;
transform: translateY(35px);
transition: opacity 1.2s var(--tft-ease-out), transform 1.2s var(--tft-ease-out);
transition-delay: 0.5s;
position: relative;
z-index: 60;
}
.on-reveal .reveal-up {
opacity: 1;
transform: translateY(0);
}
.tft-nav-btn {
width: 58px;
height: 58px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: transparent;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.45s var(--tft-ease-out);
cursor: pointer;
}
.tft-nav-btn:hover {
background: var(--tft-lime);
border-color: var(--tft-lime);
color: #0b251e;
transform: translateY(-4px) scale(1.05);
}
.tft-nav-btn i {
width: 19px;
height: 19px;
}
@keyframes progress-vanguard {
0% {
transform: translateX(-105%);
}
40% {
transform: translateX(0%);
}
100% {
transform: translateX(105%);
}
}
.animate-progress-line {
animation: progress-vanguard 5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.reveal-text {
display: block;
margin-bottom: 2.5rem;
color: var(--tft-lime);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.8em;
opacity: 0;
transition: opacity 1.2s ease;
transition-delay: 0.7s;
}
.on-reveal .reveal-text {
opacity: 1;
} .tft-h2__hero-ultimate {
min-height: 100vh;
background-color: #050f0d;
display: flex;
align-items: center;
position: relative;
z-index: 10;
}
.tft-h2__hero-canvas {
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 30%, rgba(212, 245, 76, 0.08) 0%, transparent 65%), radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
pointer-events: none;
}
.tft-h2__hero-topography {
overflow: hidden;
}
.tft-h2__topo-text {
position: absolute;
font-family: var(--tft-display, 'Space Grotesk', serif);
font-size: 22vw;
font-weight: 900;
color: rgba(255, 255, 255, 0.025);
white-space: nowrap;
line-height: 1;
letter-spacing: -0.05em;
pointer-events: none;
user-select: none;
}
.tft-h2__kicker-v2 {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6em;
color: var(--tft-lime);
margin-bottom: 3rem;
display: block;
}
.tft-h2__hero-title-v3 {
font-size: clamp(4rem, 10vw, 10.5rem);
letter-spacing: -0.05em;
font-weight: 600;
}
.tft-h2__hud-nav {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
padding: 8px;
backdrop-filter: blur(10px);
}
.tft-h2__hud-btn {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: all 0.4s var(--tft-ease-out);
background: transparent;
cursor: pointer;
border: none;
}
.tft-h2__hud-btn:hover {
background: var(--tft-lime);
color: #050f0d;
}
.tft-h2__hud-divider {
width: 1px;
height: 20px;
background: rgba(255, 255, 255, 0.1);
margin: 0 5px;
}
.tft-h2__exhibition-frame {
position: relative;
width: clamp(300px, 45vw, 600px);
aspect-ratio: 0.9/1;
}
.tft-h2__shutter-box {
width: 100%;
height: 100%;
border-radius: 2rem;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.6);
}
.tft-h2__hero-img-ultimate {
width: 100%;
height: 100%;
object-fit: cover;
}
.tft-h2__img-glow {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(5, 15, 13, 0.4), transparent 40%);
pointer-events: none;
}
.vertical-text {
writing-mode: vertical-rl;
}
@keyframes progress-vanguard {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
.animate-progress-vanguard {
animation: progress-vanguard 4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
} .tft-h2__vanguard-hero {
background-color: #0d2620;
}
.tft-h2__vanguard-canvas {
pointer-events: none;
}
.tft-h2__vanguard-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(212, 245, 76, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 245, 76, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
}
.tft-h2__vanguard-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at 75% 25%, rgba(212, 245, 76, 0.07) 0%, transparent 60%);
}
.tft-h2__vanguard-title {
font-size: clamp(4rem, 8vw, 8rem);
letter-spacing: -0.04em;
font-weight: 600;
line-height: 0.85;
}
.tft-h2__nav-pill {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
padding: 6px;
backdrop-filter: blur(12px);
}
.tft-h2__nav-arrow {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: all 0.4s var(--tft-ease-out);
background: transparent;
cursor: pointer;
border: none;
}
.tft-h2__nav-arrow:hover {
background: var(--tft-lime);
color: #0d2620;
}
.tft-h2__nav-arrow svg {
width: 18px;
height: 18px;
}
.tft-h2__nav-sep {
width: 1px;
height: 16px;
background: rgba(255, 255, 255, 0.12);
margin: 0 4px;
}
.tft-h2__vanguard-frame {
position: relative;
width: clamp(280px, 35vw, 480px);
aspect-ratio: 0.85/1;
}
.tft-h2__vanguard-shutter {
width: 100%;
height: 100%;
border-radius: 3.5rem 3.5rem 10rem 3.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.5);
}
.tft-h2__vanguard-img-v3 {
width: 100%;
height: 100%;
object-fit: cover;
}
.tft-h2__vanguard-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(13, 38, 32, 0.4), transparent 50%);
pointer-events: none;
}
@keyframes h2-progress {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
.animate-h2-progress {
animation: h2-progress 4.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
} .tft-h2-vanguard {
position: relative;
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #0d2620;
overflow: hidden;
}
.tft-h2-vanguard__bg {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.tft-h2-vanguard__grid {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(212, 245, 76, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 245, 76, 0.02) 1px, transparent 1px);
background-size: 80px 80px;
}
.tft-h2-vanguard__glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at 75% 25%, rgba(212, 245, 76, 0.06) 0%, transparent 70%);
}
.tft-h2-vanguard__topo {
position: absolute;
left: -5%;
bottom: 5%;
font-size: 25vw;
font-weight: 900;
color: rgba(255, 255, 255, 0.02);
line-height: 1;
letter-spacing: -0.05em;
user-select: none;
}
.tft-h2-vanguard__container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 6%;
position: relative;
z-index: 10;
flex: 1;
display: flex;
align-items: center;
}
.tft-h2-vanguard__content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4rem;
width: 100%;
min-height: 550px;
position: relative;
}
@media (min-width: 1024px) {
.tft-h2-vanguard__content {
flex-direction: row;
gap: 2rem;
}
}
.tft-h2-vanguard__info {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
min-height: 500px;
}
@media (min-width: 1024px) {
.tft-h2-vanguard__info {
width: 60%;
}
}
.tft-h2-vanguard__info-inner {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.tft-h2-vanguard__kicker-box {
display: flex;
align-items: center;
gap: 1.2rem;
margin-bottom: 2.5rem;
}
.tft-h2-vanguard__kicker-line {
width: 3.5rem;
height: 1px;
background-color: rgba(212, 245, 76, 0.5);
}
.tft-h2-vanguard__kicker-text {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8em;
color: var(--tft-lime);
}
.tft-h2-vanguard__title {
color: #ffffff;
margin: 0;
}
.tft-h2-vanguard__title-line {
display: block;
overflow: hidden;
font-size: clamp(3.8rem, 8.2vw, 8.2rem);
line-height: 0.85;
letter-spacing: -0.045em;
font-weight: 600;
}
.tft-h2-vanguard__title-line--serif {
font-family: var(--tft-serif, serif);
font-style: italic;
font-weight: 300;
color: rgba(255, 255, 255, 0.85);
} .reveal-inner {
display: inline-block;
transform: translateY(115%) skewY(10deg);
filter: blur(20px);
opacity: 0;
transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.on-reveal .reveal-inner {
transform: translateY(0%) skewY(0deg);
filter: blur(0px);
opacity: 1;
} .tft-h2-vanguard__hud {
position: absolute;
bottom: 5rem;
left: 6%;
display: flex;
align-items: center;
gap: 2.5rem;
z-index: 100;
}
@media (min-width: 1024px) {
.tft-h2-vanguard__hud {
left: 10%;
bottom: 12dvh;
}
}
.tft-h2-vanguard__nav-pill {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
padding: 0.4rem;
backdrop-filter: blur(15px);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
transition: all 0.4s ease;
}
.tft-h2-vanguard__nav-btn {
width: 3.8rem;
height: 3.8rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--tft-lime); background: transparent;
border: none;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.tft-h2-vanguard__nav-btn:hover {
color: #ffffff;
background: var(--tft-lime);
box-shadow: 0 0 30px rgba(212, 245, 76, 0.4);
transform: scale(1.1);
}
.tft-h2-vanguard__nav-btn i {
width: 20px;
height: 20px;
}
.tft-h2-vanguard__nav-sep {
width: 1px;
height: 1.4rem;
background-color: rgba(255, 255, 255, 0.15);
margin: 0 0.4rem;
}
.tft-h2-vanguard__progress {
display: none;
flex: 1;
max-width: 180px;
height: 1px;
background-color: rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
@media (min-width: 640px) {
.tft-h2-vanguard__progress {
display: block;
}
}
.tft-h2-vanguard__progress-bar {
position: absolute;
inset: 0;
background-color: var(--tft-lime);
opacity: 0.5;
transform: translateX(-100%);
animation: h2-vanguard-progress 6s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
@keyframes h2-vanguard-progress {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
} .tft-h2-vanguard__media {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 1024px) {
.tft-h2-vanguard__media {
width: 35%;
justify-content: flex-end;
}
}
.tft-h2-vanguard__frame {
position: relative;
width: clamp(300px, 40vw, 520px);
aspect-ratio: 0.85/1;
}
.tft-h2-vanguard__shutter {
width: 100%;
height: 100%;
border-radius: 4rem 4rem 11rem 4rem;
border: 1px solid rgba(255, 255, 255, 0.12);
position: relative;
overflow: hidden;
box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.6);
}
.tft-h2-vanguard__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
} .tft-h2-vanguard__wipe-mask {
position: absolute;
inset: 0;
background: #0d2620;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
}
.is-wiping .tft-h2-vanguard__wipe-mask {
opacity: 0.85;
}
.is-wiping .tft-h2-vanguard__img {
transform: scale(0.9);
filter: blur(10px);
opacity: 0;
}
.tft-h2-vanguard__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(13, 38, 32, 0.5), transparent 45%);
pointer-events: none;
z-index: 2;
}
.tft-h2-vanguard__meta-tag {
position: absolute;
bottom: -3.5rem;
right: 0;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5em;
color: rgba(255, 255, 255, 0.15);
white-space: nowrap;
} .tft-h2-vanguard .tft-h2__carousel {
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(212, 245, 76, 0.015);
padding: 1.5rem 0;
backdrop-filter: blur(5px);
position: relative;
z-index: 15;
}
.tft-h2-vanguard .tft-h2__carousel::before,
.tft-h2-vanguard .tft-h2__carousel::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 245, 76, 0.1), transparent);
}
.tft-h2-vanguard .tft-h2__carousel::before {
top: 0;
}
.tft-h2-vanguard .tft-h2__carousel::after {
bottom: 0;
}
.tft-h2-vanguard .tft-h2__carousel-track span {
font-size: clamp(2rem, 4vw, 4rem);
font-style: italic;
font-weight: 300;
letter-spacing: -0.02em;
opacity: 0.7;
margin: 0 1rem;
} .tft-h2-vanguard__content {
min-height: 80vh;
}
.tft-h2-vanguard__info {
position: relative;
padding-bottom: 8rem;
}
.tft-h2-vanguard__title-wrap {
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: center;
}
.tft-h2-vanguard__nav {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
@media (max-width: 1023px) {
.tft-h2-vanguard__info {
padding-bottom: 6rem;
}
.tft-h2-vanguard__nav {
justify-content: center;
}
}
.tft-h2-vanguard__kicker-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 0.6rem 1.2rem;
background: rgba(212, 245, 76, 0.05);
border: 1px solid rgba(212, 245, 76, 0.15);
border-radius: 999px;
margin-bottom: 3.5rem;
backdrop-filter: blur(5px);
}
.tft-h2-vanguard__kicker-dot {
width: 6px;
height: 6px;
background: var(--tft-lime);
border-radius: 50%;
box-shadow: 0 0 10px var(--tft-lime);
animation: tft-pulse 2s infinite;
}
@keyframes tft-pulse {
0% {
opacity: 0.4;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0.4;
transform: scale(0.8);
}
}
.tft-h2-vanguard__nav-btn {
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.tft-h2-vanguard__nav-btn:hover {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(212, 245, 76, 0.3);
}
.tft-h2-vanguard__shutter {
padding: 0 !important;
}
.tft-h2-vanguard__img {
width: 100% !important;
height: 100% !important;
object-position: center;
} .tft-h2-vanguard__hud {
position: absolute;
bottom: 5rem;
left: 6%;
display: flex;
align-items: center;
gap: 2.5rem;
z-index: 100;
}
@media (min-width: 1024px) {
.tft-h2-vanguard__hud {
left: 10%;
bottom: 12dvh;
}
}
.tft-h2-vanguard__wipe-mask {
position: absolute;
inset: 0;
background: #0d2620;
z-index: 10;
transform: translateX(100%);
pointer-events: none;
transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
.is-wiping .tft-h2-vanguard__wipe-mask {
transform: translateX(0%);
}
.is-wiping-out .tft-h2-vanguard__wipe-mask {
transform: translateX(-100%);
} #h6-cursor {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 9999;
width: 110px;
height: 110px;
border-radius: 50%;
background-color: #d4f54c; color: #0d2620;
font-family: var(--tft-display, 'Space Grotesk');
font-weight: 700;
font-style: italic;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 13px;
opacity: 0;
transform: translate(-50%, -50%) scale(0.4); transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 20px 50px rgba(212, 245, 76, 0.5);
backdrop-filter: blur(2px);
}
#h6-cursor.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
} .h6-header-hud {
padding: 6rem 10% 3rem 10%;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
gap: 1.5rem;
background: #ffffff;
}
.h6-header-hud__top {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.h6-header-hud__meta {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.6em;
color: #0d2620;
opacity: 0.4;
}
.h6-header-hud__title {
font-family: var(--tft-display, 'Space Grotesk');
font-size: clamp(2.5rem, 6vw, 6rem);
font-weight: 600;
line-height: 0.9;
letter-spacing: -0.04em;
color: #094030;
margin: 0;
}
.h6-header-hud__count {
font-family: var(--tft-body);
font-size: 12px;
font-weight: 600;
color: #0d2620;
display: flex;
align-items: center;
gap: 1rem;
}
.h6-header-hud__count-line {
width: 40px;
height: 1px;
background: #0d2620;
opacity: 0.15;
}
.h6-row {
cursor: none !important;
} .tft-page-home-5 .h5-list-item {
padding: 1.25rem 0.5rem !important;
gap: 1.5rem;
align-items: baseline !important;
transition: all 0.45s var(--tft-ease) !important;
border-bottom-color: rgba(255, 255, 255, 0.035) !important;
}
.tft-page-home-5 .h5-list-index {
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.25em;
opacity: 0.24;
transition: all 0.42s var(--tft-ease);
min-width: 2rem;
}
.tft-page-home-5 .h5-list-item:hover .h5-list-index,
.tft-page-home-5 .h5-list-item.active .h5-list-index {
opacity: 1;
color: var(--brand-lime, #d4f54c);
transform: translateX(4px);
}
.tft-page-home-5 .h5-list-text {
flex: 1;
font-family: 22px;
font-weight: 500;
transition: transform 0.42s var(--tft-ease);
}
.tft-page-home-5 .h5-list-item:hover .h5-list-text,
.tft-page-home-5 .h5-list-item.active .h5-list-text {
transform: translateX(8px);
}
.tft-page-home-5 .h5-list-cat {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.35em;
opacity: 0;
transform: translateX(-10px);
transition: all 0.42s var(--tft-ease);
color: var(--brand-lime, #d4f54c);
font-family: var(--font-body);
}
.tft-page-home-5 .h5-list-item:hover .h5-list-cat,
.tft-page-home-5 .h5-list-item.active .h5-list-cat {
opacity: 0.55;
transform: translateX(0);
}
.tft-page-home-5 .h5-list-item.active .h5-list-line {
opacity: 1 !important;
} @media (max-width: 1024px) {
.tft-page-home-6 main#view-home-6 {
-webkit-overflow-scrolling: touch !important;
overflow-y: auto !important;
display: block !important; min-height: calc(100vh - 70px);
height: auto !important;
}
.tft-page-home-6 .absolute.inset-0.flex.justify-center.z-1 {
display: none !important; }
.tft-page-home-6 .no-scrollbar {
scrollbar-width: auto !important;
-ms-overflow-style: auto !important;
}
.tft-page-home-6 .no-scrollbar::-webkit-scrollbar {
display: block !important;
width: 4px;
}
} @keyframes ringJitter {
0% {
transform: scale(1) rotate(0deg);
opacity: 0.85;
}
33% {
transform: scale(1.02) rotate(1deg);
opacity: 1;
}
66% {
transform: scale(0.99) rotate(-1deg);
opacity: 0.9;
}
100% {
transform: scale(1) rotate(0deg);
opacity: 0.85;
}
}
.tft-page-home-5 .h5-counter-ring {
animation: ringJitter 4s infinite linear;
stroke-dasharray: 600;
stroke-dashoffset: 600;
transition: stroke-dashoffset 1.2s var(--tft-ease);
}
.tft-page-home-5 .h5-counter-wrap:not(.is-updating) .h5-counter-ring {
stroke-dashoffset: 0;
}
.tft-page-home-5 .h5-counter-wrap.is-updating .h5-counter-ring {
stroke-dashoffset: 120;
opacity: 0.4;
}
.tft-page-home-5 .h5-counter-core {
padding-bottom: 0 !important; }
.tft-page-home-5 #h5-counter {
font-family: var(--font-display) !important;
} .font-serif {
font-family: var(--font-display, 'Space Grotesk'), serif !important;
}
.font-sans {
font-family: var(--font-body, 'Plus Jakarta Sans'), sans-serif !important;
} .tft-page-home-5 .h5-list-index {
min-width: 5.5rem !important; text-transform: uppercase;
}
.tft-page-home-5 .h5-list-item::after {
display: none !important;
} .tft-page-home-5 .h5-list-item::before {
display: none !important;
} .tft-page-home-5 .h5-list-text {
opacity: 0.6;
}
.tft-page-home-5 .h5-list-item.active .h5-list-text {
opacity: 1;
}
.tft-page-home-5 .h5-image-shell::after {
border: none !important; }
.tft-page-home-5 .h5-image-meta {
top: 15px;
right: 15px;
gap: 0.35rem;
}
.tft-page-home-5 .h5-image-index,
.tft-page-home-5 .h5-image-tag {
background: #d4f54c;
color: #094030;
font-weight: 700;
border-radius: 2px;
} .tft-page-home-5 .h5-bg-title {
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
pointer-events: none;
white-space: nowrap;
will-change: transform, opacity;
}
.tft-page-home-5 .h5-list-item {
position: relative;
z-index: 10;
mix-blend-mode: lighten;
padding-left: 1.5rem !important;
}
.tft-page-home-5 .h5-list-item::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 50%;
width: 0;
height: 1px;
background: var(--brand-lime);
transition: width 0.45s var(--tft-ease);
}
.tft-page-home-5 .h5-list-item:hover::before,
.tft-page-home-5 .h5-list-item.active::before {
width: 1rem;
}
.tft-page-home-5 .h5-list-index {
font-weight: 800;
letter-spacing: 0.1em;
font-size: 0.55rem;
opacity: 0.15 !important;
transform: translateY(-2px);
transition: all 0.5s var(--tft-ease);
}
.tft-page-home-5 .h5-list-item:hover .h5-list-index,
.tft-page-home-5 .h5-list-item.active .h5-list-index {
opacity: 1 !important;
color: var(--brand-lime);
transform: translateY(-8px);
}
.tft-page-home-5 .h5-list-text {
font-size: 20px;
letter-spacing: -0.02em;
transition: all 0.5s var(--tft-ease);
}
.tft-page-home-5 .h5-list-item:hover .h5-list-text,
.tft-page-home-5 .h5-list-item.active .h5-list-text {
transform: translateX(12px);
letter-spacing: 0.02em;
} .tft-page-home-5 .h5-image-wrap {
perspective: 1200px;
}
.tft-page-home-5 .h5-image-shell {
transition: transform 0.6s var(--tft-ease);
transform-style: preserve-3d;
}
.tft-page-home-5 .h5-image-current {
transform: scale(1) translateZ(0);
transition: transform 0.9s var(--tft-ease), opacity 0.6s ease, filter 0.6s ease;
}
.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-current {
transform: scale(1.1) translateZ(-50px);
opacity: 0.3;
filter: blur(8px) grayscale(1);
}
.tft-page-home-5 .h5-image-next {
clip-path: circle(0% at 50% 50%);
transform: scale(0.8) translateZ(100px);
transition: clip-path 0.8s var(--tft-ease), transform 0.8s var(--tft-ease), opacity 0.5s ease;
}
.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-next {
clip-path: circle(100% at 50% 50%);
transform: scale(1) translateZ(0);
opacity: 1;
} .tft-page-home-5 .h5-case-study-btn {
pointer-events: auto;
z-index: 30;
will-change: transform;
} .tft-page-home-5 .h5-image-layer {
filter: brightness(1.1) contrast(1.1);
}
.tft-page-home-5 .h5-image-veil {
position: absolute;
inset: 0;
background: linear-gradient(30deg, rgba(13, 38, 32, 0.8) 0%, transparent 60%);
z-index: 5;
pointer-events: none;
}
.tft-page-home-5 .h5-image-meta {
z-index: 10;
}
.tft-page-home-5 .h5-image-index {
font-size: 0.7rem;
padding: 0.4rem 1rem;
letter-spacing: 0.2rem;
box-shadow: 0 10px 30px rgba(212, 245, 76, 0.2);
}
.tft-page-home-5 .h5-list-item.active .h5-list-text {
color: var(--brand-lime);
text-shadow: 0 0 20px rgba(212, 245, 76, 0.2);
} .h5-noise-overlay {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.tft-page-home-5 .h5-list {
width: 100%;
}
.tft-page-home-5 .h5-list-item {
width: 100%;
margin-bottom: 0.5rem;
overflow: visible; }
.tft-page-home-5 .h5-list-text {
white-space: normal; line-height: 1.1;
display: block;
max-width: 90%;
} .tft-page-home-5 .h5-image-current {
z-index: 1;
opacity: 1;
transform: scale(1);
transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out, filter 0.8s ease-in-out;
}
.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-current {
opacity: 0.5; transform: scale(1.05);
filter: blur(4px);
}
.tft-page-home-5 .h5-image-next {
z-index: 2;
clip-path: inset(0 100% 0 0); transform: scale(1.1);
transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-next {
clip-path: inset(0 0 0 0);
transform: scale(1);
} .tft-page-home-5 .h5-image-index {
transform: translateY(20px);
opacity: 0;
transition: all 0.6s var(--tft-ease);
}
.tft-page-home-5 .h5-image-wrap:not(.is-transitioning) .h5-image-index {
transform: translateY(0);
opacity: 1;
} .tft-page-home-5 .h5-image-wrap {
perspective: 1500px;
}
.tft-page-home-5 .h5-image-shell {
transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
transform-style: preserve-3d;
}
.tft-page-home-5 .h5-list-item {
transition: transform 0.4s var(--tft-ease), color 0.4s var(--tft-ease);
}
.tft-page-home-5 .h5-list-item:hover {
transform: translateX(15px) scale(1.02);
}
.tft-page-home-5 .h5-bg-title {
filter: blur(8px); } @keyframes gridRevealV {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
@keyframes gridRevealH {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
.val-line {
transform-origin: top;
animation: gridRevealV 1.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.hor-line {
transform-origin: left;
animation: gridRevealH 1.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.val-line:nth-child(1) {
animation-delay: 0.1s;
}
.val-line:nth-child(2) {
animation-delay: 0.2s;
}
.val-line:nth-child(3) {
animation-delay: 0.3s;
}
.val-line:nth-child(4) {
animation-delay: 0.4s;
}
.hor-line {
animation-delay: 0.5s;
} .tft-page-home-5 .h5-image-next {
clip-path: none !important; opacity: 0;
transform: scale(1.05);
transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-next {
opacity: 1;
transform: scale(1);
} .tft-page-home-5 .h5-image-veil {
display: none !important;
} .h5-grid-overlay {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 50px 50px;
background-position: center;
pointer-events: none;
opacity: 0;
animation: fadeIn 2s 1s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
} .tft-page-home-5 .h5-bg-title {
filter: none !important; opacity: 0.015 !important;
}
.tft-page-home-5 .h5-list {
display: flex;
flex-direction: column;
height: 100%;
min-height: 500px;
}
.tft-page-home-5 .h5-list-item {
flex: 1; display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.035); padding: 0 1rem;
}
.tft-page-home-5 .h5-list-item:nth-child(1) {
border-top: 1px solid rgba(255, 255, 255, 0.035);
}
.tft-page-home-5 .h5-list-index {
min-width: 7rem !important;
}
.tft-page-home-5 .h5-grid-overlay {
opacity: 0.03 !important; } .tft-page-home-5 .h5-bg-title {
filter: none !important; }
.tft-page-home-5 .h5-list-item {
height: 100px !important; padding: 0 !important;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
} .tft-page-home-5 .h5-list-text {
font-size: 20px
}
.tft-page-home-5 .h5-list-index {
min-width: 6rem !important;
font-size: 0.5rem;
opacity: 0.25 !important;
} .tft-page-home-5 .h5-list-text {
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-current {
filter: none !important;
transform: none !important;
opacity: 0.7 !important;
} @keyframes ringJitter {
0% {
transform: scale(1);
opacity: 0.9;
}
50% {
transform: scale(1.005);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.9;
}
}  .tft-page-home-5 .h5-image-index {
display: none !important;
} .tft-page-home-5 .h5-list-text {
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
display: block;
} .tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-current {
opacity: 0.1 !important;
filter: none !important;
transform: none !important;
transition: opacity 0.6s ease;
}
.tft-page-home-5 .h5-image-next {
opacity: 0;
transition: opacity 0.6s ease, transform 0.6s var(--tft-ease);
}
.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-next {
opacity: 1;
transform: scale(1) !important;
} @keyframes ringJitterSoft {
0% {
transform: scale(1) rotate(0deg);
opacity: 0.95;
}
50% {
transform: scale(1.006) rotate(0.4deg);
opacity: 1;
}
100% {
transform: scale(1) rotate(0deg);
opacity: 0.95;
}
}
.tft-page-home-5 .h5-counter-ring {
animation: ringJitterSoft 6s infinite linear !important;
} .tft-page-home-5 .h5-image-wrap {
padding: 0 !important; }
.tft-page-home-5 .h5-image-shell {
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
border: none !important; overflow: visible;
} .tft-page-home-5 .h5-image-frame {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
border: 3px solid rgba(255, 255, 255, 0.12);
transition: border-color 0.42s var(--tft-ease);
}
.tft-page-home-5 .h5-image-wrap:hover .h5-image-frame {
border-color: rgba(212, 245, 76, 0.45);
box-shadow: inset 0 0 15px rgba(212, 245, 76, 0.05);
} .tft-page-home-5 .h5-image-frame::before,
.tft-page-home-5 .h5-image-frame::after {
content: "";
position: absolute;
border-color: #d4f54c;
border-style: solid;
opacity: 0.8;
z-index: 11;
transition: transform 0.42s var(--tft-ease), opacity 0.42s ease;
}
.tft-page-home-5 .h5-image-wrap:hover .h5-image-frame::before {
transform: translate(-4px, -4px);
}
.tft-page-home-5 .h5-image-wrap:hover .h5-image-frame::after {
transform: translate(4px, 4px);
} .tft-page-home-5 .h5-image-tag {
background: #d4f54c !important;
color: #094030 !important;
font-weight: 800 !important;
letter-spacing: 0.15em !important;
padding: 0.6rem 1.2rem !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
z-index: 20;
} .tft-page-home-5 .h5-list-item {
position: relative;
border: none !important;
padding: 2.1rem 0.7rem !important;
margin-bottom: 0.5rem;
transition: all 0.45s var(--tft-ease);
}
.tft-page-home-5 .h5-list-item.active {
background: rgba(255, 255, 255, 0.04);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
} .tft-page-home-5 .h5-list-item.active::before,
.tft-page-home-5 .h5-list-item.active::after {
content: "";
position: absolute;
width: 12px;
height: 12px;
border-color: #d4f54c;
border-style: solid;
opacity: 1;
z-index: 5;
transition: transform 0.45s var(--tft-ease);
}
.tft-page-home-5 .h5-list-item.active::before {
top: 0;
left: 0;
border-width: 1.5px 0 0 1.5px;
}
.tft-page-home-5 .h5-list-item.active::after {
bottom: 0;
right: 0;
border-width: 0 1.5px 1.5px 0;
} .tft-page-home-5 .h5-list-index {
font-family: var(--font-mono, monospace) !important;
font-size: 0.6rem;
font-weight: 700;
position: absolute;
left: -1rem;
top: 50%;
transform: translateY(-50%);
opacity: 0.15;
transition: all 0.45s var(--tft-ease);
}
.tft-page-home-5 .h5-list-item.active .h5-list-index {
opacity: 0.8;
color: #d4f54c;
transform: translateY(-50%) translateX(1.5rem);
} .tft-page-home-5 .h5-list-text {
position: relative;
font-size: 20PX; letter-spacing: -0.02em;
padding-left: 1.5rem;
}
.tft-page-home-5 .h5-list-item.active .h5-list-text::after {
content: "";
position: absolute;
bottom: -6px;
left: 1.5rem;
height: 1px;
background: #d4f54c;
width: 40px;
box-shadow: 0 0 10px #d4f54c;
animation: h5Scan 2s infinite ease-in-out;
}
@keyframes h5Scan {
0% {
transform: scaleX(1);
opacity: 0.4;
}
50% {
transform: scaleX(2.5);
opacity: 1;
}
100% {
transform: scaleX(1);
opacity: 0.4;
}
} .tft-page-home-5 .h5-list-cat {
font-family: var(--font-mono, monospace);
font-size: 9px;
font-weight: 800;
background: rgba(212, 245, 76, 0.1);
color: #010100 !important;
padding: 2px 8px;
border-radius: 2px;
letter-spacing: 0.2em;
}  .tft-page-home-5 .h5-image-wrap,
.tft-page-home-5 .h5-image-shell,
.tft-page-home-5 .h5-image-current,
.tft-page-home-5 .h5-image-next {
background-color: transparent !important;
}  .tft-page-home-5 .h5-image-wrap {
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
background: transparent !important;
} :root {
--tft-serif: "Cormorant Garamond", serif;
}
.tft-h6-serif {
font-family: var(--tft-serif) !important;
}
.h6-header-hud__meta {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono, monospace);
font-size: 10px;
letter-spacing: 0.1em;
opacity: 0.5;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding-bottom: 1rem;
}
.h6-row {
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
}
.h6-row:hover {
background-color: #f7f9f8 !important;
}
.h6-row h3 {
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), color 0.4s ease;
}
.h6-row:hover h3 {
transform: translateX(20px);
color: #094030 !important;
}
.h6-row:hover .h6-index {
color: #d4f54c !important;
}
.h6-row::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: #d4f54c;
transition: width 0.6s var(--tft-ease);
z-index: 20;
pointer-events: none;
}
.h6-row:hover::before {
width: 4px;
}
.h6-header-hud__timer {
font-weight: 700;
color: #094030;
opacity: 0.8;
}
.h6-fan-img {
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15) !important;
border: 1px solid rgba(255, 255, 255, 0.8) !important;
transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease !important;
}
.tft-h4-serif {
font-family: var(--tft-serif) !important;
font-weight: 300 !important;
}
.tft-v4-col::after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 1px;
background: #d4f54c;
z-index: 10;
pointer-events: none;
transition: opacity 0.4s ease;
}
.tft-v4-col:last-child::after {
display: none;
} .tft-page-home-4 {
--v4-ease: cubic-bezier(0.19, 1, 0.22, 1);
--transition-v4: 0.8s var(--v4-ease);
background-color: #0d2620;
overflow: hidden;
} .tft-v4-grain,
.tft-v4-noise {
position: fixed;
inset: 0;
z-index: 99;
pointer-events: none;
opacity: 0.04;
}
.tft-v4-grain {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tft-v4-noise {
opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
} .tft-v4-aside {
transition: width var(--transition-v4), transform var(--transition-v4), box-shadow 0.6s ease;
background: #ffffff !important;
}
.tft-v4-aside:hover {
box-shadow: 30px 0 80px rgba(0, 0, 0, 0.25);
}
.tft-v4-aside__stripe {
transition: background-color 0.4s ease;
}
.tft-v4-aside:hover .tft-v4-aside__stripe {
background-color: #f7f7f3;
}
.tft-v4-aside__tag {
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.tft-v4-aside__interactive-icon {
transition: all 0.5s var(--v4-ease);
transform-origin: center;
}
.tft-v4-aside__interactive-icon:hover {
transform: scale(1.1) rotate(15deg);
background: #d4f54c !important;
color: #094030 !important;
box-shadow: 0 0 40px rgba(212, 245, 76, 0.4);
}
@keyframes tft-sparkle {
0% {
transform: scale(1) rotate(0deg);
opacity: 0.8;
}
50% {
transform: scale(1.2) rotate(180deg);
opacity: 1;
}
100% {
transform: scale(1) rotate(360deg);
opacity: 0.8;
}
}
.tft-v4-icon-spark {
animation: tft-sparkle 4s linear infinite;
} .tft-v4-col {
position: relative;
overflow: hidden;
transition: flex 1.2s var(--v4-ease), opacity 0.8s ease;
will-change: flex;
}
.tft-v4-col:hover {
flex: 1.8 !important;
z-index: 2;
}
.tft-v4-col__bg {
transition: transform 2s var(--v4-ease), filter 1s ease;
filter: saturate(0.75) brightness(0.85);
}
.tft-v4-col:hover .tft-v4-col__bg {
filter: saturate(1.1) brightness(1.1);
}
.tft-v4-col__title {
font-family: 'Playfair Display', serif !important;
font-size: clamp(3.5rem, 10vw, 8rem);
letter-spacing: -0.05em;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
transition: transform 1s var(--v4-ease), opacity 0.8s ease;
pointer-events: none;
}
.tft-v4-col:hover .tft-v4-col__title {
transform: scale(1.05) translateY(-10px);
opacity: 1;
}
.tft-v4-col__btn {
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2) !important;
transition: all 0.4s var(--v4-ease);
}
.tft-v4-col__btn:hover {
background: #d4f54c !important;
color: #0d2620 !important;
border-color: #d4f54c !important;
box-shadow: 0 30px 60px rgba(212, 245, 76, 0.3);
} .tft-v4-hud {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
transition: all 0.5s var(--v4-ease);
}
.tft-v4-hud:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-8px);
} @media (max-width: 768px) {
.tft-v4-col {
min-height: 40vh !important;
}
.tft-v4-col:hover {
flex: 2.2 !important;
}
.tft-v4-col__title {
font-size: clamp(2.8rem, 15vw, 4.5rem);
}
}    :root {
--rlz-lime: #d4f54c;
--rlz-sidebar: #094030;
}  .tft-page-home-4 .tft-v4-col {
position: relative;
border: none !important; } .tft-page-home-4 a.rounded-full {
text-decoration: none !important;
transition: all 0.4s var(--tft-ease);
}
.tft-page-home-4 a.rounded-full:hover {
background-color: var(--rlz-lime) !important;
color: var(--rlz-sidebar) !important;
box-shadow: 0 0 40px rgba(212, 245, 76, 0.4), 0 20px 40px rgba(0, 0, 0, 0.4);
transform: scale(1.1) rotate(-2deg);
}
.tft-page-home-4 a.rounded-full span {
pointer-events: none;
} .tft-page-index .tft-slider-h1 {
width: fit-content !important;
padding-inline-end: 8vw !important; pointer-events: none;
}
.tft-page-index .tft-slider-h1--bold {
transform: none !important; margin-inline-start: 12% !important; white-space: nowrap !important;
}
.tft-page-index .text-reveal-wrap {
overflow: visible !important; clip-path: inset(-100% -100% 0 -100%) !important; } @media (max-width: 1024px) {
.tft-page-index .tft-slider-h1 {
padding-inline-end: 2vw !important;
}
}
@media (max-width: 768px) {
.tft-page-index .tft-slider-h1 {
padding-inline-end: 0 !important;
width: 100% !important;
align-items: center !important;
}
.tft-page-index .tft-slider-h1--bold {
margin-inline-start: 0 !important;
transform: none !important;
text-align: center !important;
}
.tft-page-index .text-reveal-wrap {
text-align: center !important;
}
}  .tft-page-index .tft-slider-h1 {
width: fit-content !important;
padding-inline-end: 8vw !important; pointer-events: none;
font-size: clamp(3.2rem, 12vw, 11rem) !important; }
.tft-page-index .tft-slider-h1--bold {
transform: none !important; margin-inline-start: 12% !important; white-space: nowrap !important;
}
.tft-page-index .text-reveal-wrap {
overflow: visible !important; clip-path: inset(-100% -100% 0 -100%) !important; } @media (max-width: 1024px) {
.tft-page-index .tft-slider-h1 {
padding-inline-end: 2vw !important;
}
}
@media (max-width: 768px) {
.tft-page-index .tft-slider-h1 {
font-size: clamp(2.8rem, 15vw, 4.5rem) !important; padding-inline-end: 0 !important;
width: 100% !important;
align-items: center !important;
}
.tft-page-index .tft-slider-h1--bold {
margin-inline-start: 0 !important;
text-align: center !important;
}
.tft-page-index .text-reveal-wrap {
text-align: center !important;
}
}   .menu-toggle.menu-open {
background-color: #d4f54c !important; box-shadow: 0 0 35px rgba(212, 245, 76, 0.4) !important;
transform: scale(1.1) rotate(0deg);
}
.menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg) !important;
background-color: #094030 !important; }
.menu-toggle.menu-open .line-2 {
opacity: 0 !important;
transform: translateX(15px) !important;
}
.menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg) !important;
background-color: #094030 !important;
} @media (max-width: 768px) { body.menu-active header.fixed {
background-color: #094030 !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
height: 80px; transition: all 0.4s var(--tft-ease);
}
body.menu-active header img {
filter: brightness(0) invert(1) !important; transform: scale(0.9);
transition: transform 0.4s var(--tft-ease);
} #menu-panel {
top: 80px !important;
height: calc(100dvh - 80px) !important;
}
}  #menu-panel .menu-toggle {
background: transparent !important;
border: none !important;
color: rgba(255, 255, 255, 0.4) !important;
box-shadow: none !important;
transition: all 0.3s var(--tft-ease);
}
#menu-panel .menu-toggle:hover {
color: var(--tft-lime, #d4f54c) !important;
transform: rotate(90deg) scale(1.1);
} @media (max-width: 768px) {
body.menu-active header.fixed {
background-color: #ffffff !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
height: 70px !important; }
body.menu-active header img {
filter: none !important; transform: none !important;
} #menu-panel {
top: 70px !important;
height: calc(100dvh - 70px) !important;
background: rgba(13, 38, 32, 0.98) !important; border-top: 1px solid rgba(255, 255, 255, 0.05);
}
} .menu-toggle.menu-open {
background-color: #094030 !important; border-radius: 999px !important; transform: scale(0.9);
}
.menu-toggle.menu-open .line-1,
.menu-toggle.menu-open .line-3 {
background-color: #d4f54c !important; } .tft-menu-glass {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}  @media (max-width: 768px) { body.menu-active header.fixed {
background-color: #094030 !important; border-bottom: 1px solid rgba(212, 245, 76, 0.1) !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}  body.menu-active header img {
transition: all 0.4s ease;
} .menu-toggle.menu-open {
background-color: #d4f54c !important; border-radius: 999px !important;
width: 52px !important;
height: 52px !important;
box-shadow: 0 0 20px rgba(212, 245, 76, 0.5) !important;
transform: scale(0.9) rotate(0deg);
} .menu-toggle.menu-open .line-1,
.menu-toggle.menu-open .line-3 {
background-color: #094030 !important;
height: 3px !important;
width: 24px !important;
right: 14px !important;
}
} #menu-panel {
background-color: rgba(13, 38, 32, 0.98) !important; backdrop-filter: blur(25px) saturate(150%);
-webkit-backdrop-filter: blur(25px) saturate(150%);
border-right: 1px solid rgba(255, 255, 255, 0.05);
} #menu-panel span.font-display {
text-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
letter-spacing: 0.02em !important;
} #menu-panel .bg-brand-lime {
box-shadow: 0 5px 15px rgba(212, 245, 76, 0.2);
} header img,
.tft-sidebar-logo-vertical img,
.tft-footer-column img {
filter: none !important;
opacity: 1 !important;
} #menu-panel {
background: rgba(13, 38, 32, 0.98) !important; opacity: 1 !important;
box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5);
} @media (max-width: 768px) {
header.fixed {
height: 70px !important;
}
} .menu-toggle.menu-open .line-1,
.menu-toggle.menu-open .line-3 {
background-color: #094030 !important; box-shadow: none !important;
}  @media (max-width: 768px) { body.menu-active [class*="header"],
body.menu-active header.fixed,
body.menu-active .fixed.top-0.left-0.w-full {
background: #094030 !important; background-color: #094030 !important;
border-bottom: 2px solid #d4f54c !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
height: 70px !important;
transition: background-color 0.4s var(--tft-ease);
} body.menu-active header img {
opacity: 1 !important;
transition: filter 0.4s ease;
} body.menu-active .menu-toggle.menu-open {
background-color: #d4f54c !important; border-radius: 999px !important;
width: 50px !important;
height: 50px !important;
transform: scale(0.9) !important;
border: none !important;
} body.menu-active .menu-toggle.menu-open .line-1,
body.menu-active .menu-toggle.menu-open .line-2,
body.menu-active .menu-toggle.menu-open .line-3 {
background-color: #0d251f !important;
opacity: 1 !important;
visibility: visible !important;
}
} #menu-panel {
background-color:  rgba(13, 38, 32, 0.98)  !important;
border-right: 1px solid rgba(255, 255, 255, 0.05);
}
#menu-panel .font-display,
#menu-panel a,
#menu-panel span {
color: #ffffff !important; }
#menu-panel span[class*="text-white/"] {
color: #ffffff !important;
opacity: 0.5 !important; } #menu-panel .bg-brand-lime {
background-color: #d4f54c !important;
}  @media (max-width: 768px) { header.fixed {
background: rgb(10 64 48) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
height: 70px !important;
padding-inline: 20px !important;
transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
} .menu-toggle {
width: 50px !important;
height: 50px !important;
background: #094030 !important; border-radius: 999px !important;
border: none !important;
box-shadow: 0 5px 15px rgba(9, 64, 48, 0.2) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.4s var(--tft-ease) !important;
}
.menu-toggle .hamburger-line {
background-color: #ffffff !important; right: 11px !important;
width: 28px !important;
height: 2px !important;
border-radius: 4px !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.menu-toggle .line-3 {
width: 18px !important;
}  .menu-toggle:hover {
transform: scale(1.05);
background: #0d2620 !important;
} body.menu-active header.fixed {
background: #0d2620 !important; border-bottom-color: rgba(255, 255, 255, 0.05) !important;
} .menu-toggle.menu-open {
background: #d4f54c !important; }
.menu-toggle.menu-open .line-1,
.menu-toggle.menu-open .line-2,
.menu-toggle.menu-open .line-3 {
background-color: #094030 !important; }
.menu-toggle.menu-open .line-1 {
transform: translateY(8px) rotate(45deg) !important;
}
.menu-toggle.menu-open .line-2 {
opacity: 0 !important;
}
.menu-toggle.menu-open .line-3 {
width: 28px !important;
transform: translateY(-8px) rotate(-45deg) !important;
} #menu-panel {
top: 70px !important;
background: #0d2620 !important; height: calc(100dvh - 70px) !important;
z-index: 55 !important;
}
#menu-panel .tft-menu-glass {
background: transparent !important;
border: none !important;
} #menu-panel a,
#menu-panel span.font-display {
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 500 !important;
font-size: 2.2rem !important;
letter-spacing: -0.01em !important;
color: #ffffff !important;
transition: all 0.3s ease;
}
#menu-panel a:hover {
color: #d4f54c !important;
padding-left: 10px;
} #menu-panel ul[id$="-submenu"] a {
font-size: 1.25rem !important;
opacity: 0.6 !important;
}
#menu-panel ul[id$="-submenu"] a:hover {
opacity: 1 !important;
} #menu-panel span.tracking-widest {
color: rgba(212, 245, 76, 0.5) !important; }
} body.menu-active #menu-panel li {
animation: slideInUp 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
opacity: 0;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
body.menu-active #menu-panel li:nth-child(1) {
animation-delay: 0.1s;
}
body.menu-active #menu-panel li:nth-child(2) {
animation-delay: 0.15s;
}
body.menu-active #menu-panel li:nth-child(3) {
animation-delay: 0.2s;
}
body.menu-active #menu-panel li:nth-child(4) {
animation-delay: 0.25s;
}  @media (max-width: 768px) { .menu-toggle {
background: #094030 !important; border-radius: 999px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
transition: all 0.4s var(--tft-ease) !important;
} .menu-toggle .hamburger-line {
background-color: #ffffff !important;
} .menu-toggle.menu-open {
background: #094030 !important; box-shadow: 0 0 25px rgba(212, 245, 76, 0.4) !important;
}
.menu-toggle.menu-open .line-1,
.menu-toggle.menu-open .line-2,
.menu-toggle.menu-open .line-3 {
background-color: #d4f54c !important; height: 2px !important;
opacity: 1 !important;
visibility: visible !important;
} #menu-panel {
top: 70px !important;
}
#menu-panel .pt-12 {
padding-top: 2rem !important;
} #menu-panel .px-10 {
padding-inline: 1.5rem !important;
}
#menu-panel .py-6 {
padding-block: 1rem !important;
} #menu-panel span.font-display {
font-size: 1.8rem !important;
}  .tft-mobile-menu-footer {
padding-top: 2rem !important;
margin-top: 2rem !important;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: block !important; opacity: 1 !important;
}
.tft-mobile-contact-link {
font-family: inherit !important;
font-weight: 600 !important;
font-size: 1.4rem !important;
color: #ffffff !important;
letter-spacing: -0.02em !important;
text-decoration: none !important;
}
.tft-mobile-social-grid {
display: flex !important;
flex-wrap: wrap;
gap: 12px !important;
margin-top: 1.5rem !important;
}
.tft-mobile-social-item {
width: 44px !important;
height: 44px !important;
border: 1px solid rgba(212, 245, 76, 0.3);
border-radius: 999px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
color: #d4f54c !important;
text-transform: uppercase;
background: rgba(212, 245, 76, 0.05);
transition: all 0.3s var(--tft-ease);
}
.tft-mobile-social-item:hover {
background: #d4f54c !important;
color: #094030 !important;
border-color: #d4f54c !important;
}
} @media (max-width: 768px) { .tft-page-home-2 .tft-h2-vanguard {
justify-content: flex-start !important;
padding-top: 120px !important; }
body .menu-toggle:hover .hamburger-line {
background-color: #0d2620 !important;
}
.tft-page-home-2 .tft-h2-vanguard__container {
flex: none !important;
min-height: auto !important;
}
.tft-page-home-2 .tft-h2-vanguard__content {
min-height: auto !important;
gap: 2.5rem !important; } .tft-page-home-2 header.fixed {
background-color: #1a3325 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}  .tft-h2-vanguard__title-line .reveal-inner {
letter-spacing: -0.05em !important;
}
}  @media (max-width: 768px) { .menu-toggle,
.menu-toggle.menu-open {
box-shadow: none !important;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
}  .menu-toggle {
background-color: #fff !important;
transform: scale(0.85) !important; }
.menu-toggle .hamburger-line {
background-color: #ffffff !important;
height: 2px !important;
} .menu-toggle.menu-open {
background-color: #d4f54c !important; transform: scale(1) rotate(0deg) !important; }
.menu-toggle.menu-open .line-1,
.menu-toggle.menu-open .line-2,
.menu-toggle.menu-open .line-3 {
background-color: #0d2620 !important; height: 2.5px !important; width: 24px !important;
right: 13px !important;
opacity: 1 !important;
visibility: visible !important;
} .menu-toggle.menu-open .line-1 {
transform: translateY(7px) rotate(45deg) !important;
}
.menu-toggle.menu-open .line-3 {
transform: translateY(-7px) rotate(-45deg) !important;
}
} #menu-panel .on-reveal span.font-display {
color: #ffffff !important;
text-shadow: none !important; }  @media (max-width: 768px) {
.tft-page-home-2 .tft-h2-vanguard {
padding-top: 80px !important; }
.tft-page-home-2 .tft-h2-vanguard__container {
padding-top: 0 !important;
margin-bottom: 0 !important;
}
.tft-page-home-2 .tft-h2-vanguard__info {
min-height: auto !important; padding-bottom: 0 !important;
}
.tft-page-home-2 .tft-h2-vanguard__content {
gap: 1.5rem !important; min-height: auto !important;
}
.tft-page-home-2 .tft-h2-vanguard__info-inner {
padding-bottom: 0 !important;
}
}  @media (max-width: 768px) { .tft-page-home-2 .tft-h2-vanguard__kicker-box {
margin-top: 2rem !important;
} .tft-page-home-2 .tft-h2-vanguard {
height: auto !important;
min-height: 100svh !important;
padding-bottom: 4rem !important;
display: flex !important;
flex-direction: column !important;
} .tft-page-home-2 .tft-h2-vanguard__hud {
position: relative !important;
bottom: auto !important;
margin-top: 3rem !important; left: 0 !important;
padding-inline: 6% !important;
transform: none !important;
} .tft-page-home-2 .tft-h2-vanguard__container {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}  @media (max-width: 768px) { .tft-slider-btn {
width: 50px !important;
height: 50px !important;
}
.tft-slider-btn i {
font-size: 1rem !important;
} .tft-slider-h1 {
font-size: clamp(2.2rem, 10vw, 3.5rem) !important;
gap: 0.5rem !important;
}
.tft-cat-badge {
margin-bottom: 1rem !important;
}
.tft-slider-action {
margin-top: 1.5rem !important;
} .perspective-container {
padding: 1.5rem !important;
} #badge-current {
font-size: 2.5rem !important;
}
}  @media (max-width: 768px) {
.tft-page-home-2 .tft-h2-vanguard__content {
text-align: center !important;
} .tft-page-home-2 .tft-h2-vanguard__kicker-box {
justify-content: center !important;
gap: 0 !important;
}
.tft-page-home-2 .tft-h2-vanguard__kicker-line {
display: none !important;
} .tft-page-home-2 .tft-h2-vanguard__title {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
}  .tft-v4-col__title--serif {
font-family: var(--tft-serif, serif);
font-style: italic;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
margin-top: 0.5rem;
}
.tft-v4-col__btn--elite {
clip-path: polygon(10% 0%, 100% 0%, 100% 70%, 90% 100%, 0% 100%, 0% 30%);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 245, 76, 0.1);
}
.tft-v4-col__btn--elite:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 30px rgba(163, 255, 0, 0.2);
}  @media (max-width: 768px) {
body[class*="tft-page-"] {
height: auto !important;
min-height: 100svh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
} .tft-page-home-5 .view-section {
position: relative !important;
height: auto !important;
min-height: 100svh !important;
overflow: visible !important;
}
.tft-page-home-2 .view-section,
.tft-page-home-3 .view-section,
.tft-page-home-6 .view-section,
.tft-page-home-7 .view-section {
position: absolute !important;
inset: 0 !important;
height: 100% !important;
overflow: hidden !important;
} header.fixed {
position: fixed !important; z-index: 999 !important;
}
} @media (max-width: 768px) {
.tft-page-home-4 div.absolute.left-0.z-10 {
position: absolute !important;
height: calc(100vh - 70px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-top: 70px !important;
top: 0 !important;
left: 0 !important;
}
.tft-page-home-4 #view-home-4 {
position: relative !important;
display: block !important; width: 100% !important;
height: auto !important;
min-height: fit-content !important;
inset: auto !important;
border: none !important;
}
.tft-page-home-4 .tft-v4-col {
display: block !important; width: 100% !important;
height: 60vh !important;
min-height: 480px !important;
position: relative !important;
border-bottom: 2px solid rgba(212, 245, 76, 0.1) !important;
}
.tft-page-home-4 .tft-v4-col__title {
font-size: clamp(2.5rem, 10vw, 4.5rem) !important;
margin-bottom: 1.5rem !important;
}
}  @media (max-width: 768px) { .tft-page-home-5 .h5-list-index {
display: none !important;
}
.tft-page-home-5 .h5-list-text {
font-size: clamp(1rem, 6vw, 1.4rem) !important;
padding-left: 0.5rem !important;
}   .text-reveal-wrap {
overflow: hidden !important;
padding-right: 1.5em !important; margin-right: -1.5em !important; display: inline-block !important;
}
.text-reveal {
display: inline-block !important;
will-change: transform;
pointer-events: auto !important;
} .tft-slider-h1 {
line-height: 0.8 !important; overflow: visible !important; }
.tft-slider-h1--italic {
font-style: italic !important;
transform: skewX(-5deg); }
.tft-page-home-5 .h5-list-item {
height: auto !important;
padding: 0.45rem 0.5rem !important;
margin-bottom: 0.15rem !important;
transition: background 0.3s ease !important;
} .tft-page-home-5 .h5-list-item.active {
background: rgba(212, 245, 76, 0.08) !important;
border-left: 3px solid #d4f54c; }
.tft-page-home-5 .h5-list-item.active .h5-list-text {
color: #ffffff !important;
} .tft-page-home-5 .view-section,
.tft-page-home-5 .h4-content,
.tft-page-home-5 div[class*="overflow-y-auto"] {
overflow-x: hidden !important;
}
.tft-page-home-5 .view-section {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
} .tft-page-home-5 .max-w-\[1400px\] {
gap: 2rem !important;
} .tft-page-home-5 div[class*="rounded-full"][class*="bg-brand-lime"] {
width: 105px !important;
height: 105px !important;
}
.tft-page-home-5 div[class*="rounded-full"][class*="bg-brand-lime"] span {
font-size: 0.8rem !important;
}
}  #slider-container[class*="book-3d"] {
transform: none !important;
perspective: none !important;
} #slider-media-layer {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
will-change: transform;
pointer-events: none;
background-color: #071e18; transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
} #slider-container:hover #slider-media-layer {
transform: scale(1.1) translate(var(--mx, 0), var(--my, 0));
} #webgl-canvas {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
z-index: 20;
pointer-events: none;
}
#slider-fallback-image {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
z-index: 11;
} .tft-cat-badge,
.tft-slider-btn,
.tft-slider-action {
transition: all 0.6s var(--tft-ease);
}
#slider-container:hover .tft-cat-badge__pill {
background: #d4f54c !important;
box-shadow: 0 0 30px rgba(212, 245, 76, 0.4);
}
#slider-container:hover .tft-cat-badge__label {
color: #094030 !important;
} .tft-glass-panel,
.tft-index-badge,
.tft-slider-btn {
backdrop-filter: blur(40px) saturate(220%) !important;
background: rgba(13, 38, 32, 0.25) !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.2) !important;
border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
border-right: 0.5px solid rgba(255, 255, 255, 0.05) !important;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.05) !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}
.tft-slider-h1 {
text-align: center !important;
width: 100% !important;
}
.tft-cat-badge {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
#slider-container:hover .tft-slider-btn {
border-color: #d4f54c !important;
background: rgba(212, 245, 76, 0.1);
} .tft-slider-h1 .text-reveal-wrap {
overflow: hidden !important;
display: block;
padding-right: 1.5em !important; margin-right: -1.5em !important;
}
.tft-slider-h1 .text-reveal {
display: block;
transform: translateY(0);
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.tft-slider-h1.is-animating .text-reveal {
transform: translateY(110%);
transition: transform 0.4s cubic-bezier(0.45, 0, 0.55, 1);
} #view-home-1.is-transitioning .tft-glass-panel,
#view-home-1.is-transitioning .tft-index-badge,
#view-home-1.is-transitioning .tft-slider-h1,
#view-home-1.is-transitioning .tft-cat-badge {
filter: blur(8px) opacity(0.5);
transform: scale(0.98);
}
#view-home-1 .tft-glass-panel,
#view-home-1 .tft-index-badge,
#view-home-1 .tft-slider-h1,
#view-home-1 .tft-cat-badge {
transition: filter 0.8s var(--tft-ease), transform 0.8s var(--tft-ease), opacity 0.8s var(--tft-ease);
} .tft-page-index .view-section {
position: absolute !important;
inset: 0 !important;
height: 100% !important;
min-height: 100% !important;
overflow: hidden !important;
}
@media (max-width: 768px) {
.tft-page-index,
.tft-page-index body {
height: 100vh !important;
height: 100svh !important;
overflow: hidden !important;
}
} .tft-page-home-4 #view-home-4 {
display: flex !important;
flex-direction: row !important;
}
.tft-v4-col {
flex: 1 !important;
position: relative !important;
height: 100% !important;
overflow: hidden !important;
border-right: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.tft-v4-col:hover {
flex: 1.4 !important;
}
.tft-v4-col__bg {
transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.tft-v4-col:hover .tft-v4-col__bg {
transform: scale(1.1);
}
.tft-v4-col:hover .overlay-dim {
opacity: 0.3 !important;
} .tft-h2-vanguard {
position: relative;
width: 100%;
height: 100vh;
height: 100svh;
overflow: hidden;
background: var(--tft-bg, #0d2620);
display: flex;
align-items: center;
}
.tft-h2-vanguard__container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 6%;
position: relative;
z-index: 10;
}
.tft-h2-vanguard__content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4rem;
}
.tft-h2-vanguard__info {
flex: 1;
max-width: 600px;
}
.tft-h2-vanguard__media {
flex: 1;
display: flex;
justify-content: flex-end;
}
.tft-h2-vanguard__frame {
position: relative;
width: 100%;
max-width: 500px;
}
.tft-h2-vanguard__img {
width: 100%;
height: auto;
object-fit: cover;
clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
}   .tft-page-home-8 {
--aurora-lime: #d4f54c;
--aurora-bg: #0d2620;
background-color: var(--aurora-bg);
overflow: hidden;
}
.tft-aurora {
position: relative;
width: 100%;
height: 100vh;
background: var(--aurora-bg);
}
.tft-aurora__snakes {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
opacity: 0.45;
}
.tft-aurora__path {
transition: d 1.4s cubic-bezier(1, 0, 0, 1), stroke-dashoffset 0.1s linear, stroke 1.2s ease, filter 0.8s ease, transform 0.8s ease;
stroke-dasharray: 4000;
stroke-dashoffset: 4000;
filter: drop-shadow(0 0 12px var(--aurora-lime));
will-change: d, filter, transform;
}
.tft-aurora__path.glitching {
filter: blur(35px) brightness(2.5) contrast(150%);
transform: scale(1.1) translate(15px, -10px);
opacity: 0.6;
}
.tft-aurora__slider {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.tft-aurora__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 1.2s var(--tft-ease);
}
.tft-aurora__slide.active {
opacity: 1;
visibility: visible;
z-index: 5;
}
.tft-aurora__slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: all 1.2s cubic-bezier(1, 0, 0, 1);
transform: scale(0.95);
filter: blur(10px);
}
.tft-aurora__slide.active {
opacity: 1;
visibility: visible;
transform: scale(1);
filter: blur(0px);
z-index: 20;
}
.tft-aurora__slide.exiting {
opacity: 0;
visibility: visible;
transform: scale(1.4);
filter: blur(30px);
z-index: 25;
}
.tft-aurora__bg {
transition: transform 8s linear;
transform: scale(1.05); }
.tft-aurora__slide.active .tft-aurora__bg {
animation: tftKenBurns 20s infinite alternate ease-in-out;
}
@keyframes tftKenBurns {
from {
transform: scale(1.05) translate(0, 0);
}
to {
transform: scale(1.2) translate(-2%, -2%);
}
}
.tft-aurora__content {
z-index: 30;
}
.tft-aurora__slide .reveal-title {
opacity: 0;
transform: translateY(120px) skewY(12deg);
transition: all 1.4s cubic-bezier(0.19, 1, 0.22, 1);
font-size: clamp(60px, 14vw, 240px);
letter-spacing: -0.05em;
}
.tft-aurora__slide.active .reveal-title {
opacity: 1;
transform: translateY(0) skewY(0);
transition-delay: 0.6s;
}
.tft-aurora__slide h2>span {
display: block;
line-height: 0.8;
letter-spacing: 0.01em;
} .tft-aurora__overlay {
background: rgba(13, 38, 32, 0);
backdrop-filter: blur(0px);
transition: all 0.8s cubic-bezier(1, 0, 0, 1);
}
.tft-aurora--transitioning .tft-aurora__overlay {
background: rgba(13, 38, 32, 0.8);
backdrop-filter: blur(30px);
pointer-events: auto;
}
@media (max-width: 768px) {
.tft-aurora__content {
padding: 2rem;
}
} .tft-ribbon {
--ribbon-height: clamp(80px, 10vh, 120px);
width: 100%;
min-height: var(--ribbon-height);
display: flex;
align-items: center;
background: linear-gradient(90deg, transparent, rgba(212, 245, 76, 0.05), transparent);
}
.tft-ribbon__scan {
animation: tftRibbonScan 6s linear infinite;
box-shadow: 0 0 20px var(--brand-lime);
}
@keyframes tftRibbonScan {
0% {
left: -10%;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
left: 110%;
opacity: 0;
}
}
.tft-marquee {
position: relative;
width: 100%;
overflow: hidden;
padding: 10px 0;
}
.tft-marquee__inner {
display: flex;
width: max-content;
flex-wrap: nowrap;
animation: tftMarquee 40s linear infinite;
will-change: transform;
}
.tft-marquee__text {
flex-shrink: 0;
white-space: nowrap;
padding-right: 40px;
}
@keyframes tftMarquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-33.3333%);
}
}
.tft-ribbon .tft-marquee__text {
color: white;
font-size: clamp(24px, 4.5vw, 64px);
line-height: 1;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
transition: all 0.5s var(--tft-ease);
}
.tft-ribbon:hover .tft-marquee__text {
color: var(--brand-lime);
text-shadow: 0 0 30px rgba(212, 245, 76, 0.3);
}
@media (max-width: 768px) {
.tft-aurora {
height: calc(100dvh - 70px);
}
.tft-aurora__content {
padding-top: 60px;
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
}
.tft-aurora__slide .reveal-title {
font-size: clamp(32px, 10vw, 52px) !important;
line-height: 0.9;
}
.tft-aurora__hud {
bottom: 80px;
gap: 1rem;
width: 100%;
justify-content: center;
padding: 0 1rem;
}
.tft-aurora__nav-btn {
width: 44px;
height: 44px;
}
.tft-aurora__hud .w-32 {
display: none; }
.tft-aurora__hud span {
font-size: 14px;
}
}  .tft-back-to-top {
width: 65px !important;
height: 65px !important;
aspect-ratio: 1 / 1 !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important; }  .w-5 {
width: 20px !important;
}
.h-5 {
height: 20px !important;
}
.rounded-full {
border-radius: 9999px !important;
}
.bg-brand-lime {
background-color: #d4f54c !important;
} #menu-panel .w-5.h-5.rounded-full {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 10px rgba(212, 245, 76, 0.2);
} @media (max-width: 768px) { .menu-panel .py-6 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.menu-panel .font-display {
font-size: 1.5rem !important;
}
}   .tft-page-home-7 {
--h7-blur: 16px;
--h7-glass: rgba(255, 255, 255, 0.04);
--h7-border: rgba(255, 255, 255, 0.1);
} .tft-h7-particles {
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(circle, #d4f54c 1px, transparent 1px);
background-size: 120px 120px;
opacity: 0.05;
animation: tftArchiveFlow 40s linear infinite;
}
@keyframes tftArchiveFlow {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-120px) rotate(2deg);
}
} .tft-h7-hud {
width: 65px;
height: 65px;
flex-shrink: 0;
border-radius: 999px;
background: var(--h7-glass);
backdrop-filter: blur(var(--h7-blur));
border: 1px solid var(--h7-border);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.tft-h7-hud img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.tft-h7-hud:hover {
background: var(--brand-lime);
border-color: var(--brand-lime);
transform: scale(1.15) rotate(15deg);
box-shadow: 0 0 30px rgba(212, 245, 76, 0.4);
} .tft-arch-container {
box-shadow: 0 -40px 150px -20px rgba(0, 0, 0, 0.8), inset 0 0 100px rgba(13, 38, 32, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
} .tft-h7-case {
background: var(--h7-glass);
backdrop-filter: blur(20px);
border: 1px solid var(--h7-border);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s ease;
}
.tft-h7-case:hover {
transform: scale(1.1) translateY(-10px);
background: var(--brand-lime);
box-shadow: 0 0 40px rgba(212, 245, 76, 0.6);
} .tft-h7-watermark {
position: absolute;
right: 5vw;
top: 50%;
transform: translateY(-50%);
writing-mode: vertical-rl;
font-family: 'Space Grotesk', sans-serif;
font-size: 15vh;
font-weight: 900;
text-transform: uppercase;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.03);
color: transparent;
pointer-events: none;
z-index: 5;
letter-spacing: 0.1em;
}   .tft-page-about-alt .step-progress-line {
position: absolute;
left: 32px; top: 64px;
bottom: -128px; width: 1px;
background: rgba(212, 245, 76, 0.2);
z-index: 10;
}
.tft-page-about-alt .step-progress-fill {
width: 100%;
height: 0%;
background: var(--brand-lime);
transition: height 1s ease;
}
.tft-page-about-alt .w-16.h-16 {
width: 64px !important;
height: 64px !important;
flex-shrink: 0;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
z-index: 20;
}
span.text-vertical.text-\[10px\].tracking-\[0\.15em\].opacity-80.uppercase,
span.text-vertical.text-\[9px\].tracking-\[0\.2em\].font-medium.whitespace-nowrap.uppercase {
writing-mode: vertical-lr;
transform: rotate(180deg);
} .tft-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.js-accordion-toggle {
cursor: pointer;
}
.tft-docs {
max-width: 960px;
margin: 0 auto;
padding: 48px 24px;
color: #fff;
background: #071e18;
min-height: 100vh;
}
.tft-docs__hero,
.tft-docs__section {
margin-bottom: 40px;
}
.tft-docs__badge {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
background: #d4f54c;
color: #0d2620;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 16px;
}
.tft-docs h1,
.tft-docs h2,
.tft-docs h3 {
font-family: 'Space Grotesk', sans-serif;
}
.tft-docs p,
.tft-docs li {
color: rgba(255, 255, 255, .78);
line-height: 1.7;
}
.tft-docs pre {
background: rgba(255, 255, 255, .04);
padding: 20px;
border-radius: 16px;
overflow: auto;
border: 1px solid rgba(255, 255, 255, .08);
}
.tft-docs code {
color: #d4f54c;
}
.tft-docs__footer {
margin-top: 64px;
font-size: 13px;
opacity: .5;
}
.tft-inline-1 {
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/project_strategy.png);
filter: grayscale(1) brightness(0.6);
}
.tft-inline-1a {
position: relative;
overflow: hidden;
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/growth-audit.png);
background-size: cover;
background-position: center;
filter: brightness(1.05) contrast(1.02);
}
.tft-inline-2 {
transition-delay: 0.5s;
}
.tft-inline-3 {
transition-delay: 0.1s;
}
.tft-inline-4 {
transition-delay: 0.2s;
}
.tft-inline-5 {
transition-delay: 0.3s;
}
.tft-inline-6 {
transition-delay: 0.4s;
}
.tft-inline-7 {
transition-delay: 0.6s;
}
.tft-inline-8 {
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/project_strategy.png);
}
.tft-inline-9 {
font-style: italic;
opacity: 0.5;
}
.tft-inline-10 {
margin-top: 8rem;
opacity: 0.3;
font-size: 12px;
}
.tft-inline-11 {
left: 30%;
opacity: 0.5;
}
.tft-inline-12 {
left: 70%;
opacity: 0.3;
}
.tft-inline-13 {
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/s1.jpg);
}
.tft-inline-14 {
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/visionary_male_alt.png);
}
.tft-inline-15 {
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/s6.jpg);
}
.tft-inline-16 {
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/s7.png);
}
.tft-inline-17 {
transform: translateX(0%);
}
.tft-inline-18 {
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/project_vision.png);
}
.tft-inline-19 {
background-image: linear-gradient(rgba(212, 245, 76, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 245, 76, 0.15) 1px, transparent 1px);
background-size: 80px 80px;
}
.tft-inline-20 {
--r: -30deg;
--x: -70px;
--d: 0.1s;
}
.tft-inline-21 {
--r: -15deg;
--x: -35px;
--d: 0.15s;
}
.tft-inline-22 {
--r: 0deg;
--x: 0px;
--d: 0.2s;
}
.tft-inline-23 {
--r: 15deg;
--x: 35px;
--d: 0.25s;
}
.tft-inline-24 {
--r: 30deg;
--x: 70px;
--d: 0.3s;
}
.tft-inline-25 {
--r: -30deg;
--x: -70px;
--d: 0.05s;
}
.tft-inline-26 {
--r: -15deg;
--x: -35px;
--d: 0.1s;
}
.tft-inline-27 {
--r: 0deg;
--x: 0px;
--d: 0.15s;
}
.tft-inline-28 {
--r: 15deg;
--x: 35px;
--d: 0.2s;
}
.tft-inline-29 {
--r: 30deg;
--x: 70px;
--d: 0.25s;
}
.tft-inline-30 {
width: 25%;
}
.tft-inline-31 {
background-image: url(//www.serviceleadgrowth.com/wp-content/themes/leadgrowth/assets/img/project_editorial.png);
}
.tft-inline-32 {
background-image: radial-gradient(var(--tft-sidebar) 1px, transparent 1px);
background-size: 40px 40px;
} :root {
--tft-bg: #0d2620;
--tft-lime: #d4f54c;
--tft-white: #ffffff;
--tft-text: rgba(255, 255, 255, 0.7);
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background: #071e18;
color: #fff;
line-height: 1.6;
padding: 2rem;
}
h1,
h2,
h3 {
font-family: 'Space Grotesk', sans-serif;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 1rem;
margin-top: 3rem;
}
code {
background: rgba(255, 255, 255, 0.05);
padding: 0.25rem 0.5rem;
border-radius: 4px;
color: var(--tft-lime);
}
.var-map {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
background: rgba(0, 0, 0, 0.2);
padding: 2rem;
border-radius: 1rem;
}
.badge {
display: inline-block;
padding: 4px 12px;
background: var(--tft-lime);
color: var(--tft-bg);
font-size: 10px;
font-weight: 800;
border-radius: 99px;
text-transform: uppercase;
margin-bottom: 1rem;
}  @media (max-width: 991px) {
body.tft-page-home-4 {
overflow: hidden !important; height: 100dvh !important;
}
.tft-page-home-4 .absolute.z-10 {
position: relative !important;
height: auto !important;
min-height: 100dvh !important;
overflow: visible !important;
padding-top: 70px !important;
top: 0 !important;
left: 0 !important;
background: #0d2620;
}
.tft-page-home-4 main#view-home-4 {
position: relative !important;
display: block !important; width: 100% !important;
height: auto !important;
inset: auto !important;
border: none !important;
opacity: 1 !important;
visibility: visible !important;
}
.tft-page-home-4 .tft-v4-col {
display: block !important;
width: 100% !important;
height: 65vh !important; min-height: 500px !important;
position: relative !important;
border-bottom: 3px solid rgba(212, 245, 76, 0.1);
margin: 0 !important;
}
.tft-page-home-4 .tft-v4-col__content {
padding: 2rem !important;
text-align: center;
}
.tft-page-home-4 .tft-v4-col__title {
font-size: clamp(2.5rem, 12vw, 4.5rem) !important;
line-height: 0.85 !important;
}
} @keyframes flow-right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50%);
}
}
@keyframes flow-down {
0% {
transform: translateY(0);
}
100% {
transform: translateY(50%);
}
}
.animate-flow-right {
animation: flow-right linear infinite;
}
.animate-flow-down {
animation: flow-down linear infinite;
} :root {
--tft-font-display: "Space Grotesk", Inter, "Segoe UI", Arial, sans-serif;
--tft-font-body: "Plus Jakarta Sans", Inter, "Segoe UI", Arial, sans-serif;
--tft-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}
body {
font-family: var(--tft-font-body);
}
h1,
h2,
h3,
h4,
h5,
h6,
.font-display,
.hero-title,
.section-title {
font-family: var(--tft-font-display);
}
code,
pre,
.font-mono {
font-family: var(--tft-font-mono);
}
.tft-delay-100 {
transition-delay: .1s;
} .tft-team-card-elite__social-link--text {
min-width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
padding: 0 9px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
background: rgba(255, 255, 255, 0.04);
}
.tft-team-card-elite__social-link--text:hover {
background: var(--brand-lime, #d4f54c);
color: #062f24;
border-color: rgba(212, 245, 76, 0.6);
}
.animate-wave svg {
transform-origin: 70% 75%;
}
.tft-share-hub__item:hover {
background: var(--tft-lime);
border-color: rgba(186, 255, 65, 0.8);
}
.tft-share-hub__item:hover .tft-share-hub__icon {
background: var(--tft-sidebar) !important;
color: var(--tft-lime) !important;
border-color: rgba(212, 245, 76, 0.35);
}
.tft-share-hub__item:hover .tft-share-hub__icon span {
color: var(--tft-lime) !important;
}
.tft-share-hub__item:hover .tft-share-hub__label {
color: var(--tft-sidebar) !important;
} .tft-back-to-top {
cursor: pointer;
overflow: hidden;
line-height: 0;
}
.tft-back-to-top svg {
display: block;
width: 22px;
height: 22px;
flex: 0 0 22px;
transition: transform .35s ease;
}
.tft-back-to-top:hover svg {
transform: translateY(-2px);
}
.tft-share-hub__item:hover {
background: var(--tft-lime) !important;
border-color: rgba(186, 255, 65, .82) !important;
box-shadow: 0 10px 25px rgba(186, 255, 65, .14) !important;
}
.tft-share-hub__item:hover .tft-share-hub__icon {
background: #062f24 !important;
color: var(--tft-lime) !important;
border-color: rgba(6, 47, 36, .4) !important;
transform: none !important;
}
.tft-share-hub__item:hover .tft-share-hub__icon span {
color: var(--tft-lime) !important;
}
.tft-share-hub__item:hover .tft-share-hub__label {
color: #062f24 !important;
text-shadow: none !important;
opacity: 1 !important;
}
.tft-h2-vanguard__nav-btn:hover {
color: #062f24 !important;
}
.tft-h2-vanguard__nav-btn:hover i,
.tft-h2-vanguard__nav-btn:hover svg {
color: #062f24 !important;
stroke: currentColor !important;
} [data-lucide="arrow-up-right"] svg {
stroke-width: 2.15;
}
.animate-wave svg {
transform: none !important;
} #view-home-1 .tft-slider-h1,
#view-home-1 .tft-cat-badge,
#view-home-1 .tft-slider-action {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
#view-home-1 .tft-slider-action {
display: flex;
justify-content: center;
align-items: center;
}
#view-home-1 .tft-btn-view {
margin-left: auto !important;
margin-right: auto !important;
} .js-accordion-toggle .rounded-full.bg-brand-lime {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.js-accordion-toggle .rounded-full.bg-brand-lime i[data-lucide] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 12px !important;
height: 12px !important;
line-height: 0 !important;
margin-top: -1px !important; }
.js-accordion-toggle .rounded-full.bg-brand-lime i svg {
display: block !important;
margin: 0 auto !important;
} .tft-slider-h1 .text-reveal-wrap {
display: block !important;
text-align: center !important;
width: 100% !important;
padding-right: 0 !important;
margin-right: 0 !important;
}
.tft-slider-h1 .text-reveal {
display: inline-block !important;
text-align: center !important;
padding-inline: 0.15em !important; } .tft-slider-h1 {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
margin-inline: auto !important;
padding-inline: 0 !important;
transform: none !important;
}
.tft-slider-h1 .text-reveal-wrap {
display: flex !important;
justify-content: center !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
.tft-slider-h1--italic,
.tft-slider-h1--bold,
.tft-slider-h1 span {
transform: none !important; margin-inline: 0 !important;
margin: 0 !important;
padding: 0 !important;
text-indent: 0 !important;
display: inline-block !important;
text-align: center !important;
width: auto !important;
} .tft-slider-h1--bold {
margin-left: 0 !important;
margin-inline-start: 0 !important;
}
.tft-slider-h1--italic {
font-style: italic !important;
} #view-home-1 .tft-slider-h1 {
padding-inline: 0 !important;
padding-inline-end: 0 !important; width: 100% !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
#view-home-1 .tft-slider-h1 .text-reveal-wrap {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
justify-content: center !important;
text-align: center !important;
overflow: visible !important;
}
#view-home-1 .tft-slider-h1--italic,
#view-home-1 .tft-slider-h1--bold {
transform: none !important; margin-inline: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
display: inline-block !important;
width: auto !important;
text-align: center !important;
} .tft-ribbon-plus {
--tft-marquee-speed: 60s;
--tft-accent: #d4f54c;
position: relative;
background: #0d2620;
overflow: hidden;
}
.tft-ribbon-plus__scan {
position: absolute;
left: -100%;
top: 0;
width: 30%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(212, 245, 76, 0.08), transparent);
animation: tftRibbonScanPlus 10s infinite linear;
pointer-events: none;
z-index: 1;
}
@keyframes tftRibbonScanPlus {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(400%);
}
}
.tft-ribbon-plus__meta-wrap {
position: absolute;
top: 15px;
display: flex;
align-items: center;
gap: 1.5rem;
pointer-events: none;
opacity: 0.15;
z-index: 5;
white-space: nowrap;
}
.tft-ribbon-plus__meta-wrap--left {
left: 40px;
}
.tft-ribbon-plus__meta-wrap--right {
right: 40px;
text-align: right;
justify-content: flex-end;
}
.tft-meta-item {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 8px;
letter-spacing: 0.5em;
text-transform: uppercase;
}
.tft-meta-pill {
padding: 1px 6px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
font-family: ui-monospace, monospace;
font-size: 7px;
font-weight: 700;
}
.tft-meta-pill--lime {
border-color: var(--tft-accent);
color: var(--tft-accent);
}
.tft-marquee-elite {
width: 100%;
overflow: hidden;
padding: clamp(1rem, 3vw, 2rem) 0;
}
.tft-marquee-elite__inner {
display: flex;
width: max-content;
animation: tftMarqueePlus var(--tft-marquee-speed) linear infinite;
will-change: transform;
}
@keyframes tftMarqueePlus {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-33.333333%);
}
}
.tft-marquee-elite__group {
display: flex;
align-items: center;
gap: clamp(2.5rem, 6vw, 8rem);
padding-right: clamp(2.5rem, 6vw, 8rem);
}
.tft-marquee-elite__word {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(3rem, 10vw, 10rem);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.06em;
color: #fff;
transition: color 0.4s var(--tft-ease), transform 0.4s var(--tft-ease);
line-height: 1;
}
.tft-marquee-elite__word--serif {
font-family: 'Space Grotesk', serif; font-style: italic;
font-weight: 300;
letter-spacing: -0.02em;
}
.tft-marquee-elite__word--outline {
-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.15);
color: transparent;
}
.tft-marquee-elite__word:hover {
color: var(--tft-accent);
transform: scale(1.02);
}
.tft-marquee-elite__word--outline:hover {
-webkit-text-stroke-color: var(--tft-accent);
}
.tft-marquee-elite__icon {
width: clamp(24px, 5vw, 60px);
height: clamp(24px, 5vw, 60px);
color: var(--tft-accent);
opacity: 0.4;
transition: opacity 0.4s ease, transform 0.8s ease;
}
.tft-marquee-elite__group:hover .tft-marquee-elite__icon {
opacity: 1;
transform: rotate(180deg);
}
@media (max-width: 768px) {
.tft-ribbon-plus__meta-wrap {
display: none;
}
.tft-marquee-elite {
padding: 2rem 0;
}
} .tft-stat-card-new {
background: #0c4232 !important; border: 1px solid rgba(255, 255, 255, 0.05) !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
}
.tft-stat-card-new__top,
.tft-stat-card-new__label {
color: rgba(255, 255, 255, 0.4) !important;
}
.tft-stat-card-new__index {
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
.tft-stat-card-new__number {
color: #d4f44e !important;
text-shadow: 0 10px 40px rgba(212, 245, 76, 0.1) !important;
}
.tft-stat-card-new__line {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%) !important;
}
.tft-stat-card-new:hover {
border-color: #d4f54c !important;
background: #0d4d3a !important; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.5) !important;
}
.tft-stat-card-new:hover .tft-stat-card-new__number {
color: #d4f54c !important;
transform: scale(1.08) !important;
}
.tft-stat-card-new:hover .tft-stat-card-new__line {
background: #d4f54c !important;
}
.tft-stat-card-new:hover .tft-stat-card-new__top,
.tft-stat-card-new:hover .tft-stat-card-new__label {
color: rgba(255, 255, 255, 0.8) !important;
} .tft-page-works-alt {
background-color: #040d0c !important;
background-image: linear-gradient(rgba(212, 245, 76, 0.1) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(212, 245, 76, 0.1) 1.5px, transparent 1.5px), radial-gradient(circle at 25% 50%, #0a3d2e 0%, #071915 70%, transparent 100%), linear-gradient(90deg, #051311 50%, #000000 50%) !important; background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100% !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
} .split-container,
.left-panel,
.right-panel,
.project-item {
background: transparent !important;
border: none !important;
} .left-panel {
overflow-y: auto !important;
scrollbar-width: none;
}
.left-panel::-webkit-scrollbar {
display: none;
} .project-item.active h2 {
color: #d4f54c !important;
text-shadow: 0 0 25px rgba(212, 245, 76, 0.4);
} @media (max-width: 1024px) {
.tft-page-works-alt {
background: #000 !important;
}
} @media (max-width: 1024px) { .tft-page-about-alt .step-progress-line {
display: none !important;
} .tft-page-home-5,
.tft-page-home-5 body {
height: auto !important;
min-height: 100dvh !important;
overflow-y: auto !important;
}
.tft-page-home-5 .absolute.left-0.md\:left-\[140px\] {
position: relative !important;
height: auto !important;
min-height: 100vh !important;
overflow: visible !important;
}
.tft-page-home-5 #view-home-5 {
position: relative !important;
height: auto !important;
min-height: 100vh !important;
display: block !important;
overflow: visible !important;
} .tft-page-home-7 .tft-case-bubble.tft-h7-case {
width: 105px !important;
height: 105px !important;
min-width: 105px !important;
min-height: 105px !important;
right: 15px !important;
bottom: 80px !important;
padding: 10px !important;
}
.tft-page-home-7 .tft-case-bubble.tft-h7-case span:first-child {
font-size: 10px !important;
text-align: center !important;
display: block !important;
width: 100% !important;
}
.tft-page-home-7 .tft-case-bubble.tft-h7-case span:last-child {
font-size: 16px !important;
text-align: center !important;
display: block !important;
width: 100% !important;
}
} @media (max-width: 1024px) { .tft-page-project-detail .tft-hero .absolute.inset-0.flex {
justify-content: flex-start !important; padding-top: 140px !important;
text-align: center !important;
}
.tft-page-project-detail .tft-hero__hud {
justify-content: center !important;
top: 40px !important;
text-align: center !important;
flex-direction: column !important;
gap: 10px !important;
}
.tft-page-project-detail .hud-path {
display: none !important; }
.tft-page-project-detail .tft-title-elite {
align-items: center !important;
}
.tft-page-project-detail .title-base {
font-size: clamp(40px, 12vw, 80px) !important; line-height: 1 !important;
} .tft-page-project-detail .tft-grid {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.tft-page-project-detail .grid-item-mid-l,
.tft-page-project-detail .grid-item-mid-r {
width: 100% !important;
grid-column: span 12 !important;
padding-bottom: 0 !important;
} .tft-page-home-5 main#view-home-5,
.tft-page-home-5 .w-full.md\:w-1\/2.flex.relative {
overflow: visible !important;
height: auto !important;
}
.tft-page-home-5 #h5-list {
height: auto !important;
overflow: visible !important;
}
} @media (max-width: 1024px) {
.tft-page-about-alt .capability-card {
aspect-ratio: auto !important;
min-height: clamp(400px, 100vw, 550px) !important;
padding: clamp(2.5rem, 6vw, 3.5rem) !important;
justify-content: flex-start !important;
gap: 2.5rem !important;
}
.tft-page-about-alt .capability-card h3 {
font-size: clamp(2.2rem, 9vw, 3rem) !important;
margin-top: 1rem !important;
}
.tft-page-about-alt .capability-card p {
font-size: 1rem !important;
line-height: 1.6 !important;
}
} @media (max-width: 1024px) {
.tft-page-home-4,
.tft-page-home-4 body {
overflow-y: auto !important;
height: auto !important;
}
@media (min-width: 768px) {
.tft-page-home-4 div.absolute.z-10 {
margin-top: 0 !important;
padding-top: 0 !important;
margin-left: 140px !important;
width: calc(100% - 140px) !important;
position: relative !important;
height: auto !important;
min-height: 100dvh !important;
overflow: visible !important;
}
}
}  .tft-page-works-alt .project-item h2 {
font-size: clamp(40px, 7.2vw, 130px) !important;
} @media (max-width: 1024px) {
header a.flex.items-center:first-child img {
margin-left: 20px !important;
}
} .tft-page-works .tft-card {
pointer-events: auto !important;
}
.tft-page-works .tft-card__link {
pointer-events: auto !important;
z-index: 50 !important;
cursor: pointer !important;
}
@media (max-width: 480px) {
.tft-page-works section.px-8 {
padding-right: 2rem !important;
box-sizing: border-box !important;
}
.tft-page-works .tft-elite-grid {
max-width: 100% !important;
box-sizing: border-box !important;
}
} @media (max-height: 750px) {
.tft-page-home-2 .tft-h2-vanguard__title {
font-size: clamp(25px, 5vh, 20px) !important;
}
.tft-page-home-2 .tft-h2-vanguard__frame {
max-height: 40vh !important;
aspect-ratio: 1.2 / 1 !important; }
.tft-page-home-2 .tft-h2-vanguard__content {
gap: 1.5rem !important;
padding-top: 5vh !important;
}
} @media (max-width: 768px) {
.tft-page-home-4 .tft-inline-18 {
background-position: center bottom !important;
background-size: 150% !important; }
} @media (max-width: 1024px) {
.tft-page-home-2 .tft-h2-vanguard__content {
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
gap: 2rem !important;
padding-top: 8vh !important;
}
.tft-page-home-2 .tft-h2-vanguard__info,
.tft-page-home-2 .tft-h2-vanguard__media {
width: 100% !important;
max-width: 100% !important;
}
.tft-page-home-2 .tft-h2-vanguard__frame {
margin: 0 auto !important;
max-width: 400px !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
}
.tft-page-home-2 .tft-h2-vanguard__kicker-box {
justify-content: center !important;
}
.tft-page-home-2 .tft-h2-vanguard__kicker-line {
display: none !important;
}
} @media (max-width: 768px) {
.tft-milestone,
.tft-milestone--reverse {
flex-direction: column !important;
text-align: center !important;
gap: 2rem !important;
margin-bottom: 80px !important;
}
.tft-milestone__content,
.tft-milestone__year-side {
width: 100% !important;
padding: 0 !important;
}
.tft-milestone__content.text-right {
text-align: center !important;
}
.tft-milestone__year-side.text-left,
.tft-milestone__year-side.text-right {
text-align: center !important;
}
.tft-milestone-marker {
display: none !important; }
} @media (max-width: 768px) {
#mobile-header {
background-color: #ffffff !important;
border-bottom-color: rgba(0, 0, 0, 0.08) !important;
transition: background-color 0.35s ease, border-color 0.35s ease;
}
#mobile-header.mobile-header-open {
background-color: #094030 !important;
border-bottom-color: rgba(212, 245, 76, 0.25) !important;
}
#mobile-logo {
filter: none !important;
transition: opacity 0.25s ease, transform 0.25s ease;
}
#mobile-header.mobile-header-open #mobile-logo {
filter: none !important;
}
}