/* ============================================================ contact-modal.css Place in: assets/css/contact-modal.css Link in every VR page ============================================================ */ /* ── Overlay ── */ .cm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1rem; /* Hidden state */ opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .cm-overlay.cm-open { opacity: 1; pointer-events: all; } /* ── Modal box ── */ .cm-modal { position: relative; background: #0f1214; border: 1px solid rgba(68, 217, 230, 0.2); border-radius: 24px; padding: 2.5rem; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(68, 217, 230, 0.08); /* Slide up on open */ transform: translateY(24px); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); scrollbar-width: thin; scrollbar-color: rgba(68, 217, 230, 0.3) transparent; } .cm-overlay.cm-open .cm-modal { transform: translateY(0); } .cm-modal::-webkit-scrollbar { width: 4px; } .cm-modal::-webkit-scrollbar-track { background: transparent; } .cm-modal::-webkit-scrollbar-thumb { background: rgba(68, 217, 230, 0.3); border-radius: 4px; } /* ── Close button ── */ .cm-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease; z-index: 2; } .cm-close:hover { background: rgba(255, 60, 60, 0.15); border-color: rgba(255, 60, 60, 0.3); color: #ff6b6b; transform: rotate(90deg); } /* ── Header ── */ .cm-header { text-align: center; margin-bottom: 2rem; } .cm-logo { width: 56px; height: 56px; object-fit: contain; margin-bottom: 1rem; filter: drop-shadow(0 0 12px rgba(68, 217, 230, 0.3)); } .cm-title { font-family: 'Outfit', sans-serif; font-size: 1.6rem; font-weight: 600; color: #fff; margin: 0 0 0.4rem; letter-spacing: 0.3px; } .cm-subtitle { font-family: 'Outfit', sans-serif; font-size: 0.9rem; color: rgba(255, 255, 255, 0.5); margin: 0; } /* ── Form ── */ .cm-form-wrap { display: flex; flex-direction: column; gap: 1rem; } .cm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .cm-field { display: flex; flex-direction: column; gap: 0.35rem; } .cm-field label { font-family: 'Outfit', sans-serif; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255, 255, 255, 0.45); } .cm-optional { font-weight: 400; opacity: 0.6; text-transform: none; letter-spacing: 0; } .cm-field input, .cm-field select, .cm-field textarea { width: 100%; padding: 0.8rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; font-family: 'Outfit', sans-serif; font-size: 0.95rem; color: #fff; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; outline: none; -webkit-appearance: none; } .cm-field input::placeholder, .cm-field textarea::placeholder { color: rgba(255, 255, 255, 0.2); } .cm-field select { color: rgba(255, 255, 255, 0.7); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .cm-field select option { background: #1a1f24; color: #fff; } .cm-field input:focus, .cm-field select:focus, .cm-field textarea:focus { border-color: rgba(68, 217, 230, 0.5); background: rgba(68, 217, 230, 0.05); box-shadow: 0 0 0 3px rgba(68, 217, 230, 0.1); } .cm-field textarea { resize: vertical; min-height: 90px; } /* ── Submit button ── */ .cm-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 1rem; background: #44D9E6; color: #000; font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 24px rgba(68, 217, 230, 0.25); margin-top: 0.5rem; } .cm-submit:hover { background: #FFD700; box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3); transform: translateY(-2px); } .cm-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* ── Success state ── */ .cm-success { text-align: center; padding: 2rem 1rem; animation: cmFadeIn 0.4s ease; } .cm-success i { font-size: 3rem; color: #44D9E6; margin-bottom: 1rem; display: block; } .cm-success h3 { color: #fff; font-size: 1.4rem; margin-bottom: 0.5rem; } .cm-success p { color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; } /* ── Footer ── */ .cm-footer { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.07); } .cm-contact-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'Outfit', sans-serif; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); text-decoration: none; transition: color 0.2s ease; } .cm-contact-link:hover { color: #44D9E6; } .cm-contact-link i { font-size: 0.75rem; } .cm-divider { color: rgba(255, 255, 255, 0.2); font-size: 1rem; } /* ── Animations ── */ @keyframes cmFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── Mobile ── */ @media (max-width: 600px) { .cm-modal { padding: 1.75rem 1.25rem; border-radius: 20px; max-height: 95vh; } .cm-field-row { grid-template-columns: 1fr; } .cm-title { font-size: 1.3rem; } .cm-footer { flex-direction: column; gap: 0.5rem; } } /* ── Logo icon (replaces img to avoid path issues) ── */ .cm-logo-icon { font-size: 2.2rem; color: #44D9E6; margin-bottom: 1rem; display: block; filter: drop-shadow(0 0 12px rgba(68, 217, 230, 0.4)); }