/* * О НАС ПИШУТ — стили страницы mos-auto.ru * Подключить в шаблона MODX: * * * Шрифты Google Fonts подгружаются через @import ниже. * Если Montserrat / Oswald / PT Sans уже есть в шаблоне — строки @import можно убрать. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Oswald:wght@500;600;700&family=PT+Sans:wght@400;700&display=swap'); /* ================================================================ О НАС ПИШУТ — изолированные стили фрагмента Все правила скоплены в .ma-press-page, ничего глобального. ================================================================ */ /* ---------- переменные + базовые свойства контейнера ---------- */ .ma-press-page { /* палитра */ --map-brand: #F25619; --map-brand-600:#DA4710; --map-brand-700:#B83A0C; --map-brand-50: #FFF1EA; --map-brand-100:#FFE0CF; --map-ink: #161616; --map-ink-soft: #3F4651; --map-muted: #6B7079; --map-muted-2: #9099A4; --map-line: #E5E7EB; --map-line-2: #EFF1F4; --map-bg: #FFFFFF; --map-bg-soft: #F7F8FA; --map-bg-warm: #FBF8F5; --map-dark: #161616; --map-dark-2: #1F2227; --map-gold: #F2B544; /* типографика */ --map-font-head: 'Montserrat', system-ui, sans-serif; --map-font-body: 'PT Sans', system-ui, sans-serif; --map-font-num: 'Oswald', system-ui, sans-serif; /* тени */ --map-shadow-1: 0 1px 2px rgba(22,22,22,.04), 0 1px 3px rgba(22,22,22,.05); --map-shadow-2: 0 8px 22px rgba(22,22,22,.08); --map-shadow-3: 0 20px 44px rgba(22,22,22,.14); /* радиусы */ --map-r-sm: 4px; --map-r-md: 8px; --map-r-lg: 14px; --map-r-xl: 22px; --map-ease: cubic-bezier(.4, 0, .2, 1); /* сброс наследования от шаблона */ font-family: var(--map-font-body); color: var(--map-ink); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; display: block; width: 100%; } /* локальный сброс box-sizing только внутри фрагмента */ .ma-press-page *, .ma-press-page *::before, .ma-press-page *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ссылки внутри фрагмента */ .ma-press-page a { color: inherit; text-decoration: none; } /* центрирующая обёртка */ .ma-press-page .ma-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; } /* ================================================================ HERO ================================================================ */ .ma-press-page .ma-hero { background: #fff; position: relative; overflow: hidden; border-bottom: 1px solid var(--map-line); } .ma-press-page .ma-hero .ma-wrap { position: relative; z-index: 2; padding: 70px 28px 78px; } .ma-press-page .ma-hero::before { content: ""; position: absolute; right: -120px; top: -40px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(242,86,25,.10), transparent 65%); z-index: 1; pointer-events: none; } .ma-press-page .ma-hero::after { content: ""; position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(var(--map-line-2) 1px, transparent 1px), linear-gradient(90deg, var(--map-line-2) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); pointer-events: none; z-index: 0; } /* хлебные крошки */ .ma-press-page .ma-crumbs { font-size: 13px; color: var(--map-muted); display: flex; align-items: center; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; } .ma-press-page .ma-crumbs a { color: var(--map-muted); } .ma-press-page .ma-crumbs a:hover { color: var(--map-brand); } .ma-press-page .ma-crumbs span { color: var(--map-ink); font-weight: 700; } .ma-press-page .ma-crumbs svg { width: 11px; height: 11px; flex: none; } /* кикер-бейдж */ .ma-press-page .ma-kicker { display: inline-flex; align-items: center; gap: 9px; background: var(--map-brand-50); color: var(--map-brand-700); padding: 8px 14px; border-radius: 999px; font-family: var(--map-font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; } .ma-press-page .ma-kicker svg { width: 14px; height: 14px; flex: none; } /* заголовок H1 */ .ma-press-page h1.ma-hero-title { font-family: var(--map-font-head); font-weight: 900; font-size: clamp(44px, 6.8vw, 80px); line-height: .98; letter-spacing: -.035em; margin: 22px 0 0; color: var(--map-ink); text-wrap: balance; } .ma-press-page h1.ma-hero-title .ma-em { color: var(--map-brand); } .ma-press-page .ma-hero-sub { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; color: var(--map-ink-soft); max-width: 640px; margin-top: 22px; } .ma-press-page .ma-hero-sub b { color: var(--map-ink); } .ma-press-page .ma-hero-note { font-size: 15.5px; color: var(--map-muted); max-width: 640px; margin-top: 14px; } /* счётчики статистики */ .ma-press-page .ma-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; background: #fff; border: 1px solid var(--map-line); border-radius: var(--map-r-lg); overflow: hidden; box-shadow: var(--map-shadow-1); } .ma-press-page .ma-stat { padding: 26px 28px; border-right: 1px solid var(--map-line); position: relative; } .ma-press-page .ma-stat:last-child { border-right: none; } .ma-press-page .ma-stat .ma-num { font-family: var(--map-font-num); font-weight: 600; font-size: clamp(38px, 4.8vw, 54px); line-height: 1; color: var(--map-brand); letter-spacing: .01em; display: flex; align-items: baseline; gap: 2px; } .ma-press-page .ma-stat .ma-num .pre { color: var(--map-ink); font-size: .5em; font-weight: 500; margin-right: 6px; } .ma-press-page .ma-stat .ma-num .suf { color: var(--map-brand); } .ma-press-page .ma-stat .ma-lbl { font-family: var(--map-font-body); font-size: 14.5px; color: var(--map-muted); margin-top: 10px; line-height: 1.42; max-width: 230px; } .ma-press-page .ma-stat .ma-lbl b { color: var(--map-ink); font-weight: 700; } .ma-press-page .ma-stat.ma-text .ma-num { font-family: var(--map-font-head); font-weight: 800; font-size: clamp(22px, 2vw, 27px); line-height: 1.1; color: var(--map-ink); letter-spacing: -.02em; } .ma-press-page .ma-stat.ma-text .ma-num .ma-em { color: var(--map-brand); } /* ================================================================ INTRO ================================================================ */ .ma-press-page .ma-intro { background: var(--map-bg-soft); border-bottom: 1px solid var(--map-line); } .ma-press-page .ma-intro .ma-wrap { display: flex; align-items: flex-start; gap: 30px; padding: 40px 28px; } .ma-press-page .ma-intro .ma-tick { flex: none; width: 50px; height: 50px; border-radius: 12px; background: var(--map-brand); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(242,86,25,.28); } .ma-press-page .ma-intro .ma-tick svg { width: 26px; height: 26px; } .ma-press-page .ma-intro-body { max-width: 900px; } .ma-press-page .ma-intro-body h2 { font-family: var(--map-font-head); font-weight: 800; font-size: clamp(22px, 2.4vw, 27px); color: var(--map-ink); letter-spacing: -.02em; line-height: 1.18; margin-bottom: 10px; } .ma-press-page .ma-intro-body p { font-size: 17px; color: var(--map-ink-soft); line-height: 1.6; } .ma-press-page .ma-intro-body p b { color: var(--map-ink); font-weight: 700; } /* ================================================================ СЕКЦИИ С ПУБЛИКАЦИЯМИ ================================================================ */ .ma-press-page main.ma-main { padding: 14px 0 0; } .ma-press-page .ma-rubric { padding: 64px 0 20px; border-bottom: 1px solid var(--map-line-2); } .ma-press-page .ma-rubric:last-of-type { border-bottom: none; } .ma-press-page .ma-rubric-head { display: flex; align-items: flex-start; gap: 22px; padding-bottom: 28px; margin-bottom: 32px; border-bottom: 3px solid var(--map-ink); position: relative; } .ma-press-page .ma-rubric-head::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 120px; height: 3px; background: var(--map-brand); } .ma-press-page .ma-rubric-ico { flex: none; width: 58px; height: 58px; border-radius: 11px; background: var(--map-ink); color: var(--map-brand); display: grid; place-items: center; } .ma-press-page .ma-rubric-ico svg { width: 30px; height: 30px; } .ma-press-page .ma-rubric-titles { flex: 1; min-width: 0; padding-top: 2px; } .ma-press-page .ma-rubric-kicker { font-family: var(--map-font-head); font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--map-brand); } .ma-press-page .ma-rubric-title { font-family: var(--map-font-head); font-weight: 800; font-size: clamp(25px, 3.2vw, 34px); color: var(--map-ink); letter-spacing: -.025em; line-height: 1.1; margin-top: 8px; text-wrap: balance; } .ma-press-page .ma-rubric-desc { font-size: 15.5px; color: var(--map-muted); margin-top: 8px; } .ma-press-page .ma-rubric-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 11px; padding-top: 4px; } .ma-press-page .ma-badge-auth { display: inline-flex; align-items: center; gap: 7px; background: var(--map-brand); color: #fff; font-family: var(--map-font-head); font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; box-shadow: 0 4px 12px rgba(242,86,25,.28); } .ma-press-page .ma-badge-auth svg { width: 14px; height: 14px; flex: none; } .ma-press-page .ma-rubric-count { font-family: var(--map-font-head); font-size: 13px; color: var(--map-muted); letter-spacing: .02em; font-weight: 600; } .ma-press-page .ma-rubric-count b { color: var(--map-ink); font-family: var(--map-font-num); font-weight: 600; font-size: 17px; } /* грид карточек */ .ma-press-page .ma-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ma-press-page .ma-card { position: relative; background: #fff; border: 1px solid var(--map-line); border-radius: var(--map-r-md); padding: 20px 20px 18px; display: flex; flex-direction: column; transition: transform .2s var(--map-ease), box-shadow .2s var(--map-ease), border-color .2s var(--map-ease); opacity: 0; transform: translateY(14px); } .ma-press-page .ma-card.in { opacity: 1; transform: none; } .ma-press-page .ma-card:hover { transform: translateY(-3px); box-shadow: var(--map-shadow-2); border-color: var(--map-brand); } .ma-press-page .ma-card-top { display: flex; align-items: center; gap: 13px; } .ma-press-page .ma-fav { flex: none; position: relative; width: 48px; height: 48px; border-radius: 9px; background: var(--map-bg-soft); border: 1px solid var(--map-line); display: grid; place-items: center; overflow: hidden; } .ma-press-page .ma-fav .ma-letter { font-family: var(--map-font-head); font-weight: 800; font-size: 20px; color: var(--map-ink); text-transform: uppercase; } .ma-press-page .ma-fav img { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; object-fit: contain; background: #fff; } .ma-press-page .ma-card-dom { min-width: 0; flex: 1; } .ma-press-page .ma-card-domain { font-family: var(--map-font-head); font-weight: 700; font-size: 17.5px; color: var(--map-ink); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ma-press-page .ma-card-zone { font-size: 12px; color: var(--map-muted-2); margin-top: 2px; display: flex; align-items: center; gap: 6px; font-family: var(--map-font-head); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .ma-press-page .ma-card-zone svg { width: 11px; height: 11px; flex: none; } .ma-press-page .ma-card-mid { display: flex; align-items: center; gap: 10px; margin-top: 16px; } .ma-press-page .ma-iks { display: inline-flex; align-items: baseline; gap: 6px; background: var(--map-bg-soft); border: 1px solid var(--map-line); border-radius: 999px; padding: 6px 13px; white-space: nowrap; } .ma-press-page .ma-iks .k { font-family: var(--map-font-head); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--map-muted); } .ma-press-page .ma-iks .v { font-family: var(--map-font-num); font-weight: 600; font-size: 16px; color: var(--map-ink); letter-spacing: .02em; } .ma-press-page .ma-iks.high { background: var(--map-brand); border-color: var(--map-brand); } .ma-press-page .ma-iks.high .k { color: rgba(255,255,255,.85); } .ma-press-page .ma-iks.high .v { color: #fff; } .ma-press-page .ma-iks-bar { flex: 1; height: 5px; border-radius: 5px; background: var(--map-line-2); overflow: hidden; min-width: 30px; } .ma-press-page .ma-iks-bar i { display: block; height: 100%; border-radius: 5px; background: var(--map-brand); width: 0; transition: width .9s var(--map-ease); } .ma-press-page .ma-card-cta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--map-line-2); display: flex; align-items: center; justify-content: space-between; } .ma-press-page .ma-read { display: inline-flex; align-items: center; gap: 8px; font-family: var(--map-font-head); font-weight: 700; font-size: 14px; color: var(--map-ink); transition: color .15s var(--map-ease); } .ma-press-page .ma-read svg { width: 16px; height: 16px; flex: none; transition: transform .15s var(--map-ease); } .ma-press-page .ma-card:hover .ma-read { color: var(--map-brand); } .ma-press-page .ma-card:hover .ma-read svg { transform: translateX(3px); } .ma-press-page .ma-ext { font-size: 11.5px; color: var(--map-muted-2); display: inline-flex; align-items: center; gap: 5px; font-family: var(--map-font-head); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } .ma-press-page .ma-ext svg { width: 12px; height: 12px; flex: none; } /* featured */ .ma-press-page .ma-cards.featured .ma-card { padding-top: 22px; border-width: 1.5px; } .ma-press-page .ma-cards.featured .ma-fav { width: 54px; height: 54px; } .ma-press-page .ma-cards.featured .ma-fav img { width: 30px; height: 30px; } .ma-press-page .ma-cards.featured .ma-card-domain { font-size: 19px; } /* ================================================================ СОЦСЕТИ ================================================================ */ .ma-press-page .ma-social-sec { padding: 64px 0 24px; border-bottom: 1px solid var(--map-line-2); } .ma-press-page .ma-social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .ma-press-page .ma-social-card { display: flex; align-items: center; gap: 18px; background: #fff; border: 1.5px dashed #D7DBE0; border-radius: var(--map-r-md); padding: 22px 24px; transition: border-color .2s var(--map-ease), background .2s var(--map-ease); } .ma-press-page .ma-social-card:hover { border-color: var(--map-brand); background: var(--map-brand-50); border-style: solid; } .ma-press-page .ma-social-ico { flex: none; width: 52px; height: 52px; border-radius: 11px; display: grid; place-items: center; color: #fff; } .ma-press-page .ma-social-ico svg { width: 27px; height: 27px; } .ma-press-page .ma-social-body { flex: 1; min-width: 0; } .ma-press-page .ma-social-name { font-family: var(--map-font-head); font-weight: 800; font-size: 17px; color: var(--map-ink); letter-spacing: -.01em; } .ma-press-page .ma-social-desc { font-size: 14px; color: var(--map-muted); margin-top: 3px; } .ma-press-page .ma-social-link { flex: none; font-family: var(--map-font-head); font-weight: 700; font-size: 12px; color: var(--map-brand-700); background: var(--map-brand-50); border: 1px solid var(--map-brand-100); border-radius: 999px; padding: 7px 14px; letter-spacing: .05em; text-transform: uppercase; } .ma-press-page .ma-placeholder-note { margin-top: 22px; font-size: 14px; color: var(--map-muted); background: var(--map-bg-warm); border: 1px solid var(--map-line); border-left: 3px solid var(--map-gold); border-radius: var(--map-r-sm); padding: 14px 18px; } .ma-press-page .ma-placeholder-note b { color: var(--map-ink); } /* ================================================================ BRAG ================================================================ */ .ma-press-page .ma-brag { margin-top: 80px; background: var(--map-dark); color: #fff; position: relative; overflow: hidden; } .ma-press-page .ma-brag::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 92% 110%, rgba(242,86,25,.25), transparent 60%), radial-gradient(520px 280px at 0% -10%, rgba(242,86,25,.10), transparent 60%); pointer-events: none; } .ma-press-page .ma-brag .ma-wrap { position: relative; z-index: 2; padding: 72px 28px 76px; } .ma-press-page .ma-brag-flag { display: inline-flex; align-items: center; gap: 9px; background: var(--map-brand); color: #fff; padding: 8px 14px; border-radius: 999px; font-family: var(--map-font-head); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .ma-press-page .ma-brag-flag svg { width: 14px; height: 14px; flex: none; } .ma-press-page .ma-brag h2 { font-family: var(--map-font-head); font-weight: 900; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.025em; margin-top: 18px; max-width: 980px; text-wrap: balance; } .ma-press-page .ma-brag h2 .ma-em { color: var(--map-brand); } .ma-press-page .ma-brag-points { margin-top: 38px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .ma-press-page .ma-brag-pt { border-top: 2px solid rgba(255,255,255,.15); padding-top: 18px; } .ma-press-page .ma-brag-pt .pt-num { font-family: var(--map-font-num); font-weight: 600; font-size: 36px; color: var(--map-brand); line-height: 1; letter-spacing: .01em; } .ma-press-page .ma-brag-pt .pt-num small { font-size: 22px; font-weight: 500; color: rgba(255,255,255,.7); margin-left: 2px; } .ma-press-page .ma-brag-pt .pt-lbl { font-family: var(--map-font-body); font-size: 14.5px; color: rgba(255,255,255,.78); margin-top: 8px; line-height: 1.4; } .ma-press-page .ma-brag-pt .pt-lbl b { color: #fff; font-weight: 700; } .ma-press-page .ma-brag-actions { margin-top: 44px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .ma-press-page .ma-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--map-brand); color: #fff; font-family: var(--map-font-head); font-weight: 700; font-size: 15.5px; padding: 16px 26px; border-radius: var(--map-r-md); box-shadow: 0 8px 22px rgba(242,86,25,.34); transition: background .15s var(--map-ease), transform .15s var(--map-ease), box-shadow .15s var(--map-ease); letter-spacing: .01em; border: none; cursor: pointer; } .ma-press-page .ma-btn:hover { background: var(--map-brand-600); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(242,86,25,.4); } .ma-press-page .ma-btn:active { transform: translateY(0); background: var(--map-brand-700); } .ma-press-page .ma-btn svg { width: 18px; height: 18px; flex: none; } .ma-press-page .ma-btn.ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.3); box-shadow: none; } .ma-press-page .ma-btn.ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.6); } /* reveal */ .ma-press-page .ma-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--map-ease), transform .55s var(--map-ease); } .ma-press-page .ma-reveal.in { opacity: 1; transform: none; } /* ================================================================ АДАПТИВ ================================================================ */ @media (max-width: 1100px) { .ma-press-page .ma-stats { grid-template-columns: repeat(2, 1fr); } .ma-press-page .ma-stat:nth-child(2) { border-right: none; } .ma-press-page .ma-stat:nth-child(1), .ma-press-page .ma-stat:nth-child(2) { border-bottom: 1px solid var(--map-line); } .ma-press-page .ma-brag-points { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .ma-press-page .ma-cards, .ma-press-page .ma-cards.featured { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .ma-press-page .ma-wrap { padding: 0 18px; } .ma-press-page .ma-cards, .ma-press-page .ma-cards.featured, .ma-press-page .ma-social-grid { grid-template-columns: 1fr; } .ma-press-page .ma-stats { grid-template-columns: 1fr; } .ma-press-page .ma-stat { border-right: none !important; border-bottom: 1px solid var(--map-line); } .ma-press-page .ma-stat:last-child { border-bottom: none; } .ma-press-page .ma-rubric-head { flex-wrap: wrap; gap: 14px; } .ma-press-page .ma-rubric-meta { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; order: 3; } .ma-press-page .ma-intro .ma-wrap { flex-direction: column; gap: 18px; } .ma-press-page .ma-brag-points { grid-template-columns: 1fr 1fr; } .ma-press-page .ma-brag .ma-wrap { padding: 56px 18px; } } @media (max-width: 480px) { .ma-press-page .ma-crumbs { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .ma-press-page .ma-card, .ma-press-page .ma-reveal { opacity: 1 !important; transform: none !important; transition: none; } }