diff --git a/resources/css/app.css b/resources/css/app.css index ea8a188..08928f3 100644 --- a/resources/css/app.css +++ b/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-display: 'Outfit', var(--font-sans); + --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; } html { @@ -19,89 +22,103 @@ h5, h6, .font-display { - font-family: var(--font-display); - letter-spacing: -0.02em; + font-family: var(--font-sans); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; } - /* Noise Texture */ - .noise-overlay { - 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-mono, + .crt-screen { + 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 { - from { - opacity: 0; - transform: translateY(10px); - } + @keyframes blink { - to { + 0%, + 100% { opacity: 1; - transform: translateY(0); + } + + 50% { + opacity: 0; } } - .animate-fade-up { - animation: fadeUp 0.5s ease-out forwards; + .animate-retro-blink { + animation: blink 1s step-end infinite; } - .delay-100 { - 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 */ + /* Custom Scrollbar - Industrial style */ ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 14px; + 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'); - border-radius: 20px; - border: 2px solid transparent; - background-clip: content-box; - } - - .dark ::-webkit-scrollbar-thumb { - background-color: theme('colors.gray.600'); + background: #6b7280; + border: 2px solid #1f2937; + box-shadow: 2px 2px 0 #000, inset 1px 1px 0 #9ca3af; } ::-webkit-scrollbar-thumb:hover { - background-color: theme('colors.gray.400'); - } - - .dark ::-webkit-scrollbar-thumb:hover { - background-color: theme('colors.gray.500'); + background: #9ca3af; } /* Firefox */ * { - scrollbar-width: thin; - scrollbar-color: theme('colors.gray.300') transparent; - } - - .dark * { - scrollbar-color: theme('colors.gray.600') transparent; + scrollbar-width: auto; + scrollbar-color: #6b7280 #1f2937; } } diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php index 5c74ae6..1bf1303 100644 --- a/resources/views/layouts/admin.blade.php +++ b/resources/views/layouts/admin.blade.php @@ -10,7 +10,7 @@ - + @vite(['resources/css/app.css', 'resources/js/app.js']) - - -
-
-
-
+ + +