/* ============================================================================ GTranslate / Google Translate — German layout fix File: Content/css/gtranslate-fix.css ---------------------------------------------------------------------------- GOAL The translated page must look like the English page — SAME layout, nothing shifts or wraps differently. The only change is that the longer German text is shrunk so it fits inside the existing (English-sized) boxes. We deliberately do NOT force-wrap text, auto-size buttons, or change flex layout globally — those rules moved elements around (e.g. the header "Login" button dropping below the search box), which is exactly what we want to avoid. The single global lever is font size. SCOPING `html[class*="translated-"]` matches the class Google Translate adds to only while a page is translated (and removes on return to English), so the English site is untouched. Loaded once per page from the _NewHeader* partials, so it applies site-wide. TUNE: change --gt-text-scale (font size) or --gt-line-height below. 78% = 22% smaller | 75% = 25% smaller | 84% = 16% smaller ============================================================================ */ html[class*="translated-"] { --gt-text-scale: 78%; /* 78% -> 22% smaller German text */ --gt-line-height: 1.2; /* tighter line spacing to suit the smaller text */ } /* 1. SHRINK TRANSLATED TEXT --------------------------------------------------- Google wraps every translated text node in tags (usually double). Scaling those wrappers shrinks ALL translated text uniformly, with no compounding, and without touching images, boxes, buttons or spacing — so the layout stays identical to English. */ html[class*="translated-"] font { font-size: var(--gt-text-scale) !important; } html[class*="translated-"] font font { font-size: inherit !important; /* inner wrapper inherits -> applied once */ } /* 2. TIGHTEN LINE SPACING ON TEXT BLOCKS ------------------------------------- The line-height lives on the block element (often a fixed px value tuned for the larger English font), so it has to be set here. Unitless, so it scales with each element and never compounds. Buttons/links are excluded — they use line-height for vertical centering. */ html[class*="translated-"] p, html[class*="translated-"] h1, html[class*="translated-"] h2, html[class*="translated-"] h3, html[class*="translated-"] h4, html[class*="translated-"] h5, html[class*="translated-"] h6, html[class*="translated-"] li, html[class*="translated-"] dd, html[class*="translated-"] dt, html[class*="translated-"] td, html[class*="translated-"] th, html[class*="translated-"] caption, html[class*="translated-"] figcaption, html[class*="translated-"] blockquote { line-height: var(--gt-line-height) !important; } /* 3. COURSE-DETAIL (vc-*) CTA BUTTONS — the ONE scoped exception -------------- The "Request More Information" / "Download Syllabus" buttons on the course detail pages (Detail_New_*.cshtml) pin a fixed English width (177/193px) AND pin their label at 16px (`.vc .vc-btn * { font-size:16px !important }`), so rule #1 can't shrink them and the German label overflows onto the next button. This releases just those buttons so each grows to fit its label, and lets that button row wrap. Scoped to `.vc-ctas` only — it cannot affect the header, nav, search or any other element. */ html[class*="translated-"] .vc-ctas { flex-wrap: wrap !important; } html[class*="translated-"] .vc-ctas .vc-btn, html[class*="translated-"] button#dlSyllabusBtn.vc-btn { width: auto !important; /* grow from the pinned 177/193px to fit label */ min-width: 177.66px; /* never narrower than the original */ max-width: 100% !important; /* never overflow the card */ height: auto !important; } /* 4. MEGA-MENU ("All Courses" dropdown) position -------------------------------- The dropdown panels are pinned at a fixed `top: 76px` (menu-footer-style_v5.css), measured from the trigger

, which stretches to the full English nav-row height. The smaller German text makes that nav row shorter, so the fixed 76px leaves a gap above the panel ("going down from top"). Anchoring the panel just below its trigger (top: 124%, tuned to the German nav height) lines it up. Desktop only — the mobile menu (<=1025px) uses relative positioning, so it must not be touched. The #dropItems selector is needed to outrank the ID-based rule. */ @media (min-width: 1026px) { html[class*="translated-"] #dropItems, html[class*="translated-"] .dropItems, html[class*="translated-"] .SubdropDown { top: 124% !important; } } /* 5. "SHOW MORE / SHOW LESS" PILL TOGGLES (card grids) ------------------------ These toggle pills pin a fixed English width (e.g. `.new-icon-design .more-detail` at 160px), which is too narrow for the longer translated label, so the text + arrow icon wrap to a second line. Let the pill grow to fit its (already-shrunk) label on one line. Scoped to this specific toggle only. */ html[class*="translated-"] .new-icon-design .more-detail { width: fit-content !important; max-width: 100% !important; } /* 6. VENDOR PAGE hero (Views/Vendor/CourseList.cshtml) ------------------------ a) The collapsed description (#summary) uses -webkit-line-clamp, which Google Translate breaks (it wraps text in ), so the longer German text overflowed onto the section below. Clip it with a plain block + fixed height + forced line-height so it always ends cleanly on the 3rd line. b) The "Show More / Show Less" pill (#showMorLess) pins a fixed 170px width that's too narrow for the German label — let it fit its text on one line. */ html[class*="translated-"] #summary span.collapse:not(.show) { display: block !important; height: 81px !important; /* 3 lines x 27px -> clip lands on a line boundary */ overflow: hidden !important; line-height: 27px !important; } html[class*="translated-"] #summary span.collapse:not(.show) * { line-height: 27px !important; } html[class*="translated-"] #showMorLess { width: auto !important; display: inline-flex !important; white-space: nowrap !important; gap: 8px; } /* 6b. Vendor hero description on MOBILE --------------------------------------- The smaller mobile line box left the 3rd line's descenders clipped at 81px. Give the collapsed preview a matching line-height + height so all three lines show in full and the clip still lands cleanly on the line boundary (3 lines x 30px = 90px). */ @media (max-width: 769px) { html[class*="translated-"] #summary span.collapse:not(.show) { height: 90px !important; line-height: 30px !important; } html[class*="translated-"] #summary span.collapse:not(.show) * { line-height: 30px !important; } }