Adrian Mejias
949a9230c5
- Updated the index page to improve text formatting and structure. - Enhanced feature sections with consistent styling and updated icons. - Modified quick start guide for better clarity and visual appeal. - Adjusted footer links for consistent styling. - Updated navigation links to reflect new color scheme. - Added new color definitions in Vite configuration for better theme support.
126 lines
2.9 KiB
CSS
126 lines
2.9 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../storage/framework/views/*.php';
|
|
@source '../**/*.blade.php';
|
|
@source '../**/*.js';
|
|
|
|
@theme {
|
|
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
|
|
--color-gta-dark: #1a1a1a;
|
|
--color-gta-light: #f8fafc;
|
|
--color-gta-orange: #f57c00;
|
|
--color-gta-cyan: #1de9b6;
|
|
--color-gta-gray: #334155;
|
|
--color-gta-indigo: #3b82f6;
|
|
|
|
--color-gray-50: #f8fafc;
|
|
--color-gray-100: #f1f5f9;
|
|
--color-gray-200: #e2e8f0;
|
|
--color-gray-300: #cbd5e1;
|
|
--color-gray-400: #94a3b8;
|
|
--color-gray-500: #64748b;
|
|
--color-gray-600: #475569;
|
|
--color-gray-700: #334155;
|
|
--color-gray-800: #1e293b;
|
|
--color-gray-900: #0f172a;
|
|
|
|
--color-indigo-50: #fff7ed;
|
|
--color-indigo-100: #ffedd5;
|
|
--color-indigo-200: #fed7aa;
|
|
--color-indigo-300: #fdba74;
|
|
--color-indigo-400: #fb923c;
|
|
--color-indigo-500: #f57c00;
|
|
--color-indigo-600: #ea580c;
|
|
--color-indigo-700: #c2410c;
|
|
--color-indigo-800: #9a3412;
|
|
--color-indigo-900: #7c2d12;
|
|
|
|
--animate-fade-in: fade-in 0.3s ease-in-out;
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
body {
|
|
@apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-gta-neon {
|
|
color: var(--color-gta-cyan);
|
|
}
|
|
|
|
.text-gta-orange {
|
|
color: var(--color-gta-orange);
|
|
}
|
|
|
|
.bg-gta-neon {
|
|
background-color: var(--color-gta-cyan);
|
|
}
|
|
|
|
.bg-gta-orange {
|
|
background-color: var(--color-gta-orange);
|
|
}
|
|
|
|
.border-gta-neon {
|
|
border-color: var(--color-gta-cyan);
|
|
}
|
|
|
|
.border-gta-orange {
|
|
border-color: var(--color-gta-orange);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.link-gta {
|
|
color: var(--color-gta-cyan);
|
|
transition: color 0.2s ease-in-out;
|
|
}
|
|
|
|
.link-gta:hover {
|
|
color: #6ee7b7;
|
|
}
|
|
|
|
.btn-gta-primary {
|
|
background-color: var(--color-gta-orange);
|
|
color: #ffffff;
|
|
border-radius: 0.5rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.btn-gta-primary:hover {
|
|
background-color: #ea580c;
|
|
}
|
|
|
|
.btn-gta-secondary {
|
|
background-color: transparent;
|
|
color: var(--color-gta-cyan);
|
|
border: 1px solid var(--color-gta-cyan);
|
|
border-radius: 0.5rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.btn-gta-secondary:hover {
|
|
background-color: color-mix(in oklab, var(--color-gta-cyan) 16%, transparent);
|
|
}
|
|
}
|