/* ========================================================================== PM Culture — общая дизайн-система (единый источник правды) Токены (:root) + базовые стили + компоненты. Подключай этот файл на каждой странице, чтобы она выглядела в едином стиле. Требует шрифт Manrope — см. в (пример в _template.html). Справка по токенам и компонентам: DESIGN.md · визуальный эталон: styleguide.html ========================================================================== */ :root { --cream: #FFFEF5; --cream-2: #F6F1E4; --navy: #131E33; --navy-2: rgba(19, 30, 51, 0.72); --navy-3: rgba(19, 30, 51, 0.48); --navy-line: rgba(19, 30, 51, 0.12); --green: #72C82C; --teal: #1A4242; --teal-2: #1F3B3A; --danger: #C14434; /* ошибки/валидация форм */ } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--cream); color: var(--navy); font-size: 17px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--green); color: var(--navy); } .container { max-width: 960px; margin: 0 auto; padding: 0 28px; } /* ---------- NAV ---------- */ header.topbar { position: sticky; top: 0; z-index: 20; background: var(--cream); border-bottom: 1px solid var(--navy-line); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; max-width: 1120px; margin: 0 auto; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); } .brand img { width: 36px; height: 36px; display: block; } .brand span { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } nav.links a { color: var(--navy-2); text-decoration: none; font-size: 15px; font-weight: 500; margin-left: 26px; transition: color 0.15s ease; } nav.links a:hover { color: var(--navy); } @media (max-width: 720px) { nav.links { display: none; } } /* ---------- HERO ---------- */ .hero { padding: 84px 0 64px; } .hero-logo { width: 124px; height: 124px; display: block; margin: 0 auto 28px; } .brand-eyebrow { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); margin-bottom: 18px; } .hero h1 { font-size: clamp(38px, 6vw, 60px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; text-align: center; color: var(--navy); max-width: 820px; margin: 0 auto 22px; } .region-tag { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-3); margin-bottom: 30px; } .hero-tagline { max-width: 700px; margin: 0 auto; text-align: center; font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55; color: var(--navy-2); font-weight: 400; } .hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 38px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 15px; transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease; border: 1px solid transparent; } .btn-primary { background: var(--navy); color: var(--cream); } .btn-primary:hover { background: var(--teal); } .btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy-line); } .btn-ghost:hover { border-color: var(--navy); } /* ---------- SECTIONS ---------- */ section { padding: 72px 0; } .section-label { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; } h2 { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; color: var(--navy); margin-bottom: 28px; max-width: 720px; } /* ---------- MISSION ---------- */ .mission p { font-size: 18px; line-height: 1.7; color: var(--navy-2); max-width: 720px; margin-bottom: 18px; } .mission p strong { color: var(--navy); font-weight: 600; } .chips { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 760px; } .chip { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--cream-2); border: 1px solid var(--navy-line); font-size: 13.5px; font-weight: 600; color: var(--navy-2); } /* ---------- ACTIVITIES ---------- */ .activities { background: var(--cream-2); } .activities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 680px) { .activities-grid { grid-template-columns: 1fr; } } .activity-card { background: var(--cream); padding: 28px 26px; border-radius: 14px; border: 1px solid var(--navy-line); transition: transform 0.18s ease, border-color 0.18s ease; } .activity-card:hover { transform: translateY(-2px); border-color: var(--navy-3); } .activity-card .num { display: inline-block; font-size: 13px; font-weight: 700; color: var(--green); margin-bottom: 14px; letter-spacing: 0.08em; } .activity-card h3 { font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 10px; letter-spacing: -0.01em; } .activity-card p { font-size: 15.5px; line-height: 1.6; color: var(--navy-2); } /* ---------- FOUNDER ---------- */ .founder-intro { display: flex; align-items: flex-start; gap: 32px; max-width: 820px; margin-bottom: 8px; } .founder-avatar { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--navy-line); display: block; } .founder-bio { flex: 1; min-width: 0; } @media (max-width: 680px) { .founder-intro { flex-direction: column; align-items: center; gap: 20px; text-align: left; } .founder-avatar { width: 140px; height: 140px; } } .founder p.bio { font-size: 17.5px; line-height: 1.7; color: var(--navy-2); max-width: 740px; margin-bottom: 16px; } .founder p.bio strong { color: var(--navy); font-weight: 600; } .facts-inline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 28px 0; margin: 32px 0 24px; border-top: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line); } @media (max-width: 720px) { .facts-inline { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } } .fact { text-align: center; } .fact .num { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1.05; } .fact .label { display: block; margin-top: 8px; font-size: 13px; color: var(--navy-2); line-height: 1.4; } .quote { max-width: 740px; margin: 28px 0 8px; padding: 22px 0 22px 24px; border-left: 3px solid var(--green); font-size: 18px; line-height: 1.55; font-weight: 500; color: var(--navy); font-style: normal; } .quote-author { display: block; margin-top: 14px; padding-left: 24px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-3); } .founder-links { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; } .founder-links a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--navy); font-size: 14.5px; font-weight: 600; padding: 9px 16px; border: 1px solid var(--navy-line); border-radius: 8px; transition: border-color 0.15s ease; } .founder-links a:hover { border-color: var(--navy); } /* ---------- TRACK RECORD ---------- */ .track-lead { font-size: 17px; color: var(--navy-2); max-width: 720px; margin-bottom: 34px; } .track-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 900px) { .track-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .track-grid { grid-template-columns: 1fr; } } .track-card { background: var(--cream-2); padding: 26px 24px; border-radius: 14px; border: 1px solid var(--navy-line); display: flex; flex-direction: column; } /* Единая сетка рядов: логотип, название, годы/локация, описание — выравнивание по горизонтали между карточками */ .track-logo { width: min(100%, 232px); aspect-ratio: 400 / 88; flex-shrink: 0; margin: 0 0 16px; padding: 0; border: none; border-radius: 0; display: flex; align-items: center; justify-content: flex-start; background: transparent; } .track-logo img { width: 100%; height: 100%; min-height: 0; display: block; object-fit: contain; object-position: left center; } .track-card h3 { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; margin: 0 0 6px; min-height: calc(2 * 1.3em); } .track-meta { font-size: 13px; line-height: 1.45; font-weight: 600; letter-spacing: 0.04em; color: var(--navy-3); text-transform: uppercase; margin: 0 0 14px; min-height: calc(2 * 1.45em); } .track-desc { font-size: 15px; line-height: 1.6; color: var(--navy-2); } .track-desc strong { color: var(--navy); font-weight: 600; } .track-desc-list { list-style: none; margin: 0.6em 0 0; padding: 0; font-size: 15px; line-height: 1.6; color: var(--navy-2); } .track-desc-list li { position: relative; padding-left: 1.15em; margin-bottom: 0.35em; } .track-desc-list li:last-child { margin-bottom: 0; } .track-desc-list li::before { content: "—"; position: absolute; left: 0; color: var(--navy-3); font-weight: 500; } /* ---------- CONTACT ---------- */ .contact { background: var(--cream-2); } .contact-lead { font-size: 17.5px; color: var(--navy-2); max-width: 660px; margin-bottom: 36px; } .contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 660px; } @media (max-width: 600px) { .contact-grid { grid-template-columns: 1fr; } } .contact-item { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--cream); border: 1px solid var(--navy-line); border-radius: 12px; text-decoration: none; color: var(--navy); transition: border-color 0.15s ease, transform 0.12s ease; } .contact-item:hover { border-color: var(--navy); transform: translateY(-1px); } .contact-item .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--teal); } .contact-item .meta { display: flex; flex-direction: column; min-width: 0; } .contact-item .meta b { font-size: 13px; font-weight: 600; color: var(--navy-3); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 2px; } .contact-item .meta span { font-size: 15px; font-weight: 500; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- FORMS ---------- */ .form { max-width: 560px; } .field { margin-bottom: 22px; } .field:last-child { margin-bottom: 0; } .field-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy-3); margin-bottom: 8px; } .field-label .req { color: var(--danger); margin-left: 2px; } .input, .textarea, .select { width: 100%; font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--navy); background: var(--cream); border: 1px solid var(--navy-line); border-radius: 10px; padding: 12px 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } .input::placeholder, .textarea::placeholder { color: var(--navy-3); } .input:hover, .textarea:hover, .select:hover { border-color: var(--navy-3); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(26, 66, 66, 0.12); } .textarea { min-height: 120px; resize: vertical; } .select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23131E33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } .input:disabled, .textarea:disabled, .select:disabled { background: var(--cream-2); color: var(--navy-3); cursor: not-allowed; } .field-help { margin-top: 7px; font-size: 13px; line-height: 1.4; color: var(--navy-3); } .field-error { margin-top: 7px; font-size: 13px; line-height: 1.4; color: var(--danger); font-weight: 500; display: none; } /* Состояние ошибки: добавить класс .is-error на .field */ .field.is-error .input, .field.is-error .textarea, .field.is-error .select { border-color: var(--danger); } .field.is-error .input:focus, .field.is-error .textarea:focus, .field.is-error .select:focus { box-shadow: 0 0 0 3px rgba(193, 68, 52, 0.14); } .field.is-error .field-error { display: block; } /* ---------- CHOICES: radio / checkbox ---------- */ .choice-group { display: flex; flex-direction: column; gap: 12px; } .choice { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 16px; line-height: 1.4; color: var(--navy); } .choice input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .choice .control { width: 20px; height: 20px; flex-shrink: 0; border: 1px solid var(--navy-line); background: var(--cream); display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s ease, background 0.15s ease; } .choice.checkbox .control { border-radius: 6px; } .choice.radio .control { border-radius: 50%; } .choice input:checked + .control { border-color: var(--teal); background: var(--teal); } .choice.checkbox .control svg { width: 12px; height: 12px; color: var(--cream); opacity: 0; transition: opacity 0.12s ease; } .choice.checkbox input:checked + .control svg { opacity: 1; } .choice.radio .control::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cream); opacity: 0; transition: opacity 0.12s ease; } .choice.radio input:checked + .control::after { opacity: 1; } .choice input:focus-visible + .control { box-shadow: 0 0 0 3px rgba(26, 66, 66, 0.18); } /* Карточки-варианты (удобно для опросников): .choice + .choice-card */ .choice-card { display: flex; width: 100%; padding: 14px 16px; border: 1px solid var(--navy-line); border-radius: 12px; background: var(--cream); transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .choice-card:hover { border-color: var(--navy-3); } .choice-card:has(input:checked) { border-color: var(--teal); background: var(--cream-2); } .choice-card input:focus-visible + .control { box-shadow: none; } .choice-card:has(input:focus-visible) { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(26, 66, 66, 0.18); } /* Кнопки форм: расширяют .btn */ .btn-block { width: 100%; justify-content: center; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ---------- FOOTER ---------- */ footer { border-top: 1px solid var(--navy-line); padding: 28px 0 36px; font-size: 14px; color: var(--navy-3); } footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } footer a { color: var(--navy-2); text-decoration: none; } footer a:hover { color: var(--navy); }