/* JussHomes Contact page (contact-us.html). Colors and type follow the rest of the site. */
.jh-contact {
--jh-navy: #1c2c4c;
--jh-navy-2: #26395f;
--jh-blue: #257abe;
--jh-blue-dark: #1d629a;
--jh-sky: #eaf2fa;
--jh-ink: #1c2c4c;
--jh-text: #4a5568;
--jh-muted: #6b7280;
--jh-fill: #f3f5f8;
--jh-error: #b42318;
--jh-ok: #1d7a46;
color: var(--jh-text);
font-family: Helvetica, Verdana, Arial, sans-serif;
background: #fff;
}
.jh-contact *, .jh-contact *::before, .jh-contact *::after { box-sizing: border-box; }
.jh-contact [hidden] { display: none !important; }
.jh-contact-wrap { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.jh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jh-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Navy band: the card below overlaps its bottom edge */
.jh-contact-band { background: var(--jh-navy); color: #fff; text-align: center; padding: 44px 0 120px; }
.jh-contact-title { margin: 0; font-size: 38px; line-height: 1.15; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.jh-contact-sub { max-width: 680px; margin: 14px auto 0; font-size: 16px; line-height: 1.6; color: #d6e2f0; }
/* Get in Touch card */
.jh-touch { margin-top: -84px; padding-bottom: 56px; }
.jh-touch-card { background: #fff; border-radius: 4px; box-shadow: 0 6px 22px rgba(28, 44, 76, 0.18); padding: 28px 32px 34px; }
.jh-touch-title { margin: 0 0 22px; font-size: 28px; font-weight: 700; color: var(--jh-ink); }
.jh-touch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 0; align-items: start; }
.jh-touch-form { display: grid; gap: 18px; padding-right: 40px; }
.jh-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jh-name-row .jh-field { width: 100%; }
.jh-contact .jh-field {
display: block; width: 100%; height: 46px; margin: 0; padding: 10px 12px;
font: inherit; font-size: 16px; color: var(--jh-ink); background: var(--jh-fill);
border: 1px solid transparent; border-radius: 4px; box-shadow: none;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.jh-contact .jh-field-area { height: 128px; resize: vertical; }
.jh-contact .jh-field::placeholder { color: #8a94a3; opacity: 1; }
.jh-contact .jh-field:focus { outline: none; background: #fff; border-color: var(--jh-blue); box-shadow: 0 0 0 3px rgba(37, 122, 190, 0.15); }
.jh-contact .jh-field[aria-invalid="true"] { border-color: var(--jh-error); background: #fff; }
.jh-touch-status { margin: -4px 0 0; font-size: 15px; }
.jh-touch-status.is-ok { color: var(--jh-ok); }
.jh-touch-status.is-error { color: var(--jh-error); }
.jh-contact .jh-touch-send,
.jh-contact .jh-touch-send:focus,
.jh-contact .jh-touch-send:active {
justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-width: 175px; min-height: 46px; padding: 0 24px; border: 0; border-radius: 4px; top: 0;
font: inherit; font-size: 18px; color: #fff; background: var(--jh-blue); cursor: pointer;
}
.jh-contact .jh-touch-send:hover { background: var(--jh-navy); border: 0; color: #fff; }
.jh-contact .jh-touch-send:focus-visible { outline: 3px solid rgba(37, 122, 190, 0.45); outline-offset: 2px; }
.jh-contact .jh-touch-send[disabled] { opacity: 0.75; cursor: progress; }
/* Contact details, set off by a thin navy line */
.jh-touch-info { list-style: none; margin: 18px 0 0; padding: 18px 0 18px 32px; border-left: 2px solid var(--jh-navy); display: grid; gap: 22px; }
.jh-touch-info li { display: flex; align-items: flex-start; gap: 16px; font-size: 16px; line-height: 1.5; color: var(--jh-ink); }
.jh-touch-info .fa { flex: none; width: 24px; margin-top: 1px; text-align: center; font-size: 21px; color: var(--jh-navy); }
.jh-touch-info a { color: var(--jh-ink); text-decoration: none; }
.jh-touch-info a:hover { color: var(--jh-blue); text-decoration: underline; }
/* Social links */
.jh-touch-social { align-items: center !important; }
.jh-social-links { display: flex; gap: 12px; }
.jh-contact .jh-social {
display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
border-radius: 50%; color: #fff; background: var(--jh-navy); text-decoration: none; transition: background 0.15s;
}
.jh-contact .jh-social .fa { width: auto; margin: 0; font-size: 19px; color: #fff; }
.jh-contact .jh-social:hover, .jh-contact .jh-social:focus-visible { text-decoration: none; }
/* Brand colors: Facebook blue and the Instagram gradient */
.jh-contact .jh-social-fb { background: #1877f2; }
.jh-contact .jh-social-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.jh-contact .jh-social:hover { filter: brightness(1.1); transform: translateY(-1px); }
.jh-contact .jh-social { transition: filter 0.15s, transform 0.15s; }
.jh-contact .jh-social:focus-visible { outline: 3px solid rgba(37, 122, 190, 0.45); outline-offset: 2px; }
/* Map */
.jh-map { padding-bottom: 70px; }
.jh-map-frame { height: 380px; border-radius: 4px; overflow: hidden; background: #dfe4ea; box-shadow: 0 6px 22px rgba(28, 44, 76, 0.12); }
.jh-map-frame iframe { display: block; width: 100%; height: 100%; border: 0; position: relative; z-index: 1; }
/* Shown behind the map until Google's map paints over it */
.jh-map-frame { position: relative; }
.jh-map-frame::before { content: "Loading map\2026"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #5b6472; font-size: 15px; }
@media (max-width: 760px) {
.jh-contact-band { padding: 34px 0 100px; }
.jh-contact-title { font-size: 30px; }
.jh-contact-sub { font-size: 15px; }
.jh-touch { margin-top: -70px; }
.jh-touch-card { padding: 24px 20px 28px; }
.jh-touch-title { font-size: 24px; }
.jh-touch-grid { grid-template-columns: 1fr; }
.jh-touch-form { padding-right: 0; }
.jh-name-row { gap: 12px; }
.jh-touch-info { margin-top: 28px; padding: 22px 0 0; border-left: 0; border-top: 2px solid var(--jh-navy); }
.jh-contact .jh-touch-send { width: 100%; }
.jh-map-frame { height: 300px; }
.jh-map { padding-bottom: 48px; }
}
/* Call-to-action hover: a navy fill sweeps across the blue button from left to right, like a loading bar
(same colors as every other button on the site) */
.jh-contact .jh-touch-send,
.jh-contact .jh-touch-send:hover,
.jh-contact .jh-touch-send:focus,
.jh-contact .jh-touch-send:active { background-color: var(--jh-blue); }
.jh-contact .jh-touch-send {
background-image: linear-gradient(var(--jh-navy), var(--jh-navy)) !important;
background-repeat: no-repeat !important;
background-position: left center !important;
background-size: 0% 100% !important;
transition: background-size 0.45s ease-out !important;
}
.jh-contact .jh-touch-send:hover,
.jh-contact .jh-touch-send:focus-visible { background-size: 100% 100% !important; }
@media (prefers-reduced-motion: reduce) { .jh-contact .jh-touch-send { transition: none !important; } }
/* Fill slightly taller than the button so no sliver of the base color shows at the edges */
.jh-contact .jh-touch-send { background-size: 0% calc(100% + 4px) !important; }
.jh-contact .jh-touch-send:hover,
.jh-contact .jh-touch-send:focus-visible { background-size: 100% calc(100% + 4px) !important; }
/* Faded Jersey City skyline behind the white section (the navy band sits on top of it).
The photo is cropped so the Goldman Sachs tower (the tallest building) sits near its left edge; pinning it left keeps the tower on the left. */
.jh-contact {
background:
linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
url("../img/bg/contact-skyline.jpg") left 45% / cover no-repeat;
background-color: #fff;
}
/* "Did you mean jane@gmail.com?" under the email box */
.jh-email-suggest { margin: -8px 0 0; font-size: 14px; color: var(--jh-text); }
.jh-contact .jh-email-fix,
.jh-contact .jh-email-fix:hover,
.jh-contact .jh-email-fix:focus { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--jh-blue); text-decoration: underline; cursor: pointer; top: 0; }