/* Обложка на рыжем (выбор владельца 28.09: V2 — сияние от ржавого к оранжевому, P1 — графитовая панель за портретом).
Стеклянная карточка текста, графитовая полоса цифр до краёв экрана. Поверх hero-premium.css. */
/* ---------- общее ---------- */
.ph-orange .phero{background:transparent}
.ph-orange .phero-plate{display:none}
/* стекло: общий рецепт (светлое, край 1px, мягкая тень); фолбэк без backdrop-filter — плотнее */
.ph-orange :is(.phero-copy,.ph-glass){
background:rgba(255,248,242,.26);border:1px solid rgba(255,255,255,.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 18px 48px rgba(90,30,5,.18)
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.ph-orange :is(.phero-copy,.ph-glass){background:rgba(255,248,242,.18);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
}
@media (prefers-reduced-transparency:reduce){.ph-orange :is(.phero-copy,.ph-glass){background:rgba(255,236,224,.9);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* текстовая стеклянная карточка */
.ph-orange .phero-copy{position:relative;z-index:5;align-self:center;margin:clamp(20px,3vw,44px) 0 clamp(20px,3vw,44px) var(--ph-pad);padding:clamp(24px,3vw,44px)}
.ph-orange .phero-mark{color:#fff}
/* «развивать личный бренд»: оранжевый на рыжем не читается — белым по чёрной подложке-маркеру (18:1) */
.ph-orange .phero-sub em{color:#fff;background:#111;padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ph-orange .phero-cta{--plate:#fff}
.ph-orange .phero-cta .ph-arrow{background:#fff}
.ph-orange .phero-place{color:#111;right:var(--ph-pad)}
/* портрет крупнее (+~25% по голове), выходит за верх стеклянной панели; снизу обрезан полосой цифр */
.ph-orange .phero-media{margin-right:0}
.ph-orange .ph-glass{position:absolute;z-index:1;inset:var(--ph-glass-top,96px) var(--ph-pad) 0 8%}
/* тёмная подложка стекла за головой — чтобы рыжие волосы отделялись от рыжего фона */
.ph-orange .phero-cut{inset:0;clip-path:inset(-60% -60vw 0 -60vw);z-index:2}
.ph-orange .phero-cut img{top:22px;bottom:auto;left:var(--ph-bx,-28%);width:var(--ph-bw,156%)}
.ph-orange .phero-stamp{z-index:6}
.ph-orange .phero-note{z-index:6;right:calc(var(--ph-pad) + 14px)}
/* полоса цифр — матовый тёмный графит с едва заметным зерном */
.ph-orange .phero-stats,.ph-graphite .phero-stats{
background-color:#26282d;
background-image:url("data:image/svg+xml;utf8,"),
linear-gradient(180deg,#2b2d32,#232529);
color:#ecebe8
}
:is(.ph-orange,.ph-graphite) .phero-stats li+li{box-shadow:inset 1px 0 0 rgba(255,255,255,.12)}
@media (max-width:600px){
:is(.ph-orange,.ph-graphite) .phero-stats li:nth-child(3){box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
:is(.ph-orange,.ph-graphite) .phero-stats li:nth-child(4){box-shadow:inset 1px 0 0 rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.12)}
}
.ph-orange .phero-stats{margin-top:0}
/* ---------- V2: сияние ржавый → яркий оранжевый, крупные размытые пятна света ---------- */
.home .page-band.ph-band-v2{
background:
radial-gradient(34% 46% at 30% 28%,rgba(255,214,160,.95) 0%,rgba(255,214,160,0) 100%),
radial-gradient(30% 40% at 86% 22%,rgba(255,176,96,.9) 0%,rgba(255,176,96,0) 100%),
radial-gradient(38% 52% at 8% 92%,rgba(120,24,4,.85) 0%,rgba(120,24,4,0) 100%),
radial-gradient(40% 60% at 62% 100%,rgba(150,34,6,.7) 0%,rgba(150,34,6,0) 100%),
linear-gradient(135deg,#a8330c 0%,#e2530f 38%,#fe6c1f 62%,#ff8f45 100%)
}
.ph-v2 .phero-copy{background:rgba(255,246,238,.22)}
.ph-v2 .ph-glass{inset:var(--ph-glass-top,96px) var(--ph-pad) 0 18%}
.ph-v2 .phero-cut img{left:var(--ph-bx,-28%)}
/* ---------- планшет / телефон ---------- */
@media (max-width:1100px){.ph-orange .phero-cut img{--ph-bw:176%;--ph-bx:-40%}}
@media (max-width:900px){
.ph-orange .phero-copy{margin:16px var(--ph-pad) 18px;padding:22px 18px}
.ph-orange .phero h1{font-size:clamp(38px,14.2vw,88px)}
.ph-orange .phero-media{margin:0 var(--ph-pad);--ph-glass-top:70px}
.ph-orange .ph-glass{inset:var(--ph-glass-top) 0 0 0}
.ph-orange .phero-cut img{--ph-bw:150%;--ph-bx:-24%;top:0}
.ph-orange .phero-note{right:auto;left:14px}
.ph-orange .phero-stats{margin:0 var(--ph-pad)}
}
/* плечи уходят за край секции: клип по ширине экрана (полоса full-bleed), а не по секции 1320 */
.ph-orange{overflow-x:clip}
.ph-orange .phero{overflow-x:visible}
/* полоса цифр full-bleed до краёв экрана; ячейки остаются по сетке контейнера */
.ph-orange .phero-stats{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-inline:calc(50vw - 50% + var(--ph-pad))}
@media (max-width:900px){.ph-orange .phero-stats{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-inline:calc(50vw - 50% + var(--ph-pad))}}
/* P1: панель за портретом — чистый матовый графит (как полоса цифр), без стекла и без бурых смесей */
.ph-orange.ph-p1 .ph-glass{
background-color:#26282d;
background-image:url("data:image/svg+xml;utf8,"),linear-gradient(180deg,#2b2d32,#232529);
border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 18px 48px rgba(20,22,28,.28)
}
/* рукопись крупнее (~1.4×) и ниже-правее: правая часть пиджака над полосой цифр */
.ph-orange .phero-note{width:clamp(120px,11.4vw,166px);right:calc(var(--ph-pad) + 2px);bottom:8px}
@media (max-width:900px){.ph-orange .phero-note{width:clamp(130px,40vw,172px);left:8px;right:auto;bottom:8px}}
/* заголовок по ширине карточки: «МАРКЕТОЛОГ» ≈ 5.3 кегля, справа внутренний отступ ≥ 32px */
.ph-orange .phero-copy{container-type:inline-size;padding-right:max(32px,clamp(24px,3vw,44px))}
.ph-orange .phero h1{font-size:min(124px,calc(100cqi / 5.75))}
/* штамп ниже, у короткой строки кнопки — не перекрывает заголовок и подзаголовок */
.ph-orange .phero-stamp{bottom:clamp(24px,3.4vw,56px)}
@media (max-width:900px){.ph-orange .phero h1{font-size:min(112px,calc(100cqi / 5.75))}}
/* рукопись не пересекает лицо (правка владельца 28.09): портрет левее, надпись правее лица на плече;
проверено программно по bbox лица из face-parsing на 1024–1920 шаг 64 и 390/320 */
.ph-v2 .phero-cut img{left:var(--ph-bx,-38%)}
.ph-orange .phero-note{width:clamp(104px,9.4vw,150px);right:10px;bottom:10px}
@media (max-width:1100px){.ph-orange .phero-cut img{--ph-bw:160%;--ph-bx:-44%}}
@media (max-width:900px){
/* одна колонка до 900: портрет по центру, ширина не больше 560px, чтобы голова и плечи помещались в зону */
.ph-orange .phero-cut img{--ph-bw:min(130%,560px);--ph-bx:calc(50% - .52 * min(130%,560px))}
.ph-orange .phero-media{height:calc(min(109vw - 35px,488px) + 24px)}
.ph-orange .phero-note{width:clamp(88px,27vw,106px);left:8px;right:auto;bottom:8px}
}
/* штамп не на лице (правка владельца): на ПК — на правом нижнем углу карточки текста, левее портрета */
@media (min-width:901px){.ph-orange .phero-stamp{left:calc(-1 * clamp(56px,6vw,96px));bottom:clamp(20px,2.6vw,40px)}}
/* 901–1100: портрет меньше, чтобы подбородок не уходил под полосу цифр */
@media (min-width:901px) and (max-width:1100px){.ph-orange .phero-cut img{--ph-bw:134%;--ph-bx:-26%}}
@media (max-width:900px){
.ph-orange .phero-cut img{--ph-bx:calc(50% - .48 * min(130%,560px))}
.ph-orange .phero-note{width:clamp(80px,24vw,106px)}
}
/* ---------- тёмная тема (спека 006, волна 0б; вариант B «тлеющий рыжий», выбор 01.10) ----------
Обложка остаётся рыжей, но притушена до ржавчины: та же диагональ ржавый → оранжевый, что у светлого V2,
на 3–4 ступени темнее, с тёплыми пятнами света за карточкой и за портретом и тенью в левом нижнем углу.
Пятна гаснут до нуля внутри полосы по вертикали — шов с шапкой и следующей полосой свечение не режет.
Кнопка — как тёмный первый экран /networking/: оранжевая плашка с тёмной ячейкой; стекло — тёмное тонированное. */
@media (prefers-color-scheme:dark){
.home .page-band.ph-band-v2{
background-color:#5a1f08;
background-image:
radial-gradient(34% 40% at 30% 36%,rgba(255,154,87,.30) 0%,rgba(255,154,87,0) 100%),
radial-gradient(30% 40% at 84% 30%,rgba(254,108,31,.32) 0%,rgba(254,108,31,0) 100%),
radial-gradient(38% 44% at 8% 70%,rgba(30,8,2,.6) 0%,rgba(30,8,2,0) 100%),
var(--nb-noise),linear-gradient(135deg,#3a1306 0%,#6b240a 40%,#93360f 70%,#a8441a 100%)
}
.ph-orange .phero{--ph-ink:#faf7f2;color:#faf7f2}
.ph-orange :is(.phero-copy,.ph-glass){background:rgba(28,14,8,.42);border-color:rgba(250,247,242,.2);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 60px rgba(0,0,0,.35)}
.ph-v2 .phero-copy{background:rgba(28,14,8,.42)}
.ph-orange .phero-mark{color:#fe6c1f}
/* маркер «развивать личный бренд»: в светлой — самое тёмное пятно карточки, в тёмной — самое светлое */
.ph-orange .phero-sub em{color:#111;background:#faf7f2}
.ph-orange .phero-cta{--plate:#faf7f2;background:#fe6c1f;color:#111}
.ph-orange .phero-cta .ph-arrow{background:#111;color:#faf7f2}
.ph-orange .phero-place{color:#faf7f2}
/* панель за портретом и полоса цифр — глубокий графит: рыжие волосы отделяются от панели, ржавое поле — от полосы */
.ph-orange.ph-p1 .ph-glass{background-color:#1d1f23;background-image:var(--nb-noise),linear-gradient(180deg,#222428,#1b1d20);
border-color:rgba(250,247,242,.1);box-shadow:0 18px 48px rgba(0,0,0,.45)}
.ph-orange .phero-stats{background-color:#1d1f23;background-image:var(--nb-noise),linear-gradient(180deg,#222428,#1b1d20);
box-shadow:inset 0 1px 0 rgba(250,247,242,.08)}
.phero-stamp{background:rgba(35,37,41,.62);border-color:rgba(250,247,242,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 22px rgba(0,0,0,.35)}
}
@media (prefers-color-scheme:dark) and (prefers-reduced-transparency:reduce){
.ph-orange :is(.phero-copy,.ph-glass),.ph-v2 .phero-copy{background:rgba(58,19,6,.94)}
.phero-stamp{background:rgba(35,37,41,.94)}
}