From a92b6199af21774caa73fdba506334eebacfb3df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Sat, 21 Feb 2026 19:43:34 +0800 Subject: [PATCH] feat: add tech theme colors and animations to globals.css --- src/app/globals.css | 74 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/src/app/globals.css b/src/app/globals.css index 37abc94..b21c643 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -34,6 +34,10 @@ --color-brand-primary-lighter: #E04A68; --color-brand-primary-bg: #FEF2F4; + --color-tech-blue: #00D9FF; + --color-tech-purple: #A855F7; + --color-tech-cyan: #06B6D4; + --color-success: #16A34A; --color-success-bg: #F0FDF4; --color-warning: #D97706; @@ -112,6 +116,10 @@ --color-brand-primary-lighter: #F08C9F; --color-brand-primary-bg: #1A0F11; + --color-tech-blue: #00D9FF; + --color-tech-purple: #A855F7; + --color-tech-cyan: #06B6D4; + --color-success: #22C55E; --color-success-bg: #052E16; --color-warning: #F59E0B; @@ -605,3 +613,69 @@ padding-bottom: var(--spacing-3xl); } } + +@keyframes glow { + 0%, 100% { + box-shadow: 0 0 20px rgba(0, 217, 255, 0.3); + } + 50% { + box-shadow: 0 0 40px rgba(0, 217, 255, 0.6); + } +} + +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + } +} + +@keyframes pulse-glow { + 0%, 100% { + opacity: 0.2; + } + 50% { + opacity: 0.4; + } +} + +.animate-glow { + animation: glow 2s ease-in-out infinite; +} + +.animate-float { + animation: float 3s ease-in-out infinite; +} + +.animate-pulse-glow { + animation: pulse-glow 2s ease-in-out infinite; +} + +.tech-gradient { + background: linear-gradient(135deg, var(--color-tech-blue) 0%, var(--color-tech-purple) 100%); +} + +.tech-gradient-text { + background: linear-gradient(135deg, var(--color-tech-blue) 0%, var(--color-tech-purple) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.tech-glow { + box-shadow: 0 0 20px rgba(0, 217, 255, 0.3); +} + +.tech-glow-hover:hover { + box-shadow: 0 0 30px rgba(0, 217, 255, 0.5); +} + +.tech-border { + border: 1px solid rgba(0, 217, 255, 0.3); +} + +.tech-border-hover:hover { + border-color: rgba(0, 217, 255, 0.6); +}