)
ran its text the full container width — ~180 characters a line at 1440px.
Hold plain articles to a ~70-character measure, centred. Builder pages
(.is-container) lay out their own columns and are left alone. */
/* Only prose gets the narrow measure. Content that brings its own layout — a
Bootstrap grid, a form, a table, an embed — keeps the full container, or a
two-column page (form + contact details) is crushed into 736px. */
/* 48rem, not 46: at 46 a typical section heading ("חלק שני – תכנון המס בפרישה
וניצול אופטימלי של הטבות המס:", 754px at the h2 size) missed one line by 18px. */
article > .cms-content:not(.is-container):not(:has(.row, form, table, iframe)) { max-width: 88%; margin-inline: auto; }
/* Heading utility classes win over the content scale: `` asks for
an h4-sized heading on purpose (the form widget's title does), but
`.cms-content h2` outranked Bootstrap's `.h4`. */
.cms-content .h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem); }
.cms-content .h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.cms-content .h3 { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); }
.cms-content .h4 { font-size: 1.375rem; margin-top: 0; }
.cms-content .h5 { font-size: 1.125rem; margin-top: 0; }
.cms-content .h6 { font-size: 1rem; margin-top: 0; }
/* Narrow side columns in imported content (col-*-3 / col-*-4 beside a main
column) hold contact details, hours and addresses — but the legacy markup
sets every line as an
… siblings,
so half a list rendered at 38px. A heading inside a list item is just
list text: it takes the item's size and spacing, bolded the way the siblings'
is (the rule below keeps an inner from going heavier). */
.cms-content li > :is(h1, h2, h3, h4, h5, h6) {
font: inherit; font-weight: bolder; color: inherit; letter-spacing: inherit; text-wrap: inherit;
margin: 0;
}
/* Link-list items (a document link per , bare or wrapped in /)
run 30% smaller with a tight gap — they're an index to scan, not prose.
Imported pages also split one list into several
` asks for
an h4-sized heading on purpose (the form widget's title does), but
`.cms-content h2` outranked Bootstrap's `.h4`. */
.cms-content .h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem); }
.cms-content .h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.cms-content .h3 { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); }
.cms-content .h4 { font-size: 1.375rem; margin-top: 0; }
.cms-content .h5 { font-size: 1.125rem; margin-top: 0; }
.cms-content .h6 { font-size: 1rem; margin-top: 0; }
/* Narrow side columns in imported content (col-*-3 / col-*-4 beside a main
column) hold contact details, hours and addresses — but the legacy markup
sets every line as an , so at heading size a ~250px column broke
"טלפון: 03-6026859" across three lines. Inside such a column headings are
read as an info card: body-sized lines on a soft brand tile, with the empty
spacers turned into quiet group dividers. */ /* The tile is drawn by ::before, inset by the grid gutter: painting the column's own background would fill its gutter padding too and run past the page edge (the row's negative margins) on phones. */ .cms-content .row > :is(.col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-3, .col-lg-4):has(> h2, > h3) { --hm-gx: calc(var(--bs-gutter-x, 1.5rem) * .5); position: relative; isolation: isolate; align-self: flex-start; padding: 1.5rem calc(var(--hm-gx) + 1.25rem) 1.25rem; margin-block: 1.5rem; } .cms-content .row > :is(.col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-3, .col-lg-4):has(> h2, > h3)::before { content: ""; position: absolute; inset: 0 var(--hm-gx); z-index: -1; background: var(--hm-tile); border-radius: var(--hm-r-lg); } .cms-content .row > :is(.col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-3, .col-lg-4) > :is(h2, h3, h4) { font-size: 1rem; font-weight: 600; line-height: 1.55; letter-spacing: 0; color: var(--hm-fg); margin: 0 0 .2rem; text-wrap: pretty; } /* Blank spacer paragraphs (
, tagged .hm-blank by _Layout's script — CSS alone can't tell from text). In prose they shrink to a modest gap; inside an info card they become a hairline between groups. */ .cms-content p.hm-blank { margin: 0; height: .75rem; } .cms-content .row > :is(.col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-3, .col-lg-4) > p.hm-blank { height: 0; margin: .7rem 0; border-top: 1px solid var(--hm-brand-100); overflow: hidden; } .cms-content .row > :is(.col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-3, .col-lg-4) > p.hm-blank:last-child { display: none; } /* Forms inside content (the CMS form widget): labels centred on their fields. */ .cms-content .wc-contact-form .col-form-label { padding-block: 0 .35rem; line-height: 1.4; } @media (min-width: 576px) { /* side-by-side: centre on the 2.9rem field */ .cms-content .wc-contact-form .col-form-label { padding-block: .75rem; } } .cms-content .wc-contact-form .h4 { margin-bottom: 1.25rem !important; } /* Contact layout — a form column beside a details card (צור קשר: col-md-9 form + col-md-3 card). The form widget stops at 640px, so a 9/12 column left ~340px of empty space between it and the card. The form column now shrinks to the form and the card sits right beside it; the blank spacer above and the form's own my-4 margin go, so the form starts under the title. */ .cms-content > p.hm-blank:has(+ .row .wc-contact-form) { display: none; } .cms-content [class*="col-"] > .wc-contact-form { margin-block: 0 !important; } @media (min-width: 992px) { .cms-content .row:has(> [class*="col-"] > .wc-contact-form) { --bs-gutter-x: 3rem; align-items: flex-start; } .cms-content .row > [class*="col-"]:has(> .wc-contact-form) { flex: 0 1 auto; width: calc(640px + var(--bs-gutter-x)); max-width: 70%; } .cms-content .row:has(> [class*="col-"] > .wc-contact-form) > :is(.col-md-3, .col-md-4) { margin-block: 0; } } /* Below that the card was a ~190px sliver that broke the phone numbers mid-digit: stack it under the form instead, at the form's width. */ @media (max-width: 991.98px) { .cms-content .row:has(> [class*="col-"] > .wc-contact-form) > [class*="col-"] { flex: 0 0 auto; width: 100%; max-width: calc(640px + var(--bs-gutter-x, 1.5rem)); } } .cms-content .wc-contact-form .btn { min-height: 2.9rem; padding-inline: 1.75rem; } .cms-content p { margin-bottom: 1.1em; } .cms-content ul, .cms-content ol { padding-inline-start: 1.4em; } .cms-content li { margin-bottom: .4em; } .cms-content li::marker, .cms-homepage-content li::marker { color: var(--hm-brand-400); } .cms-content h1, .cms-content h2, .cms-content h3, .cms-content h4, .cms-homepage-content :is(h1, h2, h3, h4), .lp-content h2, .lp-content h3 { color: var(--hm-fg); } /* Content heading scale — sized for a reading page, not a hero, on a ~1.3 ratio over the 17px body: h1 28→38 · h2 22→28 · h3 19→22 · h4 18. (The global h1 scale, up to 52px, stays for heroes and landing titles.) */ .cms-content h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem); font-weight: 700; line-height: 1.2; margin-top: 0; margin-bottom: 1rem; } .cms-content h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); line-height: 1.3; margin-top: 2.25rem; margin-bottom: .75rem; } .cms-content h3 { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); line-height: 1.35; margin-top: 1.75rem; margin-bottom: .5rem; } .cms-content h4 { font-size: 1.125rem; line-height: 1.4; margin-top: 1.5rem; margin-bottom: .5rem; } /* Imported pages often use a second
as a section heading. Only the first reads as the page title; later ones take the section (h2) size. */ .cms-content h1 ~ h1 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); line-height: 1.3; margin-top: 2.25rem; margin-bottom: .75rem; } /* Imported link lists wrap some items in a heading —
…
)
run 30% smaller with a tight gap — they're an index to scan, not prose.
Imported pages also split one list into several s with an empty
between them; the blank collapses and the lists close up to the item gap. */
.cms-content { --hm-linklist-fs: .74375rem; --hm-linklist-gap: .15em; } /* 70% of the 17px body */
.cms-content li:has(> a, > :is(strong, b) > a, > :is(h1, h2, h3, h4, h5, h6) a) {
font-size: var(--hm-linklist-fs); margin-bottom: var(--hm-linklist-gap);
}
.cms-content :is(ul, ol):has(+ :is(ul, ol), + p.hm-blank + :is(ul, ol)) { margin-bottom: var(--hm-linklist-gap); }
.cms-content :is(ul, ol) + p.hm-blank:has(+ :is(ul, ol)) { display: none; }
/* Hub pages build the same index from sibling headings instead of a list —
מס הכנסה - description
× N under the page title. A heading
that opens with a link is one of those items: it takes the list item's size,
weight, gap and circle bullet, so every index page reads alike. */
.cms-content :is(h1, h2, h3, h4, h5, h6):not(li > *):has(> a:first-child, > :is(strong, b):first-child > a:first-child) {
display: list-item; list-style: circle outside; margin: 0 0 var(--hm-linklist-gap); margin-inline-start: 1.4em;
font-size: 1.0625rem; font-weight: 700; line-height: inherit; letter-spacing: normal; /* body size, like link-list - s */
color: var(--hm-fg-2);
}
.cms-content :is(h1, h2, h3, h4, h5, h6):not(li > *):has(> a:first-child, > :is(strong, b):first-child > a:first-child)::marker { color: var(--hm-brand-400); }
/* One compact scale for every imported page (builder pages, .is-container, keep
their own designed sections). Prose, links and list items all share the
link-list size, so an article, an index and a hub page read as one site:
title 22 · section 16 · sub 14 · minor 13 · text ~12, with gaps to match. */
.cms-content:not(.is-container) { font-size: var(--hm-linklist-fs); line-height: 1.75; }
.cms-content:not(.is-container) p { line-height: inherit; margin-bottom: .6em; }
/* …except paragraphs and link-list items, which read at the body size the homepage uses
(17px). A
inside a list item stays with its list. rem, not em, so nested lists
don't compound. */
.cms-content:not(.is-container) p:not(li p),
.cms-content:not(.is-container) li:has(a) { font-size: 1.0625rem; }
.cms-content:not(.is-container) p.hm-blank { height: .4rem; }
.cms-content:not(.is-container) li { margin-bottom: var(--hm-linklist-gap); }
.cms-content:not(.is-container) h1:not(li > *) { font-size: 1.375rem; line-height: 1.25; margin: 0 0 .75rem; }
.cms-content:not(.is-container) :is(h1 ~ h1, h2):not(li > *) { font-size: 1rem; line-height: 1.35; margin: 1.25rem 0 .4rem; }
.cms-content:not(.is-container) h3:not(li > *) { font-size: .875rem; line-height: 1.4; margin: 1rem 0 .35rem; }
.cms-content:not(.is-container) :is(h4, h5, h6):not(li > *) { font-size: .8125rem; line-height: 1.4; margin: .9rem 0 .3rem; }
/* Info-card lines (phone, hours, address) read at the body size, like paragraphs. */
.cms-content:not(.is-container) .row > :is(.col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-3, .col-lg-4) > :is(h2, h3, h4) { font-size: 1.0625rem; }
.cms-content:not(.is-container) blockquote { font-size: .9375rem; margin-block: 1.25rem; }
/* Imported headings carry the old site's inline decoration —
…
.
An underline on a heading reads as a link (and here ran on past the text onto
a trailing ), and inside an already-bold heading jumped Heebo
to its heaviest weight. Headings take their look from the theme instead. */
.cms-content :is(h1, h2, h3, h4, h5, h6) :is([style*="underline"], u) { text-decoration: none !important; }
.cms-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; }
/* …and inline `text-align: justify`, which on a two-line heading stretched the
first line into four words spread across the column. Headings sit flush to
the reading edge like every other page's. */
.cms-content :is(h1, h2, h3, h4, h5, h6)[style*="justify"] { text-align: start !important; }
:is(.cms-content, .cms-homepage-content) :is(h1, h2, h3, h4, h5, h6) a { text-decoration: none; }
:is(.cms-content, .cms-homepage-content) :is(h1, h2, h3, h4, h5, h6) a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
:is(.cms-content, .cms-homepage-content) :is(p, li) { color: var(--hm-fg-2); }
/* Content links: the brand navy (#31466A) sat at 1.2:1 against the #2F3A4D body text, so
links read as plain text. A clear blue (6.4:1 on white — AA even at the 12px content size)
plus a light underline marks them; colour alone is too close to the text (1.8:1) for
readers who can't tell the hues apart. Hover darkens it and makes the underline solid.
.btn links keep their button look. */
.cms-content, .cms-homepage-content { --hm-content-link: #0B57D0; --hm-content-link-hover: #0842A0; }
:is(.cms-content, .cms-homepage-content) a:not(.btn) {
color: var(--hm-content-link);
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
text-decoration-color: color-mix(in srgb, var(--hm-content-link) 35%, transparent);
transition: color .15s linear, text-decoration-color .15s linear;
}
:is(.cms-content, .cms-homepage-content) a:not(.btn):is(:hover, :focus-visible) {
color: var(--hm-content-link-hover); text-decoration-color: currentColor;
}
.cms-content blockquote {
border: 0; border-inline-start: 3px solid var(--hm-brand-700); margin-block: 2rem; padding-inline-start: 1.25rem;
font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.4; font-weight: 600;
letter-spacing: -.01em; color: var(--hm-fg);
}
.cms-content code { background: var(--hm-tile); color: var(--hm-brand-900); border-radius: 6px; padding: .1em .35em; font-size: .9em; }
.cms-content pre { background: var(--hm-tile); color: var(--hm-brand-900); border-radius: var(--hm-r-md); padding: 1rem 1.25rem; }
.cms-content img, .lp-content img { border-radius: var(--hm-r-lg); }
.cms-content figcaption { color: var(--hm-muted); font-size: .875rem; margin-top: .5rem; }
/* Landing hero (page view): quiet tile band, big tight headline */
.lp-hero { padding: clamp(4rem, 9vw, 7rem) 1rem clamp(3rem, 7vw, 5rem) !important; }
.lp-hero h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem) !important; font-weight: 700 !important; letter-spacing: -.03em !important; line-height: 1.05; }
[dir="rtl"] .lp-hero h1 { letter-spacing: -.01em !important; }
.lp-hero p.lead { color: var(--hm-muted); opacity: 1; }
/* ── 10. Hero slider (.cd-hero) ─────────────────────────────────────────── */
.cd-hero, .cd-hero__slider, .cd-hero__slide { background-color: var(--hm-tile) !important; }
.cd-hero__slide { color: var(--hm-fg); }
.cd-hero__content h2, .cd-hero .cd-hero__content h2 {
color: var(--hm-brand-900) !important; font-weight: 700 !important; letter-spacing: -.025em; text-shadow: none !important;
}
.cd-hero__content p, .cd-hero .cd-hero__content p { color: var(--hm-muted) !important; text-shadow: none !important; }
.cd-hero .btn-get-started {
background: var(--hm-accent) !important; color: #fff !important; border: 0 !important;
border-radius: var(--hm-r-pill) !important; transition: background-color var(--hm-dur-fast) var(--hm-ease-out), scale var(--hm-dur) var(--hm-spring);
}
.cd-hero .btn-get-started:hover { background: var(--hm-accent-hover) !important; }
.cd-hero .btn-get-started:active { scale: .97; transition-duration: var(--hm-press); }
.cd-hero__nav nav ul li a { color: var(--hm-muted) !important; }
.cd-hero__nav nav ul li.cd-selected a { color: var(--hm-fg) !important; }
/* ── 11. Footer — brand, two-tone ───────────────────────────────────────────
A consultancy-style footer in the brand navy: the CTA band sits on the
brand colour itself (700) and the directory + legal bar on the deeper 900,
so the step in tone does the work of a divider. Text tiers (measured):
on 700 titles #fff 9.5:1 · text white 78% 6.5:1
on 900 titles #fff 14.4:1 · text white 74% 8.6:1 · links white 66% 7.1:1 */
footer, .hm-footer { background: var(--hm-brand-900) !important; }
.hm-footer {
--hm-f-fg: #FFFFFF;
--hm-f-text: rgba(255,255,255,.74);
--hm-f-dim: rgba(255,255,255,.66);
--hm-f-line: rgba(255,255,255,.12);
--hm-f-chip: rgba(255,255,255,.07);
--hm-f-chip-b: rgba(255,255,255,.16);
/* Size scale — one ratio for every element so the footer reads as a quiet
coda to the page, not a second hero. 15px text, 16px titles, controls
on a 44px touch height, spacing on an 8px rhythm. */
--hm-f-ctrl: 2.75rem; /* 44px — buttons, search field */
--hm-f-chip-s: 2rem; /* 32px — social chips */
--hm-f-gap: clamp(2.5rem, 4.5vw, 3.5rem); /* band padding, 40→56px */
color: var(--hm-f-text); font-size: .9375rem; line-height: 1.6;
overflow: hidden;
}
/* Without the CTA band the directory needs its own top breathing room. */
.hm-footer > .container:first-child .hm-fgrid { padding-top: var(--hm-f-gap); }
.hm-footer a { color: var(--hm-f-dim); text-decoration: none; transition: color .2s linear; }
.hm-footer a:hover, .hm-footer a:focus-visible { color: var(--hm-f-fg); text-decoration: none; }
.hm-frule { margin: 0; border: 0; border-top: 1px solid var(--hm-f-line); opacity: 1; }
/* Pill buttons. Hover inverts to white-on-dark like the original; press uses
the theme's instant scale feedback. */
.hm-footer .hm-fbtn {
display: inline-flex; align-items: center; gap: .45rem; min-height: var(--hm-f-ctrl);
padding: .65rem 1.4rem; border-radius: var(--hm-r-pill);
background: #fff; border: 1px solid #fff; color: var(--hm-brand-800);
font-size: .9375rem; font-weight: 600; line-height: 1;
transition: background-color .2s linear, border-color .2s linear, color .2s linear, scale var(--hm-dur) var(--hm-spring);
}
/* !important only on colour: _Head forces `footer a:hover, footer a:focus
{ color: #fff !important }` on every template, which would put white text on
this white hover fill. Higher specificity wins the !important tie. */
.hm-footer .hm-fbtn:hover, .hm-footer .hm-fbtn:focus-visible { background: var(--hm-brand-100); border-color: var(--hm-brand-100); color: var(--hm-brand-900) !important; }
.hm-footer .hm-fbtn:focus:not(:hover):not(:focus-visible) { color: var(--hm-brand-800) !important; }
.hm-footer .hm-fbtn:active { scale: .97; transition-duration: var(--hm-press); }
.hm-footer .hm-fbtn--ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.hm-footer .hm-fbtn--ghost:focus:not(:hover):not(:focus-visible) { color: #fff !important; }
.hm-footer .hm-fbtn--ghost:hover, .hm-footer .hm-fbtn--ghost:focus-visible { background: #fff; border-color: #fff; color: var(--hm-brand-800) !important; }
/* 1. CTA band — on the brand colour itself */
.hm-fcta { background: var(--hm-brand-700); padding-top: var(--hm-f-gap); --hm-f-text: rgba(255,255,255,.78); }
.hm-fcta + .container:has(> .hm-frule) { display: none; } /* the tone change is the divider */
.hm-fcta__inner {
position: relative; display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
align-items: center; gap: 2rem; padding-bottom: var(--hm-f-gap);
}
.hm-fcta__title {
color: var(--hm-f-fg); font-weight: 700; margin: 0 0 .75rem;
font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem); line-height: 1.2; letter-spacing: -.02em;
}
[dir="rtl"] .hm-fcta__title { letter-spacing: -.01em; }
.hm-fcta__text { color: var(--hm-f-text); font-size: 1rem; line-height: 1.65; margin: 0 0 1.5rem; max-width: 52ch; }
.hm-fcta__actions { display: flex; flex-wrap: wrap; gap: .625rem; }
/* Decorative dot-matrix world map: a dot grid shown through overlapping soft
ellipses roughly where the continents sit, with a location pin over Israel.
Pure CSS, no image. Positions are physical (left/top), not logical — a map
doesn't mirror in RTL, so the pin mustn't either. */
.hm-fcta__map { position: relative; align-self: stretch; min-height: 12rem; width: 100%; max-width: 26rem; justify-self: end; }
.hm-fcta__map::before {
content: ""; position: absolute; inset: -1rem 0;
background: radial-gradient(circle, rgba(255,255,255,.3) 1px, transparent 1.4px) 0 0 / 7px 7px;
-webkit-mask-image: var(--hm-world);
mask-image: var(--hm-world);
}
.hm-fcta__map {
--land: #000 0 42%, transparent 100%; /* solid core, soft coastline */
--hm-world:
radial-gradient(ellipse 13% 15% at 19% 27%, var(--land)), /* North America */
radial-gradient(ellipse 9% 11% at 10% 20%, var(--land)), /* Alaska / Canada */
radial-gradient(ellipse 5% 8% at 25% 45%, var(--land)), /* Central America */
radial-gradient(ellipse 7% 16% at 31% 69%, var(--land)), /* South America */
radial-gradient(ellipse 6% 9% at 49% 23%, var(--land)), /* Europe */
radial-gradient(ellipse 8% 17% at 52% 56%, var(--land)), /* Africa */
radial-gradient(ellipse 4% 6% at 58% 39%, var(--land)), /* Middle East */
radial-gradient(ellipse 17% 14% at 72% 25%, var(--land)), /* Asia */
radial-gradient(ellipse 5% 8% at 67% 46%, var(--land)), /* India */
radial-gradient(ellipse 7% 9% at 81% 42%, var(--land)), /* East Asia */
radial-gradient(ellipse 6% 3% at 79% 60%, var(--land)), /* Indonesia */
radial-gradient(ellipse 7% 7% at 86% 75%, var(--land)); /* Australia */
}
.hm-fcta__pin { /* tip of the pin sits at ~(58%, 38%) — Israel */
position: absolute; left: calc(58% - 1rem); top: calc(38% - 2rem);
font-size: 2rem; line-height: 1; color: #fff;
filter: drop-shadow(0 6px 14px rgba(10,16,28,.45));
}
.hm-fcta__pin::after { /* soft halo where the pin touches down */
content: ""; position: absolute; left: 50%; bottom: -.25rem; width: 1.1rem; height: .32rem;
translate: -50% 0; border-radius: 50%; background: rgba(10,16,28,.45); filter: blur(3px);
}
/* 2. Directory */
.hm-fgrid {
display: grid; gap: 2rem 2.5rem;
grid-template-columns: minmax(0, 1.3fr) repeat(var(--hm-fcols, 3), minmax(0, 1fr)) minmax(0, 1.3fr);
padding-block: var(--hm-f-gap);
}
.hm-fbrand__logo {
display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
color: var(--hm-f-fg) !important; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; line-height: 1;
}
.hm-fbrand__logo img { height: 32px; width: auto; border-radius: 6px; }
.hm-fbrand__text { color: var(--hm-f-text); max-width: 34ch; margin: 0 0 1.25rem; }
.hm-fsocial { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.hm-fsocial a {
display: inline-flex; align-items: center; justify-content: center; width: var(--hm-f-chip-s); height: var(--hm-f-chip-s);
border-radius: var(--hm-r-pill); background: var(--hm-f-chip); border: 1px solid var(--hm-f-chip-b);
color: var(--hm-f-text); font-size: .8125rem;
transition: background-color .2s linear, border-color .2s linear, color .2s linear, scale var(--hm-dur) var(--hm-spring);
}
.hm-fsocial a:hover, .hm-fsocial a:focus-visible { background: #fff; border-color: #fff; color: var(--hm-brand-700) !important; }
.hm-fsocial a:active { scale: .92; transition-duration: var(--hm-press); }
/* Column titles line up with the brand name beside them (both ~1rem tall),
so the row of headings reads as one line across the grid. */
.hm-fcol__title { color: var(--hm-f-fg); font-size: 1rem; font-weight: 700; line-height: 1.25; margin: .4rem 0 1rem; }
.hm-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.hm-flist li { display: flex; align-items: baseline; gap: .55rem; line-height: 1.45; }
.hm-flist li::before { /* the 4px dot bullet; brightens with its link */
content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%;
background: currentColor; color: var(--hm-f-dim); translate: 0 -.2em; transition: color .2s linear;
}
.hm-flist li:has(a:hover, a:focus-visible)::before { color: var(--hm-f-fg); }
.hm-flist a[aria-current="page"] { color: var(--hm-f-fg); }
.hm-flist__text { color: var(--hm-f-dim); }
.hm-fsearch__text { color: var(--hm-f-text); margin: 0 0 1rem; }
.hm-fsearch__form { position: relative; }
.hm-fsearch__form input {
width: 100%; height: var(--hm-f-ctrl); padding-block: 0; padding-inline: 1.1rem 3.25rem;
border-radius: var(--hm-r-pill); background: rgba(255,255,255,.06);
border: 1px solid var(--hm-f-chip-b); color: var(--hm-f-fg); font-size: 1rem; /* 16px: no iOS focus zoom */
transition: border-color .3s linear, background-color .3s linear, box-shadow .3s linear;
-webkit-appearance: none; appearance: none;
}
.hm-fsearch__form input::placeholder { color: var(--hm-f-dim); }
.hm-fsearch__form input::-webkit-search-cancel-button { display: none; }
.hm-fsearch__form input:focus {
outline: none; border-color: var(--hm-brand-300); background: rgba(255,255,255,.09);
box-shadow: 0 0 0 4px rgba(159,176,203,.25);
}
.hm-fsearch__form button {
position: absolute; top: 50%; inset-inline-end: .25rem; translate: 0 -50%;
width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0;
background: #fff; color: var(--hm-brand-700); font-size: .9375rem;
display: inline-flex; align-items: center; justify-content: center;
transition: background-color .2s linear, scale var(--hm-dur) var(--hm-spring);
}
.hm-fsearch__form button:hover { background: var(--hm-brand-100); }
.hm-fsearch__form button:active { scale: .92; transition-duration: var(--hm-press); }
.hm-fsearch__form button .bi { transition: translate var(--hm-dur) var(--hm-spring); }
.hm-fsearch__form button:hover .bi { translate: 2px 0; } /* hint in the direction of travel */
[dir="rtl"] .hm-fsearch__form button:hover .bi { translate: -2px 0; }
/* 3. Legal bar */
.hm-flegal { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
.hm-flegal__copy { margin: 0; color: var(--hm-f-text); font-size: .875rem; }
.hm-flegal__copy strong { color: var(--hm-f-fg); font-weight: 500; }
.hm-flegal__sep { margin-inline: .5rem; color: var(--hm-f-dim); }
.hm-flegal__end { flex: none; display: flex; align-items: center; gap: 1.25rem; }
/* WideCommerce credit: the black mark, turned white for the dark footer and dimmed
like the other footer links until hovered. */
.hm-fcredit { display: inline-flex; padding: .25rem; border-radius: 8px; }
.hm-fcredit img {
display: block; width: 40px; height: auto;
filter: brightness(0) invert(1); opacity: .66; transition: opacity .2s linear;
}
.hm-fcredit:hover img, .hm-fcredit:focus-visible img { opacity: 1; }
.hm-totop {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 2.5rem; height: 2.5rem; border-radius: 12px;
background: var(--hm-f-chip); border: 1px solid var(--hm-f-chip-b); color: var(--hm-f-fg) !important; font-size: .9375rem;
transition: background-color .2s linear, translate var(--hm-dur) var(--hm-spring), scale var(--hm-dur) var(--hm-spring);
}
.hm-totop:hover, .hm-totop:focus-visible { background: rgba(255,255,255,.14); translate: 0 -3px; }
.hm-totop:active { scale: .94; transition-duration: var(--hm-press); }
/* Tablet: brand + search span the row, link columns share the middle. */
@media (max-width: 991.98px) {
.hm-fcta__inner { grid-template-columns: minmax(0, 1fr); }
.hm-fcta__map { display: none; }
.hm-fgrid { grid-template-columns: repeat(var(--hm-fcols, 3), minmax(0, 1fr)); }
.hm-fbrand, .hm-fsearch { grid-column: 1 / -1; }
}
/* Phone: two link columns per row, everything else full width. */
@media (max-width: 575.98px) {
.hm-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
.hm-fcta__title { font-size: 1.375rem; }
.hm-fcta__text { font-size: .9375rem; }
.hm-flist { gap: .75rem; } /* a little more room between tap targets on touch */
.hm-flegal { padding-block: 1rem; }
.hm-flegal__copy { font-size: .8125rem; }
.hm-flegal__sep { display: none; }
.hm-flegal__copy a { display: block; margin-top: .35rem; }
}
/* ── 12. Focus — a clear ring, never removed ───────────────────────────── */
:focus-visible { outline: 3px solid var(--hm-ring); outline-offset: 2px; }
.btn:focus-visible { outline: 3px solid var(--hm-ring); outline-offset: 2px; box-shadow: none; }
.hm-footer :focus-visible { outline-color: var(--hm-brand-200); }
/* ── 13. Entrance reveal (classes added by _Layout's script) ───────────────
Gated on .hm-js so content is never hidden if the script doesn't run. A
short rise with the critically damped curve — nothing bounces, and nothing
on the page waits for it before it can be clicked. */
.hm-js .hm-reveal { opacity: 0; translate: 0 18px; transition: opacity .6s var(--hm-ease-out), translate .7s var(--hm-spring); }
.hm-js .hm-reveal.in { opacity: 1; translate: 0 0; }
/* ── 14. Accessibility preferences ─────────────────────────────────────── */
/* Reduced motion: keep feedback, drop movement. Reveals become a short
cross-fade, presses change colour only, panels appear without scaling. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.hm-js .hm-reveal { translate: none !important; transition: opacity .2s linear !important; }
.btn:active, .card:active, .cd-hero .btn-get-started:active,
.hm-footer .hm-fbtn:active, .hm-fsocial a:active, .hm-fsearch__form button:active, .hm-totop:active { scale: none !important; }
.hm-totop:hover, .hm-totop:focus-visible, .hm-fsearch__form button:hover .bi { translate: none !important; }
.hm-nav .dropdown-menu, .hm-nav .mega-panel { transition: opacity .15s linear; }
@starting-style {
.hm-nav .dropdown-menu.show, .hm-nav .mega-panel.show { scale: none; }
}
}
/* Reduced transparency: the white glass becomes solid white. */
@media (prefers-reduced-transparency: reduce) {
:root { --header-bg: #FFFFFF; --hm-glass: #FFFFFF; }
.navbar.hm-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Increased contrast: solid surfaces, defined edges, stronger secondary text. */
@media (prefers-contrast: more) {
:root {
--header-bg: #FFFFFF; --header-fg-muted: var(--hm-brand-900); --header-border: var(--hm-brand-400);
--hm-muted: var(--hm-brand-800); --hm-hairline: var(--hm-brand-400);
}
.navbar.hm-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
.card { border: 1px solid var(--hm-hairline) !important; box-shadow: none; }
.hm-footer { --hm-f-text: #fff; --hm-f-dim: rgba(255,255,255,.9); --hm-f-line: rgba(255,255,255,.4); }
}
/* No backdrop-filter support: make the bar solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root { --header-bg: #FFFFFF; --hm-glass: #FFFFFF; }
}
between them; the blank collapses and the lists close up to the item gap. */ .cms-content { --hm-linklist-fs: .74375rem; --hm-linklist-gap: .15em; } /* 70% of the 17px body */ .cms-content li:has(> a, > :is(strong, b) > a, > :is(h1, h2, h3, h4, h5, h6) a) { font-size: var(--hm-linklist-fs); margin-bottom: var(--hm-linklist-gap); } .cms-content :is(ul, ol):has(+ :is(ul, ol), + p.hm-blank + :is(ul, ol)) { margin-bottom: var(--hm-linklist-gap); } .cms-content :is(ul, ol) + p.hm-blank:has(+ :is(ul, ol)) { display: none; } /* Hub pages build the same index from sibling headings instead of a list —
מס הכנסה - description
× N under the page title. A heading that opens with a link is one of those items: it takes the list item's size, weight, gap and circle bullet, so every index page reads alike. */ .cms-content :is(h1, h2, h3, h4, h5, h6):not(li > *):has(> a:first-child, > :is(strong, b):first-child > a:first-child) { display: list-item; list-style: circle outside; margin: 0 0 var(--hm-linklist-gap); margin-inline-start: 1.4em; font-size: 1.0625rem; font-weight: 700; line-height: inherit; letter-spacing: normal; /* body size, like link-listinside a list item stays with its list. rem, not em, so nested lists don't compound. */ .cms-content:not(.is-container) p:not(li p), .cms-content:not(.is-container) li:has(a) { font-size: 1.0625rem; } .cms-content:not(.is-container) p.hm-blank { height: .4rem; } .cms-content:not(.is-container) li { margin-bottom: var(--hm-linklist-gap); } .cms-content:not(.is-container) h1:not(li > *) { font-size: 1.375rem; line-height: 1.25; margin: 0 0 .75rem; } .cms-content:not(.is-container) :is(h1 ~ h1, h2):not(li > *) { font-size: 1rem; line-height: 1.35; margin: 1.25rem 0 .4rem; } .cms-content:not(.is-container) h3:not(li > *) { font-size: .875rem; line-height: 1.4; margin: 1rem 0 .35rem; } .cms-content:not(.is-container) :is(h4, h5, h6):not(li > *) { font-size: .8125rem; line-height: 1.4; margin: .9rem 0 .3rem; } /* Info-card lines (phone, hours, address) read at the body size, like paragraphs. */ .cms-content:not(.is-container) .row > :is(.col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-3, .col-lg-4) > :is(h2, h3, h4) { font-size: 1.0625rem; } .cms-content:not(.is-container) blockquote { font-size: .9375rem; margin-block: 1.25rem; } /* Imported headings carry the old site's inline decoration —