/* Комплаенс-ассистент — стили визитки. Визуальная ДНК «Дух+доверие»: тёмный премиум, один teal-акцент, чистый sans + моноширинный для ссылок на закон. Вынесено из index.html (Этап 1). Подключается в как /assets/styles.css. */ /* === Токены темы (цвет, радиусы, шрифты) === */ :root{ --bg:#161a20; --panel:#11151b; --panel2:#1b2029; --border:#2a3742; --fg:#e6edf3; --muted:#8a97a6; --accent:#2ba6c4; /* teal — главный акцент, «надёжность» */ --accent2:#4cc6df; --ok:#34d399; /* статусы: ок / внимание / риск */ --warn:#f0ad4e; --risk:#e06c75; --radius:10px; /* Тёмная «краска» для текста на teal-кнопке — контраст ≥4.5 (WCAG AA), при этом teal-градиент остаётся ровно по спецификации. */ --on-accent:#062029; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } *,*::before,*::after{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; min-height:100%; font-family:var(--sans); color:var(--fg); background-color:var(--bg); /* Деликатная точечная сетка поверх базового фона */ background-image: radial-gradient(circle at 50% 40%, rgba(76,198,223,.030) 0, transparent 58%), radial-gradient(rgba(230,237,243,.045) 1px, transparent 1px); background-size:auto, 22px 22px; background-position:center, center; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; } /* Мягкое верхнее teal-свечение — «дорогая», но спокойная атмосфера */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; background: radial-gradient(860px 400px at 50% -7%, rgba(43,166,196,.16), transparent 70%); z-index:0; } .stage{ position:relative; z-index:1; min-height:100%; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:clamp(20px,4vw,56px); padding-top:max(clamp(20px,4vw,56px), env(safe-area-inset-top)); padding-bottom:max(clamp(20px,4vw,56px), env(safe-area-inset-bottom)); padding-left:max(clamp(20px,4vw,56px), env(safe-area-inset-left)); padding-right:max(clamp(20px,4vw,56px), env(safe-area-inset-right)); } /* === Компоненты === */ /* ── Карточка-модуль ─────────────────────────────────────────────── */ .card{ position:relative; width:100%; max-width:720px; background:var(--panel2); border:1px solid var(--border); border-radius:calc(var(--radius) + 8px); padding:clamp(26px,4.5vw,52px); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -24px rgba(0,0,0,.65), 0 8px 24px -16px rgba(0,0,0,.6); } /* Тонкая teal-линия по верхнему краю карточки */ .card::before{ content:""; position:absolute; left:clamp(26px,4.5vw,52px); right:clamp(26px,4.5vw,52px); top:0; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent); opacity:.75; } /* ── Шапка модуля: бренд + системный индикатор ──────────────────── */ .topline{ display:flex; align-items:center; justify-content:space-between; gap:16px 20px; flex-wrap:wrap; margin-bottom:clamp(28px,4.4vw,44px); } /* Вордмарк с мягким teal-свечением (radial-gradient glow) за ним */ .brand{ position:relative; display:inline-flex; align-items:center; gap:11px; isolation:isolate; } .brand__glow{ position:absolute; z-index:-1; left:-14px; top:50%; width:230px; height:96px; transform:translateY(-50%); pointer-events:none; background: radial-gradient(60% 100% at 18% 50%, rgba(76,198,223,.26), rgba(43,166,196,.09) 45%, transparent 72%); filter:blur(2px); opacity:.85; animation:brandGlow 6s ease-in-out infinite; } .brand__mark{ flex:0 0 auto; width:34px; height:34px; color:var(--accent); display:block; filter:drop-shadow(0 2px 10px rgba(43,166,196,.45)); } .brand__word{ font-size:clamp(15px,2.4vw,17px); font-weight:650; letter-spacing:.2px; color:var(--fg); white-space:nowrap; } @keyframes brandGlow{ 0%,100%{ opacity:.7; transform:translateY(-50%) scale(1); } 50% { opacity:.95; transform:translateY(-50%) scale(1.05); } } /* ── Системный индикатор «Связь с сервером» ─────────────────────── */ .status{ display:inline-flex; align-items:center; gap:9px; padding:7px 13px 7px 11px; background:var(--panel); border:1px solid var(--border); border-radius:999px; font-size:12.5px; color:var(--muted); transition:border-color .35s ease; max-width:100%; } .status__dot{ position:relative; flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--muted); transition:background-color .35s ease, box-shadow .35s ease; } /* Деликатная пульсация «живой» точки — отдельным расходящимся кольцом */ .status__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; opacity:0; } .status__text{ white-space:nowrap; } .status__text b{ color:var(--fg); font-weight:600; } .status__meta{ font-family:var(--mono); font-size:11.5px; color:var(--muted); white-space:nowrap; } .status__sep{ opacity:.4; margin:0 1px; } .status.is-up{ border-color:rgba(52,211,153,.42); } .status.is-up .status__dot{ background:var(--ok); box-shadow:0 0 6px rgba(52,211,153,.5); } .status.is-up .status__dot::after{ background:var(--ok); animation:dotPulse 2s ease-out infinite; } .status.is-down{ border-color:rgba(224,108,117,.45); } .status.is-down .status__dot{ background:var(--risk); box-shadow:0 0 6px rgba(224,108,117,.45); } /* Деликатная пульсация: кольцо мягко расходится и тает */ @keyframes dotPulse{ 0% { opacity:.55; transform:scale(1); } 70% { opacity:0; transform:scale(2.6); } 100% { opacity:0; transform:scale(2.6); } } /* ── Герой ──────────────────────────────────────────────────────── */ .hero{ max-width:600px; } .law-chip{ display:inline-flex; align-items:center; gap:7px; margin-bottom:20px; padding:5px 12px; font-family:var(--mono); font-size:12.5px; letter-spacing:.2px; color:var(--accent2); background:rgba(43,166,196,.10); /* рамка с alpha .7 → контраст ≥3.0, уверенно читается на ярких экранах */ border:1px solid rgba(43,166,196,.7); border-radius:999px; text-decoration:none; transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease; } .law-chip:hover,.law-chip:focus-visible{ background:rgba(43,166,196,.18); border-color:var(--accent2); box-shadow:0 0 0 3px rgba(43,166,196,.14); outline:none; } .law-chip svg{ width:13px; height:13px; flex:0 0 auto; } h1{ margin:0 0 16px; font-size:clamp(28px,5.6vw,42px); line-height:1.16; font-weight:700; letter-spacing:-.01em; color:var(--fg); } .accent-text{ background:linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; /* запасной цвет, если background-clip:text не поддержан */ -webkit-text-fill-color:transparent; } .lede{ margin:0; font-size:clamp(15px,2.4vw,17px); line-height:1.62; color:var(--muted); max-width:54ch; } .lede b{ color:var(--fg); font-weight:500; } /* Таблетки-намёки */ .pills{ display:flex; flex-wrap:wrap; gap:9px; margin:28px 0 0; padding:0; list-style:none; } .pills li{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; font-size:13px; color:var(--muted); background:var(--panel); border:1px solid var(--border); border-radius:999px; } .pills li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 5px rgba(43,166,196,.65); flex:0 0 auto; } /* ── Кнопки ─────────────────────────────────────────────────────── */ .actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,4vw,36px); } .btn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; font-family:inherit; font-size:15px; font-weight:600; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .btn--primary{ /* teal-градиент строго по спецификации (accent→accent2); текст — тёмная краска --on-accent для контраста ≥4.5 (WCAG AA). */ color:var(--on-accent); background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 8px 22px -10px rgba(43,166,196,.85); } .btn--primary:hover,.btn--primary:focus-visible{ transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(43,166,196,.95); outline:none; } .btn--ghost{ color:var(--fg); background:var(--panel); border-color:var(--border); } .btn--ghost:hover,.btn--ghost:focus-visible{ transform:translateY(-1px); border-color:var(--accent); outline:none; } .btn:focus-visible{ box-shadow:0 0 0 3px rgba(76,198,223,.45); } /* Разделитель + подвал внутри карточки */ .rule{ height:1px; margin:clamp(28px,4vw,40px) 0 16px; background:linear-gradient(90deg, transparent, var(--border), transparent); border:0; } .foot{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2px; color:var(--muted); } .foot .foot__sep{ opacity:.45; margin:0 6px; } /* Появление на загрузке — нежный fade + slide-up */ .reveal{ opacity:0; transform:translateY(12px); animation:reveal .7s cubic-bezier(.22,.61,.36,1) forwards; } .reveal--1{ animation-delay:.05s; } .reveal--2{ animation-delay:.14s; } .reveal--3{ animation-delay:.23s; } .reveal--4{ animation-delay:.32s; } .reveal--5{ animation-delay:.41s; } @keyframes reveal{ to{ opacity:1; transform:none; } } @media (max-width:480px){ .topline{ margin-bottom:26px; } .status{ order:2; } .brand__glow{ width:200px; } .actions{ flex-direction:column; align-items:stretch; } .btn{ width:100%; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .reveal{ opacity:1; transform:none; } .brand__glow{ animation:none; opacity:.8; } .status.is-up .status__dot::after{ display:none; } }