/* Additions for the Contact page. Kept in a separate file so re-uploading style.css via Dreamweaver does not overwrite these rules. Link this AFTER style.css in : Uses the same CSS variables defined in style.css (:root), so colors stay in sync automatically if those are ever updated. */ .page-intro{ margin-top: 48px; } .contact-form{ max-width: 480px; margin-left: auto; margin-right: auto; } .contact-form .field{ margin-bottom: 32px; } .contact-form label{ display: block; font-size: 14px; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 8px; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea{ width: 100%; border: none; border-bottom: 1px solid var(--line); background: transparent; font-family: 'EB Garamond', serif; font-size: 18px; color: var(--ink); padding: 8px 2px; transition: border-color .2s ease; } .contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form textarea:focus{ outline: none; border-bottom-color: var(--ink); } .contact-form textarea{ resize: vertical; min-height: 140px; line-height: 1.6; } /* honeypot field — hidden from real visitors, not from screen readers is fine since it's also marked aria-hidden and skipped via tabindex="-1" */ .hp-field{ position: absolute; left: -9999px; top: -9999px; } .contact-form .btn-row{ display: flex; justify-content: center; } .form-message{ font-size: 16px; margin-top: 24px; display: none; text-align: center; } .form-message.is-shown{ display: block; } .form-message.success{ color: var(--ink-soft); } .form-message.error{ color: #a8434a; } @media (max-width: 760px){ .contact-form{ max-width: 100%; } }