/**
* Kleyman — ABOUT PAGE, structural rebuild v2 (2026-10).
*
* Scoped entirely under .kleyman-ab / .kleyman-ab-* classnames so nothing
* here can collide with the homepage's .kleyman-about/.kleyman-timeline
* component classes in main.css, or with the simpler .kleyman-about-story /
* .kleyman-timeline-simple / .kleyman-values-grid / .kleyman-leadership-grid
* rules in inner-pages.css still used by other inner pages. Reuses the same
* custom properties, radii, shadows and ease curve already defined in
* main.css's :root — no new design language introduced.
*
* Section order in this file follows the rebuilt page-about.php:
* 01 Hero · 02 Story · 03 People · 04 History · 05 Values · 06 Trust ·
* 07 Projects (last content section — nothing follows it but body spacing
* and the homepage's own footer-showcase.php).
*
* RTL note: throughout this file, two-column grids rely on this theme's
* existing convention (see the pre-rebuild Story section) that the FIRST
* DOM child of a grid lands in the right-hand column and the second in the
* left-hand column under the page's RTL direction — so "copy first, media
* second" reads as "text right / image left" without any explicit
* direction overrides.
*
* Enqueued only on the About page (functions.php, is_page('about')), after
* kleyman-inner-pages so it can build on the shared .kleyman-section /
* .kleyman-section__eyebrow / .kleyman-cert-chip rules already there.
*
* @package Kleyman
*/
.kleyman-ab { overflow: hidden; }
/* Page-scoped wider grid: wider than the sitewide 1280px .kleyman-container
used everywhere else, matching the sketch's generous content widths. */
.kleyman-ab .kleyman-container { max-width: 1480px; }
.kleyman-ab h1, .kleyman-ab h2, .kleyman-ab h3 { margin: 0; }
.kleyman-ab p { margin: 0; }
.kleyman-section__eyebrow--on-dark { color: var(--kleyman-green); }
/*
* TYPE SCALE — round two correction, applied before any single section's
* "decoration". Scoped overrides of the shared .kleyman-section__eyebrow /
* __lede (inner-pages.css, 13px / 17px) so the About page's labels and body
* copy land inside the brief's 14-17px / 18-20px bands without changing
* those shared classes for every other inner page. Desktop reference: 1440px.
*/
.kleyman-ab .kleyman-section__eyebrow { font-size: 16px; font-weight: 600; letter-spacing: .05em; }
.kleyman-ab .kleyman-section__lede { font-size: 19px; line-height: 1.75; }
/* ==========================================================================
01 — HERO — rebuilt Oct 2026 per the client's hero-only brief, then
revised once more per direct follow-up feedback: the stats strip is
gone, every remaining element scaled up to fill the space it freed,
"באהבה" is now set fully in brand green (not just a micro underline),
and the entrance gets a richer, more cinematic set of effects — a
curtain-wipe reveal on the photo plus a per-line mask reveal on the
headline, layered on top of the existing fade+rise.
========================================================================== */
.kleyman-ab-hero {
position: relative;
min-height: 90vh; /* within the brief's 88–94vh band */
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
overflow: hidden;
}
.kleyman-ab-hero__media {
position: absolute;
/* Slightly oversized + re-centered so the scroll parallax (about.js)
has room to translate the layer without ever exposing an edge. */
inset: -4% 0 -4% 0;
z-index: 0;
will-change: transform;
}
.kleyman-ab-hero__img {
width: 100%; height: 100%; object-fit: cover;
/* The source rendering already frames the tower + retail podium on
the left two-thirds with open sky on the right — object-position
is nudged slightly left so that framing holds at ultra-wide
viewports without pushing the building past the text column. */
object-position: 38% 50%;
}
/*
* Directional navy wash: a VERY light veil over the image generally (for
* overall legibility/brand tone), strengthening only behind the text
* column (right, in RTL) and deepening to a solid, brand-navy band at the
* very bottom — never an aggressive full-image darken. That solid bottom
* band gives the hero a clean, deliberate edge to meet the next section
* with (no hard photo crop, no new "divider" shape invented — just the
* site's own navy token).
*/
.kleyman-ab-hero__overlay {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(12,22,58,.08) 0%, rgba(12,22,58,.14) 58%, var(--kleyman-dark) 100%),
linear-gradient(to left, rgba(12,22,58,.62) 0%, rgba(12,22,58,.38) 30%, rgba(12,22,58,0) 62%);
}
/*
* Entrance effect — a solid navy curtain that fully covers the photo on
* load and wipes away (scaleX → 0, collapsing toward the right) once the
* page is ready, like a shutter opening onto the image. Sits above the
* image+overlay during the wipe, then gets out of the way entirely.
*/
.kleyman-ab-hero__veil {
position: absolute; inset: 0; z-index: 2;
background: var(--kleyman-dark);
transform-origin: right center;
transition: transform 1.3s var(--kleyman-ease);
}
.kleyman-ab-hero.is-revealed .kleyman-ab-hero__veil { transform: scaleX(0); }
/*
* __crumbs is a direct flex child of .kleyman-ab-hero (flex-direction:
* column; justify-content:flex-end). margin-bottom:auto pins JUST this
* child to the top of the hero while __content keeps clustering at the
* bottom — standard flex trick, no need to change justify-content.
*/
.kleyman-ab-hero__crumbs { position: relative; z-index: 3; margin-bottom: auto; padding-top: 124px; }
.kleyman-ab-hero__content { position: relative; z-index: 3; padding-top: 0; padding-bottom: 72px; }
.kleyman-ab-hero .kleyman-breadcrumbs { margin-bottom: 0; }
.kleyman-ab-hero .kleyman-breadcrumbs a,
.kleyman-ab-hero .kleyman-breadcrumbs span { color: rgba(255,255,255,.65); }
.kleyman-ab-hero__eyebrow {
display: inline-block;
font-size: 17px; font-weight: 600; letter-spacing: .1em;
color: rgba(255,255,255,.82);
margin-bottom: 26px;
}
/*
* Text column: right-aligned (RTL start side), each child carrying its
* own controlled max-width rather than a wrapping box — generous
* whitespace to the left is simply whatever the container doesn't use.
* Sizes bumped up across the board now that the stats strip is gone and
* the headline is the undisputed anchor of the hero's bottom cluster.
*/
.kleyman-ab-hero__title {
font-size: clamp(46px, 6.2vw, 92px);
font-weight: 700;
line-height: 1.12;
max-width: 15ch;
}
/* Mask wrapper: overflow-hidden "window" each line reveals up through. */
.kleyman-ab-hero__title-mask { display: block; overflow: hidden; }
.kleyman-ab-hero__title-line { display: block; }
/*
* Direct feedback: the word "באהבה" should be full brand green, not a
* small underline detail — the whole final line is set in green now.
*/
.kleyman-ab-hero__title-line--accent { color: var(--kleyman-green); }
.kleyman-ab-hero__subtitle {
margin-top: 34px;
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.65;
color: rgba(255,255,255,.8);
max-width: 44ch;
}
/* Elegant text CTA — no button chrome, a thin underline + small arrow that
nudges down on hover. */
.kleyman-ab-hero__cta {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 40px;
font-size: 16px;
font-weight: 600;
color: #fff;
text-decoration: none;
cursor: pointer;
}
.kleyman-ab-hero__cta-text {
position: relative;
padding-bottom: 3px;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 1px;
transition: opacity .3s var(--kleyman-ease);
}
.kleyman-ab-hero__cta-arrow { display: inline-block; font-size: 15px; transition: transform .3s var(--kleyman-ease); }
.kleyman-ab-hero__cta:hover .kleyman-ab-hero__cta-arrow,
.kleyman-ab-hero__cta:focus-visible .kleyman-ab-hero__cta-arrow { transform: translateY(4px); }
.kleyman-ab-hero__cta:hover .kleyman-ab-hero__cta-text,
.kleyman-ab-hero__cta:focus-visible .kleyman-ab-hero__cta-text { opacity: .78; }
.kleyman-ab-hero__cta:focus-visible { outline: 2px solid var(--kleyman-green); outline-offset: 4px; border-radius: 2px; }
/* Small, clean scroll cue — bottom-center, layered over the solid navy
band so it never competes with the photo. Click/tap/Enter smooth-scrolls
to the next section (about.js); href-less by nature so no-JS just hides
nothing (content above is already fully usable without it). */
.kleyman-ab-hero__scroll {
position: absolute;
bottom: 20px; left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 32px; height: 40px;
padding: 0;
background: none; border: none;
cursor: pointer;
opacity: .55;
transition: opacity .3s var(--kleyman-ease);
}
.kleyman-ab-hero__scroll:hover,
.kleyman-ab-hero__scroll:focus-visible { opacity: 1; }
.kleyman-ab-hero__scroll:focus-visible { outline: 2px solid var(--kleyman-green); outline-offset: 2px; border-radius: 4px; }
.kleyman-ab-hero__scroll-line {
display: block;
width: 1px; height: 28px;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 55%, rgba(255,255,255,0) 100%);
animation: kleyman-ab-scroll-cue 2.2s ease-in-out infinite;
}
@keyframes kleyman-ab-scroll-cue {
0% { transform: scaleY(.35); transform-origin: top; opacity: .5; }
50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
100% { transform: scaleY(.35); transform-origin: bottom; opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
.kleyman-ab-hero__scroll-line { animation: none; }
}
/* data-ab-hero-line entrance (driven by about.js; CSS fallback keeps content
visible even if JS never runs) — staggered per element so the eyebrow,
headline, paragraph and CTA settle in sequence, not all at once. */
.js-anim-ready .kleyman-ab-hero [data-ab-hero-line] { opacity: 0; transform: translateY(26px); }
.js-anim-ready .kleyman-ab-hero.is-revealed [data-ab-hero-line] {
opacity: 1; transform: none;
transition: opacity 1s var(--kleyman-ease), transform 1s var(--kleyman-ease);
}
.kleyman-ab-hero__eyebrow { transition-delay: .05s; }
.kleyman-ab-hero__title { transition-delay: .15s; }
.kleyman-ab-hero__subtitle { transition-delay: .42s; }
.kleyman-ab-hero__cta { transition-delay: .56s; }
/*
* Per-line mask reveal on the headline: each line rises up through its own
* overflow-hidden window, independent of (and layered on top of) the H1's
* own fade+rise above. Second line (the green "באהבה.") trails the first
* by a beat so the two don't arrive as one flat block.
*/
.js-anim-ready .kleyman-ab-hero__title-line { transform: translateY(115%); transition: transform 1.1s var(--kleyman-ease); }
.js-anim-ready .kleyman-ab-hero.is-revealed .kleyman-ab-hero__title-line { transform: translateY(0); }
.kleyman-ab-hero__title-mask:nth-of-type(1) .kleyman-ab-hero__title-line { transition-delay: .3s; }
.kleyman-ab-hero__title-mask:nth-of-type(2) .kleyman-ab-hero__title-line { transition-delay: .44s; }
@media (prefers-reduced-motion: reduce) {
.kleyman-ab-hero__veil { transition: none; }
.js-anim-ready .kleyman-ab-hero__title-line { transition: none; }
}
/* ==========================================================================
02 — FAMILY STORY — Oct 2026 rebuild (premium/editorial brief)
Pure white background, RTL content right / collage left, ~46%/50% split,
no cards/boxes/shadows-as-decoration, no CTA. See page-about.php for the
accompanying markup rebuild.
========================================================================== */
.kleyman-ab-story { padding-block: 140px; background: #fff; overflow: hidden; }
.kleyman-ab-story__grid {
display: grid;
/* ~46% content / ~50% collage, generous gap between — content column is
deliberately the slightly narrower one per the brief's proportions. */
grid-template-columns: 0.92fr 1fr;
gap: 7vw;
align-items: center;
}
.kleyman-ab-story__copy { position: relative; z-index: 1; }
/* Giant, near-invisible editorial typography layer behind the headline —
a depth cue only, never allowed to compete with real text (opacity kept
very low; purely decorative so it's unconditionally pointer-events:none
and aria-hidden). */
.kleyman-ab-story__num-bg {
position: absolute;
top: -0.42em;
inset-inline-end: -0.05em;
font-size: clamp(220px, 19vw, 300px);
font-weight: 700;
line-height: 1;
color: var(--kleyman-dark);
opacity: 0.035;
direction: ltr;
unicode-bidi: isolate;
pointer-events: none;
user-select: none;
z-index: -1;
white-space: nowrap;
}
.kleyman-ab-story__eyebrow {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 600;
letter-spacing: .02em;
color: var(--kleyman-dark);
}
.kleyman-ab-story__eyebrow-rule { width: 26px; height: 2px; background: var(--kleyman-green); display: inline-block; flex: none; }
.kleyman-ab-story__title {
position: relative;
/* "Large, strong, elegant" per brief. Oct 2026 QA fix: the previous
max-width:15ch was narrower than either of the two
-separated
phrases in the copy, so each phrase itself wrapped again — 4 lines
instead of the intended 2. Sized down slightly and max-width removed
(the column width + the explicit
are what control the two
lines now), so each phrase reliably stays on its own single line. */
font-size: clamp(25px, 2.15vw, 42px);
font-weight: 700;
line-height: 1.22;
margin-block: 22px 28px;
color: var(--kleyman-dark);
max-width: none;
}
/* Only the single word "משפחה" is green — never a whole line (explicit
brief correction from an earlier, broader green treatment). */
.kleyman-ab-story__title-accent { color: var(--kleyman-green); }
.kleyman-ab-story__lede {
position: relative;
font-size: 18px;
line-height: 1.75;
color: var(--kleyman-text);
margin-bottom: 18px;
max-width: 620px;
}
.kleyman-ab-story__sub {
position: relative;
font-size: 18px;
line-height: 1.75;
color: var(--kleyman-text-muted);
max-width: 620px;
}
/* Inline numeral accent inside the lede sentence only (the founding year) —
direction:ltr/unicode-bidi:isolate so it renders correctly inside the
surrounding RTL sentence. */
.kleyman-ab-story__num {
font-weight: 800;
color: var(--kleyman-green);
font-variant-numeric: tabular-nums;
direction: ltr;
unicode-bidi: isolate;
}
/* ---- Stats row — four plain columns, no cards/boxes/backgrounds/dots ---- */
.kleyman-ab-story__stats {
position: relative;
display: flex;
align-items: center;
gap: 34px;
margin-top: 46px;
flex-wrap: wrap;
}
.kleyman-ab-story__stat { display: flex; flex-direction: column; gap: 6px; }
.kleyman-ab-story__stat-value-wrap {
display: inline-flex;
align-self: flex-start; /* RTL column flex: keeps "+33" on the label's (right) edge instead of stretching LTR to the left */
align-items: baseline;
direction: ltr;
unicode-bidi: isolate;
}
.kleyman-ab-story__stat-plus {
font-size: clamp(34px, 2.6vw, 44px);
font-weight: 800;
line-height: 1;
color: var(--kleyman-dark);
}
.kleyman-ab-story__stat-value {
font-size: clamp(34px, 2.6vw, 44px);
font-weight: 800;
line-height: 1;
color: var(--kleyman-dark);
font-variant-numeric: tabular-nums;
}
.kleyman-ab-story__stat-label {
font-size: 15px;
color: var(--kleyman-text-muted);
}
.kleyman-ab-story__stats-rule {
width: 1px;
height: 38px;
background: rgba(12,22,58,.14);
flex: none;
align-self: center;
}
/* ---- Architectural collage — Oct 2026 QA: trimmed to 3 non-symmetrical
overlapping crops (the 4th — the only genuinely low-res source, upscaled
into the tall "main" slot — was dropped rather than kept at a smaller
size). The near-square source is now the "main" slot so nothing is
upscaled past its native resolution. ---- */
.kleyman-ab-story__collage {
position: relative;
min-height: 640px;
}
.kleyman-ab-story__collage-item {
position: absolute;
overflow: hidden;
border-radius: 20px;
background: #f2f3f6;
}
.kleyman-ab-story__collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* IMAGE 1 — main, near-square source cropped to a tall portrait, ~66% of
the collage width, right-aligned within the collage (nearest the copy
column). */
.kleyman-ab-story__collage-item--main {
inset-inline-end: 0;
top: 7%;
width: 66%;
aspect-ratio: 4 / 5;
z-index: 1;
box-shadow: 0 18px 44px -20px rgba(12,22,58,.28);
}
/* IMAGE 2 — wide horizontal, anchored to the collage's bottom-start corner,
deliberately overlapping the main image's lower-left so it reads as a
foundation layer rather than a floating card. */
.kleyman-ab-story__collage-item--secondary {
inset-inline-start: 0;
bottom: 0;
width: 56%;
aspect-ratio: 4 / 3;
z-index: 2;
border: 3px solid #fff;
box-shadow: 0 14px 34px -16px rgba(12,22,58,.3);
}
/* IMAGE 3 — narrow vertical detail, peeking in from the top-start corner
and overlapping the main image's top edge — the deliberate grid-breaking
element the brief calls for, now doing that job alone instead of
splitting it with a 4th overlay. */
.kleyman-ab-story__collage-item--detail {
inset-inline-start: 9%;
top: 0;
width: 32%;
aspect-ratio: 3 / 4.2;
z-index: 3;
border: 3px solid #fff;
box-shadow: 0 14px 30px -14px rgba(12,22,58,.32);
}
/* ---- Entrance motion — subtle only; reveal handled by the existing
[data-animate="fade-up"] + data-delay infra (animations.js/main.css).
Collage images get a very small parallax drift on scroll only
(about.js), gated the same way as the hero's media parallax. ---- */
.js-anim-ready .kleyman-ab-story__collage-item { transition: transform 1s var(--kleyman-ease), opacity 1s var(--kleyman-ease); }
@media (prefers-reduced-motion: reduce) {
.kleyman-ab-story__collage-item { transition: none !important; }
}
/* ==========================================================================
03 — PEOPLE — "האנשים שמאחורי קליימן" (text right, photos left)
========================================================================== */
.kleyman-ab-people { padding-block: 130px; background: var(--kleyman-light); }
.kleyman-ab-people__grid {
display: grid;
/* Photos get ~60-65% of the content width on desktop (1fr of .62fr+1fr
≈ 62%), text the rest — this section is meant to be one of the
page's strongest moments, not a small team strip beside the real
content. Order in source is text-first/photos-second, which under
this theme's RTL grid convention still lands text on the right. */
grid-template-columns: .62fr 1fr;
/* Gap tightened (was 80px) so the photo cluster gains presence at the
expense of the dead space beside it, not by changing the basic
division of the section (Oct 2026 QA). */
gap: 52px;
align-items: stretch;
}
.kleyman-ab-people__text {
/* Oct 2026 QA fix: align-items:center on the grid left the (shorter)
text block vertically centered as one tight cluster against the
(taller) photo row, reading as a big empty gap below it. Stretched
to the photo row's full height instead and laid out as a column with
space-between, so the statement anchors near the BOTTOM of the
photos rather than floating in dead space under the lede. */
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
}
.kleyman-ab-people__title {
/* Significantly enlarged, per brief, into the section-heading band. */
font-size: clamp(36px, 3.6vw, 50px);
font-weight: 700;
color: var(--kleyman-dark);
margin-block: 16px 18px;
}
.kleyman-ab-people__text .kleyman-section__lede { margin: 0; }
/* Giant faint quotation mark — the same "oversized, near-invisible
editorial typography" device used behind the Story section's "1993", now
reused here behind the statement so the two sections read as one
consistent visual language instead of one-off treatments per section. */
.kleyman-ab-people__quote-mark {
position: absolute;
top: -0.56em;
inset-inline-start: -0.1em;
font-size: 220px;
font-weight: 800;
line-height: 1;
color: var(--kleyman-dark);
opacity: 0.05;
pointer-events: none;
user-select: none;
z-index: 0;
}
.kleyman-ab-people__statement {
/* More typographic presence (Oct 2026 QA: was clamp(22,2vw,28)) so this
line becomes a real second focal point next to the photos, balanced
by the existing green rule — no new copy, just visual weight. */
position: relative;
z-index: 1;
font-size: clamp(25px, 2.3vw, 33px);
font-weight: 700;
line-height: 1.45;
color: var(--kleyman-dark);
border-inline-start: 3px solid var(--kleyman-green);
padding-inline-start: 20px;
}
.kleyman-ab-people__gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.kleyman-ab-leader { margin: 0; cursor: default; transition: opacity .4s var(--kleyman-ease), transform .4s var(--kleyman-ease); }
.kleyman-ab-leader:focus { outline: none; }
/*
* Oct 2026 — brief: "the selected person becomes dominant, the others drop
* to ~35% opacity" as a GROUP interaction, not just a lone hover-scale on
* the photo under the cursor. .is-dimmed / .is-focused are toggled on the
* gallery's siblings by about.js (mouseenter/mouseleave + focus/blur on
* each figure) — plain JS rather than a :has() selector, so this still
* works identically in any browser regardless of :has() support.
*/
/*
* !important is required on opacity here: animations.js's generic fade-up
* entrance (every .kleyman-ab-leader has data-animate="fade-up") leaves a
* GSAP-set inline opacity:1 on the element after it plays — inline style
* beats an external stylesheet rule regardless of selector weight, so
* without !important this hover-dim would silently never apply once the
* entrance animation has run (confirmed via computed-style QA).
*/
/* Oct 2026 fix: mouse devices only — on touch the dim state could get stuck
(tap = emulated mouseenter with no mouseleave), hiding the portraits. */
@media (any-hover: hover) {
.kleyman-ab-people__gallery.is-interacting .kleyman-ab-leader { opacity: .35 !important; transform: scale(.98); }
.kleyman-ab-people__gallery.is-interacting .kleyman-ab-leader.is-focused { opacity: 1 !important; transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
.kleyman-ab-leader { transition: none; }
}
.kleyman-ab-leader__photo {
position: relative;
aspect-ratio: 3 / 4;
/* Bumped from --kleyman-radius-md (14px) to match the Story collage's
20px, so photo treatment reads consistently across the page rather
than each section inventing its own corner rounding (Oct 2026 QA). */
border-radius: 20px;
overflow: hidden;
background: #fff;
box-shadow: var(--kleyman-shadow-sm);
}
.kleyman-ab-leader__photo img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; object-position: top center;
/* Oct 2026 QA — unified cross-photo treatment: the three source photos
were shot in genuinely different settings (warm office / cool glass-
office closeup / flat studio grey) and no per-photo brightness/
contrast correction made them read as one series. Desaturating
uniformly removes each photo's own competing color cast; the navy
duotone wash below (::after) then ties all three to the same brand
color regardless of their original lighting. */
filter: grayscale(.45) contrast(1.06) brightness(1.03);
transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.kleyman-ab-leader:hover .kleyman-ab-leader__photo img,
.kleyman-ab-leader:focus-visible .kleyman-ab-leader__photo img { transform: scale(1.06); }
/* Oct 2026 QA — Arkady's source photo is a loose studio headshot with a wide
pale backdrop margin, which object-fit:cover was showing almost in full;
that light backdrop blended into the card's white background so the photo
read as if it wasn't filling the card (rounded corners invisible against
the matching-white edges). Zooming the crop in tightens it onto his face/
shoulders like the other two leaders' tighter source photos, with no
change to the source file. Hover scale is nudged up proportionally so the
micro-interaction still reads at the new base zoom. */
.kleyman-ab-leader__photo--tight img { transform: scale(1.38); }
.kleyman-ab-leader:hover .kleyman-ab-leader__photo--tight img,
.kleyman-ab-leader:focus-visible .kleyman-ab-leader__photo--tight img { transform: scale(1.46); }
/* Shared navy duotone wash — one consistent "color grade" laid over all
three photos alike, mix-blend-mode:multiply so it reads as a tint rather
than a flat color block. This is what actually makes three differently-
lit source photos look like one photographed series. */
.kleyman-ab-leader__photo::after {
content: '';
position: absolute; inset: 0;
z-index: 1;
background: linear-gradient(165deg, rgba(20,34,74,.24) 0%, rgba(20,34,74,.08) 55%, rgba(20,34,74,.2) 100%);
mix-blend-mode: multiply;
pointer-events: none;
}
/* Hover/focus-reveal bio — uses the $kleyman_leaders[]['bio'] copy that was
already approved and present in the data but previously never rendered
anywhere on the page. Appears as a dark gradient + short bio line rising
from the bottom of the photo, exactly like the brief's "overlap /
hover-reveal" leadership-card pattern — no layout shift, no new content. */
.kleyman-ab-leader__photo-overlay {
position: absolute; inset: 0;
z-index: 2;
background: linear-gradient(0deg, rgba(10,16,40,.92) 0%, rgba(10,16,40,.55) 42%, rgba(10,16,40,0) 72%);
opacity: 0;
transition: opacity .35s ease;
pointer-events: none;
}
.kleyman-ab-leader__bio {
position: absolute; inset-inline: 0; bottom: 0;
z-index: 2;
padding: 22px 18px 20px;
opacity: 0;
transform: translateY(10px);
transition: opacity .35s ease, transform .35s ease;
}
.kleyman-ab-leader__bio p {
margin: 0;
color: #fff;
font-size: 14.5px;
line-height: 1.55;
font-weight: 500;
}
.kleyman-ab-leader:hover .kleyman-ab-leader__photo-overlay,
.kleyman-ab-leader:focus-visible .kleyman-ab-leader__photo-overlay,
.kleyman-ab-leader:hover .kleyman-ab-leader__bio,
.kleyman-ab-leader:focus-visible .kleyman-ab-leader__bio { opacity: 1; }
.kleyman-ab-leader:hover .kleyman-ab-leader__bio,
.kleyman-ab-leader:focus-visible .kleyman-ab-leader__bio { transform: translateY(0); }
@media (hover: none) {
/* Touch devices: no hover, so the bio is always legibly present as a
permanent caption strip rather than content the visitor can never
reach — never hide information behind a gesture mobile can't do. */
.kleyman-ab-leader__photo-overlay,
.kleyman-ab-leader__bio { opacity: 1; transform: none; }
.kleyman-ab-leader__bio p { font-size: 13px; }
}
/* Name + role moved OUT of the photo (no more overlay/caption on the image
itself) and placed below it, in navy text on the section's own
background — name prominent (names/titles band, 22-26px), role smaller
but still clearly legible (labels band, 14-17px), never tiny. */
.kleyman-ab-leader__caption {
display: flex; flex-direction: column; gap: 4px;
margin-top: 18px;
text-align: center;
}
.kleyman-ab-leader__name { font-size: 23px; font-weight: 700; color: var(--kleyman-dark); }
.kleyman-ab-leader__role { font-size: 15px; color: var(--kleyman-text-muted); font-weight: 600; }
@media (max-width: 760px) {
/* Single column on mobile: 3 narrow photos would squeeze both the
photos and the (now below-photo) names to unreadable widths. */
.kleyman-ab-people__gallery { grid-template-columns: 1fr; gap: 32px; width: 100%; max-width: 300px; margin-inline: auto; } /* width:100% — auto margins on a grid item otherwise shrink it to 160px */
.kleyman-ab-leader__caption { margin-top: 12px; }
.kleyman-ab-leader__name { font-size: 20px; }
.kleyman-ab-leader__role { font-size: 14px; }
}
/* Oct 2026 — secondary staff list: same People section, deliberately a much
lower visual tier than the three photographed leaders above (no photos,
no cards, quiet typography) — just a plain credits-style list under a
thin divider. */
.kleyman-ab-staff {
margin-top: 48px;
padding-top: 26px;
border-top: 1px solid var(--kleyman-border);
}
.kleyman-ab-staff__label {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
color: var(--kleyman-text-muted);
margin-bottom: 18px;
}
/* One full-width row of all 5 people side by side (not stacked, not
wrapped into a ragged multi-line list) — an equal-width column per
person, each carrying its own small stack of details. */
.kleyman-ab-staff__list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
list-style: none;
margin: 0;
padding: 0;
}
.kleyman-ab-staff__item {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 13px;
padding-inline-end: 18px;
border-inline-end: 1px solid var(--kleyman-border);
}
.kleyman-ab-staff__item:last-child { border-inline-end: none; padding-inline-end: 0; }
.kleyman-ab-staff__name { font-size: 14px; font-weight: 600; color: var(--kleyman-text); }
.kleyman-ab-staff__role { color: var(--kleyman-text-muted); }
.kleyman-ab-staff__phone { display: block; color: var(--kleyman-text-muted); }
.kleyman-ab-staff__phone a { color: var(--kleyman-text-muted); }
.kleyman-ab-staff__phone a:hover { color: var(--kleyman-dark); }
.kleyman-ab-staff__ext { color: var(--kleyman-text-muted); opacity: .75; }
.kleyman-ab-staff__email {
display: block;
color: var(--kleyman-text-muted);
overflow-wrap: anywhere;
}
.kleyman-ab-staff__email:hover { color: var(--kleyman-dark); }
@media (max-width: 1024px) {
.kleyman-ab-staff__list { grid-template-columns: repeat(3, 1fr); gap: 20px 18px; }
.kleyman-ab-staff__item:nth-child(3) { border-inline-end: none; padding-inline-end: 0; }
}
@media (max-width: 640px) {
.kleyman-ab-staff { margin-top: 40px; padding-top: 20px; }
.kleyman-ab-staff__list { grid-template-columns: 1fr; gap: 16px; }
.kleyman-ab-staff__item { border-inline-end: none; padding-inline-end: 0; padding-bottom: 14px; border-bottom: 1px solid var(--kleyman-border); }
.kleyman-ab-staff__item:last-child { border-bottom: none; padding-bottom: 0; }
/* Client request: staff list centered on mobile. */
.kleyman-ab-staff__label { text-align: center; }
.kleyman-ab-staff__item { align-items: center; text-align: center; }
.kleyman-ab-staff__name { font-size: 15px; }
}
/* ==========================================================================
04 — HISTORY — one concentrated navy module
========================================================================== */
.kleyman-ab-history { background: var(--kleyman-dark); color: #fff; padding-block: 90px; }
/* Significant top heading, per brief — same band as the other section
headings, not a secondary-looking line above the nav. */
/* Oct 2026 QA: "יותר משלושה עשורים של עשייה." (28 chars) was wrapping to two
lines — the 20ch cap was sized for a shorter heading and never revisited.
No max-width constraint now (the section container already bounds it);
white-space:nowrap below the point where it would wrap keeps it a single
line on tablet/desktop, falling back to normal wrapping on narrow phones
where forcing one line would overflow. */
.kleyman-ab-history__title { font-size: clamp(30px, 3.2vw, 52px); font-weight: 700; margin-top: 10px; }
@media (min-width: 641px) {
.kleyman-ab-history__title { white-space: nowrap; }
}
.kleyman-ab-history .kleyman-section__head { margin-bottom: 0; padding-bottom: 40px; max-width: none; }
/*
* Year-tab navigation row: prev/next + tabs are kept as ONE visually
* related cluster (not spread to the two far edges of the wide container)
* by capping the row's width and left-aligning it (RTL: inset-inline-start
* = the right edge, over the content column below), instead of letting
* .kleyman-ab-history__tabs stretch with flex:1 across the full 1480px
* container. Each control also gets a larger comfortable hit area even
* though the icon/label itself stays modest.
*/
.kleyman-ab-history__nav {
display: flex;
align-items: center;
gap: 20px;
max-width: 900px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255,255,255,.14);
}
.kleyman-ab-history__navbtn {
flex-shrink: 0;
width: 52px; height: 52px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.3);
color: #fff;
display: flex; align-items: center; justify-content: center;
transition: border-color .25s var(--kleyman-ease), background-color .25s var(--kleyman-ease);
}
.kleyman-ab-history__navbtn:hover,
.kleyman-ab-history__navbtn:focus-visible { border-color: var(--kleyman-green); background: rgba(17, 121, 58,.12); }
.kleyman-ab-history__tabs {
position: relative;
flex: 0 1 auto;
display: flex;
align-items: center;
gap: clamp(18px, 2.6vw, 36px);
overflow-x: auto;
scrollbar-width: none;
}
/* A thin connecting line running behind the tab row, so the stations read
as one continuous track rather than loose, disconnected labels — the
active year's own underline (below) stays the bold marker on top of it. */
.kleyman-ab-history__tabs::before {
content: '';
position: absolute;
inset-inline: 2px;
bottom: 14px;
height: 1px;
background: rgba(255,255,255,.16);
}
.kleyman-ab-history__tabs::-webkit-scrollbar { display: none; }
.kleyman-ab-history__tab {
position: relative;
flex-shrink: 0;
font-size: clamp(15px, 1.2vw, 17px);
font-weight: 600;
color: rgba(255,255,255,.5);
/* Comfortable click area even though the label itself stays modest. */
padding: 14px 4px;
white-space: nowrap;
max-width: 22ch;
transition: color .3s var(--kleyman-ease);
}
.kleyman-ab-history__tab::after {
content: '';
position: absolute;
bottom: 0; inset-inline: 0;
height: 2px;
background: var(--kleyman-green);
transform: scaleX(0);
/* RTL: the bar fills from the reading-start (right) side toward the
left, matching the module's own right-to-left station order. */
transform-origin: right center;
transition: transform .3s var(--kleyman-ease);
}
.kleyman-ab-history__tab.is-active {
color: var(--kleyman-green);
}
.kleyman-ab-history__tab.is-active::after { transform: scaleX(1); }
.kleyman-ab-history__tab:hover:not(.is-active) { color: rgba(255,255,255,.82); }
/* Oct 2026 — new brief: "a living timeline, not a static click menu". While
autoplaying (about.js), the ACTIVE tab's underline fills gradually over
its dwell time instead of snapping instantly, so the module reads as a
quietly self-advancing piece of the page rather than an inert tab list —
still fully operable by click/keyboard at any time, and autoplay stops
permanently the moment a visitor interacts with it (see about.js). */
.kleyman-ab-history.is-autoplaying .kleyman-ab-history__tab.is-active::after {
transition: none;
animation: kleyman-ab-history-fill var(--kleyman-ab-history-dwell, 5.2s) linear forwards;
}
@keyframes kleyman-ab-history-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.kleyman-ab-history.is-autoplaying .kleyman-ab-history__tab.is-active::after {
animation: none;
transition: transform .3s var(--kleyman-ease);
transform: scaleX(1);
}
}
/* Stage: image large/wide, panel beside it. Tightened margin-top (was
56px on top of the nav's own 56px bottom padding — ~112px of empty navy
before any content; now ~72px total) so there's no dead navy gap. */
.kleyman-ab-history__stage {
margin-top: 40px;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 56px;
align-items: center;
}
.kleyman-ab-history__media {
position: relative;
aspect-ratio: 16 / 10;
border-radius: var(--kleyman-radius-lg);
overflow: hidden;
box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.kleyman-ab-history__media-img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
opacity: 0;
transition: opacity .5s var(--kleyman-ease);
}
.kleyman-ab-history__media-img.is-active { opacity: 1; }
.kleyman-ab-history__media-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(12,22,58,.1), rgba(12,22,58,.35));
}
.kleyman-ab-history__panels { position: relative; min-height: 280px; }
.kleyman-ab-history__panel {
opacity: 1;
transition: opacity .4s var(--kleyman-ease);
}
.kleyman-ab-history__panel[hidden] { display: none; }
/*
* The year (or "היום") becomes the dominant typographic element of the
* active station, per brief: ~96-128px at the 1440px desktop reference.
* 7.4vw × 1440 ≈ 107px, within that band; the clamp floor/ceiling keep it
* in range at other widths and shrink gracefully for the longer word
* "היום" or multi-digit text via its own max-width/line-height rather than
* a separate font-size rule (no per-value markup to key off here).
*/
.kleyman-ab-history__year {
font-size: clamp(68px, 7.8vw, 132px);
font-weight: 700;
line-height: .95;
color: var(--kleyman-green);
display: block;
margin-bottom: 20px;
}
/* Oct 2026 QA: the "no per-value markup to key off here" assumption above
broke the moment a milestone's "year" became a multi-word phrase
("השנים שלאחר מכן") instead of a short year/word — the giant
number-scale clamp rendered four words at ~130px, wildly disproportionate
against the panel title/body under it. page-about.php now flags any
non-numeric, longer-than-4-character year value with this modifier, which
steps it down to a heading-scale size instead of the number-scale one. */
.kleyman-ab-history__year--text {
/* First pass (shrunk to panel-title scale, ~38px) read as inconsistent
next to the other stations' ~130px numbers — client feedback: still
needs to feel like the same family of "big year" treatment, just
wrapped over two lines instead of one giant line. This sits roughly
mid-way between the number scale and the body-copy scale. */
font-size: clamp(44px, 5.2vw, 80px);
line-height: 1.08;
max-width: 9ch;
}
/* The ratio between the giant year and the copy under it was too extreme
(Oct 2026 QA) — both the title and the body copy grow here so the panel
reads as one deliberate composition, not a huge number over small print. */
.kleyman-ab-history__panel-title { font-size: clamp(24px, 2.1vw, 30px); font-weight: 700; margin-bottom: 14px; }
.kleyman-ab-history__panel-text { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.8; color: rgba(255,255,255,.76); max-width: 46ch; }
/* Per-panel image — desktop keeps the single shared crossfading stage, so
this duplicate stays hidden there. */
.kleyman-ab-history__panel-img { display: none; }
/*
* Oct 2026 — brief: desktop gets a scroll-driven, sticky-pinned timeline
* (see about.js, ScrollTrigger.matchMedia '(min-width: 1025px)'); below
* that this module deliberately becomes a plain, un-pinned "step-based
* vertical journey" instead — the brief's own explicit instruction for
* mobile ("Timeline: להפוך ל-step-based vertical journey"), not a
* shrunk-down copy of the desktop interaction. No JS drives this: every
* panel is simply un-hidden and stacked, each pairing its own image with
* its own year/title/text, and the ordinary [data-animate] fade-up
* entrance (animations.js) gives each one its own scroll-in moment.
*/
@media (max-width: 1024px) {
.kleyman-ab-history { padding-block: 64px; }
.kleyman-ab-history__nav { display: none; }
.kleyman-ab-history__stage { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
.kleyman-ab-history__media { display: none; }
.kleyman-ab-history__panels { min-height: 0; }
.kleyman-ab-history__panel {
opacity: 1 !important;
padding-block: 36px;
border-top: 1px solid rgba(255,255,255,.14);
}
.kleyman-ab-history__panel:first-child { border-top: none; padding-top: 0; }
.kleyman-ab-history__panel[hidden] { display: block !important; }
.kleyman-ab-history__panel-img {
display: block;
aspect-ratio: 16 / 10;
border-radius: var(--kleyman-radius-lg);
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 20px 44px rgba(0,0,0,.35);
}
.kleyman-ab-history__panel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kleyman-ab-history__year { font-size: clamp(48px, 13vw, 72px); margin-bottom: 14px; }
.kleyman-ab-history__year--text { font-size: clamp(32px, 8vw, 44px); }
}
@media (max-width: 640px) {
.kleyman-ab-history__panel { padding-block: 28px; }
}
/* ==========================================================================
05 — PRINCIPLES — "מה שמוביל אותנו בכל פרויקט" (Oct 2026 rebuild)
Plain white section: eyebrow + one-line H1-weight heading, then 5 open
principle items (no numbering, no cards) in two centered rows (3 + 2).
Content/structure/animation timings follow the approved brief exactly.
========================================================================== */
.kleyman-ab-principles { background: #fff; padding-block: 130px; }
.kleyman-ab-principles .kleyman-container { max-width: 1560px; }
.kleyman-ab-principles__head { text-align: right; margin-bottom: 80px; }
.kleyman-ab-principles__title {
margin-top: 10px;
font-size: clamp(32px, 4vw, 68px);
font-weight: 800;
line-height: 1.05;
color: var(--kleyman-dark);
white-space: nowrap;
}
.kleyman-ab-principles__row {
display: flex;
gap: 40px;
flex-wrap: wrap;
}
.kleyman-ab-principles__row + .kleyman-ab-principles__row { margin-top: 40px; }
/* Row 2 (2 items) is centered as its own group rather than grid-auto-placed,
so it never bunches against one edge — each item still takes the exact
same width share as a row-1 item, so both rows read as one aligned grid. */
.kleyman-ab-principles__row--bottom { justify-content: center; }
.kleyman-ab-principle {
flex: 1 1 calc((100% - 80px) / 3);
min-width: 260px;
min-height: 280px;
padding: 36px 26px;
border-top: 1px solid var(--kleyman-border);
text-align: right;
transition: transform .45s var(--kleyman-ease);
}
.kleyman-ab-principles__row--bottom .kleyman-ab-principle { flex: 0 1 calc((100% - 80px) / 3); }
.kleyman-ab-principle:focus { outline: none; }
.kleyman-ab-principle__icon {
display: block;
width: 96px; height: 96px;
margin-inline-start: 0;
margin-inline-end: auto; /* icon aligned to the reading-start edge (right, RTL) */
color: var(--kleyman-dark);
opacity: .82;
transition: opacity .4s var(--kleyman-ease);
}
.kleyman-ab-principle__icon svg { width: 100%; height: 100%; }
.kleyman-ab-principle__icon svg path,
.kleyman-ab-principle__icon svg circle {
stroke-dasharray: 1px;
stroke-dashoffset: 0;
}
/* "Lottie plays once" equivalent: a one-shot draw-in redraw of every icon
stroke on hover/focus — restarts cleanly each time the :hover/:focus-within
state is newly entered, since re-applying an `animation` always restarts
it from its 0% keyframe. */
@keyframes kleymanPrincipleDraw {
from { stroke-dashoffset: 1px; }
to { stroke-dashoffset: 0; }
}
.kleyman-ab-principle:hover .kleyman-ab-principle__icon svg path,
.kleyman-ab-principle:hover .kleyman-ab-principle__icon svg circle,
.kleyman-ab-principle:focus-within .kleyman-ab-principle__icon svg path,
.kleyman-ab-principle:focus-within .kleyman-ab-principle__icon svg circle {
animation: kleymanPrincipleDraw .6s var(--kleyman-ease);
}
.kleyman-ab-principle:hover .kleyman-ab-principle__icon,
.kleyman-ab-principle:focus-within .kleyman-ab-principle__icon { opacity: 1; }
.kleyman-ab-principle__title {
margin-top: 28px;
font-size: 26px;
font-weight: 700;
line-height: 1.25;
color: var(--kleyman-dark);
transition: transform .4s var(--kleyman-ease);
}
.kleyman-ab-principle:hover .kleyman-ab-principle__title,
.kleyman-ab-principle:focus-within .kleyman-ab-principle__title { transform: translateY(-4px); }
/* Short green rule that opens under the title on hover — brief: "קו ירוק
קצר נפתח מתחת לכותרת". */
.kleyman-ab-principle__rule {
display: block;
width: 0;
height: 2px;
margin-block: 14px;
background: var(--kleyman-green);
transition: width .45s var(--kleyman-ease);
}
.kleyman-ab-principle:hover .kleyman-ab-principle__rule,
.kleyman-ab-principle:focus-within .kleyman-ab-principle__rule { width: 48px; }
.kleyman-ab-principle__text {
font-size: 17px;
line-height: 1.7;
color: var(--kleyman-text-muted);
max-width: 46ch;
margin-inline-start: auto;
transition: color .35s var(--kleyman-ease);
}
.kleyman-ab-principle:hover .kleyman-ab-principle__text,
.kleyman-ab-principle:focus-within .kleyman-ab-principle__text { color: var(--kleyman-text); }
@media (prefers-reduced-motion: reduce) {
.kleyman-ab-principle,
.kleyman-ab-principle__icon,
.kleyman-ab-principle__title,
.kleyman-ab-principle__rule,
.kleyman-ab-principle__text { transition: none; }
.kleyman-ab-principle:hover .kleyman-ab-principle__icon svg path,
.kleyman-ab-principle:hover .kleyman-ab-principle__icon svg circle,
.kleyman-ab-principle:focus-within .kleyman-ab-principle__icon svg path,
.kleyman-ab-principle:focus-within .kleyman-ab-principle__icon svg circle { animation: none; }
}
@media (max-width: 1024px) {
.kleyman-ab-principles { padding-block: 96px; }
.kleyman-ab-principles__title { font-size: clamp(30px, 5vw, 44px); white-space: normal; }
.kleyman-ab-principle,
.kleyman-ab-principles__row--bottom .kleyman-ab-principle { flex: 1 1 calc((100% - 40px) / 2); }
}
@media (max-width: 640px) {
.kleyman-ab-principles { padding-block: 64px; }
.kleyman-ab-principles__head { margin-bottom: 48px; }
.kleyman-ab-principles__row,
.kleyman-ab-principles__row--bottom { flex-direction: column; gap: 0; justify-content: flex-start; }
.kleyman-ab-principles__row + .kleyman-ab-principles__row { margin-top: 0; }
.kleyman-ab-principle,
.kleyman-ab-principles__row--bottom .kleyman-ab-principle { flex: 1 1 100%; min-height: 0; padding: 28px 4px; }
.kleyman-ab-principle__icon { width: 84px; height: 84px; }
}
/* ==========================================================================
06 — TRUST / CERTIFICATION STRIP
========================================================================== */
.kleyman-ab-trust { background: var(--kleyman-light); padding-block: 56px; }
.kleyman-ab-trust__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; }
.kleyman-ab-trust__title { font-size: clamp(20px, 1.8vw, 25px); font-weight: 700; color: var(--kleyman-dark); margin-top: 6px; max-width: 24ch; }
.kleyman-ab-trust__logos { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
/* Oct 2026 QA — uniform item shell for all four marks (2 typographic badges
+ 2 real logos) instead of the old "bare image vs. pill chip" mismatch:
same height, padding, alignment and a single thin border + white
background per item, so the strip reads as one consistent row.
Oct 2026 "boost" pass (same design language, elevated): items sized up
slightly, a very quiet lift+shadow+border micro-hover, and a thin green
accent line that draws in under the top edge on hover — no new visual
language, just a sharper, more premium read of the same strip. */
.kleyman-ab-trust__item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
padding: 0 30px;
background: #fff;
border: 1px solid var(--kleyman-border);
border-radius: 14px;
overflow: hidden;
transition: transform .35s var(--kleyman-ease), box-shadow .35s var(--kleyman-ease), border-color .35s var(--kleyman-ease);
}
.kleyman-ab-trust__item::before {
content: '';
position: absolute;
top: 0;
right: 50%;
left: 50%;
height: 2px;
background: var(--kleyman-green);
transition: right .35s var(--kleyman-ease), left .35s var(--kleyman-ease);
}
.kleyman-ab-trust__item:hover,
.kleyman-ab-trust__item:focus-within {
transform: translateY(-4px);
box-shadow: 0 14px 28px -18px rgba(12,22,58,.22);
border-color: rgba(12,22,58,.26);
}
.kleyman-ab-trust__item:hover::before,
.kleyman-ab-trust__item:focus-within::before { right: 20%; left: 20%; }
.kleyman-ab-trust__item--logo img {
/* Real logo colors kept as-is — no grayscale/desaturation. Authenticity
of a third-party certification mark matters more here than matching
every item to one palette. */
height: 36px;
width: auto;
filter: none;
}
.kleyman-ab-trust__item--text { flex-direction: column; gap: 7px; }
.kleyman-ab-trust__label { font-size: 17px; font-weight: 700; color: var(--kleyman-text); white-space: nowrap; }
/* Static micro-accent (not hover-dependent): a short, quiet underline under
each typographic badge's label, for a touch more precision/refinement. */
.kleyman-ab-trust__accent {
display: block;
width: 26px;
height: 2px;
border-radius: 1px;
background: var(--kleyman-green);
opacity: .5;
}
@media (prefers-reduced-motion: reduce) {
.kleyman-ab-trust__item,
.kleyman-ab-trust__item::before { transition: none; }
}
@media (max-width: 640px) {
/* Mobile QA: even 2×2 grid, logos large enough to actually read. */
.kleyman-ab-trust__logos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.kleyman-ab-trust__item { height: 84px; padding: 0 12px; }
.kleyman-ab-trust__item--logo img { height: 56px; max-width: 100%; object-fit: contain; }
.kleyman-ab-trust__label { font-size: 15px; }
}
@media (max-width: 860px) {
.kleyman-ab-trust__inner { flex-direction: column; align-items: flex-start; }
.kleyman-ab-trust__logos { gap: 14px 18px; }
}
/* ==========================================================================
07 — FEATURED PROJECTS — last content section (44% / 28% / 28%)
========================================================================== */
.kleyman-ab-projects { padding-block: 120px 96px; }
.kleyman-ab-projects__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.kleyman-ab-projects__title { font-size: clamp(28px, 3vw, 42px); font-weight: 700; color: var(--kleyman-dark); }
.kleyman-ab-projects__more-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 700;
color: var(--kleyman-text);
padding-bottom: 4px;
border-bottom: 1.5px solid var(--kleyman-border);
transition: border-color .25s var(--kleyman-ease), color .25s var(--kleyman-ease);
}
.kleyman-ab-projects__more-link:hover { border-color: var(--kleyman-green); color: var(--kleyman-green); }
.kleyman-ab-projects__more-link svg { transform: scaleX(-1); }
.kleyman-ab-projects__grid {
display: grid;
grid-template-columns: 44fr 28fr 28fr;
gap: 28px 20px;
align-items: start;
}
/*
* Project name moved OUT of the photo corner and into a normal-flow block
* below the image (names/titles band, 22-26px) — the image itself is now
* just the visual, the overlay/arrow exist only for the hover affordance.
*/
.kleyman-ab-project { display: flex; flex-direction: column; gap: 16px; transition: opacity .5s var(--kleyman-ease); }
/* Oct 2026 — brief: "selected project expands, others shrink slightly" as
a group interaction. Progressive enhancement via :has() — unsupported
browsers simply keep each project's own existing hover (scale+overlay),
which already satisfies the brief's "no transform-induced layout jump"
requirement on its own. */
@supports selector(:has(a)) {
/* !important needed for the same reason as the leadership gallery
above: .kleyman-ab-project also carries data-animate="fade-up", so
animations.js leaves an inline opacity:1 on it after entrance. */
.kleyman-ab-projects__grid:has(.kleyman-ab-project:hover) .kleyman-ab-project:not(:hover) { opacity: .62 !important; }
}
@media (prefers-reduced-motion: reduce) {
.kleyman-ab-project { transition: none; }
}
.kleyman-ab-project__frame {
position: relative;
display: block;
border-radius: var(--kleyman-radius-lg);
overflow: hidden;
min-height: 440px;
}
.kleyman-ab-project__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--kleyman-ease); }
.kleyman-ab-project:hover .kleyman-ab-project__img { transform: scale(1.04); }
.kleyman-ab-project__overlay {
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(12,22,58,.35) 0%, rgba(12,22,58,0) 45%);
opacity: 0;
transition: opacity .45s var(--kleyman-ease);
}
.kleyman-ab-project:hover .kleyman-ab-project__overlay { opacity: 1; }
.kleyman-ab-project__info { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kleyman-ab-project__name { display: block; font-size: 24px; font-weight: 700; color: var(--kleyman-dark); }
.kleyman-ab-project__city { display: block; font-size: 15px; color: var(--kleyman-text-muted); margin-top: 4px; }
.kleyman-ab-project__arrow {
position: absolute; inset-inline-end: 20px; bottom: 20px;
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
color: #fff;
transform: scale(.85) rotate(135deg);
opacity: 0;
transition: opacity .4s var(--kleyman-ease), transform .4s var(--kleyman-ease), background-color .4s var(--kleyman-ease);
}
.kleyman-ab-project:hover .kleyman-ab-project__arrow { opacity: 1; transform: scale(1) rotate(135deg); background: var(--kleyman-green); }
@media (max-width: 900px) {
.kleyman-ab-projects__grid { grid-template-columns: 1fr; gap: 24px; }
.kleyman-ab-project__frame { min-height: 280px; }
.kleyman-ab-project__arrow { display: none; }
}
/* ==========================================================================
RESPONSIVE — tablet
========================================================================== */
@media (max-width: 1024px) {
/* Tablet: more balanced (not full single-column-with-order-swap) —
content stays first/right-reading, collage keeps its 4-image
composition at a smaller, slightly shorter scale rather than
collapsing into one image, per the brief. */
.kleyman-ab-story { padding-block: 96px; }
.kleyman-ab-story__grid { grid-template-columns: 1fr; gap: 64px; }
.kleyman-ab-story__title { max-width: none; }
.kleyman-ab-story__num-bg { font-size: clamp(160px, 22vw, 220px); }
/* width:100% is required: auto inline margins on a grid item shrink-to-fit it, and with only absolutely-positioned children that collapsed the collage to 0px wide (photos invisible on tablet/mobile). */
.kleyman-ab-story__collage { width: 100%; min-height: 480px; max-width: 560px; margin-inline-start: auto; margin-inline-end: auto; }
.kleyman-ab-people { padding-block: 72px; }
.kleyman-ab-people__grid { grid-template-columns: 1fr; gap: 40px; }
.kleyman-ab-people__gallery { order: 2; }
/* Tablet target: ~72px of clean white space before the footer. */
.kleyman-ab-projects { padding-bottom: 72px; }
}
/* ==========================================================================
RESPONSIVE — mobile
========================================================================== */
@media (max-width: 640px) {
.kleyman-ab-hero { min-height: 86vh; }
.kleyman-ab-hero__crumbs { padding-top: 96px; }
.kleyman-ab-hero__title { max-width: 11ch; }
.kleyman-ab-hero__subtitle { max-width: none; margin-top: 18px; }
.kleyman-ab-hero__cta { margin-top: 26px; }
.kleyman-ab-hero__content { padding-bottom: 48px; }
.kleyman-ab-hero__scroll { bottom: 10px; }
.kleyman-ab-story { padding-block: 64px; }
.kleyman-ab-story__title { font-size: clamp(40px, 10vw, 48px); max-width: none; }
.kleyman-ab-story__num-bg { font-size: 120px; top: -0.3em; }
.kleyman-ab-story__lede, .kleyman-ab-story__sub { max-width: none; }
/* Brief's explicit mobile stats layout: 2×2 grid directly under the
copy, collage below that — never a horizontal scroller. */
.kleyman-ab-story__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 20px;
margin-top: 36px;
}
.kleyman-ab-story__stats-rule { display: none; }
.kleyman-ab-story__collage { min-height: 460px; margin-top: 48px; }
.kleyman-ab-story__collage-item--main { width: 70%; }
.kleyman-ab-story__collage-item--detail { inset-inline-start: 6%; width: 34%; }
.kleyman-ab-people { padding-block: 56px; }
.kleyman-ab-people__statement { font-size: 18px; }
.kleyman-ab-trust { padding-block: 40px; }
.kleyman-ab-projects { padding-block: 64px 48px; }
}
/* ==========================================================================
Reduced motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.kleyman-ab-leader__photo img,
.kleyman-ab-project__img,
.kleyman-ab-project__overlay,
.kleyman-ab-project__arrow,
.kleyman-ab-history__media-img,
.kleyman-ab-history__panel,
.kleyman-ab-history__tab {
transition: none !important;
animation: none !important;
}
}
/* Oct 2026 — breadcrumbs higher: right under the floating header, as on every page. */
.kleyman-ab-hero__crumbs { padding-top: calc(var(--header-height-desktop, 68px) + 18px); }
@media (max-width: 1024px) { .kleyman-ab-hero__crumbs { padding-top: calc(var(--header-height-tablet, 66px) + 14px); } }
@media (max-width: 640px) { .kleyman-ab-hero__crumbs { padding-top: calc(var(--header-height-mobile, 60px) + 12px); } }
/* ==========================================================================
v1.17 — About page restructure: company ID, generations, culture, and a
static (non-pinned) timeline. Section backgrounds alternate white / light.
========================================================================== */
.kleyman-ab-story { padding-block: 120px; }
.kleyman-ab-people { background: #fff; }
/* Company ID */
.kleyman-ab-id { background: var(--kleyman-light); padding-block: 96px; }
.kleyman-ab-id__head { margin-bottom: 44px; }
.kleyman-ab-id__title { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; color: var(--kleyman-dark); margin: 10px 0 0; line-height: 1.15; }
.kleyman-ab-id__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 0;
border-top: 1px solid var(--kleyman-border);
}
.kleyman-ab-id__item {
padding: 26px 0 26px 28px;
border-bottom: 1px solid var(--kleyman-border);
}
.kleyman-ab-id__item:not(:nth-child(3n+1)) { padding-inline-start: 28px; border-inline-start: 1px solid var(--kleyman-border); }
.kleyman-ab-id__item dt { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--kleyman-green); margin-bottom: 8px; }
.kleyman-ab-id__item dd { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--kleyman-dark); }
@media (max-width: 1024px) {
.kleyman-ab-id__grid { grid-template-columns: repeat(2, 1fr); }
.kleyman-ab-id__item:not(:nth-child(3n+1)) { padding-inline-start: 0; border-inline-start: none; }
.kleyman-ab-id__item:nth-child(2n) { padding-inline-start: 24px; border-inline-start: 1px solid var(--kleyman-border); }
}
@media (max-width: 640px) {
.kleyman-ab-id { padding-block: 64px; }
.kleyman-ab-id__grid { grid-template-columns: 1fr; }
.kleyman-ab-id__item, .kleyman-ab-id__item:nth-child(2n) { padding: 18px 0; border-inline-start: none; }
.kleyman-ab-id__item dd { font-size: 16px; }
}
/* Two generations */
.kleyman-ab-gens { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 20px; position: relative; z-index: 1; }
.kleyman-ab-gens__item { padding-inline-start: 23px; }
.kleyman-ab-gens__tag {
display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .05em;
color: var(--kleyman-green); margin-bottom: 6px;
}
.kleyman-ab-gens__item p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--kleyman-text-muted); }
/* Culture */
.kleyman-ab-culture { background: var(--kleyman-light); padding-block: 110px; }
.kleyman-ab-culture__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.kleyman-ab-culture__title { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; color: var(--kleyman-dark); margin: 10px 0 18px; line-height: 1.15; }
.kleyman-ab-culture__lede { font-size: 18px; line-height: 1.75; color: var(--kleyman-text-muted); margin: 0; }
.kleyman-ab-culture__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.kleyman-ab-culture__item { padding: 24px 0; border-top: 1px solid var(--kleyman-border); }
.kleyman-ab-culture__item h3 { font-size: 19px; font-weight: 700; color: var(--kleyman-dark); margin: 0 0 8px; }
.kleyman-ab-culture__item p { font-size: 15.5px; line-height: 1.7; color: var(--kleyman-text-muted); margin: 0; }
@media (max-width: 1024px) {
.kleyman-ab-culture__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
.kleyman-ab-culture { padding-block: 64px; }
.kleyman-ab-culture__list { grid-template-columns: 1fr; }
}
/* Static timeline */
.kleyman-ab-timeline { background: var(--kleyman-dark); color: #fff; padding-block: 100px; }
.kleyman-ab-timeline .kleyman-section__head { margin-bottom: 56px; max-width: none; }
.kleyman-ab-timeline__title { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; color: #fff; margin: 10px 0 0; line-height: 1.15; }
.kleyman-ab-timeline__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px;
position: relative;
}
.kleyman-ab-timeline__list::before {
content: ""; position: absolute; inset-inline: 0; top: 6px; height: 1px;
background: rgba(255,255,255,.22);
}
.kleyman-ab-timeline__item { position: relative; padding-top: 34px; }
.kleyman-ab-timeline__dot {
position: absolute; top: 0; inset-inline-start: 0; width: 13px; height: 13px; border-radius: 50%;
background: var(--kleyman-dark); border: 2px solid #4FBF7A;
}
.kleyman-ab-timeline__year { display: block; font-size: 40px; font-weight: 800; line-height: 1; color: #fff; margin-bottom: 14px; }
.kleyman-ab-timeline__year--text { font-size: 24px; line-height: 1.25; padding-top: 8px; }
.kleyman-ab-timeline__item-title { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.kleyman-ab-timeline__item p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.75); margin: 0; }
@media (max-width: 1024px) {
.kleyman-ab-timeline__list { grid-template-columns: 1fr; gap: 0; padding-inline-start: 28px; }
.kleyman-ab-timeline__list::before { top: 0; bottom: 0; inset-inline: 6px auto; width: 1px; height: auto; }
.kleyman-ab-timeline__item { padding: 0 0 36px; }
.kleyman-ab-timeline__item:last-child { padding-bottom: 0; }
.kleyman-ab-timeline__dot { inset-inline-start: -28px; top: 10px; }
.kleyman-ab-timeline__year { font-size: 32px; }
.kleyman-ab-timeline__year--text { font-size: 22px; padding-top: 4px; }
}
@media (max-width: 640px) {
.kleyman-ab-timeline { padding-block: 64px; }
}
/* ==========================================================================
v1.18 — company ID: premium chips / rows / partnership cards; trust strip
========================================================================== */
.kleyman-ab-id__item--wide { grid-column: 1 / -1; padding-inline-start: 0 !important; border-inline-start: none !important; }
.kleyman-ab-id__chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kleyman-ab-id__chips li {
display: inline-flex; align-items: center; gap: 9px;
padding: 9px 18px;
border: 1px solid rgba(12, 22, 58, .14);
border-radius: 999px;
background: #fff;
font-size: 15px; font-weight: 600; letter-spacing: .01em;
color: var(--kleyman-dark);
box-shadow: 0 1px 0 rgba(12, 22, 58, .04), 0 6px 16px -10px rgba(12, 22, 58, .25);
transition: border-color .3s var(--kleyman-ease), transform .3s var(--kleyman-ease);
}
.kleyman-ab-id__chips li::before {
content: ""; flex: none;
width: 6px; height: 6px; border-radius: 50%;
background: var(--kleyman-green);
}
.kleyman-ab-id__chips li:hover { border-color: rgba(17, 121, 58, .45); transform: translateY(-1px); }
.kleyman-ab-id__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kleyman-ab-id__rows li { display: flex; flex-direction: column; gap: 2px; }
.kleyman-ab-id__rows strong { font-size: 18px; font-weight: 700; color: var(--kleyman-dark); }
.kleyman-ab-id__rows span { font-size: 14px; color: var(--kleyman-text-muted); }
.kleyman-ab-id__cards { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kleyman-ab-id__cards li {
display: flex; flex-direction: column; gap: 6px;
padding: 22px 24px;
background: var(--kleyman-dark); color: #fff;
border-radius: var(--kleyman-radius-md);
border-top: 3px solid var(--kleyman-green);
}
.kleyman-ab-id__cards strong { font-size: 19px; font-weight: 800; color: #fff; }
.kleyman-ab-id__card-with { font-size: 14px; color: rgba(255, 255, 255, .78); }
.kleyman-ab-id__card-what { font-size: 14px; color: #8FD3A8; }
@media (max-width: 1024px) {
.kleyman-ab-id__cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.kleyman-ab-id__chips { gap: 8px; }
.kleyman-ab-id__chips li { font-size: 14px; padding-block: 8px; }
}
.kleyman-ab-trust__sub { font-size: 12.5px; color: var(--kleyman-text-muted); line-height: 1.35; text-align: center; }
.kleyman-ab-trust__item--text { gap: 4px; }
@media (max-width: 1180px) {
.kleyman-ab-trust__item--text { height: auto !important; min-height: 84px; padding-block: 12px !important; }
}