137 lines
3.6 KiB
CSS
137 lines
3.6 KiB
CSS
@import 'tailwindcss' theme(static);
|
|
@import '@nuxt/ui';
|
|
|
|
@theme static {
|
|
/* Primary color - Teal (matching landing page) */
|
|
--color-teal-50: #f0fdfa;
|
|
--color-teal-100: #ccfbf1;
|
|
--color-teal-200: #99f6e4;
|
|
--color-teal-300: #5eead4;
|
|
--color-teal-400: #2dd4bf;
|
|
--color-teal-500: #14b8a6;
|
|
--color-teal-600: #0d9488;
|
|
--color-teal-700: #0f766e;
|
|
--color-teal-800: #115e59;
|
|
--color-teal-900: #134e4a;
|
|
--color-teal-950: #042f2e;
|
|
|
|
/* Cyan for accent highlights */
|
|
--color-cyan-50: #ecfeff;
|
|
--color-cyan-100: #cffafe;
|
|
--color-cyan-200: #a5f3fc;
|
|
--color-cyan-300: #67e8f9;
|
|
--color-cyan-400: #22d3ee;
|
|
--color-cyan-500: #06b6d4;
|
|
--color-cyan-600: #0891b2;
|
|
--color-cyan-700: #0e7490;
|
|
--color-cyan-800: #155e75;
|
|
--color-cyan-900: #164e63;
|
|
--color-cyan-950: #083344;
|
|
|
|
/* Violet color palette (for Tailwind classes and hover effects) */
|
|
--color-violet-50: #f5f3ff;
|
|
--color-violet-100: #ede9fe;
|
|
--color-violet-200: #ddd6fe;
|
|
--color-violet-300: #c4b5fd;
|
|
--color-violet-400: #a78bfa;
|
|
--color-violet-500: #8b5cf6;
|
|
--color-violet-600: #7c3aed;
|
|
--color-violet-700: #6d28d9;
|
|
--color-violet-800: #5b21b6;
|
|
--color-violet-900: #4c1d95;
|
|
--color-violet-950: #2e1065;
|
|
}
|
|
|
|
/* ============================================
|
|
FOCUS & ACCESSIBILITY
|
|
============================================ */
|
|
|
|
/* Global focus styles for elements without built-in focus styling.
|
|
Nuxt UI components (inputs, buttons, selects, etc.) have their own
|
|
focus ring styling, so we exclude them to avoid double borders. */
|
|
:focus-visible:not(input):not(textarea):not(select):not(button):not([role='combobox']):not([role='listbox']):not(
|
|
[role='option']
|
|
):not([role='checkbox']):not([role='radio']):not([role='switch']):not([role='slider']):not([role='tab']):not(
|
|
[role='menuitem']
|
|
) {
|
|
outline: 2px solid var(--color-teal-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ============================================
|
|
HEADER STYLING
|
|
============================================ */
|
|
|
|
/* Header logo accent with gradient */
|
|
.header-logo-accent {
|
|
background: linear-gradient(135deg, var(--color-teal-500), var(--color-cyan-400));
|
|
box-shadow: 0 4px 6px -1px rgba(20, 184, 166, 0.2);
|
|
}
|
|
|
|
/* ============================================
|
|
NAVIGATION BUTTON GROUP
|
|
============================================ */
|
|
|
|
.nav-button-group {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.nav-button-group {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
.nav-button-group > * {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Navigation separator line */
|
|
.nav-separator {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--color-gray-200), transparent);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dark .nav-separator {
|
|
background: linear-gradient(90deg, transparent, var(--color-gray-700), transparent);
|
|
}
|
|
|
|
/* ============================================
|
|
FORM ELEMENT VISIBILITY TRANSITIONS
|
|
============================================ */
|
|
|
|
/* Subtle fade + slide animation for form elements appearing/disappearing */
|
|
.form-element-enter-active {
|
|
transition:
|
|
opacity 200ms ease-out,
|
|
transform 200ms ease-out;
|
|
}
|
|
|
|
.form-element-leave-active {
|
|
transition:
|
|
opacity 200ms ease-out,
|
|
transform 200ms ease-out;
|
|
/* Take leaving elements out of flow so remaining elements reposition smoothly */
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-element-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
.form-element-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
|
|
/* Smooth repositioning when elements are added/removed */
|
|
.form-element-move {
|
|
transition: transform 200ms ease-out;
|
|
}
|