/* ==========================================================================
CLASES DE SNOWBOARD — PAGE 444 ONLY
Enqueued exclusively by ski_school_child_clases_esqui_assets() behind
is_page( 390 ). Every selector is additionally prefixed with
body.page-id-444, so nothing here can reach the Home (1552 / 37) or any
other internal page. Delete this file and the guarded enqueue in
functions.php to fully revert to native Divi styling.
This file REUSES the approved Home2 design system (tokens, eyebrow,
display H2, card, steps, FAQ, final CTA, Sierra cut, contour) but is a
page of its own: a static 3-up option grid instead of the home slider,
an indexed personalisation band, a slim support bar and a compact
cross-link. No JavaScript is added — the page relies only on the motion
classes that already ship in the child theme (ski-reveal-stagger,
ski-heading-reveal, ski-image-reveal, ski-number-reveal).
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS — identical values to the approved Home2 reference so the two
pages share one grid, one palette and one vertical rhythm.
-------------------------------------------------------------------------- */
body.page-id-444 {
--ski-deep: #214A5E;
--ski-blue: #26ADE2;
--ski-ink: #0F2430;
--ski-ice: #E8F1F5;
--ski-snow: #FFFFFF;
--ski-line: rgba(33, 74, 94, 0.16);
--ski-muted: rgba(15, 36, 48, 0.72);
/* Aligned to the project's Content Max Width variable (1240px). */
--ski-edge: max(48px, calc((100vw - 1240px) / 2));
--ski-space: clamp(64px, 6vw, 96px);
--ski-space-dense: clamp(52px, 4.8vw, 76px);
--ski-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
overflow-x: clip;
}
@media (max-width: 980px) {
body.page-id-444 { --ski-edge: 40px; --ski-space: 64px; --ski-space-dense: 56px; }
}
@media (max-width: 767px) {
body.page-id-444 { --ski-edge: 24px; --ski-space: 56px; --ski-space-dense: 48px; }
}
/* --------------------------------------------------------------------------
2. HERO — image-led internal-page header.
Shorter and calmer than the Home hero: one column, bottom-anchored, a
single primary action plus a quiet in-page link. The photograph and the
gradient stay native Divi settings; only composition lives here.
-------------------------------------------------------------------------- */
body.page-id-444 #ski-hero.ski-page-hero {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* Legibility scrim on the native overlay layer (the module's own gradient
attr does not compile in this Divi 5 build, same as on Home2). */
body.page-id-444 #ski-hero.ski-page-hero > .et_pb_fullwidth_header_overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
/* The rider sits high and centre in this photograph, so the scrim is pulled
tighter into the bottom-left corner than on the ski page: it covers the
headline block and clears by roughly 60% across and 45% up, leaving the
jump, the lift line and the ridge reading as a real photograph rather
than a tinted field. */
background-image:
radial-gradient(92% 80% at 0% 100%, rgba(15, 36, 48, 0.92) 0%, rgba(15, 36, 48, 0.62) 32%, rgba(15, 36, 48, 0.16) 62%, rgba(15, 36, 48, 0) 82%),
linear-gradient(0deg, rgba(15, 36, 48, 0.58) 0%, rgba(15, 36, 48, 0.10) 28%, rgba(15, 36, 48, 0) 46%);
}
@media (max-width: 980px) {
body.page-id-444 #ski-hero.ski-page-hero > .et_pb_fullwidth_header_overlay {
background-image: linear-gradient(180deg, rgba(15, 36, 48, 0.26) 0%, rgba(15, 36, 48, 0.08) 24%, rgba(15, 36, 48, 0.6) 54%, rgba(15, 36, 48, 0.9) 100%);
}
}
body.page-id-444 #ski-hero.ski-page-hero .et_pb_fullwidth_header_container {
position: relative;
z-index: 2;
width: 100%;
max-width: none;
margin: 0;
}
body.page-id-444 #ski-hero.ski-page-hero .header-content-container { display: block; width: 100%; }
body.page-id-444 #ski-hero.ski-page-hero .header-content {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
max-width: none;
padding: 0;
margin: 0;
text-align: left;
}
/* Eyebrow with the recurring short blue rule */
body.page-id-444 #ski-hero.ski-page-hero .et_pb_fullwidth_header_subhead {
order: 0;
display: inline-flex;
align-items: center;
gap: 14px;
margin: 0 0 20px;
}
body.page-id-444 #ski-hero.ski-page-hero .et_pb_fullwidth_header_subhead::before {
content: "";
flex: 0 0 auto;
width: 36px;
height: 2px;
background: currentColor;
}
body.page-id-444 #ski-hero.ski-page-hero .et_pb_module_header {
order: 1;
max-width: 15ch;
margin: 0 0 20px;
padding: 0;
text-wrap: balance;
}
body.page-id-444 #ski-hero.ski-page-hero .et_pb_header_content_wrapper { order: 2; margin: 0; text-align: left; }
body.page-id-444 #ski-hero.ski-page-hero .et_pb_header_content_wrapper p { margin: 0; padding: 0; }
body.page-id-444 #ski-hero.ski-page-hero .et_pb_header_button_wrapper {
order: 3;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 12px 22px;
margin: 28px 0 0;
}
body.page-id-444 #ski-hero.ski-page-hero .et_pb_header_button_wrapper .et_pb_button { margin: 0; }
/* The two hero actions are deliberately NOT styled here. Radius, transitions,
the pointer- and motion-guarded hover, the focus ring and the
reduced-motion fallbacks all come from the shared button system already in
style.css (#ski-hero .et_pb_button_one / .et_pb_button_two, .ski-btn,
.et_pb_promo_button), and the outline anatomy of the secondary action —
transparent fill, 1.5px Snow rule, 12px radius, 44px, 14px/32px padding —
is the same one the approved Home hero declares, set in this module's own
Divi attrs. Redefining any of it locally is exactly the near-duplicate the
project rules forbid. */
/* The hero's Divi column is floated; a new block formatting context keeps
that float from intruding into the trust strip below it. */
body.page-id-444 .et_pb_section:has(.ski-page-hero),
body.page-id-444 .et_pb_row:has(.ski-page-hero) { display: flow-root; }
@media (max-width: 980px) {
body.page-id-444 #ski-hero.ski-page-hero .et_pb_module_header { max-width: 17ch; margin-bottom: 16px; }
body.page-id-444 #ski-hero.ski-page-hero .et_pb_fullwidth_header_subhead { margin-bottom: 14px; }
body.page-id-444 #ski-hero.ski-page-hero .et_pb_header_button_wrapper { margin-top: 24px; }
}
@media (max-width: 767px) {
body.page-id-444 #ski-hero.ski-page-hero .et_pb_header_button_wrapper { gap: 6px 18px; }
body.page-id-444 #ski-hero.ski-page-hero .et_pb_header_button_wrapper .et_pb_button_one { width: 100%; justify-content: center; }
}
/* --------------------------------------------------------------------------
3. BAND RHYTHM — one vertical system for every section below the hero, so
the page never opens an unintentional white gap. Sections opt in with
.ski-band; .ski-band--dense is the tighter tier used by the support bar
and the cross-link.
-------------------------------------------------------------------------- */
body.page-id-444 .ski-band {
position: relative;
padding: var(--ski-space) var(--ski-edge) !important;
}
body.page-id-444 .ski-band--dense { padding: var(--ski-space-dense) var(--ski-edge) !important; }
body.page-id-444 .ski-band > .et_pb_row {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Heading block -> content block: one gap, everywhere. */
body.page-id-444 .ski-band > .ski-section-head { margin-bottom: clamp(28px, 3vw, 44px) !important; }
body.page-id-444 .ski-section-head > .et_pb_column {
width: 100% !important;
max-width: 720px !important;
margin: 0 !important;
background-image: none !important;
}
/* --------------------------------------------------------------------------
4. SHARED TYPE — eyebrow, display H2, lead paragraph.
Identical scale to the approved Home2 reference.
-------------------------------------------------------------------------- */
body.page-id-444 .ski-eyebrow { margin: 0 0 14px !important; }
body.page-id-444 .ski-eyebrow .et_pb_text_inner {
display: inline-flex;
align-items: center;
gap: 14px;
color: var(--ski-blue);
}
body.page-id-444 .ski-eyebrow .et_pb_text_inner::before {
content: "";
flex: 0 0 auto;
width: 32px;
height: 2px;
background: currentColor;
}
body.page-id-444 .ski-eyebrow p {
margin: 0 !important;
padding: 0 !important;
font-family: var(--gvid-b5547a12-68b7-4dee-9a11-c6f6c6f0d32b), system-ui, sans-serif;
font-size: 12.5px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
color: var(--ski-blue) !important;
}
body.page-id-444 .ski-display-h2,
body.page-id-444 .ski-display-h2 .et_pb_heading_container {
margin: 0 !important;
text-align: left !important;
transform: none !important;
}
body.page-id-444 .ski-display-h2 .et_pb_module_header {
margin: 0 !important;
padding: 0 !important;
max-width: 17ch;
font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.25rem) !important;
font-weight: 800 !important;
line-height: 1.03 !important;
letter-spacing: -0.03em !important;
color: var(--ski-deep) !important;
text-align: left !important;
text-shadow: none !important;
text-wrap: balance;
}
body.page-id-444 .ski-display-h2--sm .et_pb_module_header {
max-width: 14ch;
font-size: clamp(1.875rem, 1.1rem + 1.9vw, 2.9rem) !important;
line-height: 1.06 !important;
}
/* The approved two-tone heading device, reused verbatim from the Home: the
second half of the phrase in Ski School Blue. Used exactly twice on this
page — the personalisation heading and the closing CTA — and never on a
heading next to either of them. */
body.page-id-444 .ski-lead { margin: 18px 0 0 !important; }
body.page-id-444 .ski-lead p {
margin: 0;
padding: 0;
max-width: 58ch;
font-size: 18px;
line-height: 1.6;
color: var(--ski-muted);
}
@media (max-width: 767px) {
body.page-id-444 .ski-lead p { font-size: 16.5px; }
}
/* --------------------------------------------------------------------------
5. TRUST STRIP — flush surface change under the hero, not a floating card.
-------------------------------------------------------------------------- */
body.page-id-444 .ski-inner-trust {
position: relative;
z-index: 1;
margin-top: 0;
border-radius: 0;
box-shadow: none;
}
@media (min-width: 981px) {
body.page-id-444 .ski-inner-trust .et_pb_blurb .et_pb_module_header {
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
color: var(--ski-deep) !important;
}
}
/* --------------------------------------------------------------------------
6. SIERRA CUT — one registration mark, two placements on this page. Same
18px L,
same 1.5px weight, same colour as the approved Home; only the corner it
hugs changes. Never animated, never interactive.
-------------------------------------------------------------------------- */
body.page-id-444 .ski-cross--mark .ski-cross__media::before,
body.page-id-444 .ski-final .ski-cta-box::after {
content: "";
position: absolute;
z-index: 2;
width: 18px;
height: 18px;
border-style: solid;
border-color: var(--ski-blue);
border-width: 1.5px 1.5px 0 0;
pointer-events: none;
}
/* 1. the two authored snowboard photographs — top-left, mirrored. The ski
cross-sell deliberately does NOT carry it: the mark belongs to this page's
own subject. */
body.page-id-444 .ski-cross--mark .ski-cross__media::before {
top: 14px;
left: 14px;
border-width: 1.5px 0 0 1.5px;
}
/* 2. the final CTA copy — top-right, pointing into the contour */
body.page-id-444 .ski-final .ski-cta-box { position: relative; }
body.page-id-444 .ski-final .ski-cta-box::after { top: 2px; right: -34px; }
@media (max-width: 767px) {
body.page-id-444 .ski-cross--mark .ski-cross__media::before { display: none; }
body.page-id-444 .ski-final .ski-cta-box::after { right: -6px; }
}
/* --------------------------------------------------------------------------
7. BRAND CONTOUR — exactly two appearances on this page, both oversized,
both cropped by their section edge, neither of them wallpaper. multiply
drops the artwork's white field. Inert and out of flow, so they cannot
create horizontal overflow.
-------------------------------------------------------------------------- */
body.page-id-444 .ski-contour { position: relative; overflow: hidden; isolation: isolate; }
body.page-id-444 .ski-contour::after {
content: "";
position: absolute;
z-index: 0;
background-repeat: no-repeat;
background-size: contain;
mix-blend-mode: multiply;
pointer-events: none;
}
body.page-id-444 .ski-contour > .et_pb_row { position: relative; z-index: 1; }
/* 1. PROGRESSION — asset 03 carries its ink in the left column, so it enters from
the lower left, one gutter outside the grid. ~55% visible. */
body.page-id-444 .ski-editorial::after {
left: calc(-1 * var(--ski-edge));
bottom: -14%;
width: min(1120px, 70vw);
aspect-ratio: 1915 / 821;
background-image: url("/wp-content/uploads/2026/09/ski-school-sierra-nevada-bg-logo-contornos-03.png");
opacity: 0.5;
}
/* 2. FINAL CTA — the signature, right-anchored so the logo-derived mass sits
in the half opposite the copy. ~60% visible. */
body.page-id-444 .ski-final::after {
right: calc(-1 * var(--ski-edge) - 7vw);
top: 50%;
transform: translateY(-50%);
width: min(1100px, 64vw);
aspect-ratio: 1672 / 941;
background-image: url("/wp-content/uploads/2026/09/ski-school-sierra-nevada-bg-logo-contornos.png");
opacity: 0.78;
}
@media (max-width: 980px) {
body.page-id-444 .ski-editorial::after {
left: -34vw;
bottom: -6%;
width: 148vw;
opacity: 0.38;
}
body.page-id-444 .ski-final::after {
top: auto;
bottom: -8%;
right: -32vw;
width: 130vw;
transform: none;
opacity: 0.48;
}
}
/* --------------------------------------------------------------------------
9. PERSONALISATION BAND — the one tonal change on the page.
An indexed three-part answer to "will this fit me?", set on Ice so it
separates the comparison above from the booking mechanics below without
adding another photograph.
-------------------------------------------------------------------------- */
body.page-id-444 .ski-adapt { border-top: 1px solid var(--ski-line); }
/* Three short items do not need the full section gap under their heading;
pulling the rule up makes the heading and the three columns read as one
block instead of two things sharing a large empty section. */
body.page-id-444 .ski-adapt > .ski-section-head { margin-bottom: clamp(20px, 2vw, 30px) !important; }
body.page-id-444 .ski-adapt__grid {
position: relative;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
column-gap: clamp(32px, 3.2vw, 64px) !important;
row-gap: 0 !important;
counter-reset: ski-adapt;
--ski-aico: var(--ski-icon-lg);
--ski-aico-col: calc(var(--ski-icon-lg) + 4px);
--ski-aico-gap: 14px;
}
/* Same technical grammar as the booking steps: ONE continuous hairline
carrying the three items, with a short Ski School Blue tick where each one
begins. Reused rather than reinvented — what differs is the content
(line icons and an index) not the device. */
body.page-id-444 .ski-adapt__grid::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--ski-line);
pointer-events: none;
}
body.page-id-444 .ski-adapt__grid > .et_pb_column {
position: relative;
counter-increment: ski-adapt;
width: auto !important;
max-width: none !important;
flex: 1 1 auto !important;
margin: 0 !important;
padding: 30px 0 0 !important;
border-top: 0 !important;
background-image: none !important;
}
body.page-id-444 .ski-adapt__grid > .et_pb_column::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 64px;
height: 3px;
background: var(--ski-blue);
}
body.page-id-444 .ski-adapt__grid .et_pb_blurb { margin: 0 !important; }
body.page-id-444 .ski-adapt__grid .et_pb_blurb_content {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: var(--ski-aico-gap);
width: 100%;
max-width: none !important;
text-align: left !important;
}
body.page-id-444 .ski-adapt__grid .et_pb_main_blurb_image {
display: block !important;
flex: 0 0 var(--ski-aico-col);
width: var(--ski-aico-col) !important;
align-self: flex-start;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
}
body.page-id-444 .ski-adapt__grid .et_pb_main_blurb_image img {
display: block;
width: var(--ski-aico) !important;
height: var(--ski-aico) !important;
object-fit: contain;
border-radius: 0 !important;
}
body.page-id-444 .ski-adapt__grid .et_pb_blurb_container {
flex: 1 1 auto;
padding: 0 !important;
text-align: left !important;
}
/* Index sits above the title, inside the copy column, so it never competes
with the icon. */
body.page-id-444 .ski-adapt__grid .et_pb_blurb_container::before {
content: counter(ski-adapt, decimal-leading-zero);
display: block;
margin: 0 0 4px;
font-family: var(--gvid-b5547a12-68b7-4dee-9a11-c6f6c6f0d32b), system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1.4;
color: var(--ski-blue);
font-variant-numeric: tabular-nums;
}
body.page-id-444 .ski-adapt__grid .et_pb_module_header {
margin: 0 0 8px !important;
padding: 0 !important;
font-size: 21px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
letter-spacing: -0.015em !important;
color: var(--ski-deep) !important;
text-align: left !important;
}
body.page-id-444 .ski-adapt__grid .et_pb_blurb_description p {
margin: 0;
padding: 0;
max-width: 40ch;
font-size: 16.5px;
line-height: 1.6;
color: var(--ski-muted);
}
@media (max-width: 980px) {
/* recomposed, not shrunk: one item per row, and the single horizontal rule
becomes a rule per item so the progression still reads vertically — the
same transformation the booking steps make at this breakpoint */
body.page-id-444 .ski-adapt__grid {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 28px !important;
--ski-aico: var(--ski-icon-lg);
--ski-aico-col: calc(var(--ski-icon-lg) + 4px);
}
body.page-id-444 .ski-adapt__grid::after { display: none; }
body.page-id-444 .ski-adapt__grid > .et_pb_column {
padding: 22px 0 !important;
border-top: 1px solid var(--ski-line) !important;
}
body.page-id-444 .ski-adapt__grid > .et_pb_column:last-child { padding-bottom: 0 !important; }
body.page-id-444 .ski-adapt__grid .et_pb_blurb_description p { max-width: 60ch; }
}
/* --------------------------------------------------------------------------
10. BOOKING STEPS — large numerals on a single technical rule.
Same component as the approved Home2 reference.
-------------------------------------------------------------------------- */
body.page-id-444 .ski-steps {
--ski-step-gap: clamp(28px, 3.4vw, 72px);
--ski-step-num: clamp(2.75rem, 1.8rem + 2.2vw, 3.75rem);
padding-top: var(--ski-space-dense) !important;
padding-bottom: var(--ski-space-dense) !important;
}
body.page-id-444 .ski-steps > .ski-section-head { margin-bottom: clamp(16px, 1.6vw, 24px) !important; }
body.page-id-444 .ski-steps .ski-booking-steps-row::before { content: none !important; display: none !important; }
body.page-id-444 .ski-steps .ski-booking-steps-row {
position: relative;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 var(--ski-step-gap) !important;
}
body.page-id-444 .ski-steps .ski-booking-steps-row::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--ski-line);
pointer-events: none;
}
body.page-id-444 .ski-steps .ski-booking-steps-row > .et_pb_column {
position: relative;
width: auto !important;
margin: 0 !important;
padding: 26px 0 0 !important;
border-top: 0 !important;
text-align: left !important;
background-image: none !important;
}
body.page-id-444 .ski-steps .ski-booking-steps-row > .et_pb_column::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 64px;
height: 3px;
background: var(--ski-blue);
}
/* Directional chevron in the gap, level with the numerals: 01 > 02 > 03. */
body.page-id-444 .ski-steps .ski-booking-steps-row > .et_pb_column:not(:last-child)::after {
content: "";
position: absolute;
top: calc(26px + var(--ski-step-num) * 0.42);
right: calc(var(--ski-step-gap) / -2 - 5px);
width: 10px;
height: 10px;
border-top: 1.5px solid var(--ski-blue);
border-right: 1.5px solid var(--ski-blue);
transform: rotate(45deg);
opacity: 0.7;
}
body.page-id-444 .ski-steps .ski-step-badge {
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 0 12px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
body.page-id-444 .ski-steps .ski-step-badge p {
margin: 0 !important;
padding: 0 !important;
font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
font-size: var(--ski-step-num) !important;
font-weight: 800 !important;
line-height: 0.9 !important;
letter-spacing: -0.04em !important;
color: var(--ski-deep) !important;
}
body.page-id-444 .ski-steps .et_pb_blurb .et_pb_main_blurb_image { display: none !important; }
body.page-id-444 .ski-steps .et_pb_blurb,
body.page-id-444 .ski-steps .et_pb_blurb_content {
width: 100%;
padding: 0 !important;
max-width: none !important;
margin: 0 !important;
align-items: flex-start !important;
text-align: left !important;
}
body.page-id-444 .ski-steps .et_pb_blurb_container,
body.page-id-444 .ski-steps .et_pb_blurb .et_pb_module_header,
body.page-id-444 .ski-steps .et_pb_blurb_description {
width: 100%;
padding: 0 !important;
text-align: left !important;
}
body.page-id-444 .ski-steps .et_pb_blurb .et_pb_module_header {
margin: 0 0 6px !important;
padding: 0 !important;
font-size: clamp(1.1875rem, 1.05rem + 0.35vw, 1.375rem) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--ski-deep) !important;
}
body.page-id-444 .ski-steps .et_pb_blurb_description p {
margin: 0;
padding: 0;
max-width: 34ch;
font-size: 16.5px;
line-height: 1.6;
color: var(--ski-muted);
}
@media (max-width: 980px) { body.page-id-444 .ski-steps { --ski-step-gap: 28px; } }
@media (max-width: 767px) {
body.page-id-444 .ski-steps { --ski-step-num: 3rem; }
body.page-id-444 .ski-steps .ski-booking-steps-row {
grid-template-columns: minmax(0, 1fr);
row-gap: 40px !important;
}
body.page-id-444 .ski-steps .ski-booking-steps-row::after { display: none; }
body.page-id-444 .ski-steps .ski-booking-steps-row > .et_pb_column {
display: grid !important;
grid-template-columns: 64px minmax(0, 1fr);
column-gap: 14px;
align-items: start;
padding-top: 26px !important;
border-top: 1px solid var(--ski-line) !important;
}
body.page-id-444 .ski-steps .ski-booking-steps-row > .et_pb_column::before { width: 48px; }
body.page-id-444 .ski-steps .ski-booking-steps-row > .et_pb_column:not(:last-child) {
background-image: linear-gradient(var(--ski-line), var(--ski-line));
background-repeat: no-repeat;
background-position: 23px calc(26px + var(--ski-step-num) + 6px);
background-size: 1px calc(100% - 26px - var(--ski-step-num) + 6px);
}
body.page-id-444 .ski-steps .ski-booking-steps-row > .et_pb_column:not(:last-child)::after {
top: auto;
right: auto;
bottom: -28px;
left: 19px;
transform: rotate(135deg);
}
body.page-id-444 .ski-steps .ski-step-badge { margin: 0 !important; }
}
/* --------------------------------------------------------------------------
11. SUPPORT BAR — equipment note.
A slim utility line between two hairlines, not a full section: it answers
a practical question on the way to booking and must not interrupt the
page with a screen of empty white.
-------------------------------------------------------------------------- */
/* An Ice panel inside a Snow section, not a full Ice band and not a giant
card: the practical question gets its own surface and its own weight on the
way to booking, while the page keeps Ice for the two sections that earn it
(personalisation and FAQ). Icon / index / title / copy / action share one
grid, so the whole block reads as a single practical unit. */
body.page-id-444 .ski-support__bar > .et_pb_column {
--ski-sico: 52px;
--ski-sico-col: 56px;
display: grid !important;
grid-template-columns: var(--ski-sico-col) minmax(0, 1fr) auto;
column-gap: clamp(18px, 2vw, 26px);
align-items: center;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: clamp(26px, 2.8vw, 38px) clamp(24px, 2.6vw, 36px) !important;
border: 0 !important;
border-radius: var(--gvid-1a7de837-bdb9-4740-aea3-b222bbda122d, 14px);
background-color: var(--ski-ice) !important;
background-image: none !important;
}
/* Same icon philosophy as the approved Home: a 56px column holding a 52px
box, optically centred on the whole text block, no disc, no shadow, the
line art's own colours. */
body.page-id-444 .ski-support__icon {
grid-column: 1;
grid-row: 1 / span 3;
align-self: center;
width: var(--ski-sico-col) !important;
margin: 0 !important;
line-height: 0;
}
body.page-id-444 .ski-support__icon img {
display: block;
width: var(--ski-sico) !important;
height: var(--ski-sico) !important;
object-fit: contain;
border-radius: 0 !important;
box-shadow: none !important;
}
body.page-id-444 .ski-support__bar .ski-eyebrow { grid-column: 2; grid-row: 1; margin: 0 0 8px !important; }
body.page-id-444 .ski-support__title { grid-column: 2; grid-row: 2; margin: 0 !important; }
body.page-id-444 .ski-support__title .et_pb_module_header {
margin: 0 !important;
padding: 0 !important;
font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.4rem) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: -0.015em !important;
color: var(--ski-deep) !important;
text-align: left !important;
}
body.page-id-444 .ski-support__copy { grid-column: 2; grid-row: 3; margin: 8px 0 0 !important; }
body.page-id-444 .ski-support__copy p {
margin: 0;
padding: 0;
max-width: 52ch;
font-size: 16.5px;
line-height: 1.6;
color: var(--ski-muted);
}
/* The rental action is a real control, not metadata: the approved secondary
outline button module sits in its own column, optically centred against the
whole icon+copy block, with enough air that it never crowds the text. The
grid child is Divi's button WRAPPER, not the anchor. */
body.page-id-444 .ski-support__bar .et_pb_button_module_wrapper {
grid-column: 3;
grid-row: 1 / span 3;
align-self: center;
justify-self: end;
margin: 0 0 0 clamp(28px, 3.4vw, 56px) !important;
}
@media (max-width: 980px) {
/* two columns is not enough room for copy AND a button, so the action moves
under the block and the icon keeps its own column */
body.page-id-444 .ski-support__bar > .et_pb_column { grid-template-columns: var(--ski-sico-col) minmax(0, 1fr); }
body.page-id-444 .ski-support__bar .et_pb_button_module_wrapper {
grid-column: 2;
grid-row: 4;
justify-self: start;
margin: 20px 0 0 !important;
}
}
@media (max-width: 767px) {
/* the icon moves above the copy so the title keeps a full-width measure */
body.page-id-444 .ski-support__bar > .et_pb_column {
--ski-sico: 44px;
--ski-sico-col: 48px;
grid-template-columns: minmax(0, 1fr);
row-gap: 14px;
padding: 26px 22px !important;
}
body.page-id-444 .ski-support__icon { grid-column: 1; grid-row: 1; }
body.page-id-444 .ski-support__bar .ski-eyebrow { grid-column: 1; grid-row: 2; margin: 0 !important; }
body.page-id-444 .ski-support__title { grid-column: 1; grid-row: 3; }
body.page-id-444 .ski-support__copy { grid-column: 1; grid-row: 4; margin: 0 !important; }
body.page-id-444 .ski-support__bar .et_pb_button_module_wrapper {
grid-column: 1;
grid-row: 5;
margin: 6px 0 0 !important;
}
}
/* --------------------------------------------------------------------------
12. CROSS-LINK — "prefieres snowboard?".
A photograph and a short panel, kept deliberately smaller than the option
cards: this is a redirection for a minority of visitors, not a fourth
option competing with the three above.
-------------------------------------------------------------------------- */
body.page-id-444 .ski-cross { border-top: 1px solid var(--ski-line); }
body.page-id-444 .ski-cross__row {
display: grid !important;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
column-gap: clamp(28px, 3.4vw, 64px) !important;
align-items: center !important;
}
body.page-id-444 .ski-cross__row > .et_pb_column {
width: auto !important;
max-width: none !important;
margin: 0 !important;
background-image: none !important;
}
/* Height, crop and corner are the image module's own Divi settings (Sizing,
Fit and the Radius/Small design variable) so they stay editable in the
builder; this only makes the wrapper fill the box Divi sized. */
body.page-id-444 .ski-cross__media { position: relative; }
body.page-id-444 .ski-cross__media .et_pb_image { width: 100% !important; margin: 0 !important; }
body.page-id-444 .ski-cross__media .et_pb_image_wrap {
display: block;
width: 100% !important;
overflow: hidden;
}
/* HEIGHT IS DELIBERATELY NOT SET HERE. Divi compiles the image module's own
Sizing value onto the ![]()
as `height: ; width: auto`; forcing
height:100% from here would resolve against an auto-height wrapper and hand
the box back to the photograph's intrinsic ratio, which is what made the
authored heights inert. Overriding only the WIDTH lets Divi keep control of
the height — so an administrator changing it in the builder actually sees
the change — while object-fit does the cropping. */
body.page-id-444 .ski-cross__media .et_pb_image img {
display: block;
width: 100% !important;
max-width: 100% !important;
object-fit: cover;
object-position: 50% 32%;
}
/* Per-photograph crop, keyed to the file so it survives re-ordering. */
body.page-id-444 .ski-cross__media img[src*="snowboard-montana"] { object-position: 50% 42%; }
body.page-id-444 .ski-cross__media img[src*="clase-de-snowboard"] { object-position: 50% 30%; }
body.page-id-444 .ski-cross__media img[src*="FB_IMG_1667899933812"] { object-position: 50% 38%; }
body.page-id-444 .ski-cross__panel .et_pb_module_header {
margin: 0 !important;
padding: 0 !important;
max-width: 16ch;
font-size: clamp(1.625rem, 1.15rem + 1.3vw, 2.25rem) !important;
font-weight: 800 !important;
line-height: 1.08 !important;
letter-spacing: -0.028em !important;
color: var(--ski-deep) !important;
text-align: left !important;
}
body.page-id-444 .ski-cross__panel > .ski-eyebrow { margin: 0 0 12px !important; }
body.page-id-444 .ski-cross__panel > .et_pb_text:not(.ski-eyebrow) { margin: 16px 0 0 !important; }
body.page-id-444 .ski-cross__panel p {
margin: 0;
padding: 0;
max-width: 46ch;
font-size: 17px;
line-height: 1.6;
color: var(--ski-muted);
}
body.page-id-444 .ski-cross__panel p:has(> a) { margin-top: 16px; }
body.page-id-444 .ski-cross__panel a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
font-size: 15px;
font-weight: 700 !important;
color: var(--ski-deep) !important;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 5px;
transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
body.page-id-444 .ski-cross__panel a:hover,
body.page-id-444 .ski-cross__panel a:focus-visible {
color: var(--ski-blue) !important;
text-decoration-color: currentColor;
}
@media (max-width: 980px) {
body.page-id-444 .ski-cross__row {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 24px !important;
}
}
/* --------------------------------------------------------------------------
13. FAQ — calm hairline accordion, title left, questions right.
Same component as the approved Home2 reference; the split lives on the
column because this page keeps heading and accordion in one Divi row.
-------------------------------------------------------------------------- */
/* The FAQ sits on Ice and the closing CTA returns to Snow, so the surface
change does the separating and no section rule is needed on either. */
body.page-id-444 .ski-faq__split {
display: grid !important;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
column-gap: clamp(40px, 4.5vw, 88px);
align-items: start;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
background-image: none !important;
}
body.page-id-444 .ski-faq__split > .et_pb_heading { grid-column: 1; margin: 0 !important; }
body.page-id-444 .ski-faq__split > .et_pb_accordion { grid-column: 2; margin: 0 !important; }
body.page-id-444 .ski-faq .et_pb_toggle {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--ski-line) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.page-id-444 .ski-faq .et_pb_toggle:first-child { border-top: 1px solid var(--ski-line) !important; }
body.page-id-444 .ski-faq .et_pb_toggle_title {
position: relative;
margin: 0 !important;
padding: 18px 56px 18px 0 !important;
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem) !important;
font-weight: 700 !important;
line-height: 1.35 !important;
color: var(--ski-deep) !important;
cursor: pointer;
}
body.page-id-444 .ski-faq .et_pb_toggle_title::before {
content: "" !important;
position: absolute;
top: 50% !important;
right: 4px !important;
left: auto !important;
width: 16px;
height: 16px;
margin-top: -8px !important;
font-size: 0 !important;
background:
linear-gradient(var(--ski-blue), var(--ski-blue)) center / 16px 2px no-repeat,
linear-gradient(var(--ski-blue), var(--ski-blue)) center / 2px 16px no-repeat;
}
body.page-id-444 .ski-faq .et_pb_toggle_open .et_pb_toggle_title::before {
display: block !important;
background:
linear-gradient(var(--ski-blue), var(--ski-blue)) center / 16px 2px no-repeat,
linear-gradient(var(--ski-blue), var(--ski-blue)) center / 2px 0 no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
body.page-id-444 .ski-faq .et_pb_toggle_title::before { transition: background-size 0.25s ease; }
}
@media (hover: hover) and (pointer: fine) {
body.page-id-444 .ski-faq .et_pb_toggle_title:hover { color: var(--ski-blue) !important; }
}
body.page-id-444 .ski-faq .et_pb_toggle_title:focus-visible {
outline: 2px solid var(--ski-blue);
outline-offset: 3px;
}
body.page-id-444 .ski-faq .et_pb_toggle_content {
padding: 0 56px 22px 0 !important;
max-width: 68ch;
font-size: 16.5px;
line-height: 1.65;
color: var(--ski-muted);
}
body.page-id-444 .ski-faq .et_pb_toggle_content p { margin: 0; padding: 0; }
@media (max-width: 980px) {
body.page-id-444 .ski-faq__split {
grid-template-columns: minmax(0, 1fr);
row-gap: 32px;
}
body.page-id-444 .ski-faq__split > .et_pb_heading,
body.page-id-444 .ski-faq__split > .et_pb_accordion { grid-column: 1; }
}
@media (max-width: 767px) {
body.page-id-444 .ski-faq .et_pb_toggle_title { padding: 22px 44px 22px 0 !important; }
body.page-id-444 .ski-faq .et_pb_toggle_content { padding: 0 0 22px !important; }
}
/* --------------------------------------------------------------------------
14. FINAL CTA — light, typographic conversion moment. Never merges with
the deep-blue footer.
-------------------------------------------------------------------------- */
/* The closing CTA is a LIGHT moment on Snow, immediately above the deep-blue
footer, so the two never merge. The section's dark preset was removed from
this instance (module level only — the preset itself is untouched and still
serves whatever else uses it). */
body.page-id-444 .ski-final > .et_pb_row > .et_pb_column {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
margin: 0 !important;
background-image: none !important;
}
@media (min-width: 981px) {
body.page-id-444 .ski-final > .et_pb_row > .et_pb_column { max-width: 58% !important; }
}
/* The page's closing echo of the 01/02/03 technical language. */
body.page-id-444 .ski-final .ski-cta-box::before {
content: "SKI SCHOOL / SIERRA NEVADA";
display: block;
margin: 0 0 18px;
font-family: var(--gvid-b5547a12-68b7-4dee-9a11-c6f6c6f0d32b), system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.26em;
line-height: 1;
color: var(--ski-blue);
opacity: 0.85;
}
body.page-id-444 .ski-final .ski-cta-box {
max-width: 640px;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
text-align: left !important;
}
body.page-id-444 .ski-final .et_pb_promo_description,
body.page-id-444 .ski-final .et_pb_promo_description div,
body.page-id-444 .ski-final .et_pb_promo_content,
body.page-id-444 .ski-final .et_pb_button_wrapper {
padding: 0 !important;
text-align: left !important;
}
body.page-id-444 .ski-final .et_pb_promo_description .et_pb_module_header {
max-width: 13ch;
margin: 0 !important;
padding: 0 0 18px !important;
font-size: clamp(2rem, 1.25rem + 2.7vw, 3.5rem) !important;
font-weight: 800 !important;
line-height: 1.02 !important;
letter-spacing: -0.03em !important;
color: var(--ski-deep) !important;
text-align: left !important;
text-wrap: balance;
}
body.page-id-444 .ski-final .et_pb_promo_content p {
margin: 0;
padding: 0;
max-width: 46ch;
font-size: 18px;
line-height: 1.6;
color: var(--ski-muted) !important;
}
body.page-id-444 .ski-final .et_pb_button_wrapper { margin: 28px 0 0 !important; text-align: left !important; }
/* Primary action. Radius, transition, guarded hover, focus ring and the
reduced-motion fallbacks all come from the shared .et_pb_promo_button rules
in style.css; only the light-surface colours are set here, and they are the
same pair the approved Home closing CTA uses. The #page-container prefix is
what lets the label colour win over the CTA preset's own !important. */
body.page-id-444 #page-container .ski-final .ski-cta-box.et_pb_promo .et_pb_promo_button.et_pb_button {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 10px 24px !important;
background: var(--ski-blue) !important;
color: var(--ski-ink) !important;
font-size: 15px !important;
font-weight: 700 !important;
}
body.page-id-444 .ski-final .et_pb_promo_button::after { display: none !important; }
body.page-id-444 #page-container .ski-final .ski-cta-box.et_pb_promo .et_pb_promo_button.et_pb_button:hover,
body.page-id-444 #page-container .ski-final .ski-cta-box.et_pb_promo .et_pb_promo_button.et_pb_button:focus-visible {
background: var(--ski-deep) !important;
color: #FFFFFF !important;
}
body.page-id-444 .ski-final .et_pb_button_module_wrapper { margin: 14px 0 0 !important; }
@media (max-width: 767px) {
body.page-id-444 .ski-final .et_pb_button_wrapper,
body.page-id-444 #page-container .ski-final .ski-cta-box.et_pb_promo .et_pb_promo_button.et_pb_button { width: 100%; }
body.page-id-444 #page-container .ski-final .ski-final__secondary { width: 100%; text-align: center; }
}
/* --------------------------------------------------------------------------
15. MOTION — nothing new is introduced. The page uses only the reveal
classes already shipped by the child theme, and every one of them is
already disabled under prefers-reduced-motion by that system. The two
local transitions (card hover, FAQ icon) are guarded above.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
16. FINAL PASS — anchor offset and hairline hygiene.
-------------------------------------------------------------------------- */
/* The hero's secondary action jumps to the option grid; the offset keeps the
section heading clear of the sticky header instead of under it. */
body.page-id-444 #clases-opciones { scroll-margin-top: clamp(84px, 11vh, 128px); }
/* The tonal change to Ice already separates the personalisation band, and
the support bar already closes with its own rule — a section border on top
of either would read as a double hairline. */
body.page-id-444 .ski-adapt { border-top: 0; }
body.page-id-444 .ski-cross { border-top: 0; }
/* --------------------------------------------------------------------------
17. SECOND-PASS MOTION — hero entrance only, and pure CSS.
The background depth is Divi's own parallax setting on the module, already
enabled, so no scroll library is involved. The entrance is a short staggered
rise on the four hero elements, declared ONLY inside a
prefers-reduced-motion: no-preference query: a reduced-motion visitor never
receives the rule at all and sees the finished state, and because it is CSS
rather than script, a JS failure cannot leave anything at opacity 0.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
@keyframes ski390-rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
body.page-id-444 #ski-hero.ski-page-hero .et_pb_fullwidth_header_subhead,
body.page-id-444 #ski-hero.ski-page-hero .et_pb_module_header,
body.page-id-444 #ski-hero.ski-page-hero .et_pb_header_content_wrapper,
body.page-id-444 #ski-hero.ski-page-hero .et_pb_header_button_wrapper {
animation: ski390-rise 640ms var(--ski-ease) both;
}
body.page-id-444 #ski-hero.ski-page-hero .et_pb_module_header { animation-delay: 80ms; }
body.page-id-444 #ski-hero.ski-page-hero .et_pb_header_content_wrapper { animation-delay: 160ms; }
body.page-id-444 #ski-hero.ski-page-hero .et_pb_header_button_wrapper { animation-delay: 240ms; }
}
/* --------------------------------------------------------------------------
18. SECOND-PASS MICRO-CRAFT
-------------------------------------------------------------------------- */
/* Divi's own ::after chevron would sit next to the literal "→" that the
shared .ski-arrow micro-interaction animates, giving two arrows on one
link. One arrow, everywhere. */
body.page-id-444 .ski-cross__panel a::after { content: none !important; }
/* Eyebrow rhythm: the technical label sits the same distance above every
heading it introduces, whatever module follows it. */
body.page-id-444 .ski-section-head .ski-eyebrow { margin: 0 0 14px !important; }
/* The closing index is Orbitron at the same tracking as every other technical
label on the page; stated once here so the two never drift apart. */
body.page-id-444 .ski-final .ski-cta-box::before { font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------------------
19. SECONDARY BUTTON ON LIGHT SURFACES — ONE definition, two instances.
Both secondary controls on this page (the rental CTA on the Ice panel and
Contactar in the closing CTA) are the SAME approved component: the shared
divi/button outline preset, plus the global .ski-btn / .ski-btn-outline
rules in style.css that already own radius, transition, guarded hover
shadow, the focus ring and the reduced-motion fallbacks. The preset also
supplies the arrow glyph, so the arrow language is inherited rather than
re-drawn.
Only two things are set here, and only because the preset's own values are
wrong for a light surface:
1. the preset paints the label in --gcid-link-color (#26ADE2). On Snow that
is 2.57:1 and on Ice 2.4:1 — both well under WCAG AA for text. Deep
Alpine gives 9.5:1 on Snow and 8.6:1 on Ice.
2. the preset compiles 8px/4px padding at a specificity that beats the
global .ski-btn-outline rule, which is what made the control read as
small text rather than a button.
The 1.5px rule, 12px radius and 48px height are the same numbers the hero's
secondary action uses, so every secondary control on the page is one size.
-------------------------------------------------------------------------- */
body.page-id-444 #page-container .et_pb_section .ski-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 10px 24px !important;
background-color: transparent !important;
border: 2px solid var(--ski-deep) !important;
border-radius: 10px !important;
color: var(--ski-deep) !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
/* Restrained blue accent on hover: the rule and a faint wash pick up the
brand colour while the label stays readable. */
@media (hover: hover) and (pointer: fine) {
body.page-id-444 #page-container .et_pb_section .ski-btn-outline:hover {
border-color: var(--ski-blue) !important;
background-color: rgba(38, 173, 226, 0.08) !important;
color: var(--ski-deep) !important;
}
}
/* The button preset animates a 1.02 scale from a selector that outranks the
shared reduced-motion rule in style.css, so a reduced-motion visitor still
got a moving button. Neutralised for this page only. */
@media (prefers-reduced-motion: reduce) {
body.page-id-444 .et_pb_button_module_wrapper a,
body.page-id-444 .et_pb_button_module_wrapper a:hover {
transform: none !important;
transition: none !important;
}
}
/* Phones: a full-width target rather than a small pill floating in the panel. */
@media (max-width: 767px) {
body.page-id-444 .ski-support__bar .et_pb_button_module_wrapper,
body.page-id-444 .ski-final .et_pb_button_module_wrapper { width: 100%; }
body.page-id-444 #page-container .et_pb_section .ski-btn-outline { width: 100%; }
}
/* --------------------------------------------------------------------------
20. SNOWBOARD-SPECIFIC EXTENSIONS
Everything above is the approved internal-page system, generated from the
Clases de esqui file so the two pages cannot drift: identical tokens,
identical component rules, only the page prefix differs. The slider block
was removed because this page has no slider — there is exactly ONE
confirmed snowboard service, and a three-card rail would have to invent
two more.
Only four things are genuinely snowboard-specific, and they are here.
-------------------------------------------------------------------------- */
/* 1. Mirrored editorial composition. The page uses the approved media+panel
block three times (service, progression, ski cross-sell); alternating the
side on the middle one is what keeps them from reading as a stack of
identical rows. Grid order only — the DOM order is unchanged, so the
photograph still follows its own copy for a screen reader. */
@media (min-width: 981px) {
body.page-id-444 .ski-cross--reverse .ski-cross__row {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
}
body.page-id-444 .ski-cross--reverse .ski-cross__media { order: 2; }
body.page-id-444 .ski-cross--reverse .ski-cross__panel { order: 1; }
}
/* 2. The progression section is the page's editorial moment, so its
photograph is taller than the two supporting blocks and carries the
Sierra cut. */
body.page-id-444 .ski-editorial .ski-cross__panel .et_pb_module_header { max-width: 14ch; }
/* 3. The closing index names the discipline rather than the resort, which is
the one place this page signs itself differently from Clases de esqui. */
body.page-id-444 .ski-final .ski-cta-box::before { content: "SKI SCHOOL / SNOWBOARD"; }
/* 4. Hero art direction.
The source is a 960x540 social-media re-encode (44 KB) — the only
unmistakable snowboard ACTION photograph in the Media Library. At a
full-bleed 1440x660 it is being upscaled about 1.5x, which is why it read
as a flat dark rectangle rather than a photograph. Three things are done
about that here, and a higher-resolution original remains the single
biggest visual upgrade available for this page (flagged, not invented).
a. The crop holds the upper half, where the rider and the board are. */
body.page-id-444 #ski-hero.ski-page-hero,
body.page-id-444 #ski-hero.ski-page-hero .et-pb-parallax-background {
background-position: 50% 30% !important;
background-size: cover !important;
}
/* b. A small contrast and saturation lift on the photographic layer only
(never on the text above it) recovers the sky, the snow spray and the
rider's silhouette that the re-encode flattened. */
body.page-id-444 #ski-hero.ski-page-hero .et-pb-parallax-background {
filter: saturate(1.14) contrast(1.09);
}
/* c. On a phone the frame is much taller than the 16:9 source, so the crop
moves down slightly to keep the rider inside the visible band instead of
above it. */
@media (max-width: 767px) {
body.page-id-444 #ski-hero.ski-page-hero,
body.page-id-444 #ski-hero.ski-page-hero .et-pb-parallax-background {
background-position: 52% 36% !important;
}
}
/* 5. Two tiers of media+panel block. The service block and the progression
peak are authored moments and carry a heading one step above the section
default; the ski cross-sell stays at the quiet tier so it reads as
navigation rather than a second offer. */
body.page-id-444 .ski-cross--mark .ski-cross__panel .et_pb_module_header {
max-width: 15ch;
font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.6rem) !important;
}
body.page-id-444 .ski-cross--mark .ski-cross__row { column-gap: clamp(32px, 3.8vw, 72px) !important; }
body.page-id-444 .ski-cross--quiet .ski-cross__panel .et_pb_module_header {
font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem) !important;
}
body.page-id-444 .ski-cross--quiet .ski-cross__panel p { font-size: 16.5px; }
/* 6. The closing heading breaks after "tu" so the accented half sits on its
own line; the measure is one step wider than the ski page's because
"clase de snowboard?" is a longer phrase. */
body.page-id-444 .ski-final .et_pb_promo_description .et_pb_module_header { max-width: 16ch; }