/** * Dror Zoref — Google Ads landing page. * * Loaded only on page-lp-yeutz.php, and non-render-blocking: the above-the-fold * rules (tokens, @font-face, sticky bar, hero, buttons, glass) are inlined in the * template's . This sheet is everything from #trust downwards. * * Conventions * - Logical properties ONLY (inline-start/end, margin-inline, inset-inline). * There is no RTL override sheet; the page is correct in RTL by construction. * - --dz-brand is a STRUCTURAL colour. It measures 3.13:1 on the ink base and so * never carries text — borders, shadows and gradients only. * - --dz-cta is used for conversion actions and nothing else. * - Glass is never nested. Two overlapping blurred layers is the hard ceiling. */ /* ─── shared utilities ────────────────────────────────────────────────────── The parent theme's stylesheet is dequeued on this template, so WordPress's own .screen-reader-text is defined here rather than inherited. */ .screen-reader-text, .dz-sr { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .dz-sr:focus, .screen-reader-text:focus { clip-path: none; inline-size: auto; block-size: auto; padding: 12px 20px; background: var(--dz-cta); color: var(--dz-ink); z-index: 1000; } .dz-lede { color: var(--dz-muted); max-inline-size: 62ch; margin-block-end: 2rem; } .dz-link { color: var(--dz-cta); } .dz-opt { color: var(--dz-muted); font-weight: 400; font-size: .88em; } main > section { padding-block: clamp(48px, 7vw, 92px); } section h2 { font-size: clamp(25px, 3.4vw, 38px); } /* ─── sticky bar (below-fold refinements) ───────────────────────────────── */ .dz-bar__tel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 700; white-space: nowrap; /* Tap target. This is the primary one-tap conversion on mobile. */ min-block-size: 44px; min-inline-size: 44px; padding-inline: 8px; border-radius: 10px; } /* Phone numbers are LTR runs inside an RTL paragraph. Without isolation the browser reorders the digits and 050-7448443 renders backwards. */ .dz-bar__telnum, .dz-contacts__v, [dir="ltr"] { unicode-bidi: isolate; } @media (max-width: 600px) { .dz-bar__telnum { display: none; } /* icon-only call button on small screens */ .dz-bar__logo img { block-size: 28px; } } /* ─── hero form ─────────────────────────────────────────────────────────── */ .dz-heroform { border-radius: var(--dz-r); padding: clamp(18px, 2.4vw, 26px); } .dz-heroform__t { font-size: 20px; margin-block-end: 1rem; } /* ─── forms ─────────────────────────────────────────────────────────────── */ /* Inputs are deliberately OPAQUE. Text a visitor types must never sit on a blurred surface, and an opaque input also stops glass stacking on glass. */ .dz-field { margin-block-end: 14px; } .dz-field > label { display: block; font-size: 14.5px; font-weight: 700; margin-block-end: 6px; color: var(--dz-text); } .dz-field input[type="text"], .dz-field input[type="tel"], .dz-field input[type="email"], .dz-field select { inline-size: 100%; padding: 13px 14px; font: inherit; font-size: 16px; /* 16px stops iOS Safari zooming the page on focus */ color: #0E1424; background: #FFFFFF; border: 1.5px solid #C3CBDC; border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; } .dz-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #0E1424 50%), linear-gradient(135deg, #0E1424 50%, transparent 50%); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; /* Logical positioning: the chevron sits on the inline-end edge in both directions. */ background-position: left 18px top 22px, left 12px top 22px; padding-inline-end: 14px; padding-inline-start: 38px; } .dz-field input:focus, .dz-field select:focus { outline: none; border-color: var(--dz-brand); box-shadow: 0 0 0 4px rgba(51, 88, 211, .28); } .dz-field input[aria-invalid="true"], .dz-field select[aria-invalid="true"] { border-color: #E4573D; box-shadow: 0 0 0 4px rgba(228, 87, 61, .22); } .dz-field__err { display: none; font-size: 13.5px; font-weight: 700; color: #FFC4B8; margin-block-start: 6px; } .dz-field__err:not(:empty) { display: block; } .dz-field--check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-block: 16px; } .dz-field--check input { inline-size: 24px; block-size: 24px; margin-block-start: 1px; flex: none; accent-color: var(--dz-cta); } .dz-field--check label { font-size: 14.5px; line-height: 1.55; color: var(--dz-muted); } .dz-field--check label a { color: var(--dz-cta); text-underline-offset: 3px; } .dz-field--check .dz-field__err { grid-column: 1 / -1; } .dz-btn--block { inline-size: 100%; } .dz-form__error { background: rgba(228, 87, 61, .16); border: 1px solid rgba(228, 87, 61, .5); color: #FFD5CC; padding: 10px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 700; } .dz-form__note { font-size: 13.5px; color: var(--dz-muted); text-align: center; margin-block: 12px 0; } /* Honeypot: off-screen but still a real, focusable-by-bots field. display:none would let smarter bots skip it. */ .dz-hp { /* Off-screen VERTICALLY on purpose. inset-inline-start:-9999px resolves to right:-9999px under dir=rtl, which pushes the field off the right edge and adds ~10000px to the document width. Vertical offset is direction-agnostic. */ position: absolute; inset-block-start: -9999px; inset-inline-start: 0; inline-size: 1px; block-size: 1px; overflow: hidden; } /* Submit pending */ .dz-form.is-busy .dz-btn--cta { opacity: .72; pointer-events: none; } .dz-btn__spinner { display: none; } .dz-form.is-busy .dz-btn__spinner { display: block; inline-size: 16px; block-size: 16px; border: 2px solid rgba(11, 16, 32, .3); border-block-start-color: var(--dz-ink); border-radius: 50%; animation: dz-spin .7s linear infinite; } @keyframes dz-spin { to { transform: rotate(360deg); } } /* Success */ .dz-success { text-align: center; padding-block: 14px; } .dz-success__mark { color: var(--dz-cta); margin-block-end: 8px; } .dz-success h3 { font-size: 22px; } .dz-success p { color: var(--dz-muted); } .dz-success__alt { font-size: 15px; } /* ─── trust ─────────────────────────────────────────────────────────────── */ .dz-stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-block-end: 44px; } .dz-stat { border-radius: var(--dz-r); padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; } .dz-stat__n { font-size: clamp(34px, 5vw, 46px); font-weight: 700; line-height: 1; color: var(--dz-cta); font-variant-numeric: tabular-nums; /* stops the counter jittering as digits change */ /* "100+" is a self-contained LTR run. Without this the trailing plus reorders to the left of the digits and reads "+100". */ direction: ltr; unicode-bidi: isolate; align-self: flex-start; } .dz-stat__l { color: var(--dz-muted); font-size: 15.5px; } .dz-trust__lead { color: var(--dz-muted); font-size: 15px; text-align: center; margin-block-end: 18px; } /* Marquee, hand-built. The track holds two identical sets, so translating by exactly -50% lands on a seam-free repeat. Reserved height prevents CLS. */ .dz-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); min-block-size: 76px; } .dz-marquee__track { display: flex; inline-size: max-content; animation: dz-scroll 42s linear infinite; will-change: transform; } .dz-marquee:hover .dz-marquee__track, .dz-marquee:focus-within .dz-marquee__track { animation-play-state: paused; } .dz-marquee__set { display: flex; align-items: center; gap: clamp(28px, 5vw, 60px); list-style: none; margin: 0; padding-inline: clamp(14px, 2.5vw, 30px); } .dz-marquee__set img { block-size: 46px; inline-size: auto; max-inline-size: none; object-fit: contain; opacity: .8; filter: grayscale(1) brightness(1.9); transition: opacity .2s ease, filter .2s ease; } .dz-marquee__set img:hover { opacity: 1; filter: none; } /* The track is duplicated, so -50% is exactly one set. */ @keyframes dz-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ─── services ──────────────────────────────────────────────────────────── */ .dz-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .dz-card { border-radius: var(--dz-r); padding: 26px 24px 22px; display: flex; flex-direction: column; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .dz-card:hover, .dz-card:focus-within { transform: translateY(-3px); border-color: rgba(51, 88, 211, .65); box-shadow: 0 14px 34px rgba(0, 0, 0, .32); } .dz-card h3 { font-size: 20px; } .dz-card p { color: var(--dz-muted); font-size: 15.5px; flex: 1; } .dz-card__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--dz-cta); text-decoration: none; padding-block: 10px; min-block-size: 44px; } .dz-card__cta:hover { text-decoration: underline; text-underline-offset: 4px; } /* The arrow points along the reading direction: leftwards in RTL. */ .dz-card__arrow { transition: transform .18s ease; } .dz-card__cta:hover .dz-card__arrow { transform: translateX(-4px); } /* ─── why ───────────────────────────────────────────────────────────────── */ /* A grid of parallel reasons — deliberately NOT numbered 01–05 as on the main site. These are reasons, not a sequence. */ .dz-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px 34px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .dz-reason { border-inline-start: 3px solid var(--dz-brand); padding-inline-start: 18px; } .dz-reason h3 { font-size: 18.5px; margin-block-end: .35em; } .dz-reason p { color: var(--dz-muted); font-size: 15.5px; margin: 0; max-inline-size: 60ch; } /* ─── about ─────────────────────────────────────────────────────────────── */ /* Opaque by design. No glass, no blur: this is the longest read on the page and the audience skews older. */ .dz-about { background: var(--dz-paper); color: #10182B; } .dz-about h2 { color: #0B1020; } .dz-about__grid { display: grid; gap: clamp(24px, 4vw, 52px); align-items: center; } .dz-about__media img { border-radius: var(--dz-r); inline-size: 100%; max-inline-size: 340px; object-fit: cover; box-shadow: 0 18px 40px rgba(11, 16, 32, .18); } .dz-about__copy p { max-inline-size: 62ch; color: #26304A; } /* On the light section the CTA keeps its amber, but drops the glow that only reads correctly against the dark base. */ .dz-btn--onpaper { box-shadow: 0 6px 18px rgba(11, 16, 32, .18); } .dz-btn--onpaper:hover { box-shadow: 0 12px 26px rgba(11, 16, 32, .26); } @media (min-width: 860px) { .dz-about__grid { grid-template-columns: 340px 1fr; } } /* ─── reviews ───────────────────────────────────────────────────────────── */ /* No star ratings and no review counts: the "5.0 based on 1,234 ratings" line on the live site is demo data repeated identically under all three names. */ .dz-quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; } .dz-quote { border-radius: var(--dz-r); padding: 24px; } .dz-quote__fig { margin: 0; } .dz-quote blockquote { margin: 0 0 18px; } .dz-quote blockquote p { margin: 0; font-size: 15.5px; color: var(--dz-text); } .dz-quote__by { display: flex; align-items: center; gap: 12px; border-block-start: 1px solid var(--dz-line); padding-block-start: 14px; } .dz-quote__by img { inline-size: 46px; block-size: 46px; border-radius: 50%; object-fit: cover; flex: none; } .dz-quote__by strong { display: block; font-size: 15.5px; } .dz-quote__by em { display: block; font-style: normal; font-size: 13.5px; color: var(--dz-muted); } /* ─── faq ───────────────────────────────────────────────────────────────── */ .dz-faq__wrap { max-inline-size: 820px; } .dz-acc { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .dz-acc__item { border-radius: 14px; overflow: hidden; } .dz-acc__h { margin: 0; font-size: inherit; } .dz-acc__btn { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: 0; color: inherit; font: inherit; font-weight: 700; font-size: 16.5px; text-align: start; /* logical: right-aligned in RTL */ padding: 18px 20px; cursor: pointer; } .dz-acc__ico { flex: none; inline-size: 14px; block-size: 14px; position: relative; } .dz-acc__ico::before, .dz-acc__ico::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: 100%; block-size: 2px; background: var(--dz-cta); transform: translateY(-50%); transition: transform .2s ease, opacity .2s ease; } .dz-acc__ico::after { transform: translateY(-50%) rotate(90deg); } .dz-acc__btn[aria-expanded="true"] .dz-acc__ico::after { transform: translateY(-50%) rotate(0); opacity: 0; } .dz-acc__panel { padding: 0 20px 18px; } .dz-acc__panel p { margin: 0; color: var(--dz-muted); font-size: 15.5px; max-inline-size: 62ch; } /* ─── contact ───────────────────────────────────────────────────────────── */ .dz-contact { background: var(--dz-ink-2); } .dz-contact__grid { display: grid; gap: clamp(26px, 4vw, 48px); align-items: start; } .dz-contact__copy p { color: var(--dz-muted); max-inline-size: 54ch; } .dz-contacts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; } .dz-contacts a { display: flex; align-items: baseline; gap: 12px; text-decoration: none; padding: 13px 16px; border: 1px solid var(--dz-line); border-radius: 12px; transition: border-color .16s ease, background-color .16s ease; } .dz-contacts a:hover { border-color: rgba(245, 165, 36, .6); background: rgba(255, 255, 255, .04); } .dz-contacts__k { font-size: 13.5px; color: var(--dz-muted); min-inline-size: 68px; } .dz-contacts__v { font-weight: 700; } .dz-formshell { border-radius: var(--dz-r); padding: clamp(20px, 3vw, 32px); } .dz-formshell__t { font-size: 21px; margin-block-end: .4em; } /* Set by JS when a service card sends the visitor here. Empty until then, so it takes no vertical space and cannot shift the form. */ .dz-formshell__topic:empty { display: none; } .dz-formshell__topic { font-size: 14.5px; color: var(--dz-cta); font-weight: 700; margin-block-end: 1rem; } @media (min-width: 900px) { .dz-contact__grid { grid-template-columns: 1fr 1fr; } } /* ─── footer ────────────────────────────────────────────────────────────── */ /* Minimal by design: no nav, no blog links, no social. Every extra link leaks paid traffic away from the one conversion. */ .dz-foot { padding-block: 40px; border-block-start: 1px solid var(--dz-line); text-align: center; } .dz-foot__in { display: grid; justify-items: center; gap: 12px; } .dz-foot__logo { block-size: 34px; inline-size: auto; } .dz-foot__desc { color: var(--dz-muted); font-size: 14.5px; max-inline-size: 56ch; margin: 0; } .dz-foot__links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; } .dz-foot__links a { color: var(--dz-muted); font-size: 14.5px; text-underline-offset: 3px; } .dz-foot__copy { font-size: 13.5px; color: var(--dz-muted); margin: 0; } /* ─── floating mobile CTA dock ──────────────────────────────────────────── */ .dz-dock { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60; display: none; gap: 8px; padding: 10px 12px; /* Clears the iOS home indicator. */ padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--dz-line); transform: translateY(102%); transition: transform .28s ease; } .dz-dock.is-in { transform: translateY(0); } .dz-dock__a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-block-size: 48px; /* comfortable touch target */ border-radius: 12px; border: 1px solid var(--dz-line); font-weight: 700; font-size: 15px; text-decoration: none; } .dz-dock__a--cta { background: var(--dz-cta); color: var(--dz-ink); border-color: transparent; flex: 1.35; } @media (max-width: 767px) { .dz-dock { display: flex; } /* Keep the dock from covering the submit button at the end of the page. */ .dz-foot { padding-block-end: 96px; } } /* ─── motion & transparency preferences ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .dz-marquee__track { animation: none; transform: none; } .dz-marquee { overflow-x: auto; } /* still reachable, just not moving */ .dz-dock { transition: none; } .dz-card:hover { transform: none; } } @media (prefers-reduced-transparency: reduce) { .dz-glass { background: #1E2331; -webkit-backdrop-filter: none; backdrop-filter: none; } .dz-contact .dz-glass { background: #232B42; } } /* Forced-colors (Windows high contrast): let the OS palette win. */ @media (forced-colors: active) { .dz-glass { border: 1px solid CanvasText; } .dz-btn--cta { border: 2px solid CanvasText; } } /* ─── anchor scrolling ──────────────────────────────────────────────────── */ /* The sticky bar would otherwise cover the top of whatever section is jumped to. scroll-margin keeps section headings visible after an in-page jump — including the no-JS case, where the links are plain anchors. */ html { scroll-behavior: smooth; } section[id], [id="top"] { scroll-margin-block-start: calc(var(--dz-bar) + 14px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }