/* ==== i-Space.tech — дизайн-токены (единственный источник значений стиля) ==== Тема: :root = тёмная «глубокая ночь» (дефолт, обыгрывает имя i-Space), [data-theme="light"] = светлая. Механика тем — data-theme на . Палитра унаследована от базового набора design-system (контрастные пары уже проверены числом — см. design/spec.md § Доступность), подписи адаптированы под смысл задачи (аутсорсинг / удалённая команда / tech). Скопировано из design/styles.css (источник токенов) — не изобретаем заново. */ :root { /* — Палитра — */ --background: #0B1026; /* фон страницы: тёмный космос */ --surface: #111B3A; /* карточки услуг/преимуществ */ --surface-raised: #1A2550; /* модалка формы, поповеры */ --foreground: #F5F8FF; /* основной текст */ --muted-foreground: #B8C4D8; /* вторичный текст, подписи */ --primary: #7EC8C8; /* CTA «Оставить заявку», ссылки-акценты */ --primary-foreground: #06122B; /* текст НА primary — 9:1 */ --primary-hover: #A8E6CF; --accent: #F2A7B3; /* бейджи «без выходных», выделения */ --accent-foreground: #2A0E16; /* текст на accent — 9:1 */ --success: #5BD9A4; --success-foreground: #06231A; --warning: #F0B86E; --warning-foreground: #2B1B08; --destructive: #F0617A; /* ошибки формы */ --destructive-foreground: #2C0810; --border: rgba(255, 255, 255, 0.10); --input: rgba(255, 255, 255, 0.06); --ring: var(--primary); /* focus-visible outline */ /* — Типографика (fluid, mobile-first) — */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-hero: clamp(2.25rem, 5vw, 3.75rem); --font-h1: clamp(1.875rem, 3.5vw, 2.75rem); --font-h2: clamp(1.5rem, 2.5vw, 2rem); --font-h3: clamp(1.1rem, 1.5vw, 1.4rem); --font-body: clamp(0.95rem, 1.1vw, 1.0625rem); --font-small: 0.8125rem; --lh-tight: 1.15; --lh-body: 1.6; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* — Spacing (база 8px) — */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* — Контейнер / сетка — */ --container-max: 1200px; --gutter: var(--space-4); /* — Радиусы / тени / движение — */ --radius-sm: 0.375rem; /* инпуты, чипы */ --radius-md: 0.625rem; /* кнопки, бейджи */ --radius-lg: 1rem; /* карточки, форма */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --dur-fast: 150ms; --dur-base: 250ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } [data-theme="light"] { --background: #F7F9FC; --surface: #FFFFFF; --surface-raised: #FFFFFF; --foreground: #0F1834; --muted-foreground: #45526E; --primary: #1B8C8C; --primary-foreground: #FFFFFF; --primary-hover: #146E6E; --accent: #D85C72; --accent-foreground: #FFFFFF; --success: #1F9D6B; --success-foreground: #FFFFFF; --warning: #C98A2E; --warning-foreground: #FFFFFF; --destructive: #D6324D; --destructive-foreground: #FFFFFF; --border: rgba(11, 16, 38, 0.10); --input: rgba(11, 16, 38, 0.04); --shadow-sm: 0 1px 2px rgba(15, 24, 52, 0.08); --shadow-md: 0 4px 16px rgba(15, 24, 52, 0.10); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } } /* ==== Базовые элементы ==== */ * { box-sizing: border-box; } html { overflow-x: hidden; } body { margin: 0; overflow-x: hidden; max-width: 100%; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: var(--font-body); line-height: var(--lh-body); overflow-wrap: break-word; word-break: break-word; } img, svg { max-width: 100%; } .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } h1, .h1 { font-size: var(--font-hero); line-height: var(--lh-tight); font-weight: var(--fw-bold); margin: 0 0 var(--space-4); } h2, .h2 { font-size: var(--font-h1); line-height: var(--lh-tight); font-weight: var(--fw-bold); margin: 0 0 var(--space-6); } h3, .h3 { font-size: var(--font-h2); line-height: var(--lh-tight); font-weight: var(--fw-medium); margin: 0 0 var(--space-3); } p { color: var(--muted-foreground); } /* — Кнопка (все состояния) — */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--primary); color: var(--primary-foreground); border: none; border-radius: var(--radius-md); min-height: 44px; padding: 0 var(--space-6); font-size: var(--font-body); font-weight: var(--fw-bold); cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn-primary:hover { background: var(--primary-hover); } .btn-primary:active { transform: translateY(1px); } .btn-primary:focus-visible{ outline: 2px solid var(--ring); outline-offset: 2px; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } /* — Карточка (услуги / преимущества) — */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* — Иконка-чип карточки (замена эмодзи на line-SVG, см. design/spec.md § Иконография) — Единственный источник размеров/цвета иконок: сам самодостаточен (viewBox/stroke/stroke-width/linecap/linejoin заданы атрибутами на теге), здесь задаём только габариты обёртки и цвет через currentColor. */ .card .icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; margin-bottom: var(--space-3); border-radius: 50%; background: var(--surface-raised); color: var(--primary); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .card .icon svg { width: 1.5rem; height: 1.5rem; display: block; } .card:hover .icon { background: var(--primary); color: var(--primary-foreground); } /* — Инлайн-иконка в сообщениях формы (успех/ошибка) — цвет наследуется от родителя (.success-msg → --success, .error-msg → --destructive), отдельно не задаём. */ .icon-inline { display: inline-flex; flex-shrink: 0; width: 1.125rem; height: 1.125rem; } .icon-inline svg { width: 100%; height: 100%; display: block; } /* — Поле формы (все состояния) — */ .field { margin-bottom: var(--space-4); } .field label { display: block; margin-bottom: var(--space-2); font-size: var(--font-small); color: var(--muted-foreground); } .field input { width: 100%; min-height: 44px; background: var(--input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--foreground); padding: 0 var(--space-4); font-size: var(--font-body); font-family: inherit; transition: border-color var(--dur-fast) var(--ease-out); } .field input::placeholder { color: var(--muted-foreground); } .field input:hover { border-color: var(--primary); } .field input:focus-visible, .field input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px rgba(126, 200, 200, 0.25); } .field input:disabled{ opacity: 0.5; cursor: not-allowed; } .field.error input { border-color: var(--destructive); } .field.error .error-msg { display: flex; align-items: center; gap: var(--space-2); color: var(--destructive); font-size: var(--font-small); margin-top: var(--space-2); } /* — Сообщение успеха отправки формы (см. design/spec.md § Иконография/Доступность для контраста) — */ .success-msg { display: none; align-items: center; gap: var(--space-2); background: rgba(91, 217, 164, 0.12); border: 1px solid var(--success); color: var(--success); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--font-small); } .success-msg.visible { display: flex; } /* — Бейдж (напр. «без выходных») — */ .badge { display: inline-block; background: var(--accent); color: var(--accent-foreground); border-radius: var(--radius-md); padding: var(--space-1) var(--space-3); font-size: var(--font-small); font-weight: var(--fw-medium); } /* — Ссылка — */ a { color: var(--primary); } a:hover { color: var(--primary-hover); } a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }