/* style.css */ /* Import Google Fonts defined in index.html's */ body { font-family: 'Inter', sans-serif; /* Default English font */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%23065f46' fill-opacity='0.03' d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z'%3E%3C/path%3E%3C/svg%3E"); background-attachment: fixed; } /* Apply Amiri font specifically to elements marked with lang="ar" or dir="rtl" */ [lang="ar"], [dir="rtl"] { font-family: 'Amiri', serif; /* Arabic font */ } /* === Button Styles === */ button { transition: all 0.2s ease-in-out; transform: translateY(0); } button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } button:active:not(:disabled) { transform: translateY(0); } /* === Card and Container Styles === */ section, .card { transition: all 0.3s ease; } #setup-section, #status-bar, #page-card { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1); border-radius: 0.75rem; } #setup-section:hover, #page-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12); } /* === Form Element Styling === */ select, input[type="text"] { transition: all 0.2s; } select:hover, input[type="text"]:hover { border-color: rgba(6, 95, 70, 0.5); } select:focus, input[type="text"]:focus { box-shadow: 0 0 0 3px rgba(6, 95, 70, 0.2); border-color: rgba(6, 95, 70, 0.8); } /* File input styling */ input[type="file"]::file-selector-button { transition: all 0.2s ease; } input[type="file"]:hover::file-selector-button { background-color: rgba(6, 95, 70, 0.1); } /* === Transitions for Modals and Notifications === */ /* Base styles for elements that will transition */ #thank-you-modal, #csv-confirm-modal, .notification { transition-property: opacity, transform; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* Notification specific transition states (already somewhat handled by Tailwind) */ .notification { /* Base state */ /* @apply opacity-0 translate-x-full; */ /* Handled by inline classes */ } .notification.show { /* Shown state */ /* @apply opacity-100 translate-x-0; */ /* Handled by inline classes */ } /* Modal specific transition states */ #thank-you-modal.hidden, #csv-confirm-modal.hidden { pointer-events: none; transform: scale(0.95); } #thank-you-modal:not(.hidden) .bg-white, #csv-confirm-modal:not(.hidden) .bg-white { animation: modal-appear 0.3s forwards; } @keyframes modal-appear { 0% { transform: scale(0.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* Header animation */ header { position: relative; overflow: hidden; } header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.7), rgba(245, 158, 11, 0.3)); animation: shimmer 3s infinite linear; transform: translateX(-100%); } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Page card special styling */ #page-card { background: linear-gradient(145deg, #ffffff, #fff8e6); border-width: 2px; border-style: solid; border-image: linear-gradient(to right, #06745c, #059669, #06745c) 1; position: relative; } #page-card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; z-index: -1; background: linear-gradient(to right, #059669, #10b981, #059669); border-radius: 0.75rem; opacity: 0.3; filter: blur(8px); transition: opacity 0.3s ease; } #page-card:hover::before { opacity: 0.5; }