- ) at max-width 1160,
leaving an empty nav wrapper between 821-1160 (the Franken-bar
dead zone Michael caught). Force the ul back to flex so the nav
items stay visible all the way down to our 820 cutoff. */
.header #menu-desktop-menu {
display: flex !important;
}
}
/* Below 820: hamburger toggle replaces the desktop nav. We rebuild the
hamburger from scratch instead of inheriting retrograde's broken
absolute-positioned spans (which were either invisible or stretched
across the viewport because their containing block was wrong). */
@media only screen and (max-width: 820px) {
.header .primary_nav_wrap {
display: none !important;
}
.header .button_container {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: stretch !important;
cursor: pointer;
width: 28px !important;
height: 22px !important;
padding: 0 !important;
position: relative !important;
top: auto !important;
right: auto !important;
overflow: visible;
z-index: 10001;
}
/* Reset retrograde's position:absolute on the bars. They become flex
children stacked vertically inside the 28×22 container. */
.header .button_container span {
display: block !important;
position: static !important;
top: auto !important;
left: auto !important;
width: 100% !important;
height: 2px !important;
background: #f6f6f6 !important;
border: 0 !important;
transform: none;
transform-origin: center;
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* X-animation when the mobile overlay menu is active. The retrograde
theme adds .menu-open to .header (not body). Cover both. */
.header.menu-open .button_container .top,
body.menu-open .header .button_container .top {
transform: translateY(10px) rotate(45deg) !important;
}
.header.menu-open .button_container .middle,
body.menu-open .header .button_container .middle {
opacity: 0 !important;
}
.header.menu-open .button_container .bottom,
body.menu-open .header .button_container .bottom {
transform: translateY(-10px) rotate(-45deg) !important;
}
}
/* ---------- Team bio circles ------------------------------- */
/* Retrograde's .circle-profile only sets border-radius: 100%, which
produces ellipses when the source image isn't square. Force the
image to fill a square box with object-fit: cover so every team
member's circle reads identically regardless of source aspect. */
.circle-profile {
width: 100% !important;
max-width: 360px;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
object-position: center top;
display: block;
margin: 0 auto;
}
/* ---------- About — team grid card images ------------------ */
/* All 4 team-grid cards must render at identical dimensions regardless
of source aspect (Aubrey 7:8, Kevin tall portrait, Chad 7:8, Michael
vertical). Enforce 4:5 portrait aspect + object-fit: cover.
TDD: tests/smoke.spec.js asserts identical width AND height across all
.team-loop-post img elements. */
.team-loop-post img {
width: 100% !important;
aspect-ratio: 4 / 5 !important;
object-fit: cover !important;
object-position: center top;
display: block;
}
/* Uniform card height even when text wraps (Chad's title wraps to 2 lines).
Grid stretches all children to the tallest. Caption box uses flex so
short titles still fill to the bottom and the slate band aligns across
all four cards. */
.team-loop-post-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
align-items: stretch;
}
.team-loop-post {
display: flex;
flex-direction: column;
height: 100%;
}
.team-loop-post-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
/* Reserve enough height for a 2-line title (matches Chad's wrap) so
every card's caption band ends at the same y-coordinate. */
min-height: 96px;
}
@media only screen and (max-width: 980px) {
.team-loop-post-wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 560px) {
.team-loop-post-wrapper { grid-template-columns: 1fr; }
}
/* About — OUR COMPANY hero: keep the text column and the photo column
proportionate. At very wide viewports the row's content-middle alignment
made the column behind the text balloon vertically. Cap the row height
to the photo's aspect, force the inner content to its natural height,
and let the photo determine the row's bound. */
body.about .vc_row.box-right-col.pt120 {
align-items: stretch !important;
}
body.about .vc_row.box-right-col.pt120 > .wpb_column {
display: flex;
align-items: center;
}
body.about .vc_row.box-right-col.pt120 .vc_column-inner { width: 100%; }
body.about .vc_row.box-right-col.pt120 img {
max-height: 720px;
width: auto;
height: auto;
object-fit: contain;
margin: 0 auto;
display: block;
}
/* THE TEAM heading moves up 20px per Michael. */
body.about .vc_row.pt60.pb140 h4 {
text-transform: uppercase;
letter-spacing: 1.5px;
margin-top: -20px !important;
}
/* Home — Rummer Revival section: target ~80px visible gap from top of
dark background to the cap-line of "THE RUMMER REVIVAL". The h4 has
line-height 55px (font 50px) which adds ~25px of typographic overhang
above the visible cap; we compensate by cutting the row's CSS padding
to ~27px so the rendered cap-line lands ~80px below the dark-bg top.
Mobile keeps its own tight value. */
body.home .vc_row.dark-mode.pt80.mpt40 {
padding-top: 27px !important;
}
body.home .vc_row.dark-mode.pt80.mpt40 .wpb_text_column:first-child h4 {
margin-top: 0 !important;
margin-bottom: 12px !important;
line-height: 1.05 !important;
}
@media only screen and (max-width: 820px) {
body.home .vc_row.dark-mode.pt80.mpt40 {
padding-top: 12px !important;
}
body.home .vc_row.dark-mode.pt80.mpt40 .wpb_text_column:first-child h4 {
margin-bottom: 8px !important;
}
}
/* Home hero (mobile): force ALL CAPS and ensure the tagline renders on
two lines. Desktop already wraps via the inline
; mobile was collapsing because of font-size scaling. */ @media only screen and (max-width: 820px) { body.home .hero h1, body.home section.hero h1, body.home .wrapper.hero h1 { text-transform: uppercase !important; } /* Retrograde's mobile rule hides the .hero h1 (which contains the
), collapsing the tagline to one line. Force the span back to inline so the inner
can break "Built for vitality." onto line two. */ body.home .hero h1 span, body.home section.hero h1 span, body.home .wrapper.hero h1 span { display: inline !important; } } /* About — invert nav chrome on white background. Without a dark plate behind, the slate-on-translucent nav goes unreadable. Force dark text + dark logo when body.about is active. */ /* Light pages (About, Policies, Privacy, Cookies, Contact form-page body): semi-transparent light tint so the dark nav text + logo invert reads. */ body.about .header, body.policies .header, body.privacy .header, body.cookies .header { background: rgba(255, 255, 255, 0.88); } body.about .header.scroll-header, body.policies .header.scroll-header, body.privacy .header.scroll-header, body.cookies .header.scroll-header { background: rgba(255, 255, 255, 0.97); } body.about .header .primary_nav_wrap a, body.about .header .primary_nav_wrap a:visited, body.policies .header .primary_nav_wrap a, body.privacy .header .primary_nav_wrap a, body.cookies .header .primary_nav_wrap a { color: var(--rd-slate) !important; } body.about .header .primary_nav_wrap a:hover, body.about .header .primary_nav_wrap a[aria-current="page"], body.policies .header .primary_nav_wrap a:hover, body.policies .header .primary_nav_wrap a[aria-current="page"] { color: var(--rd-orange) !important; } /* Logo: invert via filter — the logo.svg is light by default. */ body.about .header .logo img, body.about .header .logo svg, body.policies .header .logo img, body.policies .header .logo svg, body.privacy .header .logo img, body.privacy .header .logo svg, body.cookies .header .logo img, body.cookies .header .logo svg { filter: invert(1) brightness(0.15); } /* Hamburger bars dark on About */ body.about .button_container span { background: var(--rd-slate) !important; } /* About — THE TEAM section. Michael wants more breathing room above "The Team" heading than the rest of the site (this is About's exception to the 80px baseline). Image row keeps modest pb, team row gets a generous pt to push THE TEAM heading down. */ body.about .vc_row.box-right-col.pt120.pb120 { padding-bottom: 40px !important; } body.about .vc_row.pt60.pb140 { padding-top: 80px !important; padding-bottom: 80px !important; } /* And bump the gap between "The Team" h4 and the first row of cards. */ body.about .team-loop-post-wrapper { margin-top: 40px; } /* Mobile-overlay nav appearance (the .overlay-menu that shows when the hamburger is tapped). The retrograde theme styles this already via #overlay; we just ensure the menu links are legible with v1 typography. */ .overlay-menu ul { list-style: none; padding: 0; margin: 0; } .overlay-menu li { margin: 18px 0; } .overlay-menu a { color: #fff; font-family: "industry", sans-serif; font-size: 24px; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; } /* ---------- 3. Home: single-column Revival block + video --- */ /* Full bleed: break out of retrograde's .container 8% side padding so the slate section spans edge to edge of the viewport. Inner content stays at 920px max so the type column reads. */ .rd-home-revival { background: var(--rd-slate); color: var(--rd-paper); padding: 80px 24px; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* Belt and suspenders: also kill any inherited overflow that would clip. */ position: relative; } .rd-home-revival-inner { max-width: 920px; margin: 0 auto; } /* Hero text: anchored in the lower-middle of the frame (above the patio, near the fireplace zone) per Michael's mark-up. Shadow halved so it reads as a subtle separation, not a hard outline. */ body.home .wrapper.hero { align-items: flex-end !important; } body.home .hero-text { margin-top: 0 !important; /* In the garden, bottom of frame. */ margin-bottom: 40px; } /* Single line at every viewport: kill the inline
and scale font with clamp so the line always fits in the hero's width. */ body.home .hero h1 br { display: none !important; } body.home .hero h1, body.contact .hero h1 { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.27), 0 1px 3px rgba(0, 0, 0, 0.35); } body.home .hero h1 { white-space: nowrap; /* Min 18px (legible on 390 mobile), scales by viewport, capped at 56px so it stops growing on wide monitors. */ font-size: clamp(18px, 4.2vw, 56px) !important; line-height: 1.05 !important; letter-spacing: 0 !important; } @media only screen and (max-width: 820px) { body.home .hero-text { margin-bottom: 24px; } } .rd-home-revival h4 { font-family: "industry", sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 44px; line-height: 1.05; margin: 0 0 24px 0; color: var(--rd-paper); } .rd-home-revival p { font-size: 17px; line-height: 1.65; margin: 0 0 18px 0; color: rgba(246, 246, 246, 0.92); } .rd-home-revival .home-cta-row { margin: 32px 0; } /* Video full-width with subtle border, aligned to text column edges. */ .rd-home-video { margin: 40px 0; border: 1px solid rgba(246, 246, 246, 0.18); border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; } .rd-home-video iframe { width: 100%; height: 100%; border: 0; display: block; } @media only screen and (max-width: 820px) { .rd-home-revival { padding: 48px 20px; } .rd-home-revival h4 { font-size: 30px; letter-spacing: 1.5px; } .rd-home-revival p { font-size: 16px; } } .home-cta-row { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; } .home-cta-row .btn1, .home-cta-row .btn2, .home-cta-row .btn3 { display: inline-block; } /* ---------- 3b. Rummer Legacy ------------------------------- */ /* Page background — slate, so the white Bob feature card pops. */ body.rummer-legacy { background: var(--rd-slate); } /* Hero: solid slate band with the headline, no photo (avoids reusing the Bob-alone photo featured below). */ body.rummer-legacy .wrapper.hero.legacy-hero, .wrapper.hero.legacy-hero { background: var(--rd-slate); background-image: none; min-height: 360px; padding: 96px 24px 64px; color: var(--rd-paper); } .wrapper.hero.legacy-hero h1 { color: var(--rd-paper); } /* Robert Rummer feature — white card text-left + Bob photo overflow-right against the slate page background. IMPORTANT: stacked sections add their pb + next pt. So this section owns ITS 80 above (top) but contributes 0 below — the next section owns the 80 below. That way the gap between sections is exactly 80, not 160. */ .rd-bob-feature { background: var(--rd-slate); padding: 80px 24px 0; } /* Legacy-wide spacing — top 27px on every vc_row (compensating for the ~53px of internal line-height/text-column margin above section headings). Net visible gap: ~80px from the previous section's bottom to the next section's heading cap. */ body.rummer-legacy .vc_row { padding-top: 27px !important; padding-bottom: 0 !important; } /* And zero out heading margins so the cap lands tight inside the row. */ body.rummer-legacy .vc_row h2, body.rummer-legacy .vc_row h3, body.rummer-legacy .vc_row h4 { margin-top: 0 !important; line-height: 1.1 !important; } /* Future-Honor closer: 80 above, 80 below (it's the last block before the v1 footer — needs breathing room on both sides). */ body.rummer-legacy .rd-future-honor { padding: 80px 24px; } @media only screen and (max-width: 820px) { body.rummer-legacy .vc_row { padding-top: 48px !important; padding-bottom: 0 !important; } .rd-bob-feature { padding: 48px 16px 0; } body.rummer-legacy .rd-future-honor { padding: 48px 16px; } } .rd-bob-feature-inner { max-width: 1280px; margin: 0 auto; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 0; } .rd-bob-card { background: #ffffff; color: var(--rd-slate); padding: 56px clamp(28px, 4vw, 64px); border-radius: 6px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35); position: relative; z-index: 2; /* Card extends slightly into the photo column so the image overlaps it. */ margin-right: -56px; /* Stay roughly proportionate to the Bob photo on wide viewports. Without this the card vertically balloons past the photo because align-items center fills the row height. */ align-self: center; max-height: 640px; } .rd-bob-h { font-family: "industry", sans-serif; text-transform: uppercase; letter-spacing: 1.5px; font-size: 44px; line-height: 1.05; margin: 0 0 24px 0; color: var(--rd-slate); } .rd-bob-card p { font-size: 16px; line-height: 1.65; margin: 0 0 16px 0; color: var(--rd-slate); } .rd-bob-photo { position: relative; z-index: 1; } .rd-bob-photo img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4); } @media only screen and (max-width: 820px) { .rd-bob-feature { padding: 40px 16px 56px; } .rd-bob-feature-inner { grid-template-columns: 1fr; gap: 24px; } .rd-bob-card { margin-right: 0; padding: 32px 24px; order: 2; } .rd-bob-photo { order: 1; } .rd-bob-h { font-size: 30px; } } /* BUILDING THE FUTURE, HONORING THE PAST — slate-dark closer above the sketch-backed v1 footer (Legacy page). Matches the footer's tonal band so the two sit as one continuous dark zone. */ .rd-future-honor { background: var(--rd-slate); color: var(--rd-paper); padding: 80px 24px; } .rd-future-honor-inner { max-width: 980px; margin: 0 auto; } /* Shared section heading: A MODERN ICON + BUILDING THE FUTURE both render at the same scale per Michael (was 34/44 mismatch). */ .rd-section-h, .rd-modern-icon-inner > h2, .rd-future-honor h2 { font-family: "industry", sans-serif; color: var(--rd-paper); letter-spacing: 2px; text-transform: uppercase; font-size: 44px; line-height: 1.05; margin: 0 0 28px 0; } .rd-modern-icon p, .rd-future-honor p { font-size: 17px; line-height: 1.65; margin: 0 0 18px 0; color: rgba(246, 246, 246, 0.92); } /* A MODERN ICON BUILT TO LAST: single column with text. CTA. video below. */ .rd-modern-icon { background: var(--rd-slate); color: var(--rd-paper); padding: 80px 24px 0; } .rd-modern-icon-inner { max-width: 980px; margin: 0 auto; } .rd-modern-icon .home-cta-row { margin: 32px 0; } .rd-legacy-video { margin: 40px 0 0; border: 1px solid rgba(246, 246, 246, 0.18); border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; } .rd-legacy-video iframe { width: 100%; height: 100%; border: 0; display: block; } @media only screen and (max-width: 820px) { .rd-section-h, .rd-modern-icon-inner > h2, .rd-future-honor h2 { font-size: 30px; letter-spacing: 1.5px; margin-bottom: 20px; } .rd-future-honor { padding: 56px 20px 48px; } .rd-modern-icon { padding: 56px 20px 0; } .rd-modern-icon p, .rd-future-honor p { font-size: 16px; } } /* ---------- 3c. Contact — dark page + white inset card ------ */ body.contact { background: var(--rd-slate); } /* White inset card — 40px responsive side margins (per Michael), pulled up tight against the nav chrome. Explicit .rd-contact-card wrapper bounds it cleanly so the v1-footer renders edge-to-edge. */ body.contact .rd-contact-card { background: #ffffff; color: var(--rd-slate); border-radius: 14px; padding: 56px clamp(28px, 5vw, 72px); margin: 24px 40px 80px; max-width: none; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35); } @media only screen and (max-width: 820px) { body.contact .rd-contact-card { margin: 16px 16px 56px; padding: 32px 20px; } } /* Kill retrograde's pt100/pb120 on the outer row so the card actually sits tight to the top (the row's padding was pushing the card down). */ body.contact .wpb-content-wrapper > .vc_row.pt100.pb120 { padding-top: 0 !important; padding-bottom: 0 !important; } /* Break the card out of retrograde's .container/.wrapper max-width on Contact only — so the 40px side margin is from the viewport edge, not from inside an 1100px-wide container. */ body.contact .wrapper, body.contact .container, body.contact .wpb-content-wrapper { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.contact h4 { color: var(--rd-slate); } /* Rust Submit button — explicit on Contact in case some other rule overrides .v1-submit-button. */ body.contact .v1-submit-button { background: var(--rd-orange) !important; color: #ffffff !important; border: 0 !important; } body.contact .v1-submit-button:hover { background: #7a2f17 !important; } /* ---------- 3d-1. 404 page --------------------------------- */ body.error404 { background: #ffffff; } .rd-404 { max-width: 640px; margin: 0 auto; padding: 120px 32px 160px; text-align: center; color: var(--rd-slate); } .rd-404 h1 { font-family: "industry", sans-serif; font-size: 120px; line-height: 1; letter-spacing: 2px; margin: 0 0 8px 0; color: var(--rd-slate); } .rd-404-sub { font-family: "industry", sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 20px; margin: 0 0 24px 0; } .rd-404-help { font-size: 16px; line-height: 1.65; margin: 0 0 32px 0; color: rgba(22, 35, 42, 0.78); } .rd-404-cta { margin: 0 0 32px 0; } .rd-404-quicklinks { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; border-top: 1px solid rgba(22, 35, 42, 0.12); padding-top: 24px; } .rd-404-quicklinks a { color: var(--rd-slate); text-decoration: none; font-family: "industry", sans-serif; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.2s ease, color 0.2s ease; } .rd-404-quicklinks a:hover { border-bottom-color: var(--rd-orange); color: var(--rd-orange); } @media (max-width: 640px) { .rd-404 { padding: 80px 20px 100px; } .rd-404 h1 { font-size: 84px; } .rd-404-sub { font-size: 17px; } } /* ---------- 3d-2. Cookie consent banner -------------------- */ .rd-cookie { position: fixed; z-index: 9000; right: 24px; bottom: 24px; max-width: 380px; background: var(--rd-slate); color: var(--rd-paper); padding: 20px 22px; border-radius: 10px; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35); font-family: "industry", sans-serif; font-size: 14px; line-height: 1.55; transform: translateY(140%); transition: transform 0.32s ease; } .rd-cookie.is-visible { transform: translateY(0); } .rd-cookie p { margin: 0 0 14px 0; color: rgba(246, 246, 246, 0.92); } .rd-cookie a { color: var(--rd-orange); text-decoration: underline; } .rd-cookie a:hover { color: #c45a36; } .rd-cookie-actions { display: flex; gap: 10px; align-items: center; } .rd-cookie button { font-family: "industry", sans-serif; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 18px; border-radius: 4px; cursor: pointer; border: 0; transition: background 0.2s ease, color 0.2s ease; } .rd-cookie-accept { background: var(--rd-orange); color: #fff; } .rd-cookie-accept:hover { background: #7a2f17; } .rd-cookie-decline { background: transparent; color: rgba(246, 246, 246, 0.78); border: 1px solid rgba(246, 246, 246, 0.28) !important; } .rd-cookie-decline:hover { color: #fff; border-color: rgba(246, 246, 246, 0.55) !important; } @media (max-width: 640px) { .rd-cookie { right: 12px; left: 12px; bottom: 12px; max-width: none; } } /* ---------- 3d. Policies — clean textual page --------------- */ .rd-policies { max-width: 760px; margin: 0 auto; padding: 80px 24px; color: var(--rd-slate); font-family: "industry", sans-serif; } .rd-policies h1 { font-size: 38px; line-height: 1.1; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 12px 0; color: var(--rd-slate); } .rd-policies-intro { font-size: 16px; line-height: 1.6; margin: 0 0 48px 0; color: rgba(22, 35, 42, 0.75); } .rd-policies section { margin: 0 0 48px 0; } .rd-policies h2 { font-size: 24px; line-height: 1.2; letter-spacing: 0.5px; text-transform: uppercase; margin: 0 0 20px 0; padding-bottom: 8px; border-bottom: 1px solid rgba(22, 35, 42, 0.15); color: var(--rd-slate); } .rd-policies h3 { font-size: 15px; line-height: 1.3; letter-spacing: 0.3px; text-transform: uppercase; margin: 24px 0 8px 0; color: var(--rd-slate); } .rd-policies p, .rd-policies li { font-size: 15px; line-height: 1.65; color: var(--rd-slate); } .rd-policies p { margin: 0 0 12px 0; } .rd-policies ul { margin: 0 0 16px 18px; padding: 0; } .rd-policies li { margin: 0 0 6px 0; } .rd-policies a { color: var(--rd-orange); text-decoration: underline; } .rd-policies-updated { font-size: 13px; color: rgba(22, 35, 42, 0.55); margin-top: 32px; } @media only screen and (max-width: 820px) { .rd-policies { padding: 56px 20px; } .rd-policies h1 { font-size: 30px; } .rd-policies h2 { font-size: 20px; } } /* ---------- 4. About cleanups ------------------------------- */ /* Strike the old 'Build a Rummer' button on About — link goes back to /contact per pivot; if it ever needs to be hidden, uncomment: .about .btn1[href*="contact"] { display: none; } */ /* ---------- 5. Forms ---------------------------------------- */ /* Mailing-list opt-in row */ .v1-mailing-optin { margin: 16px 0 8px; font-size: 14px; display: flex; align-items: flex-start; gap: 10px; } .v1-mailing-optin input[type="checkbox"] { margin-top: 4px; } .v1-mailing-optin label { flex: 1; line-height: 1.4; cursor: pointer; } /* Cloudflare Turnstile widget container */ .cf-turnstile { margin: 16px 0; } /* Stub state — visible until real keys are set */ .cf-turnstile[data-sitekey^="0x4AAAAAAA-PENDING"] { display: inline-block; padding: 10px 14px; border: 1px dashed #aaa; background: #f6f6f6; border-radius: 4px; color: #555; font-size: 12px; font-family: monospace; } .cf-turnstile[data-sitekey^="0x4AAAAAAA-PENDING"]::before { content: "[ CAPTCHA placeholder — Cloudflare Turnstile renders here once keys are set ]"; } /* ---------- v1 Contact form styles -------------------------- */ .v1-contact-form-wrapper { margin: 24px 0; max-width: 720px; } #v1-contact-form .v1-field { margin-bottom: 18px; } #v1-contact-form .v1-field-row { display: flex; gap: 16px; flex-wrap: wrap; } #v1-contact-form .v1-field-half { flex: 1 1 calc(50% - 8px); min-width: 220px; margin-bottom: 18px; } #v1-contact-form label { display: block; font-family: "industry", sans-serif; font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: #16232a; margin-bottom: 6px; } #v1-contact-form .req { color: var(--rd-orange); margin-left: 2px; } #v1-contact-form .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #v1-contact-form input[type="text"], #v1-contact-form input[type="email"], #v1-contact-form input[type="tel"], #v1-contact-form textarea { width: 100%; padding: 12px 14px; font-family: "RM Neue", "Helvetica Neue", Arial, sans-serif; font-size: 15px; background: #fff; border: 1px solid #d6d6d2; border-radius: 3px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #v1-contact-form input:focus, #v1-contact-form textarea:focus { outline: none; border-color: var(--rd-orange); box-shadow: 0 0 0 3px rgba(219, 129, 70, 0.12); } #v1-contact-form textarea { resize: vertical; min-height: 120px; } #v1-contact-form .v1-submit-row { margin-top: 24px; } #v1-contact-form .v1-submit-button { background: #16232a; color: #fff; border: 0; padding: 14px 32px; font-family: "industry", sans-serif; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; border-radius: 3px; cursor: pointer; transition: background 0.15s ease; } #v1-contact-form .v1-submit-button:hover { background: var(--rd-orange); } /* ---------- Page-internal: hide visible hello@ on Contact --- */ .contact-spam-magnet { display: none !important; } /* ---------- v1 Form status (success / error) — #46 ----------- */ .v1-form-status { margin: 0 0 24px; padding: 22px 24px; border-radius: 4px; outline: none; font-family: "freight-text-pro", Georgia, serif; border-left: 4px solid var(--rd-orange); background: #fff; color: var(--rd-slate); box-shadow: 0 1px 2px rgba(22, 35, 42, 0.06); } .v1-form-status[hidden] { display: none; } .v1-form-status--success { border-left-color: var(--rd-orange); background: #fff; } .v1-form-status--error { border-left-color: #b3261e; background: #fdf3f2; } .v1-form-status__title { margin: 0 0 8px; font-family: "industry", sans-serif; font-size: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rd-slate); } .v1-form-status__body { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--rd-slate); } .v1-form-status__body:last-child { margin-bottom: 0; } .v1-form-status__link { color: var(--rd-orange); text-decoration: underline; font-weight: 600; } .v1-form-status__link:hover, .v1-form-status__link:focus { color: var(--rd-slate); }