/* ============================================================ Leads4Tax — Design System Direction: Institutional Fintech Authority Ink-navy foundation · electric-blue action · amber data accent Typography: IBM Plex Sans Hebrew (display) / Assistant (body) / JetBrains Mono (labels) RTL Hebrew first. ============================================================ */ :root { /* ---- brand ---- */ --blue: #0B8FE8; /* action blue, darkened from logo for AA contrast on white */ --blue-bright: #38B6FF; /* logo blue — accents, glows, dark-band text */ --blue-deep: #0668A8; --blue-wash: #EAF6FE; --navy: #081726; /* authority band */ --navy-2: #0E2438; --navy-3: #16354F; --amber: #FFBC7D; /* brand peach — data highlights */ --amber-deep: #E08A34; --amber-wash: #FFF4E8; /* ---- ink ---- */ --ink: #0B1721; --ink-2: #33454F; --ink-3: #5F7280; --ink-4: #8A9AA6; /* ---- surface ---- */ --paper: #FFFFFF; --paper-2: #F6F9FC; /* section wash */ --paper-3: #EDF3F8; --line: #DFE8EF; --line-soft: #EDF2F6; --ok: #12855C; --ok-wash: #E7F6EF; --warn: #B4531B; /* ---- type ---- */ --f-display: "IBM Plex Sans Hebrew", "Assistant", -apple-system, sans-serif; --f-body: "Assistant", "Heebo", -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- geometry ---- */ --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px; --shadow-1: 0 1px 2px rgba(8,23,38,.05), 0 2px 8px rgba(8,23,38,.04); --shadow-2: 0 2px 6px rgba(8,23,38,.05), 0 12px 32px rgba(8,23,38,.08); --shadow-3: 0 4px 12px rgba(8,23,38,.07), 0 28px 64px rgba(8,23,38,.12); --shadow-blue: 0 6px 20px rgba(11,143,232,.28); --wrap: 1180px; --wrap-narrow: 780px; --nav-h: 76px; } /* ============================================================ RESET + MOBILE HORIZONTAL-SCROLL DEFENSE (3-layer, canonical) NOTE: no `transform: translateZ(0)` on body — it would anchor position:fixed children to the document instead of the viewport. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; width: 100%; max-width: 100vw; overflow-x: hidden; /* baseline — supported everywhere */ overscroll-behavior-x: none; /* kills iOS rubber-band */ } /* Upgrade to `clip` on the BODY only. Never on : overflow on the root propagates to the viewport, and a clipped viewport detaches position:sticky painting in Chromium (the sticky nav renders mid-page and the area above it stops painting). `clip` on body is safe — it does not create a scroll container, so sticky children keep positioning against the viewport. */ @supports (overflow-x: clip) { body { overflow-x: clip; } } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { font-family: var(--f-body); font-size: 17px; line-height: 1.72; color: var(--ink); background: var(--paper); direction: rtl; text-align: right; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1; } /* per-section second line of defense */ .nav, .hero, .band, .section, .foot, .cta-strip, .breadcrumb-bar { overflow-x: clip; max-width: 100%; } h1, h2, h3, h4, h5, p, li, td, th, dt, dd, figcaption, blockquote { overflow-wrap: anywhere; } img, svg, video { max-width: 100%; height: auto; display: block; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0 0 .55em; letter-spacing: -0.012em; } h1 { font-size: clamp(2.1rem, 1.35rem + 2.9vw, 3.65rem); line-height: 1.14; font-weight: 700; letter-spacing: -0.018em; } h2 { font-size: clamp(1.6rem, 1.18rem + 1.7vw, 2.45rem); } h3 { font-size: clamp(1.2rem, 1.03rem + .68vw, 1.55rem); } h4 { font-size: 1.12rem; font-family: var(--f-body); font-weight: 700; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } a { color: var(--blue-deep); text-decoration: none; transition: color .16s ease; } a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } strong, b { font-weight: 700; color: var(--ink); } em { font-style: italic; } ::selection { background: var(--blue-bright); color: #051019; } .lede { font-size: clamp(1.06rem, .99rem + .33vw, 1.24rem); line-height: 1.68; color: var(--ink-2); } /* eyebrow — mono data label, the signature of the system */ .eyebrow { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-deep); display: inline-flex; align-items: center; gap: .55em; margin: 0 0 1rem; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--amber-deep); display: block; flex: none; } .eyebrow.on-dark { color: var(--blue-bright); } .eyebrow.on-dark::before { background: var(--amber); } /* ============================================================ LAYOUT ============================================================ */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; } .wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: 22px; } .section { padding-block: clamp(56px, 6.5vw, 104px); } .section--tight { padding-block: clamp(40px, 4.5vw, 68px); } .section--wash { background: var(--paper-2); } .section--line { border-top: 1px solid var(--line-soft); } .section-head { max-width: 720px; margin-bottom: clamp(30px, 3.4vw, 52px); } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head p { color: var(--ink-2); margin-bottom: 0; } .grid { display: grid; gap: clamp(16px, 1.8vw, 26px); } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); } } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-soft); } .nav-in { max-width: var(--wrap); margin-inline: auto; padding: 0 22px; height: var(--nav-h); display: flex; align-items: center; gap: 18px; } .nav-brand { display: flex; align-items: center; flex: none; } .nav-brand img { height: 42px; width: auto; } .nav-links { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; } .nav-links a { color: var(--ink-2); font-weight: 600; font-size: .96rem; padding: 9px 13px; border-radius: var(--r-sm); white-space: nowrap; } .nav-links a:hover { color: var(--ink); background: var(--paper-2); text-decoration: none; } .nav-links a[aria-current="page"] { color: var(--blue-deep); background: var(--blue-wash); } .nav-cta { background: var(--blue); color: #fff !important; padding: 11px 22px !important; border-radius: 999px; font-weight: 700 !important; font-size: .95rem; box-shadow: var(--shadow-blue); flex: none; } .nav-cta:hover { background: var(--blue-deep); text-decoration: none !important; } .nav-toggle { display: none; margin-inline-start: auto; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); width: 44px; height: 40px; cursor: pointer; padding: 0; align-items: center; justify-content: center; } .nav-toggle span { display: block; width: 19px; height: 2px; background: var(--ink); position: relative; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; inset-inline-start: 0; width: 19px; height: 2px; background: var(--ink); } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } @media (max-width: 1040px) { .nav-toggle { display: flex; } .nav-links { position: absolute; top: var(--nav-h); inset-inline: 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 20px; box-shadow: var(--shadow-2); display: none; } .nav-links.open { display: flex; } .nav-links a { padding: 13px 12px; font-size: 1rem; border-radius: var(--r-sm); } .nav-cta { margin-top: 10px; text-align: center; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; background: var(--navy); color: #E8F1F8; padding-block: clamp(56px, 6vw, 96px) clamp(64px, 7vw, 108px); isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(900px 520px at 82% -10%, rgba(56,182,255,.24), transparent 62%), radial-gradient(680px 420px at 8% 108%, rgba(255,188,125,.14), transparent 60%); } /* fine grid texture — the "data" signature */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to left, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(ellipse 92% 78% at 50% 34%, #000 38%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 92% 78% at 50% 34%, #000 38%, transparent 100%); pointer-events: none; } .hero h1 { color: #fff; } .hero h1 .hl { color: var(--blue-bright); position: relative; white-space: nowrap; } .hero .lede { color: #B7CBDC; max-width: 56ch; } .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px, 4vw, 64px); align-items: center; } @media (max-width: 940px) { .hero-grid { grid-template-columns: minmax(0,1fr); } } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-trust { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13); display: flex; flex-wrap: wrap; gap: 10px 26px; } .hero-trust li { list-style: none; font-size: .93rem; color: #A9C0D2; display: flex; align-items: center; gap: 8px; } .hero-trust li::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; background: rgba(56,182,255,.16); border: 1.5px solid var(--blue-bright); } .hero-trust ul { margin: 0; padding: 0; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--f-body); font-weight: 700; font-size: 1rem; padding: 14px 30px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none !important; transition: transform .14s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease; line-height: 1.3; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; } .btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); } .btn-primary:hover { background: var(--blue-deep); box-shadow: 0 10px 28px rgba(11,143,232,.36); } .btn-amber { background: var(--amber); color: #3A2308; box-shadow: 0 6px 20px rgba(224,138,52,.3); } .btn-amber:hover { background: #FFCE9C; } .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); } .btn-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.6); } .btn-outline { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-1); } .btn-outline:hover { border-color: var(--blue); color: var(--blue-deep); } .btn-sm { padding: 10px 20px; font-size: .92rem; } .btn-lg { padding: 17px 38px; font-size: 1.08rem; } .btn-block { width: 100%; } /* ============================================================ FORM CARD (hero + contact) ============================================================ */ .form-card { background: #fff; border-radius: var(--r-xl); padding: clamp(24px, 2.6vw, 34px); box-shadow: var(--shadow-3); border: 1px solid rgba(255,255,255,.6); position: relative; overflow: hidden; } .form-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px; background: linear-gradient(to left, var(--blue), var(--blue-bright) 55%, var(--amber)); } .form-card h2, .form-card h3 { font-size: 1.42rem; margin-bottom: .3em; } .form-card .form-sub { color: var(--ink-3); font-size: .96rem; margin-bottom: 1.4em; } .field { margin-bottom: 15px; } .field label { display: block; font-size: .875rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; } .field .req { color: var(--warn); } .field input, .field select, .field textarea { width: 100%; font-family: var(--f-body); font-size: 1rem; color: var(--ink); padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper-2); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; direction: rtl; } .field textarea { min-height: 104px; resize: vertical; line-height: 1.6; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px var(--blue-wash); } .field input::placeholder, .field textarea::placeholder { color: var(--ink-4); } .field input[type="tel"], .field input[type="email"] { direction: ltr; text-align: right; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } } .form-note { font-size: .82rem; color: var(--ink-4); margin-top: 12px; line-height: 1.55; text-align: center; } .form-ok { padding: 26px 20px; border-radius: var(--r-lg); background: var(--ok-wash); color: #0C5C40; text-align: center; font-weight: 700; font-size: 1.06rem; line-height: 1.6; } .form-err { margin-top: 12px; padding: 11px 14px; border-radius: var(--r); background: #FDECEC; color: #96201F; font-size: .9rem; font-weight: 600; } /* ============================================================ STAT BAND ============================================================ */ .band { background: var(--navy-2); color: #fff; padding-block: clamp(34px, 3.6vw, 54px); position: relative; } .band::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(to left, transparent, var(--blue-bright) 30%, var(--amber) 78%, transparent); } .band .grid { gap: clamp(20px, 2.4vw, 34px); } .stat { text-align: center; } .stat-n { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 3.05rem); line-height: 1; color: var(--blue-bright); display: block; margin-bottom: 8px; letter-spacing: -0.02em; } .stat-n .u { font-size: .55em; color: var(--amber); margin-inline-start: .08em; } .stat-l { font-size: .93rem; color: #A9C0D2; line-height: 1.5; } /* ============================================================ CARDS ============================================================ */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 2.1vw, 30px); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; position: relative; height: 100%; display: flex; flex-direction: column; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #C9DCEA; } .card h3 { font-size: 1.22rem; margin-bottom: .45em; } .card p { color: var(--ink-2); font-size: .97rem; margin-bottom: 0; } .card p + p { margin-top: .8em; } .card .card-link { margin-top: auto; padding-top: 16px; font-weight: 700; font-size: .95rem; } .card .card-link::after { content: " ←"; } .card-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-wash); color: var(--blue-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex: none; } .card-ico svg { width: 23px; height: 23px; stroke-width: 1.8; } .card-ico.amber { background: var(--amber-wash); color: var(--amber-deep); } /* numbered process card */ .step { position: relative; padding-top: 8px; } .step-n { font-family: var(--f-mono); font-weight: 700; font-size: .8rem; color: var(--blue-deep); background: var(--blue-wash); width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .step h3 { font-size: 1.1rem; } /* feature list */ .ticks { list-style: none; margin: 0; padding: 0; } .ticks li { position: relative; padding-inline-start: 30px; margin-bottom: .8em; color: var(--ink-2); line-height: 1.6; } .ticks li:last-child { margin-bottom: 0; } .ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .46em; width: 18px; height: 18px; border-radius: 50%; background: var(--blue-wash); border: 1.5px solid var(--blue); } .ticks li::after { content: ""; position: absolute; inset-inline-start: 5.5px; top: .78em; width: 7px; height: 3.5px; border-inline-start: 2px solid var(--blue-deep); border-bottom: 2px solid var(--blue-deep); transform: rotate(-45deg); } .ticks.on-dark li { color: #B7CBDC; } .ticks.on-dark li::before { background: rgba(56,182,255,.15); border-color: var(--blue-bright); } .ticks.on-dark li::after { border-color: var(--blue-bright); } .ticks.x li::before { background: #FDECEC; border-color: #E08585; } .ticks.x li::after { inset-inline-start: 5px; top: .72em; width: 8px; height: 8px; border: 0; transform: none; background: linear-gradient(to bottom left, transparent 44%, #B33 44%, #B33 56%, transparent 56%), linear-gradient(to bottom right, transparent 44%, #B33 44%, #B33 56%, transparent 56%); } /* ============================================================ PRICING TABLE ============================================================ */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); -webkit-overflow-scrolling: touch; } table.tbl { width: 100%; border-collapse: collapse; min-width: 660px; font-size: .97rem; } table.tbl thead th { background: var(--navy); color: #fff; font-family: var(--f-body); font-weight: 700; font-size: .9rem; text-align: right; padding: 15px 18px; white-space: nowrap; letter-spacing: .01em; } table.tbl tbody td { padding: 16px 18px; border-top: 1px solid var(--line-soft); color: var(--ink-2); vertical-align: top; } table.tbl tbody tr:nth-child(even) { background: var(--paper-2); } table.tbl tbody tr:hover { background: var(--blue-wash); } table.tbl td:first-child { font-weight: 700; color: var(--ink); } .price-cell { font-family: var(--f-display); font-weight: 700; font-size: 1.24rem; color: var(--ink); white-space: nowrap; } .price-cell .vat { font-family: var(--f-body); font-size: .74rem; font-weight: 600; color: var(--ink-4); display: block; } .pill { display: inline-block; font-size: .78rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; font-family: var(--f-body); } .pill-ex { background: var(--amber-wash); color: #8A4A11; border: 1px solid #F0CFA9; } .pill-sh { background: var(--paper-3); color: var(--ink-3); border: 1px solid var(--line); } .pill-new { background: var(--ok-wash); color: var(--ok); border: 1px solid #A9DEC7; } /* price cards */ .price-card { display: flex; flex-direction: column; } .price-card.featured { border-color: var(--blue); box-shadow: 0 4px 14px rgba(11,143,232,.14), 0 24px 56px rgba(8,23,38,.11); } .price-card.featured::before { content: "המומלץ ביותר"; position: absolute; top: -12px; inset-inline-start: 50%; transform: translateX(50%); background: var(--blue); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .03em; padding: 5px 15px; border-radius: 999px; white-space: nowrap; } .price-card .amt { font-family: var(--f-display); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--ink); margin: 6px 0 4px; } .price-card .amt small { font-family: var(--f-body); font-size: .95rem; font-weight: 600; color: var(--ink-3); } .price-card .per { font-size: .85rem; color: var(--ink-4); margin-bottom: 20px; } .price-card .ticks { margin-bottom: 22px; font-size: .94rem; } .price-card .btn { margin-top: auto; } /* ============================================================ CALLOUTS / QUOTES ============================================================ */ .callout { background: var(--blue-wash); border-inline-start: 4px solid var(--blue); border-radius: var(--r); padding: 20px 22px; margin: 26px 0; color: var(--ink-2); } .callout strong { color: var(--ink); } .callout.amber { background: var(--amber-wash); border-inline-start-color: var(--amber-deep); } .callout-t { font-weight: 700; color: var(--ink); display: block; margin-bottom: .35em; } blockquote.q { margin: 30px 0; padding: 0 0 0 0; border-inline-start: 3px solid var(--amber-deep); padding-inline-start: 22px; font-family: var(--f-display); font-size: 1.16rem; line-height: 1.6; color: var(--ink); font-weight: 500; } blockquote.q cite { display: block; margin-top: .7em; font-family: var(--f-body); font-size: .88rem; font-weight: 600; color: var(--ink-3); } /* data highlight inside prose */ .datapoint { font-family: var(--f-display); font-weight: 700; color: var(--blue-deep); font-size: 1.06em; white-space: nowrap; } /* ============================================================ FAQ (native details/summary) ============================================================ */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); background: #fff; } .faq summary { cursor: pointer; list-style: none; padding: 20px 0 20px 44px; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.02rem, .98rem + .18vw, 1.13rem); color: var(--ink); position: relative; transition: color .15s ease; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--blue-deep); } .faq summary::after { content: ""; position: absolute; inset-inline-end: 8px; top: 50%; width: 11px; height: 11px; border-inline-end: 2.2px solid var(--blue); border-bottom: 2.2px solid var(--blue); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; } .faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .faq details[open] summary { color: var(--blue-deep); } .faq .faq-a { padding: 0 0 22px; color: var(--ink-2); max-width: 74ch; } .faq .faq-a p:last-child { margin-bottom: 0; } /* ============================================================ CTA STRIP ============================================================ */ .cta-strip { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color: #fff; padding-block: clamp(46px, 5vw, 76px); position: relative; isolation: isolate; } .cta-strip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(760px 380px at 78% 0%, rgba(56,182,255,.24), transparent 62%); } .cta-strip h2 { color: #fff; margin-bottom: .35em; } .cta-strip p { color: #B7CBDC; max-width: 62ch; margin-bottom: 0; } .cta-strip .cta-in { display: flex; align-items: center; justify-content: space-between; gap: clamp(22px, 3vw, 48px); flex-wrap: wrap; } .cta-strip .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; } /* ============================================================ BREADCRUMBS ============================================================ */ .breadcrumb-bar { background: var(--paper-2); border-bottom: 1px solid var(--line-soft); } .breadcrumb-bar ol { max-width: var(--wrap); margin-inline: auto; padding: 13px 22px; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: .86rem; color: var(--ink-3); } .breadcrumb-bar li { display: flex; align-items: center; gap: 8px; } .breadcrumb-bar li:not(:last-child)::after { content: "‹"; color: var(--ink-4); } .breadcrumb-bar a { color: var(--ink-3); } .breadcrumb-bar a:hover { color: var(--blue-deep); } .breadcrumb-bar li[aria-current] { color: var(--ink); font-weight: 600; } /* ============================================================ PAGE HEADER (interior pages) ============================================================ */ .pagehead { background: var(--navy); color: #fff; padding-block: clamp(44px, 4.6vw, 76px); position: relative; isolation: isolate; } .pagehead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(820px 420px at 84% -14%, rgba(56,182,255,.22), transparent 62%); } .pagehead h1 { color: #fff; max-width: 20ch; } .pagehead .lede { color: #B7CBDC; max-width: 62ch; margin-bottom: 0; } .pagehead-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } /* ============================================================ PROSE (article body) ============================================================ */ .prose { max-width: 74ch; font-size: 1.06rem; } .prose h2 { margin-top: 2.1em; } .prose h2:first-child { margin-top: 0; } .prose h3 { margin-top: 1.7em; } .prose ul, .prose ol { margin: 0 0 1.3em; padding-inline-start: 1.35em; color: var(--ink-2); } .prose li { margin-bottom: .55em; } .prose li::marker { color: var(--blue); font-weight: 700; } .prose img { border-radius: var(--r-lg); margin: 1.8em 0; box-shadow: var(--shadow-1); } .prose .table-wrap { margin: 1.8em 0; } .prose table.tbl { min-width: 520px; font-size: .95rem; } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; } .prose figcaption { font-size: .85rem; color: var(--ink-4); text-align: center; margin-top: -1em; } .toc { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px; margin-bottom: 34px; } .toc-t { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .toc ol { margin: 0; padding-inline-start: 1.2em; } .toc li { margin-bottom: .4em; } .toc a { color: var(--ink-2); font-weight: 600; font-size: .95rem; } .toc a:hover { color: var(--blue-deep); } /* article meta */ .art-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .88rem; color: #A9C0D2; margin-top: 18px; } .art-meta span { display: flex; align-items: center; gap: 6px; } /* ============================================================ BLOG CARDS ============================================================ */ .post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #C9DCEA; } .post-card .thumb { aspect-ratio: 16/9; background: var(--paper-3); overflow: hidden; } .post-card .thumb img { width: 100%; height: 100%; object-fit: cover; } .post-card .body { padding: 22px; display: flex; flex-direction: column; flex: 1; } .post-card .cat { font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 10px; } .post-card h3 { font-size: 1.14rem; line-height: 1.35; margin-bottom: .5em; } .post-card h3 a { color: var(--ink); } .post-card h3 a:hover { color: var(--blue-deep); text-decoration: none; } .post-card p { font-size: .94rem; color: var(--ink-2); margin-bottom: 0; } .post-card .foot-meta { margin-top: auto; padding-top: 16px; font-size: .82rem; color: var(--ink-4); display: flex; gap: 14px; flex-wrap: wrap; } .tagrow { display: flex; flex-wrap: wrap; gap: 8px; } .tag { font-size: .82rem; font-weight: 600; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2); padding: 6px 13px; border-radius: 999px; } a.tag:hover { border-color: var(--blue); color: var(--blue-deep); text-decoration: none; } /* ============================================================ CALCULATOR ============================================================ */ .calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 38px); align-items: start; } @media (max-width: 860px) { .calc { grid-template-columns: minmax(0,1fr); } } .calc-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 2.2vw, 30px); box-shadow: var(--shadow-1); } .calc-out { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: clamp(24px, 2.4vw, 34px); position: sticky; top: calc(var(--nav-h) + 20px); } @media (max-width: 860px) { .calc-out { position: static; } } .calc-out h3 { color: #fff; font-size: 1.2rem; } .calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.11); } .calc-row:last-of-type { border-bottom: 0; } .calc-row .k { color: #A9C0D2; font-size: .93rem; } /* Pure numeric/currency output: isolate as LTR so the bidi algorithm doesn't push neutral characters (+, ₪, %) to the wrong end of the string. */ .calc-row .v { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; color: #fff; white-space: nowrap; direction: ltr; unicode-bidi: isolate; } .calc-hero { margin-top: 18px; padding-top: 20px; border-top: 2px solid rgba(56,182,255,.35); } .calc-hero .k { color: var(--blue-bright); font-weight: 700; font-size: .95rem; } .calc-hero .v { font-size: 2.1rem; color: var(--blue-bright); } .calc-hero .v.neg { color: #FF9E9E; } .calc-note { font-size: .82rem; color: #8FA8BC; margin-top: 16px; line-height: 1.6; } input[type="range"] { width: 100%; accent-color: var(--blue); margin: 4px 0 0; } .range-val { font-family: var(--f-mono); font-weight: 700; font-size: .95rem; color: var(--blue-deep); background: var(--blue-wash); padding: 2px 10px; border-radius: 6px; } /* ============================================================ LOGO / AUTHORITY ROW ============================================================ */ .authority { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; justify-content: center; } .authority-item { display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 600; color: var(--ink-3); } .authority-item svg { width: 19px; height: 19px; color: var(--blue); flex: none; } /* ============================================================ FOOTER ============================================================ */ .foot { background: var(--navy); color: #93AABE; padding-block: clamp(46px, 4.6vw, 68px) 0; font-size: .94rem; } .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 44px); padding-bottom: 40px; } @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } } .foot h4 { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 15px; } .foot ul { list-style: none; margin: 0; padding: 0; } .foot li { margin-bottom: .62em; } .foot a { color: #93AABE; } .foot a:hover { color: var(--blue-bright); text-decoration: none; } .foot-brand img { height: 40px; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: .96; } .foot-brand p { color: #7E96AB; max-width: 40ch; font-size: .92rem; } .foot-contact { margin-top: 16px; } .foot-contact a { color: var(--blue-bright); font-weight: 600; } .foot-bot { border-top: 1px solid rgba(255,255,255,.1); padding-block: 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; font-size: .85rem; color: #6F869B; } .foot-bot nav { display: flex; gap: 18px; flex-wrap: wrap; } /* ============================================================ UTIL ============================================================ */ .center { text-align: center; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 38px; } .mb-0 { margin-bottom: 0 !important; } .muted { color: var(--ink-3); } .small { font-size: .88rem; } .nowrap { white-space: nowrap; } .skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999; background: var(--blue); color: #fff; padding: 12px 20px; font-weight: 700; border-radius: 0 0 var(--r) 0; } .skip:focus { inset-inline-start: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* print */ @media print { .nav, .cta-strip, .foot, .form-card, .btn { display: none !important; } body { font-size: 12pt; color: #000; } .hero, .pagehead, .band { background: #fff !important; color: #000 !important; } .hero h1, .pagehead h1 { color: #000 !important; } }