img { max-width: 100%; height: auto; image-rendering: auto; display: block; } /* Reszponzív optimalizálás */ @media (max-width: 640px) { .cta-btn { font-size: 1rem; padding: 0.75rem 1.2rem; border-radius: 0.75rem; } .hero-title { font-size: 2rem !important; } .hero-subtitle { font-size: 1.1rem !important; } .usp-card { padding: 1rem !important; font-size: 0.95rem; } .price-card { padding: 1rem !important; margin-bottom: 1.2rem !important; } .price-card h3 { font-size: 1.1rem !important; } .price-card h4 { font-size: 1rem !important; } } /* Egységes CTA gomb stílus */ .cta-btn { display: inline-block; background: linear-gradient(90deg, #db2777 0%, #a16207 100%); color: #fff; font-weight: bold; padding: 1rem 2.5rem; border-radius: 1rem; font-size: 1.15rem; box-shadow: 0 4px 16px 0 rgba(219,39,119,0.10), 0 1.5px 4px 0 rgba(161,98,7,0.10); transition: background 0.2s, box-shadow 0.2s, color 0.2s; } .cta-btn:hover, .cta-btn:focus { background: linear-gradient(90deg, #a16207 0%, #db2777 100%); color: #fff; box-shadow: 0 6px 24px 0 rgba(219,39,119,0.15), 0 2px 8px 0 rgba(161,98,7,0.15); text-decoration: none; } /* Kiemelt (selected) kártya stílus - egységesen */ .slot-card.selected, .service-card.selected { border-color: #db2777; background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%); } /* VNails brand colors - Tailwind CSS config */ /* Dark mode overrides (applied when kapja a `dark` osztályt) */ body.dark { background-color: #0b0f14; color: #e5e7eb; transition: background-color 200ms ease, color 200ms ease; } /* Header / nav */ body.dark header, body.dark #mobile-menu { background-color: rgba(7, 11, 17, 0.85) !important; border-color: rgba(255,255,255,0.06) !important; } /* Text and link colors */ body.dark .text-gray-700, body.dark .text-gray-800 { color: #e5e7eb !important; } body.dark .text-gray-400 { color: #9ca3af !important; } body.dark a { color: #f0abfc; } body.dark a:hover { color: #fda4af; } /* Messages and cards */ body.dark .bg-blue-50, body.dark .bg-red-50, body.dark .bg-green-50, body.dark .slot-card, body.dark .service-card, body.dark .price-card { background-color: rgba(255,255,255,0.03) !important; color: inherit; border-color: rgba(255,255,255,0.04) !important; } /* CTA button remain visible in dark */ body.dark .cta-btn { background: linear-gradient(90deg, #db2777 0%, #a16207 100%); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.5); } /* Footer tweaks (already dark but ensure contrast) */ body.dark footer { background-color: #071024 !important; color: #cbd5e1 !important; } /* Theme toggle button */ #theme-toggle { background: transparent; border: 1px solid transparent; padding: 0.25rem; } #theme-toggle:hover { background: rgba(0,0,0,0.04); } body.dark #theme-toggle:hover { background: rgba(255,255,255,0.03); } /* Messages color adjustments */ body.dark .mb-4.p-4.rounded-lg.bg-red-50 { background-color: rgba(220,38,38,0.08) !important; color: #fecaca !important; } body.dark .mb-4.p-4.rounded-lg.bg-green-50 { background-color: rgba(16,185,129,0.06) !important; color: #bbf7d0 !important; } body.dark .mb-4.p-4.rounded-lg.bg-blue-50 { background-color: rgba(59,130,246,0.06) !important; color: #bfdbfe !important; }