website-htmx-rustelo-code/site/public/styles/overrides/contact-tailwind-overrides.css

/* Contact Page Tailwind Style Overrides */
/* These styles override the design system classes to match the contactar.rs appearance */

.contact-page-tailwind-style .tailwind-form-style {
    /* Override any default form styling from design system */
}

.contact-page-tailwind-style .tailwind-form-style .unified-contact-form {
    /* Remove any default design system styling */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.contact-page-tailwind-style .tailwind-form-style .form-header {
    display: none; /* Hide the form header since we handle it in the parent */
}

.contact-page-tailwind-style .tailwind-form-style form {
    /* Ensure form uses proper spacing */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 equivalent */
}

/* Override design system field styling with Tailwind equivalents */
.contact-page-tailwind-style .tailwind-form-style .unified-form-field {
    margin-bottom: 0;
}

.contact-page-tailwind-style .tailwind-form-style label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: rgb(17 24 39); /* text-gray-900 */
    margin-bottom: 0.5rem;
}

.dark .contact-page-tailwind-style .tailwind-form-style label {
    color: rgb(249 250 251); /* dark:text-gray-100 */
}

.contact-page-tailwind-style .tailwind-form-style input,
.contact-page-tailwind-style .tailwind-form-style textarea {
    width: 100%;
    padding: 0.75rem 1rem; /* px-4 py-3 */
    border: 2px solid rgb(229 231 235); /* border-2 border-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: rgb(255 255 255); /* bg-white */
    color: rgb(17 24 39); /* text-gray-900 */
    outline: none;
    transition: all 0.2s ease-in-out;
    font-size: 1rem;
}

.dark .contact-page-tailwind-style .tailwind-form-style input,
.dark .contact-page-tailwind-style .tailwind-form-style textarea {
    border-color: rgb(75 85 99); /* dark:border-gray-600 */
    background-color: rgb(55 65 81); /* dark:bg-gray-700 */
    color: rgb(249 250 251); /* dark:text-gray-100 */
}

.contact-page-tailwind-style .tailwind-form-style input:hover,
.contact-page-tailwind-style .tailwind-form-style textarea:hover {
    border-color: rgb(209 213 219); /* hover:border-gray-300 */
}

.dark .contact-page-tailwind-style .tailwind-form-style input:hover,
.dark .contact-page-tailwind-style .tailwind-form-style textarea:hover {
    border-color: rgb(107 114 128); /* dark:hover:border-gray-500 */
}

.contact-page-tailwind-style .tailwind-form-style input:focus,
.contact-page-tailwind-style .tailwind-form-style textarea:focus {
    border-color: rgb(59 130 246); /* focus:border-blue-500 */
    box-shadow: 0 0 0 2px rgb(59 130 246 / 0.2); /* focus:ring-2 focus:ring-blue-500 */
}

.contact-page-tailwind-style .tailwind-form-style textarea {
    resize: vertical;
    min-height: 6rem; /* approximately 6 rows */
}

/* Grid layout for name/email fields */
.contact-page-tailwind-style .tailwind-form-style .field-group-horizontal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .contact-page-tailwind-style .tailwind-form-style .field-group-horizontal {
        grid-template-columns: 1fr 1fr; /* md:grid-cols-2 */
    }
}

/* Submit button styling */
.contact-page-tailwind-style .tailwind-form-style button[type="submit"] {
    background: linear-gradient(to right, rgb(37 99 235), rgb(147 51 234)); /* bg-gradient-to-r from-blue-600 to-purple-600 */
    color: white;
    padding: 0.75rem 2rem; /* px-8 py-3 */
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 600; /* font-semibold */
    font-size: 1.125rem; /* text-lg */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05); /* shadow-lg */
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    min-width: 200px;
}

.contact-page-tailwind-style .tailwind-form-style button[type="submit"]:hover {
    background: linear-gradient(to right, rgb(29 78 216), rgb(126 34 206)); /* hover:from-blue-700 hover:to-purple-700 */
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* hover:shadow-xl */
    transform: scale(1.05); /* hover:scale-105 */
}

.contact-page-tailwind-style .tailwind-form-style button[type="submit"]:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgb(59 130 246); /* focus:ring-2 focus:ring-blue-500 */
}

/* Button container centering */
.contact-page-tailwind-style .tailwind-form-style .submit-button-container {
    text-align: center;
    padding-top: 1rem;
}

/* Error styling */
.contact-page-tailwind-style .tailwind-form-style .field-error {
    color: rgb(239 68 68); /* text-red-500 */
    font-size: 0.875rem; /* text-sm */
    margin-top: 0.25rem;
}

/* Success message styling */
.contact-page-tailwind-style .tailwind-form-style .form-success {
    background-color: rgb(220 252 231); /* bg-green-100 */
    border: 1px solid rgb(34 197 94); /* border-green-500 */
    color: rgb(21 128 61); /* text-green-700 */
    padding: 1rem;
    border-radius: 0.5rem; /* rounded-lg */
    margin-bottom: 1rem;
}

.dark .contact-page-tailwind-style .tailwind-form-style .form-success {
    background-color: rgb(21 128 61 / 0.2); /* dark green with opacity */
    border-color: rgb(34 197 94); 
    color: rgb(187 247 208); /* dark:text-green-200 */
}

/* Loading state */
.contact-page-tailwind-style .tailwind-form-style .form-submitting button[type="submit"] {
    opacity: 0.7;
    cursor: not-allowed;
}