/* =========================================================================
Voley PLT — Contact page
One full black band, no hero: details on the left, the form panel right.
Primitives (.voley-btn, .voley-eyebrow, .voley-sr …) live in base.css.
A note on specificity: .voley-root sets a white canvas and an ink heading
colour, and Formidable ships selectors as strong as
`.frm_style_x.with_frm_style input[type=text]` (0,3,1). Rules that have to
survive both are written as `.voley-root.voley-root …` — the class repeated
on the *same* element, which is what doubles its weight.
========================================================================= */
/* Canvas ------------------------------------------------------------------
.voley-root paints itself white; this page is the one place we take that
back, so the band, the header above it and the drawer all read as one. */
.voley-root.voley-contact-root {
background: var(--v-black);
color: rgba(255, 255, 255, 0.7);
}
.voley-contact {
position: relative;
background: var(--v-black);
/* A floor, not a viewport unit: 100vh looked right on a laptop but opened a
tall band of dead black on a big monitor. This keeps the band substantial
when a short form is swapped in without ever outrunning the content. */
min-height: 640px;
/* `clip`, not `hidden`: hidden would make this a scroll container, and a
scroll container ancestor kills position:sticky on the left column. */
overflow: clip;
}
/* Two soft lights: warm behind the form, cool low on the copy. Purely
decorative, so it sits under everything and ignores the pointer. */
.voley-contact::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(760px 500px at 88% -4%, rgba(246, 137, 30, 0.18), rgba(246, 137, 30, 0) 66%),
radial-gradient(620px 460px at 2% 96%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 68%);
}
/* Hairline along the top edge, picking up the header's accent strap. */
.voley-contact::after {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: linear-gradient(90deg, rgba(246, 137, 30, 0.5), rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0));
}
.voley-contact__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.04fr;
align-items: start;
gap: 88px;
/* Clears the fixed header on its own, so the page still reads correctly
if it is dropped under the overlay header variant. */
padding-top: calc(var(--v-section) * 1.15);
padding-bottom: var(--v-section);
}
/* Left column -------------------------------------------------------------
Rides along while the form scrolls: the details stay on screen the whole
way down a long form. `align-self: start` is what lets it move inside its
grid area — a stretched grid item is already the full row height and has
nowhere to travel. */
.voley-contact__info {
position: sticky;
top: calc(var(--v-header-h) + 28px);
align-self: start;
/* Hold the copy off the form panel on very wide screens. */
max-width: 520px;
}
/* The admin bar sits above the fixed header, so push the offset down by its
height for logged-in users — same treatment the header itself gets. */
.admin-bar .voley-contact__info {
top: calc(var(--v-header-h) + 60px);
}
.voley-root.voley-root .voley-contact__title {
margin-bottom: 18px;
color: var(--v-white);
font-family: var(--v-font-display);
/* It is an
for the document outline, but it sits at the h2 size so the
Contact page reads at the same scale as every other section heading. */
font-size: var(--v-fs-h2);
font-style: italic;
font-weight: 800;
letter-spacing: -0.004em;
line-height: 1.12;
text-transform: uppercase;
text-wrap: balance;
}
.voley-contact__text {
max-width: 46ch;
margin-bottom: 42px;
font-size: var(--v-fs-body);
line-height: 1.75;
color: rgba(255, 255, 255, 0.62);
}
/* Detail rows ------------------------------------------------------------- */
.voley-cdetails {
display: grid;
gap: 2px;
margin-bottom: 44px;
}
.voley-cdetail {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.voley-cdetail:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.voley-cdetail__icon {
display: grid;
place-items: center;
flex: none;
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--v-r-sm);
background: rgba(255, 255, 255, 0.04);
color: var(--v-accent);
transition: background-color 0.3s var(--v-ease), border-color 0.3s var(--v-ease);
}
.voley-cdetail:hover .voley-cdetail__icon {
background: var(--v-accent-soft);
border-color: rgba(246, 137, 30, 0.4);
}
.voley-cdetail__body {
min-width: 0;
}
.voley-cdetail__label {
display: block;
margin-bottom: 5px;
font-size: var(--v-fs-eyebrow);
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
}
.voley-cdetail__value {
display: block;
font-size: var(--v-fs-body);
font-weight: 600;
line-height: 1.55;
color: var(--v-white);
transition: color 0.25s var(--v-ease);
}
a.voley-cdetail__value:hover {
color: var(--v-accent);
}
/* Socials ----------------------------------------------------------------- */
.voley-contact__socials {
display: flex;
align-items: center;
gap: 18px;
}
.voley-contact__slabel {
font-size: var(--v-fs-eyebrow);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
}
.voley-csocials {
display: flex;
gap: 10px;
}
.voley-csocial {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 50%;
color: rgba(255, 255, 255, 0.78);
transition: background-color 0.25s var(--v-ease), border-color 0.25s var(--v-ease), color 0.25s var(--v-ease), transform 0.25s var(--v-ease);
}
.voley-csocial:hover {
background: var(--v-accent);
border-color: var(--v-accent);
color: var(--v-white);
transform: translateY(-2px);
}
/* Right column — form panel ----------------------------------------------- */
.voley-cpanel {
position: relative;
padding: 38px 36px 40px;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 22px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9);
}
/* Accent cap on the panel, echoing the band's top hairline. */
.voley-cpanel::before {
content: "";
position: absolute;
left: 34px;
right: 34px;
top: -1px;
height: 2px;
border-radius: var(--v-r-pill);
background: linear-gradient(90deg, var(--v-accent), rgba(246, 137, 30, 0));
}
.voley-cpanel__head {
margin-bottom: 28px;
}
.voley-root.voley-root .voley-cpanel__title {
margin-bottom: 8px;
color: var(--v-white);
font-family: var(--v-font-display);
font-size: var(--v-fs-h2);
font-style: italic;
font-weight: 800;
letter-spacing: -0.004em;
line-height: 1.15;
text-transform: uppercase;
}
.voley-cpanel__text {
font-size: var(--v-fs-sm);
line-height: 1.6;
color: rgba(255, 255, 255, 0.55);
}
.voley-cpanel__note {
display: flex;
align-items: center;
gap: 8px;
margin-top: 20px;
font-size: var(--v-fs-xs);
color: rgba(255, 255, 255, 0.45);
}
.voley-cpanel__note svg {
flex: none;
color: var(--v-accent);
}
/* Formidable, dark ---------------------------------------------------------
Formidable prints its own light theme after this file, so every rule below
is double-scoped to out-weigh it. Selectors are written against Formidable's
markup *and* the bare controls, so a plain HTML form dropped in here picks
up the same look. */
.voley-cform .frm_forms,
.voley-cform .with_frm_style {
max-width: none;
margin: 0;
}
/* Formidable wraps its fields in a