/* ========================================================================= ShowEvents v4 - cream, Rubik, one green Loaded after se-design.css (v3) and only while v4 is on. v3 is built on custom properties, so section 1 re-points those and every v3 component follows; the rest styles what v4 adds (header, drawer, search, hero, rails) and the few places v3 hard-coded white. Contrast, measured (WCAG relative luminance): ink #1D1A16 on paper 16.2 on paper-3 13.8 on card 17.3 body #4A4238 on paper 9.2 on paper-3 7.9 muted #6B6153 on paper 5.7 on paper-3 4.8 gold-ink #7A5B17 on sand 5.1 ink on WhatsApp green 8.7 white on WhatsApp green is only 2.0:1 - so the green buttons carry ink. ========================================================================= */ /* ---------------------------------------------------------------- 0. font */ /* Overlapping ranges are tried last-declared first. Hebrew and latin-ext both claim the shekel sign, so Hebrew goes last: a page of prices then needs the 9KB Hebrew file only, not an extra 19KB. */ @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/rubik/rubik-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/rubik/rubik-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/rubik/rubik-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } /* -------------------------------------------------------------- 1. tokens */ body.se-v3.se-v4 { --paper: #FBF7F0; --paper-2: #F6EEE1; --paper-3: #EFE4D2; --card: #FFFFFF; --sand: #F1E6D3; /* v3's rose family becomes warm sand, so its pills and bands follow */ --rose: #F1E6D3; --rose-2: #E6D5BA; --rose-3: #F8F1E6; --ink: #1D1A16; --ink-2: #000000; --body: #4A4238; --muted: #6B6153; --line: #E7DCCB; --border: #8C8171; --gold: #B08D3E; /* the line in the logo - ornament only (2.9:1) */ --gold-ink: #7A5B17; --wa: #25D366; --wa-2: #1EBE5A; --mint: #DDF6E6; --mint-ink: #0F6E3C; --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(29, 26, 22, .05); --shadow-md: 0 10px 30px -18px rgba(29, 26, 22, .28); --shadow-lg: 0 24px 60px -30px rgba(29, 26, 22, .35); --font-display: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-body: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; background: var(--paper) !important; color: var(--body); font-family: var(--font-body) !important; } /* The theme names its old fonts in utility classes (.ops, .Assistant, the almoni stack on body). Pointing them at Rubik keeps the page to one family, so the browser downloads one font instead of seven and re-lays the text out once instead of once per file. */ body.se-v4, body.se-v4 :is(p, li, span, div, td, th, label, blockquote, figcaption, strong, em, b, small) { font-family: var(--font-body); } /* these the theme pins with !important; the accessibility toolbar is left alone */ body.se-v4 :is(a, input, textarea, select, button, .ops, .Assistant, .almoni, .regular, .bold, [class*="hfs"]):not(#pojo-a11y-toolbar *), body.se-v4 :is(input, textarea)::placeholder { font-family: var(--font-body) !important; } body.se-v4 :is(h1, h2, h3, h4, h5, h6, .ftitle) { font-family: var(--font-display) !important; color: var(--ink); letter-spacing: -.01em; } body.se-v4 :is(h1, h2) { font-weight: 800; } body.se-v4 :is(h3, h4) { font-weight: 700; } body.se-v4 ::selection { background: #F3DDA8; color: var(--ink); } body.se-v4 #wrapper, body.se-v4 main#content { background: transparent !important; } body.se-v4 main#content { padding-top: var(--se-head, 64px) !important; } /* the old top photo and the old title+line, in case a template still prints them */ body.se-v4 .topimage, body.se-v4 header[role="banner"]:not(.v4h) { display: none !important; } body.se-v4 .redline { display: none !important; } /* ---------------------------------------------------------- 2. primitives */ body.se-v4 .v4-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body.se-v4 .v4i { width: 22px; height: 22px; fill: currentColor; flex: none; display: block; } body.se-v4 .v4i--s { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } body.se-v4 .v4-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 7px 13px; background: var(--sand); color: var(--gold-ink); border-radius: var(--r-pill); font: 600 13px/1.1 var(--font-body) !important; letter-spacing: .01em; } body.se-v4 .v4-kicker a { color: inherit !important; text-decoration: none; } body.se-v4 .v4-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; } body.se-v4 .v4-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: var(--r-pill); border: 1.5px solid transparent; font: 600 16px/1 var(--font-body) !important; text-decoration: none !important; white-space: nowrap; transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } body.se-v4 .v4-pill--wa { background: var(--wa); color: var(--ink) !important; box-shadow: 0 10px 24px -14px rgba(18, 140, 74, .9); } body.se-v4 .v4-pill--wa:hover { background: var(--wa-2); transform: translateY(-1px); } body.se-v4 .v4-pill--line { background: transparent; color: var(--ink) !important; border-color: rgba(29, 26, 22, .28); } body.se-v4 .v4-pill--line:hover { border-color: var(--ink); background: var(--card); } body.se-v4 .v4-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink) !important; text-decoration: none !important; font: 600 15px/1.2 var(--font-body) !important; } body.se-v4 .v4-circ { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(29, 26, 22, .22); transition: background-color .2s var(--ease), border-color .2s var(--ease); } body.se-v4 .v4-link:hover .v4-circ { background: var(--ink); border-color: var(--ink); color: var(--paper); } body.se-v4 .v4-circ .v4i { width: 20px; height: 20px; } body.se-v4 .v4-ico { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; margin: 0; border-radius: 50%; border: 0; background: transparent; color: var(--ink) !important; cursor: pointer; transition: background-color .2s var(--ease); } body.se-v4 .v4-ico:hover { background: var(--sand); } body.se-v4 .v4-ico--line { border: 1.5px solid rgba(29, 26, 22, .22); } body.se-v4 :is(.v4-pill, .v4-link, .v4-ico, .v4chip, .v4cat a, .v4r, .v4card):focus-visible { outline: 3px solid var(--ink) !important; outline-offset: 3px; } /* ------------------------------------------------------------- 3. header */ body.se-v4 .v4h { position: fixed; inset: 0 0 auto 0; z-index: 1000; background: rgba(251, 247, 240, .92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); /* style.css gives every
a 15px navy top border and a drop shadow */ border: 0 !important; border-bottom: 1px solid transparent !important; box-shadow: none !important; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } body.se-v4.se-scrolled .v4h { border-bottom-color: var(--line) !important; box-shadow: 0 10px 30px -24px rgba(29, 26, 22, .5) !important; } body.se-v4 .v4h__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; max-width: 1320px; min-height: 62px; margin: 0 auto; padding: 7px max(12px, env(safe-area-inset-right)) 7px max(12px, env(safe-area-inset-left)); } body.se-v4 .v4h__start { display: flex; align-items: center; gap: 2px; } body.se-v4 .v4h__mid { min-width: 0; text-align: center; } body.se-v4 .v4h__end { display: flex; justify-content: flex-end; } body.se-v4 .v4h__logo { display: block; line-height: 0; } body.se-v4 .v4h__logo img { height: 34px; width: auto; max-width: 128px; object-fit: contain; } body.se-v4 .v4h__name { font: 800 18px/1 var(--font-display); color: var(--ink); } body.se-v4 .v4h__title { margin: 0 !important; padding: 0 4px; font: 700 15px/1.2 var(--font-display) !important; color: var(--ink) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.se-v4 .v4h__nav, body.se-v4 .v4h__wa, body.se-v4 .v4h__call { display: none; } @media (min-width: 1024px) { /* 8 menu items need ~905px; at 1440 wide the middle column gets ~950 */ body.se-v4 .v4h__bar { min-height: 74px; gap: 18px; padding-inline: 28px; max-width: 1480px; } body.se-v4 .v4h__burger, body.se-v4 .v4h__title { display: none; } body.se-v4 .v4h__nav { display: block; } body.se-v4 .v4h__wa { display: inline-flex; min-height: 44px; padding: 0 18px; font-size: 15px !important; } body.se-v4 .v4h__call { display: inline-grid; } body.se-v4 .v4h__start { gap: 8px; } body.se-v4 .v4h__logo img { height: 46px; max-width: 170px; } body.se-v4 .v4h__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; list-style: none; margin: 0 !important; padding: 0 !important; } body.se-v4 .v4h__menu > li { margin: 0; padding: 0; list-style: none; } body.se-v4 .v4h__menu a { display: block; padding: 10px 8px; border-radius: var(--r-pill); font: 500 14.5px/1.1 var(--font-body) !important; color: var(--ink) !important; text-decoration: none !important; white-space: nowrap; transition: background-color .2s var(--ease); } body.se-v4 .v4h__menu a:hover { background: var(--sand); } body.se-v4 .v4h__menu :is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a { background: var(--ink); color: var(--paper) !important; } body.se-v4 .v4h__menu img { display: none !important; } } /* eight Hebrew menu items plus the logo and buttons need ~1400px on one line */ @media (min-width: 1024px) and (max-width: 1439px) { body.se-v4 .v4h__bar { grid-template-columns: auto 1fr auto; grid-template-areas: "s . e" "n n n"; row-gap: 0; padding-bottom: 4px; } body.se-v4 .v4h__start { grid-area: s; } body.se-v4 .v4h__end { grid-area: e; } body.se-v4 .v4h__mid { grid-area: n; border-top: 1px solid var(--line); padding-top: 4px; } } /* ------------------------------------------------------------- 4. drawer */ /* only the root: the theme sets html, body { height: 100% }, so hiding the body’s overflow as well threw the page back to the top whenever the menu, the search or a sheet opened (measured: scrollY 3000 -> 0) */ html.v4-lock { overflow: hidden !important; } /* above the accessibility toolbar (z-index 9999) and the cookie notice */ body.se-v4 .v4d, body.se-v4 .v4s { position: fixed; inset: 0; z-index: 100000; } body.se-v4 .v4d[hidden], body.se-v4 .v4s[hidden] { display: none !important; } body.se-v4 :is(.v4d__scrim, .v4s__scrim) { position: absolute; inset: 0; background: rgba(29, 26, 22, .42); opacity: 0; transition: opacity .28s var(--ease); } body.se-v4 :is(.v4d, .v4s).is-open :is(.v4d__scrim, .v4s__scrim) { opacity: 1; } body.se-v4 .v4d__panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(88vw, 400px); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); box-shadow: var(--shadow-lg); padding: 12px 18px calc(24px + env(safe-area-inset-bottom)); transform: translateX(100%); transition: transform .3s var(--ease); } body.se-v4 .v4d.is-open .v4d__panel { transform: none; } body.se-v4 .v4d__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } body.se-v4 .v4d__t { margin: 0 !important; font: 800 22px/1 var(--font-display) !important; color: var(--ink) !important; } body.se-v4 .v4d__find { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 16px; margin: 0 0 12px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--card); font: 400 16px/1 var(--font-body) !important; color: var(--muted) !important; cursor: pointer; text-align: start; } body.se-v4 .v4d__menu { list-style: none; margin: 0 0 18px !important; padding: 0 !important; } body.se-v4 .v4d__menu li { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); } body.se-v4 .v4d__menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0 4px; font: 600 18px/1.2 var(--font-body) !important; color: var(--ink) !important; text-decoration: none !important; } body.se-v4 .v4d__menu a .v4i { width: 18px; height: 18px; opacity: .5; } body.se-v4 .v4d__menu img { display: none !important; } body.se-v4 .v4d__menu .current-menu-item > a { color: var(--gold-ink) !important; } body.se-v4 .v4d__cta { display: grid; gap: 10px; margin-top: 18px; } body.se-v4 .v4d__cta .v4-pill { width: 100%; } /* ------------------------------------------------------------- 5. chips */ body.se-v4 .v4chips { display: flex; gap: 8px; list-style: none; margin: 0 !important; padding: 0 !important; } body.se-v4 .v4chips li { margin: 0; padding: 0; list-style: none; flex: none; } body.se-v4 .v4chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); font: 500 14px/1 var(--font-body) !important; color: var(--ink) !important; text-decoration: none !important; white-space: nowrap; transition: border-color .2s var(--ease), background-color .2s var(--ease); } body.se-v4 .v4chip:hover { border-color: var(--ink); } body.se-v4 .v4chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper) !important; } body.se-v4 :is(.v4d__cats, .v4s__cats, .v4results__cats) { flex-wrap: wrap; } /* ------------------------------------------------------------- 6. search */ body.se-v4 .v4s__panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--paper); transform: translateY(-12px); opacity: 0; transition: transform .28s var(--ease), opacity .28s var(--ease); } body.se-v4 .v4s.is-open .v4s__panel { transform: none; opacity: 1; } @media (min-width: 768px) { body.se-v4 .v4s__panel { inset: 8vh auto auto 50%; width: min(720px, 92vw); max-height: 80vh; transform: translate(-50%, -12px); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } body.se-v4 .v4s.is-open .v4s__panel { transform: translate(-50%, 0); } } body.se-v4 .v4s__form { display: flex; align-items: center; gap: 8px; flex: none; margin: 0 !important; padding: 10px 12px 10px 8px; border-bottom: 1px solid var(--line); padding-top: calc(10px + env(safe-area-inset-top)); } body.se-v4 .v4s__form > .v4i { margin-inline-start: 8px; color: var(--muted); } body.se-v4 .v4s__form input { flex: 1; min-width: 0; height: 52px; margin: 0 !important; padding: 0 6px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font: 500 18px/1 var(--font-body) !important; color: var(--ink) !important; -webkit-appearance: none; appearance: none; } body.se-v4 .v4s__form input::placeholder { color: var(--muted); opacity: 1; } body.se-v4 .v4s__form input::-webkit-search-cancel-button { display: none; } body.se-v4 .v4s__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 24px; } body.se-v4 .v4s__status { margin: 0 0 8px !important; font: 400 14px/1.3 var(--font-body) !important; color: var(--muted) !important; } body.se-v4 .v4s__status:empty { display: none; } body.se-v4 .v4s__list { list-style: none; margin: 0 !important; padding: 0 !important; } body.se-v4 .v4s__list li { margin: 0; padding: 0; list-style: none; } body.se-v4 .v4r { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-md); text-decoration: none !important; color: var(--ink) !important; } body.se-v4 .v4r:hover, body.se-v4 .v4r.is-active { background: var(--card); box-shadow: var(--shadow-sm); } body.se-v4 .v4r__i { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: none; background: var(--sand); } body.se-v4 .v4r__b { display: grid; gap: 3px; min-width: 0; } body.se-v4 .v4r__t { font: 600 16px/1.25 var(--font-body) !important; color: var(--ink) !important; } body.se-v4 .v4r__m { font: 400 13px/1.3 var(--font-body) !important; color: var(--muted) !important; } body.se-v4 .v4s__empty .v4-kicker { margin-top: 4px; } /* --------------------------------------------------------------- 7. hero */ body.se-v4 .v4hero { text-align: center; padding: 14px 0 34px; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); border-radius: 0 0 40px 40px; } body.se-v4 .v4hero__chips { margin: 0 0 18px; } body.se-v4 .v4hero__chips .v4chips { overflow-x: auto; padding: 4px 16px 6px !important; scrollbar-width: none; scroll-snap-type: x proximity; } body.se-v4 .v4hero__chips .v4chips::-webkit-scrollbar { display: none; } body.se-v4 .v4hero__chips .v4chips li { scroll-snap-align: center; } /* on a desktop the menu bar and the side list already do this job; fifteen chips wrapped into three rows above the title were just noise */ @media (min-width: 1024px) { body.se-v4 .v4hero__chips { display: none; } } body.se-v4 .v4hero__text { max-width: 880px; margin: 0 auto; padding: 6px 18px 0; } body.se-v4 .v4hero__title { margin: 0 0 12px !important; padding: 0 !important; font: 800 clamp(32px, 7.6vw, 64px)/1.06 var(--font-display) !important; color: var(--ink) !important; text-wrap: balance; } body.se-v4 .v4hero__lead { max-width: 62ch; margin: 0 auto 20px !important; font: 400 clamp(16px, 2.1vw, 19px)/1.6 var(--font-body) !important; color: var(--body) !important; text-wrap: pretty; } body.se-v4 .v4hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; } /* v3 orders the product page with flexbox - banner 1, text 2, form 3, the rest 4; the hero takes the banner's place */ body.se-v4 #SingleProductPage > .v4hero { order: 1; } /* v3 slots the product's own price in right under the title */ body.se-v4 .v4hero .se-price { justify-content: center; margin: 0 0 14px !important; } /* the arch of photos */ body.se-v4 .v4col { max-width: 1240px; margin: 26px auto 0; } body.se-v4 .v4col__track { display: flex; align-items: flex-end; justify-content: center; gap: 14px; list-style: none; margin: 0 !important; padding: 0 20px !important; } body.se-v4 .v4col__it { flex: none; margin: 0; padding: 0; list-style: none; border-radius: var(--r-lg); overflow: hidden; background: var(--sand); box-shadow: var(--shadow-md); } body.se-v4 .v4col__it a { display: block; width: 100%; height: 100%; } body.se-v4 .v4col__img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } body.se-v4 .v4col__it[data-d="0"] { width: 27%; aspect-ratio: 4 / 5; } body.se-v4 .v4col__it[data-d="1"] { width: 20%; aspect-ratio: 3 / 4; } body.se-v4 .v4col__it[data-d="2"] { width: 15%; aspect-ratio: 2 / 3; } body.se-v4 .v4col--3 .v4col__it[data-d="0"] { width: 34%; } body.se-v4 .v4col--3 .v4col__it[data-d="1"] { width: 26%; } body.se-v4 .v4col--2 .v4col__it { width: 40%; aspect-ratio: 4 / 3; } body.se-v4 .v4col--1 .v4col__it { width: min(760px, 100%); aspect-ratio: 16 / 9; } @media (max-width: 767px) { body.se-v4 .v4hero { padding-top: 10px; border-radius: 0 0 28px 28px; } body.se-v4 .v4col { margin-top: 20px; } body.se-v4 .v4col__track { justify-content: flex-start; align-items: center; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 17vw 12px !important; } body.se-v4 .v4col__track::-webkit-scrollbar { display: none; } body.se-v4 .v4col__it, body.se-v4 .v4col__it[data-d] { width: 66vw; aspect-ratio: 4 / 5; scroll-snap-align: center; transform: scale(.9); filter: saturate(.8); transition: transform .35s var(--ease), filter .35s var(--ease); } body.se-v4 .v4col__it.is-on { transform: none; filter: none; } body.se-v4 .v4col--1 .v4col__track { padding: 0 16px 8px !important; overflow: visible; } body.se-v4 .v4col--1 .v4col__it { width: 100%; aspect-ratio: 4 / 3; transform: none; filter: none; } } /* ----------------------------------------------------------- 8. homepage */ body.se-v4 .v4home { text-align: center; padding: 22px 16px 30px; background: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, var(--paper) 52%, var(--paper-2) 100%); } body.se-v4 .v4home__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .06em .16em; margin: 4px auto 16px !important; padding: 0 !important; max-width: 1200px; font: 800 clamp(44px, 12vw, 124px)/.98 var(--font-display) !important; letter-spacing: -.025em; color: var(--ink) !important; } body.se-v4 .v4home__pill { display: inline-block; height: .86em; width: 1.9em; border-radius: var(--r-pill); overflow: hidden; background: var(--sand); box-shadow: var(--shadow-md); } body.se-v4 .v4home__pill img { display: block; width: 100%; height: 100%; object-fit: cover; } body.se-v4 .v4home__lead { max-width: 34ch; margin: 0 auto 22px !important; font: 400 clamp(17px, 2.3vw, 21px)/1.55 var(--font-body) !important; color: var(--body) !important; } body.se-v4 .v4home__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; } body.se-v4 .v4home__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 28px auto 0 !important; padding: 18px 0 0 !important; max-width: 760px; border-top: 1px solid var(--line); } body.se-v4 .v4home__facts li { display: grid; justify-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; text-align: center; } /* "120+" is a left-to-right run inside Hebrew; isolated, the plus stays after the number */ body.se-v4 .v4home__facts strong { direction: ltr; unicode-bidi: isolate; font: 800 clamp(26px, 6vw, 36px)/1 var(--font-display) !important; color: var(--ink) !important; } body.se-v4 .v4home__facts span { font: 500 clamp(13px, 3.4vw, 15px)/1.3 var(--font-body) !important; color: var(--body) !important; } /* section heading used by the new blocks */ body.se-v4 .v4sec { text-align: center; padding: 0 18px; margin: 0 auto 22px; max-width: 900px; } body.se-v4 .v4sec__t { margin: 0 0 14px !important; padding: 0 !important; font: 800 clamp(30px, 6vw, 52px)/1.05 var(--font-display) !important; color: var(--ink) !important; } /* the category grid: square tiles, two across on a phone, four on a desktop. (It was a sideways rail first; Ran found the swiping less convenient.) */ body.se-v4 .v4cats { padding: 38px 0 44px; background: var(--paper-2); } body.se-v4 .v4cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; max-width: 1232px; margin: 0 auto !important; padding: 4px 16px 0 !important; } body.se-v4 .v4cat { margin: 0; padding: 0; list-style: none; min-width: 0; } body.se-v4 .v4cat a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-lg); background: var(--sand); box-shadow: var(--shadow-md); text-decoration: none !important; isolation: isolate; } body.se-v4 .v4cat__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .6s var(--ease); } body.se-v4 .v4cat a::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 16, 12, 0) 40%, rgba(20, 16, 12, .78) 100%); } body.se-v4 .v4cat__name { position: absolute; z-index: 2; inset-inline: 14px 52px; bottom: 14px; font: 700 16px/1.2 var(--font-display) !important; color: #FFFFFF !important; text-align: start; text-wrap: balance; } body.se-v4 .v4cat .v4-circ { position: absolute; z-index: 2; bottom: 12px; inset-inline-end: 12px; width: 36px; height: 36px; color: #FFFFFF; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } body.se-v4 .v4cat .v4-circ .v4i { width: 16px; height: 16px; } body.se-v4 .v4cat a:hover .v4cat__img { transform: scale(1.05); } body.se-v4 .v4cat a:hover .v4-circ { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; } @media (min-width: 768px) { body.se-v4 .v4cgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-inline: 18px !important; } body.se-v4 .v4cat__name { inset-inline: 18px 70px; bottom: 20px; font-size: 20px !important; } body.se-v4 .v4cat .v4-circ { width: 46px; height: 46px; bottom: 14px; inset-inline-end: 14px; } body.se-v4 .v4cat .v4-circ .v4i { width: 20px; height: 20px; } } /* ---------------------------------------------- 9. the page underneath */ /* v3 painted a few surfaces pure white; in v4 those are the card colour on cream */ body.se-v4 :is(.product, .project) { background: var(--card) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-md) !important; overflow: hidden; } body.se-v4 :is(.product, .project) :is(.bgcontain, .bgimg) { border-radius: var(--r-md) !important; background-color: var(--paper-2) !important; } body.se-v4 :is(.product, .project) h3 { font: 700 18px/1.3 var(--font-display) !important; color: var(--ink) !important; } body.se-v4 :is(.product, .project) hr { border: 0; border-top: 1px solid var(--line); } body.se-v4 :is(.mainlink, .readmore) { border-radius: var(--r-pill) !important; font-family: var(--font-body) !important; font-weight: 600 !important; } body.se-v4 .mainlink { background: var(--ink) !important; color: var(--paper) !important; } body.se-v4 .readmore { background: var(--sand) !important; color: var(--ink) !important; } /* category page: the chips do the side menu's job on a phone */ @media (max-width: 1023px) { /* the side list goes; its "מוצרים" heading stays for screen readers, so the page still reads h1 > h2 > h3 instead of jumping from the title to the cards */ body.se-v4 #ProductsArchPage #SideBar { display: none !important; } body.se-v4 #ProductsArchPage .w25 { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; margin: -1px !important; padding: 0 !important; } } body.se-v4 #ProductsArchPage > .container { padding-top: 26px !important; } /* search results */ body.se-v4 .v4results { max-width: 1200px; margin: 0 auto; padding: 26px 16px 60px; } body.se-v4 .v4grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0 !important; padding: 0 !important; } @media (min-width: 768px) { body.se-v4 .v4grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } } body.se-v4 .v4grid li { margin: 0; padding: 0; list-style: none; } body.se-v4 .v4card { display: grid; gap: 6px; padding: 10px; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-md); text-decoration: none !important; height: 100%; } body.se-v4 .v4card__ph { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--paper-2) center / cover no-repeat; } body.se-v4 .v4card__k { font: 500 12px/1 var(--font-body) !important; color: var(--gold-ink) !important; margin-top: 4px; } body.se-v4 .v4card__t { font: 700 16px/1.3 var(--font-display) !important; color: var(--ink) !important; } body.se-v4 .v4results__none { font: 400 18px/1.6 var(--font-body) !important; color: var(--body) !important; text-align: center; margin: 0 0 16px !important; } body.se-v4 .v4results__cats { justify-content: center; } body.se-v4 .v4results .nav-links { display: flex; justify-content: center; gap: 8px; margin-top: 26px; } body.se-v4 .v4results .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--r-pill); background: var(--card); color: var(--ink); text-decoration: none; } body.se-v4 .v4results .page-numbers.current { background: var(--ink); color: var(--paper); } /* justified Hebrew on a phone leaves rivers of white between words */ body.se-v4 [style*="text-align:justify"], body.se-v4 [style*="text-align: justify"] { text-align: start !important; } /* section titles the theme prints (products, projects, articles, forms) */ body.se-v4 h2:is(.hfs50, .hfs45, .hfs40) { font-size: clamp(30px, 6vw, 52px) !important; font-weight: 800 !important; line-height: 1.08 !important; } /* the lead-form band sits on a pink party photo; a cream veil keeps it in the palette */ body.se-v4 .bgimg.mpdt30.mpb30.mbpr { position: relative; isolation: isolate; } body.se-v4 .bgimg.mpdt30.mpb30.mbpr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(246, 238, 225, .55); } /* the article cards carried their own white box and shadow inside the card */ body.se-v4 .project > .pdg20 { box-shadow: none !important; background: transparent !important; } body.se-v4 :is(.product, .project) :is(.hfs14, .hfs21.ops) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; /* overflow clips at the padding edge, so bottom padding let a 4th line peek through */ padding-bottom: 0 !important; margin-bottom: 14px !important; } /* homepage card rows on a phone: two across, the same as the category pages (v3 section 30), instead of one card per row 3,500px deep */ @media (max-width: 767px) { body.se-v4.home .inrowf:has(> .product, > .project) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-inline: 0 !important; padding: 6px 0 10px !important; } body.se-v4.home .inrowf:has(> .product, > .project) > :is(.product, .project) { width: auto !important; max-width: none !important; min-width: 0; margin: 0 !important; padding: 0 !important; } body.se-v4.home .inrowf :is(.product, .project) .bgimg { height: auto !important; aspect-ratio: 1 / 1; } body.se-v4.home .inrowf :is(.product, .project) > :not(.bgimg) { padding-inline: 12px; } body.se-v4.home .inrowf :is(.product, .project) > :last-child { padding-bottom: 14px; } body.se-v4.home .inrowf :is(.product, .project) h3 { font-size: 16px !important; padding: 12px 0 4px !important; line-height: 1.3 !important; } body.se-v4.home .inrowf :is(.product, .project) hr { margin: 9px 0 !important; } body.se-v4.home .inrowf :is(.product, .project) :is(.ops, .hfs14) { font-size: 13.5px !important; line-height: 1.5 !important; -webkit-line-clamp: 2; } body.se-v4.home .inrowf :is(.product, .project) .readmore { padding: 7px 14px !important; font-size: 13px !important; } /* the two price cells sat side by side at 21px; at half a phone's width they stack */ body.se-v4.home .inrowf .product .flex { flex-wrap: wrap; } body.se-v4.home .inrowf .product .flex > div { width: 100% !important; font-size: 14px !important; text-align: start !important; } } /* ------------------------------------------- 10. fixed things at the edges */ /* the phone bar: two real buttons instead of two icons with small labels */ body.se-v4 .fixed-buttons { background: rgba(251, 247, 240, .95) !important; border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -22px rgba(29, 26, 22, .45) !important; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important; gap: 10px; } body.se-v4 .fixed-buttons a { flex: 1 1 0; height: 48px !important; flex-direction: row !important; gap: 8px !important; border-radius: var(--r-pill) !important; font: 600 16px/1 var(--font-body) !important; } body.se-v4 .fixed-buttons a + a::before { display: none !important; } body.se-v4 .fixed-buttons a .ficon { width: 22px !important; height: 22px !important; padding: 0 !important; background: none !important; color: currentColor !important; } body.se-v4 .fixed-buttons a.cgreen { order: -1; background: var(--wa) !important; color: var(--ink) !important; } body.se-v4 .fixed-buttons a.cblue { background: var(--card) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px rgba(29, 26, 22, .2); } /* accessibility toolbar: out of the headline and down by the thumb, in the palette */ body.se-v4 #pojo-a11y-toolbar { top: auto !important; bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; } @media (min-width: 1024px) { body.se-v4 #pojo-a11y-toolbar { bottom: 120px !important; } } /* the toggle hangs off the top of a 300px panel that slides in sideways; pinned to the panel's bottom edge instead, it sits just above the phone bar */ body.se-v4 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle { top: auto !important; bottom: 0 !important; } body.se-v4 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a { background-color: var(--ink) !important; color: var(--paper) !important; border-radius: 14px 0 0 14px; } /* privacy notice: a floating card instead of a slab across the page */ body.se-v4 #ilpc-banner { left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important; max-width: 720px; margin: 0 auto !important; border-radius: 22px !important; background: var(--ink) !important; color: var(--paper) !important; box-shadow: var(--shadow-lg) !important; padding: 16px 18px !important; gap: 12px !important; font: 400 15px/1.5 var(--font-body) !important; z-index: 2500 !important; } body.se-v4 #ilpc-banner a { color: #F3DDA8 !important; } body.se-v4 #ilpc-banner button { min-height: 44px; padding: 0 18px !important; border-radius: var(--r-pill) !important; font: 600 15px/1 var(--font-body) !important; } body.se-v4 #ilpc-banner .ilpc-actions button:first-child { background: var(--wa) !important; color: var(--ink) !important; border: 0 !important; } /* ------------------------------------------------------------ 11. motion */ @media (prefers-reduced-motion: reduce) { body.se-v4 *, body.se-v4 *::before, body.se-v4 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ========================================================================= 12. 2026-09-28 - the polish pass Drawer without the arrows, the quick form, the video pill and the reel, the ticker, "why us", the packages, real photos behind the form bands, and the motion: reveal on approach, numbers that type, one pulse. ========================================================================= */ /* ------------------------------------------------------------- primitives */ body.se-v4 .v4-pill--ink { background: var(--ink); color: var(--paper) !important; border-color: var(--ink); } body.se-v4 .v4-pill--ink:hover { background: var(--ink-2); transform: translateY(-1px); } body.se-v4 .v4-pill--ink .v4i { color: var(--paper); } body.se-v4 .v4-kicker .v4i { width: 15px; height: 15px; } /* ------------------------------------------------------------ 12a. drawer */ /* the arrows on every menu row looked like accordions that never opened */ body.se-v4 .v4d__menu a .v4i { display: none; } body.se-v4 .v4d__menu a::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: .55; flex: none; } body.se-v4 .v4d__menu a:hover::after, body.se-v4 .v4d__menu .current-menu-item > a::after { opacity: 1; } body.se-v4 .v4d__cta .v4-pill--ink { order: -1; } /* -------------------------------------------------------- 12b. quick form */ body.se-v4 .v4c { position: fixed; inset: 0; z-index: 100000; } body.se-v4 .v4c[hidden] { display: none !important; } body.se-v4 .v4c__scrim { position: absolute; inset: 0; background: rgba(29, 26, 22, .46); opacity: 0; transition: opacity .28s var(--ease); } body.se-v4 .v4c.is-open .v4c__scrim { opacity: 1; } body.se-v4 .v4c__panel { position: absolute; inset: auto 0 0 0; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-radius: 28px 28px 0 0; box-shadow: var(--shadow-lg); padding: 16px 18px calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .34s var(--ease); } body.se-v4 .v4c.is-open .v4c__panel { transform: none; } body.se-v4 .v4c__panel::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; margin: -4px auto 12px; background: var(--line); } @media (min-width: 768px) { body.se-v4 .v4c__panel { inset: 50% auto auto 50%; width: min(620px, 92vw); max-height: 88vh; border-radius: var(--r-lg); padding: 22px 26px 26px; transform: translate(-50%, -46%); opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease); } body.se-v4 .v4c.is-open .v4c__panel { transform: translate(-50%, -50%); opacity: 1; } body.se-v4 .v4c__panel::before { display: none; } } body.se-v4 .v4c__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; } body.se-v4 .v4c__top .v4-kicker { margin-bottom: 8px; } body.se-v4 .v4c__t { margin: 0 0 6px !important; font: 800 24px/1.15 var(--font-display) !important; color: var(--ink) !important; } body.se-v4 .v4c__lead { margin: 0 !important; font: 400 15px/1.5 var(--font-body) !important; color: var(--body) !important; } body.se-v4 .v4c__alt { margin: 14px 0 0 !important; font: 400 14px/1.5 var(--font-body) !important; color: var(--muted) !important; text-align: center; } body.se-v4 .v4c__alt a { color: var(--ink) !important; text-decoration: underline; text-underline-offset: 3px; } body.se-v4 .v4c__done { text-align: center; padding: 14px 0 6px; } body.se-v4 .v4c__done p { margin: 0 0 12px !important; font: 400 16px/1.5 var(--font-body) !important; color: var(--body) !important; } body.se-v4 .v4c__done-t { display: flex; align-items: center; justify-content: center; gap: 8px; font: 800 22px/1.2 var(--font-display) !important; color: var(--ink) !important; } body.se-v4 .v4c__done-t .v4i { width: 26px; height: 26px; color: var(--mint-ink); } body.se-v4 .v4f { display: grid; gap: 10px; } body.se-v4 .v4f__row { display: grid; gap: 10px; } @media (min-width: 480px) { body.se-v4 .v4f__row { grid-template-columns: 1fr 1fr; } } body.se-v4 .v4f__f { display: block; min-width: 0; } body.se-v4 .v4f__l { display: block; margin: 0 0 5px; font: 600 13px/1.2 var(--font-body) !important; color: var(--muted) !important; } body.se-v4 .v4f .wpcf7-form-control-wrap { display: block; } body.se-v4 .v4f :is(input[type=text], input[type=tel], input[type=date], select, textarea) { width: 100%; margin: 0 !important; background-color: var(--card) !important; background-image: none !important; border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important; box-shadow: none !important; padding: 12px 14px !important; min-height: 48px; font: 400 16px/1.3 var(--font-body) !important; color: var(--ink) !important; -webkit-appearance: none; appearance: none; } body.se-v4 .v4f select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%231D1A16%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: left 12px center !important; background-size: 18px !important; padding-left: 38px !important; } body.se-v4 .v4f textarea { min-height: 84px; resize: vertical; } body.se-v4 .v4f input[type=date] { direction: ltr; text-align: end; } body.se-v4 .v4f :is(input, select, textarea):focus { border-color: var(--ink) !important; box-shadow: 0 0 0 3px rgba(29, 26, 22, .12) !important; outline: none; } body.se-v4 .v4f input[type=submit] { width: 100%; min-height: 52px; margin-top: 4px; background: var(--wa) !important; color: var(--ink) !important; border: 0 !important; border-radius: var(--r-pill) !important; font: 700 17px/1 var(--font-body) !important; cursor: pointer; } body.se-v4 .v4f input[type=submit]:hover { background: var(--wa-2) !important; } body.se-v4 .v4c .wpcf7-spinner { display: block; margin: 8px auto 0; } body.se-v4 .v4c .wpcf7-not-valid-tip { font: 400 13px/1.3 var(--font-body) !important; color: #A32D2D !important; margin-top: 4px; } body.se-v4 .v4c .wpcf7-response-output { margin: 12px 0 0 !important; padding: 10px 14px !important; border-radius: var(--r-sm); border: 1px solid var(--line) !important; font: 400 14px/1.4 var(--font-body) !important; } body.se-v4 .v4c .wpcf7 form.sent .wpcf7-response-output { display: none; } /* the privacy-consent line a plugin adds to every form */ body.se-v4 .v4c .wpcf7 [class*="ilpc"] { font-size: 13px !important; line-height: 1.4 !important; } body.se-v4 .v4c .wpcf7 input[type=checkbox] { width: 18px; height: 18px; margin-inline-end: 6px; vertical-align: middle; } /* ------------------------------------------------------------- 12c. hero */ body.se-v4 .v4home { position: relative; } body.se-v4 .v4home__pill { position: relative; } body.se-v4 .v4home__vid { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); } body.se-v4 .v4home__pill.has-vid .v4home__vid { opacity: 1; } body.se-v4 .v4home__pillbtn { position: absolute; z-index: 3; width: 28px; height: 28px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: rgba(29, 26, 22, .55); color: #FFFFFF; display: grid; place-items: center; cursor: pointer; opacity: .75; transition: opacity .2s var(--ease), background-color .2s var(--ease); } body.se-v4 .v4home__pillbtn[hidden] { display: none; } body.se-v4 .v4home__pillbtn:hover, body.se-v4 .v4home__pillbtn:focus-visible { opacity: 1; background: var(--ink); } body.se-v4 .v4home__pillbtn .v4i { width: 14px; height: 14px; } /* four facts: two by two on a phone, a row on anything wider */ body.se-v4 .v4home__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; max-width: 880px; } @media (min-width: 640px) { body.se-v4 .v4home__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* the ticker */ body.se-v4 .v4tick { margin: 26px -16px 0; padding: 12px 0; overflow: hidden; direction: ltr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } body.se-v4 .v4tick__track { display: flex; width: max-content; will-change: transform; } body.se-v4 .v4tick__row { display: flex; flex: none; } body.se-v4 .v4tick__it { direction: rtl; unicode-bidi: isolate; white-space: nowrap; flex: none; padding: 0 14px; font: 500 14px/1 var(--font-body) !important; color: var(--muted) !important; display: inline-flex; align-items: center; gap: 14px; } body.se-v4 .v4tick__it::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .7; } @media (min-width: 768px) { body.se-v4 .v4tick { margin-inline: 0; margin-top: 34px; } body.se-v4 .v4tick__it { font-size: 15px !important; padding: 0 18px; } } /* one pulse on the main button - two rings, under five seconds, then still */ body.se-v4 .v4-pulse { position: relative; } body.se-v4 .v4-pulse::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--wa); opacity: 0; pointer-events: none; animation: v4ring 2.3s ease-out 2; animation-delay: 1.1s; } @keyframes v4ring { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.24); } } /* -------------------------------------------------- 12d. category tiles */ body.se-v4 .v4cat__n { display: block; margin-top: 4px; font: 500 12px/1.2 var(--font-body) !important; color: rgba(255, 255, 255, .86); } @media (min-width: 768px) { body.se-v4 .v4cat__n { font-size: 13px !important; } } /* ----------------------------------------------------------- 12e. why us */ body.se-v4 .v4why { max-width: 1232px; margin: 40px auto 0; padding: 0 16px; } body.se-v4 .v4why .v4sec { margin-bottom: 18px; } body.se-v4 .v4why__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0 !important; padding: 0 !important; } body.se-v4 .v4why__it { margin: 0; padding: 18px 14px 16px; list-style: none; min-width: 0; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); border: 1px solid rgba(231, 220, 203, .8); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } body.se-v4 .v4why__it:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } body.se-v4 .v4why__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--sand); color: var(--gold-ink); margin-bottom: 12px; } body.se-v4 .v4why__ico .v4i { width: 22px; height: 22px; } body.se-v4 .v4why__t { margin: 0 0 6px !important; padding: 0 !important; font: 700 15.5px/1.25 var(--font-display) !important; color: var(--ink) !important; text-wrap: balance; } body.se-v4 .v4why__p { margin: 0 !important; font: 400 13.5px/1.5 var(--font-body) !important; color: var(--body) !important; } @media (min-width: 768px) { body.se-v4 .v4why { margin-top: 54px; padding-inline: 18px; } body.se-v4 .v4why__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } body.se-v4 .v4why__it { padding: 24px 20px 22px; } body.se-v4 .v4why__ico { width: 54px; height: 54px; } body.se-v4 .v4why__t { font-size: 18px !important; } body.se-v4 .v4why__p { font-size: 14.5px !important; } } /* ------------------------------------------------- 12f. about + the reel */ body.se-v4.home .container.c900.pdgtb40 { display: none !important; } /* a headline over a form the theme no longer prints */ body.se-v4.home .container.c14.flex { padding: 34px 16px 10px !important; } body.se-v4.home .container.c14.flex .w55::before { content: "קצת עלינו"; display: inline-flex; align-items: center; margin: 0 0 12px; padding: 7px 13px; background: var(--sand); color: var(--gold-ink); border-radius: var(--r-pill); font: 600 13px/1.1 var(--font-body); } body.se-v4.home .container.c14.flex h2.hfs50 { font-size: clamp(28px, 6vw, 46px) !important; line-height: 1.08 !important; margin: 0 0 8px !important; } body.se-v4.home .container.c14.flex .se-about-lead { margin: 0 0 10px !important; } body.se-v4.home .container.c14.flex .hfs20 { font-size: 16px !important; line-height: 1.6 !important; padding-top: 0 !important; } body.se-v4.home .container.c14.flex .mainlink { display: inline-flex !important; width: auto; padding: 12px 22px !important; } body.se-v4 .v4reel { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); box-shadow: var(--shadow-lg); isolation: isolate; } body.se-v4 .v4reel video { display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 !important; } body.se-v4 .v4reel__btn { position: absolute; z-index: 2; inset-inline-start: 14px; bottom: 14px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-md); transition: transform .2s var(--ease), background-color .2s var(--ease); } body.se-v4 .v4reel__btn:hover { transform: scale(1.06); background: #FFFFFF; } body.se-v4 .v4reel__btn .v4i { width: 22px; height: 22px; } body.se-v4 .v4reel:not(.is-playing) .v4reel__btn { width: 64px; height: 64px; inset-inline-start: 50%; bottom: 50%; transform: translate(50%, 50%); } body.se-v4 .v4reel:not(.is-playing) .v4reel__btn:hover { transform: translate(50%, 50%) scale(1.06); } body.se-v4 .v4reel:not(.is-playing) .v4reel__btn .v4i { width: 28px; height: 28px; } body.se-v4 .v4reel__cap { position: absolute; z-index: 2; inset-inline-end: 14px; bottom: 16px; margin: 0 !important; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(29, 26, 22, .6); color: #FFFFFF !important; font: 600 13px/1 var(--font-body) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @media (max-width: 767px) { body.se-v4.home .container.c14.flex .w40 { margin-bottom: 20px !important; } } @media (min-width: 1024px) { body.se-v4.home .container.c14.flex { display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 44px; align-items: center; padding: 50px 18px 20px !important; max-width: 1232px; } body.se-v4.home .container.c14.flex .w40, body.se-v4.home .container.c14.flex .w55 { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } body.se-v4.home .container.c14.flex .hfs20 { font-size: 17px !important; } } /* --------------------------------------------------------- 12g. packages */ body.se-v4 .v4packs { padding: 40px 0 46px; background: var(--paper-2); } body.se-v4 .v4packs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; max-width: 1232px; margin: 0 auto !important; padding: 0 16px !important; } body.se-v4 .v4pack { margin: 0; padding: 0; list-style: none; min-width: 0; } body.se-v4 .v4pack__a { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-md); text-decoration: none !important; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } body.se-v4 .v4pack__a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } body.se-v4 .v4pack__ph { display: block; aspect-ratio: 4 / 3; background: var(--paper-3); overflow: hidden; } body.se-v4 .v4pack__img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .6s var(--ease); } body.se-v4 .v4pack__a:hover .v4pack__img { transform: scale(1.04); } body.se-v4 .v4pack__b { display: flex; flex-direction: column; flex: 1; padding: 12px 12px 14px; gap: 6px; } body.se-v4 .v4pack__t { font: 700 15.5px/1.25 var(--font-display) !important; color: var(--ink) !important; text-wrap: balance; } body.se-v4 .v4pack__d { font: 400 13px/1.45 var(--font-body) !important; color: var(--muted) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.se-v4 .v4pack__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: auto; padding-top: 6px; } body.se-v4 .v4pack__from { font: 500 12.5px/1 var(--font-body) !important; color: var(--muted) !important; } body.se-v4 .v4pack__now { font: 800 22px/1 var(--font-display) !important; color: var(--ink) !important; direction: ltr; unicode-bidi: isolate; } body.se-v4 .v4pack__was { font: 400 13px/1 var(--font-body) !important; color: var(--muted) !important; direction: ltr; unicode-bidi: isolate; text-decoration-color: var(--gold); } body.se-v4 .v4pack__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 600 13.5px/1 var(--font-body) !important; color: var(--gold-ink) !important; } body.se-v4 .v4pack__go .v4i { width: 15px; height: 15px; } /* an odd last card stretches across the two phone columns instead of leaving a hole */ body.se-v4 .v4pack:last-child:nth-child(odd) { grid-column: 1 / -1; } body.se-v4 .v4pack:last-child:nth-child(odd) .v4pack__a { flex-direction: row; } body.se-v4 .v4pack:last-child:nth-child(odd) .v4pack__ph { width: 42%; aspect-ratio: auto; flex: none; } @media (min-width: 768px) { body.se-v4 .v4packs { padding: 52px 0 60px; } body.se-v4 .v4packs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-inline: 18px !important; } body.se-v4 .v4pack:last-child:nth-child(odd) { grid-column: auto; } body.se-v4 .v4pack:last-child:nth-child(odd) .v4pack__a { flex-direction: column; } body.se-v4 .v4pack:last-child:nth-child(odd) .v4pack__ph { width: auto; aspect-ratio: 4 / 3; } body.se-v4 .v4pack__b { padding: 16px 16px 18px; gap: 8px; } body.se-v4 .v4pack__t { font-size: 18px !important; } body.se-v4 .v4pack__d { font-size: 14px !important; } body.se-v4 .v4pack__now { font-size: 26px !important; } } @media (min-width: 1100px) { body.se-v4 .v4packs__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } } /* ------------------------------------------------- 12h. the photo bands */ /* the lead-form band now sits on a real event photo; a light gradient keeps the white card readable */ body.se-v4 .bgimg.mpdt30.mpb30.mbpr { background-size: cover !important; background-position: center 35% !important; } body.se-v4 .bgimg.mpdt30.mpb30.mbpr::before { background: linear-gradient(180deg, rgba(29, 26, 22, .18) 0%, rgba(29, 26, 22, .42) 100%); } body.se-v4 .bgimg.mpdt30.mpb30.mbpr .container.flex.jcfe > .w70 { background: rgba(255, 255, 255, .97) !important; } /* the band above the footer */ body.se-v4 footer .w50.bgimg.lazybg, body.se-v4 #AboutPage .w50.bgimg { background-size: cover !important; background-position: center !important; } @media (min-width: 768px) { body.se-v4 footer .flex.mblock > .w50.bgimg { border-radius: var(--r-lg) 0 0 var(--r-lg); } } /* about page: its own real photo, and no empty testimonials band */ body.se-v4 #AboutPage .w50.bgimg[style*="WhatsApp-Image-2020-08-03"] { background-image: url("https://show-events.co.il/wp-content/uploads/2022/11/AEE4525C-DAFF-418D-9548-A28959C22A6B-e1672074915291-768x696.jpg") !important; } body.se-v4 #AboutPage .recsbg { display: none !important; } /* the contact page form band: cream, not a red blur */ body.se-v4 .pageform { background-image: none !important; background-color: var(--paper-2) !important; } body.se-v4 .pageform :is(h2, p, .wcolor) { color: var(--ink) !important; } body.se-v4 .pageform .hfs40 { font-size: clamp(16px, 2vw, 20px) !important; } body.se-v4 .pageform .whitediv { display: none !important; } /* ---------------------------------------------------------- 12i. motion */ body.se-v4 .v4-rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); will-change: opacity, transform; } body.se-v4 .v4-rv.is-in { opacity: 1; transform: none; } body.se-v4 .v4-rv.is-in.v4cat, body.se-v4 .v4-rv.is-in.v4pack, body.se-v4 .v4-rv.is-in.v4why__it { will-change: auto; } body.se-v4 .v4num { display: inline-block; direction: ltr; unicode-bidi: isolate; text-align: start; font-variant-numeric: tabular-nums; vertical-align: baseline; white-space: nowrap; } body.se-v4 .v4num.is-typing::after { content: ""; display: inline-block; width: 2px; height: .85em; margin-inline-start: 2px; vertical-align: -.08em; background: currentColor; animation: v4blink .55s steps(1) infinite; } @keyframes v4blink { 50% { opacity: 0; } } body.se-v4 :is(.product, .project) { transition: transform .25s var(--ease), box-shadow .25s var(--ease); } body.se-v4 :is(.product, .project):hover { transform: translateY(-4px); box-shadow: var(--shadow-lg) !important; } @media (prefers-reduced-motion: reduce) { body.se-v4 .v4-rv { opacity: 1; transform: none; } body.se-v4 .v4-pulse::after { animation: none; } body.se-v4 .v4num.is-typing::after { display: none; } } /* CF7 wraps the labels of each two-column row in a

and adds a
*/ body.se-v4 .v4f__row > p { display: contents; } body.se-v4 .v4f__row br, body.se-v4 .v4f br { display: none; } body.se-v4 .v4f > p { margin: 0 !important; } @media (max-width: 767px) { body.se-v4.home .container.c14.flex .w40 { width: 100% !important; max-width: none !important; padding: 0 !important; margin-inline: 0 !important; } } /* the about page prints the same red band as the footer, outside