/* ==========================================================================
Etos - Landing 2 desktop hero (template-home2.php)
Scope: everything here is DESKTOP ONLY (min-width: 768px). Below 768px the
.lp2 block is hidden and the original mobile markup takes over, drawn by
the theme's own responsive.css - the mobile view is untouched.
Isolation: every desktop selector is a .lp2* class that no other stylesheet
in this theme uses. Where the Contact Form 7 internals are shared with the
old template, the rules below are scoped under .lp2 and this file is
enqueued after 'style' and 'responsive', so it wins.
Units: vw/vh throughout, as specified, each multiplied by --a11y-scale so
the accessibility font stepper still moves them (the plugin only sets a
percentage on , which vw ignores completely).
========================================================================== */
/* --------------------------------------------------- accessibility scale -- */
.lp2 { --a11y-scale: 1; }
body.pojo-a11y-resize-font-120 .lp2 { --a11y-scale: 1.10; }
body.pojo-a11y-resize-font-130 .lp2 { --a11y-scale: 1.18; }
body.pojo-a11y-resize-font-140 .lp2 { --a11y-scale: 1.26; }
body.pojo-a11y-resize-font-150 .lp2 { --a11y-scale: 1.34; }
body.pojo-a11y-resize-font-160 .lp2 { --a11y-scale: 1.42; }
body.pojo-a11y-resize-font-170 .lp2 { --a11y-scale: 1.50; }
body.pojo-a11y-resize-font-180 .lp2 { --a11y-scale: 1.58; }
body.pojo-a11y-resize-font-190 .lp2 { --a11y-scale: 1.66; }
body.pojo-a11y-resize-font-200 .lp2 { --a11y-scale: 1.75; }
/* the plugin puts font-size:NN% on p/span/label and CF7 nests
p > span > span, so those percentages multiply. Flatten inside .lp2 and let
the explicit vw sizes below (times the scale) do the work. */
body[class*="pojo-a11y-resize-font-"] .lp2 :is(p, li, span, label, legend, blockquote, dd, dt) {
font-size: inherit !important;
}
/* ...but the feature text is a
with a size of its own, so restate it at a
higher class count than the flatten rule above (0,4,1) vs (0,2,2).
Everything inside the form is restated by accessibility.css already, whose
pins are (0,3,2) and also outrank the flatten. */
body[class*="pojo-a11y-resize-font-"] .lp2 .lp2__icon-list .lp2__text {
font-size: calc(1.2vw * var(--a11y-scale)) !important;
line-height: calc(1.3vw * var(--a11y-scale)) !important;
}
/* same for the two plates in the price / terms strip - they are
too */
body[class*="pojo-a11y-resize-font-"] .lp2 .lp2__boxes .lp2__box {
font-size: calc(1.338vw * var(--a11y-scale)) !important;
line-height: 1.222 !important;
}
/* mobile stays on the theme's own CSS - .lp2 simply does not exist there */
.lp2 { display: none; }
/* ...and .lp2m is the mirror of that: mobile-only, absent above 767px */
.lp2m { display: none; }
@media (min-width: 768px) {
/* ---------------------------------------------------------------- shell -- */
.lp2 {
display: flex;
direction: rtl;
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
background: #A4BCE1;
}
.lp2 *,
.lp2 *::before,
.lp2 *::after { box-sizing: border-box; }
/* media on the right (first flex item in RTL), panel on the left */
.lp2__media {
order: 1;
width: 63vw;
height: 100vh;
position: relative;
overflow: hidden;
}
.lp2__panel {
order: 2;
width: 37vw;
height: 100vh;
position: relative;
overflow: hidden;
background: #A4BCE1;
}
/* gold arc, top-left corner of the content side */
.lp2__vector {
position: absolute;
top: -4vh;
left: -3.4vw;
width: 9vw;
height: auto;
z-index: 1;
pointer-events: none;
user-select: none;
z-index: 9;
}
/* content column: normal flow, so enlarged text pushes down instead of
colliding the way the old absolutely positioned blocks did */
/* The colour seam is NOT a fixed gradient stop - it is the boundary between
two real blocks, so it always lands exactly where the price strip and form
begin, at any viewport aspect ratio. A gradient pinned to 61% only lined up
on one screen shape. */
.lp2__inner {
position: relative;
z-index: 2;
height: 100vh;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
}
/* 1 0 auto, never 1 1 auto: if this block is allowed to shrink, enlarged text
overflows it and lands on top of the price strip below (measured at step 160+) */
.lp2__top {
flex: 1 0 auto;
display: flex;
flex-direction: column;
align-items: center;
/* bottom padding must exceed the price strip's -2.1vw pull, or the strip
is dragged onto the feature list once the text is enlarged */
padding: 3.4vh 2vw calc(2.1vw + 2.5vh);
background: #A4BCE1;
}
.lp2__bottom {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 2vw 3.4vh;
background: #541D3B;
}
/* ------------------------------------------------------------ wordmark -- */
.lp2__logo { flex: 0 0 auto; }
/* the wordmark is artwork, not text - it stays put when the accessibility
stepper enlarges the copy (no var(--a11y-scale) here on purpose) */
.lp2__logo img {
display: block;
width: 19vw;
max-width: 100%;
height: auto;
}
/* ---------------------------------------------------------------- copy -- */
.lp2__lead {
flex: 0 0 auto;
/* min() so the gap compresses on short windows instead of overflowing */
margin: min(5.5vh, 3.6vw) 0 0;
max-width: 30vw;
text-align: center;
font-family: var(--font-family-AlmoniDLAAA-Regular, 'AlmoniDLAAA-Regular');
color: #541d3a;
font-size: calc(1.3vw * var(--a11y-scale));
line-height: calc(1.5vw * var(--a11y-scale));
}
.lp2__icon-list {
flex: 0 0 auto;
list-style: none;
margin: min(5vh, 3.3vw) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 30vw;
}
.lp2__item {
display: flex;
align-items: center;
}
.lp2__item > img {
width: calc(1.54vw * var(--a11y-scale));
max-width: calc(1.54vw * var(--a11y-scale));
height: calc(1.54vw * var(--a11y-scale));
margin-left: 0.75vw;
margin-right: 0.75vw;
flex: 0 0 auto;
}
.lp2__text {
margin-bottom: 0 !important;
color: #541d3a;
font-family: var(--font-family-AlmoniDLAAA-Regular, 'AlmoniDLAAA-Regular');
font-size: calc(1.2vw * var(--a11y-scale));
line-height: calc(1.3vw * var(--a11y-scale));
}
/* --------------------------------------------------- price / terms strip -- */
/* Two real plates instead of box-text.png. Measured off that asset (2147x305):
the white plate is 1007px of its width and the gold 1140px, the copy is
Almoni Bold at ~110.5px with a 135px leading, and the colours are the
artwork's own #fdf7f4 / #3f031c and #ae8658 / #fff.
The plate height is built out of em, not a fixed vw: 2 lines of 1.222em plus
0.158em top and bottom comes to 2.76em, which is exactly 305/110.5. That way
only the font-size has to be restated when the strip changes width (tablet
band below), and the strip still grows correctly under the a11y stepper.
Still pulled up so it straddles the colour seam - -2.1vw puts ~58% of the
strip in the blue and ~42% in the purple, as in the design. */
.lp2__boxes {
flex: 0 0 auto;
margin: -2.1vw 0 0;
width: 26vw;
max-width: 100%;
display: flex;
align-items: stretch;
}
.lp2__box {
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0.158em 0.4em;
font-family: var(--font-family-AlmoniDLAAA-Bold, 'AlmoniDLAAA-Bold');
font-weight: 400;
font-size: calc(1.338vw * var(--a11y-scale));
line-height: 1.222;
}
.lp2__box--light {
flex: 0 0 46.9%;
background: #fdf7f4;
color: #3f031c;
}
.lp2__box--gold {
flex: 0 0 53.1%;
background: #ae8658;
color: #fff;
}
/* ---------------------------------------------------------------- form -- */
/* The form is deliberately NOT restyled here. Every rule the old template
uses for it - input, .submit-btn input, .wpcf7-checkbox, .form-top-text,
.form-bottom-text, .form-end-text, .wpcf7-not-valid-tip,
.wpcf7-response-output, #contactUs, .form-field-col, .pv-links - is global
in style.css (never scoped to .form-order), so it already applies inside
.lp2__form. The bootstrap row/col grid is still loaded too, and
accessibility.css already scales all of those selectors.
Only the container box is set here. */
.lp2__form {
flex: 0 0 auto;
margin: 2.6vh 0 0;
width: 26vw;
max-width: 100%;
}
/* style.css gives .form-end-text `position:relative; top:3vh`, which paints it
27px below its flow position without reserving the space - measured overlap
with the links underneath was 6px. Put it back in flow (which also lifts it)
and give the links a real gap of their own. */
.lp2__form .form-end-text {
position: static;
top: auto;
}
/* Same trap on the CF7 response message: style.css gives it
`position:relative; top:-3vh`, so when a validation error appears it is
painted 27px higher than its flow position and lands on the terms line
above it. Put it in flow with a gap of its own. */
.lp2__form .wpcf7-response-output {
position: static;
top: auto;
margin: 1.2vh auto 0 !important;
}
.lp2__form .pv-links { margin-top: 2.8vh; }
.form-top-text {
margin-bottom: 2vh;
margin-top: 2vh;
}
/* ------------------------------------------ form under an enlarged font --
Two things in the inherited form CSS only work at the design size, and
both were measured breaking on this template:
1. .wpcf7-not-valid-tip is position:absolute, centred ON the input. At the
design size it is 77px wide inside a 186px field, so it reads as a hint
beside the placeholder. At step 200 it is 163px inside that same 186px
field - it covers the placeholder completely. Put it in flow underneath
the field instead.
2. .submit-col is capped at max-width:28% (106px). The button label scales
to 37.8px at step 200 and no longer fits, so it spills out of its box.
Let the column size to its content and let the row wrap.
Both are gated on the accessibility class, so the form at rest is still
pixel-for-pixel the old template. */
body[class*="pojo-a11y-resize-font-"] .lp2__form .wpcf7-not-valid-tip {
position: static;
top: auto;
left: auto;
right: auto;
transform: none;
display: block;
width: 100%;
margin-top: 0.5vh;
line-height: 1.35;
}
body[class*="pojo-a11y-resize-font-"] .lp2__form .checkbox-group {
flex-wrap: wrap;
gap: 1.2vh 0.5vw;
}
body[class*="pojo-a11y-resize-font-"] .lp2__form .check-col {
flex: 1 1 60%;
min-width: 0;
}
body[class*="pojo-a11y-resize-font-"] .lp2__form .submit-col {
flex: 0 0 auto;
width: auto;
max-width: none;
}
body[class*="pojo-a11y-resize-font-"] .lp2__form .submit-btn input {
width: auto;
max-width: 100%;
white-space: normal;
}
/* --------------------------------------------------------------- media -- */
/* title lockup over the slider - untouched asset, original placement */
.lp2__title {
position: absolute;
top: 8vh;
right: 12vw;
z-index: 3;
pointer-events: none;
}
/* The original rule was width:37vw + height:14.5vh, which distorts this
1494x272 asset - 1.34x vertically on a 1440x900 desktop and 1.44x on a
portrait tablet. height:auto renders it at its true proportions at every
size. It comes out slightly shorter than the old template on desktop
(97px instead of 131px at 1440) but it is no longer squashed. */
.lp2__title img {
display: block;
width: 37vw;
max-width: 37vw;
height: auto;
}
.lp2-slider {
position: absolute;
inset: 0;
overflow: hidden;
cursor: grab;
/* let the browser handle vertical scroll but give us the horizontal axis,
otherwise a swipe is consumed as a page pan and never reaches the JS */
touch-action: pan-y;
}
.lp2-slider.is-dragging { cursor: grabbing; }
.lp2-slider img { user-select: none; -webkit-user-drag: none; }
.lp2-slider__track { position: absolute; inset: 0; }
.lp2-slider__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 600ms ease;
}
.lp2-slider__slide.is-active { opacity: 1; }
.lp2-slider__slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top right;
}
/* The button hugs its arrow instead of being a full-height strip. It used to
be height:100%, so the two arrows were 900px-tall columns covering 28% of
the slider width - and because the drag handler ignores anything inside a