/* ============================================================================ tilda-fallback.css — rescue styles for the exported Tilda case / landing pages. Their per-page Tilda CSS (static.tildacdn.com/ws/project20677466/tilda-blocks-*.css) now returns a 404 HTML stub and is blocked by the browser (ERR_BLOCKED_BY_ORB), so the pages render unstyled. The Tilda project is unpublished — the original styling is unrecoverable. This self-hosted sheet rebuilds a clean, branded, single-column reading layout from the surviving Tilda content classes (.t-container / .t-col / .t-title / .t-descr / .t-text / .t-img). Loaded LAST in so it wins over the (failed) Tilda CSS. ============================================================================ */ /* Self-hosted elegant serif (Cormorant Garamond) + Manrope — these pages don't otherwise load them. Cormorant = the high-contrast "elegant business" serif. */ @import url('/vendor/fonts/brand-fonts.css?v=20260701_local1'); :root { --mx-cream: #F9F2DE; --mx-serif: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif; --mx-surface: #FFFBF1; --mx-ink: #1f2430; --mx-muted: #5b6472; --mx-purple: #7c3aed; --mx-purple-light: #8b5cf6; } html, body { margin: 0 !important; padding: 0 !important; background: var(--mx-cream) !important; color: var(--mx-ink) !important; font-family: 'Manrope', 'Inter', system-ui, -apple-system, 'Ubuntu', sans-serif !important; line-height: 1.65 !important; -webkit-font-smoothing: antialiased; overflow-x: hidden !important; } /* Single clean reading column */ .t-container, .t-container_flex, .t-container_100, .t-width, .t-width_12 { max-width: 820px !important; width: auto !important; margin: 0 auto !important; padding-left: 20px !important; padding-right: 20px !important; display: block !important; box-sizing: border-box !important; float: none !important; } /* Collapse the 12-col Tilda grid into full-width stacked blocks */ .t-col { width: 100% !important; max-width: 100% !important; margin: 0 0 6px !important; padding: 0 !important; float: none !important; display: block !important; box-sizing: border-box !important; } /* Records: remove odd absolute positioning, add vertical rhythm */ .t-rec { position: static !important; padding: 12px 0 !important; margin: 0 !important; background-color: transparent !important; background-image: none !important; } .t-rec:first-child { padding-top: 28px !important; } /* Typography */ .t-title { font-family: var(--mx-serif) !important; font-weight: 600 !important; line-height: 1.1 !important; color: var(--mx-ink) !important; margin: 0 0 14px !important; letter-spacing: 0 !important; } .t-title_md, [class*="t225__title"] { font-size: clamp(22px, 4.5vw, 34px) !important; } [class*="t1123__title"], h1.t-title { font-size: clamp(26px, 6vw, 44px) !important; } .t-descr { color: var(--mx-muted) !important; margin: 0 0 10px !important; } .t-descr_xl { font-size: clamp(18px, 3.4vw, 23px) !important; } .t-text { font-size: clamp(15px, 2.6vw, 18px) !important; line-height: 1.7 !important; color: var(--mx-ink) !important; } a { color: var(--mx-purple) !important; } b, strong { color: var(--mx-ink) !important; } /* t225__title is used for BOTH the hero heading AND the small label, so it must NOT become a pill (a long title turned into a giant pill = the reported bug). Render them as clean headings. */ [class*="t225__title"] { background: transparent !important; background-image: none !important; color: var(--mx-ink) !important; border-radius: 0 !important; padding: 0 !important; display: block !important; width: auto !important; font-family: var(--mx-serif) !important; font-weight: 600 !important; font-size: clamp(28px, 6vw, 48px) !important; line-height: 1.06 !important; letter-spacing: 0 !important; margin: 0 0 14px !important; } /* Genuine eyebrow labels (Tilda uptitle) → tidy brand pill */ [class*="t-uptitle"], [class*="uptitle"] { display: inline-block !important; background: linear-gradient(135deg, var(--mx-purple-light), var(--mx-purple)) !important; color: #fff !important; padding: 6px 16px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.02em; width: auto !important; margin: 0 0 16px !important; } /* Images: responsive, framed as soft cards */ .t-img, img { max-width: 100% !important; height: auto !important; display: block; border-radius: 12px; margin: 8px 0; } /* Text blocks stay plain on the cream canvas — turning them into surface cards made EMPTY Tilda blocks render as blank white plates (the ones reported under the copyright). Hide empty content blocks outright. */ .t-text:empty, .t007__text:empty, .t-col:empty, .t-descr:empty, .t-text:blank, .t007__text:blank { display: none !important; } /* Hide raw Tilda chrome that renders as broken artifacts without its CSS */ [class*="t-cookie"], [class*="cookies"], .t-popup, .t-store__viewed, [data-record-type="257"], [data-record-type="396"], [data-record-type="704"], [class*="t-menu"], [class*="t280"], [class*="t228"] { display: none !important; } /* NB: do NOT blanket-hide `.r_hidden` here. On these case pages the `.r_hidden` records are the CONTINUATION images (02/03/04) of the case-study conversation, which render fine once scrolled into view — the "empty void" seen in a full-page screenshot is just a lazy-load timing artifact, not a real user-facing gap. Hiding them would drop real content. Left intentionally unstyled. */ /* Tidy the bare top "Вход / Регистрация / RU" links into a slim row */ ul, ol { list-style: none !important; padding-left: 0 !important; } /* Tilda buttons (e.g. the category label) → compact brand pill, not a full bar */ .t-btn, .t-btnflex, .t-btnflex_type_button { display: inline-flex !important; align-items: center; width: auto !important; max-width: 100% !important; margin: 0 0 14px !important; padding: 9px 20px !important; border-radius: 999px !important; color: #fff !important; font-weight: 700 !important; font-size: 13px !important; text-decoration: none !important; border: none !important; box-shadow: 0 4px 14px -6px rgba(124, 58, 237, 0.4); } .t-btn *, .t-btnflex * { color: #fff !important; } @media (max-width: 600px) { .t-container, .t-container_flex { padding-left: 14px !important; padding-right: 14px !important; } }