/*
* phc-white-papers.css — page-specific overrides for /white-papers
*
* Owns: tiny page-level fixes that can't live in section xpro_custom_css.
* (Section-level rules — featured card layout, explore card hover/reveal —
* still live in the Elementor section's Advanced → Custom CSS field so
* they remain editable in the builder.)
*/
/* Page-level horizontal overflow guard. The cloned CTA banner has a
937px-wide diamond pseudo-element and several `width: NNNpx` blocks
that escape the viewport on mobile, dragging the body wider than the
screen and pushing all centered text past the right edge. */
body.page-id-233 { overflow-x: hidden; }
/* Mobile: hero subhead/heading widgets get their natural content width
(which can exceed viewport on long phrases). Centered + overflow =
text cut on both sides. Force the widget to behave as a block at 100%
of the inner padded container. The descendant chain has to override
Elementor's auto-width inline styles, hence the !important. */
@media (max-width: 767px) {
body.page-id-233 .phc-wp-hero .e-con-inner > .elementor-widget,
body.page-id-233 .phc-wp-hero .e-con-inner > .elementor-widget > div,
body.page-id-233 .phc-wp-hero .e-con-inner .elementor-widget-text-editor p,
body.page-id-233 .phc-wp-hero .e-con-inner .elementor-heading-title {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal !important;
}
}
/* === Featured + Explore "Read More / Read White Paper" links =================
* Match the footer link convention: gold colour at rest, animated half-underline
* (gold #B79D62) that grows from 0 → 50% on hover, plus a Feather "arrow-right"
* glyph rendered via CSS mask so it inherits text colour and can slide on hover.
*
* The Elementor section's own xpro_custom_css already sets the resting colour
* on `.phc-wp-feat-more a:hover` to the same gold, which would block our hover
* colour shift. The page-level body.page-id-233 prefix outranks that section
* rule on specificity (and !important is added defensively).
*/
body.page-id-233 .phc-wp-feat-more .elementor-heading-title,
body.page-id-233 .phc-wp-explore-card__more .elementor-heading-title {
display: inline-block;
}
body.page-id-233 .phc-wp-feat-more .elementor-heading-title a,
body.page-id-233 .phc-wp-explore-card__more .elementor-heading-title a {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 6px;
color: #9B8764 !important;
text-decoration: none !important;
transition: color .35s cubic-bezier(.4, 0, .2, 1);
}
body.page-id-233 .phc-wp-feat-more .elementor-heading-title a::before,
body.page-id-233 .phc-wp-explore-card__more .elementor-heading-title a::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: #B79D62;
transition: width .45s cubic-bezier(.22, .61, .36, 1);
pointer-events: none;
}
body.page-id-233 .phc-wp-feat-more .elementor-heading-title a:hover,
body.page-id-233 .phc-wp-explore-card__more .elementor-heading-title a:hover {
color: #B79D62 !important;
}
body.page-id-233 .phc-wp-feat-more .elementor-heading-title a:hover::before,
body.page-id-233 .phc-wp-explore-card__more .elementor-heading-title a:hover::before {
width: 50%;
}
/* Feather "arrow-right" — rendered as CSS mask so background-color = currentColor
keeps the glyph in sync with the link text colour transition. */
body.page-id-233 .phc-wp-feat-more .elementor-heading-title a::after,
body.page-id-233 .phc-wp-explore-card__more .elementor-heading-title a::after {
content: "";
display: inline-block;
width: 18px;
height: 18px;
flex: 0 0 18px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
body.page-id-233 .phc-wp-feat-more .elementor-heading-title a:hover::after,
body.page-id-233 .phc-wp-explore-card__more .elementor-heading-title a:hover::after {
transform: translateX(4px);
}
/* === Cover image focal points =================================================
* Most card photos are 2:3 portrait but the cover crop is ~2:1 landscape, so
* `center center` cuts the frame at the subjects' chests. Push the focus higher
* per image so faces / focal subject sit inside the visible 180px (or featured
* 340px) strip. Element IDs are addressed because each photo has a different
* vertical centre of interest.
*/
body.page-id-233 .elementor-element-90341a0 { background-position: center 28% !important; } /* featured: hotel meeting */
body.page-id-233 .elementor-element-f77d832 { background-position: center 22% !important; } /* explore 1: couple in office */
body.page-id-233 .elementor-element-ba63459 { background-position: center 30% !important; } /* explore 2: three athletes */
body.page-id-233 .elementor-element-ea578b1 { background-position: center center !important; } /* explore 3: clinic logo (no faces) */
body.page-id-233 .elementor-element-4ee31bf { background-position: center 28% !important; } /* explore 4: handshake */
body.page-id-233 .elementor-element-ee3a778 { background-position: center 22% !important; } /* explore 5: two women at desk */
body.page-id-233 .elementor-element-1465d7e { background-position: center 30% !important; } /* explore 6: lab vials */