/* ────────────────────────────────────────────────────────────────────────── BlueHous campaign landing pages — design system. One stylesheet for all four pages, two Hebrew and two English. The class names are the contract with the four HTML files: the whole look is defined here, so it can change without touching a single page. Direction is handled with logical properties throughout. A page sets dir="rtl" on and nothing else changes. ────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: "Noto Sans Hebrew"; src: url("/lp/fonts/NotoSansHebrew.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { /* Ground. Near-black rather than navy: the photographs carry the colour, and a true dark is what makes the electric blue read as electric. */ --ink-0: #07070e; --ink-1: #0d0d1a; --blue: #1a1ae5; --blue-lift: #3a3aff; --cyan: #29e8ff; --canvas: #f6f6f9; --card: #ffffff; --tint: #eeeef8; --line: rgba(10, 10, 30, 0.09); --line-strong: rgba(10, 10, 30, 0.16); --line-dark: rgba(255, 255, 255, 0.12); --ink: #0c0c14; --body: #4a4a5a; --muted: #6e6e80; --on-dark: #ffffff; --on-dark-muted: #b8bede; --danger: #b91c1c; --danger-surface: #fef2f2; --danger-line: #fecaca; --success: #15803d; --success-surface: #f0fdf4; --success-line: #bbf7d0; --r-card: 14px; --r-btn: 10px; --r-pill: 999px; --r-lg: 20px; /* Two elevation levels, no more, and alphas under 12%. Heavy shadows are the fastest way to make a page look like a template. */ --sh-card: 0 1px 2px rgba(10, 10, 30, 0.04), 0 8px 24px -12px rgba(10, 10, 30, 0.1); --sh-panel: 0 2px 8px rgba(10, 10, 30, 0.06), 0 32px 64px -24px rgba(10, 10, 30, 0.28); --sh-cta: 0 6px 20px -6px rgba(26, 26, 229, 0.55); --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --wrap: 1240px; --sec-y: clamp(56px, 7vw, 104px); /* Type. Bigger and tighter than a content site: a landing page has one headline and it should behave like a poster. */ --fs-h1: clamp(2.6rem, 1.4rem + 4.4vw, 5rem); --fs-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem); --fs-h3: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); --fs-lead: clamp(1.075rem, 1rem + 0.35vw, 1.25rem); --fs-stat: clamp(2.6rem, 1.5rem + 3.4vw, 4rem); /* One easing family, three durations. Consistency reads as considered; a different curve per component reads as unfinished. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-press: 120ms; --t-hover: 200ms; --t-enter: 720ms; --font: "Noto Sans Hebrew", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color-scheme: only light; /* Grain tile, reused by every dark surface. A flat gradient is the most template-looking thing on a page; film would have left this. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); } /* ── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; /* clip, not hidden: `hidden` turns the body into a scroll container and kills position: sticky in every descendant. */ overflow-x: clip; background: var(--card); color: var(--body); font-family: var(--font); font-size: 17px; line-height: 1.62; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: var(--blue); text-decoration: none; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, table { margin: 0; } ul { padding: 0; list-style: none; } :where(a, button, input, textarea, summary):focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--blue); color: var(--on-dark); } /* ── Layout ─────────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: max(env(safe-area-inset-left), clamp(20px, 4.5vw, 56px)); } .narrow { max-width: 820px; } .sec { position: relative; padding-block: var(--sec-y); } .sec-canvas { background: var(--canvas); } /* Dark section: near-black, grain over it, and a single low-saturation bloom behind the heading, which is what stops it reading as a rectangle of paint. */ .sec-navy { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-0); color: var(--on-dark-muted); color-scheme: dark; } .sec-navy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain), radial-gradient(90% 120% at 12% 0%, color-mix(in srgb, var(--blue) 34%, transparent), transparent 62%); background-size: 240px 240px, auto; } [dir="rtl"] .sec-navy::before { background-position: 0 0, right top; } .grid { display: grid; gap: var(--s4); } /* auto-fit rather than breakpoints: a three-card row and a four-card row need no media query of their own, and neither breaks at an odd width. */ .g-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .g-3 { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); } .g-4 { grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); } /* ── Type ───────────────────────────────────────────────────────────────── */ /* The eyebrow carries a drawn rule. On a page of headings it is the small signature that repeats, and it gives each section an entrance. */ .eyebrow { display: flex; align-items: center; gap: var(--s3); margin-block-end: var(--s4); color: var(--blue); font-size: 0.75rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; } .eyebrow::before { content: ""; flex: none; width: 34px; height: 2px; border-radius: 2px; background: currentColor; transform-origin: left center; } [dir="rtl"] .eyebrow::before { transform-origin: right center; } .sec-navy .eyebrow, .hero .eyebrow, .band .eyebrow { color: var(--cyan); } h1, .h1 { color: var(--ink); font-size: var(--fs-h1); font-weight: 700; line-height: 0.99; letter-spacing: -0.032em; text-wrap: balance; } h2, .h2 { color: var(--ink); font-size: var(--fs-h2); font-weight: 700; line-height: 1.06; letter-spacing: -0.026em; text-wrap: balance; } h3, .h3, .h3-as-h2 { color: var(--ink); font-size: var(--fs-h3); font-weight: 650; line-height: 1.28; letter-spacing: -0.014em; } /* The second half of a split headline: lighter weight and a step down in ink, so the two lines read as one sentence with an emphasis rather than as two competing headlines. */ .soft { display: block; font-weight: 300; letter-spacing: -0.024em; color: color-mix(in srgb, currentColor 74%, transparent); } p { text-wrap: pretty; } .lead { max-width: 60ch; margin-block-start: var(--s4); color: var(--body); font-size: var(--fs-lead); line-height: 1.6; } .sec-navy h2, .sec-navy h3, .sec-navy .h2, .sec-navy .h3-as-h2 { color: var(--on-dark); } .sec-navy .lead, .sec-navy p { color: var(--on-dark-muted); } /* Heading and lead sit side by side from tablet up. Stacked in a narrow column inside a wide shell they leave two thirds of every section empty, which is what makes a page read as unfinished rather than as spacious. */ .head { position: relative; margin-block-end: var(--s7); } .head .lead { max-width: 52ch; margin-block-start: var(--s4); } @media (min-width: 920px) { .head { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: end; gap: var(--s7); } .head .eyebrow { grid-area: 1 / 1; } .head h2, .head .h2, .head .h3-as-h2 { grid-area: 2 / 1; } .head .lead { grid-area: 2 / 2; margin-block-start: 0; padding-block-end: 8px; } .head.center { display: block; max-width: 62ch; } } .center { margin-inline: auto; text-align: center; } .center .eyebrow { justify-content: center; } /* A closing remark set apart by a rule on the reading edge rather than a tinted box: an aside in a document, not a callout in an app. */ .note { margin-block-start: var(--s6); padding-inline-start: var(--s5); border-inline-start: 2px solid var(--blue); color: var(--ink); font-size: 1.02rem; line-height: 1.6; } .sec-navy .note { border-inline-start-color: var(--cyan); color: var(--on-dark); } .src { margin-block-start: var(--s5); color: var(--muted); font-size: 0.75rem; line-height: 1.55; } .sec-navy .src { color: rgba(184, 190, 222, 0.66); } /* Hebrew takes no letter-spacing and has no small caps. Chrome and Safari add tracking to the right of a glyph while Firefox adds it at the reading end, so any tracking in an RTL run renders differently per engine. */ [lang="he"] .eyebrow, [lang="he"] h1, [lang="he"] h2, [lang="he"] h3, [lang="he"] .h1, [lang="he"] .h2, [lang="he"] .h3, [lang="he"] .h3-as-h2, [lang="he"] .soft, [lang="he"] .stat b, [lang="he"] .tbl th, [lang="he"] .badge, [lang="he"] .stat .cap, [lang="he"] .btn { letter-spacing: normal; } [lang="he"] .eyebrow, [lang="he"] .tbl thead th, [lang="he"] .badge, [lang="he"] .stat .cap { text-transform: none; font-size: 0.875rem; } /* Hebrew has no ascender/descender relief at display sizes, so the same cap height that reads as confident in Latin reads as shouting. One step down, and the line can breathe. */ [lang="he"] h1, [lang="he"] .h1 { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.9rem); line-height: 1.14; } [lang="he"] h2, [lang="he"] .h2, [lang="he"] .band blockquote { font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.75rem); } [lang="he"] h2, [lang="he"] .h2 { line-height: 1.18; } [lang="he"] body, [lang="he"] .lead { line-height: 1.7; } /* ── Pills and badges ───────────────────────────────────────────────────── */ .pills { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s6); } .pill { display: inline-flex; align-items: center; gap: var(--s2); padding: 9px 17px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-size: 0.875rem; font-weight: 600; line-height: 1.3; } .pill svg { flex: none; width: 16px; height: 16px; color: var(--blue); } .hero .pill, .sec-navy .pill, .band .pill { background: rgba(255, 255, 255, 0.07); border-color: var(--line-dark); color: var(--on-dark); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); } .hero .pill svg, .sec-navy .pill svg, .band .pill svg { color: var(--cyan); } .badge { display: inline-flex; align-items: center; gap: var(--s2); padding: 8px 16px; border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--cyan); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); } @media (prefers-reduced-motion: no-preference) { .badge i { animation: ping 2.6s var(--ease) infinite; } } @keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 56px; padding: 16px 32px; border: 0; border-radius: var(--r-btn); background: var(--blue); color: var(--on-dark); font: inherit; font-size: 1rem; font-weight: 650; line-height: 1.2; letter-spacing: -0.004em; text-align: center; cursor: pointer; overflow: hidden; box-shadow: var(--sh-cta); transition: background var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), transform var(--t-press) var(--ease); } /* A light sweep crossing the button on hover. One gradient, no extra element, and it is the detail that makes the primary action feel built rather than filled in. */ .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 620ms var(--ease-out); } @media (any-hover: hover) { .btn:hover { background: var(--blue-lift); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--blue) 70%, transparent); } .btn:hover::after { transform: translateX(120%); } .foot a:hover { text-decoration: underline; } } .btn:active { transform: translateY(1px) scale(0.995); } .btn[disabled] { opacity: 0.6; cursor: not-allowed; box-shadow: none; } .btn-block { width: 100%; } .btn-ghost { background: transparent; border: 1px solid var(--line-dark); color: var(--on-dark); box-shadow: none; } @media (any-hover: hover) { .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--on-dark); box-shadow: none; } } /* ── Cards ──────────────────────────────────────────────────────────────── */ /* Separation is a hairline. The accent rule across the top grows on hover, and that is the whole hover state: no lift, no shadow bloom. */ .card { position: relative; padding: var(--s6) var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease); } .card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: linear-gradient(to right, var(--blue), var(--cyan)); transform: scaleX(0); transform-origin: left center; transition: transform 420ms var(--ease-out); } [dir="rtl"] .card::before { transform-origin: right center; } @media (any-hover: hover) { .card:hover { border-color: color-mix(in srgb, var(--blue) 26%, transparent); } .card:hover::before { transform: scaleX(1); } } .sec-canvas .card { box-shadow: var(--sh-card); } .card h3 { margin-block-end: var(--s3); } .card p { font-size: 1rem; line-height: 1.62; } .sec-navy .card { background: rgba(255, 255, 255, 0.04); border-color: var(--line-dark); box-shadow: none; } .sec-navy .card p { color: var(--on-dark-muted); } .card-accent { border-color: color-mix(in srgb, var(--blue) 40%, transparent); } .ico { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-block-end: var(--s5); border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(160deg, var(--tint), transparent); color: var(--blue); } .sec-navy .ico { border-color: var(--line-dark); background: linear-gradient(160deg, rgba(41, 232, 255, 0.14), transparent); color: var(--cyan); } .ico svg { width: 20px; height: 20px; } /* Compact variant. A section holding five or six points does not need five or six boxes: as ruled rows it says the same thing in a third of the height. */ .grid.list { gap: 0; column-gap: var(--s8); grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } .grid.list .card { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s4); align-items: start; padding: var(--s5) 0; border: 0; border-block-start: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; } .grid.list .card::before { height: 1px; } .grid.list .ico { grid-row: 1 / span 2; width: 24px; height: 24px; margin: 2px 0 0; border: 0; border-radius: 0; background: none; } .grid.list .ico svg { width: 19px; height: 19px; } .grid.list h3 { grid-column: 2; margin-block-end: 0; } .grid.list p { grid-column: 2; margin-block-start: 4px; font-size: 0.97rem; } .sec-navy .grid.list .card { border-block-start-color: var(--line-dark); } /* ── Stats ──────────────────────────────────────────────────────────────── */ /* Ruled, not boxed, and set very large. A row of boxed numbers reads as a dashboard; a row of ruled ones reads as a report. */ .stats { display: grid; gap: var(--s6) var(--s8); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-block-start: var(--s7); } .stat { position: relative; padding-block-start: var(--s5); border-block-start: 1px solid var(--line-strong); } .sec-navy .stat { border-block-start-color: var(--line-dark); } .stat b { display: block; font-size: var(--fs-stat); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 0.94; letter-spacing: -0.04em; background: linear-gradient(120deg, var(--blue) 10%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .sec-navy .stat b { background: linear-gradient(120deg, #ffffff 8%, var(--cyan) 92%); -webkit-background-clip: text; background-clip: text; } .stat .cap { display: block; margin-block: var(--s4) var(--s2); color: var(--ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; line-height: 1.5; text-transform: uppercase; } .sec-navy .stat .cap { color: var(--on-dark); } .stat p { font-size: 0.95rem; line-height: 1.58; } /* ── Trust strip ────────────────────────────────────────────────────────── */ .strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3) var(--s8); padding: var(--s5) var(--s6); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); box-shadow: var(--sh-card); } .strip li { display: flex; align-items: center; gap: var(--s2); color: var(--ink); font-size: 0.95rem; font-weight: 600; } .strip svg { flex: none; width: 18px; height: 18px; color: var(--blue); } /* ── Steps ──────────────────────────────────────────────────────────────── */ .steps { counter-reset: step; margin-block-start: var(--s6); } .steps li { position: relative; counter-increment: step; padding-inline-start: 74px; padding-block-end: var(--s6); } .steps li:last-child { padding-block-end: 0; } .steps li::before { content: counter(step, decimal-leading-zero); position: absolute; inset-block-start: 0; inset-inline-start: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--card); color: var(--blue); font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; } .steps li::after { content: ""; position: absolute; inset-block: 58px 6px; inset-inline-start: 24px; width: 1px; background: linear-gradient(to bottom, var(--line-strong), transparent); } .steps li:last-child::after { content: none; } .sec-navy .steps li::before { background: var(--ink-1); border-color: var(--line-dark); color: var(--cyan); } .sec-navy .steps li::after { background: linear-gradient(to bottom, var(--line-dark), transparent); } .steps h3 { margin-block-end: var(--s2); padding-block-start: 11px; } .steps p { font-size: 0.99rem; line-height: 1.62; } /* Four or five steps stacked is the tallest block on the page. Two columns halve it, and the numbering still reads in order because a grid fills row by row. */ @media (min-width: 920px) { .steps.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); } .steps.two li:nth-last-child(-n + 2) { padding-block-end: 0; } .steps.two li:nth-last-child(-n + 2)::after { content: none; } } /* ── Tables ─────────────────────────────────────────────────────────────── */ /* Horizontal rules only. No vertical gridlines, no zebra, no outer box: that is the whole difference between a table that reads as a document and one that reads as a spreadsheet. */ .tbl-wrap { overflow-x: auto; margin-block-start: var(--s6); /* The cut at the scroll edge looks deliberate rather than clipped. */ mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); } @media (min-width: 720px) { .tbl-wrap { mask-image: none; } } .tbl { width: 100%; min-width: 580px; border-collapse: collapse; text-align: start; } .tbl caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tbl thead th { padding: 0 var(--s5) var(--s3); border-block-end: 1px solid var(--line-strong); color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-align: start; text-transform: uppercase; white-space: nowrap; } .tbl thead th:first-child, .tbl tbody th { padding-inline-start: 0; } .tbl tbody th, .tbl tbody td { padding: var(--s5); border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; transition: background var(--t-hover) var(--ease); } .tbl tbody th { color: var(--ink); font-weight: 650; } .tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-block-end: 0; } @media (any-hover: hover) { .tbl tbody tr:hover th, .tbl tbody tr:hover td { background: color-mix(in srgb, var(--blue) 3.5%, transparent); } } .tbl td { font-size: 0.99rem; line-height: 1.58; } .tbl .val { color: var(--blue); font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .tbl .alt { color: var(--muted); font-size: 0.95rem; } /* ── Header ─────────────────────────────────────────────────────────────── */ /* Logo and one badge. No navigation anywhere: a landing page must not offer an exit from the click that was paid for. */ .hdr { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 5; padding-block: var(--s5); } .hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); } .hdr img { width: 172px; height: 49px; } @media (max-width: 640px) { .hdr img { width: 132px; height: 38px; } .hdr .badge { display: none; } } /* ── Hero ───────────────────────────────────────────────────────────────── */ .hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-0); color: var(--on-dark); color-scheme: dark; } .hero > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.045); } /* A slow drift so the fold is never completely still. 26s and a few percent of travel: enough to feel alive, far too slow to compete with reading. */ @media (prefers-reduced-motion: no-preference) { .hero > img { animation: drift 26s var(--ease) infinite alternate; } } @keyframes drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(0, -1.4%, 0); } } /* Directional, not flat. A scrim heavy enough to carry white type across the whole frame buries the photograph, which is what makes a hero look like an empty coloured box. This one is heavy only on the edge the headline sits on. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--grain), linear-gradient( to bottom, rgba(7, 7, 14, 0.5) 0%, rgba(7, 7, 14, 0.06) 34%, rgba(7, 7, 14, 0.16) 70%, rgba(7, 7, 14, 0.62) 100% ), linear-gradient( to var(--scrim-dir, right), rgba(7, 7, 14, 0.9) 0%, rgba(7, 7, 14, 0.66) 26%, rgba(7, 7, 14, 0.14) 56%, rgba(7, 7, 14, 0.02) 100% ); background-size: 240px 240px, auto, auto; } [dir="rtl"] .hero::after { --scrim-dir: left; } /* Content sits above the photograph and its scrim. */ .hero > .wrap, .band > .wrap, .band > blockquote { position: relative; z-index: 2; } .hdr { z-index: 5; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); align-items: center; gap: clamp(36px, 4vw, 72px); padding-block: clamp(116px, 12vw, 152px) clamp(64px, 8vw, 96px); } .hero h1 { color: var(--on-dark); } /* Hero sub-copy runs far tighter than body copy. A 60ch line under a display headline reads as a paragraph, and a paragraph in a hero gets skipped. */ .hero .lead { max-width: 40ch; color: var(--on-dark-muted); } @media (max-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1fr); padding-block: clamp(100px, 20vw, 128px) var(--s7); } } /* Staggered entrance. The hero is the one place a page gets to make an entrance, and the order is the reading order. */ @media (prefers-reduced-motion: no-preference) { .hero .eyebrow, .hero h1, .hero .lead, .hero .pills, .hero .form-card { animation: enter var(--t-enter) var(--ease-out) both; } .hero .eyebrow { animation-delay: 60ms; } .hero h1 { animation-delay: 140ms; } .hero .lead { animation-delay: 260ms; } .hero .pills { animation-delay: 360ms; } .hero .form-card { animation-delay: 200ms; } } @keyframes enter { from { opacity: 0; /* translateY only. translateX runs the wrong way under dir="rtl". */ transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } } /* ── Photo band ─────────────────────────────────────────────────────────── */ .band { position: relative; isolation: isolate; overflow: clip; display: grid; align-items: center; min-height: clamp(320px, 40vw, 460px); padding-block: var(--s8); background: var(--ink-0); color: var(--on-dark); color-scheme: dark; } .band > img { position: absolute; inset-block: -12% -12%; inset-inline: 0; z-index: 0; width: 100%; height: 124%; object-fit: cover; } /* Parallax driven by scroll position and nothing else. The finished state is the default, so a browser without scroll-driven animations shows a still photograph. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .band > img { animation: drift-up linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } } } @keyframes drift-up { from { transform: translate3d(0, 6%, 0); } to { transform: translate3d(0, -6%, 0); } } .band::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--grain), linear-gradient( to var(--scrim-dir, right), rgba(7, 7, 14, 0.86) 0%, rgba(7, 7, 14, 0.6) 40%, rgba(7, 7, 14, 0.22) 78%, rgba(7, 7, 14, 0.12) 100% ); background-size: 240px 240px, auto; } [dir="rtl"] .band::after { --scrim-dir: left; } .band blockquote { max-width: 22ch; color: var(--on-dark); font-size: var(--fs-h2); font-weight: 700; line-height: 1.04; letter-spacing: -0.026em; text-wrap: balance; } [lang="he"] .band blockquote { letter-spacing: normal; line-height: 1.2; } .band .lead { max-width: 44ch; color: var(--on-dark-muted); } /* ── Form ───────────────────────────────────────────────────────────────── */ .form-card { position: relative; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-panel); color: var(--body); color-scheme: light; } /* A hairline of brand across the top edge, so the one element that has to be noticed is marked without shouting. */ .form-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: clamp(24px, 2.6vw, 36px); height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(to right, var(--blue), var(--cyan)); } .form-card .h2, .form-card h2 { color: var(--ink); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); letter-spacing: -0.02em; } .form-card .lead { margin-block-start: var(--s2); max-width: none; color: var(--body); font-size: 0.97rem; } .form { display: grid; gap: var(--s4); margin-block-start: var(--s5); } .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s4); } .field { display: grid; gap: 7px; } /* Label above the field, always. A floating label at rest is indistinguishable from a filled value, and once filled it shrinks to the size of a hint. */ .field label { color: var(--ink); font-size: 0.85rem; font-weight: 600; } .field input, .field textarea { width: 100%; min-height: 54px; padding: 15px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--card); color: var(--ink); font: inherit; /* Never below 16px: iOS Safari zooms the whole page on focus if it is. */ font-size: 1rem; transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); } .field textarea { min-height: 98px; line-height: 1.6; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: #9a9aab; } .field input:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--blue) 30%, var(--line-strong)); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); } /* A phone number or an email is Latin whichever way the page runs. The input carries its own dir, so `start` resolves against the input, not the page. */ .field input[dir="ltr"] { text-align: start; } .consent { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: var(--s3); padding-block: var(--s2); color: var(--muted); font-size: 0.875rem; line-height: 1.5; cursor: pointer; } .consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); } .foot-note { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; text-align: center; } .msg { padding: 14px 16px; border: 1px solid transparent; border-radius: var(--r-btn); font-size: 0.9375rem; line-height: 1.5; } .msg.err { background: var(--danger-surface); border-color: var(--danger-line); color: var(--danger); } .msg.ok { background: var(--success-surface); border-color: var(--success-line); color: var(--success); } /* Honeypot. inset-inline-start, never `left`: a physical offset adds 9999px of horizontal scroll on an RTL page. */ .hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .spin { display: none; width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, 0.35); border-block-start-color: var(--on-dark); border-radius: 50%; animation: spin 0.7s linear infinite; } .is-sending .spin { display: block; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Closing block ──────────────────────────────────────────────────────── */ /* The argument and the form share a row from tablet up. Stacked, this one section was the tallest thing on every page. */ .close .close-head { margin-block-end: var(--s6); } @media (min-width: 920px) { .close .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: center; gap: var(--s9); } .close .close-head { display: block; max-width: 32ch; margin-block-end: 0; text-align: start; } .close .close-head .eyebrow { justify-content: flex-start; } .close .close-head .lead { max-width: none; margin-block-start: var(--s4); } .close .form-card { max-width: none; margin: 0; } } /* ── Scroll progress and sticky CTA ─────────────────────────────────────── */ /* The progress line is injected by lp.js, so the pages need no extra markup. */ .progress { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60; height: 2px; background: linear-gradient(to right, var(--blue), var(--cyan)); transform: scaleX(0); transform-origin: left center; pointer-events: none; } [dir="rtl"] .progress { transform-origin: right center; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .progress { animation: grow linear both; animation-timeline: scroll(root block); } } } @keyframes grow { to { transform: scaleX(1); } } .sticky { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 40; display: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.9); border-block-start: 1px solid var(--line); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); transition: transform 320ms var(--ease), opacity 320ms var(--ease); } .sticky.hide { transform: translateY(110%); opacity: 0; pointer-events: none; } @media (max-width: 980px) { .sticky { display: block; } body { padding-block-end: 80px; } } /* ── Footer ─────────────────────────────────────────────────────────────── */ .foot { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--s7); background: var(--ink-0); color: var(--on-dark-muted); font-size: 0.9rem; } .foot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); background-size: 240px 240px; } .foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); } .foot img { width: 142px; height: 41px; } .foot a { color: var(--on-dark-muted); } .foot-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); } /* ── Reveal on scroll ───────────────────────────────────────────────────── */ /* The finished state is the default, so a browser without scroll-driven animations (Firefox stable, still) shows the content immediately. */ .reveal { opacity: 1; transform: none; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .reveal { animation: rise 700ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 4% cover 26%; } /* Stagger by shifting the range, not with animation-delay: a delay does nothing on a view() timeline. */ .reveal > *:nth-child(2) { animation: rise 700ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 4% cover 32%; } .reveal > *:nth-child(3) { animation: rise 700ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 4% cover 38%; } .reveal > *:nth-child(4) { animation: rise 700ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 4% cover 44%; } /* The eyebrow rule draws itself in as its section arrives. */ .sec .eyebrow::before, .band .eyebrow::before { animation: draw 620ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 6% cover 22%; } } } @keyframes rise { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } } @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── Utilities ──────────────────────────────────────────────────────────── */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mt7 { margin-block-start: var(--s8); } /* A page like this gets printed and forwarded to a partner or a spouse. */ @media print { body { background: #fff; color: #000; padding-block-end: 0; } .sticky, .progress, .hero > img, .band > img, .form-card { display: none !important; } .hero, .band, .sec-navy, .foot { background: #fff !important; color: #000 !important; } .hero::after, .band::after, .sec-navy::before, .foot::before { display: none !important; } .hero h1, .band blockquote, .sec-navy h2, .sec-navy .stat .cap { color: #000 !important; } .stat b { color: #000 !important; background: none !important; } .tbl-wrap { overflow: visible; mask-image: none; } table { break-inside: avoid; } }