/** * LTR Overrides for English Language Version * Applied only when dir="ltr" is set on */ /* === Global text direction === */ html[dir="ltr"] body { direction: ltr; text-align: left; } /* === Navigation === */ html[dir="ltr"] .site-header { flex-direction: row; } html[dir="ltr"] .nav-end { flex-direction: row; } /* === Hero === */ html[dir="ltr"] .hero { text-align: center; } /* === Stats === */ html[dir="ltr"] .stats { direction: ltr; } /* === Sections general === */ html[dir="ltr"] .sec, html[dir="ltr"] .dash-sec, html[dir="ltr"] .form-sec, html[dir="ltr"] .story, html[dir="ltr"] .after, html[dir="ltr"] .trans, html[dir="ltr"] .morning-compare, html[dir="ltr"] .inline-strip, html[dir="ltr"] .cta-banner { text-align: left; } html[dir="ltr"] .st, html[dir="ltr"] .sd, html[dir="ltr"] .sl { text-align: center; } /* === Notification stack === */ html[dir="ltr"] .notif { flex-direction: row; text-align: left; } html[dir="ltr"] .notif-text { text-align: left; } html[dir="ltr"] .notif-time { margin-left: auto; margin-right: 0; } /* === Morning Compare === */ html[dir="ltr"] .mc-grid { direction: ltr; } /* === Dashboard === */ html[dir="ltr"] .dash-top { direction: ltr; } html[dir="ltr"] .d-side { text-align: left; border-left: none; border-right: 1px solid var(--border); direction: ltr; } html[dir="ltr"] .d-item { direction: ltr; } html[dir="ltr"] .d-meta { text-align: left; } html[dir="ltr"] .d-main-header { direction: ltr; } html[dir="ltr"] .d-input-bar { direction: ltr; } html[dir="ltr"] .d-input-bar input { text-align: left; direction: ltr; } html[dir="ltr"] .chat-area { direction: ltr; } html[dir="ltr"] .chat-area .msg { text-align: left; direction: ltr; } html[dir="ltr"] .chat-area .msg.u { border-bottom-left-radius: 12px; border-bottom-right-radius: 3px; align-self: flex-end; } html[dir="ltr"] .chat-area .msg.ai { border-bottom-right-radius: 12px; border-bottom-left-radius: 3px; align-self: flex-start; } html[dir="ltr"] .chat-area .msg.user { margin-left: auto; margin-right: 0; } html[dir="ltr"] .sys-msg { direction: ltr; } html[dir="ltr"] .typing-ind { align-self: flex-start; } /* === Solution cards === */ html[dir="ltr"] .sol-card { text-align: left; } /* === Feature cards === */ html[dir="ltr"] .feat-card { text-align: left; } html[dir="ltr"] .feat-code { text-align: left; direction: ltr; } html[dir="ltr"] .feat-bullets { padding-left: 14px; padding-right: 0; } html[dir="ltr"] .feat-bullets li { padding-left: 14px; padding-right: 0; } html[dir="ltr"] .feat-bullets li::before { left: 0; right: auto; } /* === Channel grid === */ html[dir="ltr"] .ch-card { text-align: center; } /* === Process flow === */ html[dir="ltr"] .proc-flow { direction: ltr; } html[dir="ltr"] .proc-arrow { transform: scaleX(1); } /* === ROI Calculator === */ html[dir="ltr"] .roi-box { text-align: left; } html[dir="ltr"] .roi-label { text-align: left; } html[dir="ltr"] .roi-input { text-align: left; direction: ltr; } /* === Comparison table === */ html[dir="ltr"] .cmp-table { direction: ltr; } html[dir="ltr"] .cmp-cell { text-align: center; } html[dir="ltr"] .cmp-cell:first-child { text-align: left; } /* === FAQ === */ html[dir="ltr"] .faq-list { text-align: left; } html[dir="ltr"] .faq-q { text-align: left; flex-direction: row; } html[dir="ltr"] .faq-q .arrow { margin-left: auto; margin-right: 0; } html[dir="ltr"] .faq-a { text-align: left; } /* === Guarantees === */ html[dir="ltr"] .g-card { text-align: center; } /* === About === */ html[dir="ltr"] .about-green { text-align: center; } /* === Industries === */ html[dir="ltr"] .ind-row { direction: ltr; } /* === CTA Banner === */ html[dir="ltr"] .cta-banner { text-align: center; } /* === Urgency === */ html[dir="ltr"] .urg-box { text-align: center; } html[dir="ltr"] .urg-timer { direction: ltr; } /* === Lead Form section === */ html[dir="ltr"] .form-sec-grid { direction: ltr; } html[dir="ltr"] .form-sec-content { text-align: left; } html[dir="ltr"] .form-sec-card { text-align: left; } html[dir="ltr"] .form-sec-card input, html[dir="ltr"] .form-sec-card textarea { text-align: left; direction: ltr; } html[dir="ltr"] .volume-selector { direction: ltr; } /* === Form fields (components) === */ html[dir="ltr"] .form-field input, html[dir="ltr"] .form-field select { text-align: left; direction: ltr; } html[dir="ltr"] .form-field select { background-position: right 16px center; padding-right: 40px; padding-left: 18px; } html[dir="ltr"] .volume-label { text-align: left; } /* === Popup === */ html[dir="ltr"] .nd-popup { text-align: center; } html[dir="ltr"] .nd-popup-close { left: auto; right: 16px; } /* === Footer === */ html[dir="ltr"] .site-footer { text-align: center; } /* === Fixed bottom bar === */ html[dir="ltr"] .fixed-bottom-bar { direction: ltr; } /* === Strip form (inline) === */ html[dir="ltr"] .strip-text { text-align: left; } html[dir="ltr"] .strip-form { direction: ltr; } html[dir="ltr"] .strip-form input { text-align: left; direction: ltr; } /* === CTA Banner form === */ html[dir="ltr"] .btn-short { display: none; } html[dir="ltr"] .ctab-form { direction: ltr; } html[dir="ltr"] .ctab-form input { text-align: left; direction: ltr; } /* === Story sections === */ html[dir="ltr"] .story { text-align: left; } html[dir="ltr"] .after { text-align: left; } /* === Dashboard mobile sidebar === */ @media (max-width: 768px) { html[dir="ltr"] .d-side { border-right: none; border-bottom: 1px solid var(--border); } /* Bug 1: Stack inline form fields vertically on mobile */ html[dir="ltr"] .strip-form { flex-direction: column; } html[dir="ltr"] .strip-form input, html[dir="ltr"] .strip-form button { width: 100% !important; min-width: unset !important; } html[dir="ltr"] .ctab-form input, html[dir="ltr"] .ctab-form button { min-width: unset !important; flex: unset; width: 100%; } /* Bug 2: Show short button text on mobile */ html[dir="ltr"] .btn-full { display: none; } html[dir="ltr"] .btn-short { display: inline; } /* Bug 3: Center and shrink footer Meta badge on mobile */ html[dir="ltr"] footer.site-footer { align-items: center; } html[dir="ltr"] .footer-meta-badge { padding: 6px 14px; gap: 6px; } html[dir="ltr"] .footer-meta-badge svg { width: 18px; height: 18px; } html[dir="ltr"] .footer-meta-badge span { font-size: 11px; } }