/* ========================= RESET ========================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', sans-serif; background-color: #0A0A0B; background-image: radial-gradient(circle at 18% 16%, rgba(191,163,106,0.06), transparent 32%), radial-gradient(circle at 82% 22%, rgba(191,163,106,0.04), transparent 28%); color: #EDEDED; line-height: 1.8; -webkit-font-smoothing: antialiased; } /* ========================= LAYOUT ========================= */ .application-wrapper { min-height: 100vh; display: flex; align-items: center; padding: 120px 20px; } .application-container { width: 100%; max-width: 760px; margin: 0 auto; position: relative; } /* ========================= BACK LINK ========================= */ .back-link { margin-bottom: 60px; } .back-link a { display: inline-block; padding: 12px 24px; border: 1px solid rgba(191,163,106,0.12); /* soft gold, very subtle */ border-radius: 6px; background: rgba(255,255,255,0.02); /* barely visible, adds depth */ font-size: 0.6rem; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; color: #8A8A8A; transition: all 0.3s ease; } .back-link a:hover { color: #BFA36A; border-color: rgba(191,163,106,0.35); /* gentle glow on hover */ background: rgba(255,255,255,0.04); /* subtle lift */ } /* ========================= HEADER ========================= */ .application-header { margin-bottom: 80px; } .application-header h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 4vw, 3rem); margin-bottom: 30px; position: relative; } .application-header h1::after { content: ""; display: block; width: 100px; height: 1px; background-color: rgba(191,163,106,0.5); margin-top: 20px; } .application-header p { font-size: 1.05rem; font-weight: 300; color: #CFCFCF; margin-bottom: 18px; } .sub-note { font-size: 0.95rem; color: #9A9A9A; } /* ========================= FORM ZONE ========================= */ .form-zone { position: relative; padding: 60px 50px; border: 1px solid rgba(191,163,106,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.022) 0%, rgba(255,255,255,0.008) 100%), #111112; box-shadow: 0 18px 50px rgba(0,0,0,0.40), 0 4px 14px rgba(0,0,0,0.22); overflow: hidden; } .form-zone::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(191,163,106,0.10), transparent 34%), radial-gradient(circle at bottom right, rgba(191,163,106,0.045), transparent 38%); pointer-events: none; opacity: 0.9; } .form-zone::after { content: ""; position: absolute; inset: 1px; border: 1px solid rgba(255,255,255,0.025); pointer-events: none; } .form-zone:hover { border-color: rgba(191,163,106,0.18); box-shadow: 0 22px 60px rgba(0,0,0,0.44), 0 6px 16px rgba(0,0,0,0.24); } /* ========================= CONTACT FORM ========================= */ .contact-form { display: flex; flex-direction: column; gap: 26px; } .form-row { display: flex; flex-direction: column; gap: 10px; } .form-row label { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #A8A8A8; } .form-row input, .form-row select, .form-row textarea { width: 100%; border: 1px solid rgba(191,163,106,0.14); background: rgba(255,255,255,0.02); color: #EDEDED; font-family: 'Inter', sans-serif; font-size: 0.98rem; font-weight: 400; line-height: 1.6; padding: 17px 18px; outline: none; transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease; appearance: none; border-radius: 0; } .form-row textarea { resize: vertical; min-height: 180px; } .form-row input::placeholder, .form-row textarea::placeholder { color: #777; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: rgba(191,163,106,0.42); background: rgba(255,255,255,0.03); box-shadow: 0 0 0 1px rgba(191,163,106,0.14); } .form-row select { width: 100%; border: 1px solid rgba(191,163,106,0.14); background: rgba(255,255,255,0.02); color: #EDEDED; font-family: 'Inter', sans-serif; font-size: 0.98rem; padding: 17px 18px; appearance: none; cursor: pointer; } .form-row select option { background-color: #111112; color: #EDEDED; } .form-row select { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23BFA36A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 12px; } .form-submit { align-self: flex-start; margin-top: 10px; padding: 16px 28px; border: 1px solid rgba(191,163,106,0.3); background: linear-gradient(180deg, #D6BC7A 0%, #BFA36A 100%); color: #111112; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease; box-shadow: 0 10px 24px rgba(0,0,0,0.28), 0 4px 10px rgba(191,163,106,0.18); } .form-submit:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 14px 28px rgba(0,0,0,0.34), 0 6px 14px rgba(191,163,106,0.22); } textarea { resize: vertical; max-height: 300px; } /* ========================= MOBILE OPTIMIZATION RESPONSIVE ========================= */ @media (max-width: 768px) { .application-wrapper { padding: 100px 20px; } .form-zone { padding: 40px 30px; } .back-link { margin-bottom: 42px; } .application-header { margin-bottom: 54px; } .application-header h1 { font-size: 34px; line-height: 1.12; margin-bottom: 22px; } .application-header p { font-size: 0.98rem; line-height: 1.75; } .sub-note { font-size: 0.9rem; line-height: 1.7; } .form-row input, .form-row select, .form-row textarea { font-size: 16px; padding: 16px 16px; } .form-submit { width: 100%; justify-content: center; text-align: center; } }