*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', sans-serif; background: #F7F5F2; -webkit-font-smoothing: antialiased; } /* ── PAGE WRAPPER ── */ .yl-page { min-height: 100vh; display: flex; flex-direction: column; } /* ── TOP LABEL BAR ── */ .yl-topbar { width: 100%; background: #0D0D0D; text-align: center; padding: 12px 24px; } .yl-topbar span { font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; color: #C8A063; font-weight: 500; } /* ── MAIN CONTACT SECTION ── */ .yl-contact { display: flex; flex: 1; min-height: calc(100vh - 45px); } /* ════════════════════════════ LEFT COLUMN ════════════════════════════ */ .yl-left { width: 42%; background: #E9E1D6; padding: 64px 56px; display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: 0; height: calc(100vh - 45px); } .yl-left-top {} .yl-eyebrow { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: #C8A063; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; } .yl-eyebrow::after { content: ''; display: block; width: 32px; height: 1px; background: #C8A063; opacity: 0.5; } .yl-headline { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.8rem, 4.5vw, 4.2rem); font-weight: 400; color: #0D0D0D; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 20px; } .yl-headline em { font-style: italic; color: #8a7560; } .yl-subtext { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.05rem; color: #7a6e64; line-height: 1.75; max-width: 320px; border-left: 2px solid #C8A063; padding-left: 16px; margin-bottom: 0; } /* Info cards */ .yl-left-middle { display: flex; flex-direction: column; gap: 0; } .yl-info-item { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(13,13,13,0.08); } .yl-info-item:first-child { border-top: 1px solid rgba(13,13,13,0.08); } .yl-info-icon-wrap { width: 40px; height: 40px; border-radius: 50%; background: #0D0D0D; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9rem; } .yl-info-content {} .yl-info-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: #0D0D0D; margin-bottom: 3px; } .yl-info-value { font-family: 'Cormorant Garamond', serif; font-size: 0.98rem; color: #5a5046; line-height: 1.4; } .yl-info-value a { color: #5a5046; text-decoration: none; transition: color 0.3s; } .yl-info-value a:hover { color: #C8A063; } /* Bottom social + brand */ .yl-left-bottom { display: flex; align-items: center; justify-content: space-between; } .yl-social-row { display: flex; gap: 10px; } .yl-social-btn { width: 34px; height: 34px; border-radius: 50%; background: #0D0D0D; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.3s ease, transform 0.3s ease; } .yl-social-btn:hover { background: #C8A063; transform: translateY(-2px); } .yl-social-btn svg { width: 14px; height: 14px; fill: #F7F5F2; } .yl-brand-mark { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 400; color: rgba(13,13,13,0.25); letter-spacing: 0.1em; } /* ════════════════════════════ RIGHT COLUMN ════════════════════════════ */ .yl-right { width: 58%; background: #F7F5F2; padding: 64px 72px 64px 64px; display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 45px); } .yl-form-header { margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(13,13,13,0.08); } .yl-form-title { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 400; color: #0D0D0D; letter-spacing: -0.02em; margin-bottom: 6px; } .yl-form-sub { font-size: 0.78rem; color: #999; letter-spacing: 0.08em; text-transform: uppercase; } .yl-form { display: flex; flex-direction: column; gap: 20px; } .yl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .yl-field { display: flex; flex-direction: column; gap: 7px; } .yl-field label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #0D0D0D; } .yl-field input, .yl-field select, .yl-field textarea { background: #fff; border: 1px solid rgba(13,13,13,0.1); border-radius: 6px; padding: 13px 16px; font-family: 'Inter', sans-serif; font-size: 0.85rem; color: #0D0D0D; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; width: 100%; -webkit-appearance: none; appearance: none; } .yl-field input::placeholder, .yl-field textarea::placeholder { color: rgba(13,13,13,0.25); } .yl-field input:focus, .yl-field select:focus, .yl-field textarea:focus { border-color: #C8A063; box-shadow: 0 0 0 3px rgba(200,160,99,0.1); } .yl-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8A063' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; color: #0D0D0D; } .yl-field select option[value=""] { color: rgba(13,13,13,0.25); } .yl-field textarea { resize: vertical; min-height: 130px; line-height: 1.65; } /* Submit row */ .yl-submit-row { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; } .yl-submit-btn { width: 100%; height: 52px; border-radius: 999px; background: #0D0D0D; color: #F7F5F2; border: none; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background 0.35s ease, color 0.35s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 10px; } .yl-submit-btn:hover { background: #C8A063; color: #0D0D0D; } .yl-submit-btn:active { transform: scale(0.99); } .yl-submit-btn .btn-arrow { font-size: 1rem; transition: transform 0.3s ease; } .yl-submit-btn:hover .btn-arrow { transform: translateX(4px); } .yl-privacy-note { font-size: 0.68rem; color: rgba(13,13,13,0.3); text-align: center; letter-spacing: 0.04em; line-height: 1.6; } .yl-privacy-note a { color: #C8A063; text-decoration: none; } /* ── SUCCESS ── */ .yl-success { display: none; text-align: center; padding: 64px 24px; animation: fadeUp 0.5s ease forwards; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .yl-success-icon { font-size: 2.8rem; color: #C8A063; margin-bottom: 20px; display: block; } .yl-success h3 { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 400; color: #0D0D0D; margin-bottom: 12px; } .yl-success p { font-size: 0.9rem; color: #666; line-height: 1.8; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.05rem; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .yl-contact { flex-direction: column; } .yl-left { width: 100%; height: auto; position: relative; padding: 48px 32px; justify-content: flex-start; gap: 40px; } .yl-right { width: 100%; padding: 48px 32px; min-height: auto; } .yl-field-row { grid-template-columns: 1fr; } .yl-headline { font-size: 3rem; } } @media (max-width: 480px) { .yl-left, .yl-right { padding: 40px 20px; } .yl-headline { font-size: 2.4rem; } .yl-right { padding: 40px 20px 60px; } }