inside a wrapping : keep inline-block so the skew/clip-path
chamfer effect renders correctly, and add top breathing room. */
.cramer-mosaic-html-content p .chamfer-btn {
display: inline-block;
margin-top: 1.2em;
}
/* First element is already flush — remove the top margin. */
.cramer-mosaic-html-content p:first-child .chamfer-btn {
margin-top: 0;
}
.cramer-mosaic-grid-row-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 0;
width: 100%;
height: auto;
}
.cramer-mosaic-grid-row-4 {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr;
gap: 0;
width: 100%;
height: auto;
}
.cramer-mosaic-grid-row-dynamic > div > .cramer-mosaic-block{
width:100%;
height:100%;
}
.cramer-mosaic-grid-row-dynamic > div{
min-height:100%;
}
.cramer-mosaics-section .cramer-mosaic-block__media,
.cramer-mosaics-section .cramer-mosaic-video-trigger,
.cramer-mosaics-section .cramer-mosaic-video-trigger__image,
.cramer-mosaics-section .cramer-mosaic-block__media iframe{
border-radius:12px !important;
}
.cramer-mosaics-section .cramer-mosaic-block__media,
.cramer-mosaics-section .cramer-mosaic-video-trigger{
overflow:hidden;
clip-path:inset(0 round 12px);
}
.cramer-mosaic-grid-row-trusted-1 .cramer-mosaic-block.cramer-mosaic-block--trusted{
width:100%;
max-width:100%;
overflow:hidden;
padding:0;
align-items:stretch;
justify-content:stretch;
}
.cramer-mosaic-grid-row-trusted-1 .cramer-trusted-split,
.cramer-mosaic-grid-row-trusted-1 .cramer-trusted-split__title,
.cramer-mosaic-grid-row-trusted-1 .cramer-trusted-split__carousel,
.cramer-mosaic-grid-row-trusted-1 .cramer-trusted-scroller,
.cramer-mosaic-grid-row-trusted-1 .cramer-trusted-row{
min-width:0;
max-width:100%;
}
.cramer-mosaic-block__media{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 12px;
}
.cramer-mosaic-block__media iframe{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.cramer-mosaic-video-trigger{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 12px;
background: #000000;
padding: 0;
cursor: pointer;
display: block;
}
.cramer-mosaic-video-trigger__image{
width: 100%;
height: 100%;
border-radius: 12px;
object-fit: cover;
object-position: center;
display: block;
}
.cramer-mosaic-video-trigger__play{
position: absolute;
top: 50%;
left: 50%;
width: clamp(56px, 7vw, 90px);
height: clamp(56px, 7vw, 90px);
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
border: 2px solid rgba(255, 255, 255, 0.75);
}
.cramer-mosaic-video-trigger__play::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-38%, -50%);
width: 0;
height: 0;
border-top: clamp(10px, 1.2vw, 16px) solid transparent;
border-bottom: clamp(10px, 1.2vw, 16px) solid transparent;
border-left: clamp(16px, 1.9vw, 24px) solid #ffffff;
}
.cramer-mosaic-text-title{
font-size: clamp(3rem, 9vw, 7rem);
line-height: 1.1;
font-weight: 900;
font-style: italic;
letter-spacing: -0.02em;
color: #ffffff;
margin: 0;
padding: 2%;
}
.cramer-mosaic-text-quote{
/* min raised to 1.6rem (16px): html{font-size:10px} so 1rem=10px */
font-size: clamp(1.6rem, 6vw, 4rem);
line-height: 1.4;
font-style: italic;
color: #ffffff;
font-weight: 400;
margin: 0;
}
.cramer-mosaic-quote-author{
font-size: var(--cramer-mosaic-quote-author-size);
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.01em;
margin: 0;
}
.cramer-mosaic-text{
/* min raised to 1.6rem (16px): html{font-size:10px} so 0.5rem=5px was well below threshold */
font-size: clamp(1.6rem, 4vw, 3rem);
line-height: 1.1;
font-weight: 700;
font-style: normal;
letter-spacing: -0.02em;
color: #ffffff;
margin: 0;
max-width: 100%;
}
.cramer-mosaic-block-img{
/* Force the image to fill the cell width so flex centering on the parent
is visually effective. height:auto preserves the natural aspect ratio.
max-width from the ACF image_max_width inline style still takes precedence
(e.g. max-width:60% will constrain to 60% and the flex container centers it). */
display: block;
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
border-radius: 12px;
}
.cramer-mosaic-inner-block-grid{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 0;
row-gap: 20px;
width: 100%;
}
.cramer-mosaic-inner-block-grid-2cols{
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 1fr;
gap: 0;
row-gap: 20px;
width: 100%;
align-items: center;
}
.cramer-mosaic-inner-block-grid-2x2{
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
gap: 0;
width: 100%;
align-items: center;
}
.cramer-mosaic-inner-block-grid .cramer-mosaic-block{
border: none;
}
.cramer-mosaic-inner-block {
display: flex;
align-items: center;
justify-content: center;
}
.cramer-mosaic-block .chamfer-btn {
display: inline-block;
text-align: center;
white-space: nowrap;
}
.cramer-mosaic-text-align-left {
text-align: left;
justify-content: flex-start !important;
}
.cramer-mosaic-text-align-left .cramer-mosaic-inner-block-grid {
align-items: flex-start;
}
.cramer-mosaic-text-align-left .cramer-mosaic-inner-block {
justify-content: flex-start;
}
.cramer-mosaic-text-align-center {
text-align: center;
justify-content: center !important;
}
.cramer-mosaic-text-align-center .cramer-mosaic-inner-block-grid {
align-items: center;
}
.cramer-mosaic-text-align-center .cramer-mosaic-inner-block {
justify-content: center;
}
.cramer-mosaic-text-align-right {
text-align: right;
justify-content: flex-end !important;
}
.cramer-mosaic-text-align-right .cramer-mosaic-inner-block-grid {
align-items: flex-end;
}
.cramer-mosaic-text-align-right .cramer-mosaic-inner-block {
justify-content: flex-end;
}
/* ─── Image overlay ────────────────────────────────────────────────────────────
* .cramer-mosaic-image-container – wraps the ![]()
and the optional overlay div.
* Used whenever image_overlay_text is populated (with or without a button).
* The container sits inside the standard .cramer-mosaic-block padding, so the
* image is inset the same way as the video block's media container.
*
* Hover state: overlay fades in and image scales up slightly.
* Touch devices (@media hover:none): overlay is always visible at reduced opacity.
* ─────────────────────────────────────────────────────────────────────────── */
/* Outer container: full-width flex wrapper that centres the inner wrap. */
.cramer-mosaic-image-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* Inner wrap: sized by the admin max-width (applied inline), position:relative
so the absolutely-positioned overlay anchors to the image's actual edges.
overflow:hidden + border-radius clip the overlay and zoom effect cleanly. */
.cramer-mosaic-image-wrap {
position: relative;
display: inline-block;
overflow: hidden;
border-radius: 12px;
line-height: 0; /* prevents phantom space beneath inline-block img */
max-width: 100%; /* fallback if inline style is absent */
}
/* Image inside the wrap: fills the wrap entirely; hover zoom via transform. */
.cramer-mosaic-image-wrap img {
width: 100%;
height: auto;
display: block;
transition: transform 0.45s ease;
}
/* ── Full-image colour-tint overlay (pseudo-element on the wrap) ────────────
This covers the entire image on hover with a translucent colour wash.
TWO PLACES TO ADJUST:
1. At-rest state : .cramer-mosaic-image-wrap::before { background: ... }
2. Hover state : .cramer-mosaic-image-wrap:hover::before { background: ... }
Format: rgba(R, G, B, Opacity) — e.g. rgba(0,0,0,0.4) = 40% black tint.
─────────────────────────────────────────────────────────────────────────── */
.cramer-mosaic-image-wrap::before {
content: '';
position: absolute;
inset: 0;
/* ── ADJUST: at-rest colour/opacity (default: invisible) ── */
background: rgba(0, 0, 0, 0);
transition: background 0.35s ease;
z-index: 1; /* sits above the img but below the text overlay */
pointer-events: none;
}
.cramer-mosaic-image-wrap:hover::before {
/* ── ADJUST: hover colour and opacity ─────────────────────── */
background: rgba(0, 0, 0, 0.35);
}
/* Semi-transparent overlay panel — hidden by default, revealed on hover. */
/* Layout: flex-column so text and button stack vertically, bottom-left. */
.cramer-mosaic-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2; /* above the ::before colour-tint overlay */
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
display: flex;
flex-direction: column; /* stack text then button vertically */
align-items: flex-start; /* left-align both text and button */
justify-content: flex-end; /* push content to the bottom edge */
opacity: 0;
transition: opacity 0.35s ease;
padding: 2rem 2.4rem;
}
/* Text inside the overlay panel. */
.cramer-mosaic-image-overlay__text {
color: #ffffff;
text-align: left;
margin: 0 0 0 0;
font-size: clamp(1.4rem, 3vw, 2.4rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.01em;
}
/* Button label rendered inside the image hover overlay.
Uses (not ) because the outer .cramer-mosaic-image-link
is the real interactive element — avoids invalid nested tags.
pointer-events:none ensures clicks pass through to the parent link. */
.cramer-mosaic-overlay-btn {
display: inline-block;
margin-top: 1.2rem;
pointer-events: none;
}
/* Wraps the entire image container when the image block has a button.
Makes the whole image area a single clickable link. */
.cramer-mosaic-image-link {
display: block;
text-decoration: none;
line-height: 0;
}
/* Hover: reveal overlay + subtle image zoom.
Hover target is the wrap (the visible image area) so it triggers precisely
when the user is over the image, not the surrounding cell padding. */
.cramer-mosaic-image-wrap:hover .cramer-mosaic-image-overlay {
opacity: 1;
}
.cramer-mosaic-image-wrap:hover img {
transform: scale(1.04);
filter: blur(2px);
}
/* Touch/coarse-pointer devices: show overlay content immediately without hover. */
@media (hover: none), (pointer: coarse) {
.cramer-mosaic-image-overlay {
opacity: 1;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}
.cramer-mosaic-image-wrap::before {
background: rgba(0, 0, 0, 0.2);
}
}
@media screen and (max-width: 1024px) {
.cramer-mosaic-block {
padding: 3rem;
}
.cramer-mosaic-block .chamfer-btn {
font-size: 1.75rem;
padding: 8px 24px 12px 24px;
}
}
@media screen and (max-width: 768px) {
.cramer-mosaics-section {
--cramer-mosaic-quote-author-size: clamp(1.375rem, 5.2vw, 1.75rem);
}
.cramer-mosaic-block .chamfer-btn {
white-space: normal;
font-size: 1.6rem; /* 16px minimum: html{font-size:10px} so 1.6rem = 16px */
padding: 8px 20px 10px 20px;
}
.cramer-mosaic-block {
padding: 4rem 1.5rem;
}
.cramer-mosaic-quote-author {
margin-top: -0.35rem;
}
/* Stack mosaic rows into single column */
.cramer-mosaic-grid-row-dynamic,
.cramer-mosaic-grid-row-3,
.cramer-mosaic-grid-row-4 {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr !important;
}
.cramer-mosaic-grid-row-dynamic > div {
grid-column: span 1 !important;
width: 100% !important;
/* Respect the --mobile-order custom property set inline by PHP (ACF 'Mobile Order' field).
Value 0 (default) = CSS order default, so unset blocks stack in DOM source order. */
order: var(--mobile-order, 0);
}
/* Show only horizontal borders when stacked */
.cramer-mosaic-block {
border-left: none !important;
border-right: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: none;
}
.cramer-mosaic-grid-row-dynamic > div:last-child .cramer-mosaic-block,
.cramer-mosaic-grid-row-3 > div:last-child .cramer-mosaic-block,
.cramer-mosaic-grid-row-4 > div:last-child .cramer-mosaic-block,
.cramer-mosaic-grid-row-trusted-1 > .cramer-mosaic-block {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.cramer-mosaic-block.cramer-mosaic-block--bg-white {
border-top-color: rgba(0, 0, 0, 0.15);
}
.cramer-mosaic-grid-row-dynamic > div:last-child .cramer-mosaic-block.cramer-mosaic-block--bg-white,
.cramer-mosaic-grid-row-3 > div:last-child .cramer-mosaic-block.cramer-mosaic-block--bg-white,
.cramer-mosaic-grid-row-4 > div:last-child .cramer-mosaic-block.cramer-mosaic-block--bg-white {
border-bottom-color: rgba(0, 0, 0, 0.15);
}
}
@media screen and (min-width: 993px) {
.cramer-mosaics-section {
padding-top: 0;
}
}
/* ================================
CONTACT SECTION
================================ */
.cramer-contact-section {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: #fff;
color: #000;
padding: clamp(6rem, 12vw, 12rem) 0;
overflow: hidden;
}
.cramer-contact-section__container {
max-width: 1400px;
margin: 0 auto;
padding: 0 clamp(2rem, 5vw, 4rem);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(2rem, 4vw, 3.5rem);
}
.cramer-contact-section h2 {
margin: 0;
font-size: clamp(3rem, 5vw, 7rem);
line-height: 1.1;
font-weight: 900;
font-style: italic;
letter-spacing: -0.02em;
color: #000;
}
.cramer-contact-section__blurb {
/* min raised to 1.6rem (16px): html{font-size:10px} so 1rem=10px */
font-size: clamp(1.6rem, 2vw, 2rem);
line-height: 1.6;
max-width: 800px;
margin: 0;
color: #000;
font-weight: 400;
}
.cramer-contact-section__blurb .cramer-home-accent {
color: #ee710c;
}
.cramer-contact-section__button {
margin-top: clamp(1rem, 2vw, 2rem);
font-size: clamp(2.25rem, 3vw, 2.75rem) !important;
padding: clamp(2.5rem, 4vw, 3.5rem) clamp(6rem, 10vw, 10rem) !important;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
transition: all 0.3s ease;
display: inline-block;
text-decoration: none;
}
.cramer-contact-section__button:hover {
transform: skew(-13deg) translateY(-2px);
}
/* Dark background modifier — mirrors cramer-stat-block--dark.
Applied when the admin selects 'Dark' in the Contact tab background field.
.cramer-home-accent stays orange (reads well on both bg colours).
The button is already orange/black so no override is needed. */
.cramer-contact-section--dark {
background: #000000;
color: #ffffff;
}
.cramer-contact-section--dark h2 {
color: #ffffff;
}
.cramer-contact-section--dark .cramer-contact-section__blurb {
color: rgba(255, 255, 255, 0.8);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cramer-contact-section {
padding: clamp(4rem, 10vw, 6rem) 0;
}
.cramer-contact-section h2 {
font-size: clamp(2.5rem, 10vw, 4rem);
}
.cramer-contact-section__blurb {
/* min and max both raised to ≥1.6rem (16px): html{font-size:10px} so 1rem=10px */
font-size: clamp(1.6rem, 4vw, 2.5rem);
}
}
.chamfer-btn {
--cut: 0px; /* controls angle size */
display: inline-block;
padding: 16px 32px 18px 32px;
background: #ee710c;
color: #000 !important;
text-decoration: none;
font-size: 2rem;
font-weight: 700;
transform: skew(-13deg);
transition: background-color 0.6s ease, color 0.6s ease, transform 0.3s ease, clip-path 0.3s ease;
/* transition: skew 0.3s ease; /* smooth transition for the skew change */
/*transition: clip-path 0.3s ease; /* smooth transition for the clip-path change */
clip-path: polygon(
0 0,
calc(100% - var(--cut)) 0,
100% var(--cut),
100% 100%,
var(--cut) 100%,
0 calc(100% - var(--cut))
);
}
.chamfer-btn:hover {
--cut: 22px; /* controls angle size */
background: #f79442;
color: #000 !important;
text-decoration: none !important;
transform: skew(0deg);
transition: background-color 0.6s ease, color 0.6s ease, transform 0.3s ease, clip-path 0.3s ease;
/* transition: skew 2.8s ease; /* smooth transition for the skew change */
/*transition: clip-path 0.3s ease; smooth transition for the clip-path change */
clip-path: polygon(
0 0,
calc(100% - var(--cut)) 0,
100% var(--cut),
100% 100%,
var(--cut) 100%,
0 calc(100% - var(--cut))
/* ease in the color transition */
);
}
/* ================================================
CAPABILITIES 2 — NEW DESIGN
================================================ */
.cap2-wrap {
--cap2-black: #000;
--cap2-white: #fff;
--cap2-orange: #ee710c;
--cap2-orange-2: #ff7800;
--cap2-orange-3: #ff8400;
--cap2-border: rgba(255,255,255,0.09);
--cap2-card: rgba(255,255,255,0.035);
--cap2-nav-w: 160px;
--cap2-circle: 56px;
display: grid;
grid-template-columns: var(--cap2-nav-w) 1fr;
}
/* ── PINNED LEFT NAV ── */
/*
* DO NOT use position: sticky here. Any ancestor element in the WordPress
* page wrapper chain (#main, #primary, #content) that has overflow set to
* anything other than 'visible' silently breaks CSS sticky. Instead, GSAP
* ScrollTrigger pins this nav via position: fixed during scroll, which
* bypasses ancestor overflow rules entirely. The pin is set up in
* cramer-home-new.js inside initCap2().
*/
.cap2-steps-nav {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1px solid var(--cap2-border);
background: var(--cap2-black);
z-index: 20;
}
.cap2-steps-track {
display: flex;
flex-direction: column;
align-items: center;
}
.cap2-step-node {
display: flex;
flex-direction: column;
align-items: center;
}
.cap2-step-circle {
width: var(--cap2-circle);
height: var(--cap2-circle);
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.14);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem; /* 16px min: html{font-size:10px}, so 1rem=10px, 1.6rem=16px */
font-weight: 700;
font-style: italic;
color: rgba(255,255,255,0.22);
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
user-select: none;
font-family: 'Montserrat', sans-serif;
}
.cap2-step-circle:hover {
border-color: rgba(255,255,255,0.35);
color: rgba(255,255,255,0.55);
}
.cap2-step-circle.active {
background: var(--cap2-orange);
border-color: var(--cap2-orange);
color: var(--cap2-white);
transform: scale(1.1);
box-shadow: 0 0 0 6px rgba(238,113,12,0.16), 0 0 28px rgba(238,113,12,0.4);
}
.cap2-step-circle.done {
background: rgba(238,113,12,0.12);
border-color: rgba(238,113,12,0.35);
color: var(--cap2-orange-3);
}
.cap2-step-line {
width: 1px;
height: 38px;
background: rgba(255,255,255,0.09);
position: relative;
overflow: hidden;
}
.cap2-step-line::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 0;
background: var(--cap2-orange);
transition: height 0.4s ease;
}
.cap2-step-line.lit::after { height: 100%; }
/* ── CONTENT COLUMN ── */
.cap2-content-col { padding: 0 72px 0 60px; }
/* Section heading — matches the large italic h2 style used throughout the page. */
.cap2-section-title {
font-size: clamp(3rem, 9vw, 7rem);
line-height: 1.1;
font-weight: 900;
font-style: italic;
letter-spacing: -0.02em;
color: #ffffff;
margin: 0 0 4rem 0;
text-align: center;
padding-top: clamp(4rem, 6vw, 8rem);
}
/* ── SINGLE CAPABILITY SECTION ── */
.cap2-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
min-height: 100vh;
padding: 84px 0;
border-bottom: 1px solid var(--cap2-border);
}
.cap2-section:last-child { border-bottom: none; }
/* TEXT */
.cap2-text { display: flex; flex-direction: column; }
.cap2-num {
font-size: 1.6rem; /* 16px min: html{font-size:10px}, so 1rem=10px, 1.6rem=16px */
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cap2-orange-2);
margin-bottom: 14px;
font-family: 'Montserrat', sans-serif;
}
.cap2-title {
/* Scale matches other h2s on the page (slide rows: clamp(2.75rem,4.6vw,5rem)).
Slightly smaller here as it sits in a narrower two-column layout. */
font-size: clamp(2.5rem, 3.5vw, 4rem);
font-weight: 900;
font-style: italic;
letter-spacing: -0.01em;
line-height: 1.05;
margin-bottom: 10px;
color: #fff;
font-family: 'Montserrat', sans-serif;
}
.cap2-title em { color: var(--cap2-orange); font-style: italic; }
.cap2-subtitle {
font-size: 1.6rem; /* 16px min: html{font-size:10px}, so 1rem=10px, 1.6rem=16px */
font-weight: 700;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.3);
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
.cap2-body {
font-size: 1.6rem; /* 16px min: html{font-size:10px}, so 1rem=10px, 1.6rem=16px */
line-height: 1.78;
color: rgba(255,255,255,0.5);
margin-bottom: 28px;
max-width: 38ch;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
}
.cap2-services {
border: 1px solid var(--cap2-border);
border-radius: 10px;
background: var(--cap2-card);
overflow: hidden;
}
.cap2-svc-row {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
font-size: 1.6rem; /* 16px min: html{font-size:10px}, so 1rem=10px, 1.6rem=16px */
font-weight: 500;
color: rgba(255,255,255,0.45);
border-bottom: 1px solid var(--cap2-border);
letter-spacing: 0.03em;
transition: color 0.2s, background 0.2s;
font-family: 'Montserrat', sans-serif;
}
.cap2-svc-row:last-child { border-bottom: none; }
.cap2-svc-row:hover {
color: #fff;
background: rgba(238,113,12,0.07);
}
.cap2-svc-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--cap2-orange);
flex-shrink: 0;
opacity: 0.75;
}
/* IMAGE */
.cap2-image {
aspect-ratio: 4 / 3;
border-radius: 10px;
border: 1px solid var(--cap2-border);
background: #0d0d0d;
overflow: hidden;
position: relative;
}
.cap2-image-link {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
}
.cap2-image-link:focus-visible {
outline: 2px solid var(--cap2-orange);
outline-offset: -2px;
}
.cap2-image img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
opacity: 0.88;
transition: transform 0.7s ease, opacity 0.3s;
}
.cap2-section:hover .cap2-image img {
transform: scale(1.03);
opacity: 1;
}
.cap2-img-tag {
position: absolute;
top: 14px; left: 14px;
background: var(--cap2-orange);
color: #fff;
font-size: 1.6rem; /* 16px min: html{font-size:10px}, so 1rem=10px, 1.6rem=16px */
font-weight: 700;
font-style: italic;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px;
z-index: 2;
font-family: 'Montserrat', sans-serif;
}
.cap2-img-fallback {
position: absolute;
inset: 0;
display: none;
align-items: flex-end;
padding: 20px;
}
.cap2-img-fallback span {
font-size: 1.6rem; /* 16px min: html{font-size:10px}, so 1rem=10px, 1.6rem=16px */
font-weight: 700;
font-style: italic;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.25);
font-family: 'Montserrat', sans-serif;
}
/* ── Image position modifiers ─────────────────────────────────────────────
* Generated by home-capabilities-v2.php based on the image_position ACF field.
* Default layout (--image-right) is the natural .cap2-section grid order and
* needs no override — text is column 1, image is column 2.
* ──────────────────────────────────────────────────────────────────────────── */
/* Image on the left: swap the visual order of the two columns. */
.cap2-section--image-left .cap2-text { order: 2; }
.cap2-section--image-left .cap2-image { order: 1; }
/*
* No image: collapse to a single centered column. max-width + auto margins
* give comfortable reading width without spanning the full content column.
*/
.cap2-section--no-image {
grid-template-columns: 1fr;
justify-items: center;
text-align: left;
}
.cap2-section--no-image .cap2-text {
max-width: 64ch;
width: 100%;
}
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.cap2-content-col { padding: 0 48px 0 40px; }
.cap2-section { gap: 40px; }
}
@media (max-width: 900px) {
.cap2-wrap { --cap2-nav-w: 72px; }
.cap2-content-col { padding: 0 28px 0 22px; }
.cap2-section {
grid-template-columns: 1fr;
min-height: auto;
gap: 28px;
padding: 68px 0;
}
.cap2-image { order: -1; }
.cap2-body { max-width: none; }
}
@media (max-width: 768px) {
.cap2-wrap { --cap2-nav-w: 58px; --cap2-circle: 40px; }
.cap2-step-circle { font-size: 1.6rem; } /* 16px min: html{font-size:10px}, so 1rem=10px, 1.6rem=16px */
.cap2-step-line { height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.cap2-text,
.cap2-image,
.cap2-svc-row { opacity: 1 !important; transform: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
MOSAIC V2 — ELEMENT BUILDER STYLES
Supports the `column_elements` flexible content field in `mosaic_rows_v2`.
Each .cramer-mosaic-block now contains a .cramer-mosaic-elements-wrap that
stacks individual .cramer-mosaic-element divs vertically. Every element
carries an alignment modifier class derived from its `justify` ACF field.
All existing .cramer-mosaic-block rules continue to apply unchanged.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Element stack container ─────────────────────────────────────────────── */
/*
* Replaces the direct block content from v1. Flex column ensures elements
* always stack vertically regardless of their individual widths.
* `align-items: stretch` lets child elements fill the full column width by
* default; individual elements override this with their alignment modifier.
*/
.cramer-mosaic-elements-wrap {
display: flex;
flex-direction: column;
width: 100%;
gap: 2.4rem; /* vertical space between stacked elements */
align-items: stretch;
}
/* ── Individual element wrapper ─────────────────────────────────────────── */
/*
* Base element: flex column so inner content (img, p, a, etc.) stacks
* predictably. Width 100% so each element spans the column.
*/
.cramer-mosaic-element {
display: flex;
flex-direction: column;
width: 100%;
}
/* ── Alignment modifier classes ────────────────────────────────────────── */
/*
* Each modifier sets both `align-items` (controls flex children horizontally
* inside the column direction) and `text-align` (controls inline text within
* block elements like ,
, ).
*/
.cramer-mosaic-element--align-left {
align-items: flex-start;
text-align: left;
}
.cramer-mosaic-element--align-center {
align-items: center;
text-align: center;
}
.cramer-mosaic-element--align-right {
align-items: flex-end;
text-align: right;
}
/* ── Image element: overlay path inside element wrapper ─────────────────── */
/*
* When an image element uses the overlay structure the image container
* should fill the available column width. The alignment modifier controls
* where the image sits when it has a max-width constraint.
*/
.cramer-mosaic-element .cramer-mosaic-image-container {
width: 100%;
}
.cramer-mosaic-element .cramer-mosaic-image-wrap {
width: 100%;
}
/* ── Video element: fill column width ───────────────────────────────────── */
/*
* Ensure the video trigger button fills its element wrapper so the thumbnail
* scales correctly when the column is narrow or the alignment is centered.
*/
.cramer-mosaic-element .cramer-mosaic-block__media {
width: 100%;
}
/* ── HTML element: block-level content stacks correctly ─────────────────── */
/*
* The .cramer-mosaic-html-content wrapper already has display:block from the
* original styles. Setting width:100% here ensures it fills the element
* wrapper regardless of alignment without needing `!important` overrides.
*/
.cramer-mosaic-element .cramer-mosaic-html-content {
width: 100%;
}
/* ── Button element: sizing ─────────────────────────────────────────────── */
/*
* A standalone chamfer-btn inherits its size from its own padding and font.
* `align-self` is left to the parent alignment modifier (flex-start / center
* / flex-end) so it never stretches to 100% width unintentionally.
*/
.cramer-mosaic-element > .chamfer-btn {
align-self: inherit; /* inherit from the alignment modifier on the parent */
}
/* ── Spacer element ─────────────────────────────────────── */
/*
* Empty div whose height is set entirely by the inline style written by PHP.
* width:100% ensures it spans the full column so it has the correct effect
* even when preceding sibling elements are narrower.
* On mobile the height is halved so large desktop spacers don't waste
* disproportionate screen space on small viewports.
*/
.cramer-mosaic-spacer {
display: block;
width: 100%;
flex-shrink: 0; /* prevent flex compression inside .cramer-mosaic-elements-wrap */
}
@media (max-width: 768px) {
.cramer-mosaic-spacer {
height: calc(var(--spacer-h, 40px) * 0.5) !important;
}
}
/* ── Before / After Slider ──────────────────────────────────────────────── */
/*
* Container: position:relative so absolutely-positioned layers and labels
* anchor correctly. overflow:hidden clips the after image and rounded corners.
* touch-action:none + user-select:none prevent scroll interference and
* text selection during drag. cursor:ew-resize signals horizontal dragging.
* The CSS custom property --ba-position (set to 50% in PHP, updated live
* by initMosaicBeforeAfterSlider() in JS) drives both the clip-path on
* .cramer-ba__after and the left: position of .cramer-ba__divider.
*/
.cramer-mosaic-before-after {
position: relative;
overflow: hidden;
border-radius: 12px;
width: 100%;
display: block;
touch-action: none;
user-select: none;
-webkit-user-select: none;
cursor: ew-resize;
}
/* Before image: block display so it sets the container's natural height. */
.cramer-ba__before {
display: block;
width: 100%;
height: auto;
pointer-events: none;
}
/*
* After image: absolutely fills the container; clip-path:inset() reveals
* only the portion to the left of --ba-position. The right edge of the
* inset equals (100% - --ba-position), so at 50% both halves are equal.
*/
.cramer-ba__after {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
clip-path: inset(0 calc(100% - var(--ba-position, 50%)) 0 0);
}
/*
* Divider: thin vertical line positioned at --ba-position.
* translateX(-50%) centers the 2 px line on the mathematical boundary.
*/
.cramer-ba__divider {
position: absolute;
top: 0;
bottom: 0;
left: var(--ba-position, 50%);
transform: translateX(-50%);
width: 2px;
background: #fff;
pointer-events: none;
}
/*
* Handle button: circular pill centered on the divider line.
* pointer-events:all overrides the parent's none so only the button
* is interactive — the rest of the slider passes pointer events through.
*/
.cramer-ba__handle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: none;
padding: 0;
cursor: ew-resize;
display: flex;
align-items: center;
justify-content: center;
pointer-events: all;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
outline-offset: 3px;
}
.cramer-ba__handle:focus-visible {
outline: 2px solid #fff;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.45);
}
/*
* Handle icon: CSS-only double-arrow (◀ ▶) using ::before and ::after.
* Each arrow is a 0-width/0-height box with three borders forming a triangle.
* No SVG, no image — zero extra assets to load.
*/
.cramer-ba__handle-icon {
position: relative;
display: flex;
align-items: center;
gap: 4px;
}
.cramer-ba__handle-icon::before,
.cramer-ba__handle-icon::after {
content: "";
display: block;
width: 0;
height: 0;
}
/* Left-pointing triangle */
.cramer-ba__handle-icon::before {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 8px solid #333;
}
/* Right-pointing triangle */
.cramer-ba__handle-icon::after {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid #333;
}
/*
* Labels: absolutely positioned text over each half of the slider.
* font-size uses clamp() to scale between small and large viewports.
* text-shadow ensures legibility on both light and dark images.
*/
.cramer-ba__label {
position: absolute;
font-weight: 700;
font-style: italic;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: clamp(1.4rem, 3vw, 2.2rem);
line-height: 1;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
padding: 0.8rem 1rem;
pointer-events: none;
}
.cramer-ba__label--top-left { top: 0; left: 0; }
.cramer-ba__label--top-right { top: 0; right: 0; }
.cramer-ba__label--bottom-left { bottom: 0; left: 0; }
.cramer-ba__label--bottom-right { bottom: 0; right: 0; }
/* On white-background blocks, flip labels to dark text */
.cramer-mosaic-block--bg-white .cramer-ba__label {
color: #000;
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
}
/* ── Responsive: mobile (≤768px) ────────────────────────────────────────── */
/*
* On mobile the row collapses to a flex column (handled by the existing
* .cramer-mosaic-grid-row-dynamic rule). The elements-wrap gap is reduced
* slightly to tighten vertical rhythm on small screens.
*/
@media (max-width: 768px) {
.cramer-mosaic-elements-wrap {
gap: 1.6rem;
}
}