/* ============================================================ О ПРОЕКТЕ — about page, extends styles.css Accent = mint/emerald (distinct from hub lime & all longreads) ============================================================ */ /* Recolor the whole page by overriding the inherited accent token. Every var(--lime) under becomes mint; hardcoded rgba() literals below are swapped to the mint base 70,200,154. */ body.ab-theme { --lime: #46c89a; } /* ---------- Hero ---------- */ .ab-hero { min-height: 92vh; padding: 150px 0 80px; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .ab-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 22%, rgba(70,200,154,0.14), transparent 55%), radial-gradient(circle at 12% 88%, rgba(124,107,255,0.10), transparent 60%); pointer-events: none; } .ab-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); } .ab-hero-top .badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--hairline-strong); border-radius: 999px; color: var(--ink); } .ab-hero-top .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); } .ab-hero-mid { position: relative; z-index: 2; margin: 60px 0; } .ab-hero-mid .kicker { color: var(--lime); margin-bottom: 28px; } .ab-hero-mid h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 8.5vw, 150px); line-height: 0.9; letter-spacing: -0.035em; margin: 0; text-transform: uppercase; } .ab-hero-mid h1 .em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--lime); letter-spacing: -0.01em; } .ab-hero-mid .sub { margin-top: 36px; max-width: 760px; font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.34; color: var(--ink); } .ab-hero-bottom { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; border-top: 1px solid var(--hairline); padding-top: 32px; } .ab-hero-stat .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 4.5vw, 68px); line-height: 1; letter-spacing: -0.02em; color: var(--lime); } .ab-hero-stat .n .small { color: var(--ink); font-size: 0.4em; margin-left: 0.1em; } .ab-hero-stat .l { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--ink-muted); max-width: 220px; } @media (max-width: 900px) { .ab-hero-bottom { grid-template-columns: 1fr 1fr; gap: 24px; } } /* ---------- Interactive epoch palette (лента эпох) ---------- */ .ab-epochs { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; } .ab-epoch { position: relative; display: flex; text-decoration: none; color: inherit; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: var(--bg-card); min-height: 240px; padding: 16px 12px; flex-direction: column; justify-content: space-between; transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1), border-color 0.3s; cursor: pointer; } .ab-epoch::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, var(--ec), transparent 70%); opacity: 0.18; transition: opacity 0.3s; pointer-events: none; } .ab-epoch:hover { transform: translateY(-6px); border-color: var(--ec); } .ab-epoch:hover::before { opacity: 0.42; } .ab-epoch .ec-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ec); position: relative; z-index: 2; } .ab-epoch .ec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ec); position: relative; z-index: 2; box-shadow: 0 0 16px var(--ec); } .ab-epoch .ec-body { position: relative; z-index: 2; } .ab-epoch .ec-years { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-muted); text-transform: uppercase; margin-bottom: 8px; } .ab-epoch .ec-name { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 14px; line-height: 1.25; letter-spacing: 0; text-transform: none; } .ab-epoch .ec-go { margin-top: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ec); opacity: 0; transform: translateX(-6px); transition: all 0.3s; } .ab-epoch:hover .ec-go { opacity: 1; transform: translateX(0); } .ab-epoch.soon { cursor: default; } .ab-epoch.soon .ec-go { color: var(--ink-dim); } .ab-epoch-legend { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .ab-epoch-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: middle; } @media (max-width: 1280px) { .ab-epochs { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 900px) { .ab-epochs { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .ab-epochs { grid-template-columns: 1fr 1fr; } .ab-epoch { min-height: 180px; } } /* ---------- Stat counter chips (interactive process bar) ---------- */ .ab-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: flow; } .ab-flow-step { position: relative; padding: 26px 22px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--bg-card); overflow: hidden; transition: border-color 0.25s, transform 0.25s; } .ab-flow-step:hover { border-color: var(--lime); transform: translateY(-3px); } .ab-flow-step .fs-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--lime); text-transform: uppercase; margin-bottom: 14px; } .ab-flow-step .fs-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15; margin-bottom: 8px; } .ab-flow-step .fs-d { font-size: 13px; line-height: 1.5; color: var(--ink-muted); } .ab-flow-step .fs-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--lime); width: 0; transition: width 1s cubic-bezier(0.2,0.7,0.2,1); } .ab-flow-step.in .fs-bar { width: 100%; } @media (max-width: 900px) { .ab-flow { grid-template-columns: 1fr 1fr; } } /* ---------- Generic section ---------- */ .ab-sec { padding: var(--section-pad) 0; border-top: 1px solid var(--hairline); } .ab-sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 56px; align-items: start; margin-bottom: 56px; } .ab-sec-head .num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--lime); text-transform: uppercase; } .ab-sec-head h2 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -0.01em; margin: 12px 0 0; } .ab-sec-head h2 .em { color: var(--lime); } .ab-sec-head .lead { font-size: 17px; line-height: 1.6; color: var(--ink-muted); } @media (max-width: 900px) { .ab-sec-head { grid-template-columns: 1fr; gap: 20px; } } /* ---------- Relevance / problem prose ---------- */ .ab-prose { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .ab-prose p { font-size: 18px; line-height: 1.62; margin: 0 0 20px; } .ab-prose p .em { font-family: var(--font-serif); font-style: italic; color: var(--lime); } .ab-prose .col-2 p { color: var(--ink-muted); } @media (max-width: 900px) { .ab-prose { grid-template-columns: 1fr; gap: 24px; } } /* ---------- Goal callout ---------- */ .ab-goal { padding: 56px 60px; border: 1px solid rgba(70,200,154,0.32); border-radius: 12px; background: radial-gradient(circle at 100% 0%, rgba(70,200,154,0.09), transparent 60%), var(--bg-elevated); position: relative; } .ab-goal .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); margin-bottom: 20px; } .ab-goal p { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.4vw, 36px); line-height: 1.3; margin: 0; letter-spacing: -0.01em; max-width: 1000px; } .ab-goal p .hl { color: var(--lime); font-style: italic; } @media (max-width: 700px) { .ab-goal { padding: 32px 24px; } } /* ---------- Tasks ---------- */ .ab-tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ab-task { padding: 32px 28px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--bg-card); display: flex; flex-direction: column; gap: 16px; transition: border-color 0.25s, transform 0.25s; } .ab-task:hover { border-color: var(--lime); transform: translateY(-4px); } .ab-task .t-n { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -0.03em; color: var(--lime); } .ab-task h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.01em; margin: 0; text-transform: uppercase; } .ab-task p { font-size: 14px; line-height: 1.55; color: var(--ink-muted); margin: 0; } .ab-task ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--ink-muted); } .ab-task li { padding: 3px 0; } @media (max-width: 900px) { .ab-tasks { grid-template-columns: 1fr; } } /* ---------- Audience ---------- */ .ab-aud { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; } .ab-aud .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.5vw, 88px); line-height: 0.92; letter-spacing: -0.025em; text-transform: uppercase; margin: 0; } .ab-aud .big .em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--lime); } .ab-aud-list { display: flex; flex-direction: column; gap: 0; } .ab-aud-item { display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--hairline); align-items: baseline; } .ab-aud-item:last-child { border-bottom: 1px solid var(--hairline); } .ab-aud-item .ix { font-family: var(--font-mono); font-size: 12px; color: var(--lime); } .ab-aud-item .tx { font-size: 16px; line-height: 1.45; } .ab-aud-item .tx strong { font-family: var(--font-display); font-weight: 600; } @media (max-width: 900px) { .ab-aud { grid-template-columns: 1fr; gap: 32px; } } /* ---------- Team ---------- */ .ab-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ab-member { border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: var(--bg-card); transition: border-color 0.25s, transform 0.25s; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; display: block; position: relative; } .ab-member:hover { border-color: var(--lime); transform: translateY(-4px); } .ab-member.active { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 18px 50px -20px rgba(70,200,154,0.5); } .ab-member.active .ph .mono { color: var(--lime); } .ab-member .ph { aspect-ratio: 3/4; position: relative; display: flex; align-items: flex-end; padding: 16px; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(70,200,154,0.08) 0 6px, transparent 6px 12px), var(--bg); border-bottom: 1px solid var(--hairline); } .ab-member .ph::after { content: "+"; position: absolute; bottom: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hairline-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; color: var(--ink-muted); transition: all 0.25s; z-index: 2; } .ab-member:hover .ph::after { border-color: var(--lime); color: var(--lime); } .ab-member.active .ph::after { background: var(--lime); color: #0a0a0a; border-color: var(--lime); transform: rotate(45deg); } .ab-member .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; z-index: 1; } .ab-member .ph img + .mono { display: none; } .ab-member .ph img + .mono + .tag { display: none; } .ab-member .ph .mono { font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; color: rgba(70,200,154,0.55); line-height: 1; } .ab-member .ph .tag { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-dim); text-transform: uppercase; } .ab-member .meta { padding: 20px; } .ab-member .meta .nm { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.01em; text-transform: uppercase; } .ab-member .meta .ro { margin-top: 6px; font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--lime); line-height: 1.3; } @media (max-width: 900px) { .ab-team-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .ab-team-grid { grid-template-columns: 1fr; } } /* interactive detail drawer */ .ab-detail { margin-top: 18px; border: 1px solid var(--lime); border-radius: 12px; background: radial-gradient(circle at 100% 0%, rgba(70,200,154,0.08), transparent 55%), var(--bg-elevated); overflow: hidden; } .ab-detail-inner { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: start; padding: 40px 44px; } .ab-detail .d-side .d-idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); margin-bottom: 14px; } .ab-detail .d-side .d-name { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; } .ab-detail .d-side .d-role { margin-top: 10px; font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--lime); line-height: 1.3; } .ab-detail .d-body .d-text { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0 0 22px; max-width: 640px; } .ab-detail .d-body .d-text .em { font-family: var(--font-serif); font-style: italic; color: var(--lime); } .ab-detail .d-tags { display: flex; flex-wrap: wrap; gap: 8px; } .ab-detail .d-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); padding: 6px 12px; border: 1px solid var(--hairline-strong); border-radius: 999px; } .ab-detail .d-hint { display: flex; align-items: center; gap: 10px; padding: 16px 44px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .ab-detail .d-hint .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: abPulse 1.6s ease-in-out infinite; } @keyframes abPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } @media (max-width: 700px) { .ab-detail-inner { grid-template-columns: 1fr; gap: 18px; padding: 28px 22px; } .ab-detail .d-hint { padding: 14px 22px; } } /* curators row */ .ab-curators { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; } .ab-curator { display: flex; align-items: center; gap: 20px; padding: 24px 28px; border: 1px solid rgba(70,200,154,0.28); border-radius: 10px; background: radial-gradient(circle at 0% 0%, rgba(70,200,154,0.06), transparent 60%), var(--bg-card); } .ab-curator .av { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #0a0a0a; background: var(--lime); } .ab-curator .nm { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-transform: uppercase; } .ab-curator .ro { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-muted); text-transform: uppercase; } @media (max-width: 700px) { .ab-curators { grid-template-columns: 1fr; } } /* ---------- Sources / methodology chips ---------- */ .ab-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ab-method-card { padding: 28px 26px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--bg-card); display: flex; flex-direction: column; gap: 14px; } .ab-method-card .ic { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--lime); line-height: 1; } .ab-method-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .ab-method-card p { font-size: 13px; line-height: 1.55; color: var(--ink-muted); margin: 0; } @media (max-width: 900px) { .ab-method { grid-template-columns: 1fr; } } /* ============================================================ ПРОБЛЕМА В ЦИФРАХ — подраздел секции 02 (about) ============================================================ */ .ab-stats { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--hairline); } .ab-stats-head { max-width: 760px; margin-bottom: 40px; } .ab-stats-head .t-kicker { color: var(--lime); margin-bottom: 16px; } .ab-stats-head h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 20px; } .ab-stats-head h3 .em { color: var(--lime); } .ab-stats-head p { font-size: 17px; line-height: 1.62; color: var(--ink-muted); margin: 0 0 14px; max-width: 700px; } .ab-stats-head p b { color: var(--ink); } .ab-stats-sub { font-size: 15px !important; } .ab-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } @media (max-width: 900px) { .ab-stats-grid { grid-template-columns: 1fr; } } .ab-statcard { border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg-elevated); padding: 28px 30px; } .ab-statcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; } .ab-statcard-head h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; margin: 0; } .ab-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .ab-figs { list-style: none; margin: 0; padding: 0; } .ab-fig { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--hairline); } .ab-fig:first-child { border-top: none; padding-top: 0; } .ab-fig-n { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--lime); flex-shrink: 0; min-width: 64px; letter-spacing: -0.02em; } .ab-fig-t { font-size: 14px; line-height: 1.5; color: var(--ink-muted); } .ab-fig-t b { color: var(--ink); } .ab-inset { margin-top: 22px; padding: 16px 18px; border-left: 2px solid var(--lime); background: rgba(70,200,154,0.06); border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.55; color: var(--ink); } .ab-inset em { font-family: var(--font-serif); font-style: italic; color: var(--lime); } .ab-inset-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime); margin-bottom: 8px; } .ab-bars { display: flex; flex-direction: column; gap: 16px; } .ab-bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; } .ab-bar-label { font-size: 13px; line-height: 1.4; color: var(--ink-muted); } .ab-bar-label i { font-style: normal; color: var(--ink-dim); font-size: 12px; } .ab-bar-pct { font-family: var(--font-mono); font-size: 13px; color: var(--lime); flex-shrink: 0; } .ab-bar-track { height: 6px; background: var(--hairline); border-radius: 3px; overflow: hidden; } .ab-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, rgba(70,200,154,0.45), var(--lime)); border-radius: 3px; transition: width 1.1s cubic-bezier(.2,.8,.2,1); } .ab-bars-foot { font-size: 13px; line-height: 1.55; color: var(--ink-muted); margin: 20px 0 0; } .ab-bars-foot b { color: var(--ink); } .ab-demand { display: flex; align-items: center; gap: 32px; padding: 32px; border: 1px solid rgba(70,200,154,0.32); border-radius: 12px; background: radial-gradient(circle at 0% 0%, rgba(70,200,154,0.09), transparent 60%), var(--bg-elevated); margin-bottom: 24px; } .ab-demand-big span { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 9vw, 104px); line-height: .9; color: var(--lime); letter-spacing: -0.04em; } .ab-demand-text p { margin: 0 0 8px; font-size: 17px; line-height: 1.5; } .ab-demand-text b { color: var(--lime); } .ab-demand-cap { color: var(--ink-muted); font-size: 14px !important; } @media (max-width: 600px) { .ab-demand { flex-direction: column; align-items: flex-start; gap: 14px; } } .ab-map { border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; margin-bottom: 40px; } .ab-map-head { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 16px; padding: 12px 24px; background: var(--bg-card); } .ab-map-h-q, .ab-map-h-a { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); } .ab-map-h-a { grid-column: 3; } .ab-map-row { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 16px; align-items: center; padding: 16px 24px; border-top: 1px solid var(--hairline); } .ab-map-q { font-size: 15px; color: var(--ink-muted); } .ab-map-q b { color: var(--lime); font-family: var(--font-display); font-weight: 700; } .ab-map-arrow { text-align: center; color: var(--lime); } .ab-map-a { font-size: 15px; color: var(--ink); } @media (max-width: 600px) { .ab-map-head { display: none; } .ab-map-row { grid-template-columns: 1fr; gap: 6px; } .ab-map-arrow { display: none; } } .ab-formula { font-family: var(--font-serif); font-style: italic; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 24px; } .ab-formula .em { color: var(--lime); } .ab-note { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; letter-spacing: 0.04em; color: var(--ink-dim); margin: 0; max-width: 700px; } @media (prefers-reduced-motion: reduce) { .ab-bar-fill { transition: none; } }