/* ========================================================================= המרכז להבראה פיננסית — Classic Edition Design system: navy authority + existing brand blue accent. No gold. Typography: PLONI only (regular 400 / bold 700) — as on the original site. The "classic / elegant / luxurious" character is carried entirely by structure — typographic scale, hairline rules, symmetry and whitespace — because the palette and the typeface are fixed brand assets. ========================================================================= */ @font-face { font-family: "PLONI"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ploni-regular-aaa.woff") format("woff"); } @font-face { font-family: "PLONI"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/ploni-bold-aaa.woff") format("woff"); } :root { /* ---- ink ---- */ --ink: #0A2540; /* deep navy — headings, CTAs, authority */ --ink-90: #12314F; --ink-70: #3A5573; --muted: #63788F; /* secondary copy */ --muted-soft: #8496A9; /* ---- accent (existing brand blue, used sparingly) ---- */ --brand: #36B6FF; --brand-deep: #1B7FC4; /* links / hover — passes contrast on white */ --brand-wash: #EAF6FE; /* ---- surfaces ---- */ --bg: #FFFFFF; --bg-alt: #F7F9FC; --card: #FFFFFF; /* ---- rules: the backbone of the classic look ---- */ --rule: rgba(10, 37, 64, .12); --rule-soft: rgba(10, 37, 64, .07); --rule-firm: rgba(10, 37, 64, .22); /* ---- elevation: surfaces lift off the page rather than sitting on a line ---- */ --shadow: 0 1px 2px rgba(10, 37, 64, .04); --shadow-sm: 0 2px 10px rgba(10, 37, 64, .05); --shadow-lift:0 18px 48px -12px rgba(10, 37, 64, .18); --shadow-deep:0 30px 70px -20px rgba(10, 37, 64, .28); /* ---- geometry ---- */ --radius: 14px; --radius-lg: 20px; --radius-sm: 10px; --pill: 999px; /* ---- measure ---- */ --content: 720px; /* article reading column */ --measure: 860px; /* running copy inside wide sections */ --wide: 1180px; /* page max — the frame the masthead sits in */ --gutter: clamp(20px, 5vw, 40px); /* ---- vertical rhythm ---- */ --section-y: clamp(72px, 10vw, 140px); } /* ========================================================================= Reset + the canonical 3-layer horizontal-overflow guard ========================================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; width: 100%; max-width: 100vw; overflow-x: hidden; /* baseline — every browser */ overscroll-behavior-x: none; /* kills iOS rubber-band */ } @supports (overflow-x: clip) { html, body { overflow-x: clip; } /* upgrade on Safari 16+ */ } body { font-family: "PLONI", "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.75; color: var(--ink-90); background: var(--bg); direction: rtl; text-align: right; position: relative; /* NOTE: do NOT put `transform` on here. Any transform other than `none` — including translateZ(0) — makes the body a containing block for fixed descendants, so `position: fixed` overlays (the accessibility widget, cookie bars, chat bubbles) stop tracking the viewport and get dumped at the bottom of the document instead. The horizontal-overflow protection comes from overflow-x + max-width above; the transform adds nothing to it. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brand-deep); text-decoration: none; } h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; } p { overflow-wrap: anywhere; } ::selection { background: var(--ink); color: #fff; } :focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; } /* Defensive per-section guards — a single overflowing child clips itself instead of widening the document. `.topbar` is deliberately NOT in this list: the mobile menu panel hangs out of the bar's box, and Safari clips it away entirely under `overflow-x: clip` (the spec keeps the visible axis visible; WebKit does not). The bar holds no wide content, so it never needed the guard. */ .hero, .section, .article, .article-hero, .band, .foot, .final-cta { overflow-x: clip; max-width: 100%; } .topbar { max-width: 100%; } /* ========================================================================= Layout primitives ========================================================================= */ .wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); } .narrow { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); } /* ========================================================================= Typographic scale — tight leading + optical negative tracking on display. This is what reads as "classic" without a serif. ========================================================================= */ h1, h2, h3, h4 { font-weight: 700; color: var(--ink); margin: 0; line-height: 1.16; letter-spacing: -0.015em; } /* Eyebrow: wide-tracked small label. The single most "classic" device available in a sans-only system. */ .eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; line-height: 1.6; color: var(--muted); margin-bottom: 18px; } .eyebrow--center { text-align: center; } /* Accent rule beneath section headings */ .rule-accent { display: block; width: 46px; height: 2px; background: var(--brand); margin-top: 22px; } .rule-accent--center { margin-inline: auto; } /* ========================================================================= Buttons — flat, framed, deliberate. No gradients, no pills. ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 38px; border: 1px solid transparent; border-radius: var(--pill); font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2; cursor: pointer; text-align: center; transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease; } .btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-primary:hover { background: #06182B; border-color: #06182B; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-firm); } .btn-ghost:hover { border-color: var(--ink); background: rgba(10, 37, 64, .03); } /* Retained for compatibility with generated markup */ .btn-mint { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-mint:hover { background: #06182B; border-color: #06182B; } /* ========================================================================= Topbar — thin, quiet, with a hairline base. Classic mastheads do not shout. ========================================================================= */ .topbar { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--rule); } .topbar__inner { width: 100%; max-width: var(--wide); margin-inline: auto; padding: 0 var(--gutter); height: 86px; display: flex; align-items: center; gap: 28px; } .topbar__brand { flex: 0 0 auto; display: flex; align-items: center; margin-inline-end: 8px; } .topbar__brand img { height: 24px; width: auto; display: block; } .topbar__nav { display: flex; align-items: center; gap: 14px; /* Spread the links across the bar. Anchoring the nav to either end left a dead strip of empty space in the masthead. */ flex: 1 1 auto; justify-content: space-evenly; margin-inline: 26px; flex-wrap: nowrap; /* Never let the bar compress: the links total ~640px, and a shrinking container pulled them on top of each other and over the CTA. Below the breakpoint the menu becomes the hamburger instead. */ flex-shrink: 0; } .topbar__nav a { color: var(--ink-70); font-size: 16px; flex-shrink: 0; font-weight: 400; white-space: nowrap; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } .topbar__nav a:hover { color: var(--ink); border-bottom-color: var(--brand); } .topbar__cta { flex: 0 0 auto; padding: 11px 22px; background: var(--ink); color: #fff; border-radius: var(--pill); box-shadow: 0 6px 18px -6px rgba(10,37,64,.5); font-size: 15px; font-weight: 700; white-space: nowrap; transition: background-color .2s ease; } .topbar__cta:hover { background: #06182B; } /* Only ever shown inside the open mobile menu. */ .topbar__navactions { display: none; } .topbar__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 9px; background: transparent; border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; } .topbar__toggle span { display: block; height: 1.5px; width: 100%; background: var(--ink); transition: transform .25s ease, opacity .25s ease; } /* ========================================================================= Hero — centred, symmetrical, framed above and below by rules. Symmetry is the classic move; the May build used an asymmetric split. ========================================================================= */ .hero { position: relative; background: var(--bg); padding-block: clamp(56px, 8vw, 104px) clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--rule); } /* Faint engraved wash — depth without ornament */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 74% at 50% 0%, rgba(54, 182, 255, .09), transparent 68%); pointer-events: none; } .hero__inner { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 60px); align-items: start; } /* Two-column when a form sits beside the copy */ .hero__inner:has(.lead-form) { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; } .hero__copy { min-width: 0; } .hero__eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; color: var(--muted); margin-bottom: 20px; } .hero h1 { font-size: clamp(32px, 5.2vw, 58px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin: 0; } .hero h1 .accent { color: var(--brand-deep); } /* The classic double-rule under the headline */ .hero__copy > h1 + .hero__rules, .hero__rules { margin-top: 26px; display: flex; flex-direction: column; gap: 4px; max-width: 220px; } .hero__rules i { display: block; height: 2px; background: var(--brand); } .hero__rules i + i { height: 1px; background: var(--rule-firm); } .hero__sub { margin: 26px 0 0; font-size: clamp(17px, 1.9vw, 19px); line-height: 1.8; color: var(--muted); max-width: 60ch; } .hero__ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; } /* ---- banner hero: the original page background image ---- */ .hero--banner { background-size: cover; background-position: center center; background-repeat: no-repeat; border-bottom: 0; padding-block: clamp(64px, 10vw, 132px); } /* Navy veil so PLONI stays legible over a photographic banner */ .hero--banner::before { background: linear-gradient(180deg, rgba(6, 20, 38, .82) 0%, rgba(6, 20, 38, .70) 55%, rgba(6, 20, 38, .86) 100%); } .hero--banner .hero__inner { text-align: center; } .hero--banner .hero__copy { max-width: 900px; margin-inline: auto; } .hero--banner h1 { color: #fff; } .hero--banner h1 .accent { color: var(--brand); } .hero--banner .hero__eyebrow { color: rgba(255, 255, 255, .74); } .hero--banner .hero__sub { color: rgba(255, 255, 255, .82); margin-inline: auto; } .hero--banner .hero__rules { margin-inline: auto; } .hero--banner .hero__rules i + i { background: rgba(255, 255, 255, .35); } .hero--banner .hero__ctas { justify-content: center; } .hero--banner .btn-primary { background: #fff; color: var(--ink); border-color: #fff; } .hero--banner .btn-primary:hover { background: var(--brand-wash); border-color: var(--brand-wash); } .hero--banner .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .5); } .hero--banner .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); } .hero__mark { height: 62px; width: auto; margin: 0 auto 26px; display: block; } .hero:not(.hero--banner) .hero__mark { display: none; } .article-hero--banner { position: relative; background-size: cover; background-position: center center; border-bottom: 0; } .article-hero--banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 20, 38, .84), rgba(6, 20, 38, .78)); } .article-hero--banner .article-hero__inner { position: relative; } .article-hero--banner h1 { color: #fff; } .article-hero--banner .article-hero__crumb, .article-hero--banner .article-hero__crumb a { color: rgba(255, 255, 255, .7); } .article-hero--banner .article-hero__lede { color: rgba(255, 255, 255, .82); } /* ========================================================================= Card grids — icon-box (services) and image-box (team / process steps) ========================================================================= */ .cards { display: grid; gap: clamp(18px, 2.2vw, 28px); margin: 40px 0 44px; } /* Column counts are capped by the available width, not by the card count: forcing 4 columns inside the 720px reading measure produced ~160px slivers with the text breaking mid-word. */ .cards--1 { grid-template-columns: minmax(0, 520px); justify-content: center; } .cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } /* 210px keeps four across at the homepage's ~980px column once the gaps are counted; 240px silently dropped the fourth card onto its own row. */ .cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } /* Break out of the reading column — a 4-up grid needs the page width, not the 720px measure body copy is set to. Done with symmetric negative margins rather than a translate: a transform here has to be undone by a more specific rule on the wide layout, and an `[dir=rtl]` variant silently out-ranked that reset and shoved the grid 440px past the viewport. Margins need no direction special-casing. */ /* The body already spans the full frame, so grids simply fill it — the old negative-margin breakout now pushed them 40px past the masthead edge. */ .article__body .cards, .article__body .videogrid { width: auto; margin-inline: 0; } .cards .card { text-align: center; padding: 34px 26px 30px; } .cards .card h3 { font-size: 19px; line-height: 1.35; margin: 0 0 12px; } .cards .card p { font-size: 15.5px; line-height: 1.75; color: var(--muted); margin: 0; } /* Elementor icon-box illustrations, preserved as inline SVG */ .card__icon--svg { width: 76px; height: 76px; margin: 0 auto 20px; border: 0; border-radius: 0; background: none; display: grid; place-items: center; } .card__icon--svg svg { width: 100%; height: 100%; display: block; /* Elementor coloured its icons via CSS, so some of the exported SVGs carry no fill at all and would render black. Paths that do declare a fill keep it. */ fill: #61B1E6; } /* image-box media: team portraits and the numbered process marks */ .card__media { width: 100%; display: flex; justify-content: center; margin-bottom: 20px; } .card__media img { max-width: 100%; height: auto; } .cards--photo .card__media img { width: 132px; height: 132px; object-fit: cover; border-radius: 50%; border: 1px solid var(--rule); padding: 5px; background: var(--bg); } /* The process steps are numeral graphics, not portraits — never crop them */ .cards--photo .card__media img[src*="/2021/"], .cards--photo .card__media img[src$="1-1.png"], .cards--photo .card__media img[src$="2-1.png"], .cards--photo .card__media img[src$="3-1.png"], .cards--photo .card__media img[src$="4-1.png"] { width: auto; height: 84px; border: 0; border-radius: 0; padding: 0; object-fit: contain; background: none; } /* ========================================================================= Press strip — "as featured in". Ten authority links that were buried on /info/, promoted to the homepage directly under the hero. ========================================================================= */ .press { padding-block: clamp(30px, 4vw, 46px); background: var(--bg); border-bottom: 1px solid var(--rule-soft); } .press .eyebrow { margin-bottom: 18px; } .press__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px clamp(14px, 2.4vw, 30px); } .press__item { font-size: clamp(15px, 1.6vw, 18px); font-weight: 700; letter-spacing: 0.01em; color: var(--muted); padding: 8px 14px; border-radius: var(--pill); white-space: nowrap; transition: color .2s ease, background-color .2s ease; } .press__item:hover { color: var(--ink); background: var(--bg-alt); } /* ========================================================================= FAQ accordion — a run of question-headings becomes panels instead of yet more undifferentiated copy. ========================================================================= */ .faq { margin: 36px 0 42px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--rule-soft); background: var(--card); } .faq__item + .faq__item { border-top: 1px solid var(--rule-soft); } .faq__q { list-style: none; cursor: pointer; padding: 22px clamp(20px, 2.6vw, 30px); padding-inline-end: 60px; position: relative; font-size: clamp(16.5px, 1.8vw, 19px); font-weight: 700; line-height: 1.45; color: var(--ink); transition: background-color .2s ease, color .2s ease; } .faq__q::-webkit-details-marker { display: none; } .faq__q:hover { background: var(--bg-alt); color: var(--brand-deep); } .faq__q:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: -2px; } /* the +/− control */ .faq__q::after { content: ""; position: absolute; inset-inline-end: clamp(20px, 2.6vw, 30px); top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; /* a plus drawn from two gradient bars — no extra markup, and it becomes a minus by dropping the vertical bar when the panel is open */ background: linear-gradient(var(--brand-deep) 0 0) center / 13px 2px no-repeat, linear-gradient(var(--brand-deep) 0 0) center / 2px 13px no-repeat, var(--brand-wash); transition: background-color .25s ease, transform .3s ease; } .faq__q { display: flex; align-items: center; } .faq__item[open] .faq__q { color: var(--brand-deep); background: var(--bg-alt); } .faq__item[open] .faq__q::after { /* drop the vertical bar -> the plus becomes a minus */ background: linear-gradient(#fff 0 0) center / 13px 2px no-repeat, var(--brand-deep); } .faq__a { padding: 0 clamp(20px, 2.6vw, 30px) 24px; position: relative; animation: faqIn .28s ease-out; } .faq__a > *:first-child { margin-top: 0; } .faq__a > *:last-child { margin-bottom: 0; } .faq__a p { font-size: 16.5px; line-height: 1.85; color: var(--ink-90); margin: 0 0 16px; } .faq__a ul, .faq__a ol { margin: 0 0 16px; } @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================= Sections ========================================================================= */ .section { padding-block: var(--section-y); border-bottom: 1px solid var(--rule-soft); } .section--alt { background: var(--bg-alt); } /* the lead form sitting directly under the banner hero */ .section--form { background: var(--bg-alt); padding-block: clamp(40px, 5vw, 64px); } .section:last-of-type { border-bottom: 0; } .section__head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 62px); text-align: center; } .section__eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; color: var(--muted); margin-bottom: 16px; } .section h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.22; letter-spacing: -0.018em; color: var(--ink); margin: 0; } .section__head p { margin: 18px 0 0; color: var(--muted); font-size: 17px; line-height: 1.8; } /* centred accent rule under every section heading */ .section__head h2::after { content: ""; display: block; width: 46px; height: 2px; background: var(--brand); margin: 22px auto 0; } /* ========================================================================= Grids + cards — framed, not floating. ========================================================================= */ .grid-2, .grid-3, .grid-4 { display: grid; gap: clamp(18px, 2.2vw, 26px); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); } .card { position: relative; background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 38px 30px 34px; min-width: 0; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } /* hairline accent that fills on hover — restrained, deliberate */ .card::before { content: ""; position: absolute; inset-inline: -1px; top: -1px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: right; transition: transform .3s ease; } .card:hover { border-color: transparent; box-shadow: var(--shadow-lift); transform: translateY(-4px); } .card:hover::before { transform: scaleX(1); } .card h3 { font-size: 20px; line-height: 1.35; color: var(--ink); margin: 0 0 12px; } .card p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.78; } .card a { font-weight: 700; } .card__icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 20px; border: 1px solid var(--rule-firm); border-radius: 50%; color: var(--ink); font-size: 17px; font-weight: 700; background: var(--bg); } /* ========================================================================= Authority band — deep navy, hairline-topped. The one dark moment. ========================================================================= */ .band { background: var(--ink); color: #fff; padding-block: clamp(52px, 6.5vw, 78px); position: relative; } .band::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brand), transparent); } .band__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(26px, 4vw, 48px); text-align: center; } .band__item { position: relative; min-width: 0; } /* hairline separators between stats — a classic ledger device */ .band__item + .band__item::before { content: ""; position: absolute; inset-block: 6px; inset-inline-end: calc(-1 * clamp(13px, 2vw, 24px)); width: 1px; background: rgba(255, 255, 255, .16); } .band__num { display: block; font-size: clamp(32px, 4.4vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #fff; } .band__label { display: block; margin-top: 10px; font-size: 14px; letter-spacing: 0.06em; color: rgba(255, 255, 255, .72); } /* ========================================================================= Team ========================================================================= */ .team { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: clamp(20px, 2.6vw, 32px); } .team__card { text-align: center; padding: 34px 22px 30px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); min-width: 0; transition: border-color .25s ease, box-shadow .25s ease; } .team__card:hover { border-color: var(--rule-firm); box-shadow: var(--shadow-lift); } .team__photo { width: 108px; height: 108px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; background: var(--bg-alt); border: 1px solid var(--rule); padding: 4px; } .team__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .team__name { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 6px; } .team__role { font-size: 15px; color: var(--muted); line-height: 1.7; margin: 0; } /* ========================================================================= Article hero + body — the editorial heart of the site. ========================================================================= */ .article-hero { background: var(--bg-alt); border-bottom: 1px solid var(--rule); padding-block: clamp(44px, 6vw, 76px) clamp(38px, 5vw, 60px); } .article-hero__inner { width: 100%; max-width: 860px; margin-inline: auto; padding-inline: var(--gutter); text-align: center; } .article-hero__crumb { font-size: 13px; letter-spacing: 0.1em; color: var(--muted-soft); margin-bottom: 20px; } .article-hero__crumb a { color: var(--muted); } .article-hero__crumb a:hover { color: var(--ink); text-decoration: underline; } .article-hero h1 { font-size: clamp(27px, 4.1vw, 44px); line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .article-hero h1::after { content: ""; display: block; width: 46px; height: 2px; background: var(--brand); margin: 24px auto 0; } /* Byline — author and date */ .byline { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14.5px; color: var(--muted); } .byline__author { font-weight: 700; color: var(--ink); } .byline__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); display: inline-block; } .article-hero--banner .byline { color: rgba(255,255,255,.78); } .article-hero--banner .byline__author { color: #fff; } .article-hero__lede { margin: 22px auto 0; max-width: 62ch; font-size: 18px; line-height: 1.8; color: var(--muted); } .article { padding-block: clamp(44px, 6vw, 74px); } .article__body { /* Every page's copy sits in the same frame as the masthead, so a paragraph's edges line up with the logo and the CTA instead of floating in a narrower centred column. */ width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); font-size: 18px; line-height: 1.9; color: var(--ink-90); } .article__body > *:first-child { margin-top: 0; } /* The homepage column and everything in it share the exact frame the masthead sits in, so a paragraph's edges line up with the logo and the CTA rather than floating in a narrower centred column. */ .article__body--wide { max-width: none; padding-inline: 0; } .article__body--wide > p, .article__body--wide > ul, .article__body--wide > ol, .article__body--wide > h2, .article__body--wide > h3, .article__body--wide > h4, .article__body--wide > blockquote, .article__body--wide > .table-scroll, .article__body--wide > .article__form { max-width: none; margin-inline: 0; } .article__body h2 { font-size: clamp(23px, 2.9vw, 30px); line-height: 1.3; color: var(--ink); margin: 56px 0 18px; padding-top: 26px; border-top: 1px solid var(--rule); position: relative; } /* short blue tick sitting on the rule — classic sectional mark */ .article__body h2::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 46px; height: 2px; background: var(--brand); } .article__body h3 { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.4; color: var(--ink); margin: 38px 0 14px; } .article__body h4 { font-size: 18px; color: var(--ink); margin: 30px 0 12px; } .article__body p { margin: 0 0 22px; } .article__body ul, .article__body ol { margin: 0 0 24px; padding-inline-start: 24px; } .article__body li { margin-bottom: 11px; } .article__body ul li::marker { color: var(--brand-deep); } .article__body ol li::marker { color: var(--brand-deep); font-weight: 700; } .article__body a { color: var(--brand-deep); border-bottom: 1px solid rgba(27, 127, 196, .3); transition: border-color .2s ease; } .article__body a:hover { border-bottom-color: var(--brand-deep); } .article__body img, .article__body figure img { margin: 34px auto; border-radius: var(--radius); border: 1px solid var(--rule); } /* Images carry the display width Elementor gave them. Small decorative marks (icons, seals, trophies) are shown at their intended size and get no frame — a border around a 77px icon reads as a broken thumbnail. */ .article__body figure:not(.videocard):not(.article__audio) { margin: 0 auto; } .article__body figure.figure--sized, .article__body figure.figure--constrained { margin-inline: auto; } .article__body figure.figure--sized img { border: 0; border-radius: 0; margin: 26px auto; width: 100%; height: auto; } .article__body figure.figure--constrained img { width: 100%; height: auto; } /* ========================================================================= Video gallery — Elementor video widgets, restored as click-to-play cards. The poster loads with the page; YouTube itself only loads when asked. ========================================================================= */ .videogrid { margin: 48px 0 52px; padding: clamp(26px, 3.2vw, 40px) clamp(20px, 2.6vw, 34px); background: var(--bg-alt); border: 1px solid var(--rule); border-top: 2px solid var(--brand); border-radius: var(--radius); } .videogrid__head { text-align: center; margin-bottom: 28px; } .videogrid__head .eyebrow { margin-bottom: 10px; } .videogrid__head h2 { font-size: clamp(21px, 2.5vw, 27px); margin: 0; border: 0; padding: 0; } .videogrid__head h2::before { display: none; } .videogrid__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(16px, 2vw, 24px); } /* (the gallery uses the shared .breakout sizing defined with the card grids) */ .videocard { margin: 0; min-width: 0; } .videocard__play { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--ink); cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .videocard__play img { width: 100%; height: 100%; object-fit: cover; margin: 0; border: 0; border-radius: 0; display: block; transition: transform .5s ease, opacity .3s ease; } .videocard__play:hover { border-color: var(--rule-firm); box-shadow: var(--shadow-lift); transform: translateY(-2px); } .videocard__play:hover img { transform: scale(1.04); opacity: .9; } .videocard__play:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; } /* Play badge, corner-anchored. Several covers already have a play button burned into the artwork, so a second one dead-centre reads as a mistake. Sitting it in the corner over a scrim gives every card the same affordance without colliding. */ .videocard__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 20, 38, .55) 0%, rgba(6, 20, 38, 0) 42%); opacity: .85; transition: opacity .25s ease; pointer-events: none; } .videocard__play:hover::after { opacity: .55; } .videocard__btn { position: absolute; inset-block-end: 12px; inset-inline-start: 12px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 16px rgba(0, 0, 0, .35); transition: transform .25s ease, background-color .25s ease; z-index: 1; } .videocard__btn::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-block: 8px solid transparent; border-inline-end: 13px solid var(--ink); border-inline-start: 0; transform: translateX(2px); } .videocard__play:hover .videocard__btn { transform: scale(1.1); background: #fff; } .videocard__play:hover .videocard__btn::before { border-inline-end-color: var(--brand-deep); } /* once playing */ .videocard.is-playing .videocard__play { cursor: default; } .videocard iframe { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--rule); border-radius: var(--radius); display: block; } /* Narrated-article audio player */ .article__audio { margin: 30px 0 34px; padding: 18px 20px; background: var(--bg-alt); border: 1px solid var(--rule); border-top: 2px solid var(--brand); border-radius: var(--radius); max-width: none; } .article__audio figcaption { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px; text-align: right; } .article__audio audio { width: 100%; display: block; } /* Category / archive listing */ .postgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(20px, 2.4vw, 30px); margin: 36px 0 44px; } .postcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; min-width: 0; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .postcard:hover { border-color: var(--rule-firm); box-shadow: var(--shadow-lift); transform: translateY(-2px); } .postcard__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); } .postcard__media img { width: 100%; height: 100%; object-fit: cover; margin: 0; border: 0; border-radius: 0; transition: transform .4s ease; } .postcard:hover .postcard__media img { transform: scale(1.03); } .postcard h3 { margin: 20px 22px 10px; font-size: 18px; line-height: 1.4; } .postcard h3 a { color: var(--ink); border: 0; } .postcard h3 a:hover { color: var(--brand-deep); } .postcard p { margin: 0 22px 18px; font-size: 15px; line-height: 1.7; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .postcard__more { margin: auto 22px 20px; font-size: 14.5px; font-weight: 700; color: var(--brand-deep); border: 0; } /* Restored Elementor CTA button */ .article__cta-btn { margin: 30px 0 34px; text-align: center; } .article__cta-btn .btn { display: inline-flex; width: auto; } .article__body blockquote { margin: 34px 0; padding: 4px 26px; border-inline-start: 2px solid var(--brand); color: var(--ink); font-size: 19px; line-height: 1.8; } .article__body table { width: 100%; border-collapse: collapse; margin: 30px 0; font-size: 16px; } .article__body th, .article__body td { padding: 13px 15px; border: 1px solid var(--rule); text-align: right; vertical-align: top; } .article__body th { background: var(--bg-alt); font-weight: 700; color: var(--ink); } /* Wide content must scroll inside itself, never widen the page */ .article__body .table-scroll, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .article__video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 32px 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .article__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Inline lead form, restored at the position the original had it */ .article__form { margin: 40px 0 44px; } /* Article-level CTA */ .article__cta { margin-top: 56px; padding-inline: var(--gutter); } .article__cta-card { max-width: var(--content); margin-inline: auto; padding: 40px 34px; text-align: center; background: var(--bg-alt); border: 1px solid var(--rule); border-top: 2px solid var(--brand); border-radius: var(--radius); } .article__cta-card h3 { font-size: clamp(21px, 2.5vw, 26px); color: var(--ink); margin: 0 0 12px; } .article__cta-card p { margin: 0 0 26px; color: var(--muted); line-height: 1.8; } /* ========================================================================= Lead form — framed like a document, not a widget. ========================================================================= */ .lead-form { background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); padding: clamp(26px, 3.4vw, 38px); box-shadow: var(--shadow-deep); min-width: 0; } .lead-form__head { margin-bottom: 26px; text-align: center; } .lead-form__head h3 { font-size: 22px; color: var(--ink); margin: 0 0 10px; } .lead-form__head p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; } .lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .lead-form__row--full { grid-template-columns: 1fr; } .lead-form__row > div { min-width: 0; } .lead-form label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: 0.01em; } .lead-form input[type="text"], .lead-form input[type="tel"], .lead-form input[type="email"], .lead-form textarea, .lead-form select { width: 100%; max-width: 100%; padding: 15px 17px; font-family: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm); transition: border-color .2s ease, box-shadow .2s ease; } .lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--muted-soft); } .lead-form input[type="text"]:focus, .lead-form input[type="tel"]:focus, .lead-form input[type="email"]:focus, .lead-form textarea:focus, .lead-form select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(54, 182, 255, .16); } .lead-form__radios { display: flex; gap: 12px; flex-wrap: wrap; } .lead-form__radio { flex: 1 1 100px; display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; padding: 12px 16px; font-weight: 400; color: var(--ink-90); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .lead-form__radio:hover { border-color: var(--ink); } .lead-form__radio:has(input:checked) { border-color: var(--ink); background: var(--brand-wash); font-weight: 700; } .lead-form__radio input { accent-color: var(--ink); width: 17px; height: 17px; } .lead-form__check { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 22px; font-size: 13.5px; font-weight: 400; line-height: 1.65; color: var(--muted); } .lead-form__check input { margin-top: 3px; accent-color: var(--ink); flex: 0 0 auto; } .lead-form__check a { color: var(--brand-deep); text-decoration: underline; } .lead-form__submit { width: 100%; padding: 18px 24px; font-size: 17px; } .lead-form__msg { margin-top: 14px; font-size: 15px; line-height: 1.6; text-align: center; min-height: 1px; } .lead-form__msg.is-error { color: #B3261E; } .lead-form__msg.is-ok { color: #0B7A54; font-weight: 700; } /* ========================================================================= Lead band — the conversion block, two columns: argument + form. Replaces the bare form that used to sit at the foot of every page. ========================================================================= */ .lead-band { padding-block: var(--section-y); background: var(--bg); border-top: 1px solid var(--rule); position: relative; } .lead-band--alt { background: var(--bg-alt); } .lead-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; } .lead-band__copy { min-width: 0; } .lead-band__copy h2 { font-size: clamp(24px, 3.1vw, 34px); line-height: 1.22; margin: 0; color: var(--ink); } .lead-band__copy h2::after { content: ""; display: block; width: 46px; height: 2px; background: var(--brand); margin-top: 20px; } .lead-band__sub { margin: 22px 0 0; color: var(--muted); font-size: 16.5px; line-height: 1.8; max-width: 52ch; } .lead-band__facts { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; border-top: 1px solid var(--rule); padding-top: 26px; } .lead-band__facts li { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 15.5px; color: var(--ink); overflow-wrap: anywhere; } .lead-band__facts span { font-size: 11.5px; letter-spacing: 0.18em; font-weight: 700; color: var(--muted-soft); } .lead-band__facts a { color: var(--ink); font-weight: 700; } .lead-band__facts a:hover { color: var(--brand-deep); } .lead-band__form { min-width: 0; } /* ========================================================================= Final CTA ========================================================================= */ .final-cta { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 88px); text-align: center; position: relative; } .final-cta::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brand), transparent); } .final-cta h2 { color: #fff; font-size: clamp(25px, 3.4vw, 36px); margin: 0 0 16px; } .final-cta p { margin: 0 auto 30px; max-width: 58ch; color: rgba(255, 255, 255, .76); font-size: 17px; line-height: 1.8; } .final-cta .btn-primary { background: #fff; color: var(--ink); border-color: #fff; } .final-cta .btn-primary:hover { background: var(--brand-wash); border-color: var(--brand-wash); } /* ========================================================================= Footer ========================================================================= */ .foot { background: var(--bg-alt); border-top: 1px solid var(--rule); padding-block: clamp(48px, 6vw, 68px) 0; font-size: 15px; color: var(--muted); } .foot__cols { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(28px, 3.5vw, 46px); } .foot__cols > div { min-width: 0; } .foot__logo { height: 34px; width: auto; max-width: 100%; margin-bottom: 20px; } .foot__brand p { margin: 0 0 20px; line-height: 1.8; max-width: 42ch; } .foot__contact { display: flex; flex-direction: column; gap: 8px; } .foot__contact a, .foot__contact span { color: var(--muted); } .foot__contact a:hover { color: var(--ink); } .foot__phone { font-size: 21px; font-weight: 700; color: var(--ink) !important; letter-spacing: 0.02em; direction: ltr; text-align: right; } .foot ul { list-style: none; margin: 0; padding: 0; } .foot li { margin-bottom: 11px; line-height: 1.6; } .foot li a { color: var(--muted); } .foot li a:hover { color: var(--ink); } .foot__community { display: inline-block; margin-top: 14px; padding: 9px 18px; border: 1px solid var(--rule-firm); border-radius: var(--radius); color: var(--ink) !important; font-weight: 700; font-size: 14px; } .foot__community:hover { border-color: var(--ink); background: rgba(10,37,64,.03); } .foot__bottom { margin-top: clamp(36px, 4vw, 52px); border-top: 1px solid var(--rule); padding-block: 22px; width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--muted-soft); } .foot__bottom a { color: var(--muted-soft); } .foot__bottom a:hover { color: var(--ink); } .foot__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; } /* The accessibility widget's launcher sits bottom-left and must clear the footer content on small screens. */ @media (max-width: 620px) { .foot__bottom { padding-bottom: 76px; } } /* ========================================================================= Responsive ========================================================================= */ @media (max-width: 1000px) { .foot__cols { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } } @media (max-width: 1240px) { .hero__inner, .hero__inner:has(.lead-form) { grid-template-columns: 1fr; } .hero__rules { max-width: 180px; } /* Anchored to the bar itself rather than the viewport. `position: fixed` was the wrong tool twice over: the bar's backdrop-filter already makes it the containing block for fixed children, so the offsets resolved against the bar anyway — and the 86px was a hardcoded guess at a bar that measures 87px and changes with the logo. `top: 100%` needs no guess. */ .topbar__nav { position: absolute; top: 100%; inset-inline: 0; /* the desktop bar spacing would otherwise shrink the panel by 52px */ margin-inline: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--rule); box-shadow: 0 18px 30px -18px rgba(10, 37, 64, .28); padding: 8px var(--gutter) 18px; max-height: calc(100dvh - 100%); overflow-y: auto; z-index: 5; display: none; } .topbar__nav.is-open { display: flex; } .topbar__nav a { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); } .topbar__nav a:hover { border-bottom-color: var(--rule-soft); } .topbar__toggle { display: flex; margin-inline-start: auto; } .topbar__cta { display: none; } /* The bar's own CTA has no room on a phone, so calling and the lead form move into the menu — the two things a visitor opens the menu to do. */ .topbar__navactions { display: grid; gap: 10px; margin-top: 16px; } /* `.topbar__nav a` sets the muted link colour and outranks `.btn-primary`, which left the call button reading navy-on-navy. These restate the button colours at a specificity that wins. */ .topbar__nav .topbar__navactions a { justify-content: center; padding: 13px 18px; border-bottom: 0; /* undo the list-row rule above */ font-weight: 700; } .topbar__nav a.topbar__navcall, .topbar__nav a.topbar__navcall:hover { color: #fff; } .topbar__nav a.topbar__navlead, .topbar__nav a.topbar__navlead:hover { color: var(--ink); } .band__item + .band__item::before { display: none; } } @media (max-width: 620px) { body { font-size: 16px; } .article__body { font-size: 17px; line-height: 1.85; } .lead-form__row { grid-template-columns: 1fr; } .foot__cols { grid-template-columns: 1fr; } .foot__bottom { justify-content: flex-start; } .btn { width: 100%; } .hero__ctas .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .card:hover { transform: none; } } /* ========================================================================= Print ========================================================================= */ @media print { .topbar, .foot, .lead-form, .final-cta, .article__cta { display: none !important; } body { font-size: 12pt; color: #000; } .article__body { max-width: none; } } /* ========================================================================= Motion — added by script, so the page is fully visible without JS and the whole layer is skipped when the visitor prefers reduced motion. ========================================================================= */ .has-motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22, .68, .36, 1), transform .6s cubic-bezier(.22, .68, .36, 1); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; } .has-motion .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .has-motion .reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================= Navigation dropdown ========================================================================= */ .navdrop { position: relative; flex-shrink: 0; } .navdrop__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; background: none; border: 0; border-bottom: 1px solid transparent; font: inherit; font-size: 16px; color: var(--ink-70); cursor: pointer; white-space: nowrap; transition: color .2s ease, border-color .2s ease; } .navdrop__btn:hover, .navdrop[data-open="true"] .navdrop__btn { color: var(--ink); border-bottom-color: var(--brand); } .navdrop__caret { width: 0; height: 0; border-inline: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .25s ease; } .navdrop[data-open="true"] .navdrop__caret { transform: rotate(180deg); } /* Bridge the gap between the button and the panel: without it the pointer crosses dead space on the way down and the menu closes mid-move. */ .navdrop::after { content: ""; position: absolute; top: 100%; inset-inline: 0; height: 18px; } .navdrop__menu { position: absolute; top: calc(100% + 14px); inset-inline-end: 0; min-width: 232px; background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 8px; display: none; z-index: 70; } .navdrop[data-open="true"] .navdrop__menu { display: block; animation: faqIn .2s ease-out; } .navdrop__menu a { display: block; padding: 12px 15px; border-radius: var(--radius-sm); font-size: 15.5px; color: var(--ink-90); white-space: nowrap; transition: background-color .18s ease, color .18s ease; } .navdrop__menu a:hover { background: var(--bg-alt); color: var(--brand-deep); } /* ========================================================================= Logo wall — a run of linked logos (press, partners). Stacked full-width they read as a series of giant unexplained pictures. ========================================================================= */ .logowall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 14px; margin: 32px 0 40px; } .logowall__item { display: grid; place-items: center; padding: 20px 18px; min-height: 92px; background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--radius); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .logowall__item:hover { border-color: transparent; box-shadow: var(--shadow-lift); transform: translateY(-2px); } .logowall__item img { max-width: 100%; max-height: 52px; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .25s ease, opacity .25s ease; } .logowall__item:hover img { filter: none; opacity: 1; } /* ========================================================================= Blog index ========================================================================= */ .blog-nav { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .blog-nav__pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--rule); border-radius: var(--pill); background: var(--card); font-size: 14.5px; font-weight: 700; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .blog-nav__pill span { font-size: 12px; font-weight: 700; color: var(--brand-deep); background: var(--brand-wash); border-radius: var(--pill); padding: 2px 8px; } .blog-nav__pill:hover { border-color: transparent; box-shadow: var(--shadow-lift); transform: translateY(-1px); } .blog-cat + .blog-cat { border-top: 1px solid var(--rule-soft); } /* ========================================================================= Never let a bare content image span the whole frame — 400+ of them carry no size from Elementor, and at full width they read as giant pictures dropped into the page without context. ========================================================================= */ /* Video/audio cards are figures too, but they are grid items sized by their track. `margin-inline: auto` switches a grid item from stretch to shrink-to-fit, so a poster that had not lazy-loaded yet collapsed the whole card to ~4px — and once loaded, the card was sized by the poster's intrinsic width instead of the column. They are excluded here rather than overridden below, because the `:not()`s already push this selector to 0,3,1. */ .article__body figure:not(.figure--sized):not(.figure--constrained):not(.videocard):not(.article__audio) { max-width: min(100%, 760px); margin-inline: auto; } .article__body figure img { max-width: 100%; } /* Hero standfirst + service chips */ .hero__points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .hero__points li { font-size: 14.5px; font-weight: 700; line-height: 1; padding: 10px 16px; border-radius: var(--pill); color: var(--ink); background: rgba(255, 255, 255, .92); white-space: nowrap; } .hero--banner .hero__points { justify-content: center; } .hero:not(.hero--banner) .hero__points li { background: var(--brand-wash); color: var(--brand-deep); } /* Press strip uses the logo wall, sized for mastheads */ .logowall--press { /* Ten mastheads, one row on desktop; four per row on small screens, which lands them in three rows. */ grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; margin: 0; } .logowall--press .logowall__item { min-height: 74px; padding: 12px 10px; } .logowall--press .logowall__item img { max-height: 34px; } @media (max-width: 1100px) { .logowall--press { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 700px) { .logowall--press { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .logowall--press .logowall__item { min-height: 62px; padding: 10px 8px; } .logowall--press .logowall__item img { max-height: 26px; } } @media (max-width: 620px) { .hero__points li { font-size: 13.5px; padding: 9px 13px; } } /* Hero kicker — the original keyword headline, kept directly under the human one so the phrase still reads on the page. */ .hero__kicker { margin: 16px 0 0; font-size: clamp(16px, 2vw, 20px); font-weight: 700; line-height: 1.4; color: var(--brand); letter-spacing: -0.01em; } .hero:not(.hero--banner) .hero__kicker { color: var(--brand-deep); } /* ========================================================================= Client stories — three across, on every screen size. ========================================================================= */ .stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); margin: 34px 0 44px; } .story { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; min-width: 0; transition: box-shadow .25s ease, transform .25s ease; } .story:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); } .story__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); } .story__media img { width: 100%; height: 100%; object-fit: cover; margin: 0; border: 0; border-radius: 0; transition: transform .4s ease; } .story:hover .story__media img { transform: scale(1.04); } .story__who { margin: clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 22px) 8px; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.35; color: var(--ink); } /* outranks .article__body blockquote, which would otherwise keep its rule */ .article__body .story__quote, .story__quote { margin: 0 clamp(14px, 1.6vw, 22px) 14px; padding: 0; border: 0; font-size: clamp(13px, 1.4vw, 15.5px); line-height: 1.7; color: var(--muted); } .story__quote p { margin: 0; } .story__more { margin: auto clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 20px); font-size: clamp(12.5px, 1.3vw, 14.5px); font-weight: 700; color: var(--brand-deep); } @media (max-width: 620px) { .stories { gap: 8px; } .story__media { aspect-ratio: 1 / 1; } } /* ========================================================================= Hero call-to-action pair. Three sets of white pills were competing for the same attention, and the outlined phone button washed out against the banner. The primary is now the only solid element; the service chips and the phone sit back as glass. ========================================================================= */ .btn-solid, .btn-glass { gap: 12px; padding: 17px 34px; font-size: 16.5px; border-radius: var(--pill); position: relative; isolation: isolate; } /* Primary — solid white with a soft halo so it lifts off the photograph */ .btn-solid { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45), 0 0 0 0 rgba(54, 182, 255, .5); transition: transform .25s cubic-bezier(.22,.68,.36,1), box-shadow .3s ease, background-color .25s ease; } .btn-solid::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(120deg, var(--brand), transparent 60%); opacity: 0; z-index: -1; transition: opacity .3s ease; } .btn-solid:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 16px 38px -10px rgba(0, 0, 0, .55), 0 0 0 4px rgba(54, 182, 255, .28); } .btn-solid:hover::before { opacity: 1; } .btn__arrow { transition: transform .28s cubic-bezier(.22,.68,.36,1); } .btn-solid:hover .btn__arrow { transform: translateX(-4px); } /* Secondary — frosted glass, so the phone number reads without shouting */ .btn-glass { background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); border-color: rgba(255, 255, 255, .34); color: #fff; letter-spacing: .02em; transition: background-color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.22,.68,.36,1); } .btn-glass svg { opacity: .85; transition: opacity .25s ease, transform .25s ease; } .btn-glass:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .6); transform: translateY(-2px); } .btn-glass:hover svg { opacity: 1; transform: rotate(-8deg); } /* On a light hero the glass button needs ink, not white */ .hero:not(.hero--banner) .btn-glass { background: rgba(10, 37, 64, .04); border-color: var(--rule-firm); color: var(--ink); } .hero:not(.hero--banner) .btn-solid { background: var(--ink); color: #fff; border-color: var(--ink); } /* Service chips step back so the CTA is the only solid element */ .hero--banner .hero__points li { background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .92); transition: background-color .25s ease, border-color .25s ease; } .hero--banner .hero__points li:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); } .hero__ctas { margin-top: 38px; gap: 16px; } @media (max-width: 620px) { .btn-solid, .btn-glass { width: 100%; padding: 16px 26px; } } /* Active category in the pill row */ .blog-nav__pill.is-active { background: var(--ink); border-color: var(--ink); color: #fff; } .blog-nav__pill.is-active span { background: rgba(255, 255, 255, .18); color: #fff; } .blog-nav__pill.is-active:hover { transform: none; box-shadow: var(--shadow-sm); } /* the row sits under an archive heading too, so give it room */ .article-hero .blog-nav { margin-top: 24px; } /* ========================================================================= Footer social buttons — replaces the single "join our community" link. ========================================================================= */ .socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .social { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); background: var(--card); border: 1px solid var(--rule); transition: color .22s ease, background-color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease; } .social:hover { color: #fff; background: var(--ink); border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lift); } .social:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; } .social svg { display: block; } /* ========================================================================= "חייגו אלינו" dial controls — the number lives in the href, not on screen. ========================================================================= */ .foot__phone, .lead-band__call, .callout { display: inline-flex; align-items: center; gap: 8px; } .foot__phone svg, .lead-band__call svg, .callout svg { flex: 0 0 auto; } /* Injected in place of a phone number that appeared in the page's own copy (the contact page's office-phone card, for one), so it has to sit inside a sentence without looking pasted in. */ .callout { gap: 6px; font-weight: 700; color: var(--brand-deep); text-decoration: none; vertical-align: middle; } .callout:hover { text-decoration: underline; } .callout svg { width: 17px; height: 17px; } .foot__phone { font-size: 17px; font-weight: 700; color: var(--ink) !important; direction: rtl; padding: 11px 20px; border: 1px solid var(--rule-firm); border-radius: var(--pill); transition: background-color .22s ease, color .22s ease, border-color .22s ease; } .foot__phone:hover { background: var(--ink); border-color: var(--ink); color: #fff !important; } .lead-band__call { font-weight: 700; color: var(--ink); } .lead-band__call:hover { color: var(--brand-deep); } /* ========================================================================= Service-card icons. `.card__icon` (a 46px ring) is declared after `.card__icon--svg` and, at equal specificity, was winning: the square Elementor artwork then poked out past a round 46px border. Scoped one level deeper so the badge below wins regardless of order, with the illustration inset so it never touches the edge. ========================================================================= */ .card .card__icon--svg { width: 84px; height: 84px; margin: 0 auto 22px; padding: 17px; border: 0; border-radius: 50%; background: var(--brand-wash); display: grid; place-items: center; overflow: hidden; transition: background-color .25s ease, transform .25s ease; } .card:hover .card__icon--svg { transform: translateY(-2px) scale(1.04); } .card .card__icon--svg svg { width: 100%; height: 100%; display: block; overflow: visible; fill: #61B1E6; } @media (max-width: 620px) { .card .card__icon--svg { width: 72px; height: 72px; padding: 14px; } } /* ========================================================================= MOBILE Most of the traffic is here. Several grids had no small-screen rule at all — the lead band in particular stayed two columns, which squeezed the form to 148px and its inputs to 101px. Everything below is ordered from widest to narrowest so the cascade reads top-down. ========================================================================= */ @media (max-width: 1000px) { /* the conversion block stacks: argument, then form */ .lead-band__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 5vw, 40px); } .lead-band__sub { max-width: none; } } @media (max-width: 860px) { .videogrid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { /* --- hero ------------------------------------------------------------ */ .hero--banner { padding-block: clamp(40px, 12vw, 64px) clamp(34px, 10vw, 52px); } .hero__mark { height: 40px; margin-bottom: 20px; } .hero h1 { font-size: clamp(26px, 8vw, 34px); line-height: 1.15; } .hero__sub { font-size: 15.5px; line-height: 1.72; } .hero__rules { max-width: 140px; } .hero__points { gap: 8px; } .hero__points li { font-size: 13px; padding: 8px 12px; } .hero__ctas { margin-top: 26px; gap: 10px; } /* --- card grids: two across, never a single tall column -------------- */ .cards--2, .cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cards .card { padding: 20px 14px 18px; } .cards .card h3 { font-size: 15px; margin-bottom: 8px; } .cards .card p { font-size: 13.5px; line-height: 1.65; } .card .card__icon--svg { width: 58px; height: 58px; padding: 11px; margin-bottom: 14px; } /* portraits stay legible at half width */ .cards--photo .card__media img { width: 96px; height: 96px; } /* --- lead form ------------------------------------------------------- */ .lead-form { padding: 22px 18px; border-radius: var(--radius); } .lead-form__row { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; } .lead-form input[type="text"], .lead-form input[type="tel"], .lead-form input[type="email"] { font-size: 16px; } /* 16px stops iOS zooming on focus */ .lead-band__facts { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 20px; } .lead-band__copy h2 { font-size: clamp(21px, 6vw, 27px); } /* --- media ----------------------------------------------------------- */ .videogrid { padding: 20px 14px; } .videogrid__items { gap: 10px; } .postgrid { gap: 12px; } .postcard h3 { font-size: 15.5px; margin: 14px 16px 8px; } .postcard p { font-size: 13.5px; margin: 0 16px 12px; } .postcard__more { margin: auto 16px 16px; } /* --- footer ---------------------------------------------------------- */ .foot__cols { grid-template-columns: minmax(0, 1fr); gap: 26px; } .foot__brand p { max-width: none; } .socials { justify-content: flex-start; } /* --- article ---------------------------------------------------------- */ .article-hero h1 { font-size: clamp(23px, 7vw, 30px); } .article__body { font-size: 16.5px; line-height: 1.8; } .article__body h2 { font-size: clamp(20px, 6vw, 25px); margin-top: 40px; } } @media (max-width: 420px) { /* four-up press logos get too small below this */ .logowall--press { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero__points li { font-size: 12.5px; padding: 7px 11px; } } /* Success stories stay three-across on phones (an explicit request), so the typography has to shrink with the column — a 15px name in a 106px card wraps to three lines and reads as broken. Selectors carry .article__body because these cards sit inside the article flow, where h3/blockquote are restyled. */ @media (max-width: 620px) { .stories { gap: 7px; margin: 24px 0 32px; } .story { border-radius: 10px; } .story__media { aspect-ratio: 1 / 1; } .article__body .story__who, .story__who { margin: 10px 9px 5px; font-size: 12.5px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; } .article__body .story__quote, .story__quote { margin: 0 9px 10px; font-size: 11.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } /* The label is the site's own copy, so it is left intact and allowed to run to two lines — tight leading keeps that reading as deliberate. */ .article__body .story__more, .story__more { margin: auto 9px 11px; font-size: 10.5px; line-height: 1.25; letter-spacing: -.2px; } } /* 44px is the minimum comfortable touch target */ @media (max-width: 1240px) { .topbar__toggle { width: 44px; height: 44px; } } /* ========================================================================= LINKED CARDS The original site wrapped each service icon-box in an anchor; the extractor now carries that href, so the whole card is the target again. ========================================================================= */ .card--link { display: block; color: inherit; text-decoration: none; padding-bottom: 46px; /* room for the affordance */ } .card--link h3 { transition: color .2s ease; } .card--link:hover { border-color: var(--rule-firm); box-shadow: var(--shadow-lift); transform: translateY(-3px); } .card--link:hover h3 { color: var(--brand-deep); } /* Arrow that reads as "there is a page behind this". RTL, so it points left. */ .card__go { position: absolute; inset-inline-start: 30px; bottom: 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-wash); transition: background .2s ease, transform .2s ease; } .card__go::before { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; /* left + bottom borders rotated 45° = a chevron pointing left, which is "forward" in RTL. Physical sides on purpose: the document is always rtl, and the logical pair pointed the arrow down. */ border-left: 2px solid var(--brand-deep); border-bottom: 2px solid var(--brand-deep); transform: rotate(45deg); transition: border-color .2s ease; } .card--link:hover .card__go { background: var(--brand-deep); transform: translateX(-3px); } .card--link:hover .card__go::before { border-color: #fff; } /* Hero service chips are links now, not labels. */ .hero__points li a { color: inherit; text-decoration: none; display: block; transition: color .2s ease; } .hero__points li:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .14); } .hero__points li:focus-within { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 620px) { .card--link { padding-bottom: 40px; } .card__go { inset-inline-start: 14px; bottom: 16px; width: 22px; height: 22px; } }