/* ========================================================================= theme-v2.css — Фаза 0 редизайна proland.lv (SoT: analytics/REDESIGN-PLAN-2026-07-19.md) Дизайн-токены + базовый компонентный набор v2. Архитектура — как у roamlinx.pl main.css (v2-система), палитра — из одобренного июньского редизайна главной (css/home.css): тёмный тил + зелёный акцент + янтарь. ПРАВИЛА ПОДКЛЮЧЕНИЯ (фазы 1–5): - Токены :root безопасны всегда (их никто не читает, пока не использует). - Тёмная тема активируется классом `theme-v2` на — по странице за фазу, main.css не трогаем (урок июня). - Легаси-ремап --baltic-* → v2-палитра выполняется ТОЛЬКО внутри body.theme-v2 (см. блок ниже) — старые страницы живут как жили. ========================================================================= */ :root { /* Поверхности (июньская палитра, одобрена 2026-06-17) */ --plv-bg: #0a1620; /* фон страницы: тёмный тил-нави */ --plv-bg2: #0f212a; /* поверхность карточки */ --plv-bg3: #16303a; /* приподнятая поверхность / hover */ --plv-bg-grad: linear-gradient(180deg, #0c1c26 0%, #0a1620 100%); /* Акценты */ --plv-accent: #00e676; /* зелёный — primary */ --plv-accent2: #00c853; --plv-accent-dim: rgba(0, 230, 118, 0.14); --plv-accent-brd: rgba(0, 230, 118, 0.22); --plv-amber: #f4a11a; /* янтарь — фирменный proland, CTA/secondary */ --plv-amber2: #f7b733; --plv-amber-dim: rgba(244, 161, 26, 0.14); /* Брендовые мосты (тил из легаси-палитры — навбар/футер) */ --plv-teal: #0f3b3d; --plv-sea: #0e6f83; /* Текст и линии */ --plv-text: #e8f0ee; --plv-text2: #9fb3ad; --plv-border: rgba(255, 255, 255, 0.08); --plv-border2: rgba(255, 255, 255, 0.14); --plv-focus: rgba(0, 230, 118, 0.28); /* Геометрия и тени */ --plv-radius: 12px; --plv-radius-lg: 16px; --plv-shadow: 0 10px 24px rgba(0, 0, 0, 0.30); --plv-shadow-lg: 0 22px 65px rgba(5, 15, 20, 0.55); } /* ── Активация тёмной темы (по странице, фазы 1–5) ─────────────────────── */ body.theme-v2 { font-family: 'Inter', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: radial-gradient(circle at 12% 8%, rgba(0, 230, 118, 0.10), transparent 34%), radial-gradient(circle at 88% 4%, rgba(244, 161, 26, 0.10), transparent 30%), var(--plv-bg-grad); background-attachment: fixed; color: var(--plv-text); min-height: 100vh; } /* Легаси-ремап: страницы под theme-v2 могут продолжать использовать --baltic-* — значения подменяются на v2-палитру (приём roamlinx.pl). */ body.theme-v2 { --baltic-forest: var(--plv-bg2); --baltic-pine: var(--plv-bg3); --baltic-sea: var(--plv-sea); --baltic-amber: var(--plv-amber); --baltic-sand: var(--plv-bg); --baltic-foam: var(--plv-bg2); --baltic-ink: var(--plv-text); --baltic-cloud: var(--plv-border2); } /* ── Типографика ───────────────────────────────────────────────────────── */ body.theme-v2 h1, body.theme-v2 h2, body.theme-v2 h3 { color: var(--plv-text); line-height: 1.22; letter-spacing: -0.01em; } .plv-accent-dot { color: var(--plv-amber); } .pv2-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--plv-amber); } .pv2-muted { color: var(--plv-text2); } .pv2-link { color: var(--plv-accent); text-decoration: none; border-bottom: 1px solid var(--plv-accent-brd); } .pv2-link:hover { border-bottom-color: var(--plv-accent); } /* ── Пилюли и бейджи ───────────────────────────────────────────────────── */ .pv2-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: var(--plv-accent-dim); border: 1px solid var(--plv-accent-brd); color: var(--plv-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; } .pv2-pill--amber { background: var(--plv-amber-dim); border-color: rgba(244, 161, 26, 0.30); color: var(--plv-amber); } .pv2-badge { display: inline-block; padding: 2px 9px; border-radius: 6px; background: var(--plv-bg3); color: var(--plv-text2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } /* ── Кнопки ────────────────────────────────────────────────────────────── */ .pv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 10px; border: 1px solid transparent; font: 700 15px/1.2 inherit; text-decoration: none; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .pv2-btn:hover { transform: translateY(-1px); } .pv2-btn:focus-visible { outline: 3px solid var(--plv-focus); outline-offset: 1px; } .pv2-btn--primary { background: var(--plv-accent); color: #04140b; box-shadow: 0 8px 22px rgba(0, 230, 118, 0.25); } .pv2-btn--primary:hover { background: var(--plv-accent2); } .pv2-btn--amber { background: linear-gradient(135deg, var(--plv-amber) 0%, var(--plv-amber2) 100%); color: #241503; box-shadow: 0 8px 22px rgba(244, 161, 26, 0.25); } .pv2-btn--ghost { background: transparent; border-color: var(--plv-border2); color: var(--plv-text); } .pv2-btn--ghost:hover { background: var(--plv-bg3); } .pv2-btn--sm { padding: 8px 14px; font-size: 13px; border-radius: 8px; } /* ── Поверхности: панели, карточки, метрики ────────────────────────────── */ .pv2-panel { background: var(--plv-bg2); border: 1px solid var(--plv-border); border-radius: var(--plv-radius-lg); box-shadow: var(--plv-shadow); padding: 24px; } .pv2-card { background: var(--plv-bg2); border: 1px solid var(--plv-border); border-radius: var(--plv-radius); padding: 18px; transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease; } .pv2-card:hover { transform: translateY(-2px); border-color: var(--plv-accent-brd); box-shadow: var(--plv-shadow); } .pv2-card--amber:hover { border-color: rgba(244, 161, 26, 0.35); } .pv2-metric { padding: 16px 18px; } .pv2-metric .pv2-metric-label { font-size: 12px; color: var(--plv-text2); } .pv2-metric .pv2-metric-value { display: block; margin-top: 4px; font-size: 26px; font-weight: 800; color: var(--plv-text); } /* ── Секции ────────────────────────────────────────────────────────────── */ .pv2-section { margin: 40px 0; } .pv2-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .pv2-section-head h2 { margin: 0; font-size: clamp(20px, 2.6vw, 28px); } /* ── Формы ─────────────────────────────────────────────────────────────── */ .pv2-input, .pv2-select { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--plv-border2); background: var(--plv-bg3); color: var(--plv-text); font: inherit; } .pv2-input::placeholder { color: var(--plv-text2); } .pv2-input:focus, .pv2-select:focus { outline: 2px solid var(--plv-focus); outline-offset: 0; border-color: var(--plv-accent-brd); } /* ── Таблицы ───────────────────────────────────────────────────────────── */ .pv2-table-wrap { overflow-x: auto; border: 1px solid var(--plv-border); border-radius: var(--plv-radius); background: var(--plv-bg2); } .pv2-table { width: 100%; border-collapse: collapse; min-width: 640px; } .pv2-table th { padding: 11px 14px; text-align: left; font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--plv-text2); background: var(--plv-bg3); } .pv2-table td { padding: 11px 14px; border-top: 1px solid var(--plv-border); color: var(--plv-text); } .pv2-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); } /* ── Адаптив ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .pv2-panel { padding: 16px; } .pv2-section { margin: 28px 0; } .pv2-btn { width: 100%; } .pv2-btn--sm { width: auto; } } /* ── Shell v2: навбар (Фаза 1) ─────────────────────────────────────────── */ .pv2nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(10, 26, 32, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--plv-border); } .pv2nav-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px 16px; } .pv2nav-logo { display: inline-flex; align-items: center; flex-shrink: 0; } .pv2nav-logo img { height: 44px; display: block; } .pv2nav-links { display: none; margin-left: auto; gap: 4px; } .pv2nav-links a { padding: 8px 12px; border-radius: 8px; color: var(--plv-text2); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; } .pv2nav-links a:hover { color: var(--plv-accent); background: rgba(255, 255, 255, 0.04); } .pv2nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } .pv2nav-links + .pv2nav-right { margin-left: 0; } .pv2nav-chip { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--plv-border2); color: var(--plv-text2); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } .pv2nav-iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--plv-border2); background: transparent; color: var(--plv-text); cursor: pointer; list-style: none; } .pv2nav-iconbtn::-webkit-details-marker { display: none; } .pv2nav-iconbtn:hover { background: var(--plv-bg3); border-color: var(--plv-accent-brd); } .pv2nav-lang-code { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; } .pv2nav-lang { position: relative; } .pv2nav-lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; padding: 6px; border-radius: 12px; background: var(--plv-bg2); border: 1px solid var(--plv-border2); box-shadow: var(--plv-shadow); display: grid; gap: 2px; z-index: 60; } .pv2nav-lang-menu a { padding: 8px 12px; border-radius: 8px; color: var(--plv-text); font-size: 13.5px; font-weight: 600; text-decoration: none; } .pv2nav-lang-menu a:hover { background: var(--plv-bg3); color: var(--plv-accent); } .pv2nav-lang-menu a.active { color: var(--plv-amber); } .pv2nav-cta { display: none; } .pv2nav-toggle { display: inline-flex; } .pv2nav-mobile { border-top: 1px solid var(--plv-border); background: rgba(10, 26, 32, 0.97); padding: 8px 16px 14px; display: grid; gap: 2px; } /* display:grid выше перебивал бы UA-правило для [hidden] — возвращаем явно */ .pv2nav-mobile[hidden] { display: none; } .pv2nav-mobile a { padding: 11px 12px; border-radius: 9px; color: var(--plv-text); font-size: 15px; font-weight: 600; text-decoration: none; } .pv2nav-mobile a:hover { background: var(--plv-bg3); color: var(--plv-accent); } .pv2nav-mobile a:first-child { color: var(--plv-amber); } @media (min-width: 900px) { .pv2nav-links { display: flex; } .pv2nav-cta { display: inline-flex; width: auto; } .pv2nav-toggle { display: none; } .pv2nav-inner { padding: 10px 24px; } } /* Узкие экраны: EUR-чип прячем (информационный), гамбургер важнее */ @media (max-width: 480px) { .pv2nav-chip { display: none; } .pv2nav-inner { gap: 10px; } .pv2nav-logo img { height: 38px; } } /* ── Shell v2: футер (Фаза 1) ──────────────────────────────────────────── */ .pv2f { margin-top: 56px; background: rgba(8, 20, 26, 0.92); border-top: 1px solid var(--plv-border); color: var(--plv-text2); } .pv2f-grid { max-width: 1180px; margin: 0 auto; padding: 40px 16px 24px; display: grid; grid-template-columns: 1fr; gap: 28px; } .pv2f-logo { height: 46px; margin-bottom: 12px; } .pv2f-about { font-size: 13.5px; line-height: 1.6; max-width: 320px; } .pv2f-h4 { margin: 0 0 12px; color: var(--plv-text); font-size: 15px; font-weight: 700; } .pv2f-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pv2f-list a { color: var(--plv-text2); font-size: 13.5px; text-decoration: none; } .pv2f-list a:hover { color: var(--plv-amber); } .pv2f-muted { font-size: 12.5px; opacity: 0.75; } .pv2f-contact { display: grid; gap: 8px; font-size: 13.5px; } .pv2f-chip { display: inline-flex; align-items: center; width: fit-content; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--plv-border2); color: var(--plv-text); font-weight: 600; text-decoration: none; } .pv2f-chip:hover { border-color: var(--plv-accent-brd); color: var(--plv-accent); } .pv2f-copy { max-width: 1180px; margin: 0 auto; padding: 16px; border-top: 1px solid var(--plv-border); font-size: 12.5px; opacity: 0.8; } @media (min-width: 768px) { .pv2f-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; padding: 48px 24px 28px; } .pv2f-copy { padding: 16px 24px; } } /* Cookie consent is shared with legacy pages; keep its v2 rendering explicit. */ body.theme-v2 #cookie-banner > div { background: var(--plv-bg2) !important; border-color: var(--plv-border2) !important; color: var(--plv-text) !important; box-shadow: var(--plv-shadow-lg) !important; } body.theme-v2 #cookie-banner h2, body.theme-v2 #cookie-banner summary, body.theme-v2 #cookie-banner [id^="label-"] { color: var(--plv-text) !important; } body.theme-v2 #cookie-banner p, body.theme-v2 #cookie-banner [id^="desc-"], body.theme-v2 #cookie-banner #cb-learn-more { color: var(--plv-text2) !important; } body.theme-v2 #cookie-banner details > div > div, body.theme-v2 #cookie-banner details label { background: var(--plv-bg3) !important; border-color: var(--plv-border) !important; } body.theme-v2 #cookie-banner #badge-always-on { background: var(--plv-accent-dim) !important; color: var(--plv-accent) !important; } body.theme-v2 #cookie-banner #btn-accept-all { background: var(--plv-accent) !important; color: #04140b !important; } body.theme-v2 #cookie-banner #btn-reject-all { background: var(--plv-bg3) !important; color: var(--plv-text) !important; } body.theme-v2 #cookie-banner #btn-save { border-color: var(--plv-border2) !important; color: var(--plv-text) !important; } body.theme-v2 #cookie-banner input[type="checkbox"] { accent-color: var(--plv-accent); }