/* ============================================================
FEC About Us — Targeted Modernization (2026-05-12)
Scope: body.fec-about .news-page (page 3589, password david-2026)
David explicit feedback rounds:
✓ H4 Mission short-form heading — NO design (theme default gray, none).
✓ Person cards — keep ONLY the "+" affordance (no underline tick,
no gray square image bg, no top/bottom hairlines, no bio-panel
padding changes — everything else removed).
✓ Testimonial — completely redesigned: simple Navy/Cyan editorial
card, white bg, cyan left rule, Fraunces italic quote. NO paper
parchment, NO datum marks, NO filigree arc, NO Fraunces ornament
overhang. Match the rest of the page.
✓ Footer / contact form / Hero — untouched (theme default).
============================================================ */
/* ---------- LAYOUT FIX — Divi default right-sidebar collapse ---------- */
body.fec-about #left-area {
width: 100% !important;
padding-right: 0 !important;
float: none !important;
}
body.fec-about #sidebar {
display: none !important;
}
body.fec-about #content-area.clearfix {
display: block !important;
}
/* Hide the page-template fallback H1 ("Protected: ..." prefix). */
body.fec-about h1.main_title {
display: none !important;
}
/* ---------- TOKENS ---------- */
body.fec-about {
--fec-navy: #283582;
--fec-navy-ink: #13182e;
--fec-cyan: #3ca3dd;
--fec-cyan-light: #5fb8e8;
--fec-cool-white: #ecf0f7;
--fec-radius-sm: 6px;
--fec-radius-md: 16px;
}
/* ---------- H2 (Avenir-Black Navy uppercase) ---------- */
body.fec-about .news-page h2 {
font-family: 'Avenir-Black', 'Helvetica Neue', sans-serif;
font-weight: 900;
color: var(--fec-navy);
letter-spacing: -0.01em;
line-height: 1.1;
text-transform: uppercase;
font-size: clamp(28px, 3.4vw, 42px);
margin-bottom: 0.6em;
}
/* ---------- H4 Mission short-form heading — no override; theme default gray ----------
(No rule here. Falls back to aweos h4 default styling.) */
/* ---------- "FEC's major fields of work" — remove disc bullet ---------- */
body.fec-about .news-page .our-team ul {
list-style: none;
list-style-type: none;
padding-left: 0;
}
body.fec-about .news-page .our-team ul li {
list-style: none;
list-style-type: none;
}
/* ---------- MISSION STATEMENT IMAGES — softer corners + shadow ---------- */
body.fec-about .news-page .img-radius .et_pb_image_wrap {
overflow: hidden;
border-radius: var(--fec-radius-md);
box-shadow: 0 8px 32px -16px rgba(40, 53, 130, 0.22);
}
body.fec-about .news-page .img-radius img {
border-radius: var(--fec-radius-md);
transition: transform 0.6s ease;
}
body.fec-about .news-page .img-radius .et_pb_image:hover img {
transform: scale(1.02);
}
/* ============================================================
PERSON CARDS — name color only (David explicit 2026-05-12)
============================================================ */
/* Anchor for the absolute bio overlay — DO NOT REMOVE */
body.fec-about .news-page .team-mitglieder .et_pb_team_member {
position: relative;
transition: none;
}
/* Member names = Navy blue */
body.fec-about .news-page .et_pb_team_member h4,
body.fec-about .news-page .et_pb_team_member .et_pb_module_header {
color: var(--fec-navy);
}
/* ============================================================
BIO OVERLAY — CSS-only fade (replaces jQuery slideDown)
DO NOT MODIFY — anchors the click-flip behavior.
============================================================ */
body.fec-about .news-page .et_pb_team_member_description div {
display: block !important;
position: absolute;
top: 110%;
left: 0;
right: 0;
background: #ffffff;
border-radius: var(--fec-radius-md);
box-shadow: 0 24px 64px -24px rgba(40, 53, 130, 0.35),
0 2px 6px rgba(40, 53, 130, 0.08);
padding: 24px 26px;
border: 1px solid rgba(60, 163, 221, 0.15);
z-index: 9;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
visibility: hidden;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
body.fec-about .news-page .et_pb_team_member_description div.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
visibility: visible;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}
body.fec-about .news-page .et_pb_team_member_description div:not(.open):before {
display: none;
}
body.fec-about .news-page .et_pb_team_member_description div.open:before {
background: var(--fec-cyan);
box-shadow: 0 4px 10px -2px rgba(60, 163, 221, 0.5);
transition: background 0.2s ease, transform 0.2s ease;
}
body.fec-about .news-page .et_pb_team_member_description div.open:hover:before {
background: var(--fec-navy);
transform: scale(1.08);
}
/* ---------- SYNETAM link ---------- */
body.fec-about .news-page .team-mitglieder-ueberschrift a {
color: var(--fec-cyan) !important;
text-decoration: none;
border-bottom: 1px solid rgba(60, 163, 221, 0.35);
transition: border-color 0.2s ease, color 0.2s ease;
}
body.fec-about .news-page .team-mitglieder-ueberschrift a:hover {
color: var(--fec-navy) !important;
border-bottom-color: var(--fec-navy);
}
body.fec-about .news-page .team-mitglieder-ueberschrift a span {
color: inherit !important;
}
/* ============================================================
TESTIMONIAL — Navy gradient panel with 3D EU stars (2026-05-12 v4)
Matches the home CTA-Apply panel aesthetic (.fec-cta-panel).
Navy gradient bg + box-shadow depth + cyan stars at edges +
white Fraunces italic quote + white Avenir-Black author.
No cyan rule, no left-border, no AI-fingerprint flourish.
============================================================ */
body.fec-about .news-page .testi {
position: relative;
background-color: var(--fec-navy);
background-image: linear-gradient(135deg,
rgb(58, 72, 163) 0%,
rgb(40, 53, 130) 38%,
rgb(29, 38, 96) 78%,
rgb(22, 27, 74) 100%);
border-radius: 36px;
padding: clamp(56px, 7vw, 88px) clamp(28px, 5vw, 72px);
margin-top: 40px;
text-align: center;
overflow: hidden;
isolation: isolate;
box-shadow:
rgba(255, 255, 255, 0.12) 0 1px 0 inset,
rgba(255, 255, 255, 0.06) 0 0 0 1px,
rgba(0, 0, 0, 0.30) 0 18px 36px -16px,
rgba(0, 0, 0, 0.45) 0 32px 64px -24px;
}
/* Suppress theme's top/bottom hairline borders on .testi.text-image */
body.fec-about .news-page .testi.text-image {
border-top: none !important;
border-bottom: none !important;
}
/* 3D EU stars decorative layer — mirrors the home CTA-Apply pattern */
body.fec-about .news-page .testi::after {
content: '' !important;
visibility: visible !important;
clear: none !important;
line-height: normal !important;
position: absolute !important;
inset: 0 !important;
width: auto !important;
height: auto !important;
z-index: 0 !important;
pointer-events: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
}
/* Content must sit above stars */
body.fec-about .news-page .testi > .et_pb_column,
body.fec-about .news-page .testi .et_pb_column_inner,
body.fec-about .news-page .testi .et_pb_module,
body.fec-about .news-page .testi .et_pb_text_inner {
position: relative;
z-index: 2;
}
/* Fraunces quote ornament centered at top */
body.fec-about .news-page .testi .et_pb_text_inner {
position: relative;
padding-top: 36px;
}
body.fec-about .news-page .testi .et_pb_text_inner::before {
content: "\201C";
position: absolute;
top: -32px;
left: 50%;
transform: translateX(-50%);
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: 110px;
line-height: 1;
color: var(--fec-cyan-light);
opacity: 0.75;
pointer-events: none;
}
/* TESTIMONIALS eyebrow — cyan-light, uppercase, tracked */
body.fec-about .news-page .testi h2 {
font-family: 'Rubik', sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--fec-cyan-light);
margin-bottom: 28px;
line-height: 1;
text-align: center;
}
/* Quote — WHITE Fraunces italic */
body.fec-about .news-page .testi p:first-of-type {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.55;
color: rgba(255, 255, 255, 0.94);
font-weight: 400;
margin: 0 auto 36px;
max-width: 60ch;
text-align: center;
}
body.fec-about .news-page .testi p:has(strong) {
margin: 0;
text-align: center;
}
/* Author — WHITE Avenir-Black, uppercase signature */
body.fec-about .news-page .testi p strong {
font-family: 'Avenir-Black', 'Helvetica Neue', sans-serif;
font-weight: 900;
color: #ffffff;
font-size: 15px;
display: block;
font-style: normal;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Role — semi-transparent white Rubik (with theme border-left override) */
body.fec-about .news-page .testi h3 {
font-family: 'Rubik', sans-serif;
font-weight: 400;
color: rgba(255, 255, 255, 0.62);
font-size: 14px;
letter-spacing: 0;
line-height: 1.4;
margin-top: 6px;
text-transform: none;
font-style: normal;
text-align: center;
border-left: none !important;
padding-left: 0 !important;
}
/* ---------- IN-PAGE SIDEBAR (specialty sidebar inside .news-page) ---------- */
body.fec-about .news-page .sidebar .widget {
background: var(--fec-cool-white);
padding: 28px 24px;
border-radius: var(--fec-radius-sm);
margin-bottom: 24px;
border-top: 3px solid var(--fec-cyan);
}
body.fec-about .news-page .sidebar .widget-title {
font-family: 'Avenir-Black', 'Helvetica Neue', sans-serif;
font-weight: 900;
color: var(--fec-navy);
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0;
margin-bottom: 16px;
}
body.fec-about .news-page .sidebar .widget a {
color: var(--fec-navy);
transition: color 0.2s ease;
}
body.fec-about .news-page .sidebar .widget a:hover {
color: var(--fec-cyan);
}
/* ============================================================
BODY PARAGRAPH UNIFICATION (David 2026-05-12)
------------------------------------------------------------
Aligned to the live reference (and the FEC home unification):
every body paragraph is #6a6a6a at 16px / 26px line-height.
Role/position lines (.et_pb_member_position) use the small
tier 14px / 22px. The testimonial design (Navy gradient panel
with Fraunces italic quote) is preserved by the override block
that follows.
============================================================ */
body.fec-about .news-page p,
body.fec-about .news-page li {
color: #6a6a6a !important;
font-size: 16px !important;
line-height: 26px !important;
}
/* Role / member position lines — small tier */
body.fec-about .news-page .et_pb_member_position {
color: #6a6a6a !important;
font-size: 14px !important;
line-height: 22px !important;
}
/* Testimonial — preserve original design (override unification above) */
body.fec-about .news-page .testi p:first-of-type {
color: rgba(255, 255, 255, 0.94) !important;
font-size: clamp(20px, 2.2vw, 26px) !important;
line-height: 1.55 !important;
}
body.fec-about .news-page .testi p,
body.fec-about .news-page .testi p:has(strong) {
color: rgba(255, 255, 255, 0.94) !important;
}
body.fec-about .news-page .testi p strong {
color: #ffffff !important;
font-size: 15px !important;
line-height: normal !important;
}
/* ---------- MEMBER CARDS — match the Team page (David 2026-07-01) ----------
Put each person in a white card frame like the Team page (before: bare).
NO transform on hover here — this page has the click-to-open bio overlay
(absolute-positioned), so keep the card's box stable; just a soft shadow lift.
The existing "position: relative" (bio anchor) is preserved. --- */
body.fec-about .news-page .team-mitglieder .et_pb_team_member {
background: #ffffff;
border: 1px solid #e3e6ec;
border-radius: 14px;
padding: 22px 24px !important;
box-shadow: 0 6px 20px rgba(40, 53, 130, 0.06);
transition: box-shadow 0.2s cubic-bezier(.4,0,.2,1),
border-color 0.2s cubic-bezier(.4,0,.2,1);
}
body.fec-about .news-page .team-mitglieder .et_pb_team_member:hover {
box-shadow: 0 14px 30px rgba(40, 53, 130, 0.12);
border-color: #cfd6e6;
}
/* Portrait: soft placeholder disc + clean white ring (matches Team) */
body.fec-about .news-page .team-mitglieder .et_pb_team_member_image {
background: #eef1f6;
border-radius: 50%;
}
body.fec-about .news-page .team-mitglieder .et_pb_team_member_image img {
border-radius: 50% !important;
border: 3px solid #ffffff;
box-shadow: 0 2px 10px rgba(40, 53, 130, 0.14);
}
/* ------------------------------------------------------------------
BOTTOM white->navy transition — copied 1:1 from the homepage.
The homepage rounds its content sections (radius 50px) and pulls the
navy footer up behind them, so the white curves down into the navy.
Here the white content already carries the theme's rounded
shape; we give it a clean 50px rounded BOTTOM and pull the navy
#main-footer up behind it so the navy fills the curve. The hero (top
transition) and the footer's own content stay ORIGINAL / untouched.
Everything else in this file styles only the INSIDE of the sections. */
/* NOTE — About Us uses the SIDEBAR content layout (#content-area > #left-area >
article), so the white is only 1200px wide (not full-width like the
Team/Archive article). Rounding the article would put the curve at 1200px, not
at the screen edge. So here we round the FULL-WIDTH #main-content itself
(white bg + rounded bottom + its own stacking context via z-index) and let the
navy footer sit behind it. #main-footer stays STATIC (no z-index) so the
floating .formular (z-index 999) is NOT trapped and its "GET IN TOUCH" header
stays visible above the curve. */
body.fec-about #main-content {
background: #fff !important;
border-bottom-left-radius: 50px !important;
border-bottom-right-radius: 50px !important;
position: relative;
z-index: 1;
}
body.fec-about #main-footer {
margin-top: -50px !important;
}
@media (max-width: 980px) {
body.fec-about #main-content {
border-bottom-left-radius: 36px !important;
border-bottom-right-radius: 36px !important;
}
body.fec-about #main-footer { margin-top: -36px !important; }
}
/* ===== 2026-08-11 (Jonas): offene CV-Overlays legen sich unter die nachfolgenden Karten (Stefanie 21.07.).
Karte mit geoeffnetem Bio-Overlay ueber die Geschwister-Karten heben. ===== */
body.fec-about .news-page .team-mitglieder .et_pb_team_member:has(.et_pb_team_member_description div.open) {
z-index: 30;
}
/* ===== 2026-08-14 (Kundenfeedback 13.08., Block 3): Personenprofile größer
und übersichtlicher — v3, gestapeltes Kartenlayout. Die About-Hauptspalte ist
zu schmal für Zeilen-Layout mit großem Porträt (Text bekam nur ~106px und
brach hässlich um). Jetzt: Porträt zentriert oben (150px), Name + Position
in voller Kartenbreite darunter. Bio-Klick-Overlay (div.open) bleibt intakt,
Overlay-Text linksbündig. ===== */
body.fec-about .news-page .team-mitglieder .et_pb_team_member {
width: 100%;
padding: 30px 26px 26px !important;
flex-direction: column;
align-items: center;
text-align: center;
}
body.fec-about .news-page .team-mitglieder .et_pb_team_member_image {
width: 150px !important;
min-width: 150px;
height: 150px;
margin: 0 0 18px 0 !important;
}
body.fec-about .news-page .team-mitglieder .et_pb_team_member_image img {
width: 150px;
height: 150px;
}
body.fec-about .news-page .team-mitglieder .et_pb_team_member_description {
width: 100%;
min-width: 0;
padding-left: 0;
}
body.fec-about .news-page .team-mitglieder h4 {
font-size: 21px !important;
line-height: 1.25 !important;
}
body.fec-about .news-page .team-mitglieder .et_pb_member_position {
font-size: 16px !important;
line-height: 1.5 !important;
padding-top: 6px;
}
body.fec-about .news-page .et_pb_team_member_description div.open {
font-size: 15.5px;
line-height: 1.65;
text-align: left;
}
@media (max-width: 980px) {
body.fec-about .news-page .team-mitglieder .et_pb_team_member {
padding: 24px 20px 20px !important;
}
body.fec-about .news-page .team-mitglieder .et_pb_team_member_image,
body.fec-about .news-page .team-mitglieder .et_pb_team_member_image img {
width: 124px !important;
min-width: 124px;
height: 124px;
}
body.fec-about .news-page .team-mitglieder h4 {
font-size: 19px !important;
}
}