/* ========================================================================== Ken Hator - compact desktop test -------------------------------------------------------------------------- Temporary override layer. Load AFTER main-style.css and index.css. Works only when has class "new-style-body". Goals: - make desktop/laptop layouts visually ~15-20% more compact; - keep 12/14/16px utility/small text readable; - do not change .container widths; - apply compact styling from 1024px upward, including 1920px; - do not touch <= 1023px layouts; - keep the existing RTL/LTR logic intact. ========================================================================== */ /* ========================================================================== 1800px and wider (1920px desktop) ========================================================================== */ @media only screen and (min-width: 1800px) { /* ----------------------------------------------------------------------- Global typography ----------------------------------------------------------------------- */ body.new-style-body { font-size: 18px; } body.new-style-body .section-title { font-size: 30px; margin-bottom: 24px; } body.new-style-body .site-title { font-size: 40px; letter-spacing: -1.5px; } body.new-style-body .site-title.mini { font-size: 24px; margin-bottom: 38px; } body.new-style-body .site-title.large { font-size: 60px; } body.new-style-body .uptitle { font-size: 27px; } body.new-style-body .site-text { font-size: 18px; } /* Keep already-small copy readable. */ body.new-style-body .site-text.min { font-size: 16px; } body.new-style-body .site-text.max { font-size: 20px; } body.new-style-body .text h1, body.new-style-body .text h2, body.new-style-body .text h3, body.new-style-body .text h4, body.new-style-body .text h5, body.new-style-body .text h6 { font-size: 20px; } body.new-style-body .text p, body.new-style-body .text span, body.new-style-body .text li { font-size: 18px; } body.new-style-body .seo-text { padding-top: 44px; padding-bottom: 44px; } /* ----------------------------------------------------------------------- Global spacing helpers - approximately -20% ----------------------------------------------------------------------- */ body.new-style-body .section-padding { padding-top: 64px; padding-bottom: 64px; } body.new-style-body .pd-top-100 { padding-top: 80px !important; } body.new-style-body .pd-bot-100 { padding-bottom: 80px !important; } body.new-style-body .pd-top-120 { padding-top: 96px; } body.new-style-body .pd-bot-120 { padding-bottom: 96px; } body.new-style-body .pd-top-70 { padding-top: 56px !important; } body.new-style-body .pd-bot-70 { padding-bottom: 56px !important; } body.new-style-body .mr-top-100 { margin-top: 80px !important; } body.new-style-body .mr-top-70 { margin-top: 56px !important; } body.new-style-body .mr-top-50 { margin-top: 40px !important; } body.new-style-body .mr-top-40 { margin-top: 32px !important; } body.new-style-body .mr-top-30 { margin-top: 24px !important; } body.new-style-body .mr-top-20 { margin-top: 16px !important; } body.new-style-body .mr-bot-100 { margin-bottom: 80px !important; } body.new-style-body .mr-bot-70 { margin-bottom: 56px !important; } body.new-style-body .mr-bot-50 { margin-bottom: 40px !important; } body.new-style-body .mr-bot-40 { margin-bottom: 32px !important; } body.new-style-body .mr-bot-30 { margin-bottom: 24px !important; } body.new-style-body .mr-bot-20 { margin-bottom: 16px !important; } body.new-style-body .site-btn.round { height: 50px; min-width: 150px; } /* ----------------------------------------------------------------------- Header ----------------------------------------------------------------------- */ body.new-style-body .header { top: 26px; } body.new-style-body .header-wr { height: 60px; padding-left: 34px; padding-right: 34px; } body.new-style-body .header-new-aside-btn { gap: 20px; font-size: 17px; } body.new-style-body .header-new-aside-btn .icon { width: 42px; height: 42px; } body.new-style-body .header.new-style .header-logo .logo img, body.new-style-body .header-logo .logo img { height: 45px; } /* ----------------------------------------------------------------------- Homepage: hero ----------------------------------------------------------------------- */ body.new-style-body .IndexTop { padding-top: 152px; } body.new-style-body .IndexTop .container.min-height { height: 496px; } body.new-style-body .IndexTopR { padding-right: 20px; } body.new-style-body .IndexTopR .logo { height: 64px; } body.new-style-body .IndexTopR .site-title { margin-top: 58px; } body.new-style-body .IndexTopR .site-text { margin-top: 22px; } body.new-style-body .IndexTopR .btns { gap: 0 24px; margin-top: 64px; } body.new-style-body .IndexTopR .site-btn { height: 50px; min-width: 150px; } body.new-style-body .IndexTopL { padding-top: 56px; } body.new-style-body .IndexTopL-Run { top: -190px; height: calc(100% + 225px); } body.new-style-body .IndexTopL-Run .col { width: calc((100% - 20px) / 2); } body.new-style-body .IndexTopL-Run .img { height: 237px; margin-top: 8px; margin-bottom: 8px; } body.new-style-body.dir-ltr .IndexTopR { padding-left: 20px; padding-right: 0; } body.new-style-body.dir-ltr .IndexTopR .site-title.large { font-size: 54px; margin-top: 32px; } body.new-style-body.dir-ltr .IndexTopR .btns { margin-top: 32px; } /* ----------------------------------------------------------------------- Homepage: projects / cards ----------------------------------------------------------------------- */ body.new-style-body .ProjectsResult { padding-top: 128px; } body.new-style-body .ProjectsResult .result.w100 { gap: 38px; } body.new-style-body .ProjectsResult .result.w100.count4, body.new-style-body .ProjectsResultNew .result.count4 { gap: 26px; } body.new-style-body .ProjectsResult .result.w100.count4 .ProjectTPLNew, body.new-style-body .ProjectsResultNew .result.count4 .ProjectTPLNew { width: calc((100% - 26px * 3) / 4); } body.new-style-body .ProjectsResultNew .result { gap: 38px; } body.new-style-body .ProjectTPLNew { width: calc((100% - 38px * 2) / 3); height: 432px; border-radius: 20px 20px 0 0; } body.new-style-body .ProjectTPLNew .photo-block { max-height: 366px; } body.new-style-body .ProjectTPLNew .hover-hidden:hover .photo-block { max-height: 400px; } body.new-style-body .ProjectTPLNew .img { border-radius: 20px; } body.new-style-body .ProjectTPLNew .name { font-size: 22px; margin-top: 18px; } body.new-style-body .ProjectTPL .name { font-size: 18px; margin-top: 8px; } /* Keep 16/14/12px project metadata unchanged. */ body.new-style-body .ProjectsResult .site-btn, body.new-style-body .blog-wr .site-btn, body.new-style-body .IndexBlog .view-all .site-btn { height: 48px; } /* ----------------------------------------------------------------------- Homepage: directions ----------------------------------------------------------------------- */ body.new-style-body .IndexDirections { padding-top: 88px; padding-bottom: 108px; } body.new-style-body .IndexDirectionB { padding: 40px; margin-bottom: 88px; border-radius: 24px; } body.new-style-body .IndexDirectionBDesc { padding-top: 20px; } body.new-style-body .IndexDirectionBDesc .site-text { margin-top: 44px; } body.new-style-body .IndexDirectionBDesc .site-btn { margin-top: 40px; height: 48px; } body.new-style-body .IndexDirectionsNew .container { gap: 24px; } body.new-style-body .IndexDirectionNewB { width: calc((100% - 24px * 2) / 3); height: 326px; border-radius: 16px; } body.new-style-body .IndexDirectionNewB:nth-child(1), body.new-style-body .IndexDirectionNewB:nth-child(2) { width: calc((100% - 24px) / 2); } body.new-style-body .IndexDirectionNewB:nth-child(1).tight, body.new-style-body .IndexDirectionNewB:nth-child(2).tight { width: calc(40% - 24px); } body.new-style-body .IndexDirectionNewB:nth-child(3).tight, body.new-style-body .IndexDirectionNewB:nth-child(4).tight, body.new-style-body .IndexDirectionNewB:nth-child(5).tight { width: calc((50% + 12px - 24px * 2) / 2); } body.new-style-body .IndexDirectionNewB-Info { padding: 24px; } /* ----------------------------------------------------------------------- Homepage: about / company numbers ----------------------------------------------------------------------- */ body.new-style-body .IndexAbout { padding-top: 88px; } body.new-style-body .IndexAbout .about-image-icon { width: 78px; height: 78px; top: -40px; } body.new-style-body .IndexAbout .about-image-icon img { width: 37px; height: 48px; } body.new-style-body .IndexAboutRow:nth-child(2) { margin-top: 84px; } body.new-style-body .IndexAboutRow:nth-child(2) .IndexAboutRowDesc { padding-top: 48px; } body.new-style-body .IndexAboutRowImg { height: 362px; border-radius: 22px; } body.new-style-body .IndexAboutRowDesc { margin-top: 40px; } body.new-style-body .IndexAboutRowDesc .col { width: calc((100% - 40px) / 2); } body.new-style-body .IndexAboutRowDesc .site-title { font-size: 54px; padding-right: 20px; } body.new-style-body.dir-ltr .IndexAboutRowDesc .site-title { padding-left: 20px; padding-right: 0; } body.new-style-body .IndexAboutRowDesc .site-title:after { width: 6px; } body.new-style-body .IndexAboutRowDesc .site-text { margin-top: 20px; } body.new-style-body .IndexAboutRowDesc .site-btn { margin-top: 50px; height: 50px; font-size: 18px; } body.new-style-body .IndexAboutRowDesc .advan { gap: 0 22px; margin-top: 64px; } body.new-style-body .IndexAboutRowDesc .advan li, body.new-style-body .IndexAboutNumber .advan li { font-size: 19px; } body.new-style-body .IndexAboutRowDesc .advan li b, body.new-style-body .IndexAboutNumber .advan li b { font-size: 54px; } body.new-style-body .IndexAboutNumber { margin-top: 88px; padding-top: 40px; padding-bottom: 40px; } /* ----------------------------------------------------------------------- Homepage: sticky story / history block ----------------------------------------------------------------------- */ body.new-style-body .IndexStickyLeft { padding: calc(6.4vw * 9 / 16) calc(4.8vw * 9 / 16); } body.new-style-body .IndexStickyLeft .title { font-size: clamp(38px, 4.8vw, 76px); } body.new-style-body .IndexStickyLeft .undertitle { font-size: clamp(16px, 1.13vw, 22px); margin-top: calc(2vw * 9 / 16); } body.new-style-body .IndexStickyList { padding-top: calc(9.5vw * 9 / 16); } body.new-style-body .IndexStickyList .IndexLogotypeWr .run { width: 168px; height: 112px; } body.new-style-body .IndexStickyListBox .listbox b { font-size: calc(7.2vw * 9 / 16); } body.new-style-body .IndexStickyListBox .listbox span { padding-top: calc(1.6vw * 9 / 16); margin-top: calc(2.4vw * 9 / 16); } body.new-style-body .IndexStickyListBox .listbox p { font-size: clamp(14px, .92vw, 18px); } body.new-style-body .IndexStickyRightOpen { padding: 2vw; gap: 1.6vw; } body.new-style-body .IndexStickyRightOpen span { font-size: clamp(16px, 1.36vw, 26px); } body.new-style-body:not(.dir-ltr) .IndexStickyLeft .title { font-size: calc(clamp(38px, 4.8vw, 76px) * 1.1); } body.new-style-body:not(.dir-ltr) .IndexStickyLeft .undertitle { font-size: calc(clamp(16px, 1.13vw, 22px) * 1.1); } body.new-style-body:not(.dir-ltr) .IndexStickyListBox .listbox p { font-size: calc(clamp(14px, .92vw, 18px) * 1.1); } body.new-style-body:not(.dir-ltr) .IndexStickyRightOpen span { font-size: calc(clamp(16px, 1.36vw, 26px) * 1.1); } /* ----------------------------------------------------------------------- Homepage: logo strip / team / blog ----------------------------------------------------------------------- */ body.new-style-body .IndexLogotypeWr .run { width: 168px; height: 112px; } body.new-style-body .about-team { padding-top: 132px; } body.new-style-body .about-team-undertitle { font-size: 23px; } body.new-style-body .about-team-title { font-size: 47px; } body.new-style-body .ProjectsTeam { padding-bottom: 258px; } body.new-style-body .IndexBlog .title-wr { margin-bottom: calc(7.2vw * 9 / 16); } body.new-style-body .IndexBlog .result { row-gap: 24px; } body.new-style-body .IndexBlog .view-all, body.new-style-body .IndexBlog .pagination { margin-top: calc(3.2vw * 9 / 16); } /* ----------------------------------------------------------------------- Homepage: banner ----------------------------------------------------------------------- */ body.new-style-body .IndexBanner { padding-top: 160px; padding-bottom: 160px; } body.new-style-body .IndexBannerInner { padding-top: 92px; padding-bottom: 84px; } body.new-style-body .IndexBannerR .site-btn { margin-top: 40px; height: 50px; } body.new-style-body .IndexBannerL { gap: 0 24px; } body.new-style-body .IndexBannerL .img { top: -152px; width: calc((100% - 24px) / 2); height: 346px; border-radius: 20px; } body.new-style-body .IndexBannerL .img:nth-child(2) { top: 16px; } /* ----------------------------------------------------------------------- Footer ----------------------------------------------------------------------- */ body.new-style-body .footer-new { padding-top: 64px; padding-bottom: 64px; } body.new-style-body .footer-new .footer-new-left-top, body.new-style-body .footer-new .footer-new-left-bot, body.new-style-body .footer-new .footer-new-right-bot, body.new-style-body .footer-new .footer-new-right-top { padding-top: 24px; padding-bottom: 24px; } } /* ========================================================================== 1241px - 1799px ========================================================================== */ @media only screen and (min-width: 1241px) and (max-width: 1799px) { /* ----------------------------------------------------------------------- Global typography ----------------------------------------------------------------------- */ body.new-style-body { font-size: 18px; } body.new-style-body .section-title { font-size: 24px; margin-bottom: 24px; } body.new-style-body .site-title { font-size: 34px; letter-spacing: -1.4px; } body.new-style-body .site-title.mini { font-size: 22px; margin-bottom: 30px; } body.new-style-body .site-title.large { font-size: 48px; } body.new-style-body .uptitle { font-size: 24px; } /* 18px remains intentionally readable. */ body.new-style-body .site-text { font-size: 18px; } /* Existing 16px text is intentionally not reduced. */ body.new-style-body .site-text.min { font-size: 16px; } body.new-style-body .site-text.max { font-size: 18px; } body.new-style-body .text h1, body.new-style-body .text h2, body.new-style-body .text h3, body.new-style-body .text h4, body.new-style-body .text h5, body.new-style-body .text h6 { font-size: 20px; } /* Normal text is already 18px in this breakpoint - keep it. */ body.new-style-body .text p, body.new-style-body .text span, body.new-style-body .text li { font-size: 18px; } body.new-style-body .seo-text { padding-top: 36px; padding-bottom: 36px; } /* ----------------------------------------------------------------------- Global spacing helpers - approximately -20% ----------------------------------------------------------------------- */ body.new-style-body .section-padding { padding-top: 64px; padding-bottom: 64px; } body.new-style-body .mr-top-100 { margin-top: 80px !important; } body.new-style-body .mr-top-70 { margin-top: 56px !important; } body.new-style-body .mr-top-50 { margin-top: 40px !important; } body.new-style-body .mr-top-40 { margin-top: 32px !important; } body.new-style-body .mr-top-30 { margin-top: 24px !important; } body.new-style-body .mr-top-20 { margin-top: 16px !important; } body.new-style-body .mr-bot-100 { margin-bottom: 80px !important; } body.new-style-body .mr-bot-70 { margin-bottom: 56px !important; } body.new-style-body .mr-bot-50 { margin-bottom: 40px !important; } body.new-style-body .mr-bot-40 { margin-bottom: 32px !important; } body.new-style-body .mr-bot-30 { margin-bottom: 24px !important; } body.new-style-body .mr-bot-20 { margin-bottom: 16px !important; } /* Header: keep navigation type at its existing 16px, compact the shell. */ body.new-style-body .header { top: 20px; } body.new-style-body .header-wr { height: 60px; padding-left: 16px; padding-right: 16px; } body.new-style-body .header-new-aside-btn { gap: 18px; } body.new-style-body .header-new-aside-btn .icon { width: 42px; height: 42px; } body.new-style-body .header.new-style .header-logo .logo img, body.new-style-body .header-logo .logo img { height: 45px; } /* ----------------------------------------------------------------------- Homepage: hero ----------------------------------------------------------------------- */ body.new-style-body .IndexTop { padding-top: 116px; } body.new-style-body .IndexTop .container.min-height { height: 390px; } body.new-style-body .IndexTopR .logo { height: 50px; } body.new-style-body .IndexTopR .site-title { margin-top: 42px; } body.new-style-body .IndexTopR .site-text { margin-top: 16px; } body.new-style-body .IndexTopR .btns { gap: 0 16px; margin-top: 48px; } body.new-style-body .IndexTopR .site-btn { height: 48px; min-width: 145px; } body.new-style-body .IndexTopL-Run .img { height: 190px; margin-top: 6px; margin-bottom: 6px; } /* English/LTR hero has a dedicated large-title rule in index.css. */ body.new-style-body.dir-ltr .IndexTopR .site-title.large { font-size: 44px; margin-top: 24px; } body.new-style-body.dir-ltr .IndexTopR .btns { margin-top: 24px; } /* ----------------------------------------------------------------------- Homepage: projects / cards ----------------------------------------------------------------------- */ body.new-style-body .ProjectsResult { padding-top: 128px; } body.new-style-body .ProjectsResult .result { } body.new-style-body .ProjectsResult .result.w100 { gap: 34px; } body.new-style-body .ProjectsResult .result.w100.count4 { gap: 22px; } body.new-style-body .ProjectsResult .result.w100.count4 .ProjectTPLNew { height: 330px; } body.new-style-body .ProjectsResult .result.w100.count4 .ProjectTPLNew .photo-block { height: 280px; } body.new-style-body .ProjectTPL .name { font-size: 18px; margin-top: 8px; } body.new-style-body .ProjectsResultNew .result { gap: 34px; } body.new-style-body .ProjectTPLNew { height: 420px; } body.new-style-body .ProjectTPLNew .photo-block { max-height: 355px; } body.new-style-body .ProjectTPLNew .hover-hidden:hover .photo-block { max-height: 390px; } body.new-style-body .ProjectTPLNew .name { font-size: 21px; margin-top: 16px; } /* 16/14/12px metadata in project cards is intentionally left unchanged. */ body.new-style-body .ProjectsResult .site-btn, body.new-style-body .blog-wr .site-btn { height: 48px; } /* ----------------------------------------------------------------------- Homepage: directions ----------------------------------------------------------------------- */ body.new-style-body .IndexDirections { padding-top: 66px; padding-bottom: 80px; } body.new-style-body .IndexDirectionB { padding: 30px; margin-bottom: 66px; } body.new-style-body .IndexDirectionBDesc { padding-top: 15px; } body.new-style-body .IndexDirectionBDesc .site-text { margin-top: 34px; } body.new-style-body .IndexDirectionBDesc .site-btn { margin-top: 32px; height: 48px; } body.new-style-body .IndexDirectionsNew .container { gap: 19px; } body.new-style-body .IndexDirectionNewB { height: 320px; } body.new-style-body .IndexDirectionNewB-Info { padding: 20px; } /* ----------------------------------------------------------------------- Homepage: about / company numbers ----------------------------------------------------------------------- */ body.new-style-body .IndexAbout { padding-top: 70px; } body.new-style-body .IndexAboutRow:nth-child(2) { margin-top: 67px; } body.new-style-body .IndexAboutRow:nth-child(2) .IndexAboutRowDesc { padding-top: 38px; } body.new-style-body .IndexAboutRowImg { height: 300px; } body.new-style-body .IndexAboutRowDesc { margin-top: 32px; } body.new-style-body .IndexAboutRowDesc .site-title { font-size: 43px; } body.new-style-body .IndexAboutRowDesc .site-text { margin-top: 16px; } body.new-style-body .IndexAboutRowDesc .site-btn { margin-top: 40px; height: 48px; font-size: 17px; } body.new-style-body .IndexAboutRowDesc .advan { margin-top: 50px; } body.new-style-body .IndexAboutRowDesc .advan li, body.new-style-body .IndexAboutNumber .advan li { font-size: 17px; } body.new-style-body .IndexAboutRowDesc .advan li b, body.new-style-body .IndexAboutNumber .advan li b { font-size: 43px; } body.new-style-body .IndexAboutNumber { margin-top: 70px; padding-top: 32px; padding-bottom: 32px; } /* ----------------------------------------------------------------------- Homepage: sticky story / history block ----------------------------------------------------------------------- */ body.new-style-body .IndexStickyLeft { padding: calc(6.4vw * 9 / 16) calc(4.8vw * 9 / 16); } body.new-style-body .IndexStickyLeft .title { font-size: clamp(38px, 4.8vw, 76px); } body.new-style-body .IndexStickyLeft .undertitle { margin-top: calc(2vw * 9 / 16); } body.new-style-body .IndexStickyList { padding-top: calc(9.5vw * 9 / 16); } body.new-style-body .IndexStickyListBox .listbox b { font-size: calc(7.2vw * 9 / 16); } body.new-style-body .IndexStickyListBox .listbox span { padding-top: calc(1.6vw * 9 / 16); margin-top: calc(2.4vw * 9 / 16); } body.new-style-body .IndexStickyRightOpen { padding: 2vw; gap: 1.6vw; } body.new-style-body:not(.dir-ltr) .IndexStickyLeft .title { font-size: calc(clamp(38px, 4.8vw, 76px) * 1.1); } /* ----------------------------------------------------------------------- Homepage: logo strip / team / blog ----------------------------------------------------------------------- */ body.new-style-body .IndexLogotypeWr .run, body.new-style-body .IndexStickyList .IndexLogotypeWr .run { width: 170px; height: 115px; } body.new-style-body .about-team { padding-top: 132px; } body.new-style-body .about-team-undertitle { font-size: 23px; } body.new-style-body .about-team-title { font-size: 47px; } body.new-style-body .ProjectsTeam { padding-bottom: 258px; } body.new-style-body .IndexBlog .title-wr { margin-bottom: calc(7.2vw * 9 / 16); } body.new-style-body .IndexBlog .result { } body.new-style-body .IndexBlog .view-all, body.new-style-body .IndexBlog .pagination { margin-top: calc(3.2vw * 9 / 16); } /* ----------------------------------------------------------------------- Homepage: banner ----------------------------------------------------------------------- */ body.new-style-body .IndexBanner { padding-top: 128px; padding-bottom: 128px; } body.new-style-body .IndexBannerInner { padding-top: 68px; padding-bottom: 64px; } body.new-style-body .IndexBannerR .site-btn { margin-top: 32px; height: 48px; } body.new-style-body .IndexBannerL .img { top: -112px; height: 270px; } body.new-style-body .IndexBannerL .img:nth-child(2) { top: 13px; } /* ----------------------------------------------------------------------- New footer: mild compaction only ----------------------------------------------------------------------- */ body.new-style-body .footer-new { padding-top: 56px; padding-bottom: 56px; } body.new-style-body .footer-new .footer-new-left-top, body.new-style-body .footer-new .footer-new-left-bot, body.new-style-body .footer-new .footer-new-right-bot, body.new-style-body .footer-new .footer-new-right-top { padding-top: 22px; padding-bottom: 22px; } } /* Utility spacing needs separate values because the original CSS already changes them at <= 1440px. */ @media only screen and (min-width: 1241px) and (max-width: 1440px) { body.new-style-body .pd-top-100 { padding-top: 56px !important; } body.new-style-body .pd-bot-100 { padding-bottom: 56px !important; } body.new-style-body .pd-top-120 { padding-top: 80px; } body.new-style-body .pd-bot-120 { padding-bottom: 80px; } body.new-style-body .pd-top-70 { padding-top: 48px !important; } body.new-style-body .pd-bot-70 { padding-bottom: 48px !important; } } @media only screen and (min-width: 1441px) and (max-width: 1799px) { body.new-style-body .pd-top-100 { padding-top: 80px !important; } body.new-style-body .pd-bot-100 { padding-bottom: 80px !important; } body.new-style-body .pd-top-120 { padding-top: 96px; } body.new-style-body .pd-bot-120 { padding-bottom: 96px; } body.new-style-body .pd-top-70 { padding-top: 56px !important; } body.new-style-body .pd-bot-70 { padding-bottom: 56px !important; } } /* ========================================================================== 1024px - 1240px ========================================================================== */ @media only screen and (min-width: 1024px) and (max-width: 1240px) { body.new-style-body { font-size: 18px; } /* ----------------------------------------------------------------------- Global typography ----------------------------------------------------------------------- */ body.new-style-body .section-title { font-size: 24px; margin-bottom: 22px; } body.new-style-body .site-title { font-size: 32px; letter-spacing: -1.2px; } body.new-style-body .site-title.mini { font-size: 21px; margin-bottom: 28px; } body.new-style-body .site-title.large { font-size: 48px; } body.new-style-body .uptitle { font-size: 23px; } body.new-style-body .site-text { font-size: 17px; } body.new-style-body .site-text.min { font-size: 16px; } body.new-style-body .site-text.max { font-size: 18px; } body.new-style-body .text h1, body.new-style-body .text h2, body.new-style-body .text h3, body.new-style-body .text h4, body.new-style-body .text h5, body.new-style-body .text h6 { font-size: 20px; } /* Existing 18px body copy only gets a small reduction on narrower screens. */ body.new-style-body .text p, body.new-style-body .text span, body.new-style-body .text li { font-size: 17px; } body.new-style-body .seo-text { padding-top: 36px; padding-bottom: 36px; } /* ----------------------------------------------------------------------- Global spacing helpers ----------------------------------------------------------------------- */ body.new-style-body .section-padding { padding-top: 56px; padding-bottom: 56px; } body.new-style-body .pd-top-100 { padding-top: 56px !important; } body.new-style-body .pd-bot-100 { padding-bottom: 56px !important; } body.new-style-body .pd-top-120 { padding-top: 64px; } body.new-style-body .pd-bot-120 { padding-bottom: 64px; } body.new-style-body .pd-top-70 { padding-top: 48px !important; } body.new-style-body .pd-bot-70 { padding-bottom: 48px !important; } body.new-style-body .mr-top-100 { margin-top: 80px !important; } body.new-style-body .mr-top-70 { margin-top: 56px !important; } body.new-style-body .mr-top-50 { margin-top: 40px !important; } body.new-style-body .mr-top-40 { margin-top: 32px !important; } body.new-style-body .mr-top-30 { margin-top: 24px !important; } body.new-style-body .mr-top-20 { margin-top: 16px !important; } body.new-style-body .mr-bot-100 { margin-bottom: 80px !important; } body.new-style-body .mr-bot-70 { margin-bottom: 56px !important; } body.new-style-body .mr-bot-50 { margin-bottom: 40px !important; } body.new-style-body .mr-bot-40 { margin-bottom: 32px !important; } body.new-style-body .mr-bot-30 { margin-bottom: 24px !important; } body.new-style-body .mr-bot-20 { margin-bottom: 16px !important; } /* ----------------------------------------------------------------------- Header ----------------------------------------------------------------------- */ body.new-style-body .header { top: 18px; } body.new-style-body .header-wr { height: 58px; padding-left: 8px; padding-right: 8px; } body.new-style-body .header-new-aside-btn { gap: 15px; font-size: 17px; } body.new-style-body .header-new-aside-btn .icon { width: 40px; height: 40px; } body.new-style-body .header.new-style .header-logo .logo img, body.new-style-body .header-logo .logo img { height: 42px; } /* ----------------------------------------------------------------------- Homepage: hero ----------------------------------------------------------------------- */ body.new-style-body .IndexTop { padding-top: 112px; } body.new-style-body .IndexTop .container.min-height { height: 370px; } body.new-style-body .IndexTopR .logo { height: 48px; } body.new-style-body .IndexTopR .site-title { margin-top: 40px; } body.new-style-body .IndexTopR .site-text { margin-top: 16px; } body.new-style-body .IndexTopR .btns { gap: 0 15px; margin-top: 44px; } body.new-style-body .IndexTopR .site-btn { height: 46px; min-width: 140px; } body.new-style-body .IndexTopL-Run .img { height: 178px; margin-top: 6px; margin-bottom: 6px; } body.new-style-body.dir-ltr .IndexTopR .site-title.large { font-size: 43px; margin-top: 24px; } body.new-style-body.dir-ltr .IndexTopR .btns { margin-top: 24px; } /* ----------------------------------------------------------------------- Homepage: projects ----------------------------------------------------------------------- */ body.new-style-body .ProjectsResult { padding-top: 104px; } body.new-style-body .ProjectsResult .result { gap: 20px 10px; } body.new-style-body .ProjectsResult .result.w100 { gap: 27px; } body.new-style-body .ProjectsResult .result.w100.count4 { gap: 12px; } body.new-style-body .ProjectsResult .result.w100.count4 .ProjectTPLNew { height: 250px; } body.new-style-body .ProjectsResult .result.w100.count4 .ProjectTPLNew .photo-block { height: 212px; } body.new-style-body .ProjectTPL .name { font-size: 18px; margin-top: 7px; } body.new-style-body .ProjectsResultNew .result { gap: 27px; } body.new-style-body .ProjectTPLNew { height: 340px; } body.new-style-body .ProjectTPLNew .photo-block { max-height: 290px; } body.new-style-body .ProjectTPLNew .hover-hidden:hover .photo-block { max-height: 315px; } body.new-style-body .ProjectTPLNew .name { font-size: 20px; margin-top: 13px; } /* Existing city/meta sizes (14/13/11px) stay untouched. */ body.new-style-body .ProjectsResult .site-btn, body.new-style-body .blog-wr .site-btn { height: 46px; } /* ----------------------------------------------------------------------- Homepage: directions ----------------------------------------------------------------------- */ body.new-style-body .IndexDirections { padding-top: 66px; padding-bottom: 80px; } body.new-style-body .IndexDirectionB { padding: 30px; margin-bottom: 66px; } body.new-style-body .IndexDirectionBDesc { padding-top: 15px; } body.new-style-body .IndexDirectionBDesc .site-text { margin-top: 34px; } body.new-style-body .IndexDirectionBDesc .site-btn { margin-top: 32px; height: 46px; } /* This block is already compact at <=1240, reduce it more cautiously. */ body.new-style-body .IndexDirectionsNew .container { gap: 12px; } body.new-style-body .IndexDirectionNewB { height: 270px; } /* Original padding is 15px here; leave it readable. */ body.new-style-body .IndexDirectionNewB-Info { padding: 15px; } /* ----------------------------------------------------------------------- Homepage: about / numbers ----------------------------------------------------------------------- */ body.new-style-body .IndexAbout { padding-top: 70px; } body.new-style-body .IndexAboutRow:nth-child(2) { margin-top: 67px; } body.new-style-body .IndexAboutRow:nth-child(2) .IndexAboutRowDesc { padding-top: 38px; } body.new-style-body .IndexAboutRowImg { height: 300px; } body.new-style-body .IndexAboutRowDesc { margin-top: 32px; } body.new-style-body .IndexAboutRowDesc .site-title { font-size: 42px; } body.new-style-body .IndexAboutRowDesc .site-text { margin-top: 16px; } body.new-style-body .IndexAboutRowDesc .site-btn { margin-top: 40px; height: 46px; font-size: 17px; } body.new-style-body .IndexAboutRowDesc .advan { margin-top: 50px; } body.new-style-body .IndexAboutRowDesc .advan li, body.new-style-body .IndexAboutNumber .advan li { font-size: 17px; } body.new-style-body .IndexAboutRowDesc .advan li b, body.new-style-body .IndexAboutNumber .advan li b { font-size: 42px; } body.new-style-body .IndexAboutNumber { margin-top: 70px; padding-top: 32px; padding-bottom: 32px; } /* ----------------------------------------------------------------------- Homepage: sticky story / history block ----------------------------------------------------------------------- */ body.new-style-body .IndexStickyLeft { padding: calc(6.4vw * 9 / 16) calc(4.8vw * 9 / 16); } body.new-style-body .IndexStickyLeft .title { font-size: clamp(36px, 4.6vw, 68px); } body.new-style-body .IndexStickyLeft .undertitle { margin-top: calc(2vw * 9 / 16); } body.new-style-body .IndexStickyList { padding-top: calc(9.5vw * 9 / 16); } body.new-style-body .IndexStickyListBox .listbox b { font-size: calc(7.2vw * 9 / 16); } body.new-style-body .IndexStickyListBox .listbox span { padding-top: calc(1.6vw * 9 / 16); margin-top: calc(2.4vw * 9 / 16); } body.new-style-body .IndexStickyRightOpen { padding: 2vw; gap: 1.6vw; } body.new-style-body:not(.dir-ltr) .IndexStickyLeft .title { font-size: calc(clamp(36px, 4.6vw, 68px) * 1.1); } /* ----------------------------------------------------------------------- Homepage: logos / team / blog ----------------------------------------------------------------------- */ body.new-style-body .IndexLogotypeWr .run, body.new-style-body .IndexStickyList .IndexLogotypeWr .run { width: 165px; height: 112px; } body.new-style-body .about-team { padding-top: 96px; } body.new-style-body .about-team-undertitle { font-size: 20px; } body.new-style-body .about-team-title { font-size: 42px; } body.new-style-body .ProjectsTeam { padding-bottom: 200px; } body.new-style-body .IndexBlog .title-wr { margin-bottom: calc(7.2vw * 9 / 16); } body.new-style-body .IndexBlog .view-all, body.new-style-body .IndexBlog .pagination { margin-top: calc(3.2vw * 9 / 16); } /* ----------------------------------------------------------------------- Homepage: banner ----------------------------------------------------------------------- */ body.new-style-body .IndexBanner { padding-top: 128px; padding-bottom: 128px; } body.new-style-body .IndexBannerInner { padding-top: 68px; padding-bottom: 64px; } body.new-style-body .IndexBannerR .site-btn { margin-top: 32px; height: 46px; } body.new-style-body .IndexBannerL .img { top: -112px; height: 270px; } body.new-style-body .IndexBannerL .img:nth-child(2) { top: 13px; } /* ----------------------------------------------------------------------- Footer ----------------------------------------------------------------------- */ body.new-style-body .footer-new { padding-top: 44px; padding-bottom: 56px; } body.new-style-body .footer-new .footer-new-left-top, body.new-style-body .footer-new .footer-new-left-bot, body.new-style-body .footer-new .footer-new-right-bot, body.new-style-body .footer-new .footer-new-right-top { padding-top: 16px; padding-bottom: 16px; } } /* ========================================================================== Extra vertical compaction after visual review ========================================================================== */ /* 1920 desktop */ @media only screen and (min-width: 1800px) { /* Проекты на главной */ body.new-style-body .ProjectsResultNew.pd-top-100 { padding-top: 60px !important; } body.new-style-body .ProjectsResultNew.pd-bot-100 { padding-bottom: 60px !important; } /* Направления */ body.new-style-body .IndexDirectionsNew.pd-top-100 { padding-top: 55px !important; } body.new-style-body .IndexDirectionsNew.pd-bot-100 { padding-bottom: 60px !important; } /* Команда */ body.new-style-body .about-team { padding-top: 90px; } body.new-style-body .ProjectsTeam { padding-bottom: 170px; } /* Заголовок -> контент блока новостей */ body.new-style-body .IndexBlog .title-wr { margin-bottom: calc(5vw * 9 / 16); } /* Внутри истории чуть компактнее, но сам большой блок не уменьшаем */ body.new-style-body .IndexStickyLeft { padding-top: calc(5.4vw * 9 / 16); padding-bottom: calc(5.4vw * 9 / 16); } body.new-style-body .IndexStickyList { padding-top: calc(8vw * 9 / 16); } } /* 1241–1799 */ @media only screen and (min-width: 1241px) and (max-width: 1799px) { body.new-style-body .ProjectsResultNew.pd-top-100 { padding-top: 50px !important; } body.new-style-body .ProjectsResultNew.pd-bot-100 { padding-bottom: 50px !important; } body.new-style-body .IndexDirectionsNew.pd-top-100 { padding-top: 50px !important; } body.new-style-body .IndexDirectionsNew.pd-bot-100 { padding-bottom: 55px !important; } body.new-style-body .about-team { padding-top: 80px; } body.new-style-body .ProjectsTeam { padding-bottom: 150px; } body.new-style-body .IndexBlog .title-wr { margin-bottom: calc(5vw * 9 / 16); } body.new-style-body .IndexStickyList { padding-top: calc(8vw * 9 / 16); } } /* 1024–1240 */ @media only screen and (min-width: 1024px) and (max-width: 1240px) { body.new-style-body .ProjectsResultNew.pd-top-100 { padding-top: 45px !important; } body.new-style-body .ProjectsResultNew.pd-bot-100 { padding-bottom: 45px !important; } body.new-style-body .IndexDirectionsNew.pd-top-100 { padding-top: 45px !important; } body.new-style-body .IndexDirectionsNew.pd-bot-100 { padding-bottom: 45px !important; } body.new-style-body .about-team { padding-top: 70px; } body.new-style-body .ProjectsTeam { padding-bottom: 120px; } body.new-style-body .IndexBlog .title-wr { margin-bottom: 35px; } }