/* =========================================================
PEPPERLABZ CONTACT PAGE
Paste as its own Customizer/WPCode CSS snippet, restricted via
WPCode Smart Conditional Logic to the `contact` page/slug.
This is a DELIBERATE, INDEPENDENT reproduction of the chrome/silver
title system already proven on the PepperLabz Disclaimer page
(assets/css/pepperlabz-disclaimer.css, .plz-disclaimer-* classes).
It duplicates that gradient/typography under its own .plz-contact-*
classes rather than sharing/importing that file, so the protected
Disclaimer page can never be affected by anything added here.
HERO SECTION — confirmed real selectors (from live outerHTML, not
guessed): .elementor-element-6cb2a4e (outer hero container,
data-settings background_background=classic) >
.elementor-element-0d15fa8 (inner wrapper) >
.elementor-element-8f7943d > the real
Contact Us
. This is a DIFFERENT, separate section from
.elementor-element-cbfd5c9/cb6f1e7 (the WPForms widget's own
gray/gradient container, styled further down this file) — do not
conflate them again.
POST-SUBMIT HEADER — still not 100% diagnosed (only the empty
#plz-fixed-header-spacer was captured after a real submission, not
#masthead itself, so the exact mechanism is unconfirmed). Two
defensive, Contact-scoped measures are included below/in
pepperlabz-contact-page.php: a scroll-margin-top on the WPForms
container (covers "confirmation scrolls under the fixed header"),
and a MutationObserver-triggered re-measurement of the header-height
CSS variable (covers "the spacer's height goes stale after the AJAX
swap"). Neither touches pepperlabz-sticky-header.html. If the issue
persists after this, the next real diagnostic step is comparing
getComputedStyle(document.documentElement).getPropertyValue('--plz-header-h')
before vs. after a live submission in devtools console — not another
guess from static markup.
WPForms SAFETY — READ BEFORE EDITING THIS FILE:
Form 8591 has two anti-spam fields that must NEVER be targeted by
any selector in this file, for any property, under any
circumstance: #wpforms-8591-field_7-container and
#wpforms-8591-field_9-container (and their descendants). Every
field-specific rule below uses an explicit allowlist of the six
real, visible field container IDs (_1, _2, _3, _4, _5, _6) instead
of a broad selector like `input[type="text"]` or `.wpforms-field`,
specifically so it is structurally impossible for a rule here to
ever match fields 7 or 9. Keep this pattern for any future edit —
do not "simplify" to a broad selector later.
========================================================= */
.plz-contact-info,
.plz-contact-help-card {
--plz-contact-bg: #fafafa;
--plz-contact-text: #111111;
--plz-contact-muted: #5a6069;
--plz-contact-line: rgba(17, 17, 17, 0.08);
--plz-contact-card: #ffffff;
}
/* ---------------------------------------------------------
HERO — the confirmed, real Elementor "Contact Us" section.
min-height/height reset neutralizes whatever Elementor Advanced
Layout setting was creating the oversized desktop section; the
explicit padding below is what actually controls its final size
("spacious but compact"), not left to Elementor's own value.
--------------------------------------------------------- */
body.page-id-15 .elementor-element-6cb2a4e {
position: relative !important;
/* Was hidden. Changed to visible on purpose: the two main vials below
are now sized to intentionally extend past the hero's own bottom
edge (a deliberate "pop out" effect). This does NOT reopen the
horizontal-overflow risk .ast-container was fixed for earlier in
this project — .plz-contact-hero-bg (the chrome-art wrapper) keeps
its own independent overflow:hidden below, so the decorative smoke
art stays exactly as clipped as before; only the two real vial
![]()
elements (siblings of that wrapper, not inside it) are
affected. */
overflow: visible !important;
min-height: unset !important;
height: auto !important;
padding-top: 60px !important;
padding-bottom: 36px !important;
}
body.page-id-15 .elementor-element-0d15fa8 {
position: relative !important;
z-index: 2 !important;
}
/* Charcoal/black-dominant gradient with only a subtle silver sweep —
the opposite weighting of the Disclaimer page's gradient, which was
too light-dominant to read against this hero's light background +
light decorative art. Readability first: solid dark fallback color,
no white text-shadow. */
body.page-id-15 .elementor-element-8f7943d .elementor-heading-title {
color: #1a1a1c !important;
background: linear-gradient(
135deg,
#16171a 0%,
#3a3d42 22%,
#6e737b 42%,
#9a9ea6 50%,
#6e737b 58%,
#3a3d42 78%,
#16171a 100%
) !important;
background-clip: text !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
text-shadow: none !important;
font-weight: 950 !important;
letter-spacing: -0.02em !important;
}
/* Decorative liquid-chrome background + subtle depth vials — injected
by pepperlabz-contact-page.php as children of the hero container
above (which is why it needs position:relative/overflow:hidden).
Everything in this wrapper shares its own overflow:hidden, so it's
safe to position generously without risking horizontal overflow. */
.plz-contact-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.plz-contact-hero-chrome {
position: absolute;
display: block;
object-fit: contain;
pointer-events: none;
filter: blur(1px);
opacity: 0.18;
}
.plz-contact-hero-chrome-1 {
left: -10vw;
bottom: -22%;
width: 38vw;
max-width: 560px;
transform: rotate(-6deg);
}
.plz-contact-hero-chrome-2 {
right: -10vw;
top: -22%;
width: 34vw;
max-width: 500px;
transform: rotate(8deg) scaleX(-1);
}
/* Background depth vials — small, faint, blurred; live inside the
clipped .plz-contact-hero-bg wrapper (unlike the two main vials
below) precisely so they never compete with them or the title. */
.plz-contact-hero-bg-vial {
position: absolute;
display: block;
object-fit: contain;
pointer-events: none;
filter: blur(1.5px);
animation: plzContactBgVialFloat 14s ease-in-out infinite;
}
.plz-contact-hero-bg-vial-1 {
left: 27%;
top: 4%;
width: 70px;
opacity: 0.14;
}
.plz-contact-hero-bg-vial-2 {
right: 24%;
top: 10%;
width: 58px;
opacity: 0.12;
animation-delay: -6s;
}
.plz-contact-hero-bg-vial-3 {
left: -3%;
bottom: -6%;
width: 92px;
opacity: 0.15;
animation-delay: -10s;
}
@keyframes plzContactBgVialFloat {
0%, 100% { transform: translateY(0) rotate(-1.5deg); }
50% { transform: translateY(-6px) rotate(1.5deg); }
}
/* Main floating vial visuals — real product images (GHK-Cu, KLOW), not
generated artwork. z-index:1 keeps them above the chrome background
(z-index:0) but below the real heading text (z-index:2).
MEASURED, NOT ASSUMED: both source PNGs are 771x771 transparent
canvases, but the actual visible bottle only occupies ~278x596px
(GHK) / ~282x605px (KLOW) of that — about 36% of the canvas width,
~78% of its height, centered. A plain `width` on an object-fit:contain
![]()
scales the WHOLE canvas, so a "300px" vial was only rendering
an ~108px-wide visible bottle. Fixed by switching to object-fit:cover
on a box sized directly to the visible content's own aspect ratio
(~1:2.14) — since the bottle sits centered in the square canvas, the
default 50%/50% object-position crops exactly around it with no
extra positioning needed. Width/height below are now the real,
final visible size, not an indirect canvas multiplier.
Anchored near the hero's own top edge (not vertically centered) —
asymmetric `top` (16px/0px, not 50%) because the visible bottle is
now taller than the shortened hero itself, so centering would push
part of it up toward the fixed header. Anchoring at the top means
the vial's excess height is what intentionally hangs below the
hero's bottom edge — .plz-contact-info's top padding is sized below
to absorb exactly that. */
.plz-contact-hero-vial {
position: absolute;
z-index: 1;
pointer-events: none;
object-fit: cover;
filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.14));
}
.plz-contact-hero-vial-left {
left: 3%;
top: 16px;
width: 190px;
height: 407px;
animation: plzContactVialFloatAnchored 7s ease-in-out infinite;
}
.plz-contact-hero-vial-right {
right: 3%;
top: 0;
width: 175px;
height: 375px;
animation: plzContactVialFloatAnchored 8s ease-in-out infinite;
animation-delay: -3s;
}
/* Used wherever a vial is top-anchored (not vertically centered via
top:50%) — a small oscillation around its own anchor point, instead
of the centered variant's translateY(-50%) baseline. */
@keyframes plzContactVialFloatAnchored {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-10px) rotate(2deg); }
}
/* Used only where a vial is still centered via top:50% (currently
tablet) — keeps its own translateY(-50%) baseline. */
@keyframes plzContactVialFloat {
0%, 100% { transform: translateY(-50%) rotate(-2deg); }
50% { transform: translateY(calc(-50% - 10px)) rotate(2deg); }
}
/* ---------------------------------------------------------
FORM SECTION — the confirmed, real Elementor/WPForms container.
Replaces the existing gray/gradient background + oversized rounded
corners with a neutral page background + a tighter, premium white
card sized to the form itself.
--------------------------------------------------------- */
body.page-id-15 .elementor-element-cbfd5c9 {
background: var(--plz-contact-bg) !important;
padding: 8px 24px 64px !important;
}
body.page-id-15 .elementor-element-cb6f1e7 .elementor-widget-container {
max-width: 640px !important;
margin: 0 auto !important;
background: var(--plz-contact-card) !important;
border: 1px solid var(--plz-contact-line) !important;
border-radius: 24px !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06) !important;
padding: 44px 40px !important;
}
/* ---------------------------------------------------------
SUPPORT INFORMATION — injected by pepperlabz-contact-page.php,
immediately before the form container above.
--------------------------------------------------------- */
.plz-contact-info {
max-width: 900px;
margin: 0 auto;
/* Sized to clear GHK's real overflow below the hero: anchored at
top:16px with a 407px visible height against a ~184px-tall hero
leaves ~240px hanging below its bottom edge (see
.plz-contact-hero-vial-left above). This is a real, deliberate
increase from 56px — not padding for padding's sake — it exists to
be the vial's own landing space, not empty dead air. Reduced at
laptop/tablet below, where the overlap is much smaller. */
padding: 240px 24px 8px;
text-align: center;
}
.plz-contact-info-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.plz-contact-info-card {
background: var(--plz-contact-card);
border: 1px solid var(--plz-contact-line);
border-radius: 16px;
padding: 20px 16px;
text-align: left;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
}
.plz-contact-info-card h3 {
margin: 0 0 6px;
color: var(--plz-contact-text);
font-size: 14px;
font-weight: 800;
letter-spacing: -0.005em;
}
.plz-contact-info-card p {
margin: 0;
color: var(--plz-contact-muted);
font-size: 13px;
line-height: 1.5;
}
.plz-contact-info-contact {
margin: 0;
color: var(--plz-contact-muted);
font-size: 14px;
}
.plz-contact-info-contact a {
color: var(--plz-contact-text);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 2px;
}
.plz-contact-info-response {
display: block;
margin-top: 4px;
font-size: 12.5px;
}
/* ---------------------------------------------------------
"HOW WE CAN HELP" CALLOUT — for the WPForms field 8 HTML-field
content (see pepperlabz-contact-page.php's header comment for the
exact markup to paste into the WPForms builder). Purely a display
card; not a form control, so no interaction with the anti-spam
safety rule above.
--------------------------------------------------------- */
body.page-id-15 .plz-contact-help-card {
background: #f7f7f8 !important;
border: 1px solid var(--plz-contact-line) !important;
border-radius: 16px !important;
padding: 20px 22px !important;
margin-bottom: 28px !important;
}
body.page-id-15 .plz-contact-help-heading {
margin: 0 0 10px !important;
color: var(--plz-contact-text) !important;
font-size: 13px !important;
font-weight: 900 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
body.page-id-15 .plz-contact-help-list {
margin: 0 0 12px !important;
padding-left: 20px !important;
list-style: disc !important;
}
body.page-id-15 .plz-contact-help-list li {
color: var(--plz-contact-muted) !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin-bottom: 4px !important;
}
body.page-id-15 .plz-contact-help-note {
margin: 0 !important;
color: var(--plz-contact-muted) !important;
font-size: 12.5px !important;
line-height: 1.5 !important;
}
/* ---------------------------------------------------------
WPFORMS FIELD STYLING — explicit allowlist of the six real,
visible field containers only (see safety note above). Labels,
inputs, and the textarea are each targeted by the exact container
ID confirmed from the real captured markup, never by a broad
.wpforms-field / input[type=...] selector.
--------------------------------------------------------- */
body.page-id-15 #wpforms-form-8591 .wpforms-field-container {
display: flex !important;
flex-direction: column !important;
gap: 22px !important;
}
body.page-id-15 #wpforms-8591-field_1-container .wpforms-field-label,
body.page-id-15 #wpforms-8591-field_2-container .wpforms-field-label,
body.page-id-15 #wpforms-8591-field_4-container .wpforms-field-label,
body.page-id-15 #wpforms-8591-field_5-container .wpforms-field-label,
body.page-id-15 #wpforms-8591-field_6-container .wpforms-field-label,
body.page-id-15 #wpforms-8591-field_3-container .wpforms-field-label {
color: var(--plz-contact-text, #111) !important;
font-size: 13.5px !important;
font-weight: 700 !important;
letter-spacing: -0.005em !important;
margin-bottom: 8px !important;
}
body.page-id-15 #wpforms-8591-field_1-container .wpforms-required-label,
body.page-id-15 #wpforms-8591-field_2-container .wpforms-required-label,
body.page-id-15 #wpforms-8591-field_4-container .wpforms-required-label,
body.page-id-15 #wpforms-8591-field_3-container .wpforms-required-label {
color: #9aa1ab !important;
font-weight: 600 !important;
}
body.page-id-15 #wpforms-8591-field_1-container input,
body.page-id-15 #wpforms-8591-field_2-container input,
body.page-id-15 #wpforms-8591-field_4-container input,
body.page-id-15 #wpforms-8591-field_5-container input,
body.page-id-15 #wpforms-8591-field_6-container input {
width: 100% !important;
height: 48px !important;
padding: 0 16px !important;
background: #fff !important;
border: 1px solid var(--plz-contact-line, rgba(17, 17, 17, 0.08)) !important;
border-radius: 12px !important;
color: var(--plz-contact-text, #111) !important;
font-size: 15px !important;
outline: none !important;
box-shadow: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body.page-id-15 #wpforms-8591-field_3-container textarea {
width: 100% !important;
min-height: 160px !important;
padding: 14px 16px !important;
background: #fff !important;
border: 1px solid var(--plz-contact-line, rgba(17, 17, 17, 0.08)) !important;
border-radius: 12px !important;
color: var(--plz-contact-text, #111) !important;
font-size: 15px !important;
line-height: 1.5 !important;
resize: vertical !important;
outline: none !important;
box-shadow: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body.page-id-15 #wpforms-8591-field_1-container input:focus,
body.page-id-15 #wpforms-8591-field_2-container input:focus,
body.page-id-15 #wpforms-8591-field_4-container input:focus,
body.page-id-15 #wpforms-8591-field_5-container input:focus,
body.page-id-15 #wpforms-8591-field_6-container input:focus,
body.page-id-15 #wpforms-8591-field_3-container textarea:focus {
border-color: rgba(17, 17, 17, 0.32) !important;
box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.06) !important;
}
body.page-id-15 #wpforms-8591-field_1-container .wpforms-field-sublabel {
color: #9aa1ab !important;
font-size: 12px !important;
font-weight: 600 !important;
margin-top: 4px !important;
}
body.page-id-15 #wpforms-8591-field_4-container .wpforms-field-description,
body.page-id-15 #wpforms-8591-field_5-container .wpforms-field-description,
body.page-id-15 #wpforms-8591-field_6-container .wpforms-field-description {
margin-top: 6px !important;
color: #9aa1ab !important;
font-size: 12.5px !important;
line-height: 1.4 !important;
}
/* ---------------------------------------------------------
SUBMIT BUTTON
--------------------------------------------------------- */
body.page-id-15 #wpforms-form-8591 .wpforms-submit-container {
margin-top: 6px !important;
}
body.page-id-15 #wpforms-submit-8591 {
width: 100% !important;
height: 52px !important;
border-radius: 999px !important;
border: 1px solid #0e0e10 !important;
background: #0e0e10 !important;
color: #fff !important;
font-size: 14.5px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease !important;
}
body.page-id-15 #wpforms-submit-8591:hover {
background: #000 !important;
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16) !important;
}
body.page-id-15 #wpforms-submit-8591:focus-visible {
outline: 2px solid #0e0e10 !important;
outline-offset: 3px !important;
}
body.page-id-15 #wpforms-submit-8591:active {
transform: scale(0.98) !important;
}
/* ---------------------------------------------------------
LAPTOP — "large and dominant" like desktop, scaled down only enough
to avoid edge collisions; keeps the same top-anchored pop-out
composition and float animation as the desktop base, just smaller.
Visible sizes below are direct box dimensions (object-fit:cover),
not canvas widths — same 1:2.14 visible-content ratio measured for
the desktop base.
--------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1279px) {
.plz-contact-hero-vial-left {
width: 150px;
height: 322px;
top: 12px;
}
.plz-contact-hero-vial-right {
width: 138px;
height: 296px;
top: 0;
}
/* Smaller overlap than the large-desktop tier, so a smaller buffer
is enough here — avoids recreating a large blank area. */
.plz-contact-info {
padding-top: 170px;
}
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
.plz-contact-info-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Substantially smaller than desktop/laptop, pushed to the outer
edges. Re-centered to top:50% (no asymmetric top-anchor, no
intentional bottom overlap) — the resulting overlap at this size
is a few px either way, negligible, so no extra top-padding
buffer is needed here (unlike large-desktop/laptop above). Uses
the centered float keyframe (translateY(-50%) baseline) to match
top:50% positioning. */
.plz-contact-hero-vial-left,
.plz-contact-hero-vial-right {
width: 100px;
height: 214px;
top: 50%;
animation-name: plzContactVialFloat;
}
.plz-contact-hero-vial-left {
left: 2%;
}
.plz-contact-hero-vial-right {
right: 2%;
width: 92px;
height: 197px;
}
.plz-contact-hero-bg-vial {
opacity: 0.08 !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 767px) {
.plz-contact-info {
padding: 40px 18px 4px;
}
.plz-contact-info-grid {
grid-template-columns: minmax(0, 1fr);
}
body.page-id-15 .elementor-element-cb6f1e7 .elementor-widget-container {
padding: 32px 22px !important;
border-radius: 20px !important;
}
body.page-id-15 .elementor-element-6cb2a4e {
padding-top: 48px !important;
padding-bottom: 36px !important;
}
/* Small, static (no animation), fixed to the upper corners so they
never crowd the centered title on a narrow viewport. Explicit
height added (object-fit:cover needs both dimensions now — a bare
`width` no longer auto-derives height the way object-fit:contain
did) — same 1:2.14 visible-content ratio as the other breakpoints. */
.plz-contact-hero-vial-left,
.plz-contact-hero-vial-right {
width: 44px;
height: 94px;
top: 12px;
transform: none;
animation: none !important;
}
.plz-contact-hero-vial-left {
left: 12px;
}
.plz-contact-hero-vial-right {
right: 12px;
width: 40px;
height: 86px;
}
.plz-contact-hero-chrome-1,
.plz-contact-hero-chrome-2 {
width: 60vw;
opacity: 0.14;
}
/* Reduced to nothing at mobile, per the brief — keeps the small hero
uncluttered rather than trying to fit three more faint shapes in. */
.plz-contact-hero-bg-vial {
display: none;
}
}
/* ---------------------------------------------------------
POST-SUBMIT HEADER — defensive measure #1 (see header comment).
Tells the browser's native scroll-into-view math (used by
WPForms' own AJAX-success scroll, if that's what it does) to leave
room for the fixed header, using the same --plz-header-h variable
pepperlabz-sticky-header.html already maintains live. Purely
additive: if WPForms doesn't actually scroll here, this rule never
activates and does nothing.
--------------------------------------------------------- */
body.page-id-15 #wpforms-8591 {
scroll-margin-top: var(--plz-header-h, 90px);
}
/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
body.page-id-15 #wpforms-submit-8591 {
transition: none !important;
}
.plz-contact-hero-vial-left,
.plz-contact-hero-vial-right,
.plz-contact-hero-bg-vial {
animation: none !important;
}
}