/* ============================================================
kabiri-design.css — design-token foundation (Stage A)
------------------------------------------------------------
Approved direction: "סגול וחום" — the soft plum ramp (heritage
#5a2e6f) is the ONLY brand/action color; warm cream/sand
neutrals replace cold white. Navy is NOT a structural color.
Hexes and type scale taken 1:1 from
design-proposals/visual-mockup.html (the style tile).
LOAD ORDER: this file must be the LAST stylesheet in ,
after style.css / skins/purple.css / custom-site-css.css, so
equal-specificity overrides here win by source order.
FONT LOADING: Frank Ruhl Libre is loaded via a Google Fonts
tag added per page (NOT @import here). @import inside
a stylesheet serializes discovery: the browser must download
and parse this CSS before it even learns the font URL, which
delays first paint. A in lets the preload
scanner fetch the font CSS in parallel. Every page therefore
carries:
NAMESPACE: every new class is kb- prefixed to avoid collisions
with Bootstrap 3 and legacy code. The mockup's "plum-*" token
names are exposed both as --kb-purple-* (canonical, used
below) and --kb-plum-* (aliases matching the mockup naming).
UNITS: Bootstrap 3 sets html{font-size:10px}, so 1rem = 10px
site-wide; all rem values below match the mockup spec, which
assumed exactly that (its 62.5% base = the same 10px).
ACCESSIBILITY CONTRACT (do not break):
- The font-size buttons (.incfont/.decfont in
js/accessibillity-js.js) set INLINE font-size on
h1/h3/p/span/a/div etc. Inline styles beat any clamp()/rem
rule here, so the buttons keep working on every kb-
component. For that reason font-size is never !important
in this file.
- The contrast toggle adds .contrastDone to wrapper elements
(and, via $("div.changeContrast").find("div"), to every div
inside a .changeContrast wrapper). The contrast section at
the bottom therefore keys every rule off BOTH an ancestor
.contrastDone AND a direct .kb-*.contrastDone, following
the press-page (page25) pattern. .changeContrast itself is
a permanent JS marker and is NEVER used as a styling hook.
============================================================ */
/* ------------------------------------------------------------
1. Design tokens
------------------------------------------------------------ */
:root {
/* plum ramp (heritage #5a2e6f, softened) — canonical names */
--kb-purple-950: #241130;
--kb-purple-900: #2a1238; /* heading ink, matches press page */
--kb-purple-800: #402051;
--kb-purple-700: #5a2e6f; /* brand anchor: buttons, links, logo */
--kb-purple-600: #6f4287; /* hover / active */
--kb-purple-500: #8a5fa4; /* secondary links, decorative strokes */
--kb-purple-300: #c9b3d8; /* borders, dividers */
--kb-purple-100: #ece2f2; /* tint chips, icon tiles */
--kb-purple-50: #f7f3fa; /* section band (replaces #f7f7f7) */
/* aliases matching the mockup's plum-* naming */
--kb-plum-950: var(--kb-purple-950);
--kb-plum-900: var(--kb-purple-900);
--kb-plum-800: var(--kb-purple-800);
--kb-plum-700: var(--kb-purple-700);
--kb-plum-600: var(--kb-purple-600);
--kb-plum-500: var(--kb-purple-500);
--kb-plum-300: var(--kb-purple-300);
--kb-plum-100: var(--kb-purple-100);
--kb-plum-50: var(--kb-purple-50);
/* warm neutrals */
--kb-cream-0: #fdfbf9; /* page background (replaces pure white) */
--kb-sand-50: #f7f1ea; /* warm alternate band */
--kb-sand-200: #eadfd3; /* border on warm band */
/* ink + grays (warm-toned) */
--kb-ink-900: #322b38;
--kb-gray-700: #4a4550; /* body text */
--kb-gray-500: #7a7482; /* meta, captions */
/* warm accent, sparingly */
--kb-rose-500: #b05f6d; /* quote marks, small highlights, never body text */
--kb-rose-100: #f7e4e4;
/* functional */
--kb-green-600: #1f9d61; /* success, WhatsApp harmonized */
--kb-focus: #8a5fa4; /* focus ring */
/* elevation + shape (עדשה 3 פריט 6 — exact values) */
--kb-shadow-card: 0 8px 24px rgba(90, 46, 111, .08);
--kb-shadow-card-hover: 0 14px 32px rgba(90, 46, 111, .14);
--kb-radius-card: 16px;
--kb-radius-sm: 8px;
--kb-radius-pill: 999px;
/* spacing scale (px; 4-based) */
--kb-space-1: 4px;
--kb-space-2: 8px;
--kb-space-3: 12px;
--kb-space-4: 16px;
--kb-space-5: 24px;
--kb-space-6: 32px;
--kb-space-7: 48px;
--kb-space-8: 64px;
/* type */
/* Client feedback (21.7.2026): serif felt unfriendly — headings use
Assistant like the body, differentiated by weight and color. */
--kb-font-display: 'Assistant', 'Arial Hebrew', Arial, sans-serif;
--kb-font-body: 'Assistant', 'Arial Hebrew', Arial, sans-serif;
}
/* ------------------------------------------------------------
2. Warm page background
------------------------------------------------------------
Replaces the legacy body texture (img/bg/bg12.png) and cold
white with warm cream. Shorthand `background` is intentional:
it clears the legacy background-image. Existing white content
cards (#fff surfaces) sit on the cream with a subtle, warm
difference — verified deliberate per the mockup. */
body {
background: var(--kb-cream-0);
}
/* ------------------------------------------------------------
3. Page-title band bridge (no navy as structural color)
------------------------------------------------------------
.colorarea appears exactly once per subpage: the band behind
.pgheadertitle (checked across all pages). The skin painted
it navy #1d3552; the approved decision removes navy, and the
serif purple-900 title below needs a light band to stay
legible. Flat background-color only (no gradient image), so
the accessibility rule `.contrastDone{background-color:black
!important}` still blacks it out completely in contrast mode. */
.colorarea {
background-color: var(--kb-purple-50);
border-bottom: 1px solid var(--kb-purple-100);
}
/* breadcrumb strip under the title sat white-on-navy; re-ink it */
.pagedescrarea,
.pagedescrarea a {
color: var(--kb-purple-800);
}
/* ------------------------------------------------------------
4. Typography
------------------------------------------------------------
Body stays Assistant (untouched). Headings inside kb-
components and the global page title move to the Hebrew serif.
NOTE: style.css declares `h1..h6{font-family:'Assistant'
!important}`, so font-family here must also be !important to
win by source order. font-size stays non-!important so the
accessibility font-size buttons (inline styles) keep working. */
/* global page-heading upgrade */
.pgheadertitle {
font-family: var(--kb-font-display) !important;
font-weight: 700;
font-size: clamp(3rem, 5vw, 4.2rem); /* 30–42px, was fixed 33px */
line-height: 1.2;
color: var(--kb-purple-900);
}
/* serif for headings inside any kb- component */
[class*="kb-"] h1,
[class*="kb-"] h2,
[class*="kb-"] h3 {
font-family: var(--kb-font-display) !important;
color: var(--kb-purple-900);
}
/* type-scale helpers (values from the style tile) */
.kb-display {
font-family: var(--kb-font-display) !important;
font-weight: 700;
font-size: clamp(3.4rem, 6vw, 4.6rem);
line-height: 1.18;
color: var(--kb-purple-900);
}
.kb-h2 {
font-family: var(--kb-font-display) !important;
font-weight: 500;
font-size: 2.9rem;
line-height: 1.3;
color: var(--kb-purple-900);
}
.kb-h3 {
font-family: var(--kb-font-body) !important; /* card-level titles stay Assistant per the style tile */
font-weight: 700;
font-size: 2rem;
line-height: 1.4;
color: var(--kb-ink-900);
}
.kb-lead {
font-size: 1.9rem;
line-height: 1.7;
color: var(--kb-gray-700);
}
.kb-body {
font-size: 1.7rem;
line-height: 1.75;
color: var(--kb-gray-700);
}
.kb-meta {
font-size: 1.4rem;
font-weight: 600;
color: var(--kb-gray-500);
}
/* ------------------------------------------------------------
5. Global focus-visible ring
------------------------------------------------------------
:focus-visible only — mouse clicks stay ring-free, keyboard
users get a clear purple ring. Scoped to interactive elements
so legacy layout is untouched. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--kb-focus);
outline-offset: 2px;
}
/* ------------------------------------------------------------
6. Button system (.kb-btn)
------------------------------------------------------------
One class, 48px touch target, RTL-safe via logical properties
and flex gap (no directional margins). */
.kb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--kb-space-2);
min-height: 48px;
padding-block: 12px;
padding-inline: 26px;
font-family: var(--kb-font-body);
font-size: 1.6rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
border: 1.5px solid transparent;
border-radius: var(--kb-radius-pill);
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease,
box-shadow .15s ease, transform .15s ease;
-webkit-tap-highlight-color: transparent;
}
.kb-btn:hover,
.kb-btn:focus {
text-decoration: none;
}
.kb-btn:active {
transform: translateY(1px);
}
.kb-btn:focus-visible {
outline: 3px solid var(--kb-focus);
outline-offset: 2px;
}
.kb-btn svg {
width: 17px;
height: 17px;
flex: 0 0 auto;
}
.kb-btn[disabled],
.kb-btn.kb-is-disabled {
opacity: .55;
pointer-events: none;
}
/* primary: filled plum */
.kb-btn--primary {
background-color: var(--kb-purple-700);
color: #fff;
}
.kb-btn--primary:hover,
.kb-btn--primary:focus {
background-color: var(--kb-purple-600);
color: #fff;
box-shadow: 0 6px 16px rgba(90, 46, 111, .28);
}
/* secondary: outline */
.kb-btn--secondary {
background-color: transparent;
color: var(--kb-purple-700);
border-color: var(--kb-purple-300);
}
.kb-btn--secondary:hover,
.kb-btn--secondary:focus {
background-color: var(--kb-purple-50);
border-color: var(--kb-purple-500);
color: var(--kb-purple-800);
}
/* quiet: text-only */
.kb-btn--quiet {
background-color: transparent;
color: var(--kb-purple-700);
border-color: transparent;
}
.kb-btn--quiet:hover,
.kb-btn--quiet:focus {
background-color: var(--kb-purple-50);
color: var(--kb-purple-800);
}
/* ------------------------------------------------------------
7. Card language (.kb-card)
------------------------------------------------------------
One surface for specialty / article / testimonial cards
(עדשה 3 פריט 6 — exact radius, border and plum-tinted shadow). */
.kb-card {
background-color: #fff;
border: 1px solid var(--kb-purple-100);
border-radius: var(--kb-radius-card);
box-shadow: var(--kb-shadow-card);
padding: 26px 24px 22px;
transition: box-shadow .15s ease, transform .15s ease;
}
.kb-card:hover {
box-shadow: var(--kb-shadow-card-hover);
transform: translateY(-3px);
}
.kb-card h3 {
font-family: var(--kb-font-body) !important; /* per style tile: card titles are Assistant */
font-size: 1.85rem;
font-weight: 700;
line-height: 1.4;
color: var(--kb-ink-900);
margin: 0 0 6px;
}
.kb-card p {
font-size: 1.5rem;
line-height: 1.65;
color: var(--kb-gray-500);
}
/* ------------------------------------------------------------
8. Reduced motion (עדשה 2 פריט 9 — targeted, not global)
------------------------------------------------------------
Scoped so legacy sliders (flexslider / wowslider) on other
pages are NOT broken: only kb- components and the animate.css
entrance effects (which end at the element's natural state)
are damped. */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
[class*="kb-"],
[class*="kb-"]::before,
[class*="kb-"]::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.kb-btn:active,
.kb-card:hover {
transform: none;
}
/* animate.css entrance effects: elements simply render in place */
.animated {
animation: none !important;
}
}
/* ------------------------------------------------------------
9. High-contrast mode (.contrastDone) mappings
------------------------------------------------------------
Black background / yellow (#ff0) text, following the
press-page (page25) pattern. Every rule is keyed off BOTH:
(a) an ancestor wrapper that received .contrastDone from
js/accessibillity-js.js, and
(b) the component itself carrying .contrastDone directly
(the script adds it to every div inside a .changeContrast
wrapper, so kb- divs can receive it directly).
.changeContrast is a permanent JS marker — never used here. */
/* buttons */
.contrastDone .kb-btn,
.kb-btn.contrastDone {
background-color: #000 !important;
background-image: none !important;
color: #ff0 !important;
border-color: #ff0 !important;
box-shadow: none !important;
}
.contrastDone .kb-btn:hover,
.contrastDone .kb-btn:focus,
.kb-btn.contrastDone:hover,
.kb-btn.contrastDone:focus {
background-color: #000 !important;
color: #ff0 !important;
border-color: #fff !important;
}
.contrastDone .kb-btn:focus-visible,
.kb-btn.contrastDone:focus-visible {
outline-color: #ff0 !important;
}
.contrastDone .kb-btn svg,
.kb-btn.contrastDone svg {
color: #ff0 !important;
fill: currentColor;
}
/* cards */
.contrastDone .kb-card,
.kb-card.contrastDone {
background-color: #000 !important;
background-image: none !important;
border-color: #ff0 !important;
box-shadow: none !important;
}
.contrastDone .kb-card h1,
.contrastDone .kb-card h2,
.contrastDone .kb-card h3,
.contrastDone .kb-card h4,
.contrastDone .kb-card p,
.contrastDone .kb-card span,
.contrastDone .kb-card a,
.contrastDone .kb-card blockquote,
.contrastDone .kb-card footer,
.kb-card.contrastDone h1,
.kb-card.contrastDone h2,
.kb-card.contrastDone h3,
.kb-card.contrastDone h4,
.kb-card.contrastDone p,
.kb-card.contrastDone span,
.kb-card.contrastDone a,
.kb-card.contrastDone blockquote,
.kb-card.contrastDone footer {
color: #ff0 !important;
background: transparent !important;
}
/* type helpers */
.contrastDone .kb-display,
.contrastDone .kb-h2,
.contrastDone .kb-h3,
.contrastDone .kb-lead,
.contrastDone .kb-body,
.contrastDone .kb-meta,
.kb-display.contrastDone,
.kb-h2.contrastDone,
.kb-h3.contrastDone,
.kb-lead.contrastDone,
.kb-body.contrastDone,
.kb-meta.contrastDone {
color: #ff0 !important;
background: transparent !important;
}
/* page title + breadcrumb over the (now black) .colorarea band.
The h1 lives in the .container that FOLLOWS the band section
and overlaps it via .negmtop, so it never receives
.contrastDone itself — key off the sibling band instead. */
.colorarea.contrastDone ~ .container .pgheadertitle,
.contrastDone .pgheadertitle,
.pgheadertitle.contrastDone {
color: #ff0 !important;
}
.colorarea.contrastDone ~ .container .pagedescrarea,
.colorarea.contrastDone ~ .container .pagedescrarea a,
.contrastDone .pagedescrarea,
.contrastDone .pagedescrarea a {
color: #ff0 !important;
}
/* ------------------------------------------------------------
10. Contact form (.kb-form) — Stage C, עדשה 2 פריט 8
------------------------------------------------------------
Markup contract (צור_קשר/index.html): each field sits inside
with a visible