From 9ad43f7b69a4e312b6b00e7ad524a344c6fbed7c Mon Sep 17 00:00:00 2001 From: undone0603 Date: Mon, 16 Mar 2026 21:54:24 -0400 Subject: [PATCH] feat: match qron.space gold/black theme + Geist font on authichain.com --- app/globals.css | 230 +++++++++++++++++++++++++++++++++--------------- 1 file changed, 158 insertions(+), 72 deletions(-) diff --git a/app/globals.css b/app/globals.css index b8c1706..81b30ea 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,93 +1,179 @@ +@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; @layer base { - :root { - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 271 91% 65%; /* Purple */ - --primary-foreground: 0 0% 100%; - --secondary: 142 76% 36%; /* Green */ - --secondary-foreground: 0 0% 100%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 271 91% 65%; - --radius: 0.5rem; - } + :root { + --background: 0 0% 4%; + --foreground: 0 0% 93%; + --card: 0 0% 7%; + --card-foreground: 0 0% 93%; + --popover: 0 0% 7%; + --popover-foreground: 0 0% 93%; + --primary: 43 80% 47%; /* Gold - matches qron.space */ + --primary-foreground: 0 0% 5%; + --secondary: 0 0% 10%; + --secondary-foreground: 0 0% 93%; + --muted: 0 0% 10%; + --muted-foreground: 0 0% 53%; + --accent: 43 80% 47%; /* Gold */ + --accent-foreground: 0 0% 5%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 17%; + --input: 0 0% 17%; + --ring: 43 80% 47%; + --gold: 43 80% 47%; + --gold-light: 45 90% 60%; + --gold-foreground: 0 0% 5%; + --radius: 0.5rem; + } .dark { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; - --card: 240 10% 8%; - --card-foreground: 0 0% 98%; - --popover: 240 10% 8%; - --popover-foreground: 0 0% 98%; - --primary: 271 91% 65%; /* Purple */ - --primary-foreground: 0 0% 100%; - --secondary: 142 76% 36%; /* Green */ - --secondary-foreground: 0 0% 100%; - --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 64.9%; - --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - --ring: 271 91% 65%; + --background: 0 0% 4%; + --foreground: 0 0% 93%; + --card: 0 0% 7%; + --card-foreground: 0 0% 93%; + --popover: 0 0% 7%; + --popover-foreground: 0 0% 93%; + --primary: 43 80% 47%; + --primary-foreground: 0 0% 5%; + --secondary: 0 0% 10%; + --secondary-foreground: 0 0% 93%; + --muted: 0 0% 10%; + --muted-foreground: 0 0% 53%; + --accent: 43 80% 47%; + --accent-foreground: 0 0% 5%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 17%; + --input: 0 0% 17%; + --ring: 43 80% 47%; } } @layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + font-family: 'Geist', 'Geist Fallback', Arial, sans-serif; + } } -/* Purple/Green Gradient Theme */ -.gradient-primary { - background: linear-gradient(135deg, hsl(271 91% 65%) 0%, hsl(142 76% 36%) 100%); +/* Gold gradient utility - matches qron.space */ +.gradient-gold { + background: linear-gradient(135deg, #E8C547 0%, #C9A227 50%, #A07D10 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } -.gradient-text { - background: linear-gradient(135deg, hsl(271 91% 65%) 0%, hsl(142 76% 36%) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; +/* Gold glow */ +.glow-gold { + box-shadow: 0 0 20px rgba(201, 162, 39, 0.35); } -/* Animations */ -@keyframes shimmer { - 0% { - background-position: -1000px 0; - } - 100% { - background-position: 1000px 0; +/* Gold button */ +.btn-gold { + background: linear-gradient(135deg, #E8C547, #C9A227); + color: #0a0a0a; + font-weight: 700; + transition@:i moppoarcti tuyr l0(.'2hst,t ptsr:a/n/sffoonrtms .0g.o1osg;l + e}a +p.ibst.nc-ogmo/lcds:sh2o?vfearm i{l + y = Goepiascti:twyg:h t0@.390;0 + ; 4 0t0r;a5n0s0f;o6r0m0:; 7t0r0a;n8s0l0a&tdeiYs(p-l1apyx=)s;w + a}p'); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 4%; + --foreground: 0 0% 93%; + --card: 0 0% 7%; + --card-foreground: 0 0% 93%; + --popover: 0 0% 7%; + --popover-foreground: 0 0% 93%; + --primary: 43 80% 47%; /* Gold - matches qron.space */ + --primary-foreground: 0 0% 5%; + --secondary: 0 0% 10%; + --secondary-foreground: 0 0% 93%; + --muted: 0 0% 10%; + --muted-foreground: 0 0% 53%; + --accent: 43 80% 47%; /* Gold */ + --accent-foreground: 0 0% 5%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 17%; + --input: 0 0% 17%; + --ring: 43 80% 47%; + --gold: 43 80% 47%; + --gold-light: 45 90% 60%; + --gold-foreground: 0 0% 5%; + --radius: 0.5rem; + } + + .dark { + --background: 0 0% 4%; + --foreground: 0 0% 93%; + --card: 0 0% 7%; + --card-foreground: 0 0% 93%; + --popover: 0 0% 7%; + --popover-foreground: 0 0% 93%; + --primary: 43 80% 47%; + --primary-foreground: 0 0% 5%; + --secondary: 0 0% 10%; + --secondary-foreground: 0 0% 93%; + --muted: 0 0% 10%; + --muted-foreground: 0 0% 53%; + --accent: 43 80% 47%; + --accent-foreground: 0 0% 5%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 17%; + --input: 0 0% 17%; + --ring: 43 80% 47%; } } -.animate-shimmer { - animation: shimmer 2s infinite linear; - background: linear-gradient( - to right, - #f6f7f8 0%, - #edeef1 20%, - #f6f7f8 40%, - #f6f7f8 100% - ); - background-size: 1000px 100%; +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + font-family: 'Geist', 'Geist Fallback', Arial, sans-serif; + } +} + +/* Gold gradient utility - matches qron.space */ +.gradient-gold { + background: linear-gradient(135deg, #E8C547 0%, #C9A227 50%, #A07D10 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Gold glow */ +.glow-gold { + box-shadow: 0 0 20px rgba(201, 162, 39, 0.35); +} + +/* Gold button */ +.btn-gold { + background: linear-gradient(135deg, #E8C547, #C9A227); + color: #0a0a0a; + font-weight: 700; + transition: opacity 0.2s, transform 0.1s; +} +.btn-gold:hover { + opacity: 0.9; + transform: translateY(-1px); }