elements carrying this class instead; the rule below preserves the
original look. */
.kicker-label {
color: var(--wp--preset--color--amber);
}
/* ==========================================================================
Link treatments
========================================================================== */
/* Body links — amber with smooth transitions */
a {
transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
/* Underline offset for better readability on hover */
a:hover {
text-underline-offset: 0.2em;
}
/* ==========================================================================
Button variants & refinements
========================================================================== */
/* Core button transitions */
.wp-block-button__link {
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}
@media (prefers-reduced-motion: no-preference) {
.wp-block-button__link:hover {
transform: translateY(-1px);
box-shadow:
0 4px 16px -4px rgba(176, 141, 87, 0.3),
0 1px 3px rgba(0, 0, 0, 0.2);
}
.wp-block-button__link:active {
transform: translateY(0);
}
}
/* Outline button style */
.wp-block-button.is-style-outline .wp-block-button__link {
background: transparent;
border: 1px solid var(--wp--preset--color--amber);
color: var(--wp--preset--color--amber);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: var(--wp--preset--color--amber);
color: var(--wp--preset--color--abyss);
border-color: var(--wp--preset--color--amber);
}
/* Glass pill button variant (CTA style from hero) */
.is-style-glass-pill .wp-block-button__link {
background: linear-gradient(135deg, rgba(200, 202, 205, 0.12) 0%, rgba(184, 187, 190, 0.07) 100%);
border: 1px solid var(--wp--preset--color--glass-border-accent);
color: var(--wp--preset--color--pearl);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
box-shadow:
inset 0 1px 0 0 rgba(213, 215, 218, 0.08),
inset 0 -1px 0 0 rgba(6, 9, 18, 0.06),
0 8px 32px -8px rgba(0, 0, 0, 0.25);
}
.is-style-glass-pill .wp-block-button__link:hover {
background: linear-gradient(135deg, rgba(200, 202, 205, 0.18) 0%, rgba(184, 187, 190, 0.12) 100%);
border-color: var(--wp--preset--color--amber);
box-shadow:
inset 0 1px 0 0 rgba(213, 215, 218, 0.12),
0 8px 40px -8px rgba(176, 141, 87, 0.15);
}
/* ==========================================================================
Glassmorphism card surface
========================================================================== */
.is-style-glass-card {
background: linear-gradient(135deg, rgba(200, 202, 205, 0.10) 0%, rgba(184, 187, 190, 0.05) 50%, rgba(10, 42, 58, 0.09) 100%);
border: 1px solid rgba(200, 202, 205, 0.14);
border-radius: 16px;
backdrop-filter: blur(28px) saturate(1.15);
-webkit-backdrop-filter: blur(28px) saturate(1.15);
box-shadow:
inset 0 1px 0 0 rgba(213, 215, 218, 0.10),
inset 0 -1px 0 0 rgba(0, 0, 0, 0.10),
0 10px 36px -10px rgba(0, 0, 0, 0.35);
transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
/* Applied by blog-card-links.js / service-card-links.js once a card's click
target has been resolved — signals the whole card is clickable. */
.klar24-has-card-link {
cursor: pointer;
}
.is-style-glass-card:hover {
border-color: rgba(176, 141, 87, 0.22);
box-shadow:
inset 0 1px 0 0 rgba(213, 215, 218, 0.14),
inset 0 -1px 0 0 rgba(0, 0, 0, 0.08),
0 18px 48px -12px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(176, 141, 87, 0.12);
}
/* ==========================================================================
Image treatments
========================================================================== */
.wp-block-image img {
transition: filter 0.5s ease, transform 0.5s ease;
}
@media (prefers-reduced-motion: no-preference) {
.wp-block-image:hover img {
transform: scale(1.02);
}
}
/* Moody desaturated image style */
.is-style-moody img {
filter: saturate(0.5) brightness(0.75);
mix-blend-mode: luminosity;
}
.is-style-moody:hover img {
filter: saturate(0.7) brightness(0.85);
}
/* Cover block image treatment — bright, crisp, true-to-color photography.
Reads from the Hero System variables (defined in the "Hero System" block
further down, on .wp-block-cover.alignfull:first-of-type) so hero covers
get the current, per-page-tunable values. Non-hero cover blocks elsewhere
on a page don't have those variables in scope, so they fall back to the
same conservative defaults used before this system existed — zero change
for decorative/non-hero covers. */
.wp-block-cover .wp-block-cover__image-background {
filter:
saturate(var(--hero-image-saturation, 1.02))
brightness(var(--hero-image-brightness, 1.03))
contrast(var(--hero-image-contrast, 1.03));
transition: filter 0.6s ease;
}
/* ==========================================================================
Separator refinements
========================================================================== */
.wp-block-separator {
opacity: 1;
border: none;
}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
background: linear-gradient(
90deg,
transparent 0%,
var(--wp--preset--color--glass-border) 15%,
rgba(200, 202, 205, 0.10) 50%,
var(--wp--preset--color--glass-border) 85%,
transparent 100%
);
height: 1px;
max-width: 100%;
}
.wp-block-separator.is-style-wide {
background: linear-gradient(
90deg,
transparent 0%,
var(--wp--preset--color--glass-border) 10%,
rgba(200, 202, 205, 0.10) 50%,
var(--wp--preset--color--glass-border) 90%,
transparent 100%
);
height: 1px;
}
/* Amber waterline separator */
.is-style-amber-line {
background: linear-gradient(
90deg,
transparent 0%,
rgba(176, 141, 87, 0.19) 20%,
rgba(176, 141, 87, 0.25) 50%,
rgba(176, 141, 87, 0.19) 80%,
transparent 100%
) !important;
height: 1px !important;
}
/* ==========================================================================
Quote refinements
========================================================================== */
.wp-block-quote {
padding-inline-start: var(--wp--preset--spacing--40);
position: relative;
}
.wp-block-quote cite {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small);
font-style: normal;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wp--preset--color--pearl-ghost);
display: block;
margin-top: var(--wp--preset--spacing--20);
}
/* ==========================================================================
Navigation refinements — Premium 2026
========================================================================== */
/* Desktop nav link hover — subtle glow effect */
.wp-block-navigation-item__content {
position: relative;
transition: color 0.3s ease;
}
.wp-block-navigation-item__content::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
width: 0;
height: 1px;
background: var(--wp--preset--color--amber);
opacity: 0;
transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
}
@media (prefers-reduced-motion: no-preference) {
.wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--pearl);
}
.wp-block-navigation-item__content:hover::after {
width: 100%;
left: 0;
opacity: 0.6;
}
}
/* Current page indicator — amber dot */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
color: var(--wp--preset--color--pearl);
}
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
width: 4px;
height: 4px;
left: 50%;
transform: translateX(-50%);
bottom: -10px;
border-radius: 50%;
background: var(--wp--preset--color--amber);
opacity: 1;
box-shadow: 0 0 8px rgba(176, 141, 87, 0.3);
}
/* Submenu styling */
.wp-block-navigation__submenu-container {
background: var(--wp--preset--color--surface);
border: 1px solid var(--wp--preset--color--glass-border);
border-radius: 8px;
padding: var(--wp--preset--spacing--20) 0;
box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
font-size: 0.78rem;
}
/* ==========================================================================
Mobile hamburger overlay — Premium slide panel
========================================================================== */
.wp-block-navigation__responsive-container.is-menu-open {
padding: clamp(4rem, 10vh, 6rem) clamp(2.5rem, 8vw, 5rem);
background: linear-gradient(175deg, var(--wp--preset--color--dark-sage) 0%, #302E2C 40%, var(--wp--preset--color--deep-teal) 70%, var(--wp--preset--color--dark-sage) 100%);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
gap: clamp(2rem, 5vh, 3rem);
align-items: flex-start;
padding-top: 2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--display);
font-size: clamp(1.6rem, 5vw, 2.4rem);
font-weight: 300;
letter-spacing: 0;
text-transform: none;
color: var(--wp--preset--color--pearl-dim);
transition: color 0.3s ease, padding-left 0.3s ease;
padding: 0.4rem 0;
border-bottom: 1px solid rgba(238, 242, 247, 0.04);
width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--pearl);
padding-left: 0.5rem;
}
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
color: var(--wp--preset--color--amber);
border-bottom-color: rgba(176, 141, 87, 0.12);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
color: var(--wp--preset--color--pearl-dim);
top: clamp(1.5rem, 4vh, 2.5rem);
right: clamp(1.5rem, 4vw, 3rem);
transition: color 0.25s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
color: var(--wp--preset--color--pearl);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
width: 32px;
height: 32px;
}
.wp-block-navigation__responsive-container-open {
color: var(--wp--preset--color--pearl);
}
.wp-block-navigation__responsive-container-open svg {
width: 26px;
height: 26px;
}
/* ==========================================================================
Mobile Navigation — Full-Screen Overlay Hardening (v2.4.0)
==========================================================================
Root cause of the reported bugs (menu too short / clipped items / hero
visible behind the menu): the "hide header on scroll down" feature
(scrollytelling.css) applies `transform: translateY(-100%)` to the header
template-part whenever `body.header-hidden` is set. A CSS `transform` on
an ancestor creates a new containing block for `position: fixed`
descendants (spec behaviour, not a bug in the nav block itself) — so the
menu's fixed full-screen panel was being sized/positioned relative to the
(possibly translated, possibly shorter-than-viewport) header box instead
of the real viewport. The first rule below neutralises that transform
for as long as the menu is open, which alone fixes most of the reported
symptoms; the rules that follow then make the panel an explicit,
guaranteed-full-viewport, scrollable overlay with larger, breathing-room
typography, per spec. Desktop (>781px) is completely untouched.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
/* Neutralise the hide-on-scroll transform on the header while the
mobile menu is open, so the overlay's fixed positioning resolves
against the real viewport rather than a translated ancestor. */
body:has(.wp-block-navigation__responsive-container.is-menu-open)
.wp-site-blocks > header.wp-block-template-part {
transform: none !important;
}
}
@media (max-width: 781px) {
/* Guaranteed full-viewport overlay. Sits above everything (hero
included), scrolls internally if the nav list is taller than the
screen, and never lets page content show through. 100dvh (with a
100vh fallback for older engines) keeps the last item clear of
iOS Safari's dynamic toolbar. */
.wp-block-navigation__responsive-container.is-menu-open {
position: fixed !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100vh !important;
max-height: 100dvh !important;
margin: 0 !important;
z-index: 999999 !important;
display: flex !important;
flex-direction: column !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
box-sizing: border-box !important;
/* Generous top/bottom padding so the first and last items are
never flush against the edge or the close button. */
padding: clamp(5.5rem, 14vh, 8rem) clamp(1.75rem, 8vw, 3rem) clamp(3.5rem, 10vh, 5rem) !important;
}
/* The link list becomes the vertically centred, scrollable column.
flex: 1 0 auto (not 1 1 auto) so it never gets squeezed shorter
than its own content — that squeeze was the other half of the
"clipped items" bug. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
flex: 1 0 auto !important;
width: 100%;
gap: clamp(1.1rem, 3.6vh, 1.75rem) !important;
align-items: center !important;
justify-content: center !important;
padding-top: 0 !important;
text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
width: 100%;
}
/* Larger, more comfortable touch-target typography per spec:
22–26px, ~1.5 line-height, clear vertical rhythm between items. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-size: clamp(22px, 5.6vw, 26px) !important;
line-height: 1.5 !important;
padding: 0.6rem 0 !important;
width: auto;
text-align: center;
}
/* Language switcher: still hidden in the collapsed mobile header bar
(unchanged from before, keeps the bar uncluttered), but reintroduced
— visible, centred, and properly aligned — inside the open overlay
as a small pill above the safe-area bottom edge. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .header-lang-pill {
display: flex !important;
position: fixed !important;
left: 50% !important;
bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem)) !important;
transform: translateX(-50%) !important;
z-index: 1000000 !important;
gap: 0.75rem;
background: rgba(18, 18, 20, 0.55);
border: 1px solid var(--wp--preset--color--glass-border);
border-radius: 100px;
padding: 0.5rem 1.15rem;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
/* Lock body scroll while the overlay is open — CSS-only via :has(),
no additional JS needed. The hero (and everything else) can no
longer scroll or peek through behind the menu. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
overflow: hidden !important;
height: 100vh;
height: 100dvh;
}
}
/* Short-viewport / landscape phones (e.g. iPhone SE, or any phone rotated
to landscape): reduce the vertical padding so more items fit before
scrolling kicks in, while keeping everything else identical. */
@media (max-width: 900px) and (max-height: 500px) {
.wp-block-navigation__responsive-container.is-menu-open {
padding: clamp(3.5rem, 16vh, 4.5rem) clamp(1.75rem, 6vw, 3rem) clamp(2rem, 10vh, 3rem) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
gap: clamp(0.6rem, 3vh, 1.1rem) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-size: clamp(20px, 5vw, 24px) !important;
padding: 0.4rem 0 !important;
}
}
/* ==========================================================================
Header — Premium Dynamic System
========================================================================== */
/* Sticky positioning on the template-part wrapper — sits ON TOP of page content */
.wp-site-blocks > header.wp-block-template-part {
position: sticky;
top: 0;
z-index: 999;
}
/* Inner header group — premium glass as DEFAULT state (not just on scroll).
A soft top-to-bottom scrim plus real backdrop blur guarantees nav
contrast against any hero photo — bright sky, glass windows, whatever
sits behind it — without ever reading as a hard, opaque bar. Scroll
state (further below) still deepens this further. */
.wp-site-blocks > header.wp-block-template-part > .wp-block-group {
background: linear-gradient(
180deg,
rgba(18, 18, 20, 0.32) 0%,
rgba(18, 18, 20, 0.16) 70%,
rgba(18, 18, 20, 0) 100%
) !important;
backdrop-filter: blur(10px) saturate(1.08);
-webkit-backdrop-filter: blur(10px) saturate(1.08);
color: var(--wp--preset--color--pearl);
}
/* Pull the first full-width cover block (Hero) up behind the sticky header
so the Hero image extends to the very top of the viewport. The header
floats transparently over it with no visible gap or grey bar.
The negative margin equals the header's rendered height (~70px). The
cover's top padding already accounts for the header via clamp(10rem...)
so text content stays clear of the navigation. */
.wp-site-blocks > main > .wp-block-post-content > .wp-block-cover:first-child {
margin-top: -70px !important;
}
/* Subtle bottom border — invisible at top, visible on scroll */
.site-header::after {
content: '';
display: block;
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(200, 202, 205, 0.00) 20%,
rgba(213, 215, 218, 0.00) 50%,
rgba(200, 202, 205, 0.00) 80%,
transparent 100%
);
transition: opacity 0.4s ease, background 0.4s ease;
}
/* Header brand area — premium breathing room */
.header-brand {
flex-shrink: 0;
}
/* ==========================================================================
Header stabilization — prevent nav wrapping, balance spacing
========================================================================== */
/* Force single-row navigation on desktop — prevent wrapping at all widths */
.site-header .wp-block-navigation__container {
flex-wrap: nowrap !important;
white-space: nowrap;
}
/* Ensure the nav items don't shrink below readable width
Slightly larger nav text for better visual presence */
.site-header .wp-block-navigation-item__content {
white-space: nowrap;
flex-shrink: 0;
font-size: 0.82rem !important;
color: rgba(246, 241, 232, 0.88) !important;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
transition: color 0.25s ease, text-shadow 0.25s ease;
}
.site-header .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--pearl) !important;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
/* More horizontal breathing room between nav items */
.site-header .wp-block-navigation {
gap: clamp(1.2rem, 2.4vw, 2.2rem) !important;
}
/* At narrower desktop widths (1280–1440), reduce nav gap slightly to prevent overflow */
@media (max-width: 1440px) and (min-width: 782px) {
.site-header .wp-block-navigation {
gap: clamp(0.7rem, 1.5vw, 1.4rem) !important;
}
.site-header .wp-block-navigation-item__content {
font-size: 0.74rem !important;
}
}
/* At 1280px and below, compress further */
@media (max-width: 1280px) and (min-width: 782px) {
.site-header .wp-block-navigation {
gap: clamp(0.5rem, 1.2vw, 1rem) !important;
}
.site-header .wp-block-navigation-item__content {
font-size: 0.7rem !important;
letter-spacing: 0.06em !important;
}
.header-lang-pill .lang-seg a {
padding: 0.25rem 0.5rem;
}
}
/* Logo brand area — slightly more breathing room from nav */
.site-header .header-brand {
margin-right: clamp(0.5rem, 1.5vw, 1.5rem);
flex-shrink: 0;
}
/* RTL: mirror the logo margin */
.is-rtl-page .site-header .header-brand,
html[dir="rtl"] .site-header .header-brand {
margin-right: 0;
margin-left: clamp(0.5rem, 1.5vw, 1.5rem);
}
/* CTA button — push further right with auto margin */
.site-header .wp-block-buttons {
flex-shrink: 0;
margin-left: auto;
}
/* RTL CTA alignment */
.is-rtl-page .site-header .wp-block-buttons,
html[dir="rtl"] .site-header .wp-block-buttons {
margin-left: 0;
margin-right: auto;
}
/* ---- Scroll state transition (glass default → solid on scroll) ---- */
@media (prefers-reduced-motion: no-preference) {
.wp-site-blocks > header.wp-block-template-part > .wp-block-group {
transition: background-color 0.5s ease, backdrop-filter 0.5s ease, box-shadow 0.5s ease, padding 0.4s ease;
will-change: background-color, backdrop-filter, box-shadow;
}
body.is-scrolled .wp-site-blocks > header.wp-block-template-part > .wp-block-group {
background-color: rgba(30, 32, 40, 0.90) !important;
backdrop-filter: blur(24px) saturate(1.3) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
box-shadow:
0 1px 0 0 rgba(200, 202, 205, 0.06),
0 8px 32px -8px rgba(0, 0, 0, 0.4);
}
/* More compact padding when scrolled — premium shrink */
body.is-scrolled .site-header {
padding-top: 0.9rem !important;
padding-bottom: 0.9rem !important;
}
/* Language pill becomes slightly visible when scrolled */
body.is-scrolled .header-lang-pill {
background: rgba(200, 202, 205, 0.08);
}
/* Bottom line appears on scroll — subtle amber accent */
body.is-scrolled .site-header::after {
background: linear-gradient(
90deg,
transparent 0%,
rgba(200, 202, 205, 0.08) 15%,
rgba(176, 141, 87, 0.10) 50%,
rgba(200, 202, 205, 0.08) 85%,
transparent 100%
);
}
}
/* ---- Premium Segmented Language Switcher ---- */
.header-lang-pill {
display: flex;
align-items: center;
gap: 0;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 100px;
padding: 0.2rem 0.15rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: border-color 0.3s ease, background 0.3s ease;
}
.header-lang-pill:hover {
border-color: rgba(213, 215, 218, 0.22);
}
.header-lang-pill .lang-seg {
margin: 0;
}
.header-lang-pill .lang-seg a {
display: block;
padding: 0.3rem 0.65rem;
border-radius: 100px;
color: var(--wp--preset--color--pearl-ghost);
text-decoration: none;
transition: color 0.25s ease, background-color 0.25s ease;
line-height: 1;
}
.header-lang-pill .lang-seg a:hover {
color: var(--wp--preset--color--pearl);
}
.header-lang-pill .lang-seg-active a {
background: rgba(176, 141, 87, 0.15);
color: var(--wp--preset--color--amber);
box-shadow: 0 0 8px rgba(176, 141, 87, 0.1);
}
/* ---- Hide lang switcher + CTA on small screens ---- */
@media (max-width: 781px) {
.header-lang-pill {
display: none;
}
.site-header > .wp-block-group > .wp-block-group:last-child > .wp-block-group:last-child > .wp-block-buttons {
display: none;
}
}
/* ==========================================================================
SilberBridge header logo
========================================================================== */
.silberbridge-header-logo {
display: block;
width: clamp(150px, 13vw, 190px);
max-width: 190px;
margin: 0;
line-height: 0;
flex-shrink: 0;
}
.silberbridge-header-logo a {
display: block;
line-height: 0;
}
.silberbridge-header-logo img {
display: block;
width: 100%;
height: auto;
max-height: 42px;
object-fit: contain;
}
/* Backward compatibility: if WordPress has an older saved FSE header in the
database, visually replace its amber placeholder dot + Site Title too. */
.header-brand:has(.wordmark-dot)::before {
content: "";
display: block;
width: clamp(150px, 13vw, 190px);
max-width: 190px;
aspect-ratio: 900 / 215;
background-image: url("assets/silberbridge-logo-light.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
flex-shrink: 0;
}
.header-brand:has(.wordmark-dot) .wordmark-dot,
.header-brand:has(.wordmark-dot) .wp-block-site-title {
display: none !important;
}
@media (max-width: 782px) {
.silberbridge-header-logo {
width: 148px;
max-width: 42vw;
}
.header-brand:has(.wordmark-dot)::before {
width: 148px;
max-width: 42vw;
}
}
/* ==========================================================================
Hero-specific styles
========================================================================== */
/* Hero breath mark (amber dot) */
.hero-breath-mark {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--wp--preset--color--amber);
box-shadow:
0 0 16px rgba(176, 141, 87, 0.25),
0 0 40px rgba(176, 141, 87, 0.15),
0 0 80px rgba(176, 141, 87, 0.07);
}
/* Hero waterline at bottom */
.hero-waterline {
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(176, 141, 87, 0.19) 20%,
rgba(176, 141, 87, 0.25) 50%,
rgba(176, 141, 87, 0.19) 80%,
transparent 100%
);
}
/* NOTE (Hero System audit): the legacy .hero-has-ambient / .hero-image-frame /
.scroll-track / .scroll-label rules that previously lived here have been
removed. They targeted markup (.hero-has-ambient, .hero-content,
.hero-image-frame, .scroll-track, .scroll-label) that no longer exists in
any template, page, or part — confirmed via a full-theme search. They were
dead CSS left over from an earlier hero implementation (a gradient-painted
hero with a separately masked, heavily desaturated/darkened image layer —
saturate(0.5) brightness(0.7) — that predates the current wp:cover-based
heroes with real photography. Deleting them is zero-risk (nothing
referenced them) and removes duplicated/obsolete hero styling per the
Hero System cleanup. See the "Hero System" block below for the current,
single source of truth for hero overlay/image/text treatment. */
/* NOTE (Code quality audit): the legacy .hero-cta-pill / .nav-cta-pill /
.hero-cta-arrow / .pill-dot glass-pill CTA rules that previously lived
here have been removed. They targeted markup that no longer exists in any
template, page, or part — confirmed via a full-theme search. They were
dead CSS left over from the pill-style CTA button that predates the
current hero-phone-cta (icon + tel: link) button. Deleting them is
zero-risk (nothing referenced them). */
/* Hero phone CTA: icon + tel: number, replaces the former "Termin buchen" /
"Book Appointment" booking-form button. Direction follows the existing
.is-rtl-page / html[dir="rtl"] .wp-block-button__link { direction: rtl }
rule already in the RTL section below, so the icon and number swap sides
automatically on the Arabic page — no separate RTL override needed here. */
.hero-phone-cta .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 0.6em;
}
.hero-phone-cta .wp-block-button__link svg {
flex-shrink: 0;
}
/* ==========================================================================
Cover block enhancements
========================================================================== */
.wp-block-cover {
overflow: hidden;
}
.wp-block-cover .wp-block-cover__inner-container {
position: relative;
z-index: 10;
}
/* ==========================================================================
HERO SYSTEM — single source of truth for every hero on the site
==========================================================================
Replaces the old fixed has-background-dim-35/40/50/60 opacity overrides.
WHY THE OLD HEROES STILL READ AS "DARK":
The dim-35/40/50/60 rules only ever controlled the opacity of the flat
color tint (.wp-block-cover__background, a solid Abyss #081A2A rectangle).
Cutting that opacity in half (previous fix) was real progress, but three
things kept undoing it:
1. A flat, edge-to-edge solid-color tint — even at low opacity — sits
uniformly over the whole photo, including the brightest parts, so it
still reads as "haze over the image" rather than the image itself
being the star. There was no shaping (lighter center / darker edge)
the way premium (Apple-style) heroes use light.
2. The image filter boost (saturate/brightness/contrast ~1.03) was
modest and identical on every page, so it couldn't compensate for
photos that are already low-key/moody by nature (e.g. the legal
pages' dark-desk photography).
3. Every value was a hard-coded number repeated per selector. Tuning
one page meant touching multiple unrelated rules, which is how the
four-tier system drifted out of sync with the design goal in the
first place.
THE FIX:
A small set of CSS custom properties, declared once on the hero container
itself, drive the overlay shape, the image filter, and the text shadow.
Pages only override the *variables* they need (see the per-page tuning
block near the min-height rules further down) — never the underlying
rules. This is the reusable "Hero System" the audit asked for.
-------------------------------------------------------------------------- */
/* Hero System defaults — apply to every hero (the first full-width cover
block on a page). Marketing pages use these as-is; legal pages override
a few variables below. */
.wp-block-cover.alignfull:first-of-type {
--hero-overlay-opacity: 0.20;
--hero-overlay-edge-opacity: 0.38;
--hero-image-brightness: 1.06;
--hero-image-saturation: 1.05;
--hero-image-contrast: 1.05;
--hero-text-shadow:
0 1px 3px rgba(6, 9, 18, 0.35),
0 4px 24px rgba(6, 9, 18, 0.45);
}
/* Overlay — soft navy tint with shape, not a flat dark rectangle.
Built WITH WordPress core's Cover block architecture rather than against
it, in two layers on the element core already provides for this exact
purpose (.wp-block-cover__background, the "dim" element):
1. BASE TINT — we only ever set `opacity`, never `background-color`.
Core applies `background-color` via `.has-{slug}-background-color`
with its own !important (so the editor's color picker always wins
visually) — we don't touch that property, so there's nothing to
fight. Core's own dim-tier rules (.has-background-dim-NN) already set
`opacity` (not !important), and this theme has safely overridden that
exact property for years; we're doing the same thing, just reading
the value from a variable instead of duplicating a rule per tier.
This also means a future WP core update to how background-color is
themed can't break this — we never depend on that property at all.
2. SHAPE (lighter center / darker edge) — added as a ::after pseudo-
element on that same background span, not as a new sibling layer and
not on the outer .wp-block-cover. A pseudo-element can't be targeted,
restyled, or removed by WordPress core (core has no concept of it),
so there is no selector to keep in sync with future core markup or
CSS changes. Because it lives inside the same absolutely-positioned,
already-correctly-stacked background span, it automatically inherits
that span's existing position in the standard stacking order —
no z-index guesswork, no new stacking context to maintain.
Net effect: image → dim span (core's element, our opacity) → shape
pseudo-element (ours) → inner-container (core's element, untouched) —
i.e. exactly the stacking order WordPress intends, just with two
lightweight, variable-driven layers instead of one flat color. */
.wp-block-cover.alignfull:first-of-type .wp-block-cover__background {
opacity: var(--hero-overlay-opacity);
}
.wp-block-cover.alignfull:first-of-type .wp-block-cover__background::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(
ellipse 75% 65% at 50% 42%,
transparent 0%,
rgba(8, 26, 42, var(--hero-overlay-edge-opacity)) 100%
),
linear-gradient(
180deg,
rgba(8, 26, 42, var(--hero-overlay-edge-opacity)) 0%,
transparent 22%,
transparent 70%,
rgba(8, 26, 42, var(--hero-overlay-edge-opacity)) 100%
);
}
/* Readability safety net for hero text. Uses the Hero System text-shadow
variable (stronger than the site-wide default further below applies to
non-hero covers) so headline/body copy stays crisp against the brighter
image without needing to darken the overlay further. Same color, size,
weight, and spacing as before — only the shadow changes. */
.wp-block-cover.alignfull:first-of-type .wp-block-cover__inner-container h1,
.wp-block-cover.alignfull:first-of-type .wp-block-cover__inner-container h2,
.wp-block-cover.alignfull:first-of-type .wp-block-cover__inner-container p {
text-shadow: var(--hero-text-shadow);
}
/* Fallback text-shadow for any non-hero cover block (e.g. the second,
mid-page cover on the Kompetenz/Digital Literacy page) — unchanged from
the previous site-wide rule. */
.wp-block-cover__inner-container h1,
.wp-block-cover__inner-container h2,
.wp-block-cover__inner-container p {
text-shadow: 0 2px 20px rgba(8, 26, 42, 0.45);
}
/* --------------------------------------------------------------------------
HERO SYSTEM — LEFT-ALIGNED CONTENT MODIFIER (.hero-content-left)
Opt-in extension of the Hero System above for heroes whose photography
has its negative space on the left (e.g. Home). Two responsibilities:
1. GUARANTEE LEFT ALIGNMENT — WordPress's contentPosition ("center left")
already sets justify-content on the inner-container, but flex "auto"
margins on a constrained child can silently re-center it regardless of
the parent's justify-content. We remove that possibility entirely by
not relying on auto margins for the text column.
2. DIRECTIONAL READABILITY GRADIENT — a second, independent layer
(its own ::before) added next to the Hero System's existing ::after
shape layer. Nothing here duplicates or overrides the radial/vertical
shape already defined above; this only adds the left-to-right
component the brief asks for, scoped to this one modifier so every
other hero on the site is completely unaffected.
-------------------------------------------------------------------------- */
.hero-content-left .wp-block-cover__inner-container {
justify-content: flex-start;
}
.hero-content-left .wp-block-cover__inner-container > .wp-block-group {
margin-left: 0 !important;
margin-right: 0 !important;
}
.hero-content-left .wp-block-cover__background::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(
90deg,
rgba(10, 12, 16, 0.50) 0%,
rgba(10, 12, 16, 0.34) 24%,
rgba(10, 12, 16, 0.14) 46%,
rgba(10, 12, 16, 0) 62%
);
}
/* RTL variant: the photo's negative space stays physically on the left
(baked into the image itself), so the content box stays left-positioned
for Arabic too — only the text's own reading direction flips, which the
existing .is-rtl-page typography rules already handle. No mirroring of
the gradient is needed since the box position doesn't change. */
@media (max-width: 781px) {
/* On small screens the cover is much narrower than the source photo's
negative-space region, so the flat readability gradient is widened
and strengthened slightly to keep text crisp regardless of exactly
which slice of the image ends up behind it. */
.hero-content-left .wp-block-cover__background::before {
background-image: linear-gradient(
90deg,
rgba(10, 12, 16, 0.58) 0%,
rgba(10, 12, 16, 0.40) 38%,
rgba(10, 12, 16, 0.18) 64%,
rgba(10, 12, 16, 0) 82%
);
}
}
/* ==========================================================================
Columns refinements
========================================================================== */
@media (max-width: 781px) {
.wp-block-columns {
flex-wrap: wrap;
}
.wp-block-column {
flex-basis: 100% !important;
}
}
/* ==========================================================================
Post template / query card treatments
========================================================================== */
.wp-block-post-template .wp-block-post-featured-image img {
border-radius: 8px;
filter: saturate(0.6) brightness(0.8);
transition: filter 0.4s ease, transform 0.4s ease;
}
@media (prefers-reduced-motion: no-preference) {
.wp-block-post-template .wp-block-post-featured-image:hover img {
filter: saturate(0.8) brightness(0.9);
transform: scale(1.03);
}
}
/* ==========================================================================
Ratgeber / Blog page layout refinements
========================================================================== */
/* ---- Featured Article (first query: perPage 1) ---- */
/* Vertically centre the text column relative to the image and tighten
the internal spacing so content doesn't float in empty space. */
.reveal-on-scroll > .wp-block-query:first-of-type .wp-block-columns.are-vertically-aligned-center {
align-items: center;
}
/* Reduce the gap between the category pill / date row, the headline,
the excerpt, and the read-time row inside the featured article's
text column so they form a tighter, more connected unit. */
.reveal-on-scroll > .wp-block-query:first-of-type .wp-block-post-title {
margin-block-start: var(--wp--preset--spacing--20);
margin-block-end: var(--wp--preset--spacing--10);
}
.reveal-on-scroll > .wp-block-query:first-of-type .wp-block-post-excerpt {
margin-block-start: 0;
margin-block-end: 0;
}
/* Give the featured-article image a softer border to visually
connect it with the text column rather than floating apart. */
.reveal-on-scroll > .wp-block-query:first-of-type .wp-block-post-featured-image {
border-radius: 12px;
overflow: hidden;
}
/* ---- Consistent vertical rhythm across page sections ---- */
/* Normalize the top/bottom padding of the major blog-page sections
so the distance between Hero → Featured → Grid → Themen → CTA
is uniform and connected. The value var(--wp--preset--spacing--60)
is roughly 3rem — enough breathing room without creating large
empty bands. */
/* ---- Magazine-style article card grid ---- */
/* Constrain the magazine-style article grid so cards don't stretch
edge-to-edge. Match the breathing room of the "Themen entdecken"
section below by capping max-width and centering. */
.wp-block-query.is-style-loop-magazine .wp-block-post-template {
gap: var(--wp--preset--spacing--50);
max-width: 1100px;
margin-inline: auto;
}
/* Give each glass-card article more internal horizontal padding and
a softer image-to-content transition. */
.wp-block-query.is-style-loop-magazine .is-style-glass-card {
padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
/* Reduce the visual dominance of the featured image inside magazine
cards: add bottom margin so the image doesn't crowd the metadata. */
.wp-block-query.is-style-loop-magazine .wp-block-post-featured-image {
margin-bottom: var(--wp--preset--spacing--30);
}
/* Slightly reduce the image aspect ratio pressure so the cards feel
less image-heavy and text has more visual weight. */
.wp-block-query.is-style-loop-magazine .wp-block-post-featured-image img {
aspect-ratio: 16 / 10;
object-fit: cover;
width: 100%;
height: auto;
}
/* Increase the gap between metadata row and title inside cards. */
.wp-block-query.is-style-loop-magazine .is-style-glass-card .wp-block-post-title {
margin-block-start: var(--wp--preset--spacing--20);
}
/* ==========================================================================
Amber glow accent — decorative utility
========================================================================== */
.has-amber-glow {
position: relative;
}
.has-amber-glow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(ellipse at 50% 50%, rgba(176, 141, 87, 0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* ==========================================================================
Footer typography & link color hierarchy
========================================================================== */
/* Section headings (Kontakt, Leistungen, Sprache, Rechtliches, Social) → amber */
footer .has-pearl-ghost-color[style*="text-transform:uppercase"][style*="letter-spacing:0.15em"],
footer .has-pearl-dim-color[style*="text-transform:uppercase"][style*="letter-spacing:0.15em"] {
color: var(--wp--preset--color--amber) !important;
}
/* All footer links → white (pearl) by default, amber on hover */
footer .has-pearl-dim-color a,
footer .has-pearl-dim-color a:visited,
footer .has-pearl-color a,
footer .has-pearl-color a:visited {
color: var(--wp--preset--color--pearl) !important;
text-decoration: none;
transition: color 0.25s ease;
}
footer .has-pearl-dim-color a:hover,
footer .has-pearl-color a:hover {
color: var(--wp--preset--color--amber) !important;
}
/* Footer social named list: same hierarchy — white default, amber hover */
.footer-social-named a {
color: var(--wp--preset--color--pearl) !important;
}
/* Footer wordmark — replaces the former plain-text "SilberBridge" label in
the bottom credit bar. Opacity brought down to match the muted pearl-ghost
tone the text previously used in this low-emphasis row. */
.silberbridge-footer-wordmark {
height: 0.8rem;
width: auto;
display: block;
opacity: 0.6;
}
/* ==========================================================================
RTL (Arabic) support
========================================================================== */
html[dir="rtl"] .wp-block-quote {
border-left: none;
border-right: 2px solid var(--wp--preset--color--amber);
padding-inline-start: 0;
padding-inline-end: var(--wp--preset--spacing--40);
}
/* Arabic page RTL body class */
.is-rtl-page {
direction: rtl;
text-align: right;
}
.is-rtl-page .wp-block-navigation__container {
direction: rtl;
}
.is-rtl-page .wp-block-columns {
direction: rtl;
}
.is-rtl-page .wp-block-button__link {
direction: rtl;
}
.is-rtl-page .klar24-contact-form__select {
background-position: left 1rem center;
padding-right: 1rem;
padding-left: 2.5rem;
}
.is-rtl-page .klar24-contact-form__footer {
justify-content: flex-end;
}
.is-rtl-page .klar24-contact-form__submit-arrow svg {
transform: scaleX(-1);
}
.is-rtl-page .wp-block-list {
padding-inline-start: 1.5em;
padding-inline-end: 0;
}
.is-rtl-page .wp-block-navigation a::after {
transform-origin: right center;
}
.is-rtl-page h1,
.is-rtl-page h2,
.is-rtl-page h3,
.is-rtl-page h4,
.is-rtl-page h5,
.is-rtl-page h6,
.is-rtl-page .kicker-label {
text-align: right;
}
.is-rtl-page .has-text-align-center,
.is-rtl-page .has-text-align-center h1,
.is-rtl-page .has-text-align-center h2,
.is-rtl-page .has-text-align-center h3,
.is-rtl-page .has-text-align-center p {
text-align: center;
}
/* ==========================================================================
Arabic Typography System — Noto Serif Arabic + Noto Naskh Arabic
Applied exclusively to .is-rtl-page elements. DE/EN fonts unchanged.
========================================================================== */
/* ---------- Arabic Typography: Noto Naskh Arabic (body) ---------- */
/* Applied to: paragraphs, lists, card descriptions, footer text,
navigation descriptions, form text, CTA supporting text */
.is-rtl-page,
.is-rtl-page p,
.is-rtl-page li,
.is-rtl-page label,
.is-rtl-page input,
.is-rtl-page select,
.is-rtl-page textarea,
.is-rtl-page .has-body-font-family {
font-family: 'Noto Naskh Arabic', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
font-feature-settings: "liga" 1, "calt" 1;
line-height: 1.9;
letter-spacing: 0;
}
/* ---------- Arabic Typography: Noto Serif Arabic (headings) ---------- */
/* Applied to: H1, H2, H3, hero headlines, card titles, section titles, blockquotes */
.is-rtl-page h1,
.is-rtl-page h2,
.is-rtl-page h3,
.is-rtl-page .has-display-font-family,
.is-rtl-page .wp-block-post-title,
.is-rtl-page blockquote,
.is-rtl-page .wp-block-quote {
font-family: 'Noto Serif Arabic', 'Cormorant Garamond', Georgia, serif;
font-feature-settings: "liga" 1, "calt" 1;
letter-spacing: 0;
}
/* H4, H5 — Noto Serif Arabic for card titles and sub-section headings */
.is-rtl-page h4,
.is-rtl-page h5 {
font-family: 'Noto Serif Arabic', 'Cormorant Garamond', Georgia, serif;
font-feature-settings: "liga" 1, "calt" 1;
letter-spacing: 0;
}
/* H6 (overline/kicker) — Noto Naskh Arabic for labels.
.kicker-label is the replacement markup for these labels (see the
heading-hierarchy fix notes above); it inherits the Naskh Arabic family
from the generic ".is-rtl-page p" rule already, so only the weight needs
restating here. */
.is-rtl-page h6,
.is-rtl-page .kicker-label {
font-family: 'Noto Naskh Arabic', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: 600;
letter-spacing: 0;
}
/* Blockquote cite — body font */
.is-rtl-page blockquote cite,
.is-rtl-page .wp-block-quote cite {
font-family: 'Noto Naskh Arabic', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}
/* ---------- Arabic heading line-heights ---------- */
.is-rtl-page h1 { line-height: 1.25; font-weight: 500; }
.is-rtl-page h2 { line-height: 1.3; font-weight: 500; }
.is-rtl-page h3 { line-height: 1.35; font-weight: 500; }
.is-rtl-page h4 { line-height: 1.4; font-weight: 500; }
.is-rtl-page h5 { line-height: 1.4; font-weight: 500; }
/* Arabic hero headlines — no glyph clipping at large sizes */
.is-rtl-page .wp-block-cover__inner-container h1 {
line-height: 1.25;
letter-spacing: 0;
font-weight: 500;
}
/* Arabic paragraph — comfortable for seniors */
.is-rtl-page p {
line-height: 1.9;
letter-spacing: 0;
}
/* ---------- Arabic buttons — Noto Naskh Arabic, weight 600 ---------- */
/* NOT Noto Serif Arabic — preserves readability at button sizes */
.is-rtl-page .wp-block-button__link {
font-family: 'Noto Naskh Arabic', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: 600;
letter-spacing: 0.04em;
}
/* ---------- Arabic navigation — Noto Naskh Arabic, weight 600 ---------- */
/* NOT Noto Serif Arabic — preserves readability at nav sizes */
.is-rtl-page .wp-block-navigation-item__content {
font-family: 'Noto Naskh Arabic', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Arabic card content */
.is-rtl-page .is-style-glass-card p,
.is-rtl-page .is-style-glass-card li {
line-height: 1.9;
}
.is-rtl-page .is-style-glass-card h3 {
line-height: 1.35;
font-weight: 500;
}
/* Arabic form elements — Noto Naskh Arabic */
.is-rtl-page .klar24-contact-form__label,
.is-rtl-page .klar24-contact-form__input,
.is-rtl-page .klar24-contact-form__submit-text {
font-family: 'Noto Naskh Arabic', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}
/* Arabic footer typography */
.is-rtl-page footer p,
.is-rtl-page footer h6,
.is-rtl-page footer a {
font-family: 'Noto Naskh Arabic', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
font-feature-settings: "liga" 1, "calt" 1;
}
.is-rtl-page footer h2 {
font-family: 'Noto Serif Arabic', 'Cormorant Garamond', Georgia, serif;
font-feature-settings: "liga" 1, "calt" 1;
}
/* Arabic mobile menu overlay — Noto Serif Arabic for display-size items */
.is-rtl-page .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-family: 'Noto Serif Arabic', 'Cormorant Garamond', Georgia, serif;
font-weight: 500;
}
/* ==========================================================================
Focus styles (WCAG accessibility)
========================================================================== */
:focus-visible {
outline: 2px solid var(--wp--preset--color--amber);
outline-offset: 3px;
}
.wp-block-button__link:focus-visible {
outline-offset: 4px;
box-shadow: 0 0 0 4px rgba(176, 141, 87, 0.2);
}
.wp-block-navigation-item__content:focus-visible {
outline-offset: 4px;
}
/* Skip link — visually hidden until keyboard-focused (WCAG 2.4.1 Bypass Blocks) */
.skip-link {
position: absolute;
top: -40px;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
}
.skip-link:focus {
background: var(--wp--preset--color--amber);
color: var(--wp--preset--color--abyss);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small);
padding: 0.5rem 1rem;
position: fixed;
top: 0;
left: 0;
width: auto;
height: auto;
overflow: visible;
z-index: 9999;
text-decoration: none;
}
/* ==========================================================================
Smooth transitions — global
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
.wp-block-group,
.wp-block-column,
.wp-block-cover {
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
}
/* ==========================================================================
Footer Social — Named links with platform labels
========================================================================== */
.footer-social-named a {
color: var(--wp--preset--color--pearl-dim);
text-decoration: none;
transition: color 0.25s ease, transform 0.25s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.footer-social-named a:hover {
color: var(--wp--preset--color--amber);
transform: translateX(4px);
}
/* Footer social icon badges — small premium text icons */
.footer-social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.4em;
height: 1.4em;
border-radius: 4px;
border: 1px solid rgba(200, 202, 205, 0.15);
font-size: 0.55em;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--wp--preset--color--pearl-ghost);
background: rgba(200, 202, 205, 0.06);
flex-shrink: 0;
transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.footer-social-named a:hover .footer-social-icon {
border-color: var(--wp--preset--color--amber);
color: var(--wp--preset--color--amber);
background: rgba(176, 141, 87, 0.08);
}
/* RTL: shift left instead of right on hover */
.is-rtl-page .footer-social-named a:hover,
html[dir="rtl"] .footer-social-named a:hover {
transform: translateX(-4px);
}
/* ==========================================================================
Clickable service cards — overlay link
========================================================================== */
.is-style-glass-card[data-service-link],
.is-style-glass-card[data-blog-link] {
position: relative;
cursor: pointer;
}
.is-style-glass-card[data-service-link]::after,
.is-style-glass-card[data-blog-link]::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.is-style-glass-card[data-service-link]:hover,
.is-style-glass-card[data-blog-link]:hover {
border-color: var(--wp--preset--color--amber) !important;
box-shadow:
inset 0 1px 0 0 rgba(238, 242, 247, 0.08),
0 20px 52px -12px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(176, 141, 87, 0.15);
transform: translateY(-6px);
transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ==========================================================================
Homepage card consistency — unified design system
========================================================================== */
/* Equal-height card grids: stretch columns and their direct child groups */
.equal-cards {
align-items: stretch;
}
.equal-cards > .wp-block-column {
display: flex;
flex-direction: column;
}
.equal-cards > .wp-block-column > .wp-block-group {
flex: 1;
display: flex;
flex-direction: column;
}
/* About / Founder section — constrain portrait height to content area only */
.about-founder-portrait {
max-height: 480px;
overflow: hidden;
border-radius: 12px;
}
.about-founder-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
}
@media (max-width: 781px) {
.about-founder-portrait {
max-height: 360px;
}
}
/* Service card images — match article card proportions */
.service-card-image img {
aspect-ratio: 16 / 10;
object-fit: cover;
width: 100%;
height: auto;
display: block;
filter: saturate(0.6) brightness(0.8);
transition: filter 0.4s ease, transform 0.4s ease;
}
.is-style-glass-card:hover .service-card-image img {
filter: saturate(0.8) brightness(0.9);
transform: scale(1.03);
}
.service-card-image {
overflow: hidden;
border-radius: 12px 12px 0 0;
margin: 0;
}
.service-card-image figure {
margin: 0;
}
/* Unified glass-card system — consistent border, radius, shadow, hover */
@media (prefers-reduced-motion: no-preference) {
.is-style-glass-card {
transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.3s ease;
}
.is-style-glass-card:hover {
border-color: var(--wp--preset--color--glass-border-accent);
box-shadow:
inset 0 1px 0 0 rgba(238, 242, 247, 0.06),
0 16px 48px -8px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(176, 141, 87, 0.1);
transform: translateY(-3px);
}
}
/* ==========================================================================
Equal-height card columns
========================================================================== */
/* Equal card heights: cards inside .equal-cards columns use flex stretch so
the inner glass-card fills its column and aligns content consistently. */
.equal-cards > .wp-block-column > .is-style-glass-card {
display: flex;
flex-direction: column;
flex: 1;
}
/* Consistent card border glow on hover for all homepage cards */
.reveal-on-scroll .is-style-glass-card:hover {
border-color: var(--wp--preset--color--glass-border-accent);
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
body {
background: #fff;
color: #000;
}
.site-header,
.scroll-progress {
display: none;
}
a {
color: #000;
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
color: #000;
}
}
/* ---------- Loop layout utilities ---------- */
/* These classes are wired to the wp:query blocks emitted by content/pages and
templates. Do not rename. Tune colours and spacing to theme.json tokens. */
/* Horizontal scrollable rail */
.wp-block-query.is-style-loop-rail .wp-block-post-template {
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
padding-bottom: var(--wp--preset--spacing--20);
}
.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
flex: 0 0 320px;
scroll-snap-align: start;
}
/* Compact list with hairline row dividers */
.wp-block-query.is-style-loop-list .wp-block-post-template > * {
border-bottom: 1px solid var(--wp--preset--color--glass-border);
padding-block: var(--wp--preset--spacing--30);
}
.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
border-bottom: 0;
}
/* Zigzag — flip the columns inside every even entry */
.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
flex-direction: row-reverse;
}
/* Timeline — vertical line with node markers per entry */
.wp-block-query.is-style-loop-timeline .wp-block-post-template {
position: relative;
padding-inline-start: 2.5rem;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
content: '';
position: absolute;
inset-block: 0;
inset-inline-start: 0.5rem;
width: 2px;
background: var(--wp--preset--color--pearl-ghost);
opacity: 0.15;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
position: relative;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
content: '';
position: absolute;
inset-inline-start: -2.25rem;
inset-block-start: 0.6rem;
width: 1rem;
height: 1rem;
border: 2px solid var(--wp--preset--color--amber);
border-radius: 50%;
background: var(--wp--preset--color--abyss);
}
/* Magazine — first child spans 2 columns of the grid */
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
grid-column: span 2;
}
@media (max-width: 600px) {
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
grid-column: auto;
}
}
/* ==========================================================================
Founder / About premium section — v2.0.6
Portrait-right layout · floating badge · 4-stat row · marquee strip
========================================================================== */
/* Portrait container — relative so badge can overlay */
.founder-portrait-wrap {
position: relative;
line-height: 0; /* prevent gap below inline image */
}
/* Floating glassmorphism badge over portrait */
.founder-badge {
position: absolute;
bottom: 1.25rem;
right: 1.25rem;
z-index: 2;
background: linear-gradient(135deg, rgba(232,162,32,0.18) 0%, rgba(232,162,32,0.08) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(232,162,32,0.28);
border-radius: 12px;
padding: 0.75rem 1.1rem;
text-align: center;
min-width: 110px;
pointer-events: none;
}
.founder-badge p {
margin: 0 !important;
padding: 0 !important;
line-height: 1.3;
}
.founder-badge__year {
font-family: var(--wp--preset--font-family--body);
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--pearl-ghost);
}
.founder-badge__brand {
font-family: var(--wp--preset--font-family--display);
font-size: 0.9rem;
font-weight: 300;
font-style: italic;
color: var(--wp--preset--color--amber);
white-space: nowrap;
margin-top: 0.1rem !important;
}
/* RTL: flip badge to left side */
.is-rtl-page .founder-badge {
right: auto;
left: 1.25rem;
}
/* ==========================================================================
klar-ticker — premium trust strip (v4 2026 rebuild)
Architecture:
• Pure CSS animation on .klar-ticker__track (translateX 0 → -25%)
Four copies of the 3-item set → one full set is exactly 25% width,
so the loop is perfectly seamless at any viewport width.
• GPU path: transform + will-change:transform. No top/left, no margin.
• translate3d() forces hardware compositing on all browsers.
• No JavaScript needed for the animation itself.
• prefers-reduced-motion: animation disabled, items wrap & display static.
• Pause-on-hover for users who want to read an item.
========================================================================== */
.klar-ticker {
overflow: hidden;
width: 100%;
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: clamp(1.5rem, 2.5vw, 2rem);
border-top: 1px solid rgba(176, 141, 87, 0.15);
/* Soft fade-out at both edges — prevents hard crop */
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
rgba(0,0,0,0.6) 5%,
black 14%,
black 86%,
rgba(0,0,0,0.6) 95%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
rgba(0,0,0,0.6) 5%,
black 14%,
black 86%,
rgba(0,0,0,0.6) 95%,
transparent 100%
);
cursor: default;
}
.klar-ticker__track {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
/* 4 sets → move exactly 1/4 of the total track width */
width: max-content;
/* translate3d forces GPU composite layer */
transform: translate3d(0, 0, 0);
will-change: transform;
/* 28 s = calm editorial pace; linear = perfectly constant velocity */
/* 11 items × ~4s each = ~44s — calm, readable pace */
animation: klar-ticker-scroll 44s linear infinite;
}
/* Pause on hover — lets users read without fighting the animation */
.klar-ticker:hover .klar-ticker__track,
.klar-ticker:focus-within .klar-ticker__track {
animation-play-state: paused;
}
@keyframes klar-ticker-scroll {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-25%, 0, 0); }
}
/* RTL: reverse direction */
.is-rtl-page .klar-ticker__track {
animation-name: klar-ticker-scroll-rtl;
}
@keyframes klar-ticker-scroll-rtl {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(25%, 0, 0); }
}
/* ---- Individual item ---- */
.klar-ticker__item {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0 clamp(1.75rem, 3.5vw, 3rem);
white-space: nowrap;
/* Slight opacity lift on hover gives a polished interactive feel */
transition: opacity 0.25s ease;
opacity: 0.68;
}
.klar-ticker__item:hover {
opacity: 1;
}
.klar-ticker__label {
font-family: var(--wp--preset--font-family--display);
font-style: italic;
font-weight: 300;
font-size: clamp(0.95rem, 1.35vw, 1.15rem);
color: var(--wp--preset--color--pearl);
letter-spacing: 0.01em;
line-height: 1;
}
/* ---- SVG icon ---- */
.klar-ticker__icon {
width: 1.15em;
height: 1.15em;
flex-shrink: 0;
color: var(--wp--preset--color--amber);
opacity: 0.8;
vertical-align: middle;
}
/* ---- Separator dot ---- */
.klar-ticker__sep {
display: inline-flex;
align-items: center;
padding: 0;
flex-shrink: 0;
}
.klar-ticker__sep::before {
content: '';
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--wp--preset--color--amber);
opacity: 0.35;
}
/* ---- Reduced motion: disable animation, show items statically ---- */
@media (prefers-reduced-motion: reduce) {
.klar-ticker__track {
animation: none;
flex-wrap: wrap;
gap: 0.4rem 0;
width: 100%;
justify-content: center;
transform: none;
}
.klar-ticker__item {
opacity: 1;
}
/* Hide the three duplicate sets — only set 1 is visible */
.klar-ticker__item[aria-hidden="true"],
.klar-ticker__sep[aria-hidden="true"] {
display: none;
}
}
/* ---- Mobile: tighter padding ---- */
@media (max-width: 640px) {
.klar-ticker__item {
padding: 0 clamp(1rem, 4vw, 1.5rem);
}
.klar-ticker__label {
font-size: 0.88rem;
}
.klar-ticker__icon {
width: 1em;
height: 1em;
}
}
/* ============================================================
KLAR HELP SECTION — rebuilt to match reference screenshot
============================================================ */
/* --- Card grid --- */
.klar-help-cards.wp-block-columns {
display: flex;
flex-wrap: nowrap;
gap: 20px;
align-items: stretch;
}
.klar-help-cards .wp-block-column {
flex: 1 1 0;
min-width: 0;
}
/* --- Individual card --- */
.klar-help-card.is-style-glass-card {
height: 100%;
display: flex;
flex-direction: column;
gap: 18px;
background: rgba(255, 255, 255, 0.045) !important;
border: 1px solid rgba(213, 215, 218, 0.1) !important;
border-radius: 16px !important;
padding: 32px 28px 36px !important;
box-sizing: border-box;
transition: border-color 0.3s ease, transform 0.25s ease;
}
.klar-help-card.is-style-glass-card:hover {
border-color: rgba(176, 141, 87, 0.22) !important;
transform: translateY(-3px);
}
/* --- Icon container --- */
.klar-help-icon {
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
background: rgba(176, 141, 87, 0.04) !important;
border-radius: 12px !important;
flex-shrink: 0;
}
.klar-help-icon .wp-block-html {
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.klar-help-icon svg {
display: block;
}
/* --- Card heading --- */
.klar-help-card h4 {
font-size: 1.05rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: #F6F1E8;
margin: 0 !important;
}
/* --- Amber divider line --- */
.klar-help-divider {
display: block;
width: 32px !important;
height: 2px !important;
background: #E8A220 !important;
border: none !important;
margin: 0 !important;
opacity: 0.75;
flex-shrink: 0;
}
/* --- Card body text --- */
.klar-help-card p {
font-size: 0.875rem !important;
line-height: 1.78 !important;
flex: 1;
margin: 0 !important;
}
/* --- CTA panel --- */
.klar-help-cta.is-style-glass-card {
background: rgba(255, 255, 255, 0.045) !important;
border: 1px solid rgba(213, 215, 218, 0.1) !important;
border-radius: 16px !important;
padding: 28px 36px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 32px !important;
flex-wrap: nowrap !important;
}
/* CTA icon same as card icon */
.klar-help-cta .klar-help-icon {
flex-shrink: 0;
}
/* CTA title italic serif */
.klar-help-cta .has-display-font-family {
font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
}
/* CTA button */
.klar-cta-btn .wp-block-button__link,
.wp-block-button.klar-cta-btn .wp-block-button__link {
background: #E8A220 !important;
color: #1C1B1A !important;
border-radius: 100px !important;
padding: 0.8rem 1.75rem !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
white-space: nowrap;
transition: background 0.2s ease, transform 0.15s ease;
}
.klar-cta-btn .wp-block-button__link:hover {
background: #C8900C !important;
transform: translateY(-1px);
}
/* Badge text below CTA button */
.klar-help-cta .has-pearl-ghost-color {
font-size: 0.62rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
opacity: 0.55;
}
/* --- RTL overrides --- */
.klar-help-section.is-rtl-page .klar-help-cards.wp-block-columns {
direction: rtl;
}
.klar-help-section.is-rtl-page .klar-help-card {
text-align: right;
}
.klar-help-section.is-rtl-page .klar-help-divider {
margin-right: 0 !important;
margin-left: auto !important;
}
.klar-help-section.is-rtl-page .klar-help-cta {
flex-direction: row-reverse !important;
}
.klar-help-section.is-rtl-page .klar-help-cta > .wp-block-group:first-child {
flex-direction: row-reverse;
}
.klar-help-section.is-rtl-page .klar-help-cta .has-display-font-family,
.klar-help-section.is-rtl-page .klar-help-cta p {
text-align: right;
}
/* --- Tablet: 2×2 grid --- */
@media (max-width: 1024px) and (min-width: 782px) {
.klar-help-cards.wp-block-columns {
flex-wrap: wrap !important;
}
.klar-help-cards .wp-block-column {
flex: 1 1 calc(50% - 10px) !important;
max-width: calc(50% - 10px) !important;
}
.klar-help-cta.is-style-glass-card {
padding: 24px 28px !important;
}
}
/* --- Mobile: single column stack --- */
@media (max-width: 781px) {
.klar-help-cards.wp-block-columns {
flex-direction: column !important;
}
.klar-help-cards .wp-block-column {
flex: 1 1 100% !important;
width: 100% !important;
max-width: 100% !important;
}
.klar-help-card.is-style-glass-card {
padding: 24px 22px 28px !important;
}
.klar-help-cta.is-style-glass-card {
flex-direction: column !important;
align-items: flex-start !important;
gap: 24px !important;
padding: 24px 22px !important;
}
.klar-help-section.is-rtl-page .klar-help-cta.is-style-glass-card {
align-items: flex-end !important;
}
.klar-cta-btn .wp-block-button__link {
font-size: 0.72rem !important;
padding: 0.75rem 1.5rem !important;
}
}
/* ==========================================================================
Home page vertical rhythm — consistent section padding
========================================================================== */
/* Every full-bleed alignfull group on Home/About uses the same vertical padding.
This eliminates the "compressed → giant gap" jumps the home page used to have
between Hero → Founder → Services → CTA → Footer. */
.page-home .wp-block-group.alignfull,
.page-en-home .wp-block-group.alignfull,
.page-ar-home .wp-block-group.alignfull,
.page-about .wp-block-group.alignfull,
.page-en-about .wp-block-group.alignfull,
.page-ar-about .wp-block-group.alignfull {
padding-top: clamp(4.5rem, 8vw, 7rem);
padding-bottom: clamp(4.5rem, 8vw, 7rem);
margin-top: 0;
margin-bottom: 0;
}
/* Hero keeps its full viewport feel; only its bottom is normalized */
.page-home .wp-block-cover.alignfull:first-of-type,
.page-en-home .wp-block-cover.alignfull:first-of-type,
.page-ar-home .wp-block-cover.alignfull:first-of-type {
margin-bottom: 0;
}
/* Remove orphan spacers between sections that double-up with the new rhythm */
.page-home > .wp-block-spacer + .wp-block-group.alignfull,
.page-en-home > .wp-block-spacer + .wp-block-group.alignfull,
.page-ar-home > .wp-block-spacer + .wp-block-group.alignfull {
padding-top: clamp(3rem, 6vw, 5rem);
}
/* Section internal block-gap stays consistent */
.page-home .wp-block-group.alignfull > .wp-block-group,
.page-en-home .wp-block-group.alignfull > .wp-block-group,
.page-ar-home .wp-block-group.alignfull > .wp-block-group {
--wp--style--block-gap: var(--wp--preset--spacing--50);
}
/* ==========================================================================
Contact Section v2 — approved reference design system
Applied to: contact.html / en-contact.html / ar-contact.html
Tokens come from the existing theme (abyss bg, amber, pearl, glass).
========================================================================== */
.klar-c2-section {
background: var(--wp--preset--color--abyss) !important;
color: var(--wp--preset--color--pearl);
}
.klar-c2-inner {
max-width: 1200px;
margin: 0 auto;
}
/* Header */
.klar-c2-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(213, 215, 218, 0.08);
}
.klar-c2-eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
margin-bottom: 0.85rem;
color: var(--wp--preset--color--amber);
}
.klar-c2-dash { font-size: 0.85rem; line-height: 1; }
.klar-c2-eyebrow-text {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.klar-c2-h1 {
font-family: var(--wp--preset--font-family--display), Georgia, serif;
font-size: clamp(2rem, 4.5vw, 3rem);
font-weight: 300;
line-height: 1.12;
color: var(--wp--preset--color--pearl);
margin: 0 0 0.85rem;
}
.klar-c2-h1 em { font-style: italic; font-weight: 300; }
.klar-c2-sub {
font-size: 0.95rem;
line-height: 1.7;
color: var(--wp--preset--color--pearl-dim);
max-width: 560px;
margin: 0 auto;
}
/* Two columns */
.klar-c2-cols {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: stretch;
}
@media (min-width: 900px) {
.klar-c2-cols { grid-template-columns: 40% 1fr; gap: 1.5rem; }
}
/* Shared panel styling */
.klar-c2-info-panel,
.klar-c2-form-panel {
background: rgba(255, 255, 255, 0.042);
border: 1px solid rgba(213, 215, 218, 0.1);
border-radius: 16px;
padding: 1.75rem 1.6rem;
display: flex;
flex-direction: column;
}
/* Left: info rows */
.klar-c2-info-row {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 1rem 0;
border-bottom: 1px solid rgba(213, 215, 218, 0.07);
}
.klar-c2-info-row:first-child { padding-top: 0; }
.klar-c2-info-row.is-last { border-bottom: none; }
.klar-c2-icon {
width: 44px; height: 44px; min-width: 44px;
border: 1px solid rgba(176, 141, 87, 0.22);
border-radius: 11px;
background: rgba(176, 141, 87, 0.05);
color: var(--wp--preset--color--amber);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.klar-c2-icon svg { width: 18px; height: 18px; display: block; }
.klar-c2-info-text { min-width: 0; flex: 1; }
.klar-c2-info-label {
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--wp--preset--color--amber);
margin-bottom: 0.35rem;
}
.klar-c2-info-value {
font-size: 0.92rem;
font-weight: 500;
color: var(--wp--preset--color--pearl);
line-height: 1.5;
}
.klar-c2-info-value a { color: inherit; text-decoration: none; }
.klar-c2-info-value a:hover { color: var(--wp--preset--color--amber); }
.klar-c2-info-sub {
font-size: 0.8rem;
color: rgba(232, 228, 220, 0.55);
line-height: 1.6;
margin-top: 0.15rem;
}
/* Social hub */
.klar-c2-social-hub {
margin-top: auto;
padding-top: 1.25rem;
border-top: 1px solid rgba(213, 215, 218, 0.07);
}
.klar-c2-social-label {
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--wp--preset--color--amber);
margin-bottom: 0.9rem;
}
.klar-c2-social-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
}
.klar-c2-social-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(213, 215, 218, 0.1);
border-radius: 12px;
padding: 0.85rem 1rem;
display: flex;
align-items: center;
gap: 0.8rem;
text-decoration: none;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.klar-c2-social-card:hover {
border-color: rgba(176, 141, 87, 0.35);
background: rgba(176, 141, 87, 0.06);
transform: translateY(-1px);
}
.klar-c2-social-icon {
width: 40px; height: 40px; min-width: 40px;
border: 1px solid rgba(176, 141, 87, 0.22);
border-radius: 10px;
background: rgba(176, 141, 87, 0.06);
color: var(--wp--preset--color--amber);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.klar-c2-social-icon svg { width: 22px; height: 22px; display: block; }
.klar-c2-social-name {
font-size: 0.82rem;
font-weight: 600;
color: var(--wp--preset--color--pearl);
line-height: 1.2;
}
.klar-c2-social-handle {
font-size: 0.7rem;
color: rgba(232, 228, 220, 0.45);
margin-top: 0.15rem;
}
/* Right: form panel */
.klar-c2-form-heading {
font-family: var(--wp--preset--font-family--display), Georgia, serif;
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
font-weight: 300;
font-style: italic;
color: var(--wp--preset--color--pearl);
margin-bottom: 0.4rem;
}
.klar-c2-form-sub {
font-size: 0.8rem;
color: rgba(232, 228, 220, 0.55);
line-height: 1.65;
margin-bottom: 1.35rem;
}
.klar-c2-form-body {
flex: 1;
display: flex;
flex-direction: column;
}
/* Override the embedded klar24-contact-form to match reference */
.klar-c2-form-panel .klar24-contact-form {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
.klar-c2-form-panel .klar24-contact-form__grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.85rem !important;
margin-bottom: 0.85rem !important;
}
.klar-c2-form-panel .klar24-contact-form__field--message {
grid-column: 1 / -1 !important;
}
.klar-c2-form-panel .klar24-contact-form__field {
display: flex !important;
flex-direction: column !important;
gap: 0.3rem !important;
margin: 0 !important;
}
.klar-c2-form-panel .klar24-contact-form__label {
font-size: 0.6rem !important;
font-weight: 600 !important;
letter-spacing: 0.13em !important;
text-transform: uppercase !important;
color: var(--wp--preset--color--amber) !important;
margin: 0 !important;
}
.klar-c2-form-panel .klar24-contact-form__input,
.klar-c2-form-panel .klar24-contact-form__select,
.klar-c2-form-panel .klar24-contact-form__textarea {
background: rgba(255, 255, 255, 0.055) !important;
border: 1px solid rgba(213, 215, 218, 0.12) !important;
border-radius: 8px !important;
padding: 0.65rem 0.85rem !important;
font-size: 0.85rem !important;
color: var(--wp--preset--color--pearl) !important;
font-family: inherit !important;
width: 100% !important;
transition: border-color 0.2s ease, background 0.2s ease;
}
.klar-c2-form-panel .klar24-contact-form__input:focus,
.klar-c2-form-panel .klar24-contact-form__select:focus,
.klar-c2-form-panel .klar24-contact-form__textarea:focus {
outline: none !important;
border-color: var(--wp--preset--color--amber) !important;
background: rgba(255, 255, 255, 0.07) !important;
}
/* Keyboard-visible focus ring — the :focus rule above only changes the
border color, which alone doesn't meet the WCAG 2.2 SC 2.4.7 / 2.4.11
requirement for a clearly visible, non-text-contrast focus indicator. */
.klar-c2-form-panel .klar24-contact-form__input:focus-visible,
.klar-c2-form-panel .klar24-contact-form__select:focus-visible,
.klar-c2-form-panel .klar24-contact-form__textarea:focus-visible {
outline: 2px solid var(--wp--preset--color--amber) !important;
outline-offset: 2px !important;
}
.klar-c2-form-panel .klar24-contact-form__input::placeholder,
.klar-c2-form-panel .klar24-contact-form__textarea::placeholder {
color: rgba(232, 228, 220, 0.4) !important;
}
.klar-c2-form-panel .klar24-contact-form__textarea {
min-height: 110px !important;
resize: vertical !important;
}
.klar-c2-form-panel .klar24-contact-form__footer {
margin: 1.1rem 0 0 !important;
padding: 0 !important;
border: none !important;
display: flex !important;
align-items: center !important;
}
.klar-c2-form-panel .klar24-contact-form__submit {
background: var(--wp--preset--color--amber) !important;
color: var(--wp--preset--color--abyss) !important;
border: none !important;
border-radius: 100px !important;
padding: 0.75rem 1.75rem !important;
font-size: 0.68rem !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
cursor: pointer;
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.klar-c2-form-panel .klar24-contact-form__submit:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(176, 141, 87, 0.25);
}
/* Trust row */
.klar-c2-trust-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid rgba(213, 215, 218, 0.07);
}
.klar-c2-trust-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.7rem;
color: rgba(232, 228, 220, 0.55);
white-space: nowrap;
}
.klar-c2-trust-check {
width: 14px; height: 14px;
border: 1.5px solid var(--wp--preset--color--amber);
border-radius: 3px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--wp--preset--color--amber);
flex-shrink: 0;
}
.klar-c2-trust-check svg { width: 9px; height: 9px; display: block; }
/* RTL adjustments for Arabic contact section */
.klar-c2-section.is-rtl .klar-c2-info-row,
.klar-c2-section.is-rtl .klar-c2-social-card { text-align: right; }
.klar-c2-section.is-rtl .klar-c2-info-text,
.klar-c2-section.is-rtl .klar-c2-social-text { text-align: right; }
.klar-c2-section.is-rtl .klar-c2-form-panel .klar24-contact-form__submit svg {
transform: scaleX(-1);
}
/* ==========================================================================
HOME PAGE REFINEMENTS — v2.1.4
Issues addressed:
1. Dark strip above header (blockGap on .wp-site-blocks)
2. Founder section spacing improvements
3. Leistungen im Detail background colour correction
4. Full home page visual audit fixes
========================================================================== */
/* --------------------------------------------------------------------------
1. DARK STRIP ABOVE HEADER — ROOT CAUSE FIX
The global theme.json blockGap (var:preset|spacing|40) is inherited by
.wp-site-blocks, creating a gap between