/* ===================================================================== FitStars Portal — Редизайн 2026 (opt-in слой) --------------------------------------------------------------------- ОТКАТ: удали и убери класс portal-redesign с . portal.css и portal-air.css не тронуты. ===================================================================== */ body.portal-redesign { background: #FAFAFA; } /* ===================================================================== ШАПКА — pill-навигация ===================================================================== */ body.portal-redesign .portal-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 250, 250, 0.92); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid #EEEEEF; box-shadow: none; min-height: 72px; } body.portal-redesign .portal-header__inner { min-height: 72px; } body.portal-redesign .portal-nav { display: flex; gap: 4px; background: #FFFFFF; padding: 6px; border-radius: 100px; border: 1px solid #EEEEEF; } body.portal-redesign .portal-nav a { padding: 10px 22px; border-radius: 100px; font-size: 15px; font-weight: 500; color: var(--text-primary); border-bottom: none; white-space: nowrap; transition: background 0.2s, color 0.2s; } body.portal-redesign .portal-nav a:hover { background: #F5F5F5; border-bottom: none; color: var(--text-primary); } body.portal-redesign .portal-nav a[aria-current="page"] { background: var(--color-brand); color: #FFFFFF; font-weight: 600; border-bottom: none; } /* ===================================================================== ГЛАВНЫЙ КОНТЕНТ ===================================================================== */ body.portal-redesign .portal-main { padding-top: 64px; } /* ===================================================================== HERO ===================================================================== */ body.portal-redesign .weekly-hero { margin-bottom: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* Когда обложка загружена — контент влево, постер вправо */ body.portal-redesign .weekly-hero:has(.weekly-hero__visual.has-cover) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); overflow: hidden; } body.portal-redesign .weekly-hero .portal-kicker::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); margin-right: 8px; vertical-align: middle; animation: rd-dot-pulse 2s ease-in-out infinite; } @keyframes rd-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.7); } } body.portal-redesign .weekly-hero .portal-kicker { margin-bottom: 8px; } body.portal-redesign .weekly-hero__meta { font-size: 14px; color: var(--text-secondary); font-weight: 500; margin-bottom: 12px; } body.portal-redesign .weekly-hero h1 { font-size: clamp(44px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; } body.portal-redesign .weekly-hero__topic { font-size: 17px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 14px; max-width: 520px; } body.portal-redesign .weekly-hero__teasers { list-style: none; padding: 0; margin-bottom: 28px; } body.portal-redesign .weekly-hero__teasers li { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; font-size: 15px; font-weight: 500; color: var(--text-primary); } body.portal-redesign .weekly-hero__teasers li::before { content: ""; flex-shrink: 0; width: 12px; height: 12px; margin-top: 3px; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0.5L7.5 4.3L11.5 4.3L8.3 6.8L9.8 10.6L6 8.1L2.2 10.6L3.7 6.8L0.5 4.3L4.5 4.3L6 0.5Z' fill='%23EF16B0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } body.portal-redesign .weekly-hero__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } body.portal-redesign .portal-button--pink { text-decoration: none; } body.portal-redesign .portal-button--pink:hover { background: var(--color-brand); transform: translateY(-1px); } body.portal-redesign .portal-link { color: var(--color-brand); font-size: 15px; font-weight: 600; text-decoration: none; transition: color 0.2s; } body.portal-redesign .portal-link:hover { color: var(--color-brand); opacity: 0.8; } /* Панель hero — светлый вариант со звёздами */ body.portal-redesign .weekly-hero__visual { aspect-ratio: 1; background: linear-gradient(135deg, #FFEAF8 0%, #FAE3FF 60%, #EBE5FF 100%); border-radius: 48px; min-height: unset; overflow: hidden; } /* Orbit-кольца видимы на светлом фоне */ body.portal-redesign .weekly-hero__visual::before, body.portal-redesign .weekly-hero__visual::after { border-color: rgba(239, 22, 176, 0.14); } /* Когда есть обложка — полностью невидимый контейнер */ body.portal-redesign .weekly-hero__visual.has-cover { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible; display: flex; align-items: center; justify-content: center; } body.portal-redesign .weekly-hero__visual.has-cover::before, body.portal-redesign .weekly-hero__visual.has-cover::after { display: none !important; } body.portal-redesign .weekly-hero__visual.has-cover .hero-star, body.portal-redesign .weekly-hero__visual.has-cover .hero-orbit { display: none; } /* Обложка — крупный постер парит в воздухе */ body.portal-redesign .weekly-hero__cover { position: relative; width: 115%; height: auto; max-width: none; object-fit: contain; border-radius: 32px; box-shadow: 0 32px 72px rgba(24, 29, 49, 0.18), 0 8px 24px rgba(239, 22, 176, 0.12); transform: rotate(1.5deg) translateY(-8px); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; z-index: 1; } body.portal-redesign .weekly-hero__visual.has-cover:hover .weekly-hero__cover { transform: rotate(0.5deg) translateY(-16px); box-shadow: 0 48px 88px rgba(24, 29, 49, 0.22), 0 12px 32px rgba(239, 22, 176, 0.14); } /* ===================================================================== СЕКЦИИ ===================================================================== */ body.portal-redesign .portal-section { padding-top: 56px; padding-bottom: 0; } body.portal-redesign .portal-section__header { margin-bottom: 24px; } body.portal-redesign .portal-section__title { font-size: clamp(32px, 3vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary); } body.portal-redesign .portal-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-brand); margin-bottom: 12px; display: block; } /* ===================================================================== ПУЛЬС — карточки с градиентом + 3D-иконки ===================================================================== */ body.portal-redesign .pulse-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } body.portal-redesign .pulse-card { background: #FFFFFF; border-radius: 32px; padding: 24px 20px 20px; aspect-ratio: 1 / 1.15; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #EEEEEF; box-shadow: 0 1px 2px rgba(24, 29, 49, 0.04); min-height: auto; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } body.portal-redesign .pulse-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(24, 29, 49, 0.08); } body.portal-redesign .pulse-card:nth-child(1) { background: linear-gradient(180deg, #FFFFFF 50%, #FFEAF8 100%); } body.portal-redesign .pulse-card:nth-child(2) { background: linear-gradient(180deg, #FFFFFF 50%, #D1FDF3 100%); } body.portal-redesign .pulse-card:nth-child(3) { background: linear-gradient(180deg, #FFFFFF 50%, #DBEFFF 100%); } body.portal-redesign .pulse-card:nth-child(4) { background: linear-gradient(180deg, #FFFFFF 50%, #FEF9CC 100%); } body.portal-redesign .pulse-card:nth-child(5) { background: linear-gradient(180deg, #FFFFFF 50%, #FAE3FF 100%); } body.portal-redesign .pulse-card:nth-child(6) { background: linear-gradient(180deg, #FFFFFF 50%, #FFE7D8 100%); } body.portal-redesign .pulse-card strong { font-size: clamp(32px, 3.2vw, 52px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--text-primary); text-shadow: none; display: block; } body.portal-redesign .pulse-card:nth-child(1) strong, body.portal-redesign .pulse-card:nth-child(6) strong { color: var(--color-brand); } body.portal-redesign .pulse-card span { font-size: 13px; color: var(--text-secondary); line-height: 1.4; font-weight: 500; max-width: none; margin-top: 4px; display: block; } /* ===================================================================== БЕНТО «Куда зайти» ===================================================================== */ body.portal-redesign .rd-bento { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; } body.portal-redesign .rd-bento-card { border-radius: 48px; padding: 40px; min-height: 280px; display: flex; flex-direction: column; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } body.portal-redesign .rd-bento-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(24, 29, 49, 0.12); } body.portal-redesign .rd-bento-card--team { background: var(--text-primary); color: #FFFFFF; } /* Все текстовые элементы внутри тёмной карточки — белые */ body.portal-redesign .rd-bento-card--team .rd-bento__eyebrow, body.portal-redesign .rd-bento-card--team .rd-bento__title, body.portal-redesign .rd-bento-card--team .rd-bento__text, body.portal-redesign .rd-bento-card--team .rd-bento__arrow { color: #FFFFFF; } body.portal-redesign .rd-bento-card--weekly { background: linear-gradient(135deg, #FFEAF8 0%, #FAE3FF 100%); color: var(--text-primary); } /* Декоративная звезда в тёмной карточке — мягкая, скруглённая */ body.portal-redesign .rd-bento-card--team::after { content: ""; position: absolute; bottom: -60px; right: -60px; width: 280px; height: 280px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 10 C100 10 112 48 128 62 C144 76 185 72 185 72 C185 72 158 94 152 114 C146 134 162 172 162 172 C162 172 128 152 108 156 C88 160 62 184 62 184 C62 184 66 144 54 126 C42 108 8 96 8 96 C8 96 46 82 58 64 C70 46 68 10 68 10 C68 10 88 44 100 44 C112 44 100 10 100 10Z' fill='%23EF16B0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; opacity: 0.14; pointer-events: none; } /* Маскот — белый кружок в правом верхнем углу карточки */ body.portal-redesign .rd-mascot-wrap { position: absolute; top: 24px; right: 24px; width: 84px; height: 84px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 4px 20px rgba(239, 22, 176, 0.12); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body.portal-redesign .rd-mascot-wrap .rd-mascot { width: 80px; height: 80px; object-fit: contain; display: block; } body.portal-redesign .rd-bento__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0; } body.portal-redesign .rd-bento__title { font-size: clamp(26px, 2.5vw, 36px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 12px 0 16px; } body.portal-redesign .rd-bento__body { flex: 1; display: flex; flex-direction: column; } body.portal-redesign .rd-bento__text { font-size: 15px; line-height: 1.5; opacity: 0.7; max-width: 280px; margin: 0; } /* В pink-карточке с котиком — текст не лезет под кружок */ body.portal-redesign .rd-bento-card--weekly .rd-bento__body { padding-right: 100px; } body.portal-redesign .rd-bento__arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 600; font-size: 15px; color: inherit; } body.portal-redesign .rd-bento__arrow svg { transition: transform 0.3s ease; } body.portal-redesign .rd-bento-card:hover .rd-bento__arrow svg { transform: translateX(5px); } /* ===================================================================== ДНИ РОЖДЕНИЯ ===================================================================== */ body.portal-redesign .birthday-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } body.portal-redesign .birthday-card { background: #FFFFFF; border-radius: 32px; padding: 20px; display: flex; flex-direction: column; border: 1px solid #EEEEEF; box-shadow: 0 1px 2px rgba(24, 29, 49, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; min-height: unset; } body.portal-redesign .birthday-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(24, 29, 49, 0.07); } body.portal-redesign .birthday-card__date { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand); margin-bottom: 14px; } body.portal-redesign .birthday-card .rd-avatar { width: 52px; height: 52px; border-radius: 50%; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; color: var(--text-primary); overflow: hidden; flex-shrink: 0; position: relative; } body.portal-redesign .birthday-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; line-height: 1.2; } body.portal-redesign .birthday-card p:not(.birthday-card__date) { font-size: 13px; color: var(--text-secondary); line-height: 1.3; margin: 0; } body.portal-redesign .birthday-card .portal-button, body.portal-redesign .birthday-card .portal-muted { margin-top: 14px; font-size: 13px; } /* ===================================================================== СКЕЛЕТОН ===================================================================== */ body.portal-redesign .rd-skeleton-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } body.portal-redesign .rd-skeleton-card { height: 160px; border-radius: 32px; background: linear-gradient(90deg, #F3F3F6 25%, #FFFFFF 50%, #F3F3F6 75%); background-size: 200% 100%; animation: rd-shimmer 1.4s ease-in-out infinite; border: 1px solid #EEEEEF; } @keyframes rd-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ===================================================================== АВАТАРЫ — пастели по хешу + фото из Telegram ===================================================================== */ body.portal-redesign .rd-avatar--p0 { background: #CBC1F0; } body.portal-redesign .rd-avatar--p1 { background: #B0D8F6; } body.portal-redesign .rd-avatar--p2 { background: #FFCDAD; } body.portal-redesign .rd-avatar--p3 { background: #FFBCBC; } body.portal-redesign .rd-avatar--p4 { background: #FFD0EF; } body.portal-redesign .rd-avatar--p5 { background: #EAC5F2; } body.portal-redesign .rd-avatar--p6 { background: #BCE8B9; } body.portal-redesign .rd-avatar--p7 { background: #B0EBDD; } body.portal-redesign .rd-avatar--p8 { background: #A9E6F4; } body.portal-redesign .rd-avatar--p9 { background: #D2F19D; } body.portal-redesign .rd-avatar--p10 { background: #F7F791; } body.portal-redesign .rd-avatar--p11 { background: #FFE796; } /* Аватары сотрудников */ body.portal-redesign .person-card__avatar { position: relative; overflow: hidden; } body.portal-redesign .person-card__avatar--p0 { background: #CBC1F0; color: var(--text-primary); } body.portal-redesign .person-card__avatar--p1 { background: #B0D8F6; color: var(--text-primary); } body.portal-redesign .person-card__avatar--p2 { background: #FFCDAD; color: var(--text-primary); } body.portal-redesign .person-card__avatar--p3 { background: #FFBCBC; color: var(--text-primary); } body.portal-redesign .person-card__avatar--p4 { background: #FFD0EF; color: var(--text-primary); } body.portal-redesign .person-card__avatar--p5 { background: #EAC5F2; color: var(--text-primary); } body.portal-redesign .person-card__avatar--p6 { background: #BCE8B9; color: var(--text-primary); } body.portal-redesign .person-card__avatar--p7 { background: #B0EBDD; color: var(--text-primary); } body.portal-redesign .person-card__avatar--p8 { background: #A9E6F4; color: var(--text-primary); } body.portal-redesign .person-card__avatar--p9 { background: #D2F19D; color: var(--text-primary); } body.portal-redesign .person-card__avatar--p10 { background: #F7F791; color: var(--text-primary); } body.portal-redesign .person-card__avatar--p11 { background: #FFE796; color: var(--text-primary); } /* Telegram-фото: перекрывает инициалы когда загружается */ body.portal-redesign .avatar-tg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0; transition: opacity 0.2s; } body.portal-redesign .avatar-tg-photo.loaded { opacity: 1; } /* ===================================================================== ФУТЕР ===================================================================== */ body.portal-redesign .portal-footer { margin-top: 72px; padding: 48px 0 64px; border-top: 1px solid #EEEEEF; background: transparent; } body.portal-redesign .portal-footer__inner { max-width: var(--content-width, 1240px); margin: 0 auto; padding: 0 var(--page-pad-x, 100px); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } body.portal-redesign .portal-footer__inner p, body.portal-redesign .portal-footer__inner span { font-size: 13px; color: var(--text-secondary); margin: 0; } /* ===================================================================== СТРАНИЦА КОМАНДЫ ===================================================================== */ body.portal-redesign .team-hero { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 24px !important; } body.portal-redesign .team-hero h1 { font-size: clamp(38px, 4.2vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } body.portal-redesign .team-hero p:not(.portal-kicker) { font-size: 16px; color: var(--text-secondary); max-width: 620px; } body.portal-redesign .team-search input::placeholder { font-style: normal; color: var(--text-passive); } body.portal-redesign [data-filter-type="toggle"] { background: transparent; border: 1px solid var(--bord-primary); color: var(--text-secondary); box-shadow: none; font-weight: 500; } body.portal-redesign [data-filter-type="toggle"]:hover { background: var(--sur-secondary); transform: none; } /* ----------------------------------------------------------------------- Шапка отдела — название слева, куратор справа ----------------------------------------------------------------------- */ body.portal-redesign .department-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } body.portal-redesign .department-section__header h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; } body.portal-redesign .department-section__curator { background: none; border: none; padding: 0; font-family: inherit; font-size: 13px; color: var(--text-tertiary); font-weight: 500; margin: 0; white-space: nowrap; line-height: 1.4; flex-shrink: 0; cursor: pointer; transition: color 0.15s; text-decoration: none; } body.portal-redesign .department-section__curator:hover { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-style: dotted; } /* ----------------------------------------------------------------------- Кнопка «Сбросить фильтры» внутри панели управления ----------------------------------------------------------------------- */ body.portal-redesign .team-controls .team-reset { align-self: flex-start; margin-top: 4px; font-size: 13px; min-height: auto; padding: 0; color: var(--text-tertiary); font-weight: 500; transition: color 0.15s; } body.portal-redesign .team-controls .team-reset:hover { color: var(--color-brand); } /* ----------------------------------------------------------------------- Список отделов — секция без заголовка, компактный отступ сверху ----------------------------------------------------------------------- */ body.portal-redesign .team-page .team-controls + .portal-section { padding-top: 28px; } body.portal-redesign .department-list { gap: 52px; } body.portal-redesign .department-section { position: relative; padding-top: 4px; } /* ----------------------------------------------------------------------- Карточки сотрудников — вертикальный формат, чище и компактнее ----------------------------------------------------------------------- */ body.portal-redesign .person-card { flex-direction: column; align-items: flex-start; gap: 10px; min-height: auto; padding: 20px; border-radius: 24px; transition: transform 0.2s ease, box-shadow 0.2s ease; } body.portal-redesign .person-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(24, 29, 49, 0.09); } body.portal-redesign .person-card__avatar { width: 56px; height: 56px; font-size: 18px; flex-shrink: 0; } body.portal-redesign .person-card__body { flex: 1; min-width: 0; width: 100%; } body.portal-redesign .person-card h4 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 3px; } body.portal-redesign .person-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.35; margin: 0; } body.portal-redesign .person-card .portal-button--secondary { margin-top: 4px; min-height: 32px; padding: 0 14px; font-size: 13px; border-radius: 100px; align-self: flex-start; } body.portal-redesign .person-card .portal-muted { margin-top: 4px; font-size: 12px; color: var(--text-passive); } /* ----------------------------------------------------------------------- Сетка сотрудников — 4 колонки на десктопе, адаптивная ----------------------------------------------------------------------- */ body.portal-redesign .people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } /* ----------------------------------------------------------------------- Счётчик результатов ----------------------------------------------------------------------- */ body.portal-redesign .team-results-count { font-size: 15px; font-weight: 500; color: var(--text-secondary); margin-top: 4px; } body.portal-redesign .team-results-count strong { font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); } /* Пустое состояние */ body.portal-redesign .rd-team-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 80px 24px; text-align: center; border-radius: 32px; border: 1px dashed #D3D5DA; background: #FFFFFF; } body.portal-redesign .rd-team-empty p { font-size: 15px; color: var(--text-secondary); max-width: 36ch; margin: 0; } /* ----------------------------------------------------------------------- Адаптив команды ----------------------------------------------------------------------- */ @media (max-width: 1100px) { body.portal-redesign .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { body.portal-redesign .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.portal-redesign .department-list { gap: 40px; } } @media (max-width: 480px) { body.portal-redesign .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } } /* Карточка в 2-колоночной мобильной сетке — компактная версия */ @media (max-width: 480px) { body.portal-redesign .person-card { padding: 12px; border-radius: 16px; } body.portal-redesign .person-card__avatar { width: 44px; height: 44px; font-size: 14px; margin-bottom: 6px; } body.portal-redesign .person-card h4 { font-size: 13px; line-height: 1.3; white-space: normal; overflow: visible; } body.portal-redesign .person-card p { font-size: 11px; } body.portal-redesign .person-card .portal-button--secondary { font-size: 12px; min-height: 32px; padding: 0 10px; border-radius: 10px; margin-top: 4px; } } /* ===================================================================== АРХИВ WEEKLY ===================================================================== */ body.portal-redesign .archive-hero { background: radial-gradient(ellipse at 88% 18%, rgba(239, 22, 176, 0.18) 0%, transparent 38%), radial-gradient(ellipse at 6% 85%, rgba(176, 235, 221, 0.40) 0%, transparent 36%), radial-gradient(ellipse at 55% 100%, rgba(200, 180, 255, 0.22) 0%, transparent 40%), linear-gradient(145deg, #FFFFFF 0%, #F5F0FF 55%, #EBF4FF 100%); border-radius: 40px; border: 1px solid rgba(239, 22, 176, 0.12); box-shadow: 0 2px 0 rgba(255,255,255,0.9) inset, 0 12px 48px rgba(24, 29, 49, 0.07); position: relative; overflow: visible; } /* Декоративные звёзды */ body.portal-redesign .archive-hero::before { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(239, 22, 176, 0.08); border-radius: calc(40px - 16px); pointer-events: none; z-index: 0; } body.portal-redesign .archive-hero::after { display: none; } body.portal-redesign .archive-hero > * { position: relative; z-index: 1; } body.portal-redesign .archive-hero__badge { display: flex; align-items: center; justify-content: center; background: none; border: none; box-shadow: none; width: min(100%, 260px); } body.portal-redesign .archive-hero__cat-card { width: 220px; height: 220px; background: #FFFFFF; border-radius: 32px; box-shadow: 0 2px 0 rgba(255,255,255,0.95) inset, 0 8px 32px rgba(24,29,49,0.10), 0 1px 2px rgba(24,29,49,0.05); display: flex; align-items: center; justify-content: center; overflow: hidden; animation: archive-mascot-float 5s ease-in-out infinite; } body.portal-redesign .archive-hero__mascot { width: 190px; height: 190px; object-fit: contain; display: block; } @keyframes archive-mascot-float { 0%, 100% { transform: translateY(0) rotate(-0.5deg); } 50% { transform: translateY(-10px) rotate(0.5deg); } } body.portal-redesign .archive-hero h1 { font-size: clamp(38px, 4.5vw, 60px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.0; } body.portal-redesign .issue-card, body.portal-redesign .issue-card--featured { background: #FFFFFF; border: 1px solid #EEEEEF; box-shadow: 0 1px 2px rgba(24, 29, 49, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; } body.portal-redesign .issue-card:hover, body.portal-redesign .issue-card--featured:hover { transform: translateY(-3px); box-shadow: 0 24px 40px rgba(24, 29, 49, 0.08); } body.portal-redesign .issue-card__number { color: var(--color-brand); font-weight: 800; } /* ===================================================================== СТРАНИЦЫ ВЫПУСКОВ — шапка портала поверх газетного макета ===================================================================== */ body.portal-redesign.issue-page { background: #FAFAFA; padding-top: 0; } body.portal-redesign.issue-page .portal-header { margin-bottom: 0; } body.portal-redesign.issue-page .issue-page__content { padding: 32px 16px 80px; } /* Газетный блок — чуть светлее на белом фоне */ body.portal-redesign.issue-page .paper { background: #FFFFFF; box-shadow: 0 4px 24px rgba(24, 29, 49, 0.06); } /* Нижняя навигация на странице выпуска */ body.portal-redesign .issue-footer-nav { max-width: 960px; margin: 24px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; } body.portal-redesign .issue-footer-nav a { font-size: 14px; font-weight: 600; color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s; } body.portal-redesign .issue-footer-nav a:hover { color: var(--color-brand); } /* ===================================================================== АДАПТИВ ===================================================================== */ @media (max-width: 900px) { body.portal-redesign .weekly-hero { grid-template-columns: 1fr; padding: 32px; gap: 32px; border-radius: 32px; } body.portal-redesign .weekly-hero h1 { font-size: 40px; } body.portal-redesign .weekly-hero__visual { aspect-ratio: 16 / 7; border-radius: 24px; } body.portal-redesign .pulse-grid { grid-template-columns: repeat(3, 1fr); } body.portal-redesign .pulse-card { aspect-ratio: auto; padding: 16px; } body.portal-redesign .rd-bento { grid-template-columns: 1fr; } body.portal-redesign .rd-bento-card { border-radius: 32px; padding: 28px; min-height: 220px; } body.portal-redesign .birthday-grid, body.portal-redesign .rd-skeleton-grid { grid-template-columns: repeat(2, 1fr); } body.portal-redesign .portal-nav a { padding: 8px 14px; font-size: 14px; } body.portal-redesign .portal-footer__inner { padding: 0 20px; flex-direction: column; align-items: flex-start; } } @media (max-width: 540px) { body.portal-redesign .pulse-grid { grid-template-columns: repeat(2, 1fr); } } /* ===================================================================== МОБИЛЬНЫЙ АДАПТИВ — комплексные правки 2026 Принципы: touch-target ≥ 44px · читаемость ≥ 14px · safe-area · snap ===================================================================== */ /* ------------------------------------------------------------------ Шапка — safe-area для notched устройств ------------------------------------------------------------------ */ @media (max-width: 768px) { body.portal-redesign .portal-header__inner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); align-items: center; flex-wrap: nowrap; } /* backdrop-filter на хедере делает его containing block для position:fixed потомков (поведение Safari/Chrome по спецификации CSS). Убираем на мобиле — иначе оверлей бургер-меню позиционируется относительно хедера, а не viewport. */ body.portal-redesign .portal-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #FAFAFA; } } /* ===================================================================== БУРГЕР-МЕНЮ (≤ 768px) ===================================================================== */ @keyframes nav-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Бургер-кнопка: скрыта на десктопе */ body.portal-redesign .burger-btn { display: none; } @media (max-width: 768px) { /* Показываем бургер */ body.portal-redesign .burger-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: none; border-radius: 12px; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: background 0.15s; } body.portal-redesign .burger-btn:hover, body.portal-redesign .burger-btn:active { background: rgba(24, 29, 49, 0.07); } body.portal-redesign .burger-btn__line { display: block; width: 20px; height: 2px; background: var(--text-primary); border-radius: 2px; transform-origin: center; transition: transform 0.25s ease, opacity 0.2s ease, transform 0.25s ease; } /* X при открытии */ body.portal-redesign .burger-btn[aria-expanded="true"] .burger-btn__line:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.portal-redesign .burger-btn[aria-expanded="true"] .burger-btn__line:nth-child(2) { opacity: 0; transform: scaleX(0.3); } body.portal-redesign .burger-btn[aria-expanded="true"] .burger-btn__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Скрываем пилюлю-навигацию — заменяем оверлеем */ body.portal-redesign .portal-nav { display: none; position: fixed; inset: 0; top: 72px; z-index: 200; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4px; padding: 12px max(16px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-bottom)); background: rgba(250, 250, 250, 0.97); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border: none; border-radius: 0; box-shadow: none; overflow-y: auto; width: 100%; } body.portal-redesign .portal-nav.is-open { display: flex; animation: nav-slide-in 0.2s ease both; } body.portal-redesign .portal-nav a { flex: none; width: 100%; min-height: 56px; padding: 0 20px; border-radius: 16px; font-size: 17px; font-weight: 500; color: var(--text-primary); justify-content: flex-start; letter-spacing: 0; } body.portal-redesign .portal-nav a:hover, body.portal-redesign .portal-nav a:active { background: rgba(24, 29, 49, 0.06); border-bottom: none; } body.portal-redesign .portal-nav a[aria-current="page"] { background: var(--color-brand-soft, #FFEAF8); color: var(--color-brand, #EF16B0); font-weight: 600; } } /* ------------------------------------------------------------------ portal-main — исправить конфликт padding-top portal-air.css @560px ставит padding-top: 24px, но portal-redesign.css перебивает его своим 64px. ------------------------------------------------------------------ */ @media (max-width: 768px) { body.portal-redesign .portal-main { padding-top: 28px; } body.portal-redesign .portal-section { padding-top: 36px; } } @media (max-width: 480px) { body.portal-redesign .portal-main { padding-top: 20px; } body.portal-redesign .portal-section { padding-top: 28px; } } /* ------------------------------------------------------------------ Герой — white-space overflow + компактность на телефоне ------------------------------------------------------------------ */ /* Исправление: portal-air.css ставит white-space: nowrap на .weekly-hero h1, из-за чего на экранах 560–900px возможен горизонтальный скролл */ @media (max-width: 900px) { body.portal-redesign .weekly-hero h1 { white-space: normal; overflow-wrap: break-word; } } @media (max-width: 560px) { body.portal-redesign .weekly-hero { padding: 24px 20px 28px; border-radius: 24px; gap: 16px; } body.portal-redesign .weekly-hero h1 { font-size: clamp(30px, 9vw, 44px); line-height: 1.05; margin-bottom: 8px; } body.portal-redesign .weekly-hero__meta { font-size: 13px; margin-bottom: 8px; } body.portal-redesign .weekly-hero__topic { font-size: 15px; line-height: 1.45; margin-bottom: 10px; } body.portal-redesign .weekly-hero__teasers { margin-bottom: 16px; } body.portal-redesign .weekly-hero__teasers li { font-size: 14px; } } /* ------------------------------------------------------------------ Пульс — читаемость лейблов ≥ 14px ------------------------------------------------------------------ */ @media (max-width: 768px) { body.portal-redesign .pulse-card span { font-size: 14px; line-height: 1.4; } } @media (max-width: 480px) { body.portal-redesign .pulse-card { padding: 18px 16px 16px; } body.portal-redesign .pulse-card strong { font-size: clamp(28px, 10vw, 46px); } } /* ------------------------------------------------------------------ Бенто «Разделы портала» — компактнее на телефоне ------------------------------------------------------------------ */ @media (max-width: 540px) { body.portal-redesign .rd-bento-card { border-radius: 28px; padding: 22px 20px; min-height: 190px; } body.portal-redesign .rd-bento__title { font-size: 22px; line-height: 1.1; margin: 8px 0 10px; } body.portal-redesign .rd-bento__text { font-size: 14px; line-height: 1.45; } body.portal-redesign .rd-mascot-wrap { width: 64px; height: 64px; top: 16px; right: 16px; } body.portal-redesign .rd-bento-card--weekly .rd-bento__body { padding-right: 76px; } body.portal-redesign .rd-bento__arrow { margin-top: 18px; font-size: 14px; } } /* ------------------------------------------------------------------ Дни рождения — touch targets ≥ 40px + читаемость ------------------------------------------------------------------ */ @media (max-width: 768px) { body.portal-redesign .birthday-card h3 { font-size: 15px; line-height: 1.25; } /* «Поздравить» / «Telegram не указан» — увеличить зону касания */ body.portal-redesign .birthday-card .portal-link, body.portal-redesign .birthday-card .portal-muted, body.portal-redesign .birthday-shelf-card .portal-link, body.portal-redesign .birthday-shelf-card .portal-muted { min-height: 40px; display: inline-flex; align-items: center; } } @media (max-width: 540px) { body.portal-redesign .birthday-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } body.portal-redesign .birthday-card { padding: 16px; border-radius: 24px; } } /* ------------------------------------------------------------------ Birthday shelf — scroll-snap для свайпа ------------------------------------------------------------------ */ @media (max-width: 768px) { .birthday-shelf { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 12px; } .birthday-shelf > * { scroll-snap-align: start; } .birthday-shelf-card { border-radius: 24px; } } /* ------------------------------------------------------------------ Фильтры команды — touch targets ------------------------------------------------------------------ */ @media (max-width: 768px) { /* Все интерактивные элементы — минимум 40px */ body.portal-redesign .filter-chip { min-height: 40px; padding: 0 14px; font-size: 13px; } body.portal-redesign .filter-chip--toggle { min-height: 40px; padding: 0 16px; } body.portal-redesign .team-advanced__toggle { min-height: 44px; padding: 0 16px; font-size: 14px; } body.portal-redesign .team-controls .team-reset { min-height: 40px; display: inline-flex; align-items: center; font-size: 14px; color: var(--text-secondary); } body.portal-redesign .department-section__curator { /* Невидимая зона касания через padding */ padding: 6px 0; margin: -6px 0; } } /* ------------------------------------------------------------------ Шапка отдела — вертикально на узких экранах ------------------------------------------------------------------ */ @media (max-width: 540px) { body.portal-redesign .department-section__header { flex-direction: column; align-items: flex-start; gap: 2px; } body.portal-redesign .department-section__header h3 { font-size: 18px; } } /* ------------------------------------------------------------------ Архив выпусков — компактность ------------------------------------------------------------------ */ @media (max-width: 775px) { body.portal-redesign .archive-hero__badge { width: 100%; justify-content: center; } body.portal-redesign .archive-hero__cat-card { width: 180px; height: 180px; border-radius: 28px; } body.portal-redesign .archive-hero__mascot { width: 155px; height: 155px; } } @media (max-width: 560px) { body.portal-redesign .archive-hero { border-radius: 28px; padding: 24px 20px; } body.portal-redesign .archive-hero h1 { font-size: clamp(28px, 8vw, 44px); letter-spacing: -0.025em; margin-bottom: 12px; } body.portal-redesign .issue-card { border-radius: 24px; padding: 20px; min-height: 220px; } body.portal-redesign .issue-card h3 { font-size: clamp(19px, 5vw, 26px); line-height: 1.15; } body.portal-redesign .issue-card p:not(.issue-card__date) { font-size: 14px; line-height: 1.45; } } /* ------------------------------------------------------------------ Футер — читаемость + safe-area ------------------------------------------------------------------ */ @media (max-width: 768px) { body.portal-redesign .portal-footer__inner p, body.portal-redesign .portal-footer__inner span { font-size: 14px; line-height: 1.5; } } @supports (padding-bottom: env(safe-area-inset-bottom)) { body.portal-redesign .portal-footer { padding-bottom: calc(48px + env(safe-area-inset-bottom)); } body.portal-redesign .portal-header__inner { padding-top: max(0px, env(safe-area-inset-top)); } }