/* ============================================================ Aston Portal — дизайн-система (макет Claude Design, 03.09.2026) Палитра: глубокий сине-зелёный #0C4D67 + медный акцент #AF7C58. Один файл на весь портал: страницы через page_head(), каталоги, дашборды и клиентские страницы берут переменные отсюда. ============================================================ */ /* ---------- шрифты ---------- Partner — латиница и кириллица. Греческого в нём нет вовсе, поэтому греческий диапазон (и несколько знаков, которых Partner не содержит: ·, →, ✓, ♥) отдан Arimo — он метрически совместим с Helvetica, как и сам Partner, так что подмена в строке не бросается в глаза. Переключение идёт по unicode-range, а не по языку интерфейса: смешанный текст («Κατόψεις · 3 спальни») набирается верно сам собой. */ @font-face{font-family:Partner;src:url(fonts/partner-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Partner;src:url(fonts/partner-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:Partner;src:url(fonts/partner-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:Partner;src:url(fonts/partner-700i.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap} @font-face{font-family:Partner;src:url(fonts/partner-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Partner Cond";src:url(fonts/partner-300c.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:Partner;src:url(fonts/arimo-gr-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap; unicode-range:U+0370-03FF,U+1F00-1FFF,U+00B7,U+2192,U+2713,U+2665} @font-face{font-family:Partner;src:url(fonts/arimo-gr-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap; unicode-range:U+0370-03FF,U+1F00-1FFF,U+00B7,U+2192,U+2713,U+2665} /* ---------- палитра ---------- Светлая — состояние по умолчанию (bare :root), тёмная приходит и от системной настройки, и от переключателя. Компоненты красятся ТОЛЬКО через переменные: цвет, объявленный внутри media/[data-theme], не применится в «системном» состоянии без атрибута. */ :root{ --brand:#0C4D67; /* фирменный сине-зелёный */ --brand-d:#08394D; /* темнее — для нажатий и глубины */ --accent:#AF7C58; /* медный: главное действие, числа-акценты */ --accent-h:#C08F6A; --teal:#359AAD; /* маркеры, точки ленты */ --bg:#F2F5F7; /* фон страницы */ --surf:#FFFFFF; /* карточки, панели */ --surf2:#EDF4F6; /* вложенные плашки, hover */ --line:#C5E4EB; /* границы и разделители */ --line-s:#A0CCD6; /* сильная линия: полосы счётчиков, таблицы */ --text:#2E2F37; /* основной текст */ --head:#0C4D67; /* заголовки и акцентные ссылки */ --muted:#636C70; /* подписи, вторичное */ --dim:#93A3A8; /* самое тихое: даты, номера строк */ --on-brand:#FFFFFF; /* текст на фирменном фоне */ --on-brand-2:#A0CCD6; /* вторичный текст на фирменном фоне */ --green:#1F7A4D; --amber:#B4690E; --red:#C23A3A; --green-b:rgba(31,122,77,.12); --amber-b:rgba(180,105,14,.12); --red-b:rgba(194,58,58,.10); --radius:16px; --radius-l:24px; --radius-s:10px; --shadow:0 10px 34px rgba(12,77,103,.10); /* Паттерн: на светлом — медный, на тёмном медный по синему почти не читается, поэтому там он светло-бирюзовый. Цвет и плотность задаются переменными. */ --pattern:#AF7C58; --pattern-op:.5; --accent-b:rgba(175,124,88,.12); /* мягкая медная подложка: заметно, но тише заливки */ --accent-rgb:175,124,88; --accent2:#C08F6A; --font:Partner,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } @media (prefers-color-scheme:dark){:root:not([data-theme=light]){ --brand:#0C4D67; --brand-d:#072F41; --accent:#C08F6A; --accent-h:#D2A382; --teal:#4FB3C6; --bg:#071E29; --surf:#0C4D67; --surf2:#125770; --line:rgba(255,255,255,.16); --line-s:rgba(255,255,255,.26); --text:#E8F3F6; --head:#FFFFFF; --muted:#A0CCD6; --dim:#7FA9B5; --on-brand:#FFFFFF; --on-brand-2:#A0CCD6; --green:#4ED08D; --amber:#E5A64B; --red:#F08A8A; --green-b:rgba(78,208,141,.14); --amber-b:rgba(229,166,75,.14); --red-b:rgba(240,138,138,.13); --shadow:0 14px 40px rgba(0,0,0,.34); --pattern:#C5E4EB; --pattern-op:.42; --accent-b:rgba(192,143,106,.20); --accent-rgb:192,143,106; --accent2:#D2A382; }} :root[data-theme=dark]{ --brand:#0C4D67; --brand-d:#072F41; --accent:#C08F6A; --accent-h:#D2A382; --teal:#4FB3C6; --bg:#071E29; --surf:#0C4D67; --surf2:#125770; --line:rgba(255,255,255,.16); --line-s:rgba(255,255,255,.26); --text:#E8F3F6; --head:#FFFFFF; --muted:#A0CCD6; --dim:#7FA9B5; --on-brand:#FFFFFF; --on-brand-2:#A0CCD6; --green:#4ED08D; --amber:#E5A64B; --red:#F08A8A; --green-b:rgba(78,208,141,.14); --amber-b:rgba(229,166,75,.14); --red-b:rgba(240,138,138,.13); --shadow:0 14px 40px rgba(0,0,0,.34); --pattern:#C5E4EB; --pattern-op:.42; --accent-b:rgba(192,143,106,.20); --accent-rgb:192,143,106; --accent2:#D2A382; } /* ---------- основа ---------- */ *{box-sizing:border-box;margin:0;padding:0} body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;min-height:100vh; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} a{color:var(--head);text-decoration:none} a:hover{color:var(--accent)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} h1,h2,h3,h4{color:var(--head);letter-spacing:-.02em;text-wrap:balance} .num,[data-num]{font-variant-numeric:tabular-nums} /* ---------- безопасная зона сверху: одно правило на весь портал ---------- В установленном приложении страница уходит под статус-бар iPhone, а iOS 26 рисует под часами размытие глубже безопасной зоны — шапку приходится опускать ещё на 24px (решение владельца 22.09.2026). Раньше этот расчёт копировался в каждую страницу со своей шапкой, и новые страницы про него забывали. Теперь источник один: страница объявляет только свой базовый отступ через --hdr-pad. Селектор с body сильнее правил самой страницы, поэтому даже её собственный padding-шорткат в медиа-запросе этот отступ не сбрасывает. */ :root{--safe-top:env(safe-area-inset-top);--app-top:0px} @media (display-mode: standalone){:root{--app-top:24px}} body > header.pt{--hdr-pad:14px} /* обычная страница портала */ body > .app > header{--hdr-pad:12px} /* каталоги: первичка, вторичка, коммерция */ body > .topbar{--hdr-pad:10px} /* дашборды */ body > .hd{--hdr-pad:18px} /* клиентская страница подборки */ body > header.pt, body > .app > header, body > .topbar, body > .hd{padding-top:calc(var(--hdr-pad) + var(--app-top) + var(--safe-top))} /* ---------- шапка страницы ---------- */ header.pt{display:flex;align-items:center;gap:12px;padding:14px 22px;background:var(--surf); border-bottom:1px solid var(--line)} header.pt h1{font-size:15px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap} header.pt h1 a{color:var(--head)} header.pt .sec{color:var(--muted);font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;min-width:0} header.pt .sp{margin-left:auto;display:flex;gap:9px;align-items:center;flex-shrink:0} .theme-btn{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:100px; padding:6px 12px;font:inherit;font-size:12px;cursor:pointer} .theme-btn:hover{border-color:var(--accent);color:var(--accent)} /* верхнее меню разделов (главная и внутренние) */ .pnav{display:flex;gap:22px;font-size:14px;font-weight:700;flex-wrap:wrap} .pnav a{color:var(--muted)} .pnav a:hover{color:var(--accent)} .pnav a.on{color:var(--head)} /* Кнопка меню — только на узких экранах: пять пунктов в строку туда не влезают и разворачиваются в столбец на треть экрана. */ .burger{display:none;background:transparent;border:1px solid var(--line);border-radius:100px; padding:7px 11px;cursor:pointer;color:var(--muted);line-height:0} .burger:hover{border-color:var(--accent);color:var(--accent)} .burger span{display:block;width:16px;height:2px;background:currentColor;border-radius:2px} .burger span+span{margin-top:4px} /* Пункты, которые нужны только в мобильном меню: на широком экране те же действия живут кнопками в шапке. */ .mobonly{display:none} .navtheme{font:inherit;font-weight:700;text-align:left;background:none;border:0;cursor:pointer;color:var(--muted)} .navtheme:hover{color:var(--accent)} @media (max-width:860px){ header.pt{position:relative;flex-wrap:nowrap;gap:10px;padding:12px 14px} body > header.pt{--hdr-pad:12px} header.pt .sec{display:none} /* Логотип поджимаем: с полной разрядкой он вместе с иконками не помещался в строку и выталкивал аватар за край экрана — появлялся горизонтальный скролл. */ header.pt h1{font-size:13px;letter-spacing:.14em} .burger{display:inline-flex;flex-direction:column;justify-content:center;flex-shrink:0;order:-1} .theme-btn{display:none} /* переехал в меню */ .sp{gap:8px} .pnav{display:none;position:absolute;left:0;right:0;top:100%;z-index:1100;flex-direction:column; gap:0;padding:6px 0;background:var(--surf);border-bottom:1px solid var(--line);box-shadow:var(--shadow)} .pnav.open{display:flex} .pnav a,.pnav .navtheme{padding:13px 18px;font-size:15px} .pnav a.on{background:var(--surf2)} .mobonly{display:block;border-top:1px solid var(--line);margin-top:4px;padding-top:13px} } /* Совсем узкие: кнопка аналитики остаётся в шапке, но подпись сокращается до одного слова — в два слова строка не помещается и вылезает за экран. */ .btn.mark .smtxt{display:none} @media (max-width:560px){ header.pt h1{font-size:12px;letter-spacing:.1em} .sp .btn.mark{padding:6px 11px!important;font-size:12.5px!important} .btn.mark .lgtxt{display:none} .btn.mark .smtxt{display:inline} .pnav a.mobonly[href$="/news/"]{display:none} /* в меню дубль уже не нужен */ } /* ---------- аватар-меню ---------- */ .avwrap{position:relative} .avbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);padding:0;cursor:pointer; background:var(--surf2);overflow:hidden;display:flex;align-items:center;justify-content:center; font:inherit;font-weight:700;color:var(--muted);font-size:14px;line-height:1} .avbtn img{width:100%;height:100%;object-fit:cover;display:block} .avbtn:hover{border-color:var(--accent)} .avbtn.viewas{box-shadow:0 0 0 2.5px var(--amber)} .avpop{position:absolute;top:calc(100% + 10px);right:0;z-index:1200;width:242px;background:var(--surf); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px} .avpop[hidden]{display:none} .avhead{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px} .avname{font-weight:700;font-size:14px;color:var(--head)} .avmail{color:var(--muted);font-size:12px;margin-top:3px;word-break:break-all} .avrole{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:700;background:var(--surf2); color:var(--muted);border-radius:100px;padding:3px 10px;text-transform:uppercase;letter-spacing:.06em} .avroles{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} .avroles .avrole{margin-top:0;cursor:pointer;border:1.5px solid transparent;font:inherit;font-size:10.5px; font-weight:700;text-transform:uppercase;letter-spacing:.06em} .avroles .avrole:hover{color:var(--head)} .avroles .avrole.on{background:var(--accent);color:#fff;cursor:default} .avviewhint{font-size:10.5px;color:var(--dim);margin-top:9px;line-height:1.5} .avout{display:block;width:100%;text-align:left;font:inherit;background:none;border:none;padding:10px 12px; border-radius:var(--radius-s);color:var(--red);font-weight:600;cursor:pointer} .avout:hover{background:var(--surf2)} /* ---------- раскладка ---------- ВНИМАНИЕ: .wrap — имя историческое и слишком общее. Дашборды называют так свою прокручиваемую область таблицы во всю ширину и глушат эти свойства у себя. Новым страницам с нестандартной раскладкой делать так же. */ .wrap{max-width:1180px;margin:0 auto;padding:26px 20px 70px} /* ---------- кнопки: пилюли ---------- */ .btn{font:inherit;font-weight:700;font-size:14px;cursor:pointer;background:var(--surf); border:1px solid var(--line);border-radius:100px;padding:9px 17px;color:var(--head); display:inline-flex;align-items:center;gap:7px;transition:background .14s,border-color .14s,color .14s} .btn:hover{border-color:var(--accent);color:var(--accent)} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn.primary:hover{background:var(--accent-h);border-color:var(--accent-h);color:#fff} .btn.mark{background:var(--accent-b);border-color:var(--accent);color:var(--accent)} .btn.mark:hover{background:var(--accent);border-color:var(--accent);color:#fff} .btn.soft{background:var(--surf2);border-color:transparent;color:var(--head)} .btn.soft:hover{background:var(--line);color:var(--head)} .btn.ghost{background:transparent;border-color:var(--line);color:var(--muted)} .btn.danger{color:var(--red);border-color:var(--red)} .btn.danger:hover{background:var(--red-b);color:var(--red)} .btn[disabled]{opacity:.5;cursor:default} /* ---------- карточки ---------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px} a.card{display:block;background:var(--surf);border:1px solid var(--line);border-radius:var(--radius); padding:20px;color:inherit;position:relative;overflow:hidden; transition:transform .14s,border-color .14s,box-shadow .14s} a.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)} a.card.c2::before{background:var(--teal)} a.card.c3::before{background:var(--amber)} a.card.c4::before{background:var(--brand)} a.card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow)} .card .ic{font-size:24px;line-height:1} .card .nm{font-weight:700;font-size:16px;margin-top:10px;color:var(--head);letter-spacing:-.01em} .card .ds{color:var(--muted);font-size:12.5px;margin-top:6px;line-height:1.55} .card .go{margin-top:12px;font-size:12.5px;color:var(--accent);font-weight:700} .card .soon{position:absolute;top:13px;right:13px;font-size:10.5px;font-weight:700;color:var(--amber); background:var(--amber-b);border-radius:100px;padding:3px 10px} /* ---------- таблицы ---------- */ table.t{width:100%;border-collapse:collapse;background:var(--surf);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden} table.t th{text-align:left;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em; font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line)} table.t td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle} table.t tr:last-child td{border-bottom:0} table.t tbody tr:hover td{background:var(--surf2)} /* ---------- поля ---------- */ select,input[type=text],input[type=email],input[type=url],input[type=number],input[type=date], input[type=search],input[type=password],textarea{ font:inherit;color:var(--text);background:var(--surf);border:1px solid var(--line); border-radius:var(--radius-s);padding:9px 12px;outline:none} input:focus,select:focus,textarea:focus{border-color:var(--accent)} input::placeholder,textarea::placeholder{color:var(--dim)} label.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:600} /* Поле поиска каталогов (первичка, вторичка, коммерция). Сотрудники жаловались, что на телефоне оно сливается с фильтрами: та же белая рамка, а в сетке стояло последним (01.10.2026). Теперь его отличают три вещи: медная рамка потолще, лупа слева и первое место в мобильной сетке. Селектор с body сильнее правил самих каталогов, поэтому их старые копии не перебивают. */ body .filters .searchfld{ border:1.5px solid var(--accent);background:var(--surf); padding-left:34px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:11px center;background-size:16px 16px} body .filters .searchfld::placeholder{color:var(--muted)} body .filters .searchfld:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(175,124,88,.18)} /* type=search рисует свой крестик очистки; в WebKit он плохо сочетается с нашей рамкой */ body .filters .searchfld::-webkit-search-decoration{-webkit-appearance:none} @media (max-width:820px){ /* на телефоне поиск первым, во всю ширину, чуть выше остальных полей */ body .filters .searchfld{order:-1;grid-column:1 / -1;min-width:0;width:100%;padding-top:12px;padding-bottom:12px;font-size:16px} } /* ---------- мелочи ---------- */ .tag{display:inline-block;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:700; background:var(--surf2);color:var(--muted);letter-spacing:.02em} .tag.admin{background:var(--red-b);color:var(--red)} .tag.editor{background:var(--surf2);color:var(--head)} .tag.off{opacity:.5} .note{color:var(--muted);font-size:12.5px;line-height:1.65;background:var(--surf); border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-top:18px} h2.sec{font-size:12px;margin:30px 0 12px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em; font-weight:700} .msg{background:var(--green-b);color:var(--green);border-radius:var(--radius-s);padding:11px 15px; margin:0 0 16px;font-weight:700} .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* ---------- фирменная панель с паттерном ---------- Паттерн — белая PNG-маска: цвет задаётся currentColor через mask, поэтому одна картинка работает и на светлой, и на тёмной теме. */ .brandpanel{position:relative;overflow:hidden;border-radius:var(--radius-l);background:var(--surf); border:1px solid var(--line);padding:38px 42px 42px} .brandpanel.solid{background:var(--brand);border-color:transparent;color:var(--on-brand)} .brandpanel.solid h1,.brandpanel.solid h2,.brandpanel.solid a{color:var(--on-brand)} .brandpanel::after{content:"";position:absolute;top:-70px;right:-90px;width:600px;height:600px; border-radius:50%;background:var(--pattern);opacity:var(--pattern-op);pointer-events:none; -webkit-mask-image:url(pattern.webp),radial-gradient(circle at center,#000 40%,transparent 78%); mask-image:url(pattern.webp),radial-gradient(circle at center,#000 40%,transparent 78%); -webkit-mask-size:400px,100% 100%;mask-size:400px,100% 100%; -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat; -webkit-mask-composite:source-in;mask-composite:intersect} .brandpanel.solid::after{background:var(--on-brand-2);opacity:.2} .brandpanel > *{position:relative} @media (max-width:720px){ .brandpanel{padding:24px 20px 26px;border-radius:var(--radius)} .brandpanel::after{width:340px;height:340px;top:-50px;right:-70px; -webkit-mask-size:240px,100% 100%;mask-size:240px,100% 100%} header.pt{padding:12px 14px} body > header.pt{--hdr-pad:12px} .wrap{padding:20px 14px 60px} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}