/* ============================================================================ i18n-overflow.css — 俄文 (RU / 西里爾文) 桌機防溢出補丁 ---------------------------------------------------------------------------- 用途：0523.tw 既有版型以繁中為基準，俄文長約 2-3 倍，翻譯後桌機長文字會 撐破/截斷既有容器（hero 搜尋框、定價卡片標題、navbar、按鈕/badge、 資料表格）。本檔以「打磨」而非「重設計」取向，讓俄文優雅折行/收縮/微縮。 作用域（最重要）：全檔每條規則都鎖在 html[lang="ru"] 之下。 由 app()->getLocale() 動態輸出，俄文時為 lang="ru" ⇒ 對 zh-TW/ja/ko/en… 其他語系「零影響」，既有設計完全不動。 斷點（對齊 master-mobile.css）：手機 ≤768 / 平板 769-1023 / 桌機 ≥1024。 重點在桌機(≥1024)，僅必要處補手機/平板，避免讓 ru 行動版變更糟。 如何引入（站長條件載入，須置於 master/app/header CSS「之後」以蓋過既有 !important）： @if(app()->getLocale() === 'ru') @endif 建議引入點：app.blade.php(必)、customs-main.blade.php、admin.blade.php、 provider.blade.php（凡含 navbar/表格的 layout 都引）。 設計原則：溢出根因＝flex/grid 子項預設 min-width:auto 不肯收縮 → 補 min-width:0； 寧可折行/微縮不輕易 ellipsis；hyphens:auto 配 lang="ru" 才啟用俄文斷字當 最後手段；!important 僅用於壓過 master-mobile 既有 !important 且永遠在 ru 內。 ============================================================================ */ /* ====[ 0 ] 全域安全底網：溢出真正的根因修正 ======================================== 症狀：flex/grid 子項(卡片/導覽項/表格欄)預設 min-width:auto，內含超長俄文單字 時不肯收縮把容器撐爆。解法：讓常見 flex/grid 子項可收縮(min-width:0)。 對版面無視覺副作用，只在文字即將溢出時才介入。 */ html[lang="ru"] .header-container, html[lang="ru"] .nav-list, html[lang="ru"] .nav-menu, html[lang="ru"] .main-nav, html[lang="ru"] .footer-container, html[lang="ru"] .footer-links, html[lang="ru"] .pricing-banner [style*="grid"], html[lang="ru"] .hero-cta-group, html[lang="ru"] .hero-value-props, html[lang="ru"] .hero-quick-actions, html[lang="ru"] .hero-stats, html[lang="ru"] .nav-item, html[lang="ru"] .nav-link, html[lang="ru"] .nav-text, html[lang="ru"] .nav-label, html[lang="ru"] .pricing-card, html[lang="ru"] .stat-item, html[lang="ru"] .landing-stats__item, html[lang="ru"] .hero-value-item, html[lang="ru"] .hero-quick-action { min-width: 0; } /* ====[ 1 ] 首頁 Hero 搜尋框 — 症狀1：placeholder 被截斷 ========================== 組件：home/_hero.blade.php → .hero-search-form/.search-input-wrapper/.search-input/.search-btn 俄文 placeholder「Введите номер накладной для отслеживания」很長。 解法：放寬 form 與 wrapper，輸入框彈性增寬+placeholder 略縮，按鈕不被擠壓。 */ @media (min-width: 1024px) { html[lang="ru"] .hero-search-form { flex-wrap: nowrap; max-width: 640px; } html[lang="ru"] .search-input-wrapper { flex: 1 1 auto; min-width: 0; } html[lang="ru"] .search-input { width: 100%; min-width: 0; font-size: 0.95rem; /* 略縮，避免長 placeholder 被截 */ text-overflow: ellipsis; /* 真放不下時優雅省略，不硬截 */ } html[lang="ru"] .search-input::placeholder { font-size: 0.9em; opacity: 0.85; } html[lang="ru"] .search-btn { flex: 0 0 auto; white-space: nowrap; } } /* ====[ 2 ] 定價卡片 — 症狀2：標題擠成 2-3 行、卡片壅擠 ========================== 組件：home/_pricing-banner.blade.php → .pricing-card（內部為 inline-style div： 13px 標籤含 letter-spacing:2px、24/48px 數字列）。俄文標題如 「Деловой морской экспресс」「Ценовое предложение проекта」過長。 解法：① grid 最小欄寬放寬 ② 卡片高度自然增長 ③ 砍寬字距(letter-spacing 對 俄文必溢出) ④ 報價列字級 clamp 微縮+行高收緊。 */ @media (min-width: 1024px) { html[lang="ru"] .pricing-banner [style*="grid-template-columns"] { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; } html[lang="ru"] .pricing-card { height: auto; overflow-wrap: break-word; word-break: normal; } /* 卡片內所有文字 div：取消寬字距、允許折行 */ html[lang="ru"] .pricing-card > div { letter-spacing: normal !important; white-space: normal !important; overflow-wrap: break-word; } /* 報價列(inline 24px)微縮+收緊行高，兩行內收得漂亮 */ html[lang="ru"] .pricing-card > div[style*="font-size:24px"], html[lang="ru"] .pricing-card > div[style*="font-size: 24px"] { font-size: clamp(1.05rem, 1.6vw, 1.3rem) !important; line-height: 1.25 !important; } /* 上方小標籤(inline 13px)給足行高，2 行不黏 */ html[lang="ru"] .pricing-card > div[style*="font-size:13px"], html[lang="ru"] .pricing-card > div[style*="font-size: 13px"] { line-height: 1.35 !important; } } /* ====[ 3 ] 短標籤通用收縮：按鈕/CTA/badge/chip/統計標籤 =========================== 症狀3：~4955 處 zh 短→ru 長（免費註冊→Зарегистрироваться、運費→Стоимость доставки、啟用→Давать возможность）。組件：.btn/.btn-cta/.cta-btn/ .calc-btn / .btn-primary / .badge-X / .label / .feature-tag / .hero-register-btn… 解法：按鈕允許折行+放寬固定寬+行高收緊；badge/chip 改 inline-flex 自適應可折行。 */ @media (min-width: 1024px) { html[lang="ru"] .btn, html[lang="ru"] .btn-cta, html[lang="ru"] .cta-btn, html[lang="ru"] .calc-btn, html[lang="ru"] .btn-primary, html[lang="ru"] .btn-secondary, html[lang="ru"] .hero-register-btn, html[lang="ru"] .header-cta, html[lang="ru"] .mobile-nav-cta { white-space: normal; line-height: 1.25; height: auto; overflow-wrap: break-word; text-align: center; } /* badge/chip/tag：自適應寬度、可折行，不被內容撐成單行溢出 */ html[lang="ru"] .badge-free, html[lang="ru"] .badge-tax, html[lang="ru"] .badge-ok, html[lang="ru"] .badge-ncc, html[lang="ru"] .label, html[lang="ru"] .feature-tag, html[lang="ru"] .hero-badge { display: inline-flex; align-items: center; white-space: normal; max-width: 100%; overflow-wrap: break-word; line-height: 1.3; } /* 統計大數字下的小標籤(_stats/hero)：可折行+行高收緊，不撐破欄 */ html[lang="ru"] .stat-label, html[lang="ru"] .landing-stats__label { white-space: normal; line-height: 1.25; overflow-wrap: break-word; } /* 統計大數字本身(24/7、98%、50,000+ 後接俄文單位)用 clamp 防超寬 */ html[lang="ru"] .stat-number, html[lang="ru"] .landing-stats__number { font-size: clamp(1.5rem, 2.4vw, 2.25rem); overflow-wrap: break-word; } } /* ====[ 4 ] 桌機主導覽 navbar — 症狀4：選單項變長易換行/溢出 ===================== 涵蓋四個 layout 導覽系統： app : .nav-list/.nav-item/.nav-text/.more-button/.more-text customs-main : .main-nav/.nav-menu/.nav-link admin/provider: .layout-sidenav/.nav-link/.nav-label 解法：頂部(app)水平導覽『強制單行不換行』，靠縮 padding/間距/字級/圖示把 5 項塞入中央區； customs-main 主導覽仍允許 wrap；「Еще/更多」不折行；側欄標籤可折行。 注意：master-mobile.css(L643-653) 已對全語系設 .nav-text/.nav-link white-space:nowrap， 此處僅在 ru 內微調字級與收縮，長字靠「縮字級+容器 wrap」消化而非 mid-word 斷字（避免西里爾醜斷）。 */ @media (min-width: 1024px) { /* (app) 頂部 5 圖示水平列：強制單行不換行（修俄文「Мой аккаунт」掉到第二行）； 靠縮 padding/column-gap/字級/圖示把 5 項塞進中央區，1024px↑ 連右側「Еще」都容得下。 */ html[lang="ru"] .header-center .nav-list { flex-wrap: nowrap; column-gap: 0.125rem; } html[lang="ru"] .header-center .nav-item { flex: 0 0 auto; min-width: 0; } html[lang="ru"] .header-center .nav-link { padding-left: 0.4rem; padding-right: 0.4rem; gap: 0.25rem; } html[lang="ru"] .header-center .nav-icon { font-size: 0.95rem; } /* customs-main 等其他用 .nav-text 的版面沿用 0.82rem 全域值；app 導覽再更具體覆寫為單行 0.8rem */ html[lang="ru"] .nav-text { font-size: 0.82rem; overflow-wrap: normal; } html[lang="ru"] .header-center .nav-text { font-size: 0.8rem; white-space: nowrap; overflow-wrap: normal; } /* (app)「更多/Еще」按鈕文字保持單行可讀 */ html[lang="ru"] .more-button .more-text { white-space: nowrap; } /* (customs-main) 水平主導覽：可 wrap、連結收縮、字級略縮 */ html[lang="ru"] .main-nav .nav-menu { flex-wrap: wrap; column-gap: 0.5rem; } html[lang="ru"] .main-nav .nav-link { font-size: 0.9rem; min-width: 0; } /* (admin/provider) 側欄導覽：長俄文標籤允許折行不溢出側欄 */ html[lang="ru"] .layout-sidenav .nav-link { height: auto; align-items: flex-start; } html[lang="ru"] .layout-sidenav .nav-label, html[lang="ru"] .nav-label { white-space: normal; line-height: 1.3; overflow-wrap: break-word; } } /* ====[ 5 ] 會員/後台資料表格 — 症狀5：儲存格俄文撐破固定欄寬 ===================== 組件：.data-table/.billing-table/.crm-table/.users-table__td/__th/ .roles-table__cell/.tax-table/.quota-table 注意：刻意「不」碰落地頁 .compare-table/.info-table（行銷比較表屬內容排版，維持 品牌一致），只處理真正資料密集的會員/後台表格。 解法：table-layout:auto 讓欄寬隨內容調配、儲存格允許斷行、桌機字級略縮、頂端對齊； 超長表整體橫向捲動由既有 .table-responsive 處理。 */ @media (min-width: 1024px) { html[lang="ru"] .data-table, html[lang="ru"] .billing-table, html[lang="ru"] .crm-table, html[lang="ru"] .tax-table, html[lang="ru"] .quota-table { table-layout: auto; width: 100%; } html[lang="ru"] .data-table th, html[lang="ru"] .data-table td, html[lang="ru"] .billing-table th, html[lang="ru"] .billing-table td, html[lang="ru"] .crm-table th, html[lang="ru"] .crm-table td, html[lang="ru"] .users-table__th, html[lang="ru"] .users-table__td, html[lang="ru"] .roles-table__header, html[lang="ru"] .roles-table__cell, html[lang="ru"] .tax-table th, html[lang="ru"] .tax-table td, html[lang="ru"] .quota-table th, html[lang="ru"] .quota-table td { overflow-wrap: break-word; word-break: normal; hyphens: auto; /* 配 lang="ru" 啟用俄文斷字，極長詞最後手段 */ font-size: 0.9rem; line-height: 1.4; vertical-align: top; } /* 表頭(th)常是短標籤變長：給足行高、允許兩行 */ html[lang="ru"] .data-table th, html[lang="ru"] .billing-table th, html[lang="ru"] .crm-table th, html[lang="ru"] .users-table__th, html[lang="ru"] .roles-table__header { white-space: normal; line-height: 1.3; } } /* ====[ 6 ] 平板(769-1023)與手機(≤768)的 ru 安全網 ============================== 目標：別讓桌機修正連帶讓 ru 行動版變更糟；行動版只補「長字可斷行」最低限度， 不動 master-mobile 既有行動排版策略。 */ @media (max-width: 1023px) { html[lang="ru"] .btn, html[lang="ru"] .btn-cta, html[lang="ru"] .cta-btn, html[lang="ru"] .nav-text, html[lang="ru"] .nav-label, html[lang="ru"] .stat-label, html[lang="ru"] .landing-stats__label, html[lang="ru"] .pricing-card > div, html[lang="ru"] th, html[lang="ru"] td { white-space: normal; overflow-wrap: break-word; } html[lang="ru"] .search-input { font-size: 0.95rem; } }