837 lines
23 KiB
CSS
837 lines
23 KiB
CSS
/* Fonts first – @import must be at the very top */
|
||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
|
||
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&display=swap");
|
||
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
|
||
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
|
||
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
/* webklar Design System - Muradov Inspired Minimal Dark Theme */
|
||
|
||
@layer base {
|
||
:root {
|
||
/* Ultra Minimal Deep Black Theme - Muradov Inspired */
|
||
--background: 0 0% 0%;
|
||
--foreground: 0 0% 92%;
|
||
|
||
--card: 0 0% 6%;
|
||
--card-foreground: 0 0% 92%;
|
||
|
||
--popover: 0 0% 8%;
|
||
--popover-foreground: 0 0% 92%;
|
||
|
||
/* Primary - Subtle cyan accent */
|
||
--primary: 180 40% 50%;
|
||
--primary-foreground: 0 0% 3%;
|
||
|
||
/* Secondary - Dark Gray */
|
||
--secondary: 0 0% 12%;
|
||
--secondary-foreground: 0 0% 92%;
|
||
|
||
/* Muted - Medium Gray */
|
||
--muted: 0 0% 45%;
|
||
--muted-foreground: 0 0% 65%;
|
||
|
||
/* Accent */
|
||
--accent: 0 0% 10%;
|
||
--accent-foreground: 0 0% 92%;
|
||
|
||
--destructive: 0 62% 50%;
|
||
--destructive-foreground: 0 0% 98%;
|
||
|
||
--border: 0 0% 15%;
|
||
--input: 0 0% 15%;
|
||
--ring: 180 40% 50%;
|
||
|
||
--radius: 0.5rem;
|
||
|
||
/* Shadows */
|
||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
|
||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
|
||
|
||
--sidebar-background: 0 0% 3%;
|
||
--sidebar-foreground: 222 47% 11%;
|
||
--sidebar-primary: 200 98% 39%;
|
||
--sidebar-primary-foreground: 204 100% 97%;
|
||
--sidebar-accent: 215 24% 26%;
|
||
--sidebar-accent-foreground: 210 40% 98%;
|
||
--sidebar-border: 212 26% 83%;
|
||
--sidebar-ring: 200 98% 39%;
|
||
--chart-1: 198 93% 59%;
|
||
--chart-2: 213 93% 67%;
|
||
--chart-3: 215 20% 65%;
|
||
--chart-4: 215 16% 46%;
|
||
--chart-5: 215 19% 34%;
|
||
--sidebar: 210 40% 98%;
|
||
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||
--font-display: 'Space Grotesk', system-ui, sans-serif;
|
||
--spacing: 0.25rem;
|
||
--font-serif: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||
--font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
|
||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||
--tracking-normal: 0em;
|
||
}
|
||
|
||
.dark {
|
||
--background: 222 47% 11%;
|
||
--foreground: 210 40% 98%;
|
||
--card: 217 32% 17%;
|
||
--card-foreground: 210 40% 98%;
|
||
--popover: 215 24% 26%;
|
||
--popover-foreground: 210 40% 98%;
|
||
--primary: 198 93% 59%;
|
||
--primary-foreground: 204 80% 15%;
|
||
--secondary: 212 26% 83%;
|
||
--secondary-foreground: 228 84% 4%;
|
||
--muted: 215 16% 46%;
|
||
--muted-foreground: 210 40% 98%;
|
||
--accent: 228 84% 4%;
|
||
--accent-foreground: 215 20% 65%;
|
||
--destructive: 0 84% 60%;
|
||
--destructive-foreground: 0 85% 97%;
|
||
--border: 215 19% 34%;
|
||
--input: 215 19% 34%;
|
||
--ring: 198 93% 59%;
|
||
--chart-1: 199 95% 73%;
|
||
--chart-2: 211 96% 78%;
|
||
--chart-3: 215 20% 65%;
|
||
--chart-4: 215 16% 46%;
|
||
--chart-5: 215 19% 34%;
|
||
--sidebar: 217 32% 17%;
|
||
--sidebar-foreground: 210 40% 98%;
|
||
--sidebar-primary: 198 93% 59%;
|
||
--sidebar-primary-foreground: 204 80% 15%;
|
||
--sidebar-accent: 215 20% 65%;
|
||
--sidebar-accent-foreground: 228 84% 4%;
|
||
--sidebar-border: 215 19% 34%;
|
||
--sidebar-ring: 198 93% 59%;
|
||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
|
||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
|
||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
|
||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||
--radius: 0rem;
|
||
}
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
@apply bg-background text-foreground antialiased;
|
||
font-family: 'Inter', system-ui, sans-serif;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
|
||
letter-spacing: -0.04em;
|
||
font-weight: 500;
|
||
}
|
||
|
||
h1 {
|
||
font-weight: 500;
|
||
letter-spacing: -0.05em;
|
||
}
|
||
}
|
||
|
||
@layer components {
|
||
/* Gemeinsamer Hintergrund für Problem- und Lösungs-Sektion */
|
||
.section-problem-solution {
|
||
background-color: hsl(var(--background));
|
||
}
|
||
|
||
/* Leichter roter Tint auf Inhaltsblöcken der Problem-Sektion */
|
||
.problem-section-tint {
|
||
position: relative;
|
||
}
|
||
.problem-section-tint::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-color: rgb(239 68 68 / 0.06);
|
||
pointer-events: none;
|
||
border-radius: inherit;
|
||
}
|
||
|
||
/* Leichter blauer Tint auf dem Ergebnis-Block der Lösungs-Sektion */
|
||
.solution-section-tint {
|
||
position: relative;
|
||
}
|
||
.solution-section-tint::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-color: rgb(34 211 238 / 0.06);
|
||
pointer-events: none;
|
||
border-radius: inherit;
|
||
}
|
||
|
||
/* Minimal glass nav */
|
||
.glass-nav {
|
||
@apply backdrop-blur-xl border-b;
|
||
background: hsl(0 0% 3% / 0.9);
|
||
border-color: hsl(0 0% 15% / 0.5);
|
||
}
|
||
|
||
/* Card minimal */
|
||
.card-minimal {
|
||
@apply transition-all duration-500;
|
||
background: hsl(var(--card));
|
||
border: 1px solid hsl(var(--border));
|
||
}
|
||
.card-minimal:hover {
|
||
border-color: hsl(0 0% 25%);
|
||
}
|
||
|
||
/* Text gradient - subtle */
|
||
.text-gradient {
|
||
background: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(0 0% 70%) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
/* Animated underline for links */
|
||
.link-underline {
|
||
@apply relative;
|
||
}
|
||
.link-underline::after {
|
||
content: '';
|
||
@apply absolute bottom-0 left-0 w-full h-px scale-x-0 origin-right transition-transform duration-300;
|
||
background: hsl(0 0% 98%);
|
||
}
|
||
.link-underline:hover::after {
|
||
@apply scale-x-100 origin-left;
|
||
}
|
||
|
||
/* Fade up on scroll */
|
||
.fade-up {
|
||
@apply opacity-0 translate-y-8 transition-all duration-700 ease-out;
|
||
}
|
||
.fade-up.visible {
|
||
@apply opacity-100 translate-y-0;
|
||
}
|
||
|
||
/* Partner logo marquee */
|
||
.marquee {
|
||
@apply flex gap-16;
|
||
animation: marquee 30s linear infinite;
|
||
}
|
||
|
||
/* Minimal project card */
|
||
.project-card {
|
||
@apply transition-all duration-500 overflow-hidden;
|
||
background: hsl(0 0% 6%);
|
||
border: 1px solid hsl(0 0% 12%);
|
||
}
|
||
.project-card:hover {
|
||
border-color: hsl(0 0% 25%);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
/* Minimal button */
|
||
.btn-minimal {
|
||
@apply relative transition-all duration-300;
|
||
background: hsl(0 0% 98%);
|
||
color: hsl(0 0% 3%);
|
||
}
|
||
.btn-minimal:hover {
|
||
background: hsl(0 0% 85%);
|
||
}
|
||
|
||
/* Outline button */
|
||
.btn-outline {
|
||
@apply relative transition-all duration-300 border;
|
||
background: transparent;
|
||
color: hsl(0 0% 98%);
|
||
border-color: hsl(0 0% 25%);
|
||
}
|
||
.btn-outline:hover {
|
||
border-color: hsl(0 0% 50%);
|
||
background: hsl(0 0% 10%);
|
||
}
|
||
|
||
/* Custom CTA button (System-Demo) */
|
||
.btn-wrapper {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: fit-content;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.btn {
|
||
--border-radius: 24px;
|
||
--padding: 4px;
|
||
--transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||
--button-color: #101010;
|
||
--highlight-color-hue: 210deg;
|
||
|
||
outline: none;
|
||
user-select: none;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5em 1.1em;
|
||
font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
|
||
font-size: 1em;
|
||
font-weight: 400;
|
||
background-color: var(--button-color);
|
||
overflow: hidden;
|
||
box-shadow:
|
||
inset 0px 1px 1px rgba(255, 255, 255, 0.2),
|
||
inset 0px 2px 2px rgba(255, 255, 255, 0.15),
|
||
inset 0px 4px 4px rgba(255, 255, 255, 0.1),
|
||
inset 0px 8px 8px rgba(255, 255, 255, 0.05),
|
||
inset 0px 16px 16px rgba(255, 255, 255, 0.05),
|
||
0px -1px 1px rgba(0, 0, 0, 0.02),
|
||
0px -2px 2px rgba(0, 0, 0, 0.03),
|
||
0px -4px 4px rgba(0, 0, 0, 0.05),
|
||
0px -8px 8px rgba(0, 0, 0, 0.06),
|
||
0px -16px 16px rgba(0, 0, 0, 0.08);
|
||
border: solid 1px rgba(255, 255, 255, 0.13);
|
||
border-radius: var(--border-radius);
|
||
cursor: pointer;
|
||
transition: box-shadow var(--transition), border var(--transition), background-color var(--transition);
|
||
position: relative;
|
||
}
|
||
|
||
.btn::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: calc(0px - var(--padding));
|
||
left: calc(0px - var(--padding));
|
||
width: calc(100% + var(--padding) * 2);
|
||
height: calc(100% + var(--padding) * 2);
|
||
border-radius: calc(var(--border-radius) + var(--padding));
|
||
pointer-events: none;
|
||
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.4));
|
||
z-index: -1;
|
||
transition: box-shadow var(--transition), filter var(--transition);
|
||
box-shadow:
|
||
0 -8px 8px -6px transparent inset,
|
||
0 -16px 16px -8px transparent inset,
|
||
1px 1px 1px rgba(255, 255, 255, 0.13),
|
||
2px 2px 2px rgba(255, 255, 255, 0.07),
|
||
-1px -1px 1px rgba(0, 0, 0, 0.13),
|
||
-2px -2px 2px rgba(0, 0, 0, 0.07);
|
||
}
|
||
|
||
.btn::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: inherit;
|
||
pointer-events: none;
|
||
background-image: linear-gradient(
|
||
0deg,
|
||
#fff,
|
||
hsl(var(--highlight-color-hue), 100%, 70%),
|
||
hsla(var(--highlight-color-hue), 100%, 70%, 0.5),
|
||
8%,
|
||
transparent
|
||
);
|
||
background-position: 0 0;
|
||
opacity: 0;
|
||
transition: opacity var(--transition), filter var(--transition);
|
||
}
|
||
|
||
.btn-letter {
|
||
position: relative;
|
||
display: inline-block;
|
||
color: rgba(255, 255, 255, 0.33);
|
||
animation: letter-anim 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||
transition: color var(--transition), text-shadow var(--transition), opacity var(--transition), transform var(--transition);
|
||
}
|
||
|
||
@keyframes letter-anim {
|
||
50% {
|
||
text-shadow: 0 0 3px rgba(255, 255, 255, 0.53);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn-svg {
|
||
flex-shrink: 0;
|
||
height: 24px;
|
||
width: 24px;
|
||
fill: #e8e8e8;
|
||
animation: flicker 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||
animation-delay: 0.5s;
|
||
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
|
||
transition: fill var(--transition), filter var(--transition), opacity var(--transition);
|
||
}
|
||
|
||
@keyframes flicker {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.4;
|
||
}
|
||
}
|
||
|
||
.txt-wrapper {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
min-width: 0;
|
||
padding-right: 6px;
|
||
}
|
||
|
||
.txt-width-helper {
|
||
visibility: hidden;
|
||
white-space: nowrap;
|
||
font: inherit;
|
||
word-spacing: -1em;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.txt-width-helper .btn-letter {
|
||
animation: none;
|
||
}
|
||
|
||
.btn-letter-space {
|
||
min-width: 0.25em;
|
||
}
|
||
|
||
.txt-1,
|
||
.txt-2 {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
word-spacing: -1em;
|
||
white-space: nowrap;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.txt-1 {
|
||
animation: appear-anim 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||
}
|
||
|
||
.txt-2 {
|
||
opacity: 0;
|
||
}
|
||
|
||
@keyframes appear-anim {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.btn:focus .txt-1 {
|
||
animation: opacity-anim 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||
animation-delay: 0.8s;
|
||
}
|
||
|
||
.btn:focus .txt-2 {
|
||
animation: opacity-anim 0.4s cubic-bezier(0.4, 0, 0.2, 1) reverse forwards;
|
||
animation-delay: 0.8s;
|
||
}
|
||
|
||
@keyframes opacity-anim {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.btn:focus .btn-letter {
|
||
animation: focused-letter-anim 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards, letter-anim 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||
animation-delay: 0s, 1s;
|
||
}
|
||
|
||
@keyframes focused-letter-anim {
|
||
0%,
|
||
100% {
|
||
transform: scale(1);
|
||
filter: blur(0px);
|
||
}
|
||
50% {
|
||
transform: scale(1.08);
|
||
filter: blur(2px) brightness(150%)
|
||
drop-shadow(0 0 8px hsl(var(--highlight-color-hue), 100%, 70%));
|
||
}
|
||
}
|
||
|
||
.btn:focus .btn-svg {
|
||
animation-duration: 1.2s;
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
.btn:focus::before {
|
||
box-shadow:
|
||
0 -8px 12px -6px rgba(255, 255, 255, 0.2) inset,
|
||
0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.2) inset,
|
||
1px 1px 1px rgba(255, 255, 255, 0.2),
|
||
2px 2px 2px rgba(255, 255, 255, 0.07),
|
||
-1px -1px 1px rgba(0, 0, 0, 0.13),
|
||
-2px -2px 2px rgba(0, 0, 0, 0.07);
|
||
}
|
||
|
||
.btn:focus::after {
|
||
opacity: 0.6;
|
||
mask-image: linear-gradient(0deg, #fff, transparent);
|
||
filter: brightness(100%);
|
||
}
|
||
|
||
.btn-letter:nth-child(1),
|
||
.btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; }
|
||
.btn-letter:nth-child(2),
|
||
.btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; }
|
||
.btn-letter:nth-child(3),
|
||
.btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; }
|
||
.btn-letter:nth-child(4),
|
||
.btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; }
|
||
.btn-letter:nth-child(5),
|
||
.btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; }
|
||
.btn-letter:nth-child(6),
|
||
.btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; }
|
||
.btn-letter:nth-child(7),
|
||
.btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; }
|
||
.btn-letter:nth-child(8),
|
||
.btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; }
|
||
.btn-letter:nth-child(9),
|
||
.btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; }
|
||
.btn-letter:nth-child(10),
|
||
.btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; }
|
||
.btn-letter:nth-child(11),
|
||
.btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; }
|
||
.btn-letter:nth-child(12),
|
||
.btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; }
|
||
.btn-letter:nth-child(13),
|
||
.btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; }
|
||
.btn-letter:nth-child(14),
|
||
.btn:focus .btn-letter:nth-child(14) { animation-delay: 1.04s; }
|
||
.btn-letter:nth-child(15),
|
||
.btn:focus .btn-letter:nth-child(15) { animation-delay: 1.12s; }
|
||
.btn-letter:nth-child(16),
|
||
.btn:focus .btn-letter:nth-child(16) { animation-delay: 1.2s; }
|
||
.btn-letter:nth-child(17),
|
||
.btn:focus .btn-letter:nth-child(17) { animation-delay: 1.28s; }
|
||
.btn-letter:nth-child(18),
|
||
.btn:focus .btn-letter:nth-child(18) { animation-delay: 1.36s; }
|
||
.btn-letter:nth-child(19),
|
||
.btn:focus .btn-letter:nth-child(19) { animation-delay: 1.44s; }
|
||
.btn-letter:nth-child(20),
|
||
.btn:focus .btn-letter:nth-child(20) { animation-delay: 1.52s; }
|
||
.btn-letter:nth-child(21),
|
||
.btn:focus .btn-letter:nth-child(21) { animation-delay: 1.6s; }
|
||
.btn-letter:nth-child(22),
|
||
.btn:focus .btn-letter:nth-child(22) { animation-delay: 1.68s; }
|
||
.btn-letter:nth-child(23),
|
||
.btn:focus .btn-letter:nth-child(23) { animation-delay: 1.76s; }
|
||
.btn-letter:nth-child(24),
|
||
.btn:focus .btn-letter:nth-child(24) { animation-delay: 1.84s; }
|
||
.btn-letter:nth-child(25),
|
||
.btn:focus .btn-letter:nth-child(25) { animation-delay: 1.92s; }
|
||
.btn-letter:nth-child(26),
|
||
.btn:focus .btn-letter:nth-child(26) { animation-delay: 2s; }
|
||
.btn-letter:nth-child(27),
|
||
.btn:focus .btn-letter:nth-child(27) { animation-delay: 2.08s; }
|
||
.btn-letter:nth-child(28),
|
||
.btn:focus .btn-letter:nth-child(28) { animation-delay: 2.16s; }
|
||
.btn-letter:nth-child(29),
|
||
.btn:focus .btn-letter:nth-child(29) { animation-delay: 2.24s; }
|
||
.btn-letter:nth-child(30),
|
||
.btn:focus .btn-letter:nth-child(30) { animation-delay: 2.32s; }
|
||
.btn-letter:nth-child(31),
|
||
.btn:focus .btn-letter:nth-child(31) { animation-delay: 2.4s; }
|
||
.btn-letter:nth-child(32),
|
||
.btn:focus .btn-letter:nth-child(32) { animation-delay: 2.48s; }
|
||
.btn-letter:nth-child(33),
|
||
.btn:focus .btn-letter:nth-child(33) { animation-delay: 2.56s; }
|
||
.btn-letter:nth-child(34),
|
||
.btn:focus .btn-letter:nth-child(34) { animation-delay: 2.64s; }
|
||
.btn-letter:nth-child(35),
|
||
.btn:focus .btn-letter:nth-child(35) { animation-delay: 2.72s; }
|
||
|
||
.btn:active {
|
||
border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.7);
|
||
background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
|
||
}
|
||
|
||
.btn:active::before {
|
||
box-shadow:
|
||
0 -8px 12px -6px rgba(255, 255, 255, 0.67) inset,
|
||
0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.8) inset,
|
||
1px 1px 1px rgba(255, 255, 255, 0.27),
|
||
2px 2px 2px rgba(255, 255, 255, 0.13),
|
||
-1px -1px 1px rgba(0, 0, 0, 0.13),
|
||
-2px -2px 2px rgba(0, 0, 0, 0.07);
|
||
}
|
||
|
||
.btn:active::after {
|
||
opacity: 1;
|
||
mask-image: linear-gradient(0deg, #fff, transparent);
|
||
filter: brightness(200%);
|
||
}
|
||
|
||
.btn:active .btn-letter {
|
||
text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 0.9);
|
||
animation: none;
|
||
}
|
||
|
||
.btn:hover {
|
||
border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.4);
|
||
}
|
||
|
||
.btn:hover::before {
|
||
box-shadow:
|
||
0 -8px 8px -6px rgba(255, 255, 255, 0.67) inset,
|
||
0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.3) inset,
|
||
1px 1px 1px rgba(255, 255, 255, 0.13),
|
||
2px 2px 2px rgba(255, 255, 255, 0.07),
|
||
-1px -1px 1px rgba(0, 0, 0, 0.13),
|
||
-2px -2px 2px rgba(0, 0, 0, 0.07);
|
||
}
|
||
|
||
.btn:hover::after {
|
||
opacity: 1;
|
||
mask-image: linear-gradient(0deg, #fff, transparent);
|
||
}
|
||
|
||
.btn:hover .btn-svg {
|
||
fill: #fff;
|
||
filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%))
|
||
drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.6));
|
||
animation: none;
|
||
}
|
||
|
||
@media (max-width: 639px) {
|
||
.btn {
|
||
font-size: 0.9rem;
|
||
padding: 0.5em 0.9em;
|
||
gap: 0.4rem;
|
||
}
|
||
.btn-svg,
|
||
.btn-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
|
||
/* Shared primary button look – for all blue/primary buttons */
|
||
.btn-primary-style {
|
||
padding: 0.5em 1.1em;
|
||
border-radius: 24px;
|
||
box-shadow:
|
||
inset 0px 1px 1px rgba(255, 255, 255, 0.25),
|
||
inset 0px 2px 2px rgba(255, 255, 255, 0.2),
|
||
0px 2px 4px rgba(0, 0, 0, 0.2),
|
||
0px 4px 8px rgba(0, 0, 0, 0.15);
|
||
transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
|
||
border 0.35s cubic-bezier(0.4, 0, 0.2, 1),
|
||
background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.btn-primary-style:hover {
|
||
border-color: rgba(255, 255, 255, 0.4);
|
||
box-shadow:
|
||
inset 0px 1px 1px rgba(255, 255, 255, 0.3),
|
||
inset 0px 2px 2px rgba(255, 255, 255, 0.25),
|
||
0px 2px 4px rgba(0, 0, 0, 0.2),
|
||
0px 4px 8px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
/* Primary (blue) variant – same structure, blue color */
|
||
.btn-primary {
|
||
--button-color: hsl(198, 93%, 42%);
|
||
--highlight-color-hue: 198deg;
|
||
box-shadow:
|
||
inset 0px 1px 1px rgba(255, 255, 255, 0.25),
|
||
inset 0px 2px 2px rgba(255, 255, 255, 0.2),
|
||
0px 2px 4px rgba(0, 0, 0, 0.2),
|
||
0px 4px 8px rgba(0, 0, 0, 0.15);
|
||
border: solid 1px rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.btn-primary::before {
|
||
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
|
||
}
|
||
|
||
.btn-primary .btn-letter {
|
||
color: rgba(255, 255, 255, 0.75);
|
||
}
|
||
|
||
@keyframes letter-anim-primary {
|
||
0%, 100% {
|
||
text-shadow: none;
|
||
color: rgba(255, 255, 255, 0.75);
|
||
}
|
||
50% {
|
||
text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 255, 255, 0.4);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn-primary .btn-letter {
|
||
animation: letter-anim-primary 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||
}
|
||
|
||
/* Arrow icon (stroke-based) – same size and animation as .btn-svg */
|
||
.btn-icon {
|
||
flex-shrink: 0;
|
||
width: 24px;
|
||
height: 24px;
|
||
color: #e8e8e8;
|
||
animation: flicker 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||
animation-delay: 0.5s;
|
||
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
|
||
transition: color var(--transition), filter var(--transition), opacity var(--transition);
|
||
}
|
||
|
||
.btn:hover .btn-icon {
|
||
color: #fff;
|
||
filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%))
|
||
drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.6));
|
||
animation: none;
|
||
}
|
||
|
||
.btn:focus .btn-icon {
|
||
animation-duration: 1.2s;
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
/* Stats number */
|
||
.stat-number {
|
||
font-family: 'Space Grotesk', system-ui, sans-serif;
|
||
font-weight: 500;
|
||
letter-spacing: -0.05em;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* Count-up with gradient */
|
||
.count-up-text {
|
||
background: linear-gradient(135deg, hsl(0 0% 92%) 0%, hsl(0 0% 70%) 50%, hsl(0 0% 92%) 100%);
|
||
background-size: 200% auto;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.dark .count-up-text {
|
||
background: linear-gradient(135deg, hsl(0 0% 98%) 0%, hsl(0 0% 75%) 50%, hsl(0 0% 98%) 100%);
|
||
background-size: 200% auto;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
/* Grid line decoration */
|
||
.grid-lines {
|
||
background-image:
|
||
linear-gradient(hsl(0 0% 12%) 1px, transparent 1px),
|
||
linear-gradient(90deg, hsl(0 0% 12%) 1px, transparent 1px);
|
||
background-size: 80px 80px;
|
||
}
|
||
|
||
/* Horizontal divider */
|
||
.divider {
|
||
@apply w-full h-px;
|
||
background: linear-gradient(90deg, transparent 0%, hsl(0 0% 20%) 50%, transparent 100%);
|
||
}
|
||
|
||
/* Label/Tag */
|
||
.label-tag {
|
||
@apply text-xs uppercase tracking-widest font-medium;
|
||
color: hsl(0 0% 50%);
|
||
}
|
||
}
|
||
|
||
@layer utilities {
|
||
.shadow-soft {
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
.shadow-elevated {
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
.shadow-floating {
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
}
|
||
|
||
/* Keyframes */
|
||
@keyframes marquee {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
@keyframes fade-in-up {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fade-in {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes slide-up {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(60px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.animate-fade-in {
|
||
animation: fade-in 0.8s ease-out forwards;
|
||
}
|
||
|
||
.animate-slide-up {
|
||
animation: slide-up 0.8s ease-out forwards;
|
||
}
|
||
|
||
.animate-fade-in-up {
|
||
animation: fade-in-up 0.6s ease-out forwards;
|
||
} |