/* ===================================================================== skysoft.css — единый источник дизайн-системы SkySoft (синий бренд) Концепция: «Sky / Ясное небо данных». Несущий цвет — синий бренд, янтарь оставлен ТОЛЬКО как акцент CTA. Глубина/motion заимствованы из antihaos и перекрашены в --sky-*. Подключается из ПОСЛЕ tailwind.min.css. Тема меняется в одной точке. Бюджет: ≤12 КБ min. См. ТЗ §3, §4. ===================================================================== */ /* ---------- 3.1 Палитра + 3.4 радиусы/тени ---------- */ :root{ /* Бренд (несущий) */ --sky-900:#001a8a; --sky-700:#0058a8; --sky-600:#0a6fd0; --sky-500:#2e9bff; --sky-300:#86c9ff; --sky-100:#dcefff; --sky-50:#f2f9ff; /* Тёмные «ночные» поверхности */ --ink-950:#050b1f; --ink-900:#0a1733; --ink-800:#16244d; --ink-ink:#0a1733; --ink-2:#41506f; --ink-3:#6b7794; /* Акцент (тёплый контрапункт — ТОЛЬКО CTA/важное) */ --amber-400:#fbbf24; --amber-500:#f59e0b; /* Нейтраль / стекло */ --paper:#ffffff; --paper-2:#f7faff; --line:#e3ecf7; --glass-bg:rgba(255,255,255,.72); --glass-border:rgba(255,255,255,.7); /* Семантика метрик */ --pos:#1f9d57; --info:#0a6fd0; /* Радиусы */ --r-sm:12px; --r-md:18px; --r-lg:22px; --r-xl:28px; --r-pill:999px; /* Глубина — тени с синим оттенком (rgba навигатора 10,40,90) */ --shadow-1:0 1px 2px rgba(10,40,90,.06); --shadow-2:0 8px 24px -8px rgba(10,40,90,.16); --shadow-card:0 1px 0 rgba(255,255,255,.7) inset, 0 22px 48px -22px rgba(10,50,110,.40); --shadow-card-hover:0 1px 0 rgba(255,255,255,.7) inset, 0 34px 60px -24px rgba(10,50,110,.52); --shadow-float:0 18px 36px rgba(8,40,90,.22); --shadow-cta:0 10px 28px rgba(245,158,11,.40); /* Шрифты (уже self-hosted; объявления @font-face — в head страниц) */ --font-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --font-text:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; } /* ---------- 3.2 Типографика (шкала clamp) ---------- */ .s-eyebrow{font:700 .75rem/1 var(--font-display);letter-spacing:.14em; text-transform:uppercase;color:var(--sky-700)} .s-display-1{font:800 clamp(2.4rem,5vw,4rem)/1.05 var(--font-display); letter-spacing:-.02em;color:var(--ink-ink)} .s-display-2{font:800 clamp(1.9rem,3.4vw,2.8rem)/1.1 var(--font-display); letter-spacing:-.02em;color:var(--ink-ink)} .s-h3{font:700 clamp(1.2rem,1.8vw,1.5rem)/1.25 var(--font-display); letter-spacing:-.015em;color:var(--ink-ink)} .s-lead{font:400 clamp(1.05rem,1.4vw,1.25rem)/1.55 var(--font-text);color:var(--ink-2)} .s-body{font:400 1rem/1.65 var(--font-text);color:var(--ink-2)} .s-small{font:500 .875rem/1.4 var(--font-text);color:var(--ink-3)} .tnum{font-variant-numeric:tabular-nums} /* Градиент-текст хайлайтов заголовков */ .s-grad{background:linear-gradient(120deg,var(--sky-700),var(--sky-500)); -webkit-background-clip:text;background-clip:text;color:transparent} .on-dark .s-grad,.s-grad.on-dark{background:linear-gradient(120deg,var(--sky-500),var(--sky-300)); -webkit-background-clip:text;background-clip:text;color:transparent} /* На тёмных поверхностях текст светлеет */ .on-dark,.mesh-dark{color:#eaf2ff} .on-dark .s-display-1,.on-dark .s-display-2,.on-dark .s-h3, .mesh-dark .s-display-1,.mesh-dark .s-display-2,.mesh-dark .s-h3{color:#fff} .on-dark .s-lead,.on-dark .s-body,.mesh-dark .s-lead,.mesh-dark .s-body{color:#b9c8e6} .on-dark .s-eyebrow,.mesh-dark .s-eyebrow{color:var(--sky-300)} /* ---------- 3.3 Секции / ритм / воздух ---------- */ .s-section{padding-block:clamp(4rem,8vw,8rem)} /* py-24 md:py-32 */ .s-section--paper{background:var(--paper)} .s-section--sky{background:var(--sky-50)} .s-section--paper2{background:var(--paper-2)} /* ---------- 3.8 Фоновые градиент-меши (CSS-only) ---------- */ .mesh-light{ background: radial-gradient(60% 50% at 50% 0%, rgba(46,155,255,.10), transparent 70%), radial-gradient(40% 40% at 85% 20%, rgba(134,201,255,.14), transparent 70%), var(--paper); } .mesh-dark{ background: radial-gradient(80% 60% at 50% -10%, rgba(46,155,255,.22), transparent 65%), radial-gradient(50% 50% at 80% 30%, rgba(10,111,208,.25), transparent 70%), linear-gradient(150deg, var(--ink-800), var(--ink-900) 55%, var(--ink-950)); } /* ---------- 3.5 Компоненты ---------- */ /* Кнопки */ .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; background:var(--amber-400);color:var(--ink-950);font:700 1rem/1 var(--font-display); padding:.9rem 1.6rem;border:0;border-radius:var(--r-md);box-shadow:var(--shadow-cta); cursor:pointer;text-decoration:none;transition:transform .18s, filter .18s, background-color .18s} .btn-primary:hover{background:var(--amber-500);transform:translateY(-2px);filter:brightness(1.03)} .btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; background:transparent;color:var(--sky-700);font:700 1rem/1 var(--font-display); padding:calc(.9rem - 1.5px) calc(1.6rem - 1.5px);border:1.5px solid var(--sky-700); border-radius:var(--r-md);cursor:pointer;text-decoration:none;transition:background-color .2s,transform .18s} .btn-secondary:hover{background:var(--sky-50);transform:translateY(-2px)} .on-dark .btn-secondary,.mesh-dark .btn-secondary{color:#fff;border-color:rgba(255,255,255,.5)} .on-dark .btn-secondary:hover,.mesh-dark .btn-secondary:hover{background:rgba(255,255,255,.10)} /* Glass-карточка */ .s-card{position:relative;background:var(--glass-bg); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid var(--glass-border);border-radius:var(--r-lg); box-shadow:var(--shadow-card);padding:1.75rem; transform-style:preserve-3d;will-change:transform; transition:transform .25s, box-shadow .25s} .s-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)} .on-dark .s-card,.mesh-dark .s-card{background:rgba(255,255,255,.06); border-color:rgba(134,201,255,.18);box-shadow:0 22px 48px -22px rgba(0,0,0,.5)} /* Чип / бейдж (pill-стекло) */ .s-chip{display:inline-flex;align-items:center;gap:.4rem; background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border:1px solid var(--sky-100);border-radius:var(--r-pill); box-shadow:var(--shadow-2);padding:.4rem .85rem; font:600 .8125rem/1 var(--font-text);color:var(--ink-ink)} .s-badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:var(--r-pill); padding:.3rem .7rem;font:700 .75rem/1 var(--font-display);letter-spacing:.02em} .s-badge--amber{background:var(--amber-400);color:var(--ink-950)} .s-badge--sky{background:var(--sky-100);color:var(--sky-700)} /* Иконка-плашка (линейный SVG внутри) */ .s-icon{display:inline-flex;align-items:center;justify-content:center; width:48px;height:48px;border-radius:var(--r-md); background:var(--sky-50);color:var(--sky-700);transition:transform .2s} .s-icon svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.75;fill:none} .s-card:hover .s-icon{transform:scale(1.06)} .on-dark .s-icon,.mesh-dark .s-icon{background:rgba(46,155,255,.12);color:var(--sky-300)} /* Метрика / KPI */ .s-metric .num{font:800 clamp(2rem,4vw,3rem)/1 var(--font-display); font-variant-numeric:tabular-nums;color:var(--sky-700)} .s-metric .num--pos{color:var(--pos)} .s-metric .label{font:500 .9375rem/1.3 var(--font-text);color:var(--ink-2);margin-top:.35rem} /* Форма */ .s-input{width:100%;min-height:44px;background:#fff;color:var(--ink-ink); border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem 1rem; font:400 1rem/1.4 var(--font-text);transition:border-color .2s, box-shadow .2s} .s-input::placeholder{color:var(--ink-3)} .s-input:focus{outline:none;border-color:var(--sky-500); box-shadow:0 0 0 3px rgba(46,155,255,.35)} /* Таймлайн (процесс / «как мигрируем») — структура antihaos, перекрашена */ .tl{position:relative;padding-left:2.25rem} .tl::before{content:"";position:absolute;left:.6rem;top:.4rem;bottom:.4rem;width:2px; background:linear-gradient(180deg,var(--sky-500),rgba(46,155,255,.15))} .tli{position:relative;padding-bottom:2rem} .tli:last-child{padding-bottom:0} .tli::before{content:"";position:absolute;left:-1.78rem;top:.15rem;width:14px;height:14px; border-radius:50%;background:var(--paper);border:4px solid var(--sky-500); box-shadow:0 4px 10px rgba(46,155,255,.4)} .mesh-dark .tli::before,.on-dark .tli::before{background:var(--ink-900)} /* Glass-навигация (sticky) */ .s-nav{position:sticky;top:0;z-index:50; background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)} .s-nav a{color:var(--ink-ink);text-decoration:none;transition:color .2s} .s-nav a:hover{color:var(--sky-700)} /* ---------- 4. Motion (CSS-часть; JS — motion.js) ---------- */ /* 4.1 scroll-reveal */ .reveal{opacity:0;transform:translateY(30px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} /* 4.3 float (idle-парение 3D-объектов/шардов) */ .fx-float{animation:float 7s ease-in-out infinite} .fx-float.b{animation-duration:9s;animation-delay:-2s} .fx-float.c{animation-duration:8s;animation-delay:-4s} @keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(3deg)}} /* scroll-down пульс */ .scroll-pulse{animation:pulse 1.6s ease-in-out infinite} @keyframes pulse{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(6px);opacity:1}} /* ---------- 4.8 Доступность: prefers-reduced-motion ---------- */ @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} .fx-float,.scroll-pulse{animation:none} .s-card{transition:none} *{scroll-behavior:auto} }