style: 完成全域極簡奢華風 (Minimal Luxury) CSS 實作

resources/css/app.css

@@ -4,11 +4,12 @@
 
 @layer base {
     :root {
-        --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-        --font-mono: 'Share Tech Mono', monospace;
-        --color-industrial-grey: #d1d5db;
-        --color-industrial-dark: #111827;
-        --color-amber: #ffb000;
+        --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        --font-display: 'Outfit', var(--font-sans);
+        --color-luxury-deep: #0f172a;
+        --color-luxury-card: #1e293b;
+        --color-accent: #06b6d4;
+        /* Cyan 500 */
     }
 
     html {
@@ -22,103 +23,71 @@
     h5,
     h6,
     .font-display {
-        font-family: var(--font-sans);
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
+        font-family: var(--font-display);
+        letter-spacing: -0.02em;
     }
 
-    .font-mono,
-    .crt-screen {
-        font-family: var(--font-mono);
+    /* Luxury Cards */
+    .luxury-card {
+        @apply bg-white dark:bg-[#1e293b] border-0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
-    /* Inset Panels */
-    .retro-panel {
-        background: #f3f4f6;
-        border: 2px solid #9ca3af;
-        box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 #4b5563;
+    .luxury-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
     }
 
-    .dark .retro-panel {
-        background: #374151;
-        border: 2px solid #1f2937;
-        box-shadow: inset 1px 1px 0 #4b5563, 2px 2px 0 #000;
-    }
-
-    /* CRT Screen */
-    .crt-screen {
-        background: #000;
-        color: var(--color-amber);
-        border: 4px solid #4b5563;
-        box-shadow: inset 0 0 15px rgba(255, 176, 0, 0.3);
-        padding: 1.25rem;
-        position: relative;
-        overflow: hidden;
-    }
-
-    .crt-screen::before {
-        content: " ";
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
-        z-index: 2;
-        background-size: 100% 2px, 3px 100%;
-        pointer-events: none;
-    }
-
-    /* Amber Glow */
-    .text-amber-glow {
-        color: var(--color-amber);
-        text-shadow: 0 0 8px rgba(255, 176, 0, 0.6);
+    /* Luxury Gradient Accents */
+    .bg-luxury-gradient {
+        background: linear-gradient(135deg, var(--color-accent), #6366f1);
     }
 
     /* Animations */
-    @keyframes blink {
-
-        0%,
-        100% {
-            opacity: 1;
-        }
-
-        50% {
+    @keyframes fadeUp {
+        from {
             opacity: 0;
+            transform: translateY(15px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
         }
     }
 
-    .animate-retro-blink {
-        animation: blink 1s step-end infinite;
+    .animate-luxury-in {
+        animation: fadeUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     }
 
-    /* Custom Scrollbar - Industrial style */
+    /* Custom Scrollbar - Minimal & Elegant */
     ::-webkit-scrollbar {
-        width: 14px;
-        height: 14px;
+        width: 6px;
+        height: 6px;
     }
 
     ::-webkit-scrollbar-track {
-        background: #1f2937;
-        box-shadow: inset 2px 2px 0 #000;
+        background: transparent;
     }
 
     ::-webkit-scrollbar-thumb {
-        background: #6b7280;
-        border: 2px solid #1f2937;
-        box-shadow: 2px 2px 0 #000, inset 1px 1px 0 #9ca3af;
+        background: #94a3b8;
+        border-radius: 10px;
+    }
+
+    .dark ::-webkit-scrollbar-thumb {
+        background: #334155;
     }
 
     ::-webkit-scrollbar-thumb:hover {
-        background: #9ca3af;
+        background: #64748b;
     }
 
     /* Firefox */
     * {
-        scrollbar-width: auto;
-        scrollbar-color: #6b7280 #1f2937;
+        scrollbar-width: thin;
+        scrollbar-color: #94a3b8 transparent;
     }
 }