/* Keep — service pages (slikat-ashrai, ecommerce, heshbonit-digitalit, ptihat-osek-murshe), Hebrew and English. Written against the values in design-system/tokens.css. That file documents and is deliberately not linked anywhere, so the values are repeated here rather than referenced — keep the two in step when either moves. Direction: the site convention is with dir="rtl" on the section wrappers, not on the root element. Everything below therefore uses CSS logical properties so one stylesheet serves both the Hebrew and the English pages without a mirrored copy. */ :root { --svc-primary: #2f5aae; --svc-cta: #61ce70; --svc-cta-hover: #50b85f; --svc-ink: #394c62; --svc-ink-strong: #0f1e49; --svc-ink-muted: #a3afbd; --svc-surface: #ffffff; --svc-surface-tile: #f8faff; --svc-border: #e0e0e0; --svc-border-tile: #e8edf5; --svc-gradient-hero: linear-gradient(135deg, #f5f7fa 0%, #e8f0fe 100%); --svc-radius-card: 15px; --svc-radius-tile: 12px; --svc-radius-pill: 50px; --svc-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.1); --svc-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.1); --svc-shadow-raised: 0 4px 15px rgba(0, 0, 0, 0.15); --svc-glow-primary: 0 6px 20px rgba(47, 90, 174, 0.15); --svc-glow-cta: 0 2px 8px rgba(97, 206, 112, 0.3); } /* ========================================================================== Header dropdown ("פתרונות" / "Solutions") style.css sets `.header-nav nav ul { display: flex }`, which also catches Bootstrap's .dropdown-menu — the submenu then renders permanently open and laid out as a row. That is why the dropdown on the home page sat commented out. The rules below re-hide it and restore column layout; the home page carries its own equivalent copy inline. ========================================================================== */ .header-nav nav .nav-item.dropdown { position: relative; } /* responsive.css carries `.header-nav nav ul { display: flex !important }` from 768px up, so both states below have to answer it in kind. */ .header-nav nav ul.dropdown-menu { display: none !important; position: absolute; inset-block-start: 100%; inset-inline-start: 0; flex-direction: column; align-items: stretch; background: var(--svc-surface); border: 1px solid var(--svc-border); border-radius: 6px; box-shadow: var(--svc-shadow-2); inline-size: max-content; min-inline-size: 0; margin-block-start: 6px; padding-block: 4px; z-index: 1000; } .header-nav nav .nav-item.dropdown.show ul.dropdown-menu, .header-nav nav ul.dropdown-menu.show { display: flex !important; } .header-nav nav ul.dropdown-menu li { margin: 0; inline-size: 100%; } /* Five top-level items plus the dropdown do not fit at the 22px/27px the shared header uses for three. Tighten them on the service pages only. */ @media (min-width: 768px) { .header-nav nav > ul.nav-pills { flex-wrap: nowrap; } .header-nav nav > ul.nav-pills > li { margin-inline: 14px; } .header-nav nav > ul.nav-pills > li > a { font-size: 17px; white-space: nowrap; } } /* Tablet (768–991px): Bootstrap's container is 720px there, and the menu plus the header button filled all of it, so the logo — the only flex item allowed to shrink — collapsed to 0px. Give the logo a fixed size it keeps, and win the room back from the menu's padding, margins and type size. */ @media (min-width: 768px) and (max-width: 991.98px) { .header-area .header-logo { flex-shrink: 0; } .header-area .header-logo a img { inline-size: 120px; } .header-nav nav > ul.nav-pills > li { margin-inline: 4px; } .header-nav nav > ul.nav-pills > li > a { font-size: 15px; padding-inline: 8px; } .header-area .header-btn > a.btn1 { padding-inline: 18px; } } /* The header button. style.css ships .btn1 transparent with a white outline — right on the blue footer, invisible on this white header. landlords/, whose header these pages copy, gets its green from brand.css, which is not loaded here. Scoped to the header so the footer button keeps its outline. */ .header-area .header-btn > a.btn1 { color: #fff; background-color: var(--svc-cta); border-color: var(--svc-cta); white-space: nowrap; } .header-area .header-btn > a.btn1:hover, .header-area .header-btn > a.btn1:focus-visible { color: #fff; background-color: var(--svc-cta-hover); border-color: var(--svc-cta-hover); } .header-nav nav ul.dropdown-menu li a.dropdown-item { display: block; padding: 9px 16px; font-size: 16px; color: var(--svc-ink); text-decoration: none; text-align: start; transition: background 0.3s; } .header-nav nav ul.dropdown-menu li a.dropdown-item:hover, .header-nav nav ul.dropdown-menu li a.dropdown-item:focus-visible { background: var(--svc-surface-tile); color: var(--svc-primary); } /* The caret sits before the label: in Hebrew that puts it on the left of the word, which is where the reader expects it. Bootstrap's own ::after caret would land on the wrong side, so it is switched off. */ .header-nav nav .dropdown-toggle::before { content: "\25BC"; font-size: 10px; vertical-align: middle; margin-inline-end: 6px; } .header-nav nav .dropdown-toggle::after { display: none; } /* English reads left to right: the caret follows the label, as it does on index-en.html. */ .header-nav nav .dropdown-toggle:lang(en)::before { content: none; } .header-nav nav .dropdown-toggle:lang(en)::after { display: inline-block; content: "\25BC"; border: 0; font-size: 10px; vertical-align: middle; margin-inline-start: 6px; } /* ========================================================================== Layout primitives ========================================================================== */ .svc-section { padding-block: 70px; } .svc-section--tint { background: var(--svc-surface-tile); } .svc-section-head { max-width: 760px; margin-inline: auto; margin-block-end: 45px; text-align: center; } .svc-section-head h2 { color: var(--svc-primary); font-size: 28px; line-height: 1.3; font-weight: 700; margin-block-end: 14px; padding-block-end: 4px; /* Hebrew descenders clip against a tight box */ } .svc-section-head p { color: var(--svc-ink); font-size: 18px; line-height: 1.8; margin: 0; } /* ========================================================================== Hero ========================================================================== */ /* The shared header is `position: fixed` and about 91px tall, so the first band on the page has to clear it or it starts underneath. */ .svc-hero { background: var(--svc-gradient-hero); padding-block: 125px 80px; } .svc-hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 50px; } .svc-hero-text { flex: 1 1 420px; } .svc-hero-text h1 { color: var(--svc-primary); font-size: 42px; line-height: 1.3; font-weight: 700; margin-block-end: 18px; padding-block-end: 4px; } .svc-hero-text p { color: var(--svc-ink); font-size: 20px; line-height: 1.7; margin-block-end: 28px; } /* ========================================================================== Button pair — every button group on these pages is primary + secondary, told apart by colour. Values follow the home-page banner (index.html, .banner-buttons): primary green and filled, secondary white with a grey border that turns blue on hover. The buttons keep the .btn2 class on purpose: script.js only reports CTA clicks for elements carrying one of GA_CTA_CLASSES, and btn2 is one of them. The rules below therefore have to out-rank .btn2 and .btn2:hover from style.css (height 60px, width 100%, margin 10px 35px, scale on hover). ========================================================================== */ .svc-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .btn2.svc-btn { display: inline-flex; align-items: center; justify-content: center; inline-size: auto; max-inline-size: none; min-inline-size: 180px; block-size: auto; margin: 0; padding: 15px 40px; border: 2px solid transparent; border-radius: var(--svc-radius-pill); font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; filter: none; transition: all 0.3s; } .btn2.svc-btn--primary { background: var(--svc-cta); color: #fff; box-shadow: 0 4px 15px rgba(97, 206, 112, 0.3); } .btn2.svc-btn--primary:hover, .btn2.svc-btn--primary:focus-visible { color: #fff; background-image: linear-gradient(rgba(0, 0, 0, 0.09) 0 0); box-shadow: 0 6px 20px rgba(97, 206, 112, 0.4); transform: translateY(-2px); } .btn2.svc-btn--secondary { background: var(--svc-surface); color: #333; border-color: var(--svc-border); } .btn2.svc-btn--secondary:hover, .btn2.svc-btn--secondary:focus-visible { background: var(--svc-surface-tile); background-image: none; border-color: var(--svc-primary); color: var(--svc-primary); transform: translateY(-2px); } .svc-hero-note { color: var(--svc-ink-muted); font-size: 15px; margin-block-start: 16px; } .svc-hero-visual { flex: 1 1 340px; display: flex; justify-content: center; } /* ========================================================================== Mock card — the illustrated panel beside the H1 and the preview blocks. Purely decorative: it illustrates a product surface, it is not one. ========================================================================== */ .svc-mock { background: var(--svc-surface); border: 1px solid var(--svc-border-tile); border-radius: var(--svc-radius-card); box-shadow: var(--svc-glow-primary); padding: 24px; width: 100%; max-width: 380px; } .svc-mock--wide { max-width: 520px; margin-inline: auto; } .svc-mock-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(97, 206, 112, 0.12); color: #2f7d3c; font-size: 14px; font-weight: 600; border-radius: var(--svc-radius-pill); padding: 6px 14px; margin-block-end: 18px; } .svc-mock-badge::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--svc-cta); } .svc-mock-title { color: var(--svc-ink-strong); font-size: 18px; font-weight: 600; margin-block-end: 16px; } .svc-mock-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 11px; border-block-end: 1px solid var(--svc-border-tile); font-size: 16px; } .svc-mock-row:last-of-type { border-block-end: 0; } .svc-mock-row dt, .svc-mock-key { color: var(--svc-ink-muted); font-weight: 400; } .svc-mock-row dd, .svc-mock-val { color: var(--svc-ink-strong); font-weight: 600; margin: 0; } .svc-mock-row--total { border-block-start: 2px solid var(--svc-border-tile); border-block-end: 0; margin-block-start: 6px; padding-block-start: 14px; font-size: 18px; } /* Amounts, card numbers and any other value whose visual order is fixed. */ .svc-ltr { direction: ltr; unicode-bidi: isolate; } .svc-mock-foot { margin-block-start: 18px; padding-block-start: 14px; border-block-start: 1px dashed var(--svc-border-tile); color: var(--svc-ink-muted); font-size: 14px; text-align: center; } .svc-mock-status { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(97, 206, 112, 0.1); border-radius: var(--svc-radius-tile); color: #2f7d3c; font-size: 15px; font-weight: 600; padding: 12px; margin-block-start: 18px; } .svc-mock-pays { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 18px; } .svc-chip { background: var(--svc-surface-tile); border: 1px solid var(--svc-border-tile); border-radius: var(--svc-radius-pill); color: var(--svc-ink); font-size: 14px; font-weight: 600; padding: 7px 14px; } /* ========================================================================== Steps — the three-icon "how it works" row ========================================================================== */ .svc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; } .svc-step { background: var(--svc-surface); border: 2px solid var(--svc-border-tile); border-radius: var(--svc-radius-card); padding: 30px 26px; text-align: center; transition: all 0.3s; } .svc-step:hover { transform: translateY(-3px); box-shadow: var(--svc-shadow-2); } .svc-step-num { inline-size: 46px; block-size: 46px; border-radius: 50%; background: var(--svc-primary); color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-block-end: 18px; } .svc-step h3 { color: var(--svc-ink-strong); font-size: 20px; line-height: 1.4; font-weight: 600; margin-block-end: 10px; padding-block-end: 3px; } .svc-step p { color: var(--svc-ink); font-size: 16px; line-height: 1.7; margin: 0; } /* ========================================================================== Benefit grid — the "why Keep" icon cards ========================================================================== */ .svc-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .svc-benefit { background: var(--svc-surface); border: 1px solid var(--svc-border-tile); border-radius: var(--svc-radius-card); box-shadow: var(--svc-shadow-1); padding: 28px 24px; transition: all 0.3s; } .svc-benefit:hover { transform: translateY(-3px); box-shadow: var(--svc-shadow-raised); } .svc-benefit-icon { inline-size: 52px; block-size: 52px; border-radius: var(--svc-radius-tile); background: var(--svc-surface-tile); color: var(--svc-primary); display: flex; align-items: center; justify-content: center; margin-block-end: 16px; } .svc-benefit-icon svg { inline-size: 26px; block-size: 26px; } .svc-benefit h3 { color: var(--svc-ink-strong); font-size: 19px; line-height: 1.4; font-weight: 600; margin-block-end: 10px; padding-block-end: 3px; } .svc-benefit p { color: var(--svc-ink); font-size: 16px; line-height: 1.7; margin: 0; } /* ========================================================================== Checklist — "what every transaction includes", "what you get" ========================================================================== */ .svc-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; max-width: 940px; margin-inline: auto; } .svc-checklist li { display: flex; align-items: flex-start; gap: 14px; background: var(--svc-surface); border: 1px solid var(--svc-border-tile); border-radius: var(--svc-radius-tile); padding: 18px 20px; color: var(--svc-ink); font-size: 17px; line-height: 1.6; } .svc-check { flex: 0 0 auto; inline-size: 24px; block-size: 24px; margin-block-start: 2px; color: var(--svc-cta); } /* ========================================================================== Platform / payment-method strip ========================================================================== */ .svc-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-block-start: 28px; } .svc-strip-item { background: var(--svc-surface); border: 1px solid var(--svc-border-tile); border-radius: var(--svc-radius-tile); box-shadow: var(--svc-shadow-1); padding: 16px 26px; color: var(--svc-ink-strong); font-size: 17px; font-weight: 600; } .svc-strip-note { text-align: center; color: var(--svc-ink-muted); font-size: 15px; margin-block-start: 22px; } /* ========================================================================== Call to action band ========================================================================== */ .svc-cta { background: var(--svc-primary); padding-block: 60px; text-align: center; } .svc-cta h2 { color: #fff; font-size: 27px; line-height: 1.45; font-weight: 600; max-width: 820px; margin-inline: auto; margin-block-end: 26px; padding-block-end: 4px; } .svc-cta .svc-actions { justify-content: center; } /* On the blue band a white-filled secondary would be the brightest thing on it and outshine the green primary, so there it becomes a white outline. */ .svc-cta .btn2.svc-btn--secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.85); } .svc-cta .btn2.svc-btn--secondary:hover, .svc-cta .btn2.svc-btn--secondary:focus-visible { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; } .svc-cta-sub { color: rgba(255, 255, 255, 0.85); font-size: 15px; margin-block-start: 18px; } /* The price after "first month free" links to the pricing page. It keeps the line's own colour — a default blue link would vanish on the blue band. */ .svc-hero-note a, .svc-cta-sub a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .svc-hero-note a:hover, .svc-hero-note a:focus-visible { color: var(--svc-primary); } .svc-cta-sub a:hover, .svc-cta-sub a:focus-visible { color: #fff; } /* ========================================================================== Breadcrumb ========================================================================== */ .svc-crumbs { margin-block-end: 22px; font-size: 14px; color: var(--svc-ink-muted); } .svc-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .svc-crumbs a { color: var(--svc-primary); text-decoration: none; } .svc-crumbs a:hover { text-decoration: underline; } .svc-crumbs li + li::before { content: "/"; color: var(--svc-ink-muted); margin-inline-end: 8px; } /* ========================================================================== FAQ — reuses the shared .accordion styling; only the wrapper is local ========================================================================== */ .svc-faq { max-width: 860px; margin-inline: auto; } .svc-faq .accordion-button { font-weight: 600; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 991.98px) { .svc-hero-text h1 { font-size: 34px; } .svc-section-head h2 { font-size: 25px; } } @media (max-width: 767.98px) { .svc-section { padding-block: 48px; } .svc-hero { padding-block: 110px 48px; } .svc-hero-grid { gap: 34px; } .svc-hero-text h1 { font-size: 29px; } .svc-hero-text p { font-size: 18px; } .svc-cta h2 { font-size: 22px; } } /* On a phone style.css pins the burger to the left edge (position: absolute) whatever the language. The Hebrew header markup ends with the logo, so it lands on the right; the English markup starts with it, so it sat under the burger. Same answer as index-en.html; the breakpoint is responsive.css's, where the burger appears. */ @media (max-width: 767px) { .header-area .header-item:lang(en) { flex-direction: row-reverse; } } /* Same breakpoint as the home-page banner: the pair stacks, each button up to 280px, centred in the hero and on the band alike. The whole hero text block joins them on the centre line, as on the home page; section heads and step titles already sit there. A benefit's icon moves with its title, while the card's body copy keeps its reading edge. */ @media (max-width: 768px) { .svc-actions { flex-direction: column; align-items: stretch; max-inline-size: 280px; margin-inline: auto; } .svc-hero-text h1, .svc-hero-text p, .svc-benefit h3 { text-align: center; } .svc-benefit-icon { margin-inline: auto; } } /* The project declares prefers-reduced-motion in exactly one other place (landlords/brand.css). Every transform-based affordance above is optional, so all of them are dropped rather than shortened. */ @media (prefers-reduced-motion: reduce) { .svc-step, .svc-benefit, .btn2.svc-btn { transition: none; } .svc-step:hover, .svc-benefit:hover, .btn2.svc-btn:hover, .btn2.svc-btn:focus-visible { transform: none; } } /* ========================================================================== Business type modal — VERBATIM copy of the inline block on index.html, index-en.html and pricing.html (identical on all three, checked 14 Sep 2026). style.css only carries the .modal-open toggle, so without this block the six choices render as a bare list. Keep in step with the home page: if the block changes there, change it here. ========================================================================== */ @keyframes modalFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .business-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .business-type-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 10px; border: 2px solid #e8edf5; border-radius: 12px; cursor: pointer; transition: all 0.25s ease; background: #f8faff; gap: 10px; } .business-type-item:hover { border-color: #2f5aae; background: #eef3ff; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(47, 90, 174, 0.15); } .business-type-item i { font-size: 28px; color: #2f5aae; } .business-type-item span { font-size: 14px; font-weight: 600; color: #333; text-align: center; } .courier-brand-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .courier-brand-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; border: 2px solid #e8edf5; border-radius: 12px; cursor: pointer; transition: all 0.25s ease; background: #f8faff; gap: 10px; text-decoration: none; } .courier-brand-item:hover { border-color: #61ce70; background: #f0faf2; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(97, 206, 112, 0.2); text-decoration: none; } .courier-brand-item img { max-width: 80px; max-height: 40px; object-fit: contain; } .courier-brand-item span { font-size: 14px; font-weight: 600; color: #333; } @media (max-width: 480px) { .business-type-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .business-type-item { padding: 15px 8px; } .business-type-item i { font-size: 24px; } .business-type-item span { font-size: 12px; } }