/* ══════════════════════════════════════════════════════════════════════ Talk-to-Expert Advisory Funnel — base component library (Doc 515 §6). Blueprint clone of get-started's wizard.css scope per §16.3 zero-shared- files boundary — physical copy of the patterns, own class prefix (.mz-tte-*), independent evolution. Loaded by: layouts/talk_to_an_expert_public.blade.php Scope: All /talk-to-an-expert/* advisory funnel pages. Design language (Doc 515 §6.1 palette — HARD 4-locale + RTL day-0): --tte-bg: #F4F8FD (very light blue-gray page bg) --tte-card-bg: #FFFFFF (card white) --tte-ink: #0F172A (heading dark navy) --tte-primary: #2563EB (Monezzi blue primary CTA / progress) --tte-muted: #64748B (secondary text muted blue-gray) --tte-line: #E2E8F0 (thin pale blue-gray border) Typography inherited from platform-level mz-v2.css (Inter body + Plus Jakarta Sans display) via layout chain. RTL support: layout sets dir="rtl" on for Arabic; CSS logical properties (inline-start / inline-end / block-start / block-end) preferred throughout. Honeypot: input honeypot inline style `left:-9999px;top:-9999px;` pattern applied per-form in blade (feedback_honeypot_rtl_safe_pattern HARD 2026-09-08 — canonical field spec Doc 515 §16.8). ══════════════════════════════════════════════════════════════════════ */ /* ────── Design tokens — /get-started/why Screen 3 canonical parity (Orhan HARD 2026-09-08) ────── */ :root { --tte-bg: #F4F8FD; --tte-card-bg: #FFFFFF; --tte-bg-soft-blue: #F8FBFF; /* hover / checked tile tint */ --tte-ink: #0F172A; --tte-ink-2: #475569; /* not "muted" — ink-2, soluk YASAK (Screen 3 rule) */ --tte-muted: #475569; /* alias to ink-2 for existing consumers — soluk YASAK */ --tte-line: #E2E8F0; --tte-line-2: #94A3B8; --tte-primary: #2563EB; --tte-primary-2: #1D4ED8; /* hover / active */ --tte-primary-soft: #EFF6FF; /* icon square bg */ --tte-primary-tint: #DBEAFE; /* checked icon bg */ --tte-warn: #B45309; --tte-danger: #DC2626; --tte-radius-sm: 8px; --tte-radius-md: 10px; /* Screen 3 icon square canonical 10px */ --tte-radius-lg: 20px; --tte-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05); --tte-shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08); --tte-shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.12); --tte-space-1: 4px; --tte-space-2: 8px; --tte-space-3: 12px; --tte-space-4: 16px; --tte-space-5: 24px; --tte-space-6: 32px; --tte-space-8: 48px; /* Font-size scale — Screen 3 canonical (mobile-first). Desktop overrides handled per-component @media (min-width: 640px). */ --tte-fs-xs: 12.5px; /* privacy / meta */ --tte-fs-1: 13px; /* option desc */ --tte-fs-2: 14.5px; /* lede / body */ --tte-fs-3: 15px; /* option title */ --tte-fs-4: 17px; /* section title */ --tte-fs-5: 28px; /* H1 mobile — desktop overrides to 32px (Doc 515 §6.2) */ --tte-fs-6: 34px; /* future large */ } /* ────── Shell ────── */ .mz-tte-shell { background: var(--tte-bg); color: var(--tte-ink); min-height: 100vh; font-family: 'Inter', system-ui, -apple-system, sans-serif; line-height: 1.5; } .mz-tte-shell.mz-tte-public { padding-block-start: 56px; /* room for fixed topbar */ /* Room below the last content element so fixed sticky bar never covers the language switcher footer. Value covers sticky bar height (~72px) + iOS safe-area inset. Applied universally across /talk-to-an-expert/* (all screens include the canonical sticky_bar partial). */ padding-block-end: calc(80px + env(safe-area-inset-bottom, 0px)); } /* ────── Topbar ────── */ .mz-tte-topbar { position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 56px; background: var(--tte-card-bg); border-block-end: 1px solid var(--tte-line); display: flex; align-items: center; padding-inline: var(--tte-space-4); z-index: 100; } .mz-tte-brand { display: inline-flex; align-items: center; } .mz-tte-brand img { display: block; height: 28px; width: auto; } /* Desktop-only — topbar brand main content ile aynı hizadan başlar (720px max-width + 16px padding = mz-tte-main sol edge ile eşit). Mobil (<768px) mevcut davranış korunur: topbar padding-inline 16px + brand sol edge'e sabit. */ @media (min-width: 768px) { .mz-tte-topbar { padding-inline: 0; } .mz-tte-topbar-inner { max-width: 720px; width: 100%; margin-inline: auto; padding-inline: 16px; box-sizing: border-box; display: flex; align-items: center; height: 100%; } } /* ────── Main / cards ────── */ .mz-tte-main { max-width: 720px; margin-inline: auto; padding: 16px; } .mz-tte-card { background: var(--tte-card-bg); border-radius: var(--tte-radius-lg); box-shadow: var(--tte-shadow-md); padding: var(--tte-space-6); margin-block-end: var(--tte-space-5); } .mz-tte-card--flat { box-shadow: none; border: 1px solid var(--tte-line); } /* ────── Typography (Screen 3 parity — mobile-first + desktop override) ────── */ .mz-tte-h1 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: var(--tte-fs-5); /* 28px mobile — Screen 3 spec */ font-weight: 800; /* Doc 515 §6.2 heading weight — stronger presence */ line-height: 1.15; /* Screen 3 canonical */ letter-spacing: -0.02em; /* modern tight tracking — cazip */ margin: 0 0 12px; color: var(--tte-ink); } .mz-tte-h2 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: var(--tte-fs-4); /* 17px */ font-weight: 700; line-height: 1.3; margin: 0 0 var(--tte-space-3) 0; color: var(--tte-ink); } .mz-tte-h3 { font-size: var(--tte-fs-3); /* 15px */ font-weight: 600; line-height: 1.35; margin: 0 0 var(--tte-space-2) 0; color: var(--tte-ink); } .mz-tte-lead { font-size: 15px; /* Screen 3 canonical mobile */ font-weight: 500; line-height: 1.5; color: var(--tte-ink-2); margin: 0 0 20px; /* Screen 3 verbatim */ } .mz-tte-muted { color: var(--tte-ink-2); /* soluk YASAK — ink-2, not #64748B */ } .mz-tte-page-label { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tte-primary); margin-block-end: var(--tte-space-3); } /* ────── Buttons ────── */ .mz-tte-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--tte-space-2); padding: 14px var(--tte-space-5); border-radius: var(--tte-radius-md); font-size: var(--tte-fs-2); font-weight: 600; line-height: 1.2; border: none; cursor: pointer; text-decoration: none; transition: transform .08s ease, background .12s ease, box-shadow .12s ease; min-height: 48px; /* mobile tap-target */ } .mz-tte-btn--primary { background: var(--tte-primary); color: #ffffff; box-shadow: var(--tte-shadow-sm); } .mz-tte-btn--primary:hover { background: #1D4ED8; box-shadow: var(--tte-shadow-md); } .mz-tte-btn--secondary { background: var(--tte-card-bg); color: var(--tte-ink); border: 1px solid var(--tte-line); } .mz-tte-btn--full { width: 100%; } .mz-tte-btn.is-loading { opacity: 0.65; cursor: wait; } /* ────── Form ────── */ .mz-tte-form-row { margin-block-end: var(--tte-space-4); } .mz-tte-form-row.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tte-space-3); } .mz-tte-label { display: block; font-size: var(--tte-fs-1); font-weight: 600; color: var(--tte-ink); margin-block-end: var(--tte-space-1); } .mz-tte-input { display: block; width: 100%; padding: 12px var(--tte-space-3); font-size: var(--tte-fs-2); line-height: 1.4; color: var(--tte-ink); background: var(--tte-card-bg); border: 1px solid var(--tte-line); border-radius: var(--tte-radius-sm); transition: border-color .12s ease, box-shadow .12s ease; min-height: 48px; } .mz-tte-input:focus { outline: none; border-color: var(--tte-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16); } .mz-tte-hint { display: block; font-size: var(--tte-fs-1); color: var(--tte-muted); margin-block-start: var(--tte-space-1); } .mz-tte-error { display: block; font-size: var(--tte-fs-1); color: var(--tte-danger); margin-block-start: var(--tte-space-1); } /* ────── Tier / topic cards (Step 1 + Step 3) ────── */ .mz-tte-tier-list { display: grid; grid-template-columns: 1fr; gap: var(--tte-space-3); margin-block: var(--tte-space-5); } .mz-tte-tier-card { display: flex; flex-direction: column; background: var(--tte-card-bg); border: 1px solid var(--tte-line); border-radius: var(--tte-radius-md); padding: var(--tte-space-5); text-align: start; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease; text-decoration: none; color: var(--tte-ink); } .mz-tte-tier-card:hover { border-color: var(--tte-primary); box-shadow: var(--tte-shadow-md); } .mz-tte-tier-title { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: var(--tte-fs-3); font-weight: 700; margin-block-end: var(--tte-space-1); } .mz-tte-tier-desc { display: block; font-size: var(--tte-fs-2); color: var(--tte-muted); margin-block-end: var(--tte-space-3); } .mz-tte-tier-price { display: inline-block; padding: 4px var(--tte-space-2); border-radius: var(--tte-radius-sm); font-size: var(--tte-fs-1); font-weight: 700; background: rgba(37, 99, 235, 0.08); color: var(--tte-primary); align-self: start; } .mz-tte-tier-price--free { background: rgba(5, 150, 105, 0.12); color: #047857; } /* ────── Language switcher (footer) ────── */ .mz-tte-langs { display: flex; justify-content: center; align-items: center; gap: var(--tte-space-2); padding: var(--tte-space-5) var(--tte-space-4); font-size: var(--tte-fs-1); color: var(--tte-muted); } .mz-tte-langsep { color: var(--tte-line); } .mz-tte-lang { color: var(--tte-muted); text-decoration: none; transition: color .12s ease; } .mz-tte-lang:hover, .mz-tte-lang.active { color: var(--tte-primary); } /* ────── Loading state (shared with tte-progress) ────── */ .is-loading { opacity: 0.65; pointer-events: none; cursor: wait; } /* ────── Responsive (mobile-first — desktop refinements) ────── */ /* Screen 3 typography scale @640px+ (H1 32px · lead 16px · margins fixed — Doc 515 §6.2). */ @media (min-width: 640px) { .mz-tte-h1 { font-size: 32px; } .mz-tte-lead { margin-bottom: 24px; font-size: 16px; } } @media (min-width: 720px) { .mz-tte-tier-list { gap: var(--tte-space-4); } } /* ────── WhatsApp live 1:1 alternatives bridge — Doc 515 §1.1.1 soft upsell ────── Plain block (no card, no border, no background) rendered at the BOTTOM of the WhatsApp-fork topic page. Sits quietly under the primary form, small font size so it does not compete with the topic-pick card above or the sticky Continue CTA below. Positive-framing invitation. Each row is a link with a trailing chevron to signal navigation affordance. */ .mz-tte-wa-live-alt { margin: 10px 4px 8px; padding: 0; } .mz-tte-wa-live-alt-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--tte-muted); letter-spacing: 0.01em; } .mz-tte-wa-live-alt-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; } .mz-tte-wa-live-alt-list li { margin: 0; padding: 0; font-size: 13px; line-height: 1.4; } .mz-tte-wa-live-alt-link { display: inline-flex; align-items: center; gap: 16px; padding: 4px 0; color: var(--tte-primary); text-decoration: none; font-weight: 500; transition: color .15s; } .mz-tte-wa-live-alt-link-chev { font-size: 16px; line-height: 1; color: var(--tte-primary); opacity: 0.5; transition: opacity .15s, transform .15s; } .mz-tte-wa-live-alt-link:hover .mz-tte-wa-live-alt-link-label, .mz-tte-wa-live-alt-link:focus .mz-tte-wa-live-alt-link-label { text-decoration: underline; } .mz-tte-wa-live-alt-link:hover .mz-tte-wa-live-alt-link-chev, .mz-tte-wa-live-alt-link:focus .mz-tte-wa-live-alt-link-chev { opacity: 1; transform: translateX(2px); } /* ══════════════════════════════════════════════════════════════════════ Sticky bottom bar — CANONICAL (Orhan 2026-09-10, moved from screen-founder-details.css). Used by ALL advisory funnel paid screens: - talk/details, founder/details, moving/details - talk/schedule, founder/schedule, moving/schedule - talk/payment, founder/payment, moving/payment Layout: left-aligned price info (main + sub) · right-aligned Back + Continue. Fixed bottom, safe-area inset. Caller adds bottom padding on scroll container to prevent overlap. Class set: .mz-tte-sticky, .mz-tte-sticky-inner, .mz-tte-sticky-info, .mz-tte-sticky-price-main, .mz-tte-sticky-price-sub, .mz-tte-sticky-actions, .mz-tte-sticky-back, .mz-tte-sticky-continue. ══════════════════════════════════════════════════════════════════════ */ .mz-tte-sticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; background: var(--tte-card-bg); border-block-start: 1px solid var(--tte-line); box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, 0.12); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); } .mz-tte-sticky-inner { max-width: 720px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--tte-space-3); } .mz-tte-sticky-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; overflow: hidden; } .mz-tte-sticky-price-main { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--tte-ink); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mz-tte-sticky-price-sub { font-size: 12px; font-weight: 500; line-height: 1.35; color: #334155; white-space: normal; word-break: break-word; overflow-wrap: break-word; } .mz-tte-sticky-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; -webkit-text-size-adjust: 100%; } .mz-tte-sticky-back { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: transparent; color: #334155; border: none; border-radius: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; min-height: auto; cursor: pointer; transition: color .12s ease, text-decoration-color .12s ease; } .mz-tte-sticky-back:hover { color: #0F172A; } .mz-tte-sticky-continue { display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; background: var(--tte-primary); color: #FFFFFF; border: none; border-radius: var(--tte-radius-md); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; min-height: 48px; box-shadow: 0 1px 2px 0 rgba(37, 99, 235, 0.18); transition: background .12s ease, box-shadow .12s ease, transform .08s ease; } .mz-tte-sticky-continue:hover { background: var(--tte-primary-2); box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.28); } .mz-tte-sticky-continue:active { transform: translateY(1px); } .mz-tte-sticky-continue[disabled], .mz-tte-sticky-continue[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; box-shadow: none; } @media (max-width: 480px) { .mz-tte-sticky-inner { gap: 8px; } .mz-tte-sticky-actions { gap: 10px; } .mz-tte-sticky-price-main { font-size: 14px; } .mz-tte-sticky-price-sub { font-size: 11px; } .mz-tte-sticky-back { font-size: 13px; } .mz-tte-sticky-continue { padding: 9px 12px; font-size: 13px; min-height: 40px; } } @media (min-width: 720px) { .mz-tte-sticky { padding: 16px 24px; } .mz-tte-sticky-price-main { font-size: 20px; } .mz-tte-sticky-price-sub { font-size: 13px; } .mz-tte-sticky-back { font-size: 14px; } .mz-tte-sticky-continue { padding: 14px 22px; font-size: 15px; } } /* RTL: flip arrow direction (Arabic layout). */ [dir="rtl"] .mz-tte-sticky-back svg, [dir="rtl"] .mz-tte-sticky-continue svg { transform: scaleX(-1); }