JUSN/Webklar
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Custom CTA-Buttons: Sparkle/Demo-Button, blauer Primary-Button mit Text-Animation, einheitlicher Stil für alle blauen Buttons

Browse Source
This commit is contained in:
Basilosaurusrex
2026-02-02 09:29:37 +01:00
parent 22d641e4e5
commit 01102ef3f7
8 changed files with 954 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Header.tsx
View File

@@ -42,7 +42,6 @@ const Header = () => {
<NavbarButton
as="span"
variant="primary"
className="!text-black"
>
Kontakt
</NavbarButton>
@@ -86,7 +85,7 @@ const Header = () => {
<NavbarButton
as="span"
variant="primary"
className="block w-full text-center !text-black"
className="block w-full text-center"
>
Kontakt
</NavbarButton>

84
src/components/Hero.tsx
View File

@@ -1,12 +1,34 @@
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { useNavigate } from "react-router-dom";
import { ArrowRight } from "lucide-react";
import { useState, useEffect } from "react";
import Silk from "@/components/Silk";
const SPARKLE_SVG = (
<svg className="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
/>
</svg>
);
function DemoButtonLetters({ text }: { text: string }) {
return (
<>
{text.split("").map((char, i) => (
<span key={i} className="btn-letter">
{char}
</span>
))}
</>
);
}
const FOUNDING_DATE = new Date("2026-01-25"); // Samstag, 25. Januar 2026
const Hero = () => {
const navigate = useNavigate();
const [companyAge, setCompanyAge] = useState("");
useEffect(() => {
@@ -66,23 +88,49 @@ const Hero = () => {
</p>
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
<Link to="/kontakt">
<Button
size="lg"
className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
<div className="flex flex-row flex-nowrap items-center gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
<div className="btn-wrapper shrink-0">
<button
type="button"
className="btn btn-primary"
onClick={() => navigate("/kontakt")}
aria-label="Kostenlose Potenzialanalyse sichern"
>
Kostenlose Potenzialanalyse sichern
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
</Button>
</Link>
<Button
size="lg"
variant="outline"
className="btn-outline rounded-full px-8 py-6 text-base font-medium"
>
System-Demo anfordern
</Button>
<ArrowRight className="btn-icon" size={24} strokeWidth={2} aria-hidden />
<div className="txt-wrapper">
<span className="txt-width-helper" aria-hidden="true">
<DemoButtonLetters text="Kostenlose Potenzialanalyse sichern" />
</span>
<div className="txt-1">
<DemoButtonLetters text="Kostenlose Potenzialanalyse sichern" />
</div>
<div className="txt-2">
<DemoButtonLetters text="Wird weitergeleitet..." />
</div>
</div>
</button>
</div>
<div className="btn-wrapper">
<button
type="button"
className="btn"
onClick={() => navigate("/kontakt")}
aria-label="System-Demo anfordern"
>
{SPARKLE_SVG}
<div className="txt-wrapper">
<span className="txt-width-helper" aria-hidden="true">
<DemoButtonLetters text="System-Demo anfordern" />
</span>
<div className="txt-1">
<DemoButtonLetters text="System-Demo anfordern" />
</div>
<div className="txt-2">
<DemoButtonLetters text="Wird angefordert..." />
</div>
</div>
</button>
</div>
</div>
{/* Trust Line */}

2
src/components/ui/button.tsx
View File

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
default: "btn-primary-style rounded-full bg-[hsl(198,93%,42%)] text-white hover:bg-[hsl(198,93%,48%)] border border-white/20",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",

4
src/components/ui/resizable-navbar.tsx
View File

@@ -290,11 +290,11 @@ export const NavbarButton = ({
...props
}: NavbarButtonProps) => {
const baseStyles =
"px-4 py-2 rounded-md bg-white text-black text-sm font-bold relative cursor-pointer hover:-translate-y-0.5 transition duration-200 inline-block text-center";
"px-4 py-2 rounded-full text-sm font-bold relative cursor-pointer transition duration-200 inline-block text-center";
const variantStyles = {
primary:
"shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]",
"bg-[hsl(198,93%,42%)] text-white border border-white/20 shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),inset_0_2px_2px_rgba(255,255,255,0.2),0_2px_4px_rgba(0,0,0,0.2),0_4px_8px_rgba(0,0,0,0.15)] hover:border-white/40 hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.3),inset_0_2px_2px_rgba(255,255,255,0.25),0_2px_4px_rgba(0,0,0,0.2),0_4px_8px_rgba(0,0,0,0.15)]",
secondary: "bg-transparent shadow-none dark:text-white",
dark: "bg-black text-white shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]",
gradient:

456
src/index.css
View File

@@ -1,19 +1,17 @@
/* 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 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@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=Space+Grotesk:wght@300;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");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
@layer base {
:root {
/* Ultra Minimal Deep Black Theme - Muradov Inspired */
@@ -241,6 +239,444 @@
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: 2px;
}
.txt-width-helper {
visibility: hidden;
white-space: nowrap;
font: inherit;
word-spacing: -1em;
pointer-events: none;
}
.txt-width-helper .btn-letter {
animation: none;
}
.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;
}
/* 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;