lisa100/toolbox-titanium

1:root {2    --primary: #4f46e5;3    --primary-light: #6366f1;4    --primary-dark: #4338ca;5    --secondary: #10b981;6    --secondary-light: #34d399;7    --secondary-dark: #059669;8    --text: #1f2937;9    --text-light: #6b7280;10    --bg: #f9fafb;11    --bg-dark: #111827;12    --card-bg: #ffffff;13    --card-bg-dark: #1e293b;14    --border: #e5e7eb;15    --border-dark: #374151;16}17 18.dark {19    --text: #f9fafb;20    --text-light: #9ca3af;21    --bg: #111827;22    --card-bg: #1e293b;23    --border: #374151;24}25/* Base Styles */26body {27    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;28    color: var(--text);29    background-color: var(--bg);30    transition: all 0.3s ease;31}32/* Hero Section */33.hero-section {34    background-size: 200% auto;35    animation: gradient 15s ease infinite;36    position: relative;37}38 39.hero-section .max-w-4xl {40    position: relative;41    z-index: 10;42}43@keyframes gradient {44    0% { background-position: 0% 50%; }45    50% { background-position: 100% 50%; }46    100% { background-position: 0% 50%; }47}48 49.animate-fade-in {50    animation: fadeIn 1s ease-out;51}52 53@keyframes fadeIn {54    from { opacity: 0; transform: translateY(20px); }55    to { opacity: 1; transform: translateY(0); }56}57 58.btn-hero {59    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);60    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);61}62 63.btn-hero:hover {64    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);65}66/* Tool Cards */67.tool-card {68    background-color: var(--card-bg);69    border-radius: 0.75rem;70    padding: 1.5rem;71    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);72    transition: all 0.2s ease;73    cursor: pointer;74    border: 1px solid var(--border);75    position: relative;76    overflow: hidden;77}78 79.tool-card::before {80    content: '';81    position: absolute;82    top: 0;83    left: 0;84    right: 0;85    height: 4px;86    background: var(--primary);87    background: linear-gradient(to right, var(--primary), var(--primary-light));88}89.tool-card:hover {90    transform: translateY(-2px);91    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);92}93 94.tool-card h3 {95    font-size: 1.25rem;96    font-weight: 600;97    margin: 1rem 0 0.5rem;98}99 100.tool-card p {101    color: var(--text-light);102    font-size: 0.875rem;103}104 105.tool-icon {106    width: 3rem;107    height: 3rem;108    border-radius: 0.5rem;109    background-color: rgba(79, 70, 229, 0.1);110    display: flex;111    align-items: center;112    justify-content: center;113    color: var(--primary);114}115 116/* Tool Modals */117.tool-modal {118    position: fixed;119    top: 0;120    left: 0;121    right: 0;122    bottom: 0;123    background-color: rgba(0, 0, 0, 0.5);124    display: none;125    align-items: center;126    justify-content: center;127    z-index: 100;128    opacity: 0;129    pointer-events: none;130    transition: opacity 0.3s ease;131}132.tool-modal.active {133    opacity: 1;134    pointer-events: all;135}136 137.modal-content {138    background-color: var(--card-bg);139    border-radius: 0.75rem;140    padding: 1.5rem;141    width: 90%;142    max-width: 28rem;143    max-height: 90vh;144    overflow-y: auto;145    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);146}147 148.modal-content h2 {149    font-size: 1.5rem;150    font-weight: 600;151    margin-bottom: 1.5rem;152    color: var(--text);153}154 155/* Forms */156.form-group {157    margin-bottom: 1rem;158}159 160.form-group label {161    display: block;162    margin-bottom: 0.5rem;163    font-size: 0.875rem;164    font-weight: 500;165    color: var(--text);166}167 168.form-group input,169.form-group select {170    width: 100%;171    padding: 0.5rem 0.75rem;172    border-radius: 0.375rem;173    border: 1px solid var(--border);174    background-color: var(--card-bg);175    color: var(--text);176}177 178/* Buttons */179.btn-primary {180    background-color: var(--primary);181    color: white;182    padding: 0.5rem 1rem;183    border-radius: 0.375rem;184    font-weight: 500;185    transition: background-color 0.2s ease;186    width: 100%;187    margin-top: 1rem;188}189 190.btn-primary:hover {191    background-color: var(--primary-dark);192}193 194/* Results */195.result-container {196    margin-top: 1.5rem;197    padding-top: 1.5rem;198    border-top: 1px solid var(--border);199}200 201.result-container h3 {202    font-size: 1rem;203    font-weight: 600;204    margin-bottom: 1rem;205    color: var(--text);206}207 208.result-grid {209    display: grid;210    grid-template-columns: repeat(3, 1fr);211    gap: 1rem;212    text-align: center;213}214 215.result-grid div span {216    font-size: 1.5rem;217    font-weight: 700;218    color: var(--primary);219    display: block;220}221 222.result-grid div small {223    font-size: 0.75rem;224    color: var(--text-light);225}226 227/* Responsive Adjustments */228@media (max-width: 768px) {229    .modal-content {230        width: 95%;231        padding: 1rem;232    }233}