diff --git a/static/css/input.css b/static/css/input.css index 797cf60..71b6fb8 100644 --- a/static/css/input.css +++ b/static/css/input.css @@ -2,49 +2,179 @@ @tailwind components; @tailwind utilities; +@layer base { + :root { + --color-void: #07070f; + --color-surface: #0f0f1a; + --color-surface-50: #16162a; + --color-surface-100: #1c1c2e; + --color-border: rgba(92, 184, 44, 0.2); + --color-border-dim: rgba(255, 255, 255, 0.06); + --color-primary: #5CB82C; + --color-primary-light: #86efac; + --color-accent: #F7931E; + --color-text: #e8e6f0; + --color-text-muted: #8b8ca8; + } + + html { scroll-behavior: smooth; } + + body { + background-color: var(--color-void); + color: var(--color-text); + font-family: 'DM Sans', sans-serif; + } + + h1, h2, h3, h4, h5, h6 { + font-family: 'Syne', sans-serif; + } + + ::selection { + background: rgba(92, 184, 44, 0.35); + color: #fff; + } + + ::-webkit-scrollbar { width: 6px; } + ::-webkit-scrollbar-track { background: var(--color-void); } + ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; } + ::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); } +} + @layer components { + /* Buttons */ .btn { - @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200; + @apply inline-flex items-center justify-center px-5 py-2.5 rounded-lg font-semibold transition-all duration-200 text-sm tracking-wide; } .btn-primary { - @apply bg-primary-600 text-white hover:bg-primary-700; + background: linear-gradient(135deg, #5CB82C, #4CA324); + @apply text-white; + box-shadow: 0 0 20px rgba(92, 184, 44, 0.3); + } + .btn-primary:hover { + background: linear-gradient(135deg, #6fcf37, #5CB82C); + transform: translateY(-1px); + box-shadow: 0 0 30px rgba(92, 184, 44, 0.45); } .btn-secondary { - @apply bg-gray-200 text-gray-800 hover:bg-gray-300; + @apply bg-surface-100 text-gray-300 border border-white/10 hover:border-white/20 hover:text-white; } .btn-outline { - @apply border-2 border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white; + @apply border text-primary-400 hover:text-primary-300; + border-color: rgba(92, 184, 44, 0.4); + } + .btn-outline:hover { + border-color: rgba(92, 184, 44, 0.7); + background: rgba(92, 184, 44, 0.07); } .btn-accent { - @apply bg-accent-500 text-white hover:bg-accent-600; + background: linear-gradient(135deg, #F7931E, #ea7c0c); + @apply text-white font-bold; + box-shadow: 0 0 20px rgba(247, 147, 30, 0.25); + } + .btn-accent:hover { + background: linear-gradient(135deg, #f9a94a, #F7931E); + transform: translateY(-1px); + box-shadow: 0 0 30px rgba(247, 147, 30, 0.4); } - .btn-accent-outline { - @apply border-2 border-accent-500 text-accent-500 hover:bg-accent-500 hover:text-white; + .btn-ghost { + @apply text-gray-400 hover:text-white hover:bg-white/5; } + /* Cards */ .card { - @apply bg-white rounded-xl shadow-md p-6; + background: var(--color-surface); + border: 1px solid var(--color-border-dim); + @apply rounded-xl p-6 transition-all duration-300; } - .input { - @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all; + .card-hover { + @apply card; } + .card-hover:hover { + border-color: rgba(92, 184, 44, 0.3); + box-shadow: 0 0 30px rgba(92, 184, 44, 0.07), 0 8px 32px rgba(0,0,0,0.4); + transform: translateY(-2px); + } + + /* Form Elements */ + .input { + background: var(--color-surface-50); + border: 1px solid var(--color-border-dim); + @apply w-full px-4 py-3 rounded-lg text-gray-200 placeholder-gray-600 outline-none transition-all duration-200; + font-family: 'DM Sans', sans-serif; + } + .input:focus { + border-color: rgba(92, 184, 44, 0.5); + box-shadow: 0 0 0 3px rgba(92, 184, 44, 0.1); + background: var(--color-surface-100); + } + .input::placeholder { color: #4a4a6a; } .label { - @apply block text-sm font-medium text-gray-700 mb-1; + @apply block text-sm font-medium text-gray-400 mb-2; + font-family: 'DM Sans', sans-serif; + letter-spacing: 0.01em; } + /* Nav */ .nav-link { - @apply text-gray-600 hover:text-primary-600 font-medium transition-colors; + @apply text-gray-400 hover:text-white font-medium transition-colors duration-200 text-sm; + } + .nav-link-active { + @apply text-white font-semibold; } - .nav-link-active { - @apply text-primary-600 font-semibold; + /* Gradient text */ + .gradient-text { + background: linear-gradient(135deg, #86efac 0%, #F7931E 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .gradient-text-green { + background: linear-gradient(135deg, #bbf7d0 0%, #5CB82C 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + /* Dot grid */ + .dot-grid { + background-image: radial-gradient(circle, rgba(92, 184, 44, 0.15) 1px, transparent 1px); + background-size: 28px 28px; + } + + /* Badge */ + .badge { + @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold tracking-wider; + } + .badge-primary { + background: rgba(92, 184, 44, 0.12); + border: 1px solid rgba(92, 184, 44, 0.3); + @apply text-primary-300; + } + .badge-accent { + background: rgba(247, 147, 30, 0.1); + border: 1px solid rgba(247, 147, 30, 0.3); + @apply text-accent-300; + } + .badge-red { + background: rgba(239, 68, 68, 0.1); + border: 1px solid rgba(239, 68, 68, 0.25); + @apply text-red-400; + } + + /* Avatar */ + .avatar { + background: linear-gradient(135deg, #5CB82C, #F7931E); + @apply rounded-full flex items-center justify-center text-white font-bold flex-shrink-0; + font-family: 'Syne', sans-serif; } } @@ -53,11 +183,41 @@ opacity: 0; transition: opacity 200ms ease-in; } +.htmx-request .htmx-indicator { opacity: 1; } +.htmx-request.htmx-indicator { opacity: 1; } -.htmx-request .htmx-indicator { - opacity: 1; +/* Prose overrides for dark theme */ +.prose-dark { color: #c4c2d4; } +.prose-dark h1, .prose-dark h2, .prose-dark h3, +.prose-dark h4, .prose-dark h5, .prose-dark h6 { + color: #f1f0ff; + font-family: 'Syne', sans-serif; } +.prose-dark a { color: #86efac; } +.prose-dark a:hover { color: #bbf7d0; } +.prose-dark strong { color: #e8e6f0; } +.prose-dark code { + background: rgba(92, 184, 44, 0.1); + border: 1px solid rgba(92, 184, 44, 0.2); + color: #86efac; + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + font-size: 0.875em; +} +.prose-dark pre { + background: #0f0f1a; + border: 1px solid rgba(255,255,255,0.06); + border-radius: 0.75rem; +} +.prose-dark blockquote { + border-left-color: #5CB82C; + color: #8b8ca8; +} +.prose-dark hr { border-color: rgba(255,255,255,0.06); } -.htmx-request.htmx-indicator { - opacity: 1; +/* Animations */ +@keyframes pulse-glow { + 0%, 100% { opacity: 0.4; } + 50% { opacity: 0.9; } } +.pulse-glow-anim { animation: pulse-glow 3s ease-in-out infinite; } diff --git a/static/css/styles.css b/static/css/styles.css index dda3e8d..9f490af 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -554,133 +554,311 @@ video { display: none; } +:root { + --color-void: #07070f; + --color-surface: #0f0f1a; + --color-surface-50: #16162a; + --color-surface-100: #1c1c2e; + --color-border: rgba(92, 184, 44, 0.2); + --color-border-dim: rgba(255, 255, 255, 0.06); + --color-primary: #5CB82C; + --color-primary-light: #86efac; + --color-accent: #F7931E; + --color-text: #e8e6f0; + --color-text-muted: #8b8ca8; +} + +html { + scroll-behavior: smooth; +} + +body { + background-color: var(--color-void); + color: var(--color-text); + font-family: 'DM Sans', sans-serif; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Syne', sans-serif; +} + +::-moz-selection { + background: rgba(92, 184, 44, 0.35); + color: #fff; +} + +::selection { + background: rgba(92, 184, 44, 0.35); + color: #fff; +} + +::-webkit-scrollbar { + width: 6px; +} + +::-webkit-scrollbar-track { + background: var(--color-void); +} + +::-webkit-scrollbar-thumb { + background: var(--color-primary); + border-radius: 3px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--color-primary-light); +} + +/* Buttons */ + .btn { + display: inline-flex; + align-items: center; + justify-content: center; border-radius: 0.5rem; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-weight: 500; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + padding-left: 1.25rem; + padding-right: 1.25rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 600; + letter-spacing: 0.025em; + transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; } .btn-primary { - --tw-bg-opacity: 1; - background-color: rgb(76 163 36 / var(--tw-bg-opacity, 1)); + background: linear-gradient(135deg, #5CB82C, #4CA324); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + box-shadow: 0 0 20px rgba(92, 184, 44, 0.3); } .btn-primary:hover { - --tw-bg-opacity: 1; - background-color: rgb(61 138 29 / var(--tw-bg-opacity, 1)); + background: linear-gradient(135deg, #6fcf37, #5CB82C); + transform: translateY(-1px); + box-shadow: 0 0 30px rgba(92, 184, 44, 0.45); } .btn-secondary { + border-width: 1px; + border-color: rgb(255 255 255 / 0.1); --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); + background-color: rgb(28 28 46 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; - color: rgb(31 41 55 / var(--tw-text-opacity, 1)); + color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } .btn-secondary:hover { - --tw-bg-opacity: 1; - background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)); + border-color: rgb(255 255 255 / 0.2); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .btn-outline { - border-width: 2px; - --tw-border-opacity: 1; - border-color: rgb(76 163 36 / var(--tw-border-opacity, 1)); + border-width: 1px; --tw-text-opacity: 1; - color: rgb(76 163 36 / var(--tw-text-opacity, 1)); + color: rgb(74 222 128 / var(--tw-text-opacity, 1)); } .btn-outline:hover { - --tw-bg-opacity: 1; - background-color: rgb(76 163 36 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + color: rgb(134 239 172 / var(--tw-text-opacity, 1)); } -.btn-accent { - --tw-bg-opacity: 1; - background-color: rgb(247 147 30 / var(--tw-bg-opacity, 1)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +.btn-outline { + border-color: rgba(92, 184, 44, 0.4); } -.btn-accent:hover { - --tw-bg-opacity: 1; - background-color: rgb(234 124 12 / var(--tw-bg-opacity, 1)); +.btn-outline:hover { + border-color: rgba(92, 184, 44, 0.7); + background: rgba(92, 184, 44, 0.07); } +/* Cards */ + .card { + background: var(--color-surface); + border: 1px solid var(--color-border-dim); border-radius: 0.75rem; - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding: 1.5rem; - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.card-hover { + background: var(--color-surface); + border: 1px solid var(--color-border-dim); + border-radius: 0.75rem; + padding: 1.5rem; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} + +.card-hover:hover { + border-color: rgba(92, 184, 44, 0.3); + box-shadow: 0 0 30px rgba(92, 184, 44, 0.07), 0 8px 32px rgba(0,0,0,0.4); + transform: translateY(-2px); +} + +/* Form Elements */ + +.input { + background: var(--color-surface-50); + border: 1px solid var(--color-border-dim); + width: 100%; + border-radius: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity, 1)); +} + +.input::-moz-placeholder { + --tw-placeholder-opacity: 1; + color: rgb(75 85 99 / var(--tw-placeholder-opacity, 1)); +} + +.input::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(75 85 99 / var(--tw-placeholder-opacity, 1)); } .input { - width: 100%; - border-radius: 0.5rem; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; outline: 2px solid transparent; outline-offset: 2px; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 200ms; + font-family: 'DM Sans', sans-serif; } .input:focus { - border-color: transparent; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-opacity: 1; - --tw-ring-color: rgb(92 184 44 / var(--tw-ring-opacity, 1)); + border-color: rgba(92, 184, 44, 0.5); + box-shadow: 0 0 0 3px rgba(92, 184, 44, 0.1); + background: var(--color-surface-100); +} + +.input::-moz-placeholder { + color: #4a4a6a; +} + +.input::placeholder { + color: #4a4a6a; } .label { - margin-bottom: 0.25rem; + margin-bottom: 0.5rem; display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity, 1)); + color: rgb(156 163 175 / var(--tw-text-opacity, 1)); + font-family: 'DM Sans', sans-serif; + letter-spacing: 0.01em; } +/* Nav */ + .nav-link { + font-size: 0.875rem; + line-height: 1.25rem; font-weight: 500; --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity, 1)); + color: rgb(156 163 175 / var(--tw-text-opacity, 1)); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-duration: 200ms; } .nav-link:hover { --tw-text-opacity: 1; - color: rgb(76 163 36 / var(--tw-text-opacity, 1)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .nav-link-active { font-weight: 600; --tw-text-opacity: 1; - color: rgb(76 163 36 / var(--tw-text-opacity, 1)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +/* Gradient text */ + +.gradient-text { + background: linear-gradient(135deg, #86efac 0%, #F7931E 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Dot grid */ + +.dot-grid { + background-image: radial-gradient(circle, rgba(92, 184, 44, 0.15) 1px, transparent 1px); + background-size: 28px 28px; +} + +/* Badge */ + +.badge { + display: inline-flex; + align-items: center; + border-radius: 9999px; + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 0.75rem; + line-height: 1rem; + font-weight: 600; + letter-spacing: 0.05em; +} + +.badge-primary { + background: rgba(92, 184, 44, 0.12); + border: 1px solid rgba(92, 184, 44, 0.3); + --tw-text-opacity: 1; + color: rgb(134 239 172 / var(--tw-text-opacity, 1)); +} + +.badge-accent { + background: rgba(247, 147, 30, 0.1); + border: 1px solid rgba(247, 147, 30, 0.3); + --tw-text-opacity: 1; + color: rgb(253 186 116 / var(--tw-text-opacity, 1)); +} + +.badge-red { + background: rgba(239, 68, 68, 0.1); + border: 1px solid rgba(239, 68, 68, 0.25); + --tw-text-opacity: 1; + color: rgb(248 113 113 / var(--tw-text-opacity, 1)); +} + +/* Avatar */ + +.avatar { + background: linear-gradient(135deg, #5CB82C, #F7931E); + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + border-radius: 9999px; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + font-family: 'Syne', sans-serif; +} + +.pointer-events-none { + pointer-events: none; } .static { @@ -707,14 +885,34 @@ video { inset: 0px; } -.left-3 { - left: 0.75rem; +.bottom-\[-50px\] { + bottom: -50px; +} + +.left-1\/2 { + left: 50%; } .left-4 { left: 1rem; } +.left-\[-50px\] { + left: -50px; +} + +.left-\[12\.5\%\] { + left: 12.5%; +} + +.right-\[-100px\] { + right: -100px; +} + +.right-\[12\.5\%\] { + right: 12.5%; +} + .top-0 { top: 0px; } @@ -723,6 +921,22 @@ video { top: 50%; } +.top-1\/3 { + top: 33.333333%; +} + +.top-9 { + top: 2.25rem; +} + +.top-\[-100px\] { + top: -100px; +} + +.z-10 { + z-index: 10; +} + .z-50 { z-index: 50; } @@ -735,33 +949,31 @@ video { grid-column: span 3 / span 3; } -.mx-2 { - margin-left: 0.5rem; - margin-right: 0.5rem; -} - -.mx-4 { - margin-left: 1rem; - margin-right: 1rem; -} - .mx-auto { margin-left: auto; margin-right: auto; } -.-ml-1 { - margin-left: -0.25rem; +.mb-0\.5 { + margin-bottom: 0.125rem; } .mb-1 { margin-bottom: 0.25rem; } +.mb-10 { + margin-bottom: 2.5rem; +} + .mb-12 { margin-bottom: 3rem; } +.mb-14 { + margin-bottom: 3.5rem; +} + .mb-16 { margin-bottom: 4rem; } @@ -778,10 +990,18 @@ video { margin-bottom: 1rem; } +.mb-5 { + margin-bottom: 1.25rem; +} + .mb-6 { margin-bottom: 1.5rem; } +.mb-7 { + margin-bottom: 1.75rem; +} + .mb-8 { margin-bottom: 2rem; } @@ -798,45 +1018,50 @@ video { margin-right: 0.5rem; } -.mr-3 { - margin-right: 0.75rem; -} - -.mr-4 { - margin-right: 1rem; +.mt-0\.5 { + margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } +.mt-10 { + margin-top: 2.5rem; +} + .mt-12 { margin-top: 3rem; } +.mt-14 { + margin-top: 3.5rem; +} + +.mt-16 { + margin-top: 4rem; +} + .mt-4 { margin-top: 1rem; } -.mt-8 { - margin-top: 2rem; +.mt-6 { + margin-top: 1.5rem; } .mt-auto { margin-top: auto; } -.line-clamp-3 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; -} - .block { display: block; } +.inline-block { + display: inline-block; +} + .inline { display: inline; } @@ -845,6 +1070,10 @@ video { display: flex; } +.inline-flex { + display: inline-flex; +} + .table { display: table; } @@ -857,10 +1086,18 @@ video { display: none; } +.h-1\.5 { + height: 0.375rem; +} + .h-10 { height: 2.5rem; } +.h-11 { + height: 2.75rem; +} + .h-12 { height: 3rem; } @@ -877,8 +1114,12 @@ video { height: 5rem; } -.h-24 { - height: 6rem; +.h-3 { + height: 0.75rem; +} + +.h-3\.5 { + height: 0.875rem; } .h-4 { @@ -893,10 +1134,46 @@ video { height: 1.5rem; } +.h-7 { + height: 1.75rem; +} + .h-8 { height: 2rem; } +.h-9 { + height: 2.25rem; +} + +.h-\[250px\] { + height: 250px; +} + +.h-\[300px\] { + height: 300px; +} + +.h-\[350px\] { + height: 350px; +} + +.h-\[400px\] { + height: 400px; +} + +.h-\[500px\] { + height: 500px; +} + +.h-\[72px\] { + height: 72px; +} + +.h-px { + height: 1px; +} + .max-h-\[90vh\] { max-height: 90vh; } @@ -905,10 +1182,18 @@ video { min-height: 100vh; } +.w-1\.5 { + width: 0.375rem; +} + .w-10 { width: 2.5rem; } +.w-11 { + width: 2.75rem; +} + .w-12 { width: 3rem; } @@ -921,8 +1206,16 @@ video { width: 4rem; } -.w-24 { - width: 6rem; +.w-20 { + width: 5rem; +} + +.w-3 { + width: 0.75rem; +} + +.w-3\.5 { + width: 0.875rem; } .w-4 { @@ -937,22 +1230,70 @@ video { width: 1.5rem; } +.w-7 { + width: 1.75rem; +} + .w-8 { width: 2rem; } +.w-9 { + width: 2.25rem; +} + +.w-\[300px\] { + width: 300px; +} + +.w-\[400px\] { + width: 400px; +} + +.w-\[500px\] { + width: 500px; +} + +.w-\[600px\] { + width: 600px; +} + +.w-\[700px\] { + width: 700px; +} + +.w-\[72px\] { + width: 72px; +} + .w-full { width: 100%; } +.w-px { + width: 1px; +} + +.min-w-0 { + min-width: 0px; +} + .max-w-2xl { max-width: 42rem; } +.max-w-3xl { + max-width: 48rem; +} + .max-w-4xl { max-width: 56rem; } +.max-w-5xl { + max-width: 64rem; +} + .max-w-7xl { max-width: 80rem; } @@ -961,14 +1302,14 @@ video { max-width: 28rem; } -.max-w-none { - max-width: none; -} - .max-w-xl { max-width: 36rem; } +.max-w-xs { + max-width: 20rem; +} + .flex-shrink-0 { flex-shrink: 0; } @@ -981,6 +1322,11 @@ video { flex-grow: 1; } +.-translate-x-1\/2 { + --tw-translate-x: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1008,18 +1354,22 @@ video { grid-template-columns: repeat(1, minmax(0, 1fr)); } -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - .flex-col { flex-direction: column; } +.flex-wrap { + flex-wrap: wrap; +} + .items-start { align-items: flex-start; } +.items-end { + align-items: flex-end; +} + .items-center { align-items: center; } @@ -1036,46 +1386,61 @@ video { justify-content: space-between; } -.gap-12 { - gap: 3rem; +.gap-1 { + gap: 0.25rem; +} + +.gap-10 { + gap: 2.5rem; +} + +.gap-14 { + gap: 3.5rem; +} + +.gap-2 { + gap: 0.5rem; +} + +.gap-2\.5 { + gap: 0.625rem; +} + +.gap-3 { + gap: 0.75rem; } .gap-4 { gap: 1rem; } -.gap-8 { - gap: 2rem; +.gap-5 { + gap: 1.25rem; } -.space-x-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +.gap-6 { + gap: 1.5rem; } -.space-x-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.75rem * var(--tw-space-x-reverse)); - margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +.gap-x-10 { + -moz-column-gap: 2.5rem; + column-gap: 2.5rem; } -.space-x-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +.gap-y-4 { + row-gap: 1rem; } -.space-x-8 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(2rem * var(--tw-space-x-reverse)); - margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-y-2 > :not([hidden]) ~ :not([hidden]) { +.space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + +.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.625rem * var(--tw-space-y-reverse)); } .space-y-3 > :not([hidden]) ~ :not([hidden]) { @@ -1090,24 +1455,24 @@ video { margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } -.space-y-6 > :not([hidden]) ~ :not([hidden]) { +.space-y-5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; - margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); + margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.25rem * var(--tw-space-y-reverse)); } -.space-y-8 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(2rem * var(--tw-space-y-reverse)); +.overflow-hidden { + overflow: hidden; } .overflow-y-auto { overflow-y: auto; } -.rounded { - border-radius: 0.25rem; +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .rounded-2xl { @@ -1126,160 +1491,92 @@ video { border-radius: 0.75rem; } -.border-2 { - border-width: 2px; +.border { + border-width: 1px; } .border-b { border-bottom-width: 1px; } -.border-l-4 { - border-left-width: 4px; -} - .border-t { border-top-width: 1px; } -.border-gray-200 { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); +.border-emerald-500\/30 { + border-color: rgb(16 185 129 / 0.3); } -.border-gray-800 { - --tw-border-opacity: 1; - border-color: rgb(31 41 55 / var(--tw-border-opacity, 1)); +.border-primary-500\/30 { + border-color: rgb(92 184 44 / 0.3); } -.border-primary-500 { - --tw-border-opacity: 1; - border-color: rgb(92 184 44 / var(--tw-border-opacity, 1)); +.border-red-500\/30 { + border-color: rgb(239 68 68 / 0.3); } -.border-white { - --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); -} - -.bg-accent-500 { +.bg-accent-400 { --tw-bg-opacity: 1; - background-color: rgb(247 147 30 / var(--tw-bg-opacity, 1)); + background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1)); } -.bg-black { +.bg-emerald-500\/10 { + background-color: rgb(16 185 129 / 0.1); +} + +.bg-primary-400 { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); + background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1)); } -.bg-blue-100 { - --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); +.bg-primary-500\/10 { + background-color: rgb(92 184 44 / 0.1); } -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); +.bg-red-500\/10 { + background-color: rgb(239 68 68 / 0.1); } -.bg-gray-50 { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); +.bg-white\/5 { + background-color: rgb(255 255 255 / 0.05); } -.bg-gray-900 { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); -} - -.bg-green-100 { - --tw-bg-opacity: 1; - background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); -} - -.bg-primary-100 { - --tw-bg-opacity: 1; - background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); -} - -.bg-primary-600 { - --tw-bg-opacity: 1; - background-color: rgb(76 163 36 / var(--tw-bg-opacity, 1)); -} - -.bg-red-100 { - --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); -} - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); -} - -.bg-opacity-50 { - --tw-bg-opacity: 0.5; -} - -.bg-gradient-to-br { - background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); -} - -.from-gray-800 { - --tw-gradient-from: #1f2937 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.from-primary-400 { - --tw-gradient-from: #4ade80 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.from-primary-500 { - --tw-gradient-from: #5CB82C var(--tw-gradient-from-position); - --tw-gradient-to: rgb(92 184 44 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.from-primary-600 { - --tw-gradient-from: #4CA324 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(76 163 36 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.to-gray-900 { - --tw-gradient-to: #111827 var(--tw-gradient-to-position); -} - -.to-primary-600 { - --tw-gradient-to: #4CA324 var(--tw-gradient-to-position); -} - -.to-primary-700 { - --tw-gradient-to: #3D8A1D var(--tw-gradient-to-position); -} - -.to-primary-800 { - --tw-gradient-to: #2F6B16 var(--tw-gradient-to-position); +.p-2 { + padding: 0.5rem; } .p-4 { padding: 1rem; } +.p-5 { + padding: 1.25rem; +} + .p-6 { padding: 1.5rem; } +.p-7 { + padding: 1.75rem; +} + .p-8 { padding: 2rem; } -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; +.p-px { + padding: 1px; +} + +.px-10 { + padding-left: 2.5rem; + padding-right: 2.5rem; +} + +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; } .px-4 { @@ -1287,14 +1584,24 @@ video { padding-right: 1rem; } +.px-7 { + padding-left: 1.75rem; + padding-right: 1.75rem; +} + .px-8 { padding-left: 2rem; padding-right: 2rem; } -.py-0\.5 { - padding-top: 0.125rem; - padding-bottom: 0.125rem; +.py-1\.5 { + padding-top: 0.375rem; + padding-bottom: 0.375rem; +} + +.py-10 { + padding-top: 2.5rem; + padding-bottom: 2.5rem; } .py-12 { @@ -1302,11 +1609,26 @@ video { padding-bottom: 3rem; } +.py-14 { + padding-top: 3.5rem; + padding-bottom: 3.5rem; +} + .py-16 { padding-top: 4rem; padding-bottom: 4rem; } +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.py-2\.5 { + padding-top: 0.625rem; + padding-bottom: 0.625rem; +} + .py-20 { padding-top: 5rem; padding-bottom: 5rem; @@ -1317,22 +1639,56 @@ video { padding-bottom: 6rem; } -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; +.py-28 { + padding-top: 7rem; + padding-bottom: 7rem; } -.py-8 { - padding-top: 2rem; +.py-3\.5 { + padding-top: 0.875rem; + padding-bottom: 0.875rem; +} + +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + +.pb-24 { + padding-bottom: 6rem; +} + +.pb-28 { + padding-bottom: 7rem; +} + +.pb-8 { padding-bottom: 2rem; } -.pl-10 { - padding-left: 2.5rem; +.pl-11 { + padding-left: 2.75rem; } -.pl-12 { - padding-left: 3rem; +.pl-4 { + padding-left: 1rem; +} + +.pr-4 { + padding-right: 1rem; +} + +.pt-2 { + padding-top: 0.5rem; +} + +.pt-5 { + padding-top: 1.25rem; } .pt-8 { @@ -1347,6 +1703,10 @@ video { text-align: right; } +.font-display { + font-family: Syne, sans-serif; +} + .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -1362,6 +1722,16 @@ video { line-height: 2.5rem; } +.text-5xl { + font-size: 3rem; + line-height: 1; +} + +.text-base { + font-size: 1rem; + line-height: 1.5rem; +} + .text-lg { font-size: 1.125rem; line-height: 1.75rem; @@ -1386,6 +1756,10 @@ video { font-weight: 700; } +.font-extrabold { + font-weight: 800; +} + .font-medium { font-weight: 500; } @@ -1394,24 +1768,60 @@ video { font-weight: 600; } +.uppercase { + text-transform: uppercase; +} + +.leading-\[1\.05\] { + line-height: 1.05; +} + +.leading-relaxed { + line-height: 1.625; +} + +.leading-snug { + line-height: 1.375; +} + +.leading-tight { + line-height: 1.25; +} + +.tracking-tight { + letter-spacing: -0.025em; +} + +.tracking-wide { + letter-spacing: 0.025em; +} + +.tracking-wider { + letter-spacing: 0.05em; +} + +.tracking-widest { + letter-spacing: 0.1em; +} + .text-accent-400 { --tw-text-opacity: 1; color: rgb(251 146 60 / var(--tw-text-opacity, 1)); } -.text-accent-500 { +.text-emerald-300 { --tw-text-opacity: 1; - color: rgb(247 147 30 / var(--tw-text-opacity, 1)); + color: rgb(110 231 183 / var(--tw-text-opacity, 1)); } -.text-blue-700 { +.text-gray-100 { --tw-text-opacity: 1; - color: rgb(29 78 216 / var(--tw-text-opacity, 1)); + color: rgb(243 244 246 / var(--tw-text-opacity, 1)); } -.text-gray-300 { +.text-gray-200 { --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity, 1)); + color: rgb(229 231 235 / var(--tw-text-opacity, 1)); } .text-gray-400 { @@ -1424,74 +1834,81 @@ video { color: rgb(107 114 128 / var(--tw-text-opacity, 1)); } -.text-gray-600 { +.text-primary-300 { --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity, 1)); + color: rgb(134 239 172 / var(--tw-text-opacity, 1)); } -.text-gray-900 { +.text-primary-400 { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity, 1)); + color: rgb(74 222 128 / var(--tw-text-opacity, 1)); } -.text-green-700 { +.text-primary-500 { --tw-text-opacity: 1; - color: rgb(21 128 61 / var(--tw-text-opacity, 1)); + color: rgb(92 184 44 / var(--tw-text-opacity, 1)); } -.text-primary-100 { +.text-red-300 { --tw-text-opacity: 1; - color: rgb(220 252 231 / var(--tw-text-opacity, 1)); + color: rgb(252 165 165 / var(--tw-text-opacity, 1)); } -.text-primary-600 { +.text-red-500 { --tw-text-opacity: 1; - color: rgb(76 163 36 / var(--tw-text-opacity, 1)); + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } -.text-red-400 { - --tw-text-opacity: 1; - color: rgb(248 113 113 / var(--tw-text-opacity, 1)); +.opacity-0 { + opacity: 0; } -.text-red-600 { - --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity, 1)); -} - -.text-red-700 { - --tw-text-opacity: 1; - color: rgb(185 28 28 / var(--tw-text-opacity, 1)); -} - -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -} - -.text-yellow-400 { - --tw-text-opacity: 1; - color: rgb(250 204 21 / var(--tw-text-opacity, 1)); +.opacity-20 { + opacity: 0.2; } .opacity-25 { opacity: 0.25; } +.opacity-30 { + opacity: 0.3; +} + +.opacity-40 { + opacity: 0.4; +} + +.opacity-60 { + opacity: 0.6; +} + .opacity-75 { opacity: 0.75; } -.shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.opacity-80 { + opacity: 0.8; +} + +.opacity-90 { + opacity: 0.9; +} + +.blur { + --tw-blur: blur(8px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.backdrop-filter { + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -1500,18 +1917,28 @@ video { transition-duration: 150ms; } +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.transition-shadow { - transition-property: box-shadow; +.transition-opacity { + transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } +.duration-300 { + transition-duration: 300ms; +} + .\[a-zA-Z\:\\-\\\.\] { a-z-a--z: \-\.; } @@ -1527,43 +1954,90 @@ video { opacity: 1; } -.htmx-request.htmx-indicator { +.htmx-request.htmx-indicator { opacity: 1; } -.hover\:bg-accent-600:hover { - --tw-bg-opacity: 1; - background-color: rgb(234 124 12 / var(--tw-bg-opacity, 1)); +/* Prose overrides for dark theme */ + +.prose-dark { + color: #c4c2d4; } -.hover\:bg-gray-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); +.prose-dark h1, .prose-dark h2, .prose-dark h3, +.prose-dark h4, .prose-dark h5, .prose-dark h6 { + color: #f1f0ff; + font-family: 'Syne', sans-serif; } -.hover\:bg-primary-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); +.prose-dark a { + color: #86efac; } -.hover\:bg-white:hover { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); +.prose-dark a:hover { + color: #bbf7d0; } -.hover\:text-gray-700:hover { +.prose-dark strong { + color: #e8e6f0; +} + +.prose-dark code { + background: rgba(92, 184, 44, 0.1); + border: 1px solid rgba(92, 184, 44, 0.2); + color: #86efac; + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + font-size: 0.875em; +} + +.prose-dark pre { + background: #0f0f1a; + border: 1px solid rgba(255,255,255,0.06); + border-radius: 0.75rem; +} + +.prose-dark blockquote { + border-left-color: #5CB82C; + color: #8b8ca8; +} + +.prose-dark hr { + border-color: rgba(255,255,255,0.06); +} + +/* Animations */ + +@keyframes pulse-glow { + 0%, 100% { + opacity: 0.4; + } + + 50% { + opacity: 0.9; + } +} + +.pulse-glow-anim { + animation: pulse-glow 3s ease-in-out infinite; +} + +.hover\:bg-white\/10:hover { + background-color: rgb(255 255 255 / 0.1); +} + +.hover\:bg-white\/5:hover { + background-color: rgb(255 255 255 / 0.05); +} + +.hover\:text-primary-300:hover { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity, 1)); + color: rgb(134 239 172 / var(--tw-text-opacity, 1)); } -.hover\:text-primary-600:hover { +.hover\:text-primary-400:hover { --tw-text-opacity: 1; - color: rgb(76 163 36 / var(--tw-text-opacity, 1)); -} - -.hover\:text-primary-700:hover { - --tw-text-opacity: 1; - color: rgb(61 138 29 / var(--tw-text-opacity, 1)); + color: rgb(74 222 128 / var(--tw-text-opacity, 1)); } .hover\:text-white:hover { @@ -1571,32 +2045,24 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } -.hover\:underline:hover { - text-decoration-line: underline; -} - -.hover\:shadow-lg:hover { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.group:hover .group-hover\:bg-primary-200 { - --tw-bg-opacity: 1; - background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1)); -} - -.group:hover .group-hover\:text-primary-600 { +.group:hover .group-hover\:text-primary-300 { --tw-text-opacity: 1; - color: rgb(76 163 36 / var(--tw-text-opacity, 1)); + color: rgb(134 239 172 / var(--tw-text-opacity, 1)); +} + +.group:hover .group-hover\:opacity-100 { + opacity: 1; } @media (min-width: 640px) { + .sm\:block { + display: block; + } + + .sm\:flex { + display: flex; + } + .sm\:flex-row { flex-direction: row; } @@ -1612,6 +2078,10 @@ video { grid-column: span 2 / span 2; } + .md\:block { + display: block; + } + .md\:flex { display: flex; } @@ -1632,11 +2102,6 @@ video { grid-template-columns: repeat(4, minmax(0, 1fr)); } - .md\:text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; - } - .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; @@ -1651,9 +2116,27 @@ video { font-size: 3.75rem; line-height: 1; } + + .md\:text-7xl { + font-size: 4.5rem; + line-height: 1; + } + + .md\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } } @media (min-width: 1024px) { + .lg\:col-span-2 { + grid-column: span 2 / span 2; + } + + .lg\:col-span-3 { + grid-column: span 3 / span 3; + } + .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -1662,6 +2145,10 @@ video { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .lg\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; diff --git a/tailwind.config.js b/tailwind.config.js index 9060b4a..02db2c7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,9 +6,13 @@ module.exports = { ], theme: { extend: { + fontFamily: { + display: ['Syne', 'sans-serif'], + body: ['DM Sans', 'sans-serif'], + }, colors: { primary: { - 50: '#f0fdf4', + 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', @@ -20,7 +24,7 @@ module.exports = { 900: '#1F4D0F', }, accent: { - 50: '#fff7ed', + 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', @@ -30,8 +34,21 @@ module.exports = { 700: '#c2640a', 800: '#9a4f0d', 900: '#7c400e', - } - } + }, + surface: { + DEFAULT: '#0f0f1a', + 50: '#16162a', + 100: '#1c1c2e', + 200: '#22223a', + }, + void: '#07070f', + }, + boxShadow: { + 'glow-sm': '0 0 15px rgba(92, 184, 44, 0.25)', + 'glow': '0 0 30px rgba(92, 184, 44, 0.3)', + 'glow-lg': '0 0 60px rgba(92, 184, 44, 0.35)', + 'glow-accent': '0 0 30px rgba(247, 147, 30, 0.25)', + }, }, }, plugins: [], diff --git a/templates/about.html b/templates/about.html index 4153cd7..28e119e 100644 --- a/templates/about.html +++ b/templates/about.html @@ -3,103 +3,88 @@ {% block title %}About Us{% endblock %} {% block content %} - -
-
-
-

About DirectLX

-

- We're a team of passionate developers dedicated to building software that makes a difference. -

-
+ + +
+
+
+ +
+
Our Story
+

+ About DirectLX +

+

+ A team of passionate engineers dedicated to building software that genuinely makes a difference. +

- -
+ +
-
+
-

Our Story

-

- DirectLX was founded with a simple mission: to help businesses succeed through technology. - We believe that great software isn't just about code—it's about understanding problems - and crafting solutions that truly work. -

-

- Over the years, we've had the privilege of working with startups, growing businesses, - and established enterprises across various industries. Each project has taught us - something new and reinforced our commitment to excellence. -

-

- Today, we continue to push boundaries, embrace new technologies, and deliver - solutions that exceed expectations. Our journey is far from over, and we're - excited about what the future holds. -

+

Our Story

+
+

+ DirectLX was founded with a simple mission: help businesses succeed through technology. We believe great software isn't just about code — it's about understanding problems and crafting solutions that truly work. +

+

+ Over the years, we've had the privilege of working with startups, growing businesses, and established enterprises across various industries. Each project has taught us something new and reinforced our commitment to excellence. +

+

+ Today, we continue to push boundaries, embrace new technologies, and deliver solutions that exceed expectations. Our journey is far from over — and we're excited about what comes next. +

+
-
-

Our Values

-
    -
  • - - - + + +
    +

    Our Values

    +
      + {% set values = [ + ('Quality First', 'We never compromise on quality, even under pressure.'), + ('Transparency', 'Open communication and honest relationships with every client.'), + ('Continuous Learning', 'Always evolving — embracing new tools, patterns, and ideas.'), + ('Client Success', 'Your success is our success. Full stop.'), + ] %} + {% for title, desc in values %} +
    • +
      + + + +
      - Quality First - We never compromise on quality, even under pressure. -
      -
      • -
    • - - - -
      - Transparency - Open communication and honest relationships with clients. -
      -
      • -
    • - - - -
      - Continuous Learning - Always evolving and improving our skills. -
      -
      • -
    • - - - -
      - Client Success - Your success is our success. +
      {{ title }}
      +
      {{ desc }}
      • + {% endfor %}
- -
-
-
-

Meet Our Team

-

- A diverse group of talented individuals united by a shared passion for building great software. -

+ +
+
+
+
+
The Team
+

Meet the people
behind the code

-
-
-
- JH -
-

Johannes

-

Founder & CEO

-

+

+
+
JH
+

Johannes

+

Founder & CEO

+

25+ years in software development. Passionate about clean code and scalable architectures.

@@ -107,19 +92,26 @@
- -
-
-

Our Mission

-

- "To empower businesses with innovative software solutions that drive growth, - improve efficiency, and create lasting value. We believe technology should - be an enabler, not a barrier, and we're committed to making that a reality - for every client we work with." -

- - Let's Work Together - + +
+
+ +
+
+
“
+

+ To empower businesses with innovative software solutions that drive growth, improve efficiency, and create lasting value. Technology should be an enabler — not a barrier. +

+ + Let's Work Together + + + + +
+
+ {% endblock %} diff --git a/templates/base.html b/templates/base.html index 2cb50a7..f64995c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,35 +4,41 @@ {% block title %}DirectLX{% endblock %} | DirectLX.dev + + + {% block head %}{% endblock %} - + + -