/* Ahmed Buhaza — Behavioral Screening tool (Behavioral Sales Leakage Test content, per the 2026-08-19 merge — see buhaza.py). The chat overlay itself reuses website/style.css's .chat-* / .msg-* rules (same look and feel as the BOSS IT chat); this file covers the brief bilingual landing hero (2026-08-20: the old EN/AR split page was replaced by an in-chat flow; 2026-08-22: Ahmed's full intro moved off this card and into its own in-chat stage — see .bz-intro-screen — and the single bilingual Start button became two same-size per-language Start buttons, .bz-start-row below, so there's no separate language-picker screen any more either), the Ahmed Buhaza chat-header lockup, the contact form, the page-by-page quiz, and the email-verification step. */ .bz-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); } /* ── Typeface — matched to Ahmed Buhaza's own site (buhaza.com), which sets Alexandria as its Arabic/Latin typeface throughout. [lang="ar"] catches the bilingual landing card's Arabic-tagged elements (shown before a language is chosen in-chat, see ahmed-buhaza.html); :root[dir="rtl"] catches the whole chat overlay once Arabic is chosen as the in-chat language (ahmed-buhaza.js selectLanguage() sets dir "rtl" on ). Alexandria covers Latin glyphs too, so English text nested inside an RTL context (names, numbers) still renders cleanly — no need to scope this more narrowly. */ [lang="ar"], :root[dir="rtl"] { font-family: 'Alexandria', var(--font-body, system-ui, sans-serif); } .bz-logo { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; direction: ltr; unicode-bidi: isolate; } .bz-logo-balance { color: #fff; } .bz-logo-pi { color: var(--gold); } .bz-logo-sm { font-size: 0.95em; } /* .bz-logo-balance defaults to white (matches the wordmark on dark surfaces elsewhere in the app) — the footer here is light, so its own logo instance needs a dark "balance" instead. */ .bz-footer .bz-logo-balance { color: var(--navy); } /* ── Landing hero — single unified card, no EN/AR split any more. This card introduces Ahmed bilingually and offers two same-size Start buttons (see .bz-start-row) — which one the client clicks decides the language, opening the chat straight into that language via openChat(lang) in ahmed-buhaza.js. ── */ .bz-hero { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 20px; } .bz-hero-card { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 480px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 48px 36px; } .bz-avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; direction: ltr; unicode-bidi: isolate; object-fit: cover; box-shadow: var(--shadow); } /* Arabic name comes first (see the 2026-08-21 "Arabic before English" ordering decision, applied throughout this page) — tight margin below it since the English name/title follows immediately. */ .bz-name-ar { font-family: 'Alexandria', var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--navy); margin-bottom: 2px; } .bz-name { font-family: var(--font-display); font-size: 1.85rem; color: var(--navy); margin-bottom: 10px; direction: ltr; unicode-bidi: isolate; } .bz-hero-card .bz-role { font-size: 1.05rem; color: var(--gold-text); font-weight: 600; margin-bottom: 20px; } .bz-role-sep { color: var(--gold-text); } /* ── Ahmed's personal intro (2026-08-21 copy, moved in-chat 2026-08-22 — see renderIntroStage() in ahmed-buhaza.js and .bz-intro-screen below) — greeting line, flowing paragraphs, the test-name callout, a short bullet list of what the client gets, an advice panel, and a closing CTA question. Alignment (2026-08-22 revision): justified — every text element here aligns flush on both the left and right edges of its own box, in both languages, rather than reading start-aligned/center like earlier revisions of this stage did. A line that doesn't wrap (most of the short "highlight" elements — the test-name callout, the closing CTA line) renders the same as start-aligned under justify, since only the last line of a justified block is exempt from stretching; that's expected, not a bug. Every element here still sits inside .bz-intro-screen's own centered flex column, so it all still reads as positioned in the middle of the screen. ── */ .bz-bio { text-align: justify; color: var(--text-muted); font-size: 1.08rem; line-height: 1.75; margin-bottom: 14px; max-width: 380px; width: 100%; } .bz-bio:last-of-type { margin-bottom: 26px; } .bz-bio-greeting { text-align: justify; font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; color: var(--navy); margin-bottom: 14px; max-width: 380px; width: 100%; } .bz-test-name { text-align: justify; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.5; color: var(--gold-text); background: var(--gold-dim); border: 1px solid var(--gold-border); border-radius: var(--radius); padding: 10px 18px; margin: 2px 0 16px; max-width: 380px; } .bz-bio-list { text-align: justify; max-width: 340px; width: 100%; margin: 0 0 16px; padding-inline-start: 22px; color: var(--text-muted); font-size: 1.05rem; line-height: 1.75; } .bz-bio-list li { margin-bottom: 4px; } .bz-bio-advice { text-align: justify; background: var(--surface); border-inline-start: 3px solid var(--gold); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; max-width: 380px; font-size: 1.02rem; line-height: 1.65; color: var(--text); } .bz-bio-advice strong { color: var(--navy); } .bz-bio-cta-line { text-align: justify; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--navy); max-width: 380px; margin-bottom: 8px; } .bz-intro-start-btn { margin-top: 10px; } .bz-cta { display: inline-block; background: var(--gold); color: #fff; font-weight: 600; font-size: 1.08rem; padding: 14px 32px; border-radius: 999px; box-shadow: var(--shadow); transition: var(--transition); } .bz-cta:hover { background: var(--navy); transform: translateY(-1px); } /* Role line stacks Arabic above English on its own line (Arabic first) — always, desktop included, not just on narrow screens: the two languages read as separate lines, not one bilingual run joined by " · ". (The old matching .bz-cta-* rules were removed 2026-08-22 — the single bilingual Start button they applied to no longer exists, see .bz-start-row.) */ .bz-role-ar, .bz-role-en { display: block; } .bz-role-sep { display: none; } .bz-role-ar { margin-bottom: 2px; } /* ── Two same-size Start buttons (2026-08-22) — which one the client clicks decides the language (see the DOMContentLoaded wiring in ahmed-buhaza.js), replacing the old single bilingual button + in-chat language-picker screen. flex:1 on each button (not a fixed width) keeps them equal width for any real viewport, and flex's default align-items:stretch keeps them equal height even if one language's label wraps differently than the other's. max-width is deliberately wider than the other 380px-capped content in this card (2026-08-22 fix): at 380px total, "Start Your Free Screening" wrapped to 3 lines while "ابدأ فحصك المجاني" only needed 2, so flex's stretch-to-tallest made every row taller than it needed to be. 460px gives each button enough room to wrap the English label to 2 lines — the row still can't exceed .bz-hero-card's own ~408px content width in practice (its padding constrains this row same as everything else), this max-width is just "don't constrain it further" rather than a real cap. row-reverse: Arabic stays first in DOM (same "Arabic before English" convention as the rest of this page — screen readers and view-source still see it first) but renders on the right, English on the left — see the 2026-08-22 "Arabic button on the right" decision. Only for the side-by-side row; the mobile breakpoint below switches to a plain (non-reversed) column, Arabic on top. */ .bz-start-row { display: flex; flex-direction: row-reverse; gap: 12px; width: 100%; max-width: 460px; } .bz-start-btn { flex: 1 1 0; min-width: 0; text-align: center; } @media (max-width: 420px) { .bz-start-row { flex-direction: column; } } /* ── Footer ── */ .bz-footer { padding: 20px 20px 28px; text-align: center; font-size: 0.78rem; color: var(--text-dim); border-top: 1px solid var(--border); } .bz-footer p { max-width: 560px; margin: 0 auto; } .bz-footer a { color: var(--gold-text); text-decoration: underline; } .bz-footer-sub { opacity: 0.85; } /* This page has no site-wide nav bar above the overlay (unlike the main BOSS IT chat, which sits under a 73px nav and inherits .chat-overlay's top:73px) — cover the full viewport instead. */ .bz-overlay { top: 0; } /* ── Intro stage — Ahmed's full personal intro, the first thing shown once the chat opens (see renderIntroStage() in ahmed-buhaza.js). Not vertically centered (this content is long — a min-height would just push it around); only horizontally centered as a column, so every child block (paragraphs, the test-name callout, the list, the advice panel) sits in the middle of the screen's width regardless of its own text-align (see .bz-bio* above, all justified as of 2026-08-22). Padding (2026-08-22 fix): generous side padding, matching the framed feel of the landing card (.bz-hero-card's own 36-48px padding) — #chatMessages itself carries no horizontal padding of its own, so this was the only thing standing between the text and the screen edge, and the original 6px left content sitting uncomfortably close to the edge, especially on mobile. */ .bz-intro-screen { display: flex; flex-direction: column; align-items: center; max-width: 480px; width: 100%; margin: 0 auto; padding: 12px 24px 24px; } @media (max-width: 480px) { .bz-intro-screen { padding: 8px 20px 24px; } } /* ── Desktop widening (2026-09-14) — the 480px card above (and its children's own 340-380px text-block caps below) read fine on a phone, but on a real desktop viewport they left the welcome/intro stage sitting in a narrow mobile-width column with the rest of the screen empty either side. From 768px up, both the outer column and every text block inside it widen to use the page properly — same idea as .msg-wrap's 760px elsewhere in this chat — while staying centered and keeping their own comfortable per-line reading width (not one single full-bleed paragraph, which would be too wide to read easily). Only the intro/welcome stage — the quiz (.bz-quiz) and landing hero (.bz-hero-card) already have their own deliberate, narrower card widths and are unaffected. */ @media (min-width: 768px) { .bz-intro-screen { max-width: 760px; } .bz-bio, .bz-bio-greeting, .bz-test-name, .bz-bio-advice, .bz-bio-cta-line { max-width: 680px; } .bz-bio-list { max-width: 640px; } } /* ── Chat header lockup ── */ .bz-chat-logo { display: flex; align-items: center; gap: 10px; } .bz-chat-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #fff; font-weight: 700; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; object-fit: cover; } .bz-chat-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: #fff; } :root[dir="rtl"] .bz-chat-title { font-family: 'Alexandria', var(--font-display); } /* ── Bigger type inside the chat overlay itself — better legibility on mobile (this overrides style.css's generic .msg-*/.option-btn sizes, scoped to this page's overlay only via #chatOverlay.bz-overlay). ── */ #chatOverlay.bz-overlay .msg-assistant-label { font-size: 0.82rem; } #chatOverlay.bz-overlay .msg-assistant-body, #chatOverlay.bz-overlay .msg-user-bubble { font-size: 1.05rem; line-height: 1.8; } #chatOverlay.bz-overlay .msg-options-q { font-size: 0.95rem; } #chatOverlay.bz-overlay .option-btn { font-size: 1.02rem; } /* ── One-question-per-screen quiz ── .bz-quiz inherits .msg-assessment's card chrome (border/background) but .msg-assessment itself carries no padding — its BOSS IT usages get padding from inner elements like .assessment-banner. This quiz has no equivalent inner-padded wrapper, so without this the progress bar, question text, and options sit flush against the card edges. */ .bz-quiz { padding: 22px 24px 26px; } @media (max-width: 480px) { .bz-quiz { padding: 18px 16px 22px; } } .bz-progress-wrap { margin-bottom: 18px; } .bz-progress-text { font-size: 0.88rem; color: var(--text-dim); margin-bottom: 6px; } .bz-progress-bar { height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; } .bz-progress-fill { height: 100%; background: var(--gold); border-radius: 4px; transition: width 0.3s ease; } .bz-q-cat { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; color: var(--gold-text); background: var(--gold-dim); border: 1px solid var(--gold-border); border-radius: 999px; padding: 3px 12px; margin-bottom: 12px; } .bz-q-text { font-family: var(--font-display); font-size: 1.3rem; color: var(--navy); line-height: 1.55; margin-bottom: 18px; } :root[dir="rtl"] .bz-q-text { font-family: 'Alexandria', var(--font-display); font-weight: 500; } .bz-options { display: flex; flex-direction: column; gap: 8px; max-width: 460px; } .bz-option-btn { display: block; width: 100%; text-align: start; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 13px 16px; font-size: 1.05rem; color: var(--text); line-height: 1.5; transition: var(--transition); } .bz-option-btn:hover:not(.disabled) { border-color: var(--gold); background: var(--gold-dim); } .bz-option-btn.disabled { opacity: 0.5; pointer-events: none; } /* Previously-answered option, shown when navigating Back to a question that already has an answer — the page-by-page quiz re-renders the same card in place (see renderQuestion() in ahmed-buhaza.js), so the prior choice needs a visual marker since it isn't simply left on screen. */ .bz-option-btn.selected { border-color: var(--gold); background: var(--gold-dim); font-weight: 600; } .bz-back-btn { display: block; width: 100%; margin-top: 20px; padding: 13px; text-align: center; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 1rem; font-weight: 600; color: var(--text-muted); transition: var(--transition); } .bz-back-btn:hover { border-color: var(--gold); color: var(--gold-text); background: var(--gold-dim); } /* ── Contact form (name / company / role / email / business / mobile / website / social + consent) ── */ .bz-form { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; max-width: 460px; } .bz-form-field { margin-bottom: 14px; } .bz-form-field:last-of-type { margin-bottom: 0; } .bz-form-label { display: block; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 4px; } .bz-form-label-optional { font-size: 0.8rem; color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: normal; } .bz-form-input, .bz-form-textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 1.05rem; color: var(--text); background: var(--surface); } .bz-form-textarea { resize: vertical; min-height: 72px; line-height: 1.5; } .bz-form-input:focus, .bz-form-textarea:focus { outline: none; border-color: var(--gold); background: var(--bg); } /* Mandatory field left incomplete on submit — highlighted in red until the client edits it (see clearFieldError() in ahmed-buhaza.js). */ .bz-form-input.bz-field-invalid, .bz-form-textarea.bz-field-invalid, .bz-form-field .phone-field input.bz-field-invalid { border-color: #dc2626; background: #fef2f2; } /* Mobile number — country code + national number, reusing the same .phone-field / .phone-code-select rules style.css already defines for the main site's register form (165px 1fr, stacking to 1fr under style.css's own max-width:640px rule) — no column-width override here so that stacking behavior carries over unchanged. */ .bz-form-field .phone-code-select, .bz-form-field .phone-field input { background: var(--surface); font-size: 1.05rem; } .bz-form-field .phone-field input:focus, .bz-form-field .phone-code-select:focus { background: var(--bg); } /* Consent block — same visual language as the Focused/Ambitious sign-up consent block (see .consent-block in style.css), tuned slightly for this form's white background so the checkboxes read clearly. */ .bz-form .consent-block { background: var(--surface); margin-top: 6px; margin-bottom: 14px; padding: 14px 16px; } .bz-form .consent-text { font-size: 0.9rem; } .bz-consent-error { color: #b91c1c; font-size: 0.88rem; margin: -6px 0 14px; display: none; } .bz-consent-error.is-visible { display: block; } .bz-form-error { color: #b91c1c; font-size: 0.88rem; margin-top: 10px; display: none; } .bz-form-error.is-visible { display: block; } .bz-form-submit { margin-top: 14px; width: 100%; background: var(--gold); color: #fff; font-weight: 600; font-size: 1.05rem; padding: 13px; border-radius: 999px; transition: var(--transition); } .bz-form-submit:hover:not(:disabled) { background: var(--navy); } .bz-form-submit:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Email verification code step ── */ .bz-code-input { width: 100%; max-width: 220px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 1.4rem; letter-spacing: 0.4em; text-align: center; color: var(--navy); background: var(--bg); direction: ltr; } .bz-code-input:focus { outline: none; border-color: var(--gold); } .bz-code-resend { display: inline-block; margin-top: 12px; font-size: 0.92rem; color: var(--text-dim); } .bz-code-resend:hover { color: var(--gold-text); } .bz-code-resend:disabled { opacity: 0.5; pointer-events: none; } /* RTL mirroring for form/quiz text alignment, following the same :root[dir="rtl"] convention style.css uses site-wide. */ :root[dir="rtl"] .bz-form-label, :root[dir="rtl"] .bz-form-input, :root[dir="rtl"] .bz-form-textarea { text-align: right; } /* Phone code stays on the same side as the rest of the site's phone field (LTR digits read more naturally left-to-right even in an Arabic-language form) — only the label above it flips. */ :root[dir="rtl"] .bz-form-field .phone-field { direction: ltr; } :root[dir="rtl"] .bz-form-field .phone-field input { text-align: right; } @media (max-width: 640px) { .bz-hero-card { padding: 36px 22px; } .bz-name { font-size: 1.65rem; } .bz-name-ar { font-size: 1.35rem; } .bz-bio { font-size: 1.1rem; } .bz-q-text { font-size: 1.2rem; } .bz-option-btn { font-size: 1.05rem; padding: 14px 16px; } #chatOverlay.bz-overlay .msg-assistant-body, #chatOverlay.bz-overlay .msg-user-bubble { font-size: 1.08rem; } .bz-form-label { font-size: 0.92rem; } .bz-form-input, .bz-form-textarea, .bz-form-submit { font-size: 1.08rem; } }