/* Component styles for the Projects section — built only on tokens.css. */ .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,3.3vw,40px)} /* Header */ .hdr{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)} .hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px} .hdr__brand{display:flex;align-items:center;gap:12px;min-width:0} .hdr__brand .logo{height:32px;width:auto} .hdr__brand .sub{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-label);white-space:nowrap} .hdr__nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px)} .hdr__nav a{font-size:14px;font-weight:500;opacity:.85;white-space:nowrap} /* only text links change color on hover — never the .btn (its text must stay white) */ .hdr__nav a:not(.btn):hover,.hdr__nav a.active:not(.btn){opacity:1;color:var(--red)} .hdr__nav a.btn{opacity:1;color:#fff} .hdr__nav a.btn--dark:hover{background:var(--red);color:#fff} /* Two-level menu — same three groups and the same dark panel as the landing. The panel is absolute inside the sticky .hdr, so it drops over the content. */ .hdr__nav{height:72px} .hdr__home{display:none} .navi{position:relative;height:100%;display:flex;align-items:center} .navi__t{display:flex;align-items:center;gap:8px;height:100%;padding:0 2px;font:inherit;font-size:14px;font-weight:500;color:var(--ink);opacity:.85;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:opacity .18s,border-color .18s} .navi__t svg{width:9px;height:6px;flex:none;transition:transform .22s} .navi:hover .navi__t,.navi.open .navi__t{opacity:1} .navi.open .navi__t{border-bottom-color:var(--red)} .navi.open .navi__t svg{transform:rotate(180deg)} .drop{position:absolute;top:72px;left:0;right:0;background:var(--dark);color:#fff;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s,transform .28s cubic-bezier(.33,1,.68,1),visibility .22s} .drop.open{opacity:1;visibility:visible;transform:none} .drop__in{max-width:1200px;margin:0 auto;padding:30px clamp(20px,3.3vw,40px) 32px;display:grid;grid-template-columns:1.5fr 300px;gap:34px} .drop__col h5{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:4px} .drop__l{display:block;padding:12px 0 11px;border-bottom:1px solid rgba(255,255,255,.08)} .drop__l b{display:flex;align-items:center;font-size:17px;font-weight:600;line-height:1.15;color:rgba(255,255,255,.92);transition:color .18s} .drop__l b::before{content:"";width:8px;height:8px;background:var(--red);flex:none;opacity:0;max-width:0;overflow:hidden;transition:max-width .22s,opacity .22s,margin-right .22s} .drop__l:hover b,.drop__l:focus-visible b{color:#fff} .drop__l:hover b::before,.drop__l:focus-visible b::before{opacity:1;max-width:8px;margin-right:12px} .drop__l span{display:block;font-size:13px;line-height:19px;color:var(--muted);margin-top:5px} .drop__card{background:#1e1e1e;padding:24px 24px 26px;display:flex;flex-direction:column} .drop__card--red{background:var(--red)} .drop__card h5{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:14px} .drop__card p{font-size:19px;font-weight:600;line-height:26px;margin-bottom:auto} .drop__card .mail{display:block;font-size:16px;font-weight:500;text-decoration:underline;text-underline-offset:4px;margin-top:18px} .drop__card .tel{font-size:18px;font-weight:700;margin-top:6px} .drop__card .go{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:6px;align-self:flex-start;transition:border-color .2s} .drop__card .go:hover{border-bottom-color:#fff} .navi__t:focus-visible,.drop__l:focus-visible{outline:2px solid var(--red);outline-offset:3px} @media(max-width:720px){ .hdr__in{gap:10px;height:60px} .hdr__nav{height:60px} .hdr__brand .logo{height:26px} .hdr__brand .sub{display:none} .hdr__nav{gap:12px} .hdr__nav a{font-size:13px} /* Группы прячем: полное меню — в шторке лендинга, здесь остаётся «Главная». */ .navi,.drop{display:none} .hdr__home{display:inline-flex} } @media(max-width:430px){ .hdr__nav{gap:9px} .hdr__nav a{font-size:12px} .hdr__nav a.btn{padding:8px 11px;font-size:11px} } /* Partner section tabs — moved out of the header into the content area. Underline-style: muted inactive, ink on hover, ink + red underline on active. */ .ptabs{border-bottom:1px solid var(--line);margin:0 0 clamp(24px,4vw,36px)} .ptabs__row{display:flex;gap:clamp(18px,3vw,38px);overflow-x:auto;scrollbar-width:none} .ptabs__row::-webkit-scrollbar{display:none} .ptabs__tab{ position:relative;padding:2px 0 15px;white-space:nowrap; font-size:14px;font-weight:600;text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--muted); border-bottom:2px solid transparent;margin-bottom:-1px; transition:color .18s,border-color .18s; } .ptabs__tab:hover{color:var(--ink)} .ptabs__tab.is-active{color:var(--ink);border-color:var(--red)} @media(max-width:640px){ .ptabs__row{gap:20px} .ptabs__tab{font-size:13px;padding-bottom:12px} } /* ——— Полоса проекта (.pbar) ———————————————————————————————————————————————— Единственное, что липнет на карточке проекта. Шапка сайта здесь отпущена (.hdr--flow): при чтении проекта нужен переключатель разделов, а не меню с контактами — иначе к экрану прибито 122px хрома. Внутри полосы только вкладки. Знак Nurion и название проекта из неё убраны: и то и другое уже есть на странице выше, а прилипшая полоса повторяла бы их третий раз. Класс is-stuck по-прежнему ставит js/timeline.js по маячку выше — теперь он переключает не название, а цвет плашки. */ .hdr--flow{position:static} .pbar-sentinel{height:1px;margin-bottom:-1px} /* min-height держит высоту полосы постоянной: без неё высота зависела бы от раскладки вкладок, и любое изменение при прилипании сдвигало бы страницу. display:flex — не ради раскладки, а ради высоты: полоса раздаёт её .pbar__in, та — строке вкладок, строка — самим вкладкам (см. выравнивание ниже). */ .pbar{ position:sticky;top:0;z-index:45;min-height:40px; display:flex;align-items:stretch; background:#fff;transition:background-color .2s ease,border-color .2s ease; } /* .pbar__in — это .wrap: flex:1 даёт ей всю ширину полосы, max-width и margin:0 auto из .wrap оставляют колонку по центру и на своей сетке. */ .pbar__in{flex:1;min-width:0;display:flex;align-items:stretch} /* Выравнивание вкладок. Коробку .ptabs__tab на обычной странице задаёт её padding: нижние 15px опускают подчёркивание к линии раздела. Внутри полосы тот же padding поднимал текст на 6px выше её середины — вкладки заметно не совпадали с остальным содержимым. Здесь коробка вкладки растянута во всю высоту полосы, текст центрируется флексом, а подчёркивание само садится на её нижнюю грань. padding-top:2px компенсирует 2px нижней рамки: без него центр текста уезжает на пиксель вверх. */ .pbar .ptabs__row{flex:0 1 auto;align-items:stretch} .pbar .ptabs__tab{display:flex;align-items:center;padding-top:2px;padding-bottom:0} /* Прилипшая полоса — тёмная плашка. Белая на фоне --bg (#fbfbfb) она теряла край: повиснув над текстом, читалась не элементом навигации, а обрывком страницы, который волочится за прокруткой. Тёмная отделяется сама, и на ней слышно красное подчёркивание активной вкладки. Цвет — тот же --dark, что у мега-панели меню и тёмных блоков лендинга. На своём месте полоса остаётся светлой: тёмная плашка прямо под шапкой спорила бы с заголовком проекта, который она же и должна пропустить вперёд. */ .pbar.is-stuck{background:var(--dark);border-bottom-color:transparent} .pbar.is-stuck .ptabs__tab{color:rgba(255,255,255,.58)} .pbar.is-stuck .ptabs__tab:hover{color:#fff} .pbar.is-stuck .ptabs__tab.is-active{color:#fff;border-bottom-color:var(--red)} .pbar.is-stuck .ptabs__tab .n{color:rgba(255,255,255,.42)} .pbar.is-stuck .ptabs__tab.is-active .n{color:var(--red)} /* Проект, у которого все материалы в тизере, вкладок не имеет — и показывать в полосе больше нечего (знак с названием из неё ушли). Поэтому она схлопывается в ноль: 40px пустой тёмной плашки были бы чистым шумом. Высоту меряет timeline.js и пишет в --pbar-h, так что липкая правая колонка «Обзора» и якоря (#teaser, #data-room) сами теряют лишний отступ. Идут после .is-stuck: одинаковая специфичность, побеждает порядок. */ .pbar--bare{min-height:0;border-bottom-color:transparent} .pbar--bare.is-stuck{background:transparent} /* Page shell. Vertical padding only (longhand) so .wrap keeps ownership of the horizontal gutter — a `padding: … 0 …` shorthand here would zero it and push content to the screen edge, misaligned with the header. */ .page{padding-top:clamp(32px,5vw,64px);padding-bottom:96px} .page__head{margin-bottom:32px} .page__eyebrow{margin-bottom:10px} .page__title{font-size:clamp(34px,6vw,56px)} .page__intro{max-width:640px;margin-top:14px;color:#333;font-size:17px} /* Filter chips */ .chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0} .chips:last-of-type{margin-bottom:32px} .chips__label{margin-right:6px;min-width:56px} @media(max-width:520px){.chips__label{min-width:0;flex-basis:100%;margin-bottom:2px}} .chip{ display:inline-flex;align-items:center;gap:6px; border:1px solid var(--line);background:#fff;color:var(--ink); padding:8px 14px;font-size:13px;font-weight:600;text-transform:uppercase; letter-spacing:.02em;border-radius:var(--radius);transition:all .15s; } .chip:hover{border-color:var(--ink)} .chip.active{background:#000;color:#fff;border-color:#000} .chip .n{color:var(--muted);font-weight:600} .chip.active .n{color:#bbb} /* Live filtering */ .card.is-hidden,.prow.is-hidden,.rd-section.is-hidden{display:none} .filters-bar .chip{cursor:pointer;transition:background .12s,border-color .12s,color .12s} .rd-section__count,.chip .n{transition:opacity .12s} /* Readiness sections */ .rd-section{margin-bottom:44px} .rd-section__head{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:20px} .rd-section__title{font-size:clamp(18px,2.4vw,26px)} .rd-section__count{color:var(--muted);font-weight:700;font-size:14px} /* Readiness badge */ .rd-badge{display:inline-flex;align-items:center;align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:5px 10px;border-radius:var(--radius);border:1px solid transparent;line-height:1} .rd--completed{background:var(--red);color:#fff} .rd--inprogress{background:var(--muted);color:#fff} .rd--preparing{background:#fff;color:var(--ink);border-color:var(--ink)} .card__cover .rd-badge{position:absolute;left:10px;bottom:10px} /* Readiness checklist */ .checklist{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px} .ck{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)} .ck i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-style:normal;font-size:11px;font-weight:700;border-radius:var(--radius)} .ck--on{color:var(--ink)} .ck--on i{background:var(--ink);color:#fff} .ck--off i{background:#ededed;color:var(--muted)} .checklist--full{flex-direction:column;gap:8px;margin-top:4px} .checklist--full .ck{font-size:12px} .ckbox{display:block;font-size:14px;margin-bottom:8px;cursor:pointer} .ckbox input{margin-right:8px} /* Card grid */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.grid{grid-template-columns:1fr}} .card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:box-shadow .2s,transform .2s} .card:hover{box-shadow:0 6px 26px rgba(0,0,0,.10)} /* Single-column mobile: touch has no hover, and the hairline border is nearly invisible on the off-white page. Give each tile a firmer edge + a soft resting shadow so its bounds are unambiguous. Radius stays 0 to match the landing. */ @media(max-width:640px){ .card{border-color:#d7d7d7;box-shadow:0 1px 3px rgba(0,0,0,.06)} } .card__cover{position:relative;aspect-ratio:16/10;background:#ededed;overflow:hidden} .card__cover img{width:100%;height:100%;object-fit:cover} .card__cover .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c4c4c4;font-weight:800;text-transform:uppercase;letter-spacing:2px;font-size:13px} .card__badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap} .card__cover .badge--gov{position:absolute;top:10px;right:10px} .card__body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1} .card__title{font-size:20px;font-weight:700;text-transform:none;letter-spacing:0;line-height:1.15} .card__geo{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:var(--ls-label)} .card__desc{color:#444;font-size:14px;flex:1} /* two stacked rows: investment line (label left, value right) over the tag chips, so the "ИНВЕСТИЦИИ ОТ" label owns a full-width row and never wraps mid-phrase */ .card__foot{display:flex;flex-direction:column;gap:10px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)} .card__inv{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .card__inv .k{white-space:nowrap;margin-bottom:0} .card__inv .v{font-weight:700;font-size:16px;text-align:right} /* Pinned metrics under the entry sum: the returns an investor scans for before opening anything. Set below the sum so the ask stays the tile's anchor. */ .card__kpis{display:flex;flex-direction:column;gap:6px} .card__kpi{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .card__kpi .k{margin-bottom:0;font-size:11px;line-height:1.3} /* Capped at two lines: a tile is a scan surface, and one editor pasting a full sentence must not stretch its card out of the grid's rhythm. The whole value is always readable one click away, in the returns block. */ .card__kpi .v{font-weight:700;font-size:14px;text-align:right;overflow-wrap:anywhere; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tags{display:flex;gap:6px;flex-wrap:wrap} .tag{border:1px solid var(--line);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;font-weight:600} /* Partner catalog ledger rows — variable height, data-driven rail. Tiles (.card) stay for /portfolio and the cabinet. */ .prow{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;padding:32px 0;border-bottom:1px solid var(--line)} .prow:hover .prow__title{color:var(--red)} .prow__media{grid-column:1/5} .prow__num{display:block;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--red);font-variant-numeric:tabular-nums} .prow__cover{position:relative;aspect-ratio:16/10;background:#ededed;overflow:hidden} .prow__cover img{width:100%;height:100%;object-fit:cover} .prow__cover .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c4c4c4;font-weight:800;text-transform:uppercase;letter-spacing:2px;font-size:13px} .prow__body{grid-column:5/10;padding-right:8px} .prow__kick{margin-top:22px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .prow__kick span:not(:first-child)::before{content:'· '} .prow__gov{color:var(--blue)} .prow__lic{color:var(--red)} .prow__title{font-size:22px;font-weight:700;text-transform:none;letter-spacing:0;line-height:1.15;margin-top:6px;transition:color .15s} .prow__desc{font-size:15px;line-height:1.55;color:#444;margin-top:10px;max-width:62ch} .prow__rail{grid-column:10/13;border-left:1px solid var(--line);padding-left:24px;margin-top:22px;align-self:start} .prow__inv .k{font-size:11px;margin-bottom:2px} .prow__inv .v{font-size:23px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums} .prow__kpi{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding:7px 0;font-size:13px} .prow__kpi:first-child{border-top:0;padding-top:0} .prow__inv+.prow__kpi{margin-top:12px} .prow__kpi .k{font-size:11px;margin:0;line-height:1.3} .prow__kpi .v{font-weight:700;text-align:right;overflow-wrap:anywhere} .prow__deal{border-top:1px solid var(--line);padding-top:8px;margin-top:2px;font-size:13px;line-height:1.45} .prow__deal:first-child{border-top:0;padding-top:0;margin-top:0} .prow__deal .k{font-size:11px;display:block;margin-bottom:2px} .prow__stage{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .prow__stage b{color:var(--ink)} @media(max-width:920px){ .prow{grid-template-columns:1fr;gap:0} .prow__media,.prow__body,.prow__rail{grid-column:1/-1} .prow__rail{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px;margin-top:16px} .prow__kick{margin-top:14px} } .badge--lic{background:var(--red)} /* Detail */ /* Vertical padding only — see .page note; keeps .wrap's horizontal gutter. */ .detail{padding-top:clamp(28px,4vw,56px);padding-bottom:96px} /* Back-to-list control — a bordered button so it reads as clickable, not as a muted caption lost above the eyebrow. Ghost by default, fills ink on hover; the arrow slides left to reinforce "back". */ .detail__back{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;padding:9px 16px 9px 13px;border:1px solid var(--ink);background:#fff;color:var(--ink);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);transition:background .15s,color .15s} .detail__back:hover{background:var(--ink);color:#fff} .detail__back:focus-visible{outline:2px solid var(--red);outline-offset:2px} .detail__back-arr{font-size:15px;line-height:1;transition:transform .15s} .detail__back:hover .detail__back-arr{transform:translateX(-3px)} @media(prefers-reduced-motion:reduce){.detail__back-arr{transition:none}} /* Detail header ("asset dossier") */ .detail__head{margin-bottom:clamp(28px,4vw,44px)} .detail__meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-bottom:14px} .detail__eyebrow{text-transform:uppercase;letter-spacing:var(--ls-label);font-size:12px;font-weight:600;color:var(--muted)} .titlebar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap} /* 16ch was too tight a measure for a 60px display heading — long titles broke into four short lines. 26ch (~24 uppercase glyphs) keeps a comfortable measure, `balance` evens the lines instead of leaving a one-word orphan, and min-width:0 lets the h1 shrink beside the admin edit button rather than pushing it onto its own row. */ .detail__title{font-size:clamp(28px,5.2vw,60px);max-width:26ch;min-width:0;text-wrap:balance} .detail__rule{border:0;border-top:2px solid var(--ink);margin:22px 0 0} .detail__lead{max-width:62ch;margin-top:20px} .detail__lead p{font-size:clamp(18px,2vw,22px);line-height:1.5;color:#2a2a2a;font-weight:400;margin:0} .detail__soon{color:var(--muted);font-size:16px;padding:8px 0 4px} .editbtn{display:inline-flex;align-items:center;gap:8px;flex:none;margin-top:8px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);transition:all .15s} .editbtn:hover{background:#000;color:#fff;border-color:#000} .editbtn svg{display:block} .dataroom-note{margin-top:12px;font-size:13px;color:var(--muted)} .dataroom-note a{color:var(--red)} /* Drag & drop upload */ .dropzone{position:relative;border:2px dashed var(--line);background:#fafafa;padding:26px 18px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s} .dropzone:hover{border-color:var(--muted)} .dropzone.is-drag{border-color:var(--red);background:#fff4f4} .dropzone__icon{font-size:28px;line-height:1;margin-bottom:8px;color:var(--muted)} .dropzone__text{font-size:15px;font-weight:600} .dropzone__browse{color:var(--red);text-decoration:underline} .dropzone__list{list-style:none;margin:16px 0 0;padding:0;text-align:left} .dropzone__list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;background:#fff;border:1px solid var(--line);margin-bottom:6px;font-size:13px} /* Detail layout: text (left) + readiness/facts (right, sticky as one unit) */ .detail__layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; column-gap:48px; align-items:start; } .detail__main{min-width:0} /* Правая колонка липнет ПОД полосой проекта, иначе уезжает ей за спину. Высоту полосы меряет js/timeline.js (--pbar-h); у проекта без вкладок полосы нет, липнет обычная шапка — на этот случай запас 73px. */ .detail__col2{position:sticky;top:calc(var(--pbar-h,73px) + 15px);display:flex;flex-direction:column;gap:20px} /* Якоря, на которые ведёт редирект с закрытого файла и ссылка из «Обзора»: без этого заголовок секции встаёт под липкую полосу. */ #teaser,#data-room{scroll-margin-top:calc(var(--pbar-h,73px) + 16px)} .detail__side{display:flex;flex-direction:column;gap:20px} /* Long-form reading: capped measure, comfortable rhythm */ .prose{max-width:68ch;font-size:17px;line-height:1.72;color:#1e1e1e} .prose>*:first-child{margin-top:0} .prose p{margin:0 0 1.05em} .prose h2{font-size:22px;text-transform:none;letter-spacing:-.2px;margin:1.6em 0 .5em} .prose h3{font-size:18px;text-transform:none;letter-spacing:0;margin:1.4em 0 .4em} .prose ul,.prose ol{margin:0 0 1.05em 22px} .prose li{margin:0 0 .4em} .prose a{color:var(--red);text-decoration:underline;text-underline-offset:2px} .prose blockquote{margin:1.2em 0;padding:4px 0 4px 18px;border-left:3px solid var(--line);color:#555} .prose hr{border:0;border-top:1px solid var(--line);margin:1.8em 0} .prose strong{font-weight:700} .prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f2f2f2;padding:1px 5px;font-size:.9em} /* Readiness rail — the signature element */ .rail{display:flex;gap:6px;margin:6px 0 16px} .rail__seg{flex:1;display:flex;flex-direction:column;gap:7px} .rail__dot{height:4px;background:#e4e4e4} .rail__lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)} .rail__seg--done .rail__dot{background:var(--ink)} .rail__seg--done .rail__lbl{color:var(--ink)} .rail__seg--active .rail__dot{background:var(--red)} .rail__seg--active .rail__lbl{color:var(--red)} /* Compact cover inside the "Актив" card */ .asset-cover{aspect-ratio:16/10;background:#ededed;overflow:hidden;margin-bottom:14px} .asset-cover img{width:100%;height:100%;object-fit:cover} .section{margin-top:36px} .section__h{font-size:14px;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:16px} #data-room{scroll-margin-top:88px} /* Key facts (financials + metrics) render as one continuous fact sheet: a single grey surface capped by a 2px black rule, rows split by hairlines. Each row is label | value — the value column wraps, so a row grows with its content and the panel stays clean at any text length. No inter-tile gaps, no orphaned cells on odd counts, no size jump between a 2-word value and a 12-word one. This is the old mobile treatment, promoted to every width. */ .keyfacts{margin-bottom:clamp(28px,4vw,44px)} .keyfacts>.section{margin-top:0} .keyfacts>.section + .section{margin-top:28px} .invbox,.metrics{display:block;background:#dededa;border-top:2px solid var(--ink)} .invbox>div,.metrics>div{display:grid;grid-template-columns:minmax(150px,248px) 1fr;gap:10px 28px;align-items:start;padding:15px 22px;border-top:1px solid rgba(10,10,10,.13);min-width:0} .invbox>div:first-child,.metrics>div:first-child{border-top:0} .invbox .k,.metrics .k{margin-bottom:0;padding-top:3px} .invbox .v,.metrics .v{font-size:18px;font-weight:700;letter-spacing:-.2px;line-height:1.4;overflow-wrap:anywhere} /* long values used to drop to 15px; now they simply wrap in the value column, so the vcls() hook can keep tagging them without changing their type */ .invbox .v--long,.metrics .v--long{font-size:18px;font-weight:700;letter-spacing:-.2px;line-height:1.4} /* Narrow screens: side-by-side label|value gets too tight — stack label above. */ @media(max-width:560px){ .invbox>div,.metrics>div{grid-template-columns:1fr;gap:6px;padding:14px 16px} .invbox .k,.metrics .k{padding-top:0} } /* Entry-floor band — the minimum ticket, the one number that decides whether an investor can participate. Inverts the section's tile idiom (grey box + black cap) into near-black + a red cap so it reads as part of the group yet clearly the anchor. Same structure as a tile: uppercase label above, heavy value below. */ .invfloor{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-top:12px;background:var(--dark);color:#fff;border-top:2px solid var(--red);padding:18px 22px 20px} .invfloor__label{text-transform:uppercase;letter-spacing:var(--ls-label);font-size:12px;font-weight:600;color:#a3a3a3;margin-bottom:9px} .invfloor__val{font-size:clamp(26px,3.2vw,34px);font-weight:800;letter-spacing:-.5px;line-height:1;color:#fff} .invfloor__note{text-transform:uppercase;letter-spacing:var(--ls-label);font-size:12px;font-weight:600;color:#8f8f8f;padding-bottom:3px} /* Investor returns — the counterpart to the entry floor. .invfloor answers «how much goes in» in near-black; this block answers «what comes back» in white under the same red cap, so the two read as one pair without competing, and both stand apart from the grey fact sheet. Hairlines are drawn by the grid gap over a line-coloured background: any tile count stays flush, no orphaned cells on odd counts. */ .retgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:1px;background:var(--line);border-top:2px solid var(--red);border-bottom:1px solid var(--line)} .ret{background:#fff;padding:16px 20px 18px;min-width:0} .ret__k{text-transform:uppercase;letter-spacing:var(--ls-label);font-size:11px;font-weight:600;color:var(--muted);margin-bottom:9px;line-height:1.3} .ret__v{font-size:clamp(21px,2.4vw,27px);font-weight:800;letter-spacing:-.4px;line-height:1.15;overflow-wrap:anywhere} /* A whole sentence ("valuation at stabilisation AED 57–63M …") is not a headline number — set it at reading size so it doesn't shout over the real figures. */ .ret__v--long{font-size:16px;font-weight:700;letter-spacing:0;line-height:1.4} .flags{display:flex;flex-direction:column;gap:8px} .flag{display:flex;gap:12px;align-items:baseline;padding:12px 14px;border:1px solid var(--line);background:#fff;font-size:15px;line-height:1.5} .flag--risk{border-left:3px solid var(--red)} .flag--note{border-left:3px solid var(--muted)} .flag .lvl{flex:none;min-width:58px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--red)} .flag--note .lvl{color:var(--muted)} .files{display:flex;flex-direction:column;border:1px solid var(--line)} .file{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)} .file:last-child{border-bottom:0} .file__meta{display:flex;align-items:center;gap:10px;min-width:0} .file__type{background:#000;color:#fff;font-size:10px;font-weight:700;padding:4px 7px;letter-spacing:.05em} .file__name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis} .file__size{color:var(--muted);font-size:12px} .file__req{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em} /* ——— Тизер проекта: плитки с превью первой страницы ————————————————————————— Площадка одной высоты у всех плиток, картинка внутри — по contain. Форму задаёт сама страница документа, поэтому горизонтальный дек виден горизонтальным, а А4 — вертикальным, как в файловом менеджере. Не-PDF получает ту же площадку с ярлыком типа: сетка не рвётся. */ .teaser{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px} .teaser__item{display:flex;flex-direction:column;gap:9px;color:inherit} .teaser__shot{height:240px;background:#f4f4f4;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:14px;transition:border-color .18s} .teaser__item:hover .teaser__shot{border-color:var(--ink)} /* Картинка держит свой натуральный размер, зажатый площадкой: тогда тень обводит саму страницу, а не пустое поле вокруг неё. Пропорцию до загрузки задают атрибуты width/height в разметке. */ .teaser__shot img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 2px 12px rgba(0,0,0,.14)} .teaser__ph{font-size:15px;font-weight:800;letter-spacing:.06em;color:#9a9a9a} .teaser__name{font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere} .teaser__meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)} .teaser__act{margin-left:auto;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);text-decoration:underline;text-underline-offset:2px} .teaser__item:hover .teaser__act{color:var(--red)} @media(max-width:560px){ .teaser{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px} .teaser__shot{height:190px;padding:10px} } /* Шапка блока Data room: слева заголовок, справа — запрос на весь рум для тех, кому нужны все документы сразу, а не один конкретный. */ .section__h--row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .license-banner{background:var(--red);color:#fff;padding:14px 16px;font-weight:600;font-size:14px;display:flex;gap:10px;align-items:center;margin-top:16px} .card-box{border:1px solid var(--line);background:#fff;padding:18px} .card-box .k{margin-bottom:10px} .kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:14px} .kv:last-child{border-bottom:0} .kv .kk{color:var(--muted)} .kv .vv{font-weight:600;text-align:right} /* Key terms — the first thing the right column says: the ask, the format, and what comes back. Rows stack label-over-value because deal language here is phrases ("single investor, 100% funding"), not two-word values that sit comfortably right-aligned opposite their label. */ .dealbox__lead{border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:11px} .dealbox__lead-k{text-transform:uppercase;letter-spacing:var(--ls-label);font-size:11px;font-weight:600;color:var(--muted);margin-bottom:7px} .dealbox__lead-v{font-size:clamp(20px,2vw,24px);font-weight:800;letter-spacing:-.4px;line-height:1.1;overflow-wrap:anywhere} .dealbox .kv{flex-direction:column;align-items:flex-start;gap:3px;padding:9px 0} .dealbox .kv .kk{font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-label);font-weight:600} .dealbox .kv .vv{text-align:left;font-size:15px;overflow-wrap:anywhere} /* ——— Location plate (views/partials/map.ejs + js/map.js) ——————————————————— Monochrome tiles, base-map labels off: the only type on the plate is ours, so it reads in the page language instead of transliterated latin. Everything except the placeholder appears only once js/map.js has the tiles up. */ .mapstrip{position:relative;height:340px;border:1px solid var(--line);overflow:hidden;background:#f4f4f4} .mapstrip__canvas{position:absolute;inset:0;z-index:1} /* Positron keeps a trace of green in parks and sand in relief — this takes the plate to true neutral and gives the hairline roads a little more presence. */ .mapstrip .leaflet-tile-pane{filter:grayscale(1) contrast(1.16)} .mapstrip .leaflet-container{background:#f4f4f4;font-family:inherit} /* required OSM/CARTO credit, kept in the page's grey rather than Leaflet's blue */ .mapstrip .leaflet-control-attribution{background:rgba(255,255,255,.72);padding:1px 6px;font-size:9px;letter-spacing:.02em;color:#a8a8a8} .mapstrip .leaflet-control-attribution a{color:#9a9a9a;text-decoration:none} .mapstrip .leaflet-control-attribution a:hover{color:var(--ink)} .mapstrip__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:grayscale(1);z-index:1} /* asset mark: a survey cross, not a balloon. The white ring on the dot is what opens the gap in the hairlines. */ .mapstrip__mark,.mapstrip__label,.mapstrip__seg{display:none} .mapstrip.is-ready .mapstrip__mark,.mapstrip.is-ready .mapstrip__label{display:block} .mapstrip.is-ready .mapstrip__seg{display:flex} .mapstrip__mark{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);pointer-events:none} .mapmark{position:relative;display:block;width:44px;height:44px} .mapmark__v{position:absolute;left:50%;top:0;width:1px;height:100%;margin-left:-.5px;background:var(--ink);opacity:.45} .mapmark__h{position:absolute;top:50%;left:0;height:1px;width:100%;margin-top:-.5px;background:var(--ink);opacity:.45} .mapmark__d{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3.5px rgba(255,255,255,.92)} /* our label, set like the rest of the page's labels */ .mapstrip__label{position:absolute;left:50%;top:50%;z-index:2;transform:translate(30px,-50%);max-width:calc(50% - 40px);pointer-events:none} /* asset near an edge — the label moves under, or to the other side of, the mark */ .mapstrip__label.is-below{transform:translate(-50%,26px);text-align:center;max-width:86%} .mapstrip__label.is-flip{transform:translate(calc(-100% - 30px),-50%);text-align:right} .mapstrip__label b{display:block;font-size:11px;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);text-shadow:0 1px 0 #fff,0 -1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff} .mapstrip__label em{display:block;margin-top:4px;font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7e7e7e;text-shadow:0 1px 0 #fff,0 -1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff} .mapstrip__far{display:none} .mapstrip.is-far .mapstrip__near{display:none} .mapstrip.is-far .mapstrip__far{display:block} /* the country's outline, laid over the basemap's near-invisible dashed border. The faint fill is what separates the country from its neighbours; the stroke is what you actually read as the border. */ .mapborder{fill:none;stroke:var(--ink);stroke-opacity:.55;stroke-width:1.25;stroke-linejoin:round} .mapveil{fill:#fff;fill-opacity:.6;stroke:none} /* reference points drawn by js/map.js: cities, capitals, landmarks. Three weights, same monochrome palette — the mark tells you what kind of place it is, the type stays quiet enough not to compete with the asset. */ .mapstrip__places{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .18s ease} .mapstrip.is-zooming .mapstrip__places{opacity:0} @media(prefers-reduced-motion:reduce){.mapstrip__places{transition:none}} .mapplace{position:absolute;transform:translate(11px,-50%);white-space:nowrap;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6f6f6f;text-shadow:0 1px 0 #fff,0 -1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff} .mapplace--flip{transform:translate(calc(-100% - 11px),-50%)} .mapplace::before{content:"";position:absolute;left:-11px;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;border:1px solid #8f8f8f;background:#fff} .mapplace--flip::before{left:auto;right:-11px;margin-right:-2px} .mapplace--capital{color:#2e2e2e;font-weight:600;font-size:11px} .mapplace--capital::before{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--ink);border-color:var(--ink)} .mapplace--landmark{font-size:9px;color:#8a8a8a} .mapplace--landmark::before{border-radius:0;transform:rotate(45deg);width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#fff;border-color:#9a9a9a} .mapstrip__coords{position:absolute;left:0;bottom:0;z-index:2;padding:7px 12px;background:rgba(255,255,255,.93);border-top:1px solid var(--line);border-right:1px solid var(--line);font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;color:#4a4a4a} /* scale switch: site · area · country */ .mapstrip__seg{position:absolute;top:12px;right:12px;z-index:3;background:rgba(255,255,255,.93);border:1px solid var(--line)} .mapstrip__seg button{appearance:none;-webkit-appearance:none;background:none;border:0;border-left:1px solid var(--line);padding:7px 11px;font:inherit;font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;color:#6a6a6a;cursor:pointer} .mapstrip__seg button:first-child{border-left:0} .mapstrip__seg button:hover{color:var(--ink)} .mapstrip__seg button[aria-pressed="true"]{background:var(--ink);color:#fff} .mapstrip__seg button:focus-visible{outline:1px solid var(--ink);outline-offset:-3px} /* free zoom, stacked under the scale switch */ .mapstrip__zoom{position:absolute;top:52px;right:12px;z-index:3;display:none;flex-direction:column;background:rgba(255,255,255,.93);border:1px solid var(--line)} .mapstrip.is-ready .mapstrip__zoom{display:flex} .mapstrip__zoom button{appearance:none;-webkit-appearance:none;width:30px;height:28px;background:none;border:0;border-top:1px solid var(--line);font:inherit;font-size:14px;line-height:1;color:#4a4a4a;cursor:pointer} .mapstrip__zoom button:first-child{border-top:0} .mapstrip__zoom button:hover:not(:disabled){background:var(--ink);color:#fff} .mapstrip__zoom button:disabled{color:#c8c8c8;cursor:default} .mapstrip__zoom button:focus-visible{outline:1px solid var(--ink);outline-offset:-3px} /* loading state, replaced by the plate itself */ .mapstrip__ph{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#f4f4f4;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-label)} .mapstrip.is-ready .mapstrip__ph{display:none} .mapstrip__phpin{color:#c4c4c4} @keyframes mapPulse{0%,100%{opacity:.5}50%{opacity:1}} .mapstrip__phpin{animation:mapPulse 1.4s ease-in-out infinite} @media(prefers-reduced-motion:reduce){.mapstrip__phpin{animation:none}} @media(max-width:560px){ .mapstrip{height:300px} .mapstrip__label{transform:translate(26px,-50%)} .mapstrip__seg button{padding:6px 8px} } .maplink{display:inline-block;margin-top:8px;font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--muted)} .maplink:hover{color:var(--red)} .gallery-viewport{position:relative} .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .gallery img{aspect-ratio:4/3;object-fit:cover;background:#ededed;width:100%} /* desktop: controls never show */ .gallery__arrow,.gallery__dots{display:none} /* Mobile: a 2-col grid strands an odd image in a half-empty row. Turn the gallery into a one-up, swipeable scroll-snap carousel — native finger swipe, plus JS-added dots (bottom) and prev/next arrows. */ @media(max-width:640px){ .gallery{ grid-template-columns:none;display:flex;gap:0; overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;border:1px solid var(--line);background:#ededed; } .gallery::-webkit-scrollbar{display:none} .gallery img{flex:0 0 100%;width:100%;aspect-ratio:4/3;scroll-snap-align:center;scroll-snap-stop:always} .gallery__arrow{ display:flex;align-items:center;justify-content:center; position:absolute;top:50%;transform:translateY(-50%); width:38px;height:38px;border:0;border-radius:50%; background:rgba(0,0,0,.45);color:#fff;font-size:22px;line-height:1; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:opacity .15s,background .15s; } .gallery__arrow--prev{left:8px} .gallery__arrow--next{right:8px} .gallery__arrow:active{background:rgba(0,0,0,.65)} .gallery__arrow:disabled{opacity:0;pointer-events:none} .gallery__arrow:focus-visible{outline:2px solid #fff;outline-offset:2px} .gallery__dots{ display:flex;justify-content:center;gap:6px; position:absolute;left:0;right:0;bottom:10px;padding:0 10px; } .gallery__dot{ width:7px;height:7px;padding:0;border:0;border-radius:50%; background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.45); cursor:pointer;transition:background .15s,transform .15s; } .gallery__dot[aria-current="true"]{background:#fff;transform:scale(1.3)} } .cta{margin-top:28px;padding:24px;background:#000;color:#fff;display:flex;flex-direction:column;gap:14px} .cta h3{text-transform:uppercase;font-size:20px} .cta p{color:#bbb;font-size:14px} /* on the black CTA, red must not turn black on hover — invert to white instead */ .cta .btn--red:hover{background:#fff;color:#000} .cta__count{color:#bbb;font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-label);font-weight:600} .cta__files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .cta__file{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid rgba(255,255,255,.16)} .cta__ftype{flex:none;background:#fff;color:#000;font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 6px} .cta__fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600} .cta__act{flex:none;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#fff;text-decoration:underline;text-underline-offset:2px} .cta__act:hover{color:var(--red)} /* Confidentiality note in the .cta ("Презентация проекта") pointing to the #data-room section below — shown when there are data-room files but no public presentation files. Visible on all breakpoints: #data-room renders on both desktop and mobile, so the pointer is always relevant. */ .cta__note{color:#bbb;font-size:12px;line-height:1.5;margin-top:4px} .cta__note a{color:#fff;text-decoration:underline;text-underline-offset:2px} .cta__note a:hover{color:var(--red)} .updated{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-label);margin-top:24px} /* side column uses flex gap, so drop the standalone top margins there */ .detail__side .cta,.detail__side .updated{margin-top:0} /* Detail — mobile: single column; readiness surfaced right after the header, the rest of the facts column drops below the body text. */ @media(max-width:900px){ /* stretch (not the desktop `align-items:start`) so the stacked columns fill the viewport; min-width:0 lets them shrink instead of blowing out to min-content (the readiness/side column otherwise forces a horizontal scroll). */ .detail__layout{display:flex;flex-direction:column;gap:28px;align-items:stretch} .detail__col2{display:contents} /* dissolve wrapper so children reorder */ .detail__terms,.detail__ready,.detail__side{min-width:0} .detail__terms{order:-2} .detail__ready{order:-1} .detail__side{order:1} .prose{max-width:none} .detail__title{max-width:none} } /* Gate */ .gate{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 20px} .gate__box{max-width:440px} .gate h1{font-size:34px;margin-bottom:14px} .gate p{color:#444;margin-bottom:20px} .gate form{display:flex;gap:8px;justify-content:center} .gate input{border:1px solid var(--line);padding:12px 14px;font-family:var(--font);font-size:14px;width:260px} /* Footer */ .foot{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:13px} .foot__in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .empty{padding:60px 0;text-align:center;color:var(--muted)} /* --- Admin --- */ .admin-nav{background:#000;color:#fff} .admin-nav .hdr__in{height:60px} .admin-nav a{color:#fff;opacity:.8;font-size:14px} .admin-nav a:hover,.admin-nav a.active{opacity:1;color:#fff} .admin-nav .brand{font-weight:800;text-transform:uppercase;letter-spacing:1px} .panel{padding:32px 0 80px} .toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap} .filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .filters select,.filters input{border:1px solid var(--line);padding:8px 10px;font-family:var(--font);font-size:13px} table.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)} .tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle} .tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700} .tbl tr:last-child td{border-bottom:0} .tbl .muted{color:var(--muted)} .vis{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;padding:3px 8px;letter-spacing:.04em} .vis--draft{background:#eee;color:#666} .vis--internal{background:#111;color:#fff} .vis--public{background:var(--red);color:#fff} .form{background:#fff;border:1px solid var(--line);padding:24px;max-width:960px} .form h2{text-transform:uppercase;font-size:16px;letter-spacing:.04em;margin:24px 0 12px;border-top:1px solid var(--line);padding-top:20px} .form h2:first-child{border-top:0;margin-top:0;padding-top:0} .field{margin-bottom:14px} .field label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:5px;font-weight:600} .field input[type=text],.field input[type=date],.field input[type=number],.field input[type=password],.field select,.field textarea{ width:100%;border:1px solid var(--line);padding:10px 12px;font-family:var(--font);font-size:14px;background:#fff} .field textarea{min-height:140px;resize:vertical} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} @media(max-width:700px){.grid2,.grid3{grid-template-columns:1fr}} .hint{font-size:12px;color:var(--muted);margin-top:4px} .rows{display:flex;flex-direction:column;gap:8px} .row-item{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .row-item input{flex:1;min-width:160px} /* Row pickers (metric group / pin-to-tile, flag level). enhanceSelect() in admin.js hides the