/* ============================================================================
nannovative-canonical.css
----------------------------------------------------------------------------
تنها منبع حقیقت دیزاین‌سیستم. باید آخرین فایل CSS در cascade باشد.
مقادیر مرجع از DOM زنده‌ی nannovative.com استخراج شده‌اند (2026-08-26).
سند: docs/design-unification/PHASES.md
وضعیت فعلی: فاز ۱ — توکن و تایپوگرافی
----------------------------------------------------------------------------
چرا سلکتورها این‌قدر طولانی‌اند؟
فایل‌های قدیمی برای همین عناصر اعلان‌های !important با specificity بالا
دارند؛ بالاترینشان برای .flow-title برابر (1,7,4) است. تکرار کلاس تنها
راه بردن در cascade بدون دست‌زدن به آن فایل‌هاست — یعنی rollback همچنان
با حذف یک ممکن است.
در فاز ۷ که آن اعلان‌ها حذف شوند، همه‌ی این سلکتورها به
«html body .x» کوتاه می‌شوند.
صحت cascade با این دستور بررسی می‌شود:
python3 docs/design-unification/cascade-check.py
============================================================================ */
:root {
/* ---------- رنگ ---------- */
--nv-bg: #101010;
--nv-panel: rgba(18, 18, 18, .95);
--nv-accent: #0ABAB5;
--nv-accent-dark: #089F9A;
--nv-text: #FFFFFF;
--nv-text-card: rgba(255, 255, 255, .9);
--nv-surface-glass: rgba(255, 255, 255, .05);
--nv-border-glass: rgba(255, 255, 255, .2);
/* ---------- فونت ---------- */
--nv-font-display: "Bayon", "Arial Narrow", sans-serif; /* فقط >= 50px */
--nv-font-body: "Space Grotesk", Arial, sans-serif;
/* ---------- مقیاس تایپوگرافی (>= 1440px) ---------- */
--nv-fs-hero: 120px;
--nv-fs-hero-sm: 85px; /* خط کوتاه هیرو و شمارش معکوس دوربین */
--nv-fs-h2: 60px;
--nv-fs-h3: 36px;
--nv-fs-card: 24px; /* تیتر کارت و متن داخل کارت */
--nv-fs-body: 25px;
--nv-fs-btn: 24px;
--nv-fs-btn-sm: 18px;
--nv-fs-nav: 20px;
--nv-fs-min: 18px; /* کف مطلق */
--nv-lh-hero: 1;
--nv-lh-h2: 1.1;
--nv-lh-h3: 1.2;
--nv-lh-body: 1.5;
--nv-fs-eyebrow: 24px; /* eyebrow مرجع — فاز ۶٫۳ */
--nv-ls-eyebrow: 2.5px;
--nv-ts-h2: 0 4px 8px rgba(0, 0, 0, .4);
--nv-ts-h3: 0 2px 4px rgba(0, 0, 0, .3);
--nv-radius: 0;
--nv-radius-bar: 15px;
--nv-sh-btn: 0 4px 15px rgba(10, 186, 181, .3);
--nv-sh-btn-hover: 0 6px 20px rgba(10, 186, 181, .4);
--nv-sh-btn-ghost: 0 4px 15px rgba(255, 255, 255, .1);
--nv-sh-btn-ghost-h: 0 6px 20px rgba(255, 255, 255, .3);
--nv-sh-card-hover: 0 12px 40px rgba(10, 186, 181, .2);
--nv-sh-panel: 0 8px 32px rgba(0, 0, 0, .3);
--nv-sh-glow: 0 12px 48px rgba(10, 186, 181, .5);
--nv-sh-separator: 0 4px 15px rgba(0, 0, 0, .2);
--nv-grad-btn: linear-gradient(135deg, #0ABAB5, #089F9A);
--nv-grad-btn-hover: linear-gradient(135deg, #089F9A, #0ABAB5);
--nv-grad-shine: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
--nv-grad-card-hover: linear-gradient(135deg, rgba(10,186,181,.2) 0%, rgba(16,16,16,.9) 100%);
--nv-grad-border: linear-gradient(143deg, rgba(18,18,18,.1) 0%, rgba(53,53,53,.3) 33%, rgba(107,107,107,.4) 66%, #808080 100%);
--nv-grad-border-acc: linear-gradient(135deg, rgba(10,186,181,.8) 0%, rgba(128,128,128,.6) 50%, rgba(10,186,181,.8) 100%);
--nv-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--nv-dur-fast: .3s;
--nv-dur-card: .4s;
--nv-dur-shine: .5s;
--nv-dur-enter: .8s;
--nv-container-max: 1720px;
--nv-section-pad-y: 80px;
--nv-section-pad-x: 32px;
--nv-canonical: "phase-6.3";
}
/* ============================================================================
1. پایه
============================================================================ */
html body {
font-family: var(--nv-font-body);
font-size: var(--nv-fs-min);
line-height: var(--nv-lh-body);
background-color: var(--nv-bg);
}
/* ============================================================================
2. تیتر نمایشی — تنها جایی که Bayon مجاز است
مرجع: 120 / 100 / 80 / 70 / - / - / 60 / 50
============================================================================ */
html body .video-entry-title.video-entry-title,
html body .lab-hero-title.lab-hero-title {
font-family: var(--nv-font-display) !important;
font-size: var(--nv-fs-hero) !important;
line-height: var(--nv-lh-hero) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
@media (max-width: 1439px) { html body .video-entry-title.video-entry-title, html body .lab-hero-title.lab-hero-title { font-size: 100px !important; } }
@media (max-width: 1319px) { html body .video-entry-title.video-entry-title, html body .lab-hero-title.lab-hero-title { font-size: 80px !important; } }
@media (max-width: 1199px) { html body .video-entry-title.video-entry-title, html body .lab-hero-title.lab-hero-title { font-size: 70px !important; } }
@media (max-width: 575px) { html body .video-entry-title.video-entry-title, html body .lab-hero-title.lab-hero-title { font-size: 60px !important; } }
@media (max-width: 359px) { html body .video-entry-title.video-entry-title, html body .lab-hero-title.lab-hero-title { font-size: 50px !important; } }
/* کلمه‌ی تأکیدی. پروژه از استفاده می‌کند و نیمه‌ی سفید است
(.flow-title span { color:#f4f5f5 } در modal-flow.css). هدف گرفتن span
کل تیتر را teal می‌کرد. */
html body .video-entry-accent,
html body .lab-hero-title strong { color: var(--nv-accent) !important; }
/* نیمه‌ی غیرتأکیدی تیتر — در مرجع سفید خالص است */
html body .lab-hero-title span,
html body .flow-title span { color: var(--nv-text) !important; }
/* ============================================================================
3. تیتر مرحله — نقش H2 مرجع
مرجع: 60 / 56 / 52 / 48 / 44 / 40 · line-height 1.1 · weight 700
============================================================================ */
html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title,
html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title,
html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title,
html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title,
html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title,
html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title,
html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title,
html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title {
font-family: var(--nv-font-body) !important;
font-size: var(--nv-fs-h2) !important;
font-weight: 700 !important;
line-height: var(--nv-lh-h2) !important;
letter-spacing: normal !important;
text-shadow: var(--nv-ts-h2);
}
@media (max-width: 1439px) { html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title { font-size: 56px !important; } }
@media (max-width: 1319px) { html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title { font-size: 52px !important; } }
@media (max-width: 1199px) { html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title { font-size: 48px !important; } }
@media (max-width: 991px) { html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title { font-size: 44px !important; } }
@media (max-width: 767px) { html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title { font-size: 40px !important; } }
html body .flow-title strong { color: var(--nv-accent) !important; }
/* ============================================================================
4. متن اصلی
مرجع: 25 / - / - / - / 22 / 20 / 18 · line-height 1.5 · weight 400
============================================================================ */
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle,
html body #achievementStageTitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle,
html body #resultsTitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle,
html body .video-entry-subtitle.video-entry-subtitle,
html body .lab-hero-summary.lab-hero-summary {
font-family: var(--nv-font-body) !important;
font-size: var(--nv-fs-body) !important;
font-weight: 400 !important;
line-height: var(--nv-lh-body) !important;
color: var(--nv-text-card) !important;
}
@media (max-width: 991px) { html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle, html body #achievementStageTitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle, html body #resultsTitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle, html body .video-entry-subtitle.video-entry-subtitle, html body .lab-hero-summary.lab-hero-summary { font-size: 22px !important; } }
@media (max-width: 767px) { html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle, html body #achievementStageTitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle, html body #resultsTitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle, html body .video-entry-subtitle.video-entry-subtitle, html body .lab-hero-summary.lab-hero-summary { font-size: 20px !important; } }
@media (max-width: 575px) { html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle, html body #achievementStageTitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle, html body #resultsTitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle, html body .video-entry-subtitle.video-entry-subtitle, html body .lab-hero-summary.lab-hero-summary { font-size: 18px !important; } }
/* ============================================================================
5. اندازه‌ی متن دکمه
مرجع: بزرگ 24px/500 (22px زیر 1440) · کوچک 18px/500
رنگ، گرادیانت، سایه و افکت shine در فاز ۲ اضافه می‌شوند.
============================================================================ */
html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button,
html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button {
font-family: var(--nv-font-body) !important;
font-size: var(--nv-fs-btn) !important;
font-weight: 500 !important;
}
@media (max-width: 1439px) { html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button, html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button, html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button { font-size: 22px !important; } }
html body .quiz-nav-button.quiz-nav-button.quiz-nav-button.quiz-nav-button.quiz-nav-button.quiz-nav-button,
html body .back-button.back-button.back-button.back-button.back-button.back-button,
html body .text-button.text-button.text-button.text-button.text-button.text-button,
html body .nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button,
html body .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action {
font-family: var(--nv-font-body) !important;
font-size: var(--nv-fs-btn-sm) !important;
font-weight: 500 !important;
}
/* ============================================================================
6. کف مطلق — هیچ متن محتوایی زیر 18px
کوچک‌ترین متن سایت مرجع 18px است، بدون استثنا.
============================================================================ */
html body .step.step.step.step.step.step,
html body .section-divider.section-divider.section-divider.section-divider.section-divider.section-divider,
html body .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note,
html body .field-group.field-group.field-group.field-group.field-group.field-group label,
html body .field-group.field-group.field-group.field-group.field-group.field-group input,
html body .custom-checkbox.custom-checkbox.custom-checkbox.custom-checkbox.custom-checkbox.custom-checkbox,
html body .terms-row.terms-row.terms-row.terms-row.terms-row.terms-row,
html body .terms-copy.terms-copy.terms-copy.terms-copy.terms-copy.terms-copy,
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption,
html body .success-toast.success-toast.success-toast.success-toast.success-toast.success-toast strong,
html body .success-toast.success-toast.success-toast.success-toast.success-toast.success-toast span,
html body .quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta,
html body .quiz-privacy-note.quiz-privacy-note.quiz-privacy-note.quiz-privacy-note.quiz-privacy-note.quiz-privacy-note,
html body .quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer,
html body .quiz-report-profile.quiz-report-profile.quiz-report-profile.quiz-report-profile.quiz-report-profile.quiz-report-profile span,
html body .generation-status-panel .generation-item.generation-item.generation-item.generation-item.generation-item.generation-item,
html body .generation-status-panel .privacy-note.privacy-note.privacy-note.privacy-note.privacy-note.privacy-note,
html body .generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message,
html body .portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status,
html body .advice-recap .advice-recap-row.advice-recap-row.advice-recap-row.advice-recap-row.advice-recap-row.advice-recap-row dd,
html body .advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer,
html body .lab-hero-process.lab-hero-process.lab-hero-process.lab-hero-process.lab-hero-process.lab-hero-process li,
html body .lab-hero-process-copy.lab-hero-process-copy.lab-hero-process-copy.lab-hero-process-copy.lab-hero-process-copy.lab-hero-process-copy strong,
html body .lab-hero-process-copy.lab-hero-process-copy.lab-hero-process-copy.lab-hero-process-copy.lab-hero-process-copy.lab-hero-process-copy em,
html body .lab-hero-annotation.lab-hero-annotation.lab-hero-annotation.lab-hero-annotation.lab-hero-annotation.lab-hero-annotation span,
html body .lab-hero-annotation.lab-hero-annotation.lab-hero-annotation.lab-hero-annotation.lab-hero-annotation.lab-hero-annotation strong,
html body .achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer,
html body .achievement-share-status.achievement-share-status.achievement-share-status.achievement-share-status.achievement-share-status.achievement-share-status,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy ol,
html body .quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact p,
html body .send-details-back.send-details-back.send-details-back.send-details-back.send-details-back.send-details-back {
font-size: var(--nv-fs-min) !important;
line-height: var(--nv-lh-body) !important;
font-family: var(--nv-font-body) !important;
}
html body .lab-hero-process-index.lab-hero-process-index.lab-hero-process-index.lab-hero-process-index.lab-hero-process-index.lab-hero-process-index,
html body .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker,
html body .quiz-option-index.quiz-option-index.quiz-option-index.quiz-option-index.quiz-option-index.quiz-option-index {
font-size: var(--nv-fs-min) !important;
font-weight: 700 !important;
font-family: var(--nv-font-body) !important;
}
/* ============================================================================
7. Eyebrow
مرجع 24px با letter-spacing 2.5px است. در stageهای اپ 18px به‌عنوان کف
انتخاب شد چون ارتفاع مرحله محدود است — در فاز ۸ با کارفرما نهایی شود.
@decision
============================================================================ */
html body .eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow,
html body .quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker {
font-family: var(--nv-font-body) !important;
font-size: var(--nv-fs-min) !important;
font-weight: 400 !important;
letter-spacing: var(--nv-ls-eyebrow) !important;
}
/* ============================================================================
8. محدودسازی Bayon
مرجع هرگز Bayon را زیر 50px به کار نمی‌برد.
============================================================================ */
html body p,
html body li,
html body label,
html body input,
html body select,
html body textarea,
html body button { font-family: var(--nv-font-body) !important; }
/* ============================================================================
10. دکمه‌ها — فاز ۲
مرجع: nannovative.com · .instruction-actions a و .get-started-link
----------------------------------------------------------------------------
انحراف عمدی از مرجع: pointer-events:none روی ::before اضافه شده تا
شبه‌عنصرِ درخشش هرگز کلیک را نگیرد. مرجع این را ندارد؛ اثر بصری صفر است.
============================================================================ */
html body .nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button,
html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button,
html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button,
html body .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action {
position: relative !important;
overflow: hidden !important;
border-radius: var(--nv-radius) !important;
transition: var(--nv-dur-fast) var(--nv-ease) !important;
text-decoration: none !important;
cursor: pointer;
}
/* نوار نور عبوری — امضای بصری دکمه‌های مرجع */
html body .nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button::before,
html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button::before,
html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button::before,
html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button::before,
html body .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: var(--nv-grad-shine) !important;
transition: left var(--nv-dur-shine) !important;
pointer-events: none !important;
}
html body .nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button:hover::before,
html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button:hover::before,
html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button:hover::before,
html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button:hover::before,
html body .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action:hover::before { left: 100% !important; }
/* واریانت اصلی */
html body .nv-flow-button-primary.nv-flow-button-primary.nv-flow-button-primary.nv-flow-button-primary.nv-flow-button-primary.nv-flow-button-primary,
html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
html body .lab-hero-action-primary.lab-hero-action-primary.lab-hero-action-primary.lab-hero-action-primary.lab-hero-action-primary.lab-hero-action-primary,
html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button:not(.video-entry-button-secondary) {
color: #000 !important;
background: var(--nv-grad-btn) !important;
border: 2px solid var(--nv-accent) !important;
box-shadow: var(--nv-sh-btn) !important;
backdrop-filter: none !important;
}
html body .nv-flow-button-primary.nv-flow-button-primary.nv-flow-button-primary.nv-flow-button-primary.nv-flow-button-primary.nv-flow-button-primary:hover,
html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button:hover,
html body .lab-hero-action-primary.lab-hero-action-primary.lab-hero-action-primary.lab-hero-action-primary.lab-hero-action-primary.lab-hero-action-primary:hover,
html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button:not(.video-entry-button-secondary):hover {
background: var(--nv-grad-btn-hover) !important;
color: var(--nv-text) !important;
box-shadow: var(--nv-sh-btn-hover) !important;
}
/* واریانت ثانویه */
html body .nv-flow-button-secondary.nv-flow-button-secondary.nv-flow-button-secondary.nv-flow-button-secondary.nv-flow-button-secondary.nv-flow-button-secondary,
html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button,
html body .lab-hero-action-secondary.lab-hero-action-secondary.lab-hero-action-secondary.lab-hero-action-secondary.lab-hero-action-secondary.lab-hero-action-secondary,
html body .video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary {
color: var(--nv-text) !important;
background: rgba(255, 255, 255, .1) !important;
backdrop-filter: blur(10px) !important;
border: 2px solid var(--nv-text) !important;
box-shadow: var(--nv-sh-btn-ghost) !important;
}
html body .nv-flow-button-secondary.nv-flow-button-secondary.nv-flow-button-secondary.nv-flow-button-secondary.nv-flow-button-secondary.nv-flow-button-secondary:hover,
html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button:hover,
html body .lab-hero-action-secondary.lab-hero-action-secondary.lab-hero-action-secondary.lab-hero-action-secondary.lab-hero-action-secondary.lab-hero-action-secondary:hover,
html body .video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary:hover {
background: var(--nv-text) !important;
color: #000 !important;
box-shadow: var(--nv-sh-btn-ghost-h) !important;
}
/* padding مرجع — بزرگ 12px 24px · کوچک 8px 16px */
html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button, html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button, html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button { padding: 12px 24px !important; }
html body .quiz-nav-button.quiz-nav-button.quiz-nav-button.quiz-nav-button.quiz-nav-button.quiz-nav-button, html body .back-button.back-button.back-button.back-button.back-button.back-button, html body .text-button.text-button.text-button.text-button.text-button.text-button, html body .nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button, html body .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action { padding: 8px 16px !important; }
/* قانون مرجع: هیچ دکمه‌ای روی hover جابه‌جا یا بزرگ نمی‌شود.
تنها استثنای مرجع دکمه‌ی کوچک ناوبری است که در این پروژه معادلی ندارد. */
html body .nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button:hover,
html body .nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button:focus,
html body .nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button:focus-visible,
html body .nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button:active,
html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button:hover,
html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button:focus,
html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button:focus-visible,
html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button:active,
html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button:hover,
html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button:focus,
html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button:focus-visible,
html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button:active,
html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button:hover,
html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button:focus,
html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button:focus-visible,
html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button:active,
html body .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action:hover,
html body .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action:focus,
html body .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action:focus-visible,
html body .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action:active { transform: none !important; }
/* ============================================================================
11. کارت‌ها و پنل‌ها — فاز ۳
مرجع: .why-nanovative-item (کارت شیشه‌ای) و .lets-talk-border (پنل گرادیانتی)
----------------------------------------------------------------------------
دو انحراف عمدی از مرجع، هر دو بدون اثر بصری:
۱. مرجع کارت را دو لایه می‌سازد (wrapper سایه می‌گیرد، بدنه گرادیانت).
اینجا هر دو روی یک عنصر اعمال شده تا نیازی به تغییر ساختار HTML
و جاوااسکریپت نباشد. نتیجه‌ی بصری یکسان است.
۲. مرجع حاشیه‌ی گرادیانتی را با wrapper و padding می‌سازد. اینجا از
padding-box/border-box استفاده شده — همان تکنیکی که پروژه از قبل
در چند جا به کار برده. تک‌عنصری و بدون تغییر HTML.
padding کارت‌ها عمداً دست‌نخورده مانده: مرجع 24px می‌گذارد ولی سطوح
این اپ محدودیت ارتفاع دارند. در فاز ۶ بازبینی شود. @decision
============================================================================ */
html body .quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled),
html body .generation-item.generation-item.generation-item.generation-item.generation-item.generation-item.generation-item.generation-item:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled),
html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled),
html body .info-panel.info-panel.info-panel.info-panel.info-panel.info-panel.info-panel.info-panel:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled),
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled),
html body .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled) {
position: relative !important;
overflow: hidden !important;
border-radius: var(--nv-radius) !important;
border: 1px solid var(--nv-border-glass) !important;
background: var(--nv-surface-glass) !important;
backdrop-filter: blur(5px) !important;
transition: var(--nv-dur-card) !important;
}
/* نوار نور — همان امضای دکمه‌ها */
html body .quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled)::before,
html body .generation-item.generation-item.generation-item.generation-item.generation-item.generation-item.generation-item.generation-item:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled)::before,
html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled)::before,
html body .info-panel.info-panel.info-panel.info-panel.info-panel.info-panel.info-panel.info-panel:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled)::before,
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled)::before,
html body .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled)::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: var(--nv-grad-shine) !important;
transition: left var(--nv-dur-shine) !important;
pointer-events: none !important;
}
html body .quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled):hover::before,
html body .generation-item.generation-item.generation-item.generation-item.generation-item.generation-item.generation-item.generation-item:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled):hover::before,
html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled):hover::before,
html body .info-panel.info-panel.info-panel.info-panel.info-panel.info-panel.info-panel.info-panel:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled):hover::before,
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled):hover::before,
html body .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled):hover::before { left: 100% !important; }
html body .quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled):hover,
html body .generation-item.generation-item.generation-item.generation-item.generation-item.generation-item.generation-item.generation-item:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled):hover,
html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled):hover,
html body .info-panel.info-panel.info-panel.info-panel.info-panel.info-panel.info-panel.info-panel:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled):hover,
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled):hover,
html body .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card:not(.is-selected):not(.is-pending):not([aria-pressed="true"]):not(:disabled):hover {
background: var(--nv-grad-card-hover) !important;
backdrop-filter: blur(20px) !important;
box-shadow: var(--nv-sh-card-hover) !important;
transform: none !important;
}
/* ---------------------------------------------------------------------------
پنل با حاشیه‌ی گرادیانتی — واریانت خنثی
--------------------------------------------------------------------------- */
html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel,
html body .quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel,
html body .feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell,
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel,
html body .lab-hero-visual-panel.lab-hero-visual-panel.lab-hero-visual-panel.lab-hero-visual-panel.lab-hero-visual-panel.lab-hero-visual-panel.lab-hero-visual-panel.lab-hero-visual-panel {
border: 3px solid transparent !important;
border-radius: var(--nv-radius) !important;
background:
linear-gradient(var(--nv-bg), var(--nv-bg)) padding-box,
var(--nv-grad-border) border-box !important;
box-shadow: var(--nv-sh-panel) !important;
}
/* ---------------------------------------------------------------------------
واریانت تأکیدی (نبض‌دار) — کلاس کمکی، هنوز به هیچ عنصری اعمال نشده.
معادل «Exciting News» در سایت مرجع. برای سطح جشن/نتیجه‌ی نهایی
کافی است کلاس nv-panel-accent به آن عنصر اضافه شود.
--------------------------------------------------------------------------- */
html body .nv-panel-accent {
border: 4px solid transparent !important;
border-radius: var(--nv-radius) !important;
background:
linear-gradient(var(--nv-panel), var(--nv-panel)) padding-box,
var(--nv-grad-border-acc) border-box !important;
box-shadow: var(--nv-sh-glow) !important;
backdrop-filter: blur(20px) !important;
animation: nvBorderGlow 3s ease-in-out infinite !important;
}
@keyframes nvBorderGlow {
0%, 100% { box-shadow: 0 12px 48px rgba(10, 186, 181, .3); }
50% { box-shadow: 0 12px 48px rgba(10, 186, 181, .6); }
}
/* ============================================================================
12. پس‌زمینه، اورلی و نوار جداکننده — فاز ۴
============================================================================ */
/* ویدیوی پس‌زمینه
مرجع فقط brightness(.8) دارد: بدون کاهش اشباع، بدون opacity.
پروژه saturate(.76) contrast(1.05) brightness(.78) و opacity .78 داشت که
تصویر را کدرتر و بی‌رنگ‌تر از مرجع می‌کرد. */
html body #videoLayer #bgVideo {
opacity: 1 !important;
filter: brightness(.8) !important;
object-fit: cover !important;
}
/* اورلی — سیستم دولایه‌ی مرجع روی یک عنصر
لایه‌ی اول و دوم = header-overlay مرجع (وینیت بالا و پایین)
لایه‌ی سوم = video-overlay مرجع (محو شدن به پس‌زمینه)
پروژه از rgba(5,5,5,..) و یک ته‌رنگ آبی rgba(10,88,112,.2) استفاده می‌کرد؛
همان چیزی که کل صفحه را نسبت به مرجع آبی‌تر نشان می‌داد. */
html body #videoLayer #videoOverlay,
html body #videoLayer .video-overlay.video-overlay {
background:
linear-gradient(#101010 0%, rgba(25, 25, 25, .4) 20%, transparent 100%),
linear-gradient(to top, #101010 0%, rgba(25, 25, 25, .4) 20%, transparent 100%),
linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(16, 16, 16, .9) 90%, #101010 100%) !important;
}
/* نوار جداکننده‌ی زیر تیتر مرحله
مرجع دو عنصر تودرتو دارد: نوار سفید بیرونی و نوار teal داخلی.
اینجا هر دو به‌صورت دو لایه‌ی background روی یک ::after پیاده شده‌اند —
لایه‌ی teal روی لایه‌ی سفید. نتیجه یکسان، بدون تغییر HTML.
پروژه قبلاً یک نوار ساده‌ی 2 تا 3 پیکسلی داشت؛ مرجع 7 پیکسل است
با border-radius: 15px (تنها عنصر گرد سایت مرجع). */
html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after,
html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after,
html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after,
html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after,
html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after,
html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after,
html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after,
html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after,
html body #dialogTitle#dialogTitle::after,
html body #generatingTitle#generatingTitle::after,
html body #resultsTitle#resultsTitle::after,
html body #adviceStageTitle#adviceStageTitle::after,
html body #sendDetailsTitle#sendDetailsTitle::after,
html body #achievementStageTitle#achievementStageTitle::after,
html body #achievementTitle#achievementTitle::after {
content: "" !important;
display: block !important;
width: 100% !important;
height: 7px !important;
margin-top: 20px !important;
border-radius: var(--nv-radius-bar) !important;
background:
linear-gradient(270deg, rgba(10, 186, 181, 0) 0%, #0ABAB5 100%),
linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .07) 92.79%, rgba(255, 255, 255, 0) 100%) !important;
box-shadow: var(--nv-sh-separator) !important;
}
@media (max-width: 991px) { html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #dialogTitle#dialogTitle::after, html body #generatingTitle#generatingTitle::after, html body #resultsTitle#resultsTitle::after, html body #adviceStageTitle#adviceStageTitle::after, html body #sendDetailsTitle#sendDetailsTitle::after, html body #achievementStageTitle#achievementStageTitle::after, html body #achievementTitle#achievementTitle::after { height: 5px !important; } }
@media (max-width: 767px) { html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #dialogTitle#dialogTitle::after, html body #generatingTitle#generatingTitle::after, html body #resultsTitle#resultsTitle::after, html body #adviceStageTitle#adviceStageTitle::after, html body #sendDetailsTitle#sendDetailsTitle::after, html body #achievementStageTitle#achievementStageTitle::after, html body #achievementTitle#achievementTitle::after { height: 4px !important; } }
/* ============================================================================
13. موشن — فاز ۵
============================================================================ */
/* یکسان‌سازی منحنی ورود.
پروژه سه فاصله‌ی متفاوت داشت: nvFadeInUp با 20px، screenIn با .8cqw و
quizFadeIn با 8px. مرجع 30px است. با بازتعریف همین keyframeها در آخر
cascade، همه‌ی انیمیشن‌های موجود بدون تغییر سلکتور یکسان می‌شوند.
nannoUnifyFadeInUp از قبل 30px بود و دست‌نخورده مانده. */
@keyframes nvFadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes screenIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes quizFadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* تأخیرهای پلکانی ورود — همان مقادیر سایت مرجع */
html body .nv-delay-1 { animation-delay: .1s !important; }
html body .nv-delay-2 { animation-delay: .2s !important; }
html body .nv-delay-3 { animation-delay: .4s !important; }
html body .nv-delay-4 { animation-delay: .6s !important; }
html body .nv-delay-5 { animation-delay: .7s !important; }
html body .nv-delay-6 { animation-delay: 1s !important; }
/* ---------------------------------------------------------------------------
جاروی نهایی transform
مرجع صریحاً می‌نویسد:
.service-item:hover, .swiper-slide:hover, .why-nanovative-item-border:hover
{ transform: none !important }
یعنی هیچ سطحی روی تعامل جابه‌جا یا بزرگ نمی‌شود. دکمه‌ها در فاز ۲ و
کارت‌ها در فاز ۳ پاک شدند؛ این‌ها باقی‌مانده‌ها هستند.
عمداً دست‌نخورده: .lab-hero-phone-hotspot که transform آن
translate(-50%, -50%) برای وسط‌چین کردن است، نه افکت تعاملی.
حذفش چیدمان را می‌شکند. @decision
--------------------------------------------------------------------------- */
html body .gallery-item.gallery-item.gallery-item.gallery-item.gallery-item.gallery-item.gallery-item.gallery-item:hover img,
html body .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card:hover img,
html body .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card:focus-within,
html body .quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option:focus-visible,
html body .quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option:active,
html body .portrait-discovery-card.portrait-discovery-card.portrait-discovery-card.portrait-discovery-card.portrait-discovery-card.portrait-discovery-card.portrait-discovery-card.portrait-discovery-card:focus-within,
html body .portrait-discovery-card.portrait-discovery-card.portrait-discovery-card.portrait-discovery-card.portrait-discovery-card.portrait-discovery-card.portrait-discovery-card.portrait-discovery-card:hover,
html body #retakePhoto#retakePhoto:hover,
html body #retakePhoto#retakePhoto:active,
html body #retakePhoto#retakePhoto:focus-visible { transform: none !important; }
/* ---------------------------------------------------------------------------
حلقه‌ی فوکوس صفحه‌کلید
انحراف عمدی از مرجع: سایت مرجع هیچ استایل focus-visible ندارد. حذف
transform از حالت فوکوس، تنها بازخورد صفحه‌کلید را از بین می‌برد، و
پروژه ۱۲ اعلان outline: none دارد. این حلقه جایگزین بهتری است.
@decision
--------------------------------------------------------------------------- */
html body :is(a, button, input, select, textarea, [tabindex]):focus-visible:focus-visible:focus-visible:focus-visible {
outline: 2px solid var(--nv-accent) !important;
outline-offset: 3px !important;
}
html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title:focus,
html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title:focus-visible,
html body .quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title:focus,
html body .quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title:focus-visible { outline: none !important; box-shadow: none !important; }
/* ============================================================================
14. فاز ۵٫۵ — رفع ایرادات صفحات ADVICE / DELIVERY / ACHIEVED
============================================================================ */
/* ---------------------------------------------------------------------------
14.1 قطع‌شدن متن وسط جمله
ریشه: -webkit-line-clamp و ارتفاع ثابت با overflow:hidden در
experience-layout-v3/v4 و experience-polish-v1. محتوای واقعی بلندتر از
ظرف است و جمله بدون نقطه بریده می‌شود.
--------------------------------------------------------------------------- */
html body .advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer,
html body .advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps,
html body .quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary,
html body .quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer,
html body .portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption,
html body .generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card,
html body .quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact,
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle,
html body .profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary,
html body .achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message,
html body .achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description,
html body .achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy,
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid,
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap,
html body .generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message,
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption,
html body .advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer p,
html body .advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer li,
html body .advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer ol,
html body .advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer strong,
html body .advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer small,
html body .advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer dd,
html body .advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer dt,
html body .advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps p,
html body .advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps li,
html body .advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps ol,
html body .advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps strong,
html body .advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps small,
html body .advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps dd,
html body .advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps dt,
html body .quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary p,
html body .quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary li,
html body .quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary ol,
html body .quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary strong,
html body .quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary small,
html body .quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary dd,
html body .quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary.quiz-relative-summary dt,
html body .quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer p,
html body .quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer li,
html body .quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer ol,
html body .quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer strong,
html body .quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer small,
html body .quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer dd,
html body .quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer dt,
html body .portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption p,
html body .portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption li,
html body .portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption ol,
html body .portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption strong,
html body .portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption small,
html body .portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption dd,
html body .portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption dt,
html body .generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card p,
html body .generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card li,
html body .generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card ol,
html body .generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card strong,
html body .generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card small,
html body .generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card dd,
html body .generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card.generation-fact-card dt,
html body .quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact p,
html body .quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact li,
html body .quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact ol,
html body .quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact strong,
html body .quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact small,
html body .quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact dd,
html body .quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact.quiz-idle-fact dt,
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle p,
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle li,
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle ol,
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle strong,
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle small,
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle dd,
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle dt,
html body .profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary p,
html body .profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary li,
html body .profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary ol,
html body .profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary strong,
html body .profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary small,
html body .profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary dd,
html body .profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary.profile-report-primary dt,
html body .achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message p,
html body .achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message li,
html body .achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message ol,
html body .achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message strong,
html body .achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message small,
html body .achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message dd,
html body .achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message.achievement-success-message dt,
html body .achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description p,
html body .achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description li,
html body .achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description ol,
html body .achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description strong,
html body .achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description small,
html body .achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description dd,
html body .achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description.achievement-success-description dt,
html body .achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer p,
html body .achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer li,
html body .achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer ol,
html body .achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer strong,
html body .achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer small,
html body .achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer dd,
html body .achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer dt,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy p,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy li,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy ol,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy strong,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy small,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy dd,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy dt,
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid p,
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid li,
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid ol,
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid strong,
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid small,
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid dd,
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid dt,
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap p,
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap li,
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap ol,
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap strong,
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap small,
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap dd,
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap dt,
html body .generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message p,
html body .generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message li,
html body .generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message ol,
html body .generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message strong,
html body .generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message small,
html body .generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message dd,
html body .generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message.generation-ready-message dt,
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption p,
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption li,
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption ol,
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption strong,
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption small,
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption dd,
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption dt {
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
max-height: none !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* ---------------------------------------------------------------------------
14.2 دکمه‌های تمام‌عرض
مرجع دکمه را به اندازه‌ی محتوا می‌سازد، نه به عرض ظرف.
--------------------------------------------------------------------------- */
html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button,
html body .nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button,
html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button,
html body .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action {
width: max-content !important;
max-width: 100% !important;
align-self: center !important;
justify-self: center !important;
margin-inline: auto !important;
}
/* ---------------------------------------------------------------------------
14.3 Bayon زیر ۵۰ پیکسل ممنوع
مرجع فونت نمایشی را فقط برای تیترهای غول‌پیکر به کار می‌برد.
--------------------------------------------------------------------------- */
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content h2,
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel strong,
html body .advice-error.advice-error.advice-error.advice-error.advice-error.advice-error.advice-error.advice-error strong,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy > strong,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy > b,
html body .portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption.portrait-discovery-caption strong,
html body .quiz-signal-mix.quiz-signal-mix.quiz-signal-mix.quiz-signal-mix.quiz-signal-mix.quiz-signal-mix.quiz-signal-mix.quiz-signal-mix strong,
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption,
html body .achievement-feedback.achievement-feedback.achievement-feedback.achievement-feedback.achievement-feedback.achievement-feedback.achievement-feedback.achievement-feedback h2,
html body .feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header h2,
html body .legal-section.legal-section.legal-section.legal-section.legal-section.legal-section.legal-section.legal-section h2,
html body .section-number.section-number.section-number.section-number.section-number.section-number.section-number.section-number,
html body .quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title,
html body .send-details-header.send-details-header.send-details-header.send-details-header.send-details-header.send-details-header.send-details-header.send-details-header h2 {
font-family: var(--nv-font-body) !important;
font-weight: 700 !important;
letter-spacing: normal !important;
text-transform: none !important;
}
/* برچسب‌های مرحله‌ی تحویل.
ساختار واقعی:
Selected portrait ← eyebrow
عنوان پرتره ← تیتر کارت، نه برچسب
Reflection…
Next steps…
قاعده‌ی قبلی «> b» با هیچ‌کدام مطابقت نداشت و «> strong» تیتر را
به یک برچسب ریز teal تبدیل می‌کرد. */
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy p > b,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy section > b {
display: block !important;
margin-bottom: 6px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--nv-accent) !important;
}
/* ---------------------------------------------------------------------------
14.4 کنتراست متن‌های حقوقی
--------------------------------------------------------------------------- */
html body .advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer,
html body .quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer.quiz-report-disclaimer,
html body .achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer,
html body .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note,
html body .quiz-privacy-note.quiz-privacy-note.quiz-privacy-note.quiz-privacy-note.quiz-privacy-note.quiz-privacy-note.quiz-privacy-note.quiz-privacy-note,
html body .privacy-note.privacy-note.privacy-note.privacy-note.privacy-note.privacy-note.privacy-note.privacy-note,
html body .now-note.now-note.now-note.now-note.now-note.now-note.now-note.now-note,
html body .terms-copy.terms-copy.terms-copy.terms-copy.terms-copy.terms-copy.terms-copy.terms-copy {
color: rgba(255, 255, 255, .62) !important;
}
/* ---------------------------------------------------------------------------
14.5 کاهش تودرتویی
حاشیه‌ی جعبه‌های سطح دوم حذف می‌شود؛ جداکننده‌ی نازک جایش را می‌گیرد.
--------------------------------------------------------------------------- */
html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details,
html body .advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy > *:not(:last-child) {
border: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
border-radius: 0 !important;
}
/* ---------------------------------------------------------------------------
14.6 ردیف چک‌باکس نباید شکل input داشته باشد
--------------------------------------------------------------------------- */
html body .terms-row.terms-row.terms-row.terms-row.terms-row.terms-row {
border: 0 !important;
background: transparent !important;
padding-inline: 0 !important;
align-items: flex-start !important;
gap: 12px !important;
}
/* ---------------------------------------------------------------------------
14.7 همپوشانی صفحه‌ی ACHIEVED
بلوک تاریخ و شناسه absolute بود و با باز شدن پنل اشتراک روی متن می‌افتاد.
--------------------------------------------------------------------------- */
html body .achievement-stub-meta.achievement-stub-meta.achievement-stub-meta.achievement-stub-meta {
position: static !important;
inset: auto !important;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
gap: 8px 24px !important;
margin-top: 18px !important;
}
html body .achievement-share-section.achievement-share-section.achievement-share-section {
position: static !important;
inset: auto !important;
margin-top: 18px !important;
}
html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > * {
min-width: 0 !important;
}
/* ---------------------------------------------------------------------------
14.8 سه ستون ADVICE هم‌ارتفاع ولی با محتوای نابرابر
ستون‌ها از بالا تراز می‌شوند و ارتفاعشان تابع محتوا می‌شود.
--------------------------------------------------------------------------- */
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid {
align-items: start !important;
}
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid > * {
height: auto !important;
min-height: 0 !important;
}
/* ---------------------------------------------------------------------------
14.9 آیکون‌های جایگزین ایموجی
nv-icons.js ایموجی ابتدای متن را برمی‌دارد و این آیکون را جایش می‌گذارد.
--------------------------------------------------------------------------- */
.nv-icon {
width: 1.05em;
height: 1.05em;
flex: 0 0 auto;
display: inline-block;
vertical-align: -.16em;
margin-inline-end: .5em;
fill: none;
stroke: var(--nv-accent);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.nv-icon-dot { fill: var(--nv-accent); stroke: none; }
/* ---------------------------------------------------------------------------
14.10 نوار تأیید فیدبک
--------------------------------------------------------------------------- */
html body .nv-toast {
position: fixed;
inset-block-end: 24px;
inset-inline-end: 24px;
z-index: 9999;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: rgba(18, 18, 18, .95);
border: 1px solid var(--nv-accent);
border-radius: 0;
box-shadow: var(--nv-sh-card-hover);
backdrop-filter: blur(20px);
font-family: var(--nv-font-body);
font-size: 16px;
color: var(--nv-text);
opacity: 0;
transform: translateY(12px);
transition: opacity .3s var(--nv-ease), transform .3s var(--nv-ease);
}
html body .nv-toast.is-on { opacity: 1; transform: translateY(0); }
/* ============================================================================
15. فاز ۶ — ریسپانسیو
----------------------------------------------------------------------------
دامنه‌ی این فاز عمداً محدود شد. توضیح:
پروژه ۲۶ بریک‌پوینت متفاوت دارد (360 تا 1439). سایت مرجع ۷ تا:
1439 / 1319 / 1199 / 991 / 767 / 575 / 359.
ولی بیشتر آن ۲۶ تا **چیدمان** را کنترل می‌کنند نه تایپوگرافی: تعداد ستون‌ها،
نسبت کادر دوربین، فاصله‌ها. سایت مرجع یک صفحه‌ی بازاریابی است و اصلاً
معادلی برای فلوی دوربین و کوییز ندارد، پس تحمیل بریک‌پوینت‌های آن روی
قواعد چیدمانی، فلو را می‌شکند بدون اینکه چیزی به یکسانی دیزاین اضافه کند.
کاری که این فاز می‌کند:
۱. نقش‌های متنی باقی‌مانده را روی همان ۷ گام ثابت مرجع می‌آورد.
۲. ظرف‌ها را طوری تنظیم می‌کند که با بزرگ‌شدن متن در فاز ۱ سرریز نکنند.
کاری که نمی‌کند: دست‌زدن به بریک‌پوینت‌های چیدمانی. @decision
============================================================================ */
/* --- نقش H2: تیتر کوییز --- */
html body .quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title {
font-family: var(--nv-font-body) !important;
font-size: var(--nv-fs-h2) !important;
font-weight: 700 !important;
line-height: var(--nv-lh-h2) !important;
text-shadow: var(--nv-ts-h2);
}
@media (max-width: 1439px) { html body .quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title { font-size: 56px !important; } }
@media (max-width: 1319px) { html body .quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title { font-size: 52px !important; } }
@media (max-width: 1199px) { html body .quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title { font-size: 48px !important; } }
@media (max-width: 991px) { html body .quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title { font-size: 44px !important; } }
@media (max-width: 767px) { html body .quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title { font-size: 40px !important; } }
/* --- نقش H3: عنوان نتیجه --- */
html body .advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title {
font-family: var(--nv-font-body) !important;
font-size: var(--nv-fs-h3) !important;
font-weight: 700 !important;
line-height: var(--nv-lh-h3) !important;
text-shadow: var(--nv-ts-h3);
}
@media (max-width: 991px) { html body .advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title { font-size: 33px !important; } }
@media (max-width: 767px) { html body .advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title { font-size: 30px !important; } }
@media (max-width: 575px) { html body .advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title { font-size: 28px !important; } }
/* --- نقش متن اصلی: زیرنویس کوییز --- */
html body .quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle {
font-family: var(--nv-font-body) !important;
font-size: var(--nv-fs-body) !important;
font-weight: 400 !important;
line-height: var(--nv-lh-body) !important;
color: var(--nv-text-card) !important;
}
@media (max-width: 991px) { html body .quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle { font-size: 22px !important; } }
@media (max-width: 767px) { html body .quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle { font-size: 20px !important; } }
@media (max-width: 575px) { html body .quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle.quiz-subtitle { font-size: 18px !important; } }
/* --- شمارش معکوس دوربین: تنها جای مجاز Bayon در فلو --- */
html body .countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay {
font-family: var(--nv-font-display) !important;
font-size: var(--nv-fs-hero-sm) !important;
line-height: var(--nv-lh-hero) !important;
font-weight: 400 !important;
}
@media (max-width: 1439px) { html body .countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay { font-size: 70px !important; } }
@media (max-width: 1319px) { html body .countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay { font-size: 60px !important; } }
@media (max-width: 1199px) { html body .countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay { font-size: 50px !important; } }
@media (max-width: 575px) { html body .countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay.countdown-overlay { font-size: 44px !important; } }
/* --- برچسب‌های کوچک: کف ۱۸ پیکسل --- */
html body .quiz-status.quiz-status.quiz-status.quiz-status.quiz-status.quiz-status.quiz-status.quiz-status,
html body .quiz-complete-label.quiz-complete-label.quiz-complete-label.quiz-complete-label.quiz-complete-label.quiz-complete-label.quiz-complete-label.quiz-complete-label,
html body .selection-mark.selection-mark.selection-mark.selection-mark.selection-mark.selection-mark.selection-mark.selection-mark {
font-family: var(--nv-font-body) !important;
font-size: var(--nv-fs-min) !important;
line-height: var(--nv-lh-body) !important;
}
/* ---------------------------------------------------------------------------
ایمنی سرریز
فاز ۱ متن اصلی را از حدود ۱۴ به ۲۵ پیکسل برد. در چیدمان‌های flex و grid،
فرزند به‌طور پیش‌فرض کوچک‌تر از محتوایش نمی‌شود (min-width/height: auto) و
به‌جای شکستن، از ظرف بیرون می‌زند. این دو خط همان رفتار پیش‌فرض را
خنثی می‌کند تا متن بشکند نه اینکه سرریز کند.
--------------------------------------------------------------------------- */
html body .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header > *,
html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen > *,
html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout > *,
html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > *,
html body .results-screen.results-screen.results-screen.results-screen.results-screen.results-screen > *,
html body .quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel > *,
html body .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main > *,
html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel > * {
min-width: 0 !important;
min-height: 0 !important;
}
html body .flow-title,
html body .flow-subtitle,
html body .quiz-title,
html body .quiz-subtitle,
html body .quiz-option,
html body .result-caption {
overflow-wrap: anywhere;
hyphens: auto;
}
/* ============================================================================
16. فاز ۶٫۱ — رفع رگرسیون‌هایی که تست مرورگری نشان داد
----------------------------------------------------------------------------
تحلیل cascade ثابت می‌کند قاعده برنده می‌شود، نه اینکه نتیجه‌اش درست است.
این پنج مورد از قواعدی آمدند که verify-phase.py سبز اعلامشان کرده بود.
============================================================================ */
/* ---------------------------------------------------------------------------
16.1 زنجیره‌ی ارتفاع ثابت در صفحه‌ی ADVICE
فاز ۵٫۵ فقط line-clamp را برداشت ولی max-height و overflow:hidden ظرف‌ها
سر جایشان ماندند. نتیجه: متن به‌جای بریده‌شدن از ظرف بیرون زد و روی
دیسکلیمر افتاد — بدتر از حالت اول. اینجا کل زنجیره باز می‌شود.
--------------------------------------------------------------------------- */
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content,
html body .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main,
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid,
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid > *,
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content > * {
max-height: none !important;
height: auto !important;
overflow: visible !important;
}
/* بدون اسکرول (تصمیم ۶٫۳): برش هم ممنوع است؛ جاشدن با فشرده‌سازی ۱۷٫۱۰ */
html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout,
html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout {
overflow: visible !important;
}
/* ---------------------------------------------------------------------------
16.2 نقش «تیتر کارت»
فاز ۶ کلاس result-caption را به نقش H3 با ۳۶px نگاشت کرده بود. ولی این
یک کپشن داخل کارت حدوداً ۴۴۰ پیکسلی است؛ متن از دو طرف بیرون می‌زد.
عنوان پرتره در کارت تحویل هم که فاز ۵٫۵ به برچسب ریز تبدیلش کرده بود،
به همین نقش برمی‌گردد.
مرجع: تیتر کارت 24 / 22 / 20 / 18
--------------------------------------------------------------------------- */
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy > strong {
font-family: var(--nv-font-body) !important;
font-size: var(--nv-fs-card) !important;
font-weight: 700 !important;
line-height: var(--nv-lh-h3) !important;
letter-spacing: normal !important;
text-transform: none !important;
color: var(--nv-text) !important;
text-shadow: var(--nv-ts-h3);
overflow-wrap: anywhere;
}
@media (max-width: 991px) { html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption, html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy > strong { font-size: 22px !important; } }
@media (max-width: 767px) { html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption, html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy > strong { font-size: 20px !important; } }
@media (max-width: 575px) { html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption, html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy > strong { font-size: 18px !important; } }
/* ---------------------------------------------------------------------------
16.3 ظرف‌های CTA که دکمه را کش می‌آوردند
ریشه‌ی دکمه‌های تمام‌عرض روی خود دکمه نبود: ظرف grid والد با
justify-items: stretch آن را کش می‌آورد و width: max-content بی‌اثر می‌شد.
--------------------------------------------------------------------------- */
html body .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions,
html body .advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions,
html body .experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions {
grid-template-columns: auto !important;
justify-items: center !important;
justify-content: center !important;
}
/* ---------------------------------------------------------------------------
16.4 quiz-fact-step کارت نیست
فاز ۳ برای نوار نور به آن overflow: hidden داد و دکمه‌ی Continue
۳۶ پیکسل زیر لبه بریده شد. از گروه کارت‌ها بیرون آمد و اینجا آزاد می‌شود.
--------------------------------------------------------------------------- */
html body .quiz-fact-step.quiz-fact-step.quiz-fact-step.quiz-fact-step.quiz-fact-step.quiz-fact-step.quiz-fact-step.quiz-fact-step {
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
/* ---------------------------------------------------------------------------
16.5 پیام پایانی صفحه‌ی ACHIEVED هنوز با سه‌نقطه تمام می‌شد
--------------------------------------------------------------------------- */
html body .achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success p,
html body .achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success li,
html body .achievement-success-copy.achievement-success-copy.achievement-success-copy.achievement-success-copy.achievement-success-copy.achievement-success-copy {
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
max-height: none !important;
overflow: visible !important;
}
/* ============================================================================
17. فاز ۶٫۳ — رفع ایرادات تست کامل مرورگری
============================================================================ */
/* ---------------------------------------------------------------------------
17.1 زنجیره‌ی ارتفاع و اسکرول — ریشه‌ی پنج شکستگی
ظرف‌ها ارتفاع ثابت و overflow:hidden دارند. با مقیاس بزرگ‌تر، ردیف‌های grid
به minmax(0,1fr) صفر می‌شوند و فیلدها روی هم می‌افتند، متن وسط جمله بریده
می‌شود و دکمه‌ی ثبت بیرون از صفحه می‌ماند بدون آنکه صفحه اسکرول شود.
حالا خود stage ظرف اسکرول است و هرچه داخلش است ارتفاعش را از محتوا می‌گیرد.
--------------------------------------------------------------------------- */
/* display: block اینجا اشتباه بود — چیدمان دوستونی capture (دوربین راست،
متن چپ) از grid-template-areas خود screen می‌آید و block آن را می‌کشت.
grid می‌ماند؛ فقط ردیف‌ها آزاد می‌شوند تا محتوای بلند ردیف بعدی را
هل بدهد پایین، نه اینکه رویش بیفتد. */
/* تصمیم کارفرما ۲۰۲۶-۰۸-۲۹: هیچ صفحه‌ای در هیچ اندازه‌ای اسکرول نمی‌خورد.
overflow بسته می‌ماند و به‌جای اسکرول، بخش ۱۷٫۱۰ محتوا را در ارتفاع‌های
کم فشرده می‌کند تا جا شود. ردیف‌های آزاد grid برای جلوگیری از
روی‌هم‌افتادن محتوا سر جایشان می‌مانند. */
html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen {
overflow: hidden !important;
grid-template-rows: auto !important;
grid-auto-rows: auto !important;
align-content: start !important;
min-height: 0 !important;
}
html body .generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout,
html body .explore-centered-layout.explore-centered-layout.explore-centered-layout.explore-centered-layout.explore-centered-layout.explore-centered-layout.explore-centered-layout.explore-centered-layout,
html body .quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel,
html body .explore-main.explore-main.explore-main.explore-main.explore-main.explore-main.explore-main.explore-main,
html body .quiz-fact-step.quiz-fact-step.quiz-fact-step.quiz-fact-step.quiz-fact-step.quiz-fact-step.quiz-fact-step.quiz-fact-step,
html body .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage,
html body .result-grid.result-grid.result-grid.result-grid.result-grid.result-grid.result-grid.result-grid,
html body .delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout,
html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel,
html body .send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form,
html body .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap,
html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout,
html body .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main,
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content,
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid,
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap,
html body .advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell,
html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list,
html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout,
html body .achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success,
html body .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions,
html body .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header,
html body .experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions,
html body .advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions,
html body .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
align-self: start !important;
}
/* ظرف‌هایی که ردیف ثابتشان محتوا را روی هم می‌انداخت */
html body .send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form,
html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel,
html body .delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout,
html body .quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel,
html body .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main,
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content,
html body .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header,
html body .experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions,
html body .advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions,
html body .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
grid-template-rows: none !important;
grid-auto-rows: auto !important;
align-items: start !important;
}
/* ---------------------------------------------------------------------------
17.2 eyebrow مرحله — نقش مرجع
مرجع: 24px · letter-spacing 2.5px · 22 / 20 / 18 در عرض‌های کوچک‌تر
--------------------------------------------------------------------------- */
html body .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow,
html body .eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow,
html body .quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker {
font-family: var(--nv-font-body) !important;
font-size: var(--nv-fs-eyebrow) !important;
font-weight: 400 !important;
letter-spacing: var(--nv-ls-eyebrow) !important;
line-height: 1.3 !important;
}
@media (max-width: 1439px) { html body .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow, html body .eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow, html body .quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker { font-size: 22px !important; } }
@media (max-width: 1199px) { html body .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow, html body .eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow, html body .quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker { font-size: 20px !important; } }
@media (max-width: 767px) { html body .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow, html body .eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow, html body .quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker { font-size: 18px !important; } }
/* ---------------------------------------------------------------------------
17.3 کف ۱۸px برای متن‌های داخل span و عنصرهای ID-دار
اندازه‌های واقعی پیش از این: 17 / 14 / 11.57 / 10.12 پیکسل
--------------------------------------------------------------------------- */
html body .quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text,
html body .quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta,
html body .delivery-status.delivery-status.delivery-status.delivery-status.delivery-status.delivery-status.delivery-status.delivery-status,
html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list,
html body .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points,
html body .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note,
html body .quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text span,
html body .quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta.quiz-progress-meta span,
html body .delivery-status.delivery-status.delivery-status.delivery-status.delivery-status.delivery-status.delivery-status.delivery-status span,
html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list span,
html body .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points span,
html body .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note span,
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content p,
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content li,
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content h3,
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content h4,
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content span,
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content dd,
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content dt,
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel p,
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel li,
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel h3,
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel h4,
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel span,
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel dd,
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel dt,
html body #quizProgressText#quizProgressText#quizProgressText#quizProgressText,
html body #quizAnsweredText#quizAnsweredText#quizAnsweredText#quizAnsweredText,
html body #generationPortraitCount#generationPortraitCount#generationPortraitCount#generationPortraitCount,
html body #quizPrivacyNote#quizPrivacyNote#quizPrivacyNote#quizPrivacyNote,
html body #deliveryStatus#deliveryStatus#deliveryStatus#deliveryStatus,
html body #adviceDisclaimer#adviceDisclaimer#adviceDisclaimer#adviceDisclaimer {
font-size: var(--nv-fs-min) !important;
line-height: 1.5 !important;
}
/* نشانگر مرحله — نقش جدا، مرجع معادلی ندارد. @decision */
html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span { font-size: 16px !important; letter-spacing: .08em !important; }
@media (max-width: 991px) { html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span { font-size: 14px !important; } }
/* ---------------------------------------------------------------------------
17.4 متن بدنه‌ی کارت
نقش «تیتر کارت» ۲۴px فقط برای تیتر است، نه برای فهرست داخل کارت.
min-width صفر لازم است وگرنه لیست به عرض محتوا می‌کشد و از کارت می‌زند بیرون.
--------------------------------------------------------------------------- */
html body .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points,
html body .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points li,
html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list,
html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list li {
font-size: var(--nv-fs-min) !important;
line-height: 1.55 !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
}
/* ---------------------------------------------------------------------------
17.5 فاصله از لوگوی ثابت
.lab-hero-brand در responsive.css قدیمی position:fixed !important است.
با تیتر ۱۲۰px، در ارتفاع ویوپورت زیر ~۹۲۵px لوگو روی تیتر می‌افتاد؛
eyebrow مرحله هم در هر ارتفاعی زیر لوگو می‌رفت.
پایین لوگو: 123px در ≥768 · 111px در ≤767 · 99px در ≤639
--------------------------------------------------------------------------- */
html body .lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy {
align-self: start !important;
padding-top: 88px !important;
}
html body .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header { padding-top: 24px !important; }
@media (max-width: 767px) { html body .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header { padding-top: 20px !important; } html body .lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy { padding-top: 72px !important; } }
@media (max-width: 639px) { html body .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header { padding-top: 16px !important; } }
/* ---------------------------------------------------------------------------
17.6 خط‌تیره و شکست کلمه
مرجع هرگز کلمه را با خط تیره نمی‌شکند. overflow-wrap:anywhere هم می‌تواند
وسط هر کلمه‌ای بشکند («3 sec-onds» در مرحله‌ی capture).
--------------------------------------------------------------------------- */
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle,
html body .lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary,
html body .video-entry-subtitle.video-entry-subtitle.video-entry-subtitle.video-entry-subtitle.video-entry-subtitle.video-entry-subtitle.video-entry-subtitle.video-entry-subtitle,
html body .quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text.quiz-option-text,
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content,
html body .camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint,
html body .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note,
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content p,
html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy p,
html body .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header p {
hyphens: none !important;
-webkit-hyphens: none !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
/* دکمه‌های روی‌هم مرحله‌ی capture: هم‌لبه و هم‌عرض */
html body .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions {
justify-items: start !important;
align-items: start !important;
}
html body .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions > * { width: 100% !important; max-width: 260px !important; }
/* ---------------------------------------------------------------------------
17.7 تیتر هرو نباید خط آخرش بریده شود
--------------------------------------------------------------------------- */
html body .lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title,
html body .video-entry-title.video-entry-title.video-entry-title.video-entry-title.video-entry-title.video-entry-title.video-entry-title.video-entry-title,
html body #posterTitle.lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
html body .lab-hero-shell.lab-hero-shell.lab-hero-shell.lab-hero-shell.lab-hero-shell.lab-hero-shell,
html body .lab-hero-console.lab-hero-console.lab-hero-console.lab-hero-console.lab-hero-console.lab-hero-console {
overflow: hidden !important;
}
/* ---------------------------------------------------------------------------
17.8 نوار هدر مرحله — لوگو و نشانگر مرحله در یک نوار مات
--------------------------------------------------------------------------- */
html body .modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: none !important;
height: 76px !important;
min-height: 76px !important;
margin: 0 !important;
padding: 0 0 0 56px !important;
display: flex !important;
align-items: center !important;
background: var(--nv-bg) !important;
z-index: 6 !important;
}
html body .modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo {
position: static !important;
top: auto !important;
left: auto !important;
height: 52px !important;
width: 176px !important;
max-width: none !important;
object-fit: cover !important;
object-position: top center !important;
margin: 0 !important;
padding: 0 !important;
}
html body .experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper {
position: relative !important;
z-index: 7 !important;
background: transparent !important;
}
/* ---------------------------------------------------------------------------
17.9 هرو در ویوپورت کوتاه
در ارتفاع ~723 (مک‌بوک ۱۳ اینچ با داک و نوار تب) دکمه‌های هرو در y=713
می‌افتادند — یعنی CTA اصلی صفحه‌ی فرود بدون اسکرول دیده نمی‌شد و هیچ
نشانه‌ی اسکرولی هم نبود. در ارتفاع کم، تیتر و فاصله‌ها فشرده می‌شوند تا
CTA همیشه داخل کادر بماند. فقط در عرض‌های بزرگ اعمال می‌شود تا با
پله‌های max-width تداخل نکند.
--------------------------------------------------------------------------- */
@media (min-width: 1440px) and (max-height: 840px) {
html body .video-entry-title.video-entry-title,
html body .lab-hero-title.lab-hero-title { font-size: 96px !important; line-height: 90px !important; }
}
@media (max-height: 840px) {
html body .lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy { padding-top: 84px !important; row-gap: 14px !important; }
/* دو دکمه‌ی هرو در ارتفاع کم کنار هم می‌نشینند تا ~۶۵px آزاد شود و
CTA بدون چسبیدن تیتر به لوگو داخل کادر بماند */
html body .lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions {
grid-auto-flow: column !important;
justify-content: start !important;
align-items: center !important;
column-gap: 16px !important;
}
}
@media (max-width: 767px) {
html body .modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header { height: 64px !important; min-height: 64px !important; padding-left: 24px !important; }
html body .modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo { height: 40px !important; width: 136px !important; }
}
/* ============================================================================
17.10 نردبان ارتفاع — بدون اسکرول، بدون برش
============================================================================ */
@media (max-height: 1100px) {
html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title { font-size: 36px !important; line-height: 1.05 !important; }
html body .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow, html body .eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow, html body .quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker { font-size: 18px !important; }
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle, html body .lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary { font-size: 17px !important; line-height: 1.35 !important; margin: 0 0 4px !important; }
html body .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header { padding-top: 8px !important; row-gap: 6px !important; }
html body .modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header { height: 64px !important; min-height: 64px !important; }
html body .modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo { height: 40px !important; width: 136px !important; }
/* عرض قاب دوربین در لایه‌های v3/v4 با calc-های قدیمی قفل شده بود و قاب
کوچک و گم وسط ستون می‌ماند. با نسبت 3/4، عرض 42dvh یعنی ارتفاع ~56dvh. */
html body .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame, html body .camera-stage.camera-stage.camera-stage.camera-stage.camera-stage.camera-stage.camera-stage.camera-stage { width: min(30vw, 42dvh, 420px) !important; height: auto !important; max-height: none !important; justify-self: center !important; align-self: center !important; }
html body .camera-status.camera-status.camera-status.camera-status.camera-status.camera-status.camera-status.camera-status { justify-self: center !important; }
html body .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper { max-height: 24dvh !important; }
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content p, html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content li, html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content h3, html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content h4, html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content span, html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content dd, html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content dt, html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel p, html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel li, html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel h3, html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel h4, html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel span, html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel dd, html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel dt, html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list p, html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list li, html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list h3, html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list h4, html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list span, html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list dd, html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list dt, html body .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points, html body .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points li { font-size: 16px !important; line-height: 1.45 !important; }
html body .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points li { font-size: 14px !important; line-height: 1.4 !important; }
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption { font-size: 20px !important; }
html body .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage { row-gap: 6px !important; padding-top: 0 !important; grid-template-rows: none !important; grid-auto-rows: auto !important; }
html body .result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header { row-gap: 4px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; }
html body .result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header > * { margin-top: 0 !important; margin-bottom: 4px !important; }
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption { padding: 10px 14px !important; }
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption ul { margin: 6px 0 0 !important; row-gap: 4px !important; }
html body .portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status { margin: 2px 0 0 !important; }
html body .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions { margin-top: 2px !important; }
html body .result-grid.result-grid.result-grid.result-grid.result-grid.result-grid.result-grid.result-grid { row-gap: 8px !important; margin-bottom: 0 !important; }
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption strong { line-height: 1.15 !important; margin-bottom: 2px !important; }
html body .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points li { line-height: 1.35 !important; }
html body .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper { max-height: 22dvh !important; }
html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button { font-size: 18px !important; padding: 8px 18px !important; line-height: 1.2 !important; min-height: 0 !important; }
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid, html body .advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps, html body .advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell.advice-recap-shell, html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel, html body .quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel.quiz-panel { padding: 12px !important; }
html body .quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title.quiz-title { font-size: 30px !important; line-height: 1.1 !important; }
html body .quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option.quiz-option { padding: 8px 14px !important; min-height: 40px !important; }
html body .generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout,
html body .explore-centered-layout.explore-centered-layout.explore-centered-layout.explore-centered-layout.explore-centered-layout.explore-centered-layout.explore-centered-layout.explore-centered-layout { padding-bottom: 76px !important; }
}
/* متن فهرست کارت‌ها هرگز نباید وسط سطر بریده شود؛ کلمپ کهنه‌ی لایه‌های
قدیمی هم فقط در ≤760 برمی‌گردد */
html body .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points li,
html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share p,
html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share blockquote {
-webkit-line-clamp: unset !important;
display: block !important;
overflow: visible !important;
text-overflow: clip !important;
}
html body .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points li,
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
@media (max-height: 760px) {
html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title { font-size: 32px !important; }
html body .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow, html body .eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow.eyebrow, html body .quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker.quiz-kicker { font-size: 16px !important; letter-spacing: 1.5px !important; }
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle, html body .lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary { font-size: 18px !important; margin-bottom: 6px !important; }
html body .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame, html body .camera-stage.camera-stage.camera-stage.camera-stage.camera-stage.camera-stage.camera-stage.camera-stage { width: min(28vw, 34dvh, 360px) !important; }
html body .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper { max-height: 24dvh !important; }
html body .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header { padding-top: 6px !important; row-gap: 4px !important; }
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption { font-size: 18px !important; }
html body .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points li { font-size: 14px !important; line-height: 1.4 !important; }
html body .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage { row-gap: 10px !important; }
}
@media (max-height: 1100px) {
html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title::after, html body #dialogTitle#dialogTitle::after, html body #generatingTitle#generatingTitle::after, html body #resultsTitle#resultsTitle::after, html body #adviceStageTitle#adviceStageTitle::after, html body #sendDetailsTitle#sendDetailsTitle::after, html body #achievementStageTitle#achievementStageTitle::after, html body #achievementTitle#achievementTitle::after { height: 4px !important; margin: 8px 0 0 !important; }
/* ADVICE: پنل «WHAT YOU TOLD US» فشرده، و CTA به جریان عادی برمی‌گردد.
دکمه قبلا پایین-چسبان بود و وقتی recap بلند می‌شد رویش می‌افتاد. */
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap { padding: 8px 14px !important; }
html body .advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title.advice-recap-title { font-size: 18px !important; letter-spacing: 3px !important; margin: 0 0 8px !important; }
html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list dt { font-size: 12px !important; line-height: 1.3 !important; margin-bottom: 2px !important; }
html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list dd { font-size: 13px !important; line-height: 1.35 !important; margin: 0 !important; }
html body .advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list.advice-recap-list { gap: 8px 16px !important; }
html body .experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions,
html body .advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions {
position: static !important;
inset: auto !important;
transform: none !important;
margin: 0 !important;
justify-self: center !important;
padding: 0 !important;
}
html body .experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions .primary-button,
html body .experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions .secondary-button {
font-size: 16px !important;
padding: 7px 16px !important;
min-height: 0 !important;
line-height: 1.2 !important;
}
html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout { row-gap: 10px !important; grid-template-rows: auto auto !important; height: auto !important; }
/* صفحه‌ی ADVICE ستون flex می‌شود تا CTA واقعا بعد از recap بیاید؛
در grid قدیمی ردیف layout کوچک‌تر از محتوایش حل می‌شد و دکمه روی
recap می‌افتاد */
html body .advice-screen.advice-screen.advice-screen.advice-screen.advice-screen.advice-screen.advice-screen.advice-screen {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
html body .advice-screen.advice-screen.advice-screen.advice-screen.advice-screen.advice-screen.advice-screen.advice-screen > .experience-stage-actions { align-self: center !important; }
/* wrapper شفاف advice-stage-main ارتفاع ردیف را کوچک‌تر از محتوا حل می‌کرد
و recap روی دیسکلیمر می‌افتاد؛ display:contents آن را از معادله حذف می‌کند */
/* گرید قدیمی layout با height:100% روی main یک وابستگی دایره‌ای می‌سازد:
ردیف به اندازه‌ی ستون کوچک‌تر حل می‌شود و main از ردیف بیرون می‌زند و
recap روی دیسکلیمر می‌افتد. flex این دور را کامل می‌شکند. */
html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 10px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
flex: 0 0 auto !important;
}
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel { flex: 0 1 340px !important; }
html body .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main { display: block !important; flex: 1 1 480px !important; height: auto !important; max-height: none !important; }
html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap { flex: 1 1 100% !important; }
/* تیتر و lede در سرصفحه‌ی قدیمی یک ناحیه‌ی مشترک دارند و روی هم
می‌نشینند؛ lede با margin زیر تیتر می‌رود و بودجه‌ی ارتفاع با
فشرده‌ترشدن reflection جبران می‌شود */
html body .advice-stage-header.advice-stage-header .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle { margin-top: 84px !important; }
html body .advice-stage-header.advice-stage-header .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title,
html body .advice-stage-header.advice-stage-header #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title { margin-top: 20px !important; }
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content header p { margin-bottom: 4px !important; }
/* ACHIEVED: بعد از ثبت فیدبک، پنل اشتراک زیر کارت باز می‌شود و ستون چپ
از کادر می‌زند بیرون؛ ستون چپ دوستونه می‌شود تا در ارتفاع جا بگیرد */
html body .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap { row-gap: 8px !important; }
html body .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap img { max-height: 24dvh !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; }
html body .achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub { margin-top: 4px !important; }
html body .achievement-stage-header.achievement-stage-header .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle { margin-top: 4px !important; margin-bottom: 0 !important; }
html body .achievement-screen.achievement-screen.achievement-screen.achievement-screen.achievement-screen.achievement-screen .experience-stage-actions .primary-button,
html body .achievement-screen.achievement-screen.achievement-screen.achievement-screen.achievement-screen.achievement-screen .experience-stage-actions .secondary-button { font-size: 15px !important; padding: 6px 14px !important; min-height: 0 !important; }
html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details { row-gap: 8px !important; }
/* صفحه‌ی ACHIEVED هم مثل ADVICE ستون flex می‌شود؛ ردیف ثابت grid قدیمی
دکمه‌ی Start a New Experience را ۱۰۷px پایین‌تر از انتهای محتوا می‌نشاند */
html body .flow-screen.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
row-gap: 0 !important;
}
html body .flow-screen.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success > .experience-stage-actions { align-self: center !important; margin-top: 8px !important; }
html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share { padding: 10px 12px !important; margin-top: 8px !important; }
html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share p,
html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share blockquote {
font-size: 13px !important; line-height: 1.35 !important; margin: 0 0 6px !important;
}
html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share > div { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share .secondary-button,
html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share .primary-button,
html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share button { font-size: 14px !important; padding: 6px 12px !important; min-height: 0 !important; line-height: 1.2 !important; }
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content { padding: 10px 16px !important; }
html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content header { margin-bottom: 8px !important; }
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid { gap: 10px !important; }
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid section { padding: 8px 12px !important; }
html body .advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer.advice-disclaimer { font-size: 12px !important; line-height: 1.4 !important; margin: 4px 0 0 !important; }
/* جداکننده‌ی تیتر روی lede نیفتد */
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle { margin-top: 14px !important; }
}
@media (max-height: 760px) {
html body .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points li {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
}
html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #dialogTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #generatingTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #resultsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #adviceStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #sendDetailsTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementStageTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title, html body #achievementTitle.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title { font-size: 32px !important; }
html body .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption strong { font-size: 18px !important; }
}
/* ============================================================================
17.11 توزیع فضا — ستون چپ وسط‌چین عمودی، دوربین بزرگ‌تر در ارتفاع بلند،
کپشن راهنما نوار باریک، کارت پرتره هم‌قد ستون فرم
============================================================================ */
/* کپشن راهنما: نوار باریک یک‌خطی چسبیده به لبه‌ی پایین قاب، نه جعبه روی صورت */
html body .camera-guide-instruction.camera-guide-instruction.camera-guide-instruction.camera-guide-instruction.camera-guide-instruction.camera-guide-instruction.camera-guide-instruction.camera-guide-instruction {
position: absolute !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 7px 12px !important;
background: rgba(0, 0, 0, 0.62) !important;
backdrop-filter: blur(2px);
text-align: center !important;
}
html body .camera-guide-title.camera-guide-title.camera-guide-title.camera-guide-title.camera-guide-title.camera-guide-title.camera-guide-title.camera-guide-title {
display: inline !important;
font-size: 14px !important;
font-weight: 600 !important;
margin: 0 6px 0 0 !important;
line-height: 1.3 !important;
}
html body .camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint {
display: inline !important;
font-size: 12px !important;
opacity: .8 !important;
margin: 0 !important;
line-height: 1.3 !important;
}
/* ستون چپ capture در محور عمودی با قاب دوربین هم‌مرکز می‌شود */
html body .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions { align-self: center !important; }
/* در ارتفاع‌های بلند دوربین سهم واقعی صفحه را می‌گیرد */
@media (min-height: 841px) {
html body .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame { width: min(34vw, 46dvh, 560px) !important; height: auto !important; max-height: none !important; }
}
/* کارت پرتره در ADVICE هم‌قد ستون بازتاب می‌شود و تصویر ارتفاع را پر می‌کند */
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel {
align-self: stretch !important;
display: flex !important;
flex-direction: column !important;
}
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel img {
flex: 1 1 auto !important;
min-height: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* کارت خلاصه در DELIVERY هم‌قد پنل فرم */
html body .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary {
align-self: stretch !important;
display: flex !important;
flex-direction: column !important;
}
html body .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary img {
flex: 1 1 160px !important;
min-height: 120px !important;
width: 100% !important;
object-fit: cover !important;
}
/* ============================================================================
99. کاهش حرکت — باید آخرین بلوک فایل بماند
سلکتورهای دکمه صریح تکرار شده‌اند چون * نمی‌تواند specificity آن‌ها را ببرد.
============================================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
html body .nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button, html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button, html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button, html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button, html body .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action, html body .nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button.nv-flow-button::before, html body .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button::before, html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button::before, html body .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button::before, html body .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action::before { transition-duration: .01ms !important; }
}
/* Load sentinel: js/css-guard.js reloads this file when this last rule is missing (a truncated download). Keep it last. */
html { --nv-css-end-canonical: 1; }