style: 實作復古工業風 (Retro Industrial) - 字體, 鑲嵌面板, CRT 螢幕與琥珀色發亮效果

resources/css/app.css

@@ -4,8 +4,11 @@
 
 @layer base {
     :root {
-        --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+        --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-        --font-display: 'Outfit', var(--font-sans);
+        --font-mono: 'Share Tech Mono', monospace;
+        --color-industrial-grey: #d1d5db;
+        --color-industrial-dark: #111827;
+        --color-amber: #ffb000;
     }
 
     html {
@@ -19,89 +22,103 @@
     h5,
     h6,
     .font-display {
-        font-family: var(--font-display);
+        font-family: var(--font-sans);
-        letter-spacing: -0.02em;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
-    /* Noise Texture */
+    .font-mono,
-    .noise-overlay {
+    .crt-screen {
-        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+        font-family: var(--font-mono);
+    }
+
+    /* Inset Panels */
+    .retro-panel {
+        background: #f3f4f6;
+        border: 2px solid #9ca3af;
+        box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 #4b5563;
+    }
+
+    .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);
     }
 
     /* Animations */
-    @keyframes fadeUp {
+    @keyframes blink {
-        from {
-            opacity: 0;
-            transform: translateY(10px);
-        }
 
-        to {
+        0%,
+        100% {
             opacity: 1;
-            transform: translateY(0);
+        }
+
+        50% {
+            opacity: 0;
         }
     }
 
-    .animate-fade-up {
+    .animate-retro-blink {
-        animation: fadeUp 0.5s ease-out forwards;
+        animation: blink 1s step-end infinite;
     }
 
-    .delay-100 {
+    /* Custom Scrollbar - Industrial style */
-        animation-delay: 100ms;
-    }
-
-    .delay-200 {
-        animation-delay: 200ms;
-    }
-
-    .delay-300 {
-        animation-delay: 300ms;
-    }
-
-    .delay-400 {
-        animation-delay: 400ms;
-    }
-
-    .delay-500 {
-        animation-delay: 500ms;
-    }
-
-    /* Custom Scrollbar */
     ::-webkit-scrollbar {
-        width: 8px;
+        width: 14px;
-        height: 8px;
+        height: 14px;
     }
 
     ::-webkit-scrollbar-track {
-        background: transparent;
+        background: #1f2937;
+        box-shadow: inset 2px 2px 0 #000;
     }
 
     ::-webkit-scrollbar-thumb {
-        background-color: theme('colors.gray.300');
+        background: #6b7280;
-        border-radius: 20px;
+        border: 2px solid #1f2937;
-        border: 2px solid transparent;
+        box-shadow: 2px 2px 0 #000, inset 1px 1px 0 #9ca3af;
-        background-clip: content-box;
-    }
-
-    .dark ::-webkit-scrollbar-thumb {
-        background-color: theme('colors.gray.600');
     }
 
     ::-webkit-scrollbar-thumb:hover {
-        background-color: theme('colors.gray.400');
+        background: #9ca3af;
-    }
-
-    .dark ::-webkit-scrollbar-thumb:hover {
-        background-color: theme('colors.gray.500');
     }
 
     /* Firefox */
     * {
-        scrollbar-width: thin;
+        scrollbar-width: auto;
-        scrollbar-color: theme('colors.gray.300') transparent;
+        scrollbar-color: #6b7280 #1f2937;
-    }
-
-    .dark * {
-        scrollbar-color: theme('colors.gray.600') transparent;
     }
 }
 

resources/views/layouts/admin.blade.php

@@ -10,7 +10,7 @@
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
 
     <!-- Scripts -->
     <script>
@@ -24,12 +24,9 @@
     </script>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
-<body class="bg-gray-50 dark:bg-slate-950 antialiased font-sans h-full selection:bg-blue-100 dark:selection:bg-blue-900/40" x-data="{ sidebarOpen: false, userDropdownOpen: false }">
+<body class="bg-[#d1d5db] dark:bg-[#1f2937] antialiased font-sans h-full selection:bg-amber-100 dark:selection:bg-amber-900/40" x-data="{ sidebarOpen: false, userDropdownOpen: false }">
-    <!-- Design Elements -->
+    <!-- Retro Scanlines Effect -->
-    <div class="fixed inset-0 pointer-events-none z-0 overflow-hidden opacity-30 dark:opacity-40">
+    <div class="fixed inset-0 pointer-events-none z-[100] overflow-hidden opacity-[0.03] dark:opacity-[0.05] pointer-events-none bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[length:100%_2px,3px_100%]"></div>
-        <div class="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-blue-500/10 dark:bg-blue-600/5 blur-[120px] rounded-full"></div>
-        <div class="absolute top-[20%] -right-[10%] w-[35%] h-[35%] bg-purple-500/10 dark:bg-purple-600/5 blur-[120px] rounded-full"></div>
-    </div>
 
     <!-- Sidebar Overlay (Mobile) -->
     <div x-show="sidebarOpen"