Cayden Website 2.0: Rewrite with t3code & hand

app/globals.css

@@ -1,84 +1,74 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @theme inline {
-    --font-cormorantGaramond: "Cormorant_Garamond", "sans-serif";
-    --font-poppins: "Poppins", "sans-serif";
-
-    /* Nord: Polar Night */
-    --color-nord-0: #2e3440;
-    --color-nord-1: #3b4252;
-    --color-nord-2: #4D535F;
-    --color-nord-3: #434c5e;
-
-    /* Nord: Snow Storm */
-    --color-nord-4: #d8dee9;
-    --color-nord-5: #e5e9f0;
-    --color-nord-6: #eceff4;
-
-    /* Nord: Frost */
-    --color-nord-7: #8fbcbb;
-    --color-nord-8: #88c0d0;
-    --color-nord-9: #81a1c1;
-    --color-nord-10: #5e81ac;
-
-    /* Nord: Aurora */
-    --color-nord-11: #bf616a;
-    --color-nord-12: #d08770;
-    --color-nord-13: #ebcb8b;
-    --color-nord-14: #a3be8c;
-    --color-nord-15: #b48ead;
-
-    /* Optional semantic aliases */
-    --color-polar-night-dark: #2e3440;
-    --color-polar-night: #3b4252;
-    --color-polar-night-light: #434c5e;
-    --color-polar-night-lighter: #4c566a;
-
-    --color-snow-storm-dark: #d8dee9;
-    --color-snow-storm: #e5e9f0;
-    --color-snow-storm-light: #eceff4;
-
-    --color-frost-green: #8fbcbb;
-    --color-frost-cyan: #88c0d0;
-    --color-frost-blue: #81a1c1;
-    --color-frost-deep-blue: #5e81ac;
-
-    --color-aurora-red: #bf616a;
-    --color-aurora-orange: #d08770;
-    --color-aurora-yellow: #ebcb8b;
-    --color-aurora-green: #a3be8c;
-    --color-aurora-purple: #b48ead;
+	--font-display:
+		var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
+	--font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+	--font-mono:
+		var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, monospace;
 }
 
-.article {
-    @apply flex flex-col gap-3 font-poppins text-lg tracking-wide mb-20
+@theme {
+	--color-obsidian: #040807;
+	--color-aurora: #34d399;
+	--color-crest: #d1fae5;
+	--color-ink: #f2faf6;
 }
 
-.article > h1 {
-    @apply text-4xl font-cormorantGaramond text-center tracking-tight;
+@utility container-page {
+	@apply mx-auto max-w-5xl px-6;
 }
 
-.article > h2 {
-    @apply text-3xl font-cormorantGaramond text-center tracking-tight;
+@utility panel {
+	@apply border border-white/12 bg-obsidian/55 backdrop-blur-md;
 }
 
-.article > ol {
-    @apply list-decimal flex flex-col mx-10 gap-2;
+@utility btn-primary {
+	@apply border border-aurora bg-aurora px-5 py-2.5 text-obsidian transition-colors hover:border-crest hover:bg-crest;
 }
 
-.article > ul {
-    @apply list-disc flex flex-col mx-10 gap-2;
+@utility btn-ghost {
+	@apply border border-white/20 bg-obsidian/45 px-5 py-2.5 text-ink backdrop-blur-md transition-colors hover:border-aurora hover:text-aurora;
 }
 
-.article > pre {
-    @apply bg-neutral-950 text-neutral-50 p-5 overflow-scroll;
+html {
+	scroll-behavior: smooth;
+	scroll-padding-top: 4rem;
 }
 
-.article > blockquote {
-    @apply pl-5 italic border-l-2 border-neutral-600;
+::selection {
+	background: var(--color-aurora);
+	color: var(--color-obsidian);
 }
 
-.article > p > img {
-    @apply w-1/2 mx-auto;
+:focus-visible {
+	outline: 1px solid var(--color-aurora);
+	outline-offset: 2px;
 }
 
+@media (scripting: enabled) {
+	.reveal {
+		opacity: 0;
+		transform: translateY(10px);
+		transition:
+			opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
+			transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+		transition-delay: var(--reveal-delay, 0ms);
+	}
+
+	.reveal[data-visible='true'] {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	html {
+		scroll-behavior: auto;
+	}
+	.reveal {
+		opacity: 1;
+		transform: none;
+		transition: none;
+	}
+}