/* * seo-overrides.css * Fixes layout overflows caused by long SEO-targeted H1/subtitle/pricing texts * that don't fit Tilda's tight inline-CSS containers built for short originals. * * Loaded LAST in ; uses !important to win against Tilda's per-record inline styles. */ /* ---------- HERO H1 (#rec632068073 / data-elem-id="1692758656339") ---------- */ /* Default font 60px → 44px; long «РАЗРАБОТКА ХХХ В ЕКАТЕРИНБУРГЕ» texts fit in 1-2 lines */ #rec632068073 .tn-elem[data-elem-id="1692758656339"] .tn-atom, #rec632068073 h1.tn-atom { font-size: 44px !important; line-height: 1.1 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* 992-1199 viewport */ @media screen and (max-width: 1199px) { #rec632068073 .tn-elem[data-elem-id="1692758656339"] .tn-atom, #rec632068073 h1.tn-atom { font-size: 40px !important; line-height: 1.1 !important; } } /* 640-991 viewport */ @media screen and (max-width: 991px) { #rec632068073 .tn-elem[data-elem-id="1692758656339"] .tn-atom, #rec632068073 h1.tn-atom { font-size: 38px !important; line-height: 1.1 !important; } } /* 480-639 viewport */ @media screen and (max-width: 639px) { #rec632068073 .tn-elem[data-elem-id="1692758656339"] .tn-atom, #rec632068073 h1.tn-atom { font-size: 34px !important; line-height: 1.1 !important; } } /* <480 viewport — leave Tilda's 39px (works on small phones) */ @media screen and (max-width: 479px) { #rec632068073 .tn-elem[data-elem-id="1692758656339"] .tn-atom, #rec632068073 h1.tn-atom { font-size: 28px !important; line-height: 1.1 !important; } } /* ---------- HERO SUBTITLE (#rec632068073 / data-elem-id="1692936757555") ---------- */ /* Subtitle width MUST stay ≤ ~290px: after the hero fade-in animation settles, * the round "ОБСУДИТЬ ПРОЕКТ" CTA button rests with its left edge only ~296px * right of the subtitle's left edge. Wider boxes (450/540px) overlap the button. * 270px keeps a ~26px clearance; long SEO subtitles just wrap to more lines, * staying in the left column (hero min-height grows to fit). */ #rec632068073 .tn-elem[data-elem-id="1692936757555"] { width: 270px !important; max-width: 270px !important; } @media screen and (max-width: 991px) { #rec632068073 .tn-elem[data-elem-id="1692936757555"] { width: 460px !important; max-width: 70vw !important; } } @media screen and (max-width: 639px) { #rec632068073 .tn-elem[data-elem-id="1692936757555"] { width: auto !important; max-width: calc(100vw - 40px) !important; left: 20px !important; } } /* ---------- PRICING HEADING H2 (#rec632072069 / data-elem-id="1628090465703") ---------- */ /* Default font 63px → 38px (allows 2-3 lines for «Сколько стоит ...») */ #rec632072069 .tn-elem[data-elem-id="1628090465703"] .tn-atom { font-size: 38px !important; line-height: 1.1 !important; } @media screen and (max-width: 1199px) { #rec632072069 .tn-elem[data-elem-id="1628090465703"] .tn-atom { font-size: 34px !important; line-height: 1.1 !important; } } @media screen and (max-width: 991px) { #rec632072069 .tn-elem[data-elem-id="1628090465703"] .tn-atom { font-size: 32px !important; line-height: 1.1 !important; } } @media screen and (max-width: 639px) { #rec632072069 .tn-elem[data-elem-id="1628090465703"] .tn-atom { font-size: 28px !important; line-height: 1.1 !important; } } @media screen and (max-width: 479px) { #rec632072069 .tn-elem[data-elem-id="1628090465703"] .tn-atom { font-size: 24px !important; line-height: 1.1 !important; } } /* ---------- PRICING ARTBOARD (#rec632072069) — let it grow if text is long ---------- */ #rec632072069 .t396__artboard, #rec632072069 .t396__filter, #rec632072069 .t396__carrier { height: auto !important; min-height: 148px !important; } @media screen and (max-width: 1199px) { #rec632072069 .t396__artboard, #rec632072069 .t396__filter, #rec632072069 .t396__carrier { min-height: 138px !important; } } @media screen and (max-width: 959px) { #rec632072069 .t396__artboard, #rec632072069 .t396__filter, #rec632072069 .t396__carrier { min-height: 278px !important; } } @media screen and (max-width: 639px) { #rec632072069 .t396__artboard, #rec632072069 .t396__filter, #rec632072069 .t396__carrier { min-height: 218px !important; } } @media screen and (max-width: 479px) { #rec632072069 .t396__artboard, #rec632072069 .t396__filter, #rec632072069 .t396__carrier { min-height: 164px !important; } } /* ---------- HERO ARTBOARD (#rec632068073) — let it grow if H1 wraps to many lines ---------- */ #rec632068073 .t396__artboard, #rec632068073 .t396__filter, #rec632068073 .t396__carrier { height: auto !important; min-height: 568px !important; } @media screen and (max-width: 1199px) { #rec632068073 .t396__artboard, #rec632068073 .t396__filter, #rec632068073 .t396__carrier { min-height: 568px !important; } } @media screen and (max-width: 959px) { #rec632068073 .t396__artboard, #rec632068073 .t396__filter, #rec632068073 .t396__carrier { min-height: 800px !important; } } @media screen and (max-width: 639px) { #rec632068073 .t396__artboard, #rec632068073 .t396__filter, #rec632068073 .t396__carrier { min-height: 700px !important; } } @media screen and (max-width: 479px) { #rec632068073 .t396__artboard, #rec632068073 .t396__filter, #rec632068073 .t396__carrier { min-height: 600px !important; } } /* ---------- HIDE generic "ТИП САЙТА" badge — overlaps with longer SEO H1 texts ---------- */ #rec632068073 .tn-elem[data-elem-id="1692758767046"] { display: none !important; } /* ---------- Font-metric overflow fix (Tilda's tight line-height vs Roboto/Arial glyph box) ---------- * * Several decorative single-line atoms set line-height ≤ 1.1, so the font's natural * glyph box (ascent+descent) spills a few px past the line box. Because every affected * .tn-elem is height:auto, GIVING the atom a line-height ≥ the font's natural ratio lets * the container grow to wrap the glyphs fully — this clears the scrollHeight>containerHeight * overflow flag without clipping text and without shifting absolutely-positioned siblings. * (overflow:hidden on the .tn-elem does NOT help here — the diagnostic measures the inner * .tn-atom scrollHeight, which clipping the parent leaves unchanged.) */ /* "01".."06" stage-number circles (font-size 130px, Tilda line-height:1.1 → +7px) */ .tn-elem[data-elem-id="1608129867848"] .tn-atom, .tn-elem[data-elem-id="1608130407368"] .tn-atom, .tn-elem[data-elem-id="1608130459737"] .tn-atom, .tn-elem[data-elem-id="1649406340517"] .tn-atom, .tn-elem[data-elem-id="1608130459748"] .tn-atom, .tn-elem[data-elem-id="1649411721015"] .tn-atom { line-height: 1.25 !important; } /* "КОНТАКТЫ" footer heading (Tilda line-height:1 → +8px) */ .tn-elem[data-elem-id="1628174791529"] .tn-atom { line-height: 1.2 !important; } /* "MARKETING AGENCY •" decorative marquee band (Tilda line-height:1 → +5px) */ .tn-elem[data-elem-id="1625051211433"] .tn-atom, .tn-elem[data-elem-id="1625051801153"] .tn-atom, .tn-elem[data-elem-id="1625051840250"] .tn-atom, .tn-elem[data-elem-id="1625052272608"] .tn-atom, .tn-elem[data-elem-id="1625052463814"] .tn-atom, .tn-elem[data-elem-id="1625052487451"] .tn-atom, .tn-elem[data-elem-id="1625052500291"] .tn-atom, .tn-elem[data-elem-id="1625052519492"] .tn-atom { line-height: 1.2 !important; }