/*
Theme Name: קבוצת הכהנים
Theme URI: https://msh-hac.com/
Author: מ.ש. הכהנים חומרי בניין בע"מ
Description: תמת בלוקים (FSE) לאתר התדמית של קבוצת הכהנים — חומרי בניין, קרמיקה ויבוא. עברית RTL כברירת מחדל, אנגלית כשפה שנייה, מצב כהה, ושלוש זהויות משנה צבעוניות.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hacohanim
Tags: block-styles, full-site-editing, rtl-language-support, accessibility-ready, translation-ready
*/
/* ===========================================================================
כל הצבעים, הגופנים והמרווחים מוגדרים ב-theme.json ולא כאן.
הקובץ הזה מכיל אך ורק את מה ש-theme.json אינו יכול לבטא:
1. המצב הכהה — החלפת אותם משתני CSS שוורדפרס ייצר מ-theme.json
2. ארבע זהויות המשנה (חומרי בניין / קרמיקה / סחר עץ / יבוא)
3. רצועות כהות (הירו, התחתית, הרצועה העליונה)
4. נגישות: פוקוס נראה, דילוג לתוכן, צמצום תנועה
כלל ברזל: אין כאן margin-left / padding-right / left / right.
רק תכונות לוגיות, כדי שעברית ואנגלית יעבדו מאותו גיליון.
=========================================================================== */
/* ---------------------------------------------------------------------------
1. מצב כהה
---------------------------------------------------------------------------
וורדפרס מייצר מ-theme.json משתנה לכל צבע בפלטה:
--wp--preset--color--steel וכן הלאה. במקום לכתוב מחדש כל כלל עיצוב
למצב כהה, אנחנו מחליפים כאן את המשתנים עצמם — וכל האתר מתהפך.
שני מנגנונים, בכוונה:
@media (prefers-color-scheme: dark) — העדפת מערכת ההפעלה
[data-theme="dark"] / ="light" — בחירה מפורשת, אם תתווסף בעתיד
--------------------------------------------------------------------------- */
:root {
/* רצועות כהות. בבהיר הן הגרפיט; בכהה הן כהות עוד יותר מהרקע,
ולכן הן זקוקות לטוקן משלהן ולא יכולות פשוט להצביע ל-steel. */
--hac-band-bg: #22201B;
--hac-band-ink: #F4F2EC;
--hac-band-ink-soft: #CFC9BE;
--hac-band-line: rgba(255, 255, 255, .12);
/* ברירת המחדל של ההדגשה: הגרפיט. כל אזור עם data-division משנה אותה. */
--hac-accent: var(--wp--preset--color--steel);
--hac-accent-on: var(--wp--preset--color--surface);
--hac-accent-ink: var(--wp--preset--color--steel);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--wp--preset--color--ground: #14120E;
--wp--preset--color--surface: #1B1813;
--wp--preset--color--surface-2: #252119;
--wp--preset--color--ink: #EDEAE2;
--wp--preset--color--ink-soft: #ABA599;
--wp--preset--color--ink-faint: #938D81;
--wp--preset--color--line: #2E2A22;
--wp--preset--color--line-strong: #413C32;
/* גרפיט הופך לבהיר: בכהה הוא משמש כצבע טקסט והדגשה, לא כרקע. */
--wp--preset--color--steel: #DCD8CE;
--wp--preset--color--hazard: #F0C33F;
--wp--preset--color--hazard-ink: #F0C33F;
--wp--preset--color--clay: #D9775A;
--wp--preset--color--clay-soft: #3A2A24;
--wp--preset--color--sea: #4FA5A8;
--wp--preset--color--open-green: #4CAF7D;
--hac-band-bg: #100E0A;
--hac-band-ink: #EDEAE2;
--hac-band-ink-soft: #ABA599;
--hac-band-line: rgba(255, 255, 255, .10);
--hac-accent-on: #15181A;
/*
* שבעת אלה נשכחו, וזה היה הבאג החמור באתר.
*
* הם נשארו בערכי המצב הבהיר בזמן שכל השאר התהפך, ולכן במצב
* כהה כותרת עמוד הסניף הופיעה בלבן על רקע קרם — יחס 1.09:1,
* כלומר בלתי נראית לחלוטין. הערכים כאן חושבו לפי נוסחת
* הבהירות היחסית של WCAG מול המשטחים שעליהם הם באמת יושבים.
*/
--wp--preset--color--hazard-tint: #2C2410;
--wp--preset--color--clay-tint: #2E1C16;
--wp--preset--color--sea-tint: #10292A;
--wp--preset--color--timber-tint: #2A1F13;
--wp--preset--color--clay-ink: #E08E75;
--wp--preset--color--sea-ink: #66BEC1;
--wp--preset--color--timber-ink: #D9A97A;
--wp--preset--shadow--card:
0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -14px rgba(0, 0, 0, .7);
}
}
/* בחירה מפורשת גוברת על העדפת המערכת, בשני הכיוונים. */
:root[data-theme="dark"] {
--wp--preset--color--ground: #14120E;
--wp--preset--color--surface: #1B1813;
--wp--preset--color--surface-2: #252119;
--wp--preset--color--ink: #EDEAE2;
--wp--preset--color--ink-soft: #ABA599;
--wp--preset--color--ink-faint: #938D81;
--wp--preset--color--line: #2E2A22;
--wp--preset--color--line-strong: #413C32;
--wp--preset--color--steel: #DCD8CE;
--wp--preset--color--hazard: #F0C33F;
--wp--preset--color--hazard-ink: #F0C33F;
--wp--preset--color--clay: #D9775A;
--wp--preset--color--clay-soft: #3A2A24;
--wp--preset--color--sea: #4FA5A8;
--wp--preset--color--open-green: #4CAF7D;
--hac-band-bg: #100E0A;
--hac-band-ink: #EDEAE2;
--hac-band-ink-soft: #ABA599;
--hac-band-line: rgba(255, 255, 255, .10);
--hac-accent-on: #15181A;
/*
* שבעת אלה נשכחו, וזה היה הבאג החמור באתר.
*
* הם נשארו בערכי המצב הבהיר בזמן שכל השאר התהפך, ולכן במצב
* כהה כותרת עמוד הסניף הופיעה בלבן על רקע קרם — יחס 1.09:1,
* כלומר בלתי נראית לחלוטין. הערכים כאן חושבו לפי נוסחת
* הבהירות היחסית של WCAG מול המשטחים שעליהם הם באמת יושבים.
*/
--wp--preset--color--hazard-tint: #2C2410;
--wp--preset--color--clay-tint: #2E1C16;
--wp--preset--color--sea-tint: #10292A;
--wp--preset--color--timber-tint: #2A1F13;
--wp--preset--color--clay-ink: #E08E75;
--wp--preset--color--sea-ink: #66BEC1;
--wp--preset--color--timber-ink: #D9A97A;
--wp--preset--shadow--card:
0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -14px rgba(0, 0, 0, .7);
}
/* מודיע לדפדפן לצבוע פקדי טופס, פסי גלילה ו- בהתאם. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { color-scheme: dark; }
}
/* ---------------------------------------------------------------------------
2. ארבע זהויות המשנה
---------------------------------------------------------------------------
אותו שלד אתר, ארבעה אופי. כל אזור שנושא data-division מקבל צבע הדגשה
אחר — ומשפחת כותרות אחרת. הכלל היחיד שקובע "קרמיקה = סריף" נמצא כאן,
ולכן שינוי עתידי הוא שורה אחת ולא מעבר על כל התבניות.
--------------------------------------------------------------------------- */
[data-division="building-materials"] {
--hac-accent: var(--wp--preset--color--hazard);
--hac-accent-ink: var(--wp--preset--color--hazard-ink);
--hac-accent-on: #1B1B14; /* טקסט כהה על צהוב — יחס ניגודיות 9.8:1 */
--hac-accent-tint: var(--wp--preset--color--hazard-tint);
}
[data-division="ceramics"] {
--hac-accent: var(--wp--preset--color--clay);
--hac-accent-ink: var(--wp--preset--color--clay-ink);
--hac-accent-on: #FFFFFF;
/* מילוי הכפתור כהה מהצבע המזהה. לבן על הטרקוטה עצמה נותן
3.97:1 בתחתית המדרג ו-3.75:1 בראשו — מתחת לנדרש. */
--hac-accent-btn: #9C4028;
--hac-accent-tint: var(--wp--preset--color--clay-tint);
}
[data-division="import"] {
--hac-accent: var(--wp--preset--color--sea);
--hac-accent-ink: var(--wp--preset--color--sea-ink);
--hac-accent-on: #FFFFFF;
--hac-accent-btn: #0B6165;
--hac-accent-tint: var(--wp--preset--color--sea-tint);
}
[data-division="wood-trade"] {
--hac-accent: var(--wp--preset--color--timber);
--hac-accent-ink: var(--wp--preset--color--timber-ink);
/* לבן על העץ עצמו נותן 5.87:1 — ולכן אין כאן --hac-accent-btn נפרד. */
--hac-accent-on: #FFFFFF;
--hac-accent-tint: var(--wp--preset--color--timber-tint);
}
/* קרמיקה = חם. כותרות בסריף, בלי הידוק אותיות, במשקל נמוך יותר. */
[data-division="ceramics"] :is(h1, h2, h3, .wp-block-post-title),
[data-division="ceramics"].wp-block-post-title {
font-family: var(--wp--preset--font-family--serif);
font-weight: 700;
letter-spacing: 0;
}
/* ---------------------------------------------------------------------------
3. רצועות כהות ורכיבים חוזרים
--------------------------------------------------------------------------- */
.hac-band-dark {
background-color: var(--hac-band-bg);
color: var(--hac-band-ink);
}
.hac-band-dark :is(h1, h2, h3, h4, p, li, a, span, dt, dd) { color: inherit; }
.hac-band-dark .hac-muted { color: var(--hac-band-ink-soft); }
/* רשת ההנדסה שמאחורי ההירו — שני מערכי קווים דקים, כמו נייר משבצות
של מהנדס. נטענת כ-CSS ולא כתמונה: אפס בקשות רשת. */
.hac-hero { position: relative; overflow: hidden; }
.hac-hero::after {
content: "";
position: absolute;
inset: 0;
opacity: .16;
pointer-events: none;
background:
repeating-linear-gradient(0deg, transparent 0 46px, rgba(255,255,255,.35) 46px 47px),
repeating-linear-gradient(90deg, transparent 0 96px, rgba(255,255,255,.35) 96px 97px);
}
.hac-hero > * { position: relative; z-index: 1; }
/* הפס הצבעוני שמתחת לכותרת עמוד — מסמן באיזו חטיבה אנחנו. */
.hac-rule {
block-size: var(--wp--custom--rule--height);
background-color: var(--hac-accent);
border: 0;
margin-block: var(--wp--preset--spacing--40) 0;
}
/* עינית — התווית הקטנה מעל כותרת. */
.hac-eyebrow {
font-family: var(--wp--preset--font-family--block);
font-weight: 700;
font-size: var(--wp--preset--font-size--x-small);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--wp--preset--color--ink-faint);
}
/* בעברית אין אותיות רישיות, ומרווח אותיות רחב רק פוגע בקריאוּת. */
[dir="rtl"] .hac-eyebrow { letter-spacing: .06em; text-transform: none; }
/* כרטיס — הבסיס לכרטיסי סניפים, פאנלים וקופסאות מידע. */
.hac-card {
background-color: var(--wp--preset--color--surface);
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--radius--m);
/* צל במנוחה ולא רק בריחוף. מלבן עם מסגרת 1px נראה כמו
ווייארפריים; צל רך של 2px גורם לו לשבת על העמוד. */
box-shadow: var(--wp--preset--shadow--card);
transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
@media (prefers-reduced-motion: reduce) {
.hac-card { transition: none; }
}
/* ---------------------------------------------------------------------------
4. נגישות — ת"י 5568 / WCAG 2.1 AA
--------------------------------------------------------------------------- */
/* קישור הדילוג לתוכן. וורדפרס מזריק אותו בעצמו בתמות בלוקים
עם המחלקה .skip-link, ולכן מעצבים את שלו ולא מוסיפים שני. */
.skip-link {
position: absolute;
inset-inline-start: -9999px;
z-index: 999;
}
.skip-link:focus {
position: fixed;
inset-block-start: 8px;
inset-inline-start: 8px;
inline-size: auto;
padding: 10px 18px;
background-color: var(--wp--preset--color--surface);
color: var(--wp--preset--color--ink);
border: 2px solid var(--wp--preset--color--sea);
border-radius: var(--wp--custom--radius--s);
font-weight: 700;
text-decoration: none;
}
/* פוקוס נראה בכל מקום. :focus-visible ולא :focus — כדי שלחיצת עכבר
לא תצייר מסגרת, אבל ניווט במקלדת תמיד יראה איפה הוא נמצא. */
:focus-visible {
outline: 2px solid var(--wp--preset--color--sea);
outline-offset: 2px;
border-radius: 2px;
}
/* טקסט חלופי לקוראי מסך בלבד. */
.screen-reader-text:not(:focus):not(:active) {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------------------------------------------------------------------------
5. יסודות
--------------------------------------------------------------------------- */
/* text-wrap: balance מונע כותרת שבה נשארת מילה בודדת בשורה האחרונה.
בעברית זה בולט במיוחד בכותרות קצרות. */
:is(h1, h2, h3, .wp-block-post-title) { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* מספרים בטבלת שעות הפתיחה חייבים להתיישר בעמודה. */
.hac-tabular { font-variant-numeric: tabular-nums; }
img { max-inline-size: 100%; block-size: auto; }
/* גלילה חלקה אל עוגן, למי שלא ביקש לצמצם תנועה. */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
/* הכותרת דביקה, ולכן עוגן חייב להיעצר מתחתיה ולא מאחוריה. */
:target { scroll-margin-block-start: calc(var(--wp--custom--header--height) + 16px); }
/* ---------------------------------------------------------------------------
6. פריסת ההדר, הרצועה העליונה והתחתית
---------------------------------------------------------------------------
כל אלה בנויים מבלוקי ליבה, ולכן המנהל יכול לערוך אותם בעורך האתר.
מה שנשאר כאן הוא רק ההתנהגות שהעורך אינו יודע לבטא: דביקוּת,
גובה קבוע וקריסה למובייל.
--------------------------------------------------------------------------- */
.hac-topbar {
font-size: 0.82rem;
}
.hac-topbar__inner,
.hac-header__inner,
.hac-footer__legal {
inline-size: 100%;
}
.hac-topbar__inner { min-block-size: 38px; }
/* רשימת הסניפים ארוכה ונשברת לשתי שורות; הטלפון והוואטסאפ
נשארים בקצה השורה ולא נופלים מתחתיה. */
.hac-topbar__inner > p { flex: 1 1 60%; min-inline-size: 0; }
.hac-topbar__tools { flex: none; }
/* במסך צר שמונת השמות תפסו ארבע שורות ודחפו את התוכן למטה. */
@media (max-width: 599px) {
.hac-topbar__inner > p:first-child {
font-size: 0.68rem;
line-height: 1.35;
}
}
.hac-topbar a { text-decoration: none; }
.hac-topbar a:hover { text-decoration: underline; }
/* ההדר נשאר גלוי בגלילה — הגולש במובייל מחפש סניף ורוצה
את התפריט בהישג יד בכל נקודה בעמוד. */
.hac-header {
position: sticky;
inset-block-start: 0;
z-index: 60;
background-color: var(--wp--preset--color--surface);
border-block-end: 1px solid var(--wp--preset--color--line);
}
.hac-header__inner { min-block-size: var(--wp--custom--header--height); }
/* הסמל הריבועי. מוחלף בלוגו אמיתי ברגע שמעלים אותו בהתאמה אישית —
ואז הריבוע הזה נעלם מעצמו. */
.hac-mark {
inline-size: 38px;
block-size: 38px;
flex: none;
display: grid;
place-items: center;
background-color: var(--wp--preset--color--steel);
color: var(--wp--preset--color--surface);
font-family: var(--wp--preset--font-family--block);
font-weight: 900;
font-size: 1.05rem;
border-radius: var(--wp--custom--radius--s);
}
/* בכהה הגרפיט הוא בהיר, ולכן הטקסט שעליו חייב להתהפך. */
:root[data-theme="dark"] .hac-mark { color: #15181A; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .hac-mark { color: #15181A; }
}
/* יש לוגו? הריבוע מיותר. */
.hac-brand__logo:not(:empty) ~ .hac-mark { display: none; }
/*
* לוגו הקבוצה הוא PNG ברקע שקוף, ולכן אין צורך במסגרת שתסתיר
* ריבוע אטום. במצב כהה הוא כהה על כהה, ולכן מקבל שם רקע בהיר
* רך — כמו תג — במקום להיעלם.
*/
.hac-brand__logo img { display: block; }
/*
* במצב כהה הלוגו — אותיות גרפיט על שקוף — יושב על משטח כהה
* ונעלם. משטח בהיר רך מתחתיו מחזיר אותו, ונקרא כתג ולא כתקלה.
* אותו טיפול ללוגואי המותגים, שחלקם לוחיות כהות.
*/
:root[data-theme="dark"] :is( .hac-brand__logo img, .hac-brand-logo__img ) {
background-color: #F2EFE8;
padding: 5px 9px;
border-radius: var(--wp--custom--radius--s, 10px);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) :is( .hac-brand__logo img, .hac-brand-logo__img ) {
background-color: #F2EFE8;
padding: 5px 9px;
border-radius: var(--wp--custom--radius--s, 10px);
}
}
.hac-brand__logo .custom-logo-link { display: block; line-height: 0; }
/*
* flex:none על גוש המותג הרחיב את העמוד: משפט המשנה באנגלית
* ארוך, לא נשבר, וגרר את הכותרת אל מעבר לרוחב המסך במובייל
* (165 פיקסלים של גלישה אופקית). עכשיו הוא מצטמצם ונשבר.
*/
.hac-brand { text-decoration: none; flex: 0 1 auto; min-inline-size: 0; }
.hac-brand__text { min-inline-size: 0; }
.hac-brand__sub {
color: var(--wp--preset--color--ink-faint);
line-height: 1.2;
overflow-wrap: anywhere;
}
/* במסך צר הוא ממילא חוזר על הרצועה העליונה. */
@media (max-width: 599px) {
.hac-brand__sub { display: none; }
}
.hac-nav { margin-inline-start: auto; }
/*
* התפריט שטוח — שנים־עשר פריטים בשורה, ובאנגלית עם שמות
* ארוכים ("Atzei HaLevanon Kiryat Arba"). הריפוד והגופן
* הודקו כדי שהשורה תחזיק, והפריטים נשברים לשורה שנייה
* במקום להרחיב את המסמך.
*/
.hac-nav .wp-block-navigation-item__content {
padding: 8px 9px;
border-radius: var(--wp--custom--radius--s);
font-weight: 600;
font-size: 0.86rem;
text-decoration: none;
white-space: nowrap;
}
.hac-nav .wp-block-navigation-item__content:hover {
background-color: var(--wp--preset--color--surface-2);
}
/* העמוד הנוכחי מסומן בפס תחתון בצבע החטיבה. */
.hac-nav .current-menu-item > .wp-block-navigation-item__content {
box-shadow: inset 0 -3px 0 var(--hac-accent-ink);
}
/* --- בורר השפה ---------------------------------------------------------
HE | EN. שתי מילים קצרות ולא דגלים: דגל מסמן מדינה ולא שפה,
ודגל בריטי לצד דגל ישראלי באתר הזה היה אומר משהו שלא התכוונו לו.
הבורר יושב בקצה הלוגי של ההדר. margin-inline-start:auto על
הקבוצה כולה, כדי שהיא תידחף לקצה בעברית ובאנגלית גם יחד —
בלי כלל נפרד לכל כיוון.
--------------------------------------------------------------------- */
.hac-header__end {
margin-inline-start: auto;
flex: none;
}
/* --- שורת התפריט ------------------------------------------------------
התפריט אינו מקובץ לחטיבות, ולכן הוא ארוך. שורה משלו מתחת
ללוגו מחזיקה את כולו גלוי בלי לדחוס את שם החברה. */
.hac-header__navrow {
border-block-start: 1px solid var(--wp--preset--color--line);
padding-block: 2px;
}
.hac-header__navrow .hac-nav { margin-inline-start: 0; inline-size: 100%; }
.hac-nav .wp-block-navigation__container { flex-wrap: wrap; }
/* במובייל השורה הזאת היא כפתור ההמבורגר בלבד. במקום שורה
ריקה כמעט־כולה, הכפתור עולה אל שורת הלוגו — לצד בורר השפה.
.hac-header כבר sticky, כלומר אלמנט ממוקם, ולכן הוא בלוק
ההכלה של המיקום המוחלט. */
@media (max-width: 599px) {
.hac-header__navrow.hac-header__navrow {
position: absolute;
inset-block-start: 50%;
inset-inline-end: 104px;
transform: translateY(-50%);
inline-size: auto;
border-block-start: 0;
padding-block: 0;
margin: 0;
}
.hac-header__navrow .hac-nav { inline-size: auto; }
}
.hac-lang { flex: none; }
.hac-lang__list {
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.hac-lang__item + .hac-lang__item {
border-inline-start: 1px solid var(--wp--preset--color--line);
padding-inline-start: 4px;
margin-inline-start: 2px;
}
.hac-lang__item a {
display: inline-block;
padding: 5px 7px;
border-radius: var(--wp--custom--radius--s);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: .04em;
text-decoration: none;
color: var(--wp--preset--color--ink-faint);
}
.hac-lang__item a:hover {
background-color: var(--wp--preset--color--surface-2);
color: var(--wp--preset--color--ink);
}
.hac-lang__item.is-current a {
color: var(--wp--preset--color--ink);
background-color: var(--wp--preset--color--surface-2);
}
/* בורר השפה נשאר גלוי גם כשהתפריט מתקפל לכפתור המבורגר —
גולש שהגיע לעמוד בשפה הלא נכונה צריך אותו מיד, בלי לפתוח תפריט. */
@media (max-width: 599px) {
.hac-lang__item a { padding: 5px; font-size: 0.72rem; }
}
.hac-footer__head {
font-family: var(--wp--preset--font-family--block);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wp--preset--color--ink-faint);
margin-block-end: 12px;
}
[dir="rtl"] .hac-footer__head { letter-spacing: .04em; text-transform: none; }
.hac-footer a { text-decoration: none; }
.hac-footer a:hover { text-decoration: underline; color: #fff; }
.hac-footer__legal {
border-block-start: 1px solid var(--hac-band-line);
/* --hac-band-ink-soft ולא ink-faint. הכלל של .hac-band-dark
גובר בסלקטיביות על ה- שבפנים, וההורשה מ-ink-faint נותנת
2.73:1 על הרקע הכהה — מתחת לנדרש. */
color: var(--hac-band-ink-soft);
}
/* ---------------------------------------------------------------------------
7. רשת כרטיסים
--------------------------------------------------------------------------- */
.hac-card-grid { gap: var(--wp--preset--spacing--30); }
.hac-card:hover {
border-color: var(--wp--preset--color--line-strong);
box-shadow: var(--wp--preset--shadow--lift);
transform: translateY(-2px);
}
/* ---------------------------------------------------------------------------
8. ההירו
--------------------------------------------------------------------------- */
/* ההירו נצמד לתחילת השורה ולא ממורכז — בעברית זה הצד הימני,
באנגלית השמאלי. 820px מגביל את שורת הכותרת לאורך קריא.
margin-inline-end:auto (ולא margin-inline:0 auto) הוא מה שדוחף
את הקופסה לצד ההתחלה בשתי השפות מאותה שורת קוד. */
/* ההירו יושב בפריסת "זרימה" ולא constrained, במכוון: וורדפרס
פולט לכל מיכל constrained כלל עם מחלקת מיכל
(.wp-container-...-is-layout-x > :where(...)) שקובע
margin-inline: auto, בגוש CSS שנטען *אחרי* הגיליון הזה ובסגוליות
גבוהה יותר. במקום להילחם בסגוליות עם !important, פשוט לא
משתמשים בפריסה שמייצרת את הכלל.
הקופסה נצמדת לתחילת השורה של מיכל ה-1180 — לא לקצה המסך.
ה-max() מחשב את ההיסט הזה ומתאפס לבד במסכים צרים. */
.hac-hero { padding-inline: 24px; }
/* יש תמונה ראשית לעמוד? היא הופכת לרקע ההירו.
המסך הכהה מעליה אינו קישוט: טקסט לבן על תמונה בהירה נופל
מתחת ליחס הניגודיות 4.5:1 שת"י 5568 דורש. הגרדיאנט מבטיח
שהכותרת תישאר קריאה על כל תמונה שתועלה, בהירה או כהה. */
.hac-hero--has-image {
background-image:
linear-gradient(
to bottom,
rgba(13, 15, 17, .82) 0%,
rgba(13, 15, 17, .72) 55%,
rgba(13, 15, 17, .88) 100%
),
var(--hac-hero-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* רשת ההנדסה נחלשת מעל תמונה — שתי שכבות דוגמה מתחרות זו בזו. */
.hac-hero--has-image::after { opacity: .07; }
.hac-hero__inner {
max-inline-size: 820px;
margin-inline-start: max(0px, (100% - 1180px) / 2);
margin-inline-end: auto;
}
.hac-hero .hac-eyebrow { color: var(--hac-band-ink-soft); }
.hac-hero__lede { max-inline-size: 60ch; }
/* תגיות החטיבות בהירו — מתאר בצבע החטיבה על הרקע הכהה. */
.hac-tag {
border: 1px solid currentColor;
border-radius: 100px;
padding-block: 5px;
padding-inline: 14px;
font-size: 0.85rem;
font-weight: 600;
}
.hac-tag--bm { color: var(--wp--preset--color--hazard); }
.hac-tag--cr { color: #E09A80; }
.hac-tag--im { color: #6FBCBE; }
.hac-tag--wd { color: #D9A97A; }
/* הכפתור הראשי בהירו נושא את צהוב העבודה, כי הפעולה הראשית
באתר הזה היא "מצא סניף" והיא שייכת לחומרי הבניין. */
.hac-btn--hazard .wp-block-button__link {
background-color: var(--wp--preset--color--hazard);
border-color: var(--wp--preset--color--hazard);
color: #1B1B14;
}
.hac-btn--ghost .wp-block-button__link {
background-color: transparent;
border-color: currentColor;
color: inherit;
}
/* ---------------------------------------------------------------------------
9. כרטיסי החטיבות
--------------------------------------------------------------------------- */
.hac-division {
overflow: hidden;
padding: 0;
display: flex;
flex-direction: column;
}
/* הפס העליון בצבע החטיבה — הסימן הוויזואלי שמבדיל בין השלושה. */
.hac-division::before {
content: "";
display: block;
block-size: 5px;
background-color: var(--hac-accent);
}
.hac-division > *:not(:first-child) { padding-inline: 24px; }
.hac-division > .hac-division__count { padding-block-start: 24px; }
.hac-division > .hac-division__go { padding-block-end: 24px; margin-block-start: auto; }
.hac-division__count {
color: var(--wp--preset--color--ink-faint);
font-weight: 600;
}
.hac-division__go a {
font-weight: 700;
color: var(--hac-accent-ink);
text-decoration: none;
}
.hac-division__list { padding-inline-start: 18px; }
.hac-division:hover {
border-color: var(--wp--preset--color--line-strong);
box-shadow: var(--wp--preset--shadow--card);
}
/* המחלקות שקובעות איזו חטיבה. חייבות להיות מחלקות ולא data-*:
וורדפרס מייצר מחדש את עטיפת הבלוק בשמירה ומאבד מאפיינים
שאינם חלק מסכמת הבלוק, אבל className נשמר. */
.hac-div--bm {
--hac-accent: var(--wp--preset--color--hazard);
--hac-accent-ink: var(--wp--preset--color--hazard-ink);
--hac-accent-on: #1B1B14;
--hac-accent-tint: var(--wp--preset--color--hazard-tint);
}
.hac-div--cr {
--hac-accent: var(--wp--preset--color--clay);
--hac-accent-ink: var(--wp--preset--color--clay-ink);
--hac-accent-on: #FFFFFF;
/* מילוי הכפתור כהה מהצבע המזהה. לבן על הטרקוטה עצמה נותן
3.97:1 בתחתית המדרג ו-3.75:1 בראשו — מתחת לנדרש. */
--hac-accent-btn: #9C4028;
--hac-accent-tint: var(--wp--preset--color--clay-tint);
}
.hac-div--im {
--hac-accent: var(--wp--preset--color--sea);
--hac-accent-ink: var(--wp--preset--color--sea-ink);
--hac-accent-on: #FFFFFF;
--hac-accent-btn: #0B6165;
--hac-accent-tint: var(--wp--preset--color--sea-tint);
}
.hac-div--wd {
--hac-accent: var(--wp--preset--color--timber);
--hac-accent-ink: var(--wp--preset--color--timber-ink);
--hac-accent-on: #FFFFFF;
--hac-accent-tint: var(--wp--preset--color--timber-tint);
}
/* קרמיקה = כותרות סריף. אותו כלל שחל על [data-division]. */
.hac-div--cr :is(h1, h2, h3, .wp-block-post-title),
.hac-div--cr.wp-block-post-title {
font-family: var(--wp--preset--font-family--serif);
font-weight: 700;
letter-spacing: 0;
}
/* ---------------------------------------------------------------------------
10. כרטיסי הסניפים
--------------------------------------------------------------------------- */
.hac-branches-band {
background-color: var(--wp--preset--color--surface);
border-block: 1px solid var(--wp--preset--color--line);
}
.hac-branch-card {
overflow: hidden;
padding: 0;
display: flex;
flex-direction: column;
text-decoration: none;
}
.hac-branch-card__image img {
aspect-ratio: 16 / 9;
object-fit: cover;
inline-size: 100%;
}
/* אין תמונה עדיין? מציגים משטח מרוקע במקום ריבוע ריק,
כדי שהרשת לא תקרוס לפני שיעלו צילומים. */
.hac-branch-card__image:empty::before,
.hac-branch-card:not(:has(.hac-branch-card__image img))::before {
content: "";
display: block;
aspect-ratio: 16 / 9;
background-color: var(--wp--preset--color--surface-2);
background-image:
repeating-linear-gradient(115deg, var(--wp--preset--color--line) 0 3px, transparent 3px 22px);
}
.hac-branch-card__body { flex: 1; }
.hac-branch-card__body > .wp-block-post-title { font-weight: 700; }
.hac-branch-card__body > .wp-block-post-title a { text-decoration: none; }
.hac-branch-card__foot {
margin-block-start: auto;
padding-block-start: 10px;
border-block-start: 1px solid var(--wp--preset--color--line);
color: var(--wp--preset--color--ink-faint);
}
/* "פתוח עכשיו" ירוק, "סגור כעת" עמום.
ההבחנה נעשית גם במילים ולא רק בצבע, כדי שמי שאינו מבחין
בצבעים יקבל בדיוק את אותו מידע (ת"י 5568 / WCAG 1.4.1).
המחלקה hac-is-open נוספת בזמן הרינדור ב-inc/block-bindings.php,
כי CSS אינו יכול לגזור מחלקה מתוכן טקסטואלי. */
.hac-open-now:not(:empty) { font-weight: 700; }
.hac-open-now { color: var(--wp--preset--color--ink-faint); }
.hac-is-open .hac-open-now { color: var(--wp--preset--color--open-green); }
/* ---------------------------------------------------------------------------
11. עמוד סניף
--------------------------------------------------------------------------- */
.hac-page-head {
background-color: var(--wp--preset--color--surface);
border-block-end: 1px solid var(--wp--preset--color--line);
}
.hac-page-head__sub { max-inline-size: 62ch; }
.hac-crumbs {
color: var(--wp--preset--color--ink-faint);
margin-block-end: 12px;
}
.hac-crumbs a { text-decoration: none; }
.hac-crumbs a:hover { text-decoration: underline; }
/* המפריד נוצר ב-CSS ולא נכתב בתוכן — כך הוא לא נשבר כשמוסיפים
או מסירים פירור, והוא לא נקרא בקול על ידי קורא מסך. */
.hac-crumbs > p + p::before {
content: "/";
margin-inline-end: 8px;
color: var(--wp--preset--color--line-strong);
}
.hac-branch-hero img {
border-radius: var(--wp--custom--radius--m);
border: 1px solid var(--wp--preset--color--line);
object-fit: cover;
inline-size: 100%;
}
/* הסיידבר נשאר גלוי בגלילה: שעות פתיחה ודרכי הגעה הם מה שהגולש
בא בשבילם, ואין סיבה שיצטרך לגלול חזרה אליהם. */
@media (min-width: 782px) {
.hac-branch-aside {
position: sticky;
inset-block-start: calc(var(--wp--custom--header--height) + 16px);
align-self: start;
}
}
.hac-panel h2 { font-family: var(--wp--preset--font-family--block); }
/* פרטי קשר: רשימת מונח-הגדרה בשתי עמודות. */
.hac-kv {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 14px;
margin: 0;
font-size: 0.95rem;
}
.hac-kv dt {
color: var(--wp--preset--color--ink-faint);
font-weight: 600;
}
.hac-kv dd { margin: 0; }
.hac-kv a {
text-decoration: none;
border-block-end: 1px solid var(--wp--preset--color--line-strong);
}
.hac-kv a:hover { border-block-end-color: currentColor; }
.hac-contact__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-block-start: 16px;
}
/* פסקה שקשורה לשדה ריק — הבינדינג מחזיר מחרוזת ריקה באתר,
וכאן היא נעלמת לגמרי במקום להשאיר רווח לבן. */
.hac-kv__row:empty,
p.wp-block-paragraph:empty { display: none; }
/* טווח שעות מבודד דו-כיוונית. text-align חייב להישאר end
כדי שהעמודה תתיישר לצד הנכון של הטבלה. */
.hac-hours__range { unicode-bidi: isolate; }
.hac-services {
margin: 0;
padding-inline-start: 18px;
color: var(--wp--preset--color--ink-soft);
}
.hac-services li { margin-block: 4px; }
/* ---------------------------------------------------------------------------
12. שעות פתיחה
--------------------------------------------------------------------------- */
.hac-hours__table {
inline-size: 100%;
border-collapse: collapse;
font-size: 0.94rem;
font-variant-numeric: tabular-nums;
}
.hac-hours__table th,
.hac-hours__table td {
padding-block: 7px;
border-block-end: 1px solid var(--wp--preset--color--line);
font-weight: 400;
text-align: start;
}
.hac-hours__table tr:last-child :is(th, td) { border-block-end: 0; }
.hac-hours__table td { text-align: end; color: var(--wp--preset--color--ink-soft); }
.hac-hours__table tr.is-today :is(th, td) {
font-weight: 700;
color: var(--wp--preset--color--ink);
}
.hac-hours__status {
font-weight: 700;
margin-block: 0 12px;
}
.hac-hours__status.is-open { color: var(--wp--preset--color--open-green); }
.hac-hours__status.is-closed { color: var(--wp--preset--color--ink-faint); }
.hac-hours__note {
margin: 0.75rem 0 0;
font-size: var(--wp--preset--font-size--x-small, 0.85rem);
color: var(--wp--preset--color--ink-soft);
}
/* ---------------------------------------------------------------------------
13. מפות
---------------------------------------------------------------------------
החזית (facade) היא כפתור ולא תמונה סטטית מגוגל: תמונה סטטית
נחשבת בקשת API בתשלום בכל טעינת עמוד, גם אם איש לא לחץ עליה.
הכפתור עולה אפס, נטען מיד, ונגיש במקלדת.
--------------------------------------------------------------------------- */
.hac-map__frame {
position: relative;
block-size: var(--hac-map-height, 380px);
border-radius: var(--wp--custom--radius--m);
overflow: hidden;
border: 1px solid var(--wp--preset--color--line);
background-color: var(--wp--preset--color--surface-2);
}
.hac-map__facade {
inline-size: 100%;
block-size: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
border: 0;
background: transparent;
color: var(--wp--preset--color--ink-soft);
font: inherit;
text-align: center;
padding: 16px;
}
/* רשת קלה שרומזת "כאן תהיה מפה", בלי בקשת רשת אחת. */
.hac-map__facade::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: .5;
background:
repeating-linear-gradient(0deg, transparent 0 28px, var(--wp--preset--color--line) 28px 29px),
repeating-linear-gradient(90deg, transparent 0 28px, var(--wp--preset--color--line) 28px 29px);
}
.hac-map__facade:hover { background-color: var(--wp--preset--color--surface); }
.hac-map__facade-icon {
inline-size: 34px;
block-size: 34px;
border-radius: 50% 50% 50% 2px;
transform: rotate(-45deg);
background-color: var(--hac-accent);
flex: none;
}
.hac-map__facade-text {
font-weight: 700;
color: var(--wp--preset--color--ink);
}
.hac-map__facade-note { font-size: 0.86rem; }
.hac-map__iframe,
.hac-map__canvas {
inline-size: 100%;
block-size: 100%;
border: 0;
display: block;
}
.hac-map__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-block-start: 14px;
}
.hac-btn {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
border: 1px solid var(--wp--preset--color--line-strong);
background-color: var(--wp--preset--color--surface);
color: var(--wp--preset--color--ink);
padding-block: 11px;
padding-inline: 20px;
border-radius: var(--wp--custom--radius--s);
font-weight: 700;
font-size: 0.95rem;
}
.hac-btn:hover { border-color: var(--wp--preset--color--ink-soft); }
.hac-btn--accent {
background-color: var(--hac-accent-btn, var(--hac-accent));
border-color: var(--hac-accent);
color: var(--hac-accent-on);
}
/* מה שמוצג כשאין מפתח או אין קואורדינטות. */
.hac-map__fallback {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
padding: 24px 16px;
border: 1px dashed var(--wp--preset--color--line-strong);
border-radius: var(--wp--custom--radius--m);
background-color: var(--wp--preset--color--surface-2);
}
.hac-map__fallback-icon {
inline-size: 28px;
block-size: 28px;
border-radius: 50% 50% 50% 2px;
transform: rotate(-45deg);
background-color: var(--wp--preset--color--line-strong);
}
.hac-map__fallback-address { font-weight: 700; }
.hac-map__fallback-note {
font-size: 0.88rem;
color: var(--wp--preset--color--ink-soft);
}
/* ההודעה שרק עורכי האתר רואים — מסומנת ויזואלית כדי שלא
תתבלבל עם תוכן לגולש. */
.hac-map__fallback-admin {
font-size: 0.82rem;
color: var(--wp--preset--color--sea);
border-inline-start: 3px solid var(--wp--preset--color--sea);
padding-inline-start: 10px;
margin-block-start: 12px;
}
.hac-map__error {
padding: 24px;
text-align: center;
color: var(--wp--preset--color--ink-soft);
}
.hac-map__fallback-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
.hac-map__fallback-item { padding: 18px; }
.hac-map__fallback-item h3 { font-size: 1.05rem; margin-block-end: 6px; }
/* רק הכותרת. הטלפון והוויז חייבים להישאר מסומנים כקישור. */
.hac-map__fallback-item h3 a { text-decoration: none; }
/* חלונית המידע שנפתחת בלחיצה על סמן. */
.hac-map__info {
display: grid;
gap: 3px;
font-family: var(--wp--preset--font-family--body);
font-size: 0.9rem;
line-height: 1.5;
}
.hac-map__info strong { font-size: 1rem; }
/* ---------------------------------------------------------------------------
14. עמוד חטיבה
--------------------------------------------------------------------------- */
.hac-facts {
background-color: var(--wp--preset--color--line);
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--radius--m);
overflow: hidden;
}
.hac-fact { background-color: var(--wp--preset--color--surface); }
.hac-fact__n {
font-family: var(--wp--preset--font-family--block);
font-weight: 900;
font-size: 2rem;
line-height: 1;
}
.hac-fact__l { color: var(--wp--preset--color--ink-faint); }
.hac-step .hac-eyebrow { color: var(--hac-accent-ink); }
/* ---------------------------------------------------------------------------
15. טופס יצירת קשר
---------------------------------------------------------------------------
HTML רגיל בלי שורת JavaScript אחת. עובד גם כש-JS כבוי,
ולא מוסיף ולו קילובייט אחד של סקריפט לעמוד.
--------------------------------------------------------------------------- */
.hac-form {
display: grid;
gap: 14px;
max-inline-size: 560px;
}
.hac-field { display: grid; gap: 6px; }
.hac-field label {
font-size: 0.86rem;
font-weight: 700;
color: var(--wp--preset--color--ink-soft);
}
.hac-field__hint {
font-size: 0.82rem;
color: var(--wp--preset--color--ink-faint);
}
.hac-field :is(input, select, textarea) {
font: inherit;
padding-block: 11px;
padding-inline: 13px;
border: 1px solid var(--wp--preset--color--line-strong);
border-radius: var(--wp--custom--radius--s);
background-color: var(--wp--preset--color--surface);
color: var(--wp--preset--color--ink);
inline-size: 100%;
}
.hac-field :is(input, select, textarea):focus-visible {
outline: 2px solid var(--wp--preset--color--sea);
outline-offset: 1px;
border-color: var(--wp--preset--color--sea);
}
.hac-field textarea { resize: vertical; min-block-size: 110px; }
/* ה-honeypot.
לא display:none ולא visibility:hidden — בוטים רבים מזהים את
שניהם ומדלגים על השדה. הוצאה מהמסך היא מה שעובד: לבוט הוא
נראה כשדה טופס לגיטימי, ולאדם הוא בלתי נראה לחלוטין. */
.hac-form__hp {
position: absolute;
inset-inline-start: -9999px;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
}
.hac-form__success,
.hac-form__error {
padding: 14px 18px;
border-radius: var(--wp--custom--radius--s);
font-weight: 600;
margin-block-end: 18px;
}
.hac-form__success {
background-color: var(--wp--preset--color--surface-2);
border-inline-start: 3px solid var(--wp--preset--color--open-green);
color: var(--wp--preset--color--ink);
}
.hac-form__error {
background-color: var(--wp--preset--color--surface-2);
border-inline-start: 3px solid var(--wp--preset--color--clay);
color: var(--wp--preset--color--ink);
}
.hac-form__note {
font-size: 0.84rem;
color: var(--wp--preset--color--ink-faint);
}
/* כפתור השליחה הוא