@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); :root {
--audiofix-red: #e61c2c;
--audiofix-green: #22C55E;
--audiofix-footer: #0A1929;
--audiofix-text: #041f30;
--audiofix-light: #f8fafc;
} * {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--audiofix-text);
background-color: #ffffff;
overflow-x: hidden;
padding-top: 80px; }  .bg-audiofix-red,
header .bg-audiofix-red {
background-color: var(--audiofix-red) !important;
color: white !important;
border: none !important;
}
.bg-audiofix-red:hover,
header .bg-audiofix-red:hover {
background-color: #c41e3a !important;
color: white !important;
} .bg-red-600,
.bg-red-700 {
background-color: var(--audiofix-red) !important;
color: white !important;
border: none !important;
}
.bg-red-600:hover,
.bg-red-700:hover {
background-color: #c41e3a !important;
color: white !important;
} button[class*="bg-red"],
a.bg-red-600,
a.bg-red-700,
.btn[class*="bg-red"],
a[href*="shop"].bg-red-600,
a[href*="shop"].bg-red-700,
section a[href*="shop"][class*="bg-red"] {
background-color: var(--audiofix-red) !important;
color: white !important;
text-decoration: none !important;
border: none !important;
}
button[class*="bg-red"]:hover,
a.bg-red-600:hover,
a.bg-red-700:hover,
.btn[class*="bg-red"]:hover,
a[href*="shop"].bg-red-600:hover,
a[href*="shop"].bg-red-700:hover,
section a[href*="shop"][class*="bg-red"]:hover {
background-color: #c41e3a !important;
color: white !important;
} .product h3,
.product-title,
h2.text-xl,
h3.text-xl,
.woocommerce-loop-product__title {
color: var(--audiofix-text) !important;
background: transparent !important;
}
.product h3:hover,
.product-title:hover,
h2.text-xl:hover,
h3.text-xl:hover,
.woocommerce-loop-product__title:hover {
color: var(--audiofix-red) !important;
background: transparent !important;
} footer {
background-color: var(--audiofix-footer) !important;
}
footer .social-icons a:hover {
color: var(--audiofix-green) !important;
}
footer .nav-links a:hover {
color: var(--audiofix-green) !important;
}
footer i.text-[#22C55E] {
color: var(--audiofix-green) !important;
}
footer a:hover {
color: var(--audiofix-green) !important;
} img {
max-width: 100%;
height: auto;
transition: opacity 0.3s ease;
}
img[data-src] {
opacity: 0;
filter: blur(5px);
transition: opacity 0.3s, filter 0.3s;
}
img[data-src].loaded {
opacity: 1;
filter: blur(0);
} .hero-gradient {
background: linear-gradient(135deg, var(--audiofix-text) 0%, var(--audiofix-footer) 100%);
position: relative;
}
.hero-gradient::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
opacity: 0.1;
} .parallax-container {
overflow: hidden;
position: relative;
}
.parallax-element {
will-change: transform;
transition: transform 0.1s ease-out;
} @keyframes fadeIn {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
0% { transform: translateY(100px); }
100% { transform: translateY(0); }
}
@keyframes parallax {
0% { transform: translateY(50px); }
100% { transform: translateY(0); }
} .animate-fade-in {
animation: fadeIn 0.6s ease-in-out;
}
.animate-slide-up {
animation: slideUp 0.6s ease-out;
}
.animate-parallax {
animation: parallax 1s ease-out;
} .observe-animation {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.observe-animation.visible {
opacity: 1;
transform: translateY(0);
} .btn-primary {
background: linear-gradient(135deg, var(--audiofix-red) 0%, #c41424 100%);
box-shadow: 0 4px 15px rgba(230, 28, 44, 0.3);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(230, 28, 44, 0.4);
}
.btn-secondary {
border: 2px solid var(--audiofix-red);
color: var(--audiofix-red);
background: transparent;
transition: all 0.3s ease;
}
.btn-secondary:hover {
background: var(--audiofix-red);
color: white;
transform: translateY(-2px);
} .card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
} .glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
} .skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
} .scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--audiofix-red), #c41424);
transform-origin: left;
transform: scaleX(0);
z-index: 1000;
transition: transform 0.1s ease;
} ::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--audiofix-red);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #c41424;
} .focus-visible:focus {
outline: 2px solid var(--audiofix-red);
outline-offset: 2px;
} @media (prefers-contrast: high) {
.hero-gradient::before {
display: none;
}
.glass-effect {
background: rgba(255, 255, 255, 0.9);
border: 2px solid var(--audiofix-text);
}
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.parallax-element {
transform: none !important;
}
} @media print {
.fixed,
.sticky {
position: static !important;
}
.no-print {
display: none !important;
}
.hero-gradient {
background: white !important;
color: black !important;
}
} @media (max-width: 768px) {
.hero-gradient {
min-height: 100vh;
min-height: 100svh; }
.container {
padding-left: 1rem;
padding-right: 1rem;
} .btn {
min-height: 48px;
min-width: 48px;
}
} @media (min-width: 2000px) {
.container {
max-width: 1600px;
}
} @media (prefers-color-scheme: dark) {
:root {
--audiofix-text: #ffffff;
--audiofix-light: #1a1a1a;
}
body {
background-color: #0a0a0a;
color: #ffffff;
}
} .preload-image {
position: absolute;
top: -9999px;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
} .perf-mark {
display: none;
} .sw-update-available {
position: fixed;
bottom: 20px;
left: 20px;
background: var(--audiofix-red);
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
z-index: 1000;
transform: translateY(100px);
transition: transform 0.3s ease;
}
.sw-update-available.show {
transform: translateY(0);
}  .hero-bg {
transition: transform 0.5s ease-out;
will-change: transform;
} .menu-item,
.menu-item li {
list-style: none !important;
list-style-type: none !important;
margin: 0;
padding: 0;
}
.menu-item a {
position: relative;
}
.menu-item a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: var(--audiofix-red);
transition: width 0.3s ease;
}
.menu-item a:hover::after {
width: 100%;
} nav ul,
nav li,
.menu,
.menu li,
#menu-primary li,
.primary-menu li,
header ul,
header li,
header nav ul,
header nav li,
.lg\\:flex ul,
.lg\\:flex li {
list-style: none !important;
list-style-type: none !important;
margin: 0 !important;
padding: 0 !important;
} header ul li::before,
header ul li::after {
content: none !important;
} header ul li {
background: none !important;
} .form-input {
@apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-audiofix-red focus:ring focus:ring-red-200 focus:ring-opacity-50 transition-colors duration-300;
}
.form-label {
@apply block text-sm font-medium text-gray-700 mb-1;
}
.form-button {
@apply bg-audiofix-red text-white px-6 py-3 rounded-lg font-semibold hover:bg-red-700 transition-colors duration-300;
} .card {
@apply bg-white rounded-xl shadow-lg overflow-hidden transition-transform duration-300 hover:transform hover:scale-105;
}
.card-image {
@apply w-full h-48 object-cover;
}
.card-content {
@apply p-6;
}
.card-title {
@apply text-2xl font-bold mb-4;
}
.card-text {
@apply text-gray-600 mb-6;
} .widget {
@apply mb-8;
}
.widget-title {
@apply text-xl font-semibold mb-6 text-white;
}
.widget ul {
@apply space-y-3;
}
.widget ul li a {
@apply text-gray-300 hover:text-audiofix-red transition-colors duration-300;
} .product-grid {
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
}
.product-card {
@apply bg-white rounded-xl shadow-lg overflow-hidden transition-transform duration-300 hover:transform hover:scale-105;
}
.product-image {
@apply w-full h-64 object-cover;
}
.product-content {
@apply p-6;
}
.product-title {
@apply text-2xl font-bold mb-4;
}
.product-description {
@apply text-gray-600 mb-6;
}
.product-features {
@apply space-y-2 mb-6;
}
.product-feature {
@apply flex items-center;
}
.product-feature i {
@apply text-audiofix-red mr-2;
} .testimonial-card {
@apply bg-white rounded-xl shadow-lg p-8 relative;
}
.testimonial-quote {
@apply absolute -top-4 -left-4 text-6xl text-audiofix-red opacity-20;
}
.testimonial-content {
@apply text-gray-600 mb-6;
}
.testimonial-author {
@apply flex items-center;
}
.testimonial-avatar {
@apply w-16 h-16 rounded-full object-cover mr-4;
}
.testimonial-info {
@apply flex-1;
}
.testimonial-name {
@apply font-semibold text-lg;
}
.testimonial-role {
@apply text-gray-500;
}
.testimonial-rating {
@apply flex text-audiofix-red;
} @media (max-width: 768px) {
.product-grid {
@apply grid-cols-1;
}
.testimonial-card {
@apply p-6;
}
.testimonial-quote {
@apply text-4xl;
}
} .wp-block-image img {
@apply h-auto max-w-full;
}
.alignfull {
@apply -mx-[50vw] my-8 relative left-1/2 right-1/2 max-w-[100vw] w-[100vw];
}
.alignwide {
@apply -mx-5 my-8 max-w-[calc(100%+40px)] w-[calc(100%+40px)];
} .nf-form-content {
@apply max-w-none;
}
.nf-field-label label {
@apply block text-sm font-medium text-gray-700 mb-1;
}
.nf-field-element input,
.nf-field-element textarea {
@apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-audiofix-red focus:ring focus:ring-red-200 focus:ring-opacity-50 transition-colors duration-300;
}
.nf-field-element button {
@apply bg-audiofix-red text-white px-6 py-3 rounded-lg font-semibold hover:bg-red-700 transition-colors duration-300;
}  .woocommerce-products-header {
display: none;
}
.woocommerce-ordering,
.woocommerce-result-count {
display: none;
} .products {
display: grid !important;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
@media (min-width: 640px) {
.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.products {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
} .product {
background: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: box-shadow 0.3s ease;
list-style: none !important;
}
.product:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.product img {
width: 100%;
height: 12rem;
object-fit: cover;
transition: opacity 0.3s ease;
}
.product img:hover {
opacity: 0.9;
} .product .woocommerce-loop-product__link {
text-decoration: none;
color: inherit;
} .woocommerce-breadcrumb {
font-size: 0.875rem;
color: #6b7280;
text-align: left;
}
.woocommerce-breadcrumb a {
color: #6b7280;
text-decoration: none;
transition: color 0.3s ease;
}
.woocommerce-breadcrumb a:hover {
color: var(--audiofix-red);
} .woocommerce-pagination {
text-align: center;
margin-top: 3rem;
}
.woocommerce-pagination ul {
display: flex;
justify-content: center;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.woocommerce-pagination li {
margin: 0;
}
.woocommerce-pagination a,
.woocommerce-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.75rem;
border-radius: 0.375rem;
font-weight: 500;
background-color: white;
border: 1px solid #e5e7eb;
color: #374151;
text-decoration: none;
transition: all 0.3s ease;
}
.woocommerce-pagination span.current {
background-color: var(--audiofix-red) !important;
color: white !important;
border-color: var(--audiofix-red) !important;
}
.woocommerce-pagination a:hover {
background-color: #f3f4f6;
border-color: var(--audiofix-red);
color: var(--audiofix-red);
}
.woocommerce-pagination .prev,
.woocommerce-pagination .next {
color: #6b7280;
padding: 0.75rem;
}
.woocommerce-pagination .prev:hover,
.woocommerce-pagination .next:hover {
color: var(--audiofix-red);
} .add_to_cart_button {
background-color: var(--audiofix-red) !important;
color: white !important;
border: none !important;
padding: 0.5rem 1rem !important;
border-radius: 0.5rem !important;
font-size: 0.875rem !important;
transition: background-color 0.3s ease !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.25rem !important;
}
.add_to_cart_button:hover {
background-color: #c41424 !important;
color: white !important;
}
.add_to_cart_button:before {
content: "\f217";
font-family: "Font Awesome 6 Free";
font-weight: 900;
} .price {
color: var(--audiofix-red) !important;
font-weight: bold !important;
font-size: 1.25rem !important;
}
.price del {
color: #6b7280 !important;
font-size: 1rem !important;
}
.price ins {
text-decoration: none !important;
} .woocommerce-loop-product__title {
color: var(--audiofix-text) !important;
font-weight: 600 !important;
margin-bottom: 0.5rem !important;
font-size: 1rem !important;
text-decoration: none !important;
}
.woocommerce-loop-product__title:hover {
color: var(--audiofix-red) !important;
} .product-category-badge {
display: inline-block;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: 0.25rem;
margin-bottom: 0.5rem;
}
.product-category-badge.tb {
background-color: #dbeafe;
color: #1e40af;
}
.product-category-badge.atl {
background-color: #dcfce7;
color: #166534;
}
.product-category-badge.eplus {
background-color: #f3e8ff;
color: #7c3aed;
} .catalog-filters {
background: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
margin-bottom: 2rem;
}
.catalog-filters input,
.catalog-filters select {
width: 100%;
padding: 0.5rem 1rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 0.875rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.catalog-filters input:focus,
.catalog-filters select:focus {
outline: none;
border-color: var(--audiofix-red);
box-shadow: 0 0 0 3px rgba(230, 28, 44, 0.1);
} .product-favorite {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #9ca3af;
}
.product-favorite:hover {
color: var(--audiofix-red);
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
} @media (max-width: 768px) {
.catalog-filters {
padding: 1rem;
}
.catalog-filters .grid {
grid-template-columns: 1fr;
gap: 1rem;
}
} .product:focus-within {
box-shadow: 0 0 0 3px rgba(230, 28, 44, 0.3);
}
.add_to_cart_button:focus {
outline: 2px solid var(--audiofix-red);
outline-offset: 2px;
} .woocommerce-page {
overflow-x: hidden;
}
.products {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 640px) {
.products {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.products {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1280px) {
.products {
grid-template-columns: repeat(4, 1fr);
}
}
.product {
width: 100%;
margin: 0;
}
.product img {
width: 100%;
height: 200px;
object-fit: cover;
} .woocommerce-pagination {
margin-top: 2rem;
text-align: center;
}
.woocommerce-pagination ul {
display: flex;
justify-content: center;
gap: 0.5rem;
list-style: none;
padding: 0;
}
.woocommerce-pagination li {
margin: 0;
}
.woocommerce-pagination a,
.woocommerce-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.75rem;
border-radius: 0.375rem;
font-weight: 500;
background-color: white;
border: 1px solid #e5e7eb;
color: #374151;
text-decoration: none;
}
.woocommerce-pagination span.current {
background-color: #dc2626;
color: white;
border-color: #dc2626;
}
.woocommerce-pagination a:hover {
background-color: #f3f4f6;
} .woocommerce-products-header {
margin-bottom: 2rem;
}
.woocommerce-result-count,
.woocommerce-ordering {
margin-bottom: 1.5rem;
} @media (max-width: 639px) {
.products {
padding: 0 1rem;
}
.product {
margin-bottom: 1.5rem;
}
} .max-w-7xl {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.max-w-7xl {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.max-w-7xl {
padding-left: 2rem;
padding-right: 2rem;
}
} .product img.attachment-woocommerce_thumbnail {
width: 100%;
height: 200px;
object-fit: cover;
margin: 0;
} .product .p-4 {
padding: 1rem;
} .product .flex.items-center.justify-between {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
} .woocommerce-cart {
background-color: white;
} .cart-hero {
background: linear-gradient(to right, var(--audiofix-text), var(--audiofix-footer));
} .max-w-7xl {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.max-w-7xl {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.max-w-7xl {
padding-left: 2rem;
padding-right: 2rem;
}
} .cart-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-bottom: 1px solid #e5e7eb;
transition: all 0.3s ease;
}
.cart-item:last-child {
border-bottom: none;
}
.cart-item img {
width: 5rem;
height: 5rem;
object-fit: cover;
border-radius: 0.5rem;
} .quantity-controls {
display: flex;
align-items: center;
gap: 0.75rem;
}
.quantity-minus,
.quantity-plus {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f4f6;
border-radius: 9999px;
transition: all 0.2s ease;
}
.quantity-minus:hover,
.quantity-plus:hover {
background-color: #e5e7eb;
}
.quantity-value {
font-weight: 600;
font-size: 1.125rem;
width: 2rem;
text-align: center;
} .remove-item {
color: #ef4444;
transition: all 0.2s ease;
}
.remove-item:hover {
color: #dc2626;
transform: scale(1.1);
} .cart-summary {
background: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
position: sticky;
top: 6rem;
} .coupon {
margin-bottom: 1.5rem;
}
.coupon input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem 0 0 0.5rem;
transition: all 0.2s ease;
}
.coupon input:focus {
outline: none;
border-color: var(--audiofix-red);
box-shadow: 0 0 0 2px rgba(230, 28, 44, 0.2);
}
.coupon button {
background-color: var(--audiofix-red);
color: white;
padding: 0.5rem 1rem;
border-radius: 0 0.5rem 0.5rem 0;
transition: all 0.2s ease;
}
.coupon button:hover {
background-color: #dc2626;
} .checkout-button {
width: 100%;
background-color: var(--audiofix-red);
color: white;
padding: 1rem;
border-radius: 0.5rem;
font-weight: 600;
text-align: center;
transition: all 0.2s ease;
}
.checkout-button:hover {
background-color: #dc2626;
} .payment-methods {
margin-top: 1.5rem;
text-align: center;
}
.payment-methods i {
font-size: 1.5rem;
margin: 0 0.5rem;
}
.fa-cc-visa { color: #1a1f71; }
.fa-cc-mastercard { color: #eb001b; }
.fa-barcode { color: #4b5563; }
.fa-pix { color: #32bcad; } .cart-item.updating,
.cart-item.removing,
.coupon.loading {
opacity: 0.5;
pointer-events: none;
}
.cart-item.removing {
transform: translateX(100%);
opacity: 0;
} @media (max-width: 1023px) {
.cart-summary {
position: static;
margin-top: 1.5rem;
}
.cart-item {
flex-direction: column;
text-align: center;
}
.cart-item img {
width: 8rem;
height: 8rem;
margin: 0 auto;
}
.quantity-controls {
margin: 1rem 0;
}
}
@media (max-width: 639px) {
.cart-item {
padding: 1rem;
}
.quantity-controls {
flex-direction: row;
justify-content: center;
}
} .woocommerce-checkout .site-main {
margin-top: 0 !important;
padding-top: 0 !important;
}
.audiofix-checkout-container {
position: relative;
z-index: 1;
margin-top: 0 !important;
padding-top: 2rem !important;
} .woocommerce-checkout body {
margin-top: 0 !important;
padding-top: 100px !important; }
.woocommerce-checkout .container {
margin-top: 0 !important;
} .woocommerce-cart body,
.woocommerce-checkout body {
padding-top: 100px !important; }
.woocommerce-cart .audiofix-checkout-container,
.woocommerce-checkout .audiofix-checkout-container {
margin-top: 0 !important;
padding-top: 1rem !important;
} .woocommerce-cart .site-main,
.woocommerce-checkout .site-main {
margin-top: 0 !important;
padding-top: 0 !important;
}
.audiofix-checkout-container {
position: relative;
z-index: 1;
margin-top: 0 !important;
padding-top: 2rem !important;
} .woocommerce-cart .container,
.woocommerce-checkout .container {
margin-top: 0 !important;
} .aplicacoes-section .grid img {
width: 100%;
height: 200px;
object-fit: contain !important; object-position: center;
background-color: #f8f9fa;
padding: 1rem 1rem 0 1rem;
} .aplicacoes-section .bg-white.rounded-lg {
height: auto;
min-height: 500px;
}
.aplicacoes-section .bg-white.rounded-lg img {
height: 200px;
object-fit: contain;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 8px 8px 0 0;
} .aplicacoes-card-1 img,
.aplicacoes-card-2 img,
.aplicacoes-card-3 img {
height: 200px;
object-fit: contain;
object-position: center;
background-color: #f8f9fa;
padding: 0.5rem;
} .woocommerce-page .site-main {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.woocommerce-page .site-main > div {
flex: 1;
} .woocommerce-page footer {
width: 100%;
margin-top: auto;
} .woocommerce-page .max-w-7xl {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.woocommerce-page .max-w-7xl {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.woocommerce-page .max-w-7xl {
padding-left: 2rem;
padding-right: 2rem;
}
} .woocommerce-page .products {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
width: 100%;
}
@media (min-width: 640px) {
.woocommerce-page .products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.woocommerce-page .products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.woocommerce-page .products {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
} .audiofix-red {
color: #e61c2c;
}
.text-audiofix-red {
color: #e61c2c !important;
}
.bg-audiofix-red {
background-color: #e61c2c;
}
.hover\:bg-audiofix-red:hover {
background-color: #c41424;
}
.text-audiofix-text {
color: #041f30;
} .aspect-w-1 {
position: relative;
padding-bottom: 100%;
}
.aspect-w-1 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
} .page-numbers {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: center;
list-style: none;
padding: 0;
}
.page-numbers li {
margin: 0;
}
.page-numbers a,
.page-numbers span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0.5rem;
border-radius: 0.5rem;
border: 1px solid #e5e7eb;
color: #374151;
text-decoration: none;
transition: all 0.3s;
}
.page-numbers a:hover {
border-color: #e61c2c;
color: #e61c2c;
}
.page-numbers .current {
background-color: #e61c2c;
color: white;
border-color: #e61c2c;
} .focus\:ring-audiofix-red:focus {
--tw-ring-color: #e61c2c;
--tw-ring-opacity: 0.5;
--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(3px + 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);
} .prose {
max-width: 65ch;
color: #374151;
}
.prose h2 {
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
color: #041f30;
margin-top: 2.5rem;
margin-bottom: 1.25rem;
}
.prose h3 {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
color: #041f30;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
line-height: 1.75;
}
.prose ul {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
padding-left: 1.625rem;
list-style-type: disc;
}
.prose ol {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
padding-left: 1.625rem;
list-style-type: decimal;
}
.prose li {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding-left: 0.375rem;
}
.prose strong {
font-weight: 600;
color: #041f30;
}
.prose a {
color: #e61c2c;
text-decoration: underline;
font-weight: 500;
transition: color 0.2s;
}
.prose a:hover {
color: #c41424;
}
.prose blockquote {
margin-top: 2rem;
margin-bottom: 2rem;
padding-left: 1.5rem;
border-left: 4px solid #e61c2c;
font-style: italic;
color: #4b5563;
}
.prose img {
margin-top: 2rem;
margin-bottom: 2rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.prose table {
width: 100%;
margin-top: 2rem;
margin-bottom: 2rem;
border-collapse: collapse;
}
.prose table th {
padding: 0.75rem 1rem;
background-color: #f3f4f6;
font-weight: 600;
text-align: left;
color: #041f30;
border-bottom: 2px solid #e5e7eb;
}
.prose table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid #e5e7eb;
}
.prose table tr:hover {
background-color: #f9fafb;
} #sob-medida {
position: relative;
overflow: hidden;
}
#sob-medida .grid.grid-cols-1.lg\\:grid-cols-2 {
min-height: 600px;
}
#sob-medida .bg-white\/10 {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
#sob-medida .bg-white\/10:hover {
background-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
#sob-medida .fas {
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
} #sob-medida .fas {
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
color: var(--audiofix-red) !important;
}
#sob-medida .fa-cogs:before { content: "\f085"; }
#sob-medida .fa-bolt:before { content: "\f0e7"; }
#sob-medida .fa-tools:before { content: "\f7d9"; }
#sob-medida .fa-shield-alt:before { content: "\f3ed"; } @media (max-width: 1023px) {
#sob-medida .order-1 {
order: 1;
}
#sob-medida .order-2 {
order: 2;
}
#sob-medida .grid.grid-cols-1.sm\\:grid-cols-2 {
grid-template-columns: 1fr;
gap: 1rem;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
#sob-medida .grid.grid-cols-1.sm\\:grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
} #sob-medida .bg-gray-900 {
background-color: #111827 !important;
}
#sob-medida .text-white {
color: #ffffff !important;
}
#sob-medida .text-gray-300 {
color: #d1d5db !important;
} #sob-medida .bg-white\/10 {
background-color: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
#sob-medida .bg-white\/10:hover {
background-color: rgba(255, 255, 255, 0.2) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
} #sob-medida .text-audiofix-red {
color: var(--audiofix-red) !important;
} #sob-medida .bg-white\/10 h3 {
color: #ffffff !important;
}
#sob-medida .bg-white\/10 .text-xl {
color: #ffffff !important;
} #sob-medida .border-2.border-white {
color: #ffffff !important;
border-color: #ffffff !important;
}
#sob-medida .border-2.border-white:hover {
background-color: #ffffff !important;
color: var(--audiofix-text) !important;
border-color: #ffffff !important;
} #sob-medida .border-2.border-white:hover i {
color: var(--audiofix-text) !important;
} .shop-filters {
background: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
margin-bottom: 2rem;
}
.shop-filters .grid {
display: grid;
gap: 1rem;
}
@media (min-width: 768px) {
.shop-filters .grid {
grid-template-columns: repeat(4, 1fr);
align-items: end;
}
}
.shop-filters label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
margin-bottom: 0.5rem;
}
.shop-filters input,
.shop-filters select {
width: 100%;
padding: 0.5rem 1rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 0.875rem;
transition: all 0.3s ease;
}
.shop-filters input:focus,
.shop-filters select:focus {
outline: none;
border-color: var(--audiofix-red);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.shop-filters .filter-buttons {
display: flex;
gap: 0.5rem;
align-items: end;
}
.shop-filters .filter-buttons button,
.shop-filters .filter-buttons a {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.shop-filters .filter-buttons button {
background-color: var(--audiofix-red);
color: white;
border: 1px solid var(--audiofix-red);
}
.shop-filters .filter-buttons button:hover {
background-color: #dc2626;
border-color: #dc2626;
}
.shop-filters .filter-buttons a {
background-color: transparent;
color: var(--audiofix-red);
border: 1px solid var(--audiofix-red);
}
.shop-filters .filter-buttons a:hover {
background-color: #fef2f2;
} .product-item {
background: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
}
.product-item:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.product-item img {
width: 100%;
height: 12rem;
object-fit: cover;
transition: opacity 0.3s ease;
}
.product-item img:hover {
opacity: 0.9;
}
.product-item .p-4 {
padding: 1rem;
}
.product-item .product-title {
font-weight: 600;
color: var(--audiofix-text);
margin-bottom: 0.5rem;
}
.product-item .product-title a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.product-item .product-title a:hover {
color: var(--audiofix-red);
} @media (max-width: 767px) {
.shop-filters .grid {
grid-template-columns: 1fr;
}
.shop-filters .filter-buttons {
justify-content: center;
margin-top: 1rem;
}
} .no-products-message {
text-align: center;
padding: 3rem 1rem;
color: #6b7280;
}
.no-products-message p {
font-size: 1.125rem;
margin-bottom: 1rem;
}
.no-products-message a {
display: inline-block;
background-color: var(--audiofix-red);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 500;
transition: background-color 0.3s ease;
}
.no-products-message a:hover {
background-color: #dc2626;
}   body.single-product .woocommerce-notices-wrapper,
.single-product .woocommerce-notices-wrapper,
.woocommerce-page .woocommerce-notices-wrapper {
display: none !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
} body.single-product .product,
.single-product .product,
.woocommerce.single-product .product {
background: #f9fafb !important;
padding: 16px 0 !important;
margin: 0 !important;
} body.single-product .product > .grid,
.single-product .product > .grid,
.woocommerce.single-product .product > .grid,
body.single-product .product .grid-cols-1,
.single-product .product .grid-cols-1 {
display: block !important;
padding: 0 16px !important;
max-width: 100% !important;
margin: 0 auto !important;
}
body.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery {
margin-bottom: 24px !important;
}
body.single-product .summary,
.single-product .summary {
margin-bottom: 24px !important;
}
@media (min-width: 1024px) {
body.single-product .product,
.single-product .product,
.woocommerce.single-product .product {
padding: 32px 0 !important;
}
body.single-product .product > .grid,
.single-product .product > .grid,
.woocommerce.single-product .product > .grid,
body.single-product .product .grid-cols-1,
.single-product .product .grid-cols-1 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 48px !important;
max-width: 1200px !important;
padding: 0 32px !important;
}
body.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery {
margin-bottom: 0 !important;
}
body.single-product .summary,
.single-product .summary {
margin-bottom: 0 !important;
}
} body.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery,
.woocommerce.single-product .woocommerce-product-gallery {
margin: 0 !important;
padding: 0 !important;
background: white !important;
border-radius: 8px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
overflow: hidden !important;
} body.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image img,
.woocommerce.single-product .woocommerce-product-gallery__image img,
body.single-product .flex-viewport img,
.single-product .flex-viewport img {
width: 100% !important;
height: 384px !important;
object-fit: cover !important;
border-radius: 8px !important;
} body.single-product .summary,
.single-product .summary,
.woocommerce.single-product .summary {
background: white !important;
border-radius: 8px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
padding: 32px !important;
height: fit-content !important;
} body.single-product .product_title,
.single-product .product_title,
.woocommerce.single-product .product_title,
body.single-product h1.entry-title,
.single-product h1.entry-title {
font-size: 2rem !important;
font-weight: 700 !important;
color: #041f30 !important;
margin-bottom: 16px !important;
line-height: 1.2 !important;
} body.single-product .price,
.single-product .price,
.woocommerce.single-product .price {
font-size: 2rem;
font-weight: 600;
color: var(--audiofix-text);
margin-bottom: 0.5rem !important;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
body.single-product .price .amount,
.single-product .price .amount,
.woocommerce.single-product .price .amount {
color: var(--audiofix-text);
font-weight: 700;
}
body.single-product .price + p {
margin-top: 0 !important;
color: var(--audiofix-text);
font-size: 0.875rem;
} body.single-product .single_add_to_cart_button,
.single-product .single_add_to_cart_button,
.woocommerce.single-product .single_add_to_cart_button,
body.single-product button[type="submit"],
.single-product button[type="submit"] {
width: 100% !important;
background: #e61c2c !important;
color: white !important;
padding: 12px 24px !important;
border-radius: 8px !important;
font-weight: 500 !important;
font-size: 16px !important;
border: none !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
text-align: center !important;
margin-bottom: 12px !important;
}
body.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:hover,
.woocommerce.single-product .single_add_to_cart_button:hover {
background: #c41e3a !important;
transform: translateY(-1px) !important;
} body.single-product .quantity .qty,
.single-product .quantity .qty,
.woocommerce.single-product .quantity .qty {
width: 60px !important;
height: 32px !important;
text-align: center !important;
border: 1px solid #d1d5db !important;
border-radius: 4px !important;
font-size: 14px !important;
background: white !important;
margin: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
} body.single-product .qty-controls-custom,
.single-product .qty-controls-custom {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 12px !important;
}
body.single-product .qty-controls-custom button,
.single-product .qty-controls-custom button {
width: 32px !important;
height: 32px !important;
border: 1px solid #d1d5db !important;
border-radius: 4px !important;
background: white !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
transition: all 0.3s ease !important;
}
body.single-product .qty-controls-custom button:hover,
.single-product .qty-controls-custom button:hover {
background: #f3f4f6 !important;
border-color: #9ca3af !important;
} body.single-product .whatsapp-button,
.single-product .whatsapp-button,
.woocommerce.single-product .whatsapp-button {
display: block !important;
width: 100% !important;
background: #22c55e !important;
color: white !important;
padding: 12px 24px !important;
border-radius: 8px !important;
font-weight: 500 !important;
font-size: 16px !important;
text-align: center !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
margin-bottom: 32px !important;
}
body.single-product .whatsapp-button:hover,
.single-product .whatsapp-button:hover,
.woocommerce.single-product .whatsapp-button:hover {
background: #16a34a !important;
color: white !important;
} body.single-product .product-benefits,
.single-product .product-benefits,
.woocommerce.single-product .product-benefits {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
padding-top: 24px !important;
border-top: 1px solid #e5e7eb !important;
margin-top: 24px !important;
}
body.single-product .benefit-item,
.single-product .benefit-item,
.woocommerce.single-product .benefit-item {
display: flex !important;
align-items: center !important;
font-size: 0.875rem !important;
color: #374151 !important;
}
body.single-product .benefit-item i,
.single-product .benefit-item i,
.woocommerce.single-product .benefit-item i {
color: #e61c2c !important;
margin-right: 8px !important;
font-size: 16px !important;
} body.single-product .woocommerce-tabs,
.single-product .woocommerce-tabs,
.woocommerce.single-product .woocommerce-tabs {
margin-top: 64px !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 16px !important;
}
body.single-product .woocommerce-tabs .wc-tabs-wrapper,
.single-product .woocommerce-tabs .wc-tabs-wrapper,
.woocommerce.single-product .woocommerce-tabs .wc-tabs-wrapper {
max-width: 1200px !important;
margin: 0 auto !important;
}
body.single-product .woocommerce-tabs ul.tabs,
.single-product .woocommerce-tabs ul.tabs,
.woocommerce.single-product .woocommerce-tabs ul.tabs {
display: flex !important;
border-bottom: 1px solid #e5e7eb !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.single-product .woocommerce-tabs .wc-tab,
.single-product .woocommerce-tabs .wc-tab,
.woocommerce.single-product .woocommerce-tabs .wc-tab {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 32px 0 !important;
}
body.single-product .woocommerce-tabs ul.tabs li,
.single-product .woocommerce-tabs ul.tabs li,
.woocommerce.single-product .woocommerce-tabs ul.tabs li {
background: transparent !important;
border: none !important;
margin: 0 32px 0 0 !important;
padding: 0 !important;
position: relative !important;
}
body.single-product .woocommerce-tabs ul.tabs li a,
.single-product .woocommerce-tabs ul.tabs li a,
.woocommerce.single-product .woocommerce-tabs ul.tabs li a {
display: block !important;
padding: 16px 0 !important;
color: #6b7280 !important;
font-weight: 500 !important;
font-size: 0.875rem !important;
text-decoration: none !important;
border-bottom: 2px solid transparent !important;
transition: all 0.3s ease !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li.active a,
.woocommerce.single-product .woocommerce-tabs ul.tabs li.active a {
color: #e61c2c !important;
border-bottom-color: #e61c2c !important;
}
body.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-tabs .panel,
.woocommerce.single-product .woocommerce-tabs .panel {
background: white !important;
border-radius: 8px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
padding: 32px !important;
margin-top: 0 !important;
} body.single-product .up-sells,
body.single-product .cross-sells,
body.single-product .related,
.single-product .up-sells,
.single-product .cross-sells,
.single-product .related {
margin-top: 64px !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 16px !important;
}
body.single-product .up-sells h2,
body.single-product .cross-sells h2,
body.single-product .related h2,
.single-product .up-sells h2,
.single-product .cross-sells h2,
.single-product .related h2 {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: #041f30 !important;
text-align: left !important;
margin-bottom: 24px !important;
margin-top: 0 !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
} @media (max-width: 768px) {
body.single-product .product-benefits,
.single-product .product-benefits {
grid-template-columns: 1fr !important;
}
}  body.single-product .up-sells ul.products,
body.single-product .cross-sells ul.products,
body.single-product .related ul.products,
.single-product .up-sells ul.products,
.single-product .cross-sells ul.products,
.single-product .related ul.products,
.single-product ul.products.columns-4,
ul.products.columns-4 {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
body.single-product .up-sells li.product,
body.single-product .cross-sells li.product,
body.single-product .related li.product,
.single-product .up-sells li.product,
.single-product .cross-sells li.product,
.single-product .related li.product,
.single-product ul.products.columns-4 li.product,
ul.products.columns-4 li.product {
background: white !important;
border-radius: 8px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
padding: 16px !important;
text-align: center !important;
transition: all 0.3s ease !important;
width: 100% !important;
margin: 0 !important;
list-style: none !important;
}
body.single-product .up-sells li.product:hover,
body.single-product .cross-sells li.product:hover,
body.single-product .related li.product:hover,
.single-product .up-sells li.product:hover,
.single-product .cross-sells li.product:hover,
.single-product .related li.product:hover,
.single-product ul.products.columns-4 li.product:hover,
ul.products.columns-4 li.product:hover {
transform: translateY(-4px) !important;
box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1) !important;
}
body.single-product .up-sells li.product img,
body.single-product .cross-sells li.product img,
body.single-product .related li.product img,
.single-product .up-sells li.product img,
.single-product .cross-sells li.product img,
.single-product .related li.product img,
.single-product ul.products.columns-4 li.product img,
ul.products.columns-4 li.product img {
width: 100% !important;
height: 200px !important;
object-fit: cover !important;
border-radius: 4px !important;
margin-bottom: 12px !important;
}
body.single-product .up-sells li.product .woocommerce-loop-product__title,
body.single-product .cross-sells li.product .woocommerce-loop-product__title,
body.single-product .related li.product .woocommerce-loop-product__title,
.single-product .up-sells li.product .woocommerce-loop-product__title,
.single-product .cross-sells li.product .woocommerce-loop-product__title,
.single-product .related li.product .woocommerce-loop-product__title,
.single-product ul.products.columns-4 li.product .woocommerce-loop-product__title,
ul.products.columns-4 li.product .woocommerce-loop-product__title {
font-size: 1rem !important;
font-weight: 600 !important;
color: #041f30 !important;
margin-bottom: 8px !important;
line-height: 1.3 !important;
}
body.single-product .up-sells li.product .price,
body.single-product .cross-sells li.product .price,
body.single-product .related li.product .price,
.single-product .up-sells li.product .price,
.single-product .cross-sells li.product .price,
.single-product .related li.product .price,
.single-product ul.products.columns-4 li.product .price,
ul.products.columns-4 li.product .price {
font-size: 1.25rem !important;
font-weight: 700 !important;
color: #e61c2c !important;
margin-bottom: 12px !important;
}
body.single-product .up-sells li.product .button,
body.single-product .cross-sells li.product .button,
body.single-product .related li.product .button,
.single-product .up-sells li.product .button,
.single-product .cross-sells li.product .button,
.single-product .related li.product .button,
.single-product ul.products.columns-4 li.product .button,
ul.products.columns-4 li.product .button {
background: #e61c2c !important;
color: white !important;
border: none !important;
padding: 8px 16px !important;
border-radius: 4px !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
width: 100% !important;
transition: all 0.3s ease !important;
}
body.single-product .up-sells li.product .button:hover,
body.single-product .cross-sells li.product .button:hover,
body.single-product .related li.product .button:hover,
.single-product .up-sells li.product .button:hover,
.single-product .cross-sells li.product .button:hover,
.single-product .related li.product .button:hover,
.single-product ul.products.columns-4 li.product .button:hover,
ul.products.columns-4 li.product .button:hover {
background: #c41e3a !important;
color: white !important;
} body.single-product .woocommerce-tabs,
body.single-product .up-sells,
body.single-product .cross-sells,
body.single-product .related,
.single-product .woocommerce-tabs,
.single-product .up-sells,
.single-product .cross-sells,
.single-product .related {
grid-column: 1 / -1 !important;
width: 100% !important;
max-width: 100% !important;
} body.single-product .up-sells h2 + ul.products,
body.single-product .cross-sells h2 + ul.products,
body.single-product .related h2 + ul.products,
.single-product .up-sells h2 + ul.products,
.single-product .cross-sells h2 + ul.products,
.single-product .related h2 + ul.products {
flex: 1 !important;
width: 100% !important;
max-width: 100% !important;
} body.single-product .up-sells,
body.single-product .cross-sells,
body.single-product .related,
.single-product .up-sells,
.single-product .cross-sells,
.single-product .related {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
} @media (max-width: 1023px) {
body.single-product .up-sells ul.products,
body.single-product .cross-sells ul.products,
body.single-product .related ul.products,
.single-product .up-sells ul.products,
.single-product .cross-sells ul.products,
.single-product .related ul.products,
.single-product ul.products.columns-4,
ul.products.columns-4 {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
body.single-product .up-sells ul.products,
body.single-product .cross-sells ul.products,
body.single-product .related ul.products,
.single-product .up-sells ul.products,
.single-product .cross-sells ul.products,
.single-product .related ul.products,
.single-product ul.products.columns-4,
ul.products.columns-4 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
}
@media (min-width: 1024px) {
body.single-product .up-sells ul.products,
body.single-product .cross-sells ul.products,
body.single-product .related ul.products,
.single-product .up-sells ul.products,
.single-product .cross-sells ul.products,
.single-product .related ul.products,
.single-product ul.products.columns-4,
ul.products.columns-4 {
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
}
} .quantity {
display: block !important;
width: 100% !important;
margin-bottom: 1rem !important;
}
.quantity .qty-controls-custom {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: fit-content !important;
border: 1px solid #d1d5db !important;
border-radius: 4px !important;
overflow: hidden !important;
}
.quantity .qty-controls-custom button {
background: none !important;
border: none !important;
padding: 0.5rem 1rem !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #374151 !important;
transition: all 0.2s !important;
}
.quantity .qty-controls-custom button:hover {
color: var(--audiofix-red) !important;
background-color: #f3f4f6 !important;
}
.quantity .qty-controls-custom input[type="number"] {
width: 50px !important;
text-align: center !important;
border: none !important;
padding: 0.5rem 0 !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
margin: 0 !important;
font-size: 0.875rem !important;
background: transparent !important;
}
.quantity .qty-controls-custom input[type="number"]::-webkit-outer-spin-button,
.quantity .qty-controls-custom input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
} .quantity .plus,
.quantity .minus,
.quantity .quantity-button,
.quantity .quantity-controls {
display: none !important;
} body.single-product .woocommerce-tabs,
body.single-product .related.products,
body.single-product .upsells.products,
body.single-product .cross-sells.products,
.single-product .woocommerce-tabs,
.single-product .related.products,
.single-product .upsells.products,
.single-product .cross-sells.products {
width: 100% !important;
padding-left: 16px !important;
padding-right: 16px !important;
} @media (min-width: 1024px) {
body.single-product .woocommerce-tabs,
body.single-product .related.products,
body.single-product .upsells.products,
body.single-product .cross-sells.products,
.single-product .woocommerce-tabs,
.single-product .related.products,
.single-product .upsells.products,
.single-product .cross-sells.products {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
} body.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-tabs .panel,
.woocommerce.single-product .woocommerce-tabs .panel {
width: 100% !important;
margin: 0 !important;
background: white !important;
border-radius: 8px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
padding: 24px !important;
margin-top: 16px !important;
}
@media (min-width: 1024px) {
body.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-tabs .panel,
.woocommerce.single-product .woocommerce-tabs .panel {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 32px !important;
}
}  .mobile-menu-btn {
display: none;
background: transparent;
border: none;
padding: 8px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.mobile-menu-btn:hover {
background-color: #f3f4f6;
} .mobile-menu {
display: none;
width: 100%;
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
margin-top: 12px;
padding: 16px;
position: relative;
z-index: 999;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.mobile-menu.open {
display: block !important;
opacity: 1 !important;
transform: translateY(0) !important;
visibility: visible !important;
} .mobile-menu a {
display: block;
padding: 12px 16px;
color: #374151;
text-decoration: none;
border-radius: 8px;
transition: all 0.2s ease;
font-weight: 500;
width: 100%;
margin-bottom: 4px;
font-size: 16px;
}
.mobile-menu a:hover {
background-color: #f3f4f6;
color: #e61c2c;
} .mobile-menu .bg-audiofix-red {
background-color: #e61c2c !important;
color: white !important;
text-align: center;
margin-top: 8px;
}
.mobile-menu .bg-audiofix-red:hover {
background-color: #d11525 !important;
color: white !important;
} @media (max-width: 1023px) {
.mobile-menu-btn {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.hidden.lg\\:flex,
.lg\\:flex {
display: none !important;
}
} @media (max-width: 1023px) {
header nav {
padding: 12px 16px !important;
}
header .flex.items-center.justify-between {
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
} @media (max-width: 1023px) {
[data-mobile-menu-toggle] {
padding: 8px !important;
border-radius: 8px !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
}
[data-mobile-menu-toggle]:hover {
background-color: #f3f4f6 !important;
}
[data-mobile-menu-toggle] .fas {
font-size: 20px !important;
color: #374151 !important;
transition: transform 0.3s ease !important;
}
[data-mobile-menu-toggle][aria-expanded="true"] .fas {
transform: rotate(90deg) !important;
}
} @media screen and (max-width: 1023px) {
header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 50 !important;
background: white !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
header nav {
max-width: 100% !important;
padding: 12px 16px !important;
}
header .flex {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
}
} .hamburger-icon {
width: 24px;
height: 18px;
position: relative;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
}
.hamburger-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #082130;
border-radius: 2px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.hamburger-icon span:nth-child(1) {
top: 0px;
}
.hamburger-icon span:nth-child(2) {
top: 7px;
}
.hamburger-icon span:nth-child(3) {
top: 14px;
} .mobile-menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
top: 7px;
transform: rotate(135deg);
}
.mobile-menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
opacity: 0;
left: -60px;
}
.mobile-menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
top: 7px;
transform: rotate(-135deg);
} .mobile-menu-btn {
display: none !important;
background: transparent !important;
border: none !important;
padding: 8px !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
}
.mobile-menu-btn:hover {
background-color: #f3f4f6 !important;
} @media (max-width: 1023px) {
.mobile-menu-btn {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}  .desktop-menu,
[data-desktop-menu] {
display: none !important;
}
@media (min-width: 1024px) {
.desktop-menu,
[data-desktop-menu] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: nowrap !important;
visibility: visible !important;
opacity: 1 !important;
} .hidden.lg\:flex {
display: flex !important;
} header .desktop-menu,
header [data-desktop-menu] {
display: flex !important;
align-items: center !important;
gap: 32px !important;
visibility: visible !important;
opacity: 1 !important;
}
} @media (max-width: 1023px) {
.mobile-menu-btn {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 1000 !important;
}
.desktop-menu {
display: none !important;
}
}
@media (min-width: 1024px) {
.mobile-menu,
.mobile-menu-btn {
display: none !important;
} .desktop-menu {
display: flex !important;
align-items: center !important;
gap: 32px !important;
}
} @media (min-width: 1024px) {
header .flex.items-center.justify-between {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
}
header nav {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
} header .desktop-menu {
display: flex !important;
align-items: center !important;
flex-grow: 1 !important;
justify-content: flex-end !important;
gap: 32px !important;
} header .desktop-menu > div:first-child {
margin-right: 32px !important;
} header .desktop-menu ul {
display: flex !important;
align-items: center !important;
gap: 24px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
header .desktop-menu ul li {
margin: 0 !important;
padding: 0 !important;
}
header .desktop-menu ul li a {
display: block !important;
color: #374151 !important;
font-weight: 500 !important;
font-size: 16px !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
white-space: nowrap !important;
}
header .desktop-menu ul li a:hover {
color: #e61c2c !important;
} header .desktop-menu a[href*="wa.me"] {
background-color: #e61c2c !important;
color: white !important;
padding: 8px 24px !important;
border-radius: 8px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: background-color 0.3s ease !important;
white-space: nowrap !important;
}
header .desktop-menu a[href*="wa.me"]:hover {
background-color: #b91c1c !important;
}
} @media (max-width: 1023px) { .bg-gray-100 nav {
font-size: 14px !important;
line-height: 1.4 !important;
}
.bg-gray-100 nav a,
.bg-gray-100 nav span {
word-break: break-word !important;
hyphens: auto !important;
} .text-4xl.md\:text-5xl {
font-size: 2rem !important;
line-height: 1.2 !important;
}
.text-xl.md\:text-2xl {
font-size: 1.125rem !important;
line-height: 1.4 !important;
} h1, h2, h3 {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
} .max-w-7xl {
padding-left: 16px !important;
padding-right: 16px !important;
}
} .page-minha-conta {
margin-top: 0 !important;
padding-top: 80px !important;
}
@media (min-width: 768px) {
.page-minha-conta {
padding-top: 96px !important;
}
}
@media (max-width: 768px) {
.page-minha-conta .text-4xl {
font-size: 1.875rem !important;
line-height: 1.2 !important;
}
.page-minha-conta .text-xl {
font-size: 1rem !important;
line-height: 1.4 !important;
}
.page-minha-conta .px-4 {
padding-left: 12px !important;
padding-right: 12px !important;
} .page-minha-conta .bg-gray-100 {
font-size: 14px !important;
padding: 8px 0 !important;
}
.page-minha-conta .bg-gray-100 nav {
overflow-wrap: break-word !important;
word-wrap: break-word !important;
}
} @media (max-width: 640px) { .text-4xl {
font-size: 1.75rem !important;
}
.text-xl {
font-size: 1rem !important;
} .py-16 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.py-20 {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
} .max-w-7xl {
max-width: 100% !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
} header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 50 !important;
background: white !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
} @media screen and (min-width: 1024px) {
.desktop-menu,
[data-desktop-menu],
header .desktop-menu,
header [data-desktop-menu] {
display: flex !important;
align-items: center !important;
gap: 32px !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 10 !important;
} .mobile-menu-btn,
.mobile-menu,
[data-mobile-menu-toggle],
[data-mobile-menu] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
} body {
padding-top: 0 !important;
} main {
margin-top: 80px !important;
}
@media (min-width: 768px) {
main {
margin-top: 96px !important;
}
}  .tab-content {
animation: fadeInUp 0.4s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .tab-button {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.tab-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.tab-button:hover::before {
left: 100%;
}
.tab-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tab-button.active {
background-color: var(--audiofix-red) !important;
color: white !important;
} .bg-blue-50:hover,
.bg-green-50:hover,
.bg-orange-50:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} .border.rounded-lg {
transition: all 0.3s ease;
}
.border.rounded-lg:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
} .form-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
transition: all 0.3s ease;
}
.form-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(230, 28, 44, 0.1);
} @media (max-width: 1023px) {
.sticky {
position: static !important;
}
.lg\:col-span-1,
.lg\:col-span-3 {
grid-column: span 1 !important;
}
.grid.lg\:grid-cols-4 {
grid-template-columns: 1fr !important;
gap: 2rem;
}
.tab-button {
padding: 1rem;
font-size: 0.9rem;
}
} @media (max-width: 639px) {
.grid.md\:grid-cols-3 {
grid-template-columns: 1fr !important;
gap: 1rem;
}
.grid.md\:grid-cols-2 {
grid-template-columns: 1fr !important;
}
.text-4xl.md\:text-5xl {
font-size: 2rem !important;
}
.text-xl.md\:text-2xl {
font-size: 1.25rem !important;
}
.p-8 {
padding: 1.5rem !important;
}
.space-y-6 > * + * {
margin-top: 1rem !important;
}
} .loading {
opacity: 0.6;
pointer-events: none;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #f3f3f3;
border-top: 2px solid var(--audiofix-red);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} .status-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.status-badge.processing {
background-color: #dbeafe;
color: #1e40af;
}
.status-badge.completed {
background-color: #dcfce7;
color: #166534;
}
.status-badge.on-hold {
background-color: #fef3c7;
color: #92400e;
}
.status-badge.cancelled {
background-color: #fee2e2;
color: #991b1b;
} .tab-button:focus,
input:focus,
button:focus {
outline: 2px solid var(--audiofix-red);
outline-offset: 2px;
} .page-minha-conta {
animation: pageEnter 0.6s ease-out;
}
@keyframes pageEnter {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @media (max-width: 1023px) {
.overflow-x-auto {
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--audiofix-red) transparent;
}
.overflow-x-auto::-webkit-scrollbar {
height: 6px;
}
.overflow-x-auto::-webkit-scrollbar-track {
background: transparent;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
background-color: var(--audiofix-red);
border-radius: 3px;
}
} .woocommerce-account .woocommerce-MyAccount-content {
width: 100%;
} .woocommerce-order-details {
margin-bottom: 2rem;
}
.woocommerce-order-details h2 {
color: var(--audiofix-text) !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
margin-bottom: 1rem !important;
border-bottom: 2px solid #e5e7eb;
padding-bottom: 0.5rem;
}
.woocommerce-order-details__title {
color: var(--audiofix-text) !important;
font-size: 1.25rem !important;
font-weight: 600 !important;
margin-bottom: 1rem !important;
} .woocommerce-table {
width: 100% !important;
border-collapse: collapse !important;
margin-bottom: 1.5rem !important;
background: white !important;
border-radius: 0.5rem !important;
overflow: hidden !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.woocommerce-table th {
background: #f8fafc !important;
color: var(--audiofix-text) !important;
font-weight: 600 !important;
padding: 1rem !important;
text-align: left !important;
border-bottom: 1px solid #e5e7eb !important;
}
.woocommerce-table td {
padding: 1rem !important;
border-bottom: 1px solid #f1f5f9 !important;
color: #374151 !important;
}
.woocommerce-table tr:last-child td {
border-bottom: none !important;
}
.woocommerce-table tr:hover {
background: #f8fafc !important;
} .woocommerce-table tfoot th,
.woocommerce-table tfoot td {
background: #f8fafc !important;
font-weight: 600 !important;
color: var(--audiofix-text) !important;
}
.woocommerce-table tfoot .order-total th,
.woocommerce-table tfoot .order-total td {
background: var(--audiofix-red) !important;
color: white !important;
font-size: 1.125rem !important;
} .woocommerce-customer-details {
margin-top: 2rem;
}
.woocommerce-customer-details h2 {
color: var(--audiofix-text) !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
margin-bottom: 1rem !important;
border-bottom: 2px solid #e5e7eb;
padding-bottom: 0.5rem;
}
.woocommerce-customer-details .col-1,
.woocommerce-customer-details .col-2 {
background: white !important;
padding: 1.5rem !important;
border-radius: 0.5rem !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
margin-bottom: 1rem !important;
}
.woocommerce-customer-details h3 {
color: var(--audiofix-text) !important;
font-size: 1.125rem !important;
font-weight: 600 !important;
margin-bottom: 0.75rem !important;
}
.woocommerce-customer-details address {
color: #6b7280 !important;
line-height: 1.6 !important;
font-style: normal !important;
} .woocommerce-order-status {
display: inline-block !important;
padding: 0.5rem 1rem !important;
border-radius: 0.375rem !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
margin-bottom: 1rem !important;
}
.woocommerce-order-status.status-processing {
background: #dbeafe !important;
color: #1e40af !important;
}
.woocommerce-order-status.status-completed {
background: #dcfce7 !important;
color: #166534 !important;
}
.woocommerce-order-status.status-on-hold {
background: #fef3c7 !important;
color: #92400e !important;
}
.woocommerce-order-status.status-cancelled {
background: #fee2e2 !important;
color: #dc2626 !important;
} .woocommerce-EditAccountForm fieldset,
.woocommerce-address-fields fieldset {
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row {
margin-bottom: 1.5rem !important;
}
.woocommerce-EditAccountForm label,
.woocommerce-address-fields label {
display: block !important;
margin-bottom: 0.5rem !important;
font-weight: 600 !important;
color: var(--audiofix-text) !important;
}
.woocommerce-EditAccountForm input,
.woocommerce-EditAccountForm select,
.woocommerce-address-fields input,
.woocommerce-address-fields select {
width: 100% !important;
padding: 0.75rem !important;
border: 1px solid #d1d5db !important;
border-radius: 0.375rem !important;
font-size: 1rem !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.woocommerce-EditAccountForm input:focus,
.woocommerce-EditAccountForm select:focus,
.woocommerce-address-fields input:focus,
.woocommerce-address-fields select:focus {
outline: none !important;
border-color: var(--audiofix-red) !important;
box-shadow: 0 0 0 3px rgba(230, 28, 44, 0.1) !important;
} .woocommerce-EditAccountForm .button,
.woocommerce-address-fields .button,
.woocommerce-Button {
background: var(--audiofix-red) !important;
color: white !important;
border: none !important;
padding: 0.75rem 1.5rem !important;
border-radius: 0.375rem !important;
font-weight: 600 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background-color 0.3s ease !important;
cursor: pointer !important;
}
.woocommerce-EditAccountForm .button:hover,
.woocommerce-address-fields .button:hover,
.woocommerce-Button:hover {
background: #c41424 !important;
color: white !important;
} .woocommerce-orders-table {
width: 100% !important;
border-collapse: collapse !important;
margin-bottom: 1.5rem !important;
background: white !important;
border-radius: 0.5rem !important;
overflow: hidden !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.woocommerce-orders-table th {
background: #f8fafc !important;
color: var(--audiofix-text) !important;
font-weight: 600 !important;
padding: 1rem !important;
text-align: left !important;
border-bottom: 1px solid #e5e7eb !important;
}
.woocommerce-orders-table td {
padding: 1rem !important;
border-bottom: 1px solid #f1f5f9 !important;
color: #374151 !important;
}
.woocommerce-orders-table tr:last-child td {
border-bottom: none !important;
}
.woocommerce-orders-table tr:hover {
background: #f8fafc !important;
} .woocommerce-orders-table .button,
.woocommerce-orders-table a.button {
background: var(--audiofix-red) !important;
color: white !important;
border: none !important;
padding: 0.5rem 1rem !important;
border-radius: 0.375rem !important;
font-size: 0.875rem !important;
text-decoration: none !important;
display: inline-block !important;
transition: background-color 0.3s ease !important;
}
.woocommerce-orders-table .button:hover,
.woocommerce-orders-table a.button:hover {
background: #c41424 !important;
color: white !important;
} .woocommerce-message,
.woocommerce-error,
.woocommerce-info {
padding: 1rem !important;
border-radius: 0.375rem !important;
margin-bottom: 1.5rem !important;
border-left: 4px solid !important;
}
.woocommerce-message {
background: #ecfdf5 !important;
color: #065f46 !important;
border-left-color: #10b981 !important;
}
.woocommerce-error {
background: #fef2f2 !important;
color: #991b1b !important;
border-left-color: #ef4444 !important;
}
.woocommerce-info {
background: #eff6ff !important;
color: #1e40af !important;
border-left-color: #3b82f6 !important;
} @media (max-width: 768px) {
.woocommerce-table,
.woocommerce-orders-table {
font-size: 0.875rem !important;
}
.woocommerce-table th,
.woocommerce-table td,
.woocommerce-orders-table th,
.woocommerce-orders-table td {
padding: 0.75rem !important;
}
.woocommerce-customer-details .col-1,
.woocommerce-customer-details .col-2 {
padding: 1rem !important;
}
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row {
margin-bottom: 1rem !important;
}
} .woocommerce-MyAccount-content .button.wc-backward {
background: #6b7280 !important;
color: white !important;
margin-bottom: 1rem !important;
}
.woocommerce-MyAccount-content .button.wc-backward:hover {
background: #4b5563 !important;
} .woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
color: var(--audiofix-text) !important;
margin-bottom: 1rem !important;
}
.woocommerce-MyAccount-content p {
color: #6b7280 !important;
line-height: 1.6 !important;
margin-bottom: 1rem !important;
}
.woocommerce-MyAccount-content a {
color: var(--audiofix-red) !important;
text-decoration: none !important;
}
.woocommerce-MyAccount-content a:hover {
text-decoration: underline !important;
} .woocommerce-MyAccount-content .woocommerce-address {
background: white !important;
border-radius: 0.5rem !important;
padding: 1.5rem !important;
margin-bottom: 1.5rem !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
border: 1px solid #e5e7eb !important;
transition: all 0.3s ease !important;
}
.woocommerce-MyAccount-content .woocommerce-address:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
transform: translateY(-2px) !important;
}
.woocommerce-MyAccount-content .woocommerce-address header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 1rem !important;
padding-bottom: 0.75rem !important;
border-bottom: 1px solid #e5e7eb !important;
}
.woocommerce-MyAccount-content .woocommerce-address h3 {
color: var(--audiofix-text) !important;
font-size: 1.125rem !important;
font-weight: 600 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
}
.woocommerce-MyAccount-content .woocommerce-address h3::before {
content: "\f041" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
color: var(--audiofix-red) !important;
}
.woocommerce-MyAccount-content .woocommerce-address .edit {
background: var(--audiofix-red) !important;
color: white !important;
padding: 0.5rem 1rem !important;
border-radius: 0.375rem !important;
text-decoration: none !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
transition: all 0.3s ease !important;
}
.woocommerce-MyAccount-content .woocommerce-address .edit:hover {
background: #c41424 !important;
color: white !important;
transform: translateY(-1px) !important;
box-shadow: 0 2px 8px rgba(230, 28, 44, 0.3) !important;
}
.woocommerce-MyAccount-content .woocommerce-address .edit::before {
content: "\f044" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
}
.woocommerce-MyAccount-content .woocommerce-address address {
background: #f8fafc !important;
padding: 1rem !important;
border-radius: 0.375rem !important;
border-left: 4px solid var(--audiofix-red) !important;
font-style: normal !important;
line-height: 1.6 !important;
color: #374151 !important;
margin: 0 !important;
}
.woocommerce-MyAccount-content .woocommerce-address address:empty {
background: #fef2f2 !important;
border-left-color: #ef4444 !important;
color: #991b1b !important;
}
.woocommerce-MyAccount-content .woocommerce-address address:empty::after {
content: "Você não preencheu este tipo de endereço ainda." !important;
font-style: italic !important;
} .woocommerce-MyAccount-content .woocommerce-Addresses-title {
color: var(--audiofix-text) !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
margin-bottom: 1.5rem !important;
text-align: center !important;
position: relative !important;
padding-bottom: 1rem !important;
}
.woocommerce-MyAccount-content .woocommerce-Addresses-title::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 60px !important;
height: 3px !important;
background: var(--audiofix-red) !important;
border-radius: 2px !important;
} .woocommerce-MyAccount-content .woocommerce-address-fields {
background: white !important;
border-radius: 0.5rem !important;
padding: 2rem !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
border: 1px solid #e5e7eb !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields h3 {
color: var(--audiofix-text) !important;
font-size: 1.25rem !important;
font-weight: 600 !important;
margin-bottom: 1.5rem !important;
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields h3::before {
content: "\f303" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
color: var(--audiofix-red) !important;
background: rgba(230, 28, 44, 0.1) !important;
padding: 0.5rem !important;
border-radius: 0.375rem !important;
} .woocommerce-MyAccount-content .woocommerce-address-fields .form-row {
margin-bottom: 1.5rem !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row-first,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row-last {
width: 100% !important;
float: none !important;
}
@media (min-width: 768px) {
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row-first,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row-last {
width: 48% !important;
float: left !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row-first {
margin-right: 4% !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row-last {
margin-left: 0 !important;
}
} .woocommerce-MyAccount-content .woocommerce-address-fields .form-row .required {
color: var(--audiofix-red) !important;
font-weight: 600 !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row .required::after {
content: " *" !important;
color: var(--audiofix-red) !important;
} .woocommerce-MyAccount-content .woocommerce-address-fields select {
appearance: none !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
background-position: right 0.5rem center !important;
background-repeat: no-repeat !important;
background-size: 1.5em 1.5em !important;
padding-right: 2.5rem !important;
} .woocommerce-MyAccount-content .woocommerce-address-fields .button {
background: linear-gradient(135deg, var(--audiofix-red) 0%, #c41424 100%) !important;
color: white !important;
border: none !important;
padding: 0.875rem 2rem !important;
border-radius: 0.5rem !important;
font-weight: 600 !important;
font-size: 1rem !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 4px rgba(230, 28, 44, 0.2) !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .button:hover {
background: linear-gradient(135deg, #c41424 0%, #a01020 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(230, 28, 44, 0.3) !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .button::before {
content: "\f0c7" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
} @keyframes addressCardEnter {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.woocommerce-MyAccount-content .woocommerce-address {
animation: addressCardEnter 0.4s ease-out !important;
}
.woocommerce-MyAccount-content .woocommerce-address:nth-child(2) {
animation-delay: 0.1s !important;
}
.woocommerce-MyAccount-content .woocommerce-address:nth-child(3) {
animation-delay: 0.2s !important;
} @media (max-width: 768px) {
.woocommerce-MyAccount-content .woocommerce-address {
padding: 1rem !important;
}
.woocommerce-MyAccount-content .woocommerce-address header {
flex-direction: column !important;
gap: 1rem !important;
align-items: flex-start !important;
}
.woocommerce-MyAccount-content .woocommerce-address .edit {
width: 100% !important;
justify-content: center !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields {
padding: 1rem !important;
}
} .woocommerce-MyAccount-content .woocommerce-address address:empty {
position: relative !important;
padding: 2rem !important;
text-align: center !important;
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
border: 2px dashed #f87171 !important;
border-radius: 0.5rem !important;
transition: all 0.3s ease !important;
}
.woocommerce-MyAccount-content .woocommerce-address address:empty:hover {
border-color: var(--audiofix-red) !important;
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
}
.woocommerce-MyAccount-content .woocommerce-address address:empty::before {
content: "\f3c5" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
font-size: 2.5rem !important;
color: #f87171 !important;
display: block !important;
margin-bottom: 1rem !important;
}
.woocommerce-MyAccount-content .woocommerce-address address:empty::after {
content: "Nenhum endereço cadastrado ainda.\AClique em 'Adicionar' para incluir um novo endereço." !important;
white-space: pre-line !important;
font-style: normal !important;
font-weight: 500 !important;
color: #991b1b !important;
line-height: 1.5 !important;
} .woocommerce-MyAccount-content .woocommerce-Addresses {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
@media (min-width: 768px) {
.woocommerce-MyAccount-content .woocommerce-Addresses {
grid-template-columns: 1fr 1fr !important;
}
} .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Addresses-intro {
grid-column: 1 / -1 !important;
background: #f0f9ff !important;
border: 1px solid #0ea5e9 !important;
border-radius: 0.5rem !important;
padding: 1rem !important;
margin-bottom: 1rem !important;
color: #0c4a6e !important;
font-size: 0.9rem !important;
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
}
.woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Addresses-intro::before {
content: "\f05a" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
color: #0ea5e9 !important;
font-size: 1.2rem !important;
flex-shrink: 0 !important;
} .woocommerce-address.loading {
opacity: 0.6 !important;
pointer-events: none !important;
position: relative !important;
}
.woocommerce-address.loading::after {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 24px !important;
height: 24px !important;
margin: -12px 0 0 -12px !important;
border: 3px solid #f3f3f3 !important;
border-top: 3px solid var(--audiofix-red) !important;
border-radius: 50% !important;
animation: spin 1s linear infinite !important;
} .woocommerce-MyAccount-content .woocommerce-address-fields .form-row.woocommerce-invalid input,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row.woocommerce-invalid select {
border-color: #ef4444 !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row.woocommerce-validated input,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row.woocommerce-validated select {
border-color: #10b981 !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
} .woocommerce-MyAccount-content .woocommerce-address-fields .form-row.woocommerce-invalid::after {
content: "\f00d" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
color: #ef4444 !important;
position: absolute !important;
right: 0.75rem !important;
top: 50% !important;
transform: translateY(-50%) !important;
pointer-events: none !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row.woocommerce-validated::after {
content: "\f00c" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
color: #10b981 !important;
position: absolute !important;
right: 0.75rem !important;
top: 50% !important;
transform: translateY(-50%) !important;
pointer-events: none !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row {
position: relative !important;
}  .page-template-page-login .login-form-container {
max-width: 400px;
margin: 0 auto;
}
.page-template-page-login .login-tabs button {
transition: all 0.3s ease;
}
.page-template-page-login .login-tabs button.active {
background-color: var(--audiofix-red) !important;
color: white !important;
}
.page-template-page-login .login-form input:focus,
.page-template-page-login .register-form input:focus,
.page-template-page-login .register-form select:focus {
border-color: var(--audiofix-red) !important;
box-shadow: 0 0 0 2px rgba(230, 28, 44, 0.2) !important;
outline: none;
}
.page-template-page-login .social-login-buttons button {
transition: all 0.3s ease;
}
.page-template-page-login .social-login-buttons button:hover {
background-color: #f9fafb;
border-color: var(--audiofix-red);
}
.page-template-page-login .benefits-list {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.page-template-page-login .benefits-list i {
color: var(--audiofix-red);
font-size: 1.2rem;
} @keyframes loginFormSlide {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.page-template-page-login .login-form-container {
animation: loginFormSlide 0.6s ease-out;
}
.page-template-page-login .benefits-list .flex {
animation: loginFormSlide 0.6s ease-out;
}
.page-template-page-login .benefits-list .flex:nth-child(1) { animation-delay: 0.1s; }
.page-template-page-login .benefits-list .flex:nth-child(2) { animation-delay: 0.2s; }
.page-template-page-login .benefits-list .flex:nth-child(3) { animation-delay: 0.3s; }
.page-template-page-login .benefits-list .flex:nth-child(4) { animation-delay: 0.4s; }
.page-template-page-login .benefits-list .flex:nth-child(5) { animation-delay: 0.5s; } .page-template-page-login .error-message {
background-color: #fee2e2;
border: 1px solid #fecaca;
color: #dc2626;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 16px;
font-size: 14px;
line-height: 1.5;
}
.page-template-page-login .success-message {
background-color: #d1fae5;
border: 1px solid #a7f3d0;
color: #065f46;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 16px;
font-size: 14px;
line-height: 1.5;
} @media (max-width: 768px) {
.page-template-page-login .max-w-md {
max-width: 100%;
padding: 0 16px;
}
.page-template-page-login .py-20 {
padding-top: 40px;
padding-bottom: 40px;
}
.page-template-page-login .text-4xl {
font-size: 2rem;
}
.page-template-page-login .text-xl {
font-size: 1.125rem;
}
} .page-template-page-login input[type="email"],
.page-template-page-login input[type="password"],
.page-template-page-login input[type="text"],
.page-template-page-login input[type="tel"] {
transition: all 0.3s ease;
}
.page-template-page-login input[type="email"]:focus,
.page-template-page-login input[type="password"]:focus,
.page-template-page-login input[type="text"]:focus,
.page-template-page-login input[type="tel"]:focus {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(230, 28, 44, 0.15);
}
.page-template-page-login .form-button {
transition: all 0.3s ease;
}
.page-template-page-login .form-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(230, 28, 44, 0.3);
}
.page-template-page-login .form-button:active {
transform: translateY(0);
} .page-template-page-login .field-valid {
position: relative;
}
.page-template-page-login .field-valid::after {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #10b981;
font-size: 14px;
}
.page-template-page-login .field-invalid {
position: relative;
}
.page-template-page-login .field-invalid::after {
content: '\f00d';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #ef4444;
font-size: 14px;
}  .bg-gray-100 {
position: relative !important;
z-index: 10 !important;
margin-top: 0 !important;
} .woocommerce-breadcrumb {
font-size: 0.875rem !important;
color: #6b7280 !important;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-breadcrumb a {
color: #6b7280 !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
}
.woocommerce-breadcrumb a:hover {
color: var(--audiofix-red) !important;
} .bg-gray-100 nav {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.bg-gray-100 nav a,
.bg-gray-100 nav span {
display: inline !important;
visibility: visible !important;
} .breadcrumb-debug {
background-color: yellow !important;
border: 2px solid red !important;
padding: 10px !important;
margin: 10px 0 !important;
} @media (max-width: 1024px) {
.bg-gray-100 {
display: block !important;
visibility: visible !important;
}
.bg-gray-100 nav {
font-size: 14px !important;
line-height: 1.4 !important;
}
}
@media (min-width: 1025px) {
.bg-gray-100 {
display: block !important;
visibility: visible !important;
}
}  :root {
--menno-primary: #182D45;
--menno-secondary: #356091;
--menno-accent: #ff0040;
--menno-background: #f0f1f2;
}  #header {
position: sticky;
top: 0;
z-index: 9999;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
} .nav-link {
color: var(--menno-primary) !important;
text-decoration: none !important;
font-weight: 500;
padding: 0.5rem 0;
transition: color 0.3s ease;
display: block;
}
.nav-link:hover,
.nav-link:focus {
color: var(--menno-accent) !important;
text-decoration: none !important;
} .logo,
.custom-logo {
max-height: 60px;
width: auto;
transition: transform 0.3s ease;
display: block;
}
.logo:hover,
.custom-logo:hover {
transform: scale(1.05);
} header .custom-logo {
height: 3rem; }
@media (min-width: 768px) {
header .custom-logo {
height: 4rem; }
} footer .custom-logo {
height: 2rem; opacity: 0.8;
transition: opacity 0.3s ease, transform 0.3s ease;
}
footer .custom-logo:hover {
opacity: 1;
transform: scale(1.05);
} #mobile-menu-button {
background: transparent;
border: none;
padding: 0.5rem;
cursor: pointer;
color: var(--menno-primary);
font-size: 1.5rem;
}
#mobile-menu-button:focus {
outline: 2px solid var(--menno-accent);
outline-offset: 2px;
} #mobile-menu {
background: white;
border-top: 1px solid #e5e7eb;
padding: 1rem 0;
}
#mobile-menu.hidden {
display: none !important;
}
#mobile-menu a {
display: block;
padding: 0.75rem 1rem;
color: var(--menno-primary);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
#mobile-menu a:hover {
color: var(--menno-accent);
} .header-scrolled {
box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
transform: translateY(-2px);
transition: all 0.3s ease;
} .admin-bar #header {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar #header {
top: 46px;
}
} @media (max-width: 768px) {
.logo {
max-height: 45px;
}
.content-container {
padding: 0 0.75rem;
} .md\:hidden {
display: block !important;
}
.hidden.md\:flex {
display: none !important;
}
}
@media (min-width: 769px) {
.md\:flex {
display: flex !important;
}
.md\:hidden {
display: none !important;
}
} @media (prefers-reduced-motion: reduce) {
.logo,
.nav-link,
.header-scrolled {
transition: none !important;
}
} @media (prefers-contrast: high) {
.nav-link {
border: 1px solid transparent;
}
.nav-link:hover,
.nav-link:focus {
border-color: var(--menno-accent);
}
} .content-container .fa,
.content-container .fas,
.content-container .fab {
font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
} .text-secondary {
color: var(--menno-secondary) !important;
}
.text-secondary:hover {
color: var(--menno-accent) !important;
} .flex {
display: flex;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.justify-end {
justify-content: flex-end;
} .hamburger-icon {
width: 24px;
height: 18px;
position: relative;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
}
.hamburger-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: var(--menno-primary);
border-radius: 2px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.hamburger-icon span:nth-child(1) {
top: 0px;
}
.hamburger-icon span:nth-child(2) {
top: 7px;
}
.hamburger-icon span:nth-child(3) {
top: 14px;
} .mobile-menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
top: 7px;
transform: rotate(135deg);
}
.mobile-menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
opacity: 0;
left: -60px;
}
.mobile-menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
top: 7px;
transform: rotate(-135deg);
} .mobile-menu-btn {
display: none !important;
background: transparent !important;
border: none !important;
padding: 8px !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
}
.mobile-menu-btn:hover {
background-color: #f3f4f6 !important;
} @media (max-width: 1023px) {
.mobile-menu-btn {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
} .text-primary {
color: var(--menno-primary);
}
.text-secondary {
color: var(--menno-secondary);
}
.text-accent {
color: var(--menno-accent);
}
.bg-primary {
background-color: var(--menno-primary);
}
.bg-secondary {
background-color: var(--menno-secondary);
}
.bg-accent {
background-color: var(--menno-accent);
}
.bg-background {
background-color: var(--menno-background);
}
.border-accent {
border-color: var(--menno-accent);
} .content-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
width: 100%;
} .btn-primary {
background-color: var(--menno-accent);
color: white;
padding: 0.75rem 2rem;
border-radius: 0.5rem;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
border: 2px solid var(--menno-accent);
}
.btn-primary:hover {
background-color: #d60036;
border-color: #d60036;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 0, 64, 0.3);
color: white;
text-decoration: none;
}
.btn-secondary {
background-color: transparent;
color: white;
padding: 0.75rem 2rem;
border-radius: 0.5rem;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
border: 2px solid white;
}
.btn-secondary:hover {
background-color: white;
color: var(--menno-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
text-decoration: none;
}
.btn-accent {
background-color: var(--menno-accent);
color: white;
padding: 0.75rem 2rem;
border-radius: 0.5rem;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
border: 2px solid var(--menno-accent);
}
.btn-accent:hover {
background-color: #d60036;
border-color: #d60036;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 0, 64, 0.3);
color: white;
text-decoration: none;
} .hero-slider {
position: relative;
height: 100vh;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide.active {
opacity: 1;
}  .slide a {
color: inherit;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.slide a:hover {
color: inherit;
text-decoration: none;
}
.slide .relative {
position: relative;
z-index: 2;
} .slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
transition: all 0.3s ease;
margin: 0 4px;
}
.slider-dot.active,
.slider-dot:hover {
background-color: var(--menno-accent);
transform: scale(1.2);
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.2);
border: none;
color: white;
font-size: 1.5rem;
padding: 1rem;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 50%;
z-index: 10;
}
.slider-arrow:hover {
background-color: var(--menno-accent);
transform: translateY(-50%) scale(1.1);
}
.slider-arrow.left {
left: 2rem;
}
.slider-arrow.right {
right: 2rem;
} .service-card {
background: white;
padding: 2rem;
border-radius: 1rem;
text-align: center;
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: var(--menno-accent);
}
.service-card h3 {
color: var(--menno-primary);
margin-bottom: 1rem;
}
.service-card p {
color: #6b7280;
line-height: 1.6;
} .grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gap-8 {
gap: 2rem;
}
.gap-12 {
gap: 3rem;
}
@media (min-width: 768px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}
.md\:space-y-0 > * + * {
margin-top: 0;
}
.md\:space-x-16 > * + * {
margin-left: 4rem;
}
.md\:space-x-6 > * + * {
margin-left: 1.5rem;
}
.md\:text-4xl {
font-size: 2.25rem;
}
.md\:text-5xl {
font-size: 3rem;
}
.md\:text-6xl {
font-size: 3.75rem;
}
.md\:text-2xl {
font-size: 1.5rem;
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
} .space-x-4 > * + * {
margin-left: 1rem;
}
.space-x-8 > * + * {
margin-left: 2rem;
}
.space-x-16 > * + * {
margin-left: 4rem;
}
.space-y-4 > * + * {
margin-top: 1rem;
}
.space-y-8 > * + * {
margin-top: 2rem;
}
.space-x-6 > * + * {
margin-left: 1.5rem;
}
.space-x-2 > * + * {
margin-left: 0.5rem;
} .leading-relaxed {
line-height: 1.625;
}
.border-t-4 {
border-top-width: 4px;
}
.rounded-full {
border-radius: 9999px;
}
.object-cover {
object-fit: cover;
}
.shadow-lg {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
} .w-24 {
width: 6rem;
}
.h-1 {
height: 0.25rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-8 {
margin-bottom: 2rem;
} .flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.justify-center {
justify-content: center;
}
.text-center {
text-align: center;
} .py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.mr-2 {
margin-right: 0.5rem;
} .font-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.font-medium {
font-weight: 500;
}
.text-lg {
font-size: 1.125rem;
}
.text-xl {
font-size: 1.25rem;
}
.text-2xl {
font-size: 1.5rem;
}
.text-3xl {
font-size: 1.875rem;
}
.text-4xl {
font-size: 2.25rem;
}
.text-5xl {
font-size: 3rem;
}
.text-6xl {
font-size: 3.75rem;
}
.text-sm {
font-size: 0.875rem;
} .text-white {
color: white;
}
.text-gray-600 {
color: #4b5563;
}
.text-gray-300 {
color: #d1d5db;
} .transition-all {
transition: all 0.3s ease;
}
.transition-colors {
transition-property: color, background-color, border-color;
transition-duration: 300ms;
}
.transition-transform {
transition-property: transform;
transition-duration: 300ms;
}
.duration-300 {
transition-duration: 300ms;
} .absolute {
position: absolute;
}
.relative {
position: relative;
}
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.bottom-8 {
bottom: 2rem;
}
.left-1\/2 {
left: 50%;
}
.top-50 {
top: 50%;
}
.transform {
transform: var(--tw-transform);
}
.-translate-x-1\/2 {
transform: translateX(-50%);
}
.-translate-y-1\/2 {
transform: translateY(-50%);
}
.z-10 {
z-index: 10;
}
.z-50 {
z-index: 50;
} .h-screen {
height: 100vh;
}
.h-full {
height: 100%;
}
.h-auto {
height: auto;
}
.h-16 {
height: 4rem;
}
.h-20 {
height: 5rem;
} .w-full {
width: 100%;
}
.w-auto {
width: auto;
}
.w-20 {
width: 5rem;
} .overflow-hidden {
overflow: hidden;
} .max-w-4xl {
max-width: 56rem;
}
.max-w-3xl {
max-width: 48rem;
} .px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.p-3 {
padding: 0.75rem;
}
.p-6 {
padding: 1.5rem;
} .rounded-lg {
border-radius: 0.5rem;
}
.rounded-full {
border-radius: 9999px;
} .focus\:ring-2:focus {
box-shadow: 0 0 0 2px var(--menno-accent);
}
.focus\:ring-accent:focus {
box-shadow: 0 0 0 3px rgba(255, 0, 64, 0.1);
}
.focus\:border-accent:focus {
border-color: var(--menno-accent);
} .bg-white {
background-color: white;
}
.bg-gray-300 {
background-color: #d1d5db;
} .block {
display: block;
}
.inline-block {
display: inline-block;
}
.hidden {
display: none;
} .border {
border-width: 1px;
}
.border-gray-300 {
border-color: #d1d5db;
}
.border-2 {
border-width: 2px;
}
.border-white {
border-color: white;
} .hover\:scale-105:hover {
transform: scale(1.05);
}
.hover\:underline:hover {
text-decoration: underline;
} .form-input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: var(--menno-accent);
box-shadow: 0 0 0 3px rgba(255, 0, 64, 0.1);
} @media (max-width: 768px) {
.content-container {
padding: 0 0.75rem;
}
.slider-arrow {
font-size: 1.2rem;
padding: 0.75rem;
}
.slider-arrow.left {
left: 1rem;
}
.slider-arrow.right {
right: 1rem;
}
.service-card {
padding: 1.5rem;
min-height: auto;
}
.btn-primary,
.btn-secondary,
.btn-accent {
padding: 0.6rem 1.5rem;
font-size: 0.9rem;
}
.text-4xl {
font-size: 2.25rem;
}
.text-6xl {
font-size: 3rem;
}
.text-5xl {
font-size: 2.5rem;
}
.space-x-16 > * + * {
margin-left: 2rem;
}
.space-x-8 > * + * {
margin-left: 1.5rem;
}
.space-x-6 > * + * {
margin-left: 1rem;
}
.py-20 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-16 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.mb-16 {
margin-bottom: 2.5rem;
}
.mb-12 {
margin-bottom: 2rem;
}
.gap-12 {
gap: 2rem;
}
.gap-8 {
gap: 1.5rem;
}
}
@media (max-width: 640px) {
.text-xl {
font-size: 1.125rem;
}
.text-2xl {
font-size: 1.5rem;
}
.text-3xl {
font-size: 1.875rem;
}
.space-y-8 > * + * {
margin-top: 1.5rem;
}
.space-y-4 > * + * {
margin-top: 1rem;
}
.flex-col {
flex-direction: column;
}
} @media (prefers-reduced-motion: reduce) {
.slide,
.slider-dot,
.slider-arrow,
.service-card,
.btn-primary,
.btn-secondary,
.btn-accent {
transition: none !important;
}
} @media print {
.slider-arrow,
.slider-dot,
.btn-primary,
.btn-secondary,
.btn-accent {
display: none !important;
}
.slide {
position: static !important;
opacity: 1 !important;
page-break-inside: avoid;
}
} @media (max-width: 1023px) {
#mobile-menu-button.mobile-menu-btn {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
#mobile-menu-button.mobile-menu-btn i,
#mobile-menu-button.mobile-menu-btn svg {
font-size: 24px !important;
color: #182D45 !important; width: auto !important;
height: auto !important;
display: inline-block !important;
}
} header nav ul li::before,
header nav ul li::after {
content: none !important;
}  .mobile-menu {
display: none !important;
} .mobile-menu.open {
display: block !important;
} @media (max-width: 1023px) {
.mobile-menu-btn,
#mobile-menu-button,
[data-mobile-menu-toggle] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
} .mobile-menu-btn i,
#mobile-menu-button i,
[data-mobile-menu-toggle] i,
.mobile-menu-btn span,
#mobile-menu-button span,
[data-mobile-menu-toggle] span {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
} .hidden.lg\\:flex,
.hidden.md\\:flex {
display: none !important;
}
} .gallery-strip {
width: 100%;
position: relative;
}
.gallery-track {
display: flex;
transition: transform 0.5s ease-in-out;
}
.gallery-item {
flex: 0 0 auto;
width: 128px;
height: 96px;
margin-right: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-item:hover img {
transform: scale(1.05);
}
.gallery-item .absolute {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0);
transition: all 0.3s ease;
}
.gallery-item:hover .absolute {
background: rgba(0, 0, 0, 0.3);
}
.gallery-item .absolute i {
opacity: 0;
transition: opacity 0.3s ease;
color: white;
font-size: 18px;
}
.gallery-item:hover .absolute i {
opacity: 1;
}
.gallery-scrollbar {
position: relative;
height: 8px;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin: 24px auto 0;
width: 192px;
}
.gallery-scrollbar-thumb {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #ff0040;
border-radius: 4px;
transition: all 0.3s ease;
min-width: 20px;
} #gallery-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
#gallery-modal.flex {
display: flex;
}
#gallery-modal .relative {
position: relative;
max-width: 90vw;
max-height: 90vh;
}
#gallery-modal img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
}
#gallery-modal button {
position: absolute;
background: rgba(255, 255, 255, 0.2);
color: white;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(4px);
}
#gallery-modal button:hover {
background: rgba(255, 255, 255, 0.4);
transform: scale(1.1);
}
#close-modal {
top: -60px;
right: 0;
background: transparent;
font-size: 24px;
}
#prev-image {
left: -60px;
top: 50%;
transform: translateY(-50%);
}
#next-image {
right: -60px;
top: 50%;
transform: translateY(-50%);
}
#gallery-modal .absolute.bottom-4 {
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
} @media (max-width: 768px) {
.gallery-item {
width: 96px;
height: 72px;
margin-right: 12px;
}
.gallery-scrollbar {
width: 144px;
}
#gallery-modal {
padding: 10px;
}
#close-modal {
top: -40px;
right: 0;
}
#prev-image {
left: -40px;
}
#next-image {
right: -40px;
}
#gallery-modal .absolute.bottom-4 {
bottom: -40px;
font-size: 12px;
padding: 6px 12px;
}
}
@media (max-width: 480px) {
.gallery-item {
width: 80px;
height: 60px;
margin-right: 8px;
}
.gallery-scrollbar {
width: 120px;
}
#prev-image,
#next-image {
width: 40px;
height: 40px;
}
#close-modal {
top: -30px;
width: 40px;
height: 40px;
}
} .social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
color: white;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
font-size: 18px;
}
.social-link:hover {
background-color: #ff0040;
color: white;
transform: translateY(-2px);
} @media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
.footer-map {
height: 200px !important;
}
}  footer .footer-grid h3 {
color: #FFFFFF !important;
} .contact-form {
background: white;
border-radius: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 2rem;
margin-bottom: 2rem;
} .form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--menno-primary);
font-size: 0.9rem;
} .form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.875rem 1rem;
border: 2px solid #e5e7eb;
border-radius: 0.5rem;
font-size: 1rem;
transition: all 0.3s ease;
background-color: #f9fafb;
color: var(--menno-primary);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--menno-accent);
background-color: white;
box-shadow: 0 0 0 3px rgba(255, 0, 64, 0.1);
transform: translateY(-1px);
} .form-group textarea {
min-height: 120px;
resize: vertical;
} .form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.form-grid {
grid-template-columns: 1fr 1fr;
}
.form-group.full-width {
grid-column: 1 / -1;
}
} .form-submit {
background: linear-gradient(135deg, var(--menno-accent) 0%, #d60036 100%);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
position: relative;
overflow: hidden;
}
.form-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 0, 64, 0.3);
}
.form-submit:active {
transform: translateY(0);
} .form-submit.loading {
opacity: 0.7;
cursor: not-allowed;
}
.form-submit.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid transparent;
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} .form-message {
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
font-weight: 500;
display: none;
}
.form-message.success {
background-color: #d1fae5;
color: #065f46;
border: 1px solid #a7f3d0;
display: block;
}
.form-message.error {
background-color: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
display: block;
} .form-group.error input,
.form-group.error textarea,
.form-group.error select {
border-color: #ef4444;
background-color: #fef2f2;
}
.form-group.success input,
.form-group.success textarea,
.form-group.success select {
border-color: #10b981;
background-color: #ecfdf5;
}
.form-group .error-message {
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.25rem;
display: none;
}
.form-group.error .error-message {
display: block;
} .form-group label.required::after {
content: ' *';
color: var(--menno-accent);
} .contact-info-card {
background: white;
border-radius: 1rem;
padding: 1.5rem;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border-top: 4px solid var(--menno-accent);
}
.contact-info-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.contact-info-card .icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--menno-accent), #d60036);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
color: white;
font-size: 1.5rem;
}
.contact-info-card h3 {
color: var(--menno-primary);
margin-bottom: 0.5rem;
font-size: 1.25rem;
font-weight: 600;
}
.contact-info-card p {
color: #6b7280;
margin-bottom: 0.5rem;
line-height: 1.5;
}
.contact-info-card a {
color: var(--menno-accent);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.contact-info-card a:hover {
color: #d60036;
text-decoration: underline;
} .contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
@media (min-width: 768px) {
.contact-grid {
grid-template-columns: repeat(3, 1fr);
}
} .map-container {
background: white;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.map-container iframe {
width: 100%;
height: 400px;
border: none;
display: block;
} .contact-header {
text-align: center;
margin-bottom: 3rem;
}
.contact-header h1 {
color: var(--menno-primary);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.contact-header p {
color: #6b7280;
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
} @media (max-width: 768px) {
.contact-form {
padding: 1.5rem;
}
.contact-header h1 {
font-size: 2rem;
}
.contact-header p {
font-size: 1rem;
}
.contact-info-card {
padding: 1.25rem;
}
.contact-info-card .icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.map-container iframe {
height: 300px;
}
}
@media (max-width: 480px) {
.contact-form {
padding: 1rem;
}
.form-submit {
padding: 0.875rem 1.5rem;
}
.contact-header h1 {
font-size: 1.75rem;
}
.contact-grid {
gap: 1.5rem;
}
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.contact-form,
.contact-info-card,
.map-container {
animation: fadeInUp 0.6s ease-out;
}
.contact-info-card:nth-child(1) { animation-delay: 0.1s; }
.contact-info-card:nth-child(2) { animation-delay: 0.2s; }
.contact-info-card:nth-child(3) { animation-delay: 0.3s; } .contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.contact-form button:focus {
outline: 2px solid var(--menno-accent);
outline-offset: 2px;
} @media (prefers-contrast: high) {
.contact-form {
border: 2px solid var(--menno-primary);
}
.contact-info-card {
border: 2px solid var(--menno-primary);
}
} @media (prefers-reduced-motion: reduce) {
.contact-form,
.contact-info-card,
.map-container,
.form-submit {
animation: none !important;
transition: none !important;
}
.contact-info-card:hover,
.form-submit:hover {
transform: none !important;
}
}