/* * base.css — Дизайн-система ChinaHunt * * Этот файл подключается на КАЖДОЙ странице сайта. * Здесь только: переменные, сброс, типографика, общие компоненты (nav, footer). * Страничные стили — в отдельных файлах (page-home.css, page-legal.css и т.д.) * * Когда сайт вырастет: * - Добавляй новые CSS-переменные сюда, не дублируй их * - Компоненты (кнопки, карточки, формы) — в css/components/ * - Темы (светлая/тёмная) — через data-theme на */ /* ───────────────────────────────────────── ДИЗАЙН-ТОКЕНЫ ───────────────────────────────────────── */ :root { /* Цвета бренда */ --color-brand: #E8341C; --color-brand-dark: #C0230E; --color-brand-light: #FF6B52; /* Нейтральные */ --color-ink: #0D0D0D; --color-ink-secondary:#3D3730; --color-muted: #6B6560; --color-border: #D9D2C8; --color-surface: #FFFFFF; --color-bg: #F5F0E8; --color-bg-elevated: #EDE8DF; /* Типографика */ --font-display: 'Unbounded', sans-serif; --font-body: 'Onest', sans-serif; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.5rem; /* 40px */ --leading-tight: 1.1; --leading-snug: 1.35; --leading-normal: 1.6; --leading-loose: 1.8; /* Отступы */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Радиусы */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px; /* Тени */ --shadow-sm: 0 1px 4px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 8px 40px rgba(0,0,0,.10); /* Анимации */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Макет */ --nav-height: 73px; --content-max-width: 1200px; --content-padding: var(--space-12); /* 48px на десктопе */ } /* ───────────────────────────────────────── СБРОС И БАЗОВЫЕ СТИЛИ ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-ink); background-color: var(--color-bg); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Текстура шума — атмосферный слой поверх фона */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; opacity: .028; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { cursor: pointer; font-family: inherit; } /* ───────────────────────────────────────── НАВИГАЦИЯ ───────────────────────────────────────── */ .nav { position: relative; z-index: 100; display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); padding: 0 var(--content-padding); border-bottom: 1px solid var(--color-border); background-color: var(--color-bg); } .nav__logo { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); letter-spacing: -0.03em; text-decoration: none; color: var(--color-ink); line-height: 1; } .nav__logo span { color: var(--color-brand); } .nav__links { display: flex; align-items: center; gap: var(--space-8); list-style: none; } .nav__link { font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; transition: color var(--transition-fast); } .nav__link:hover { color: var(--color-ink); } .nav__link--cta { color: var(--color-brand); font-weight: 500; } .nav__link--cta:hover { color: var(--color-brand-dark); } /* ───────────────────────────────────────── КНОПКИ ───────────────────────────────────────── */ /* Базовый класс — применяй вместе с модификатором */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 500; font-size: var(--text-base); line-height: 1; padding: 14px 28px; border: none; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); cursor: pointer; } .btn--primary { background: var(--color-brand); color: #fff; } .btn--primary:hover { background: var(--color-brand-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--primary:active { transform: translateY(0); box-shadow: none; } .btn--secondary { background: transparent; color: var(--color-ink); border: 1px solid var(--color-border); } .btn--secondary:hover { border-color: var(--color-ink); background: var(--color-bg-elevated); } .btn--lg { font-size: var(--text-lg); padding: 18px 36px; } .btn--sm { font-size: var(--text-sm); padding: 10px 20px; } /* ───────────────────────────────────────── КОНТЕЙНЕР ───────────────────────────────────────── */ .container { width: 100%; max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--content-padding); } /* ───────────────────────────────────────── ПОДВАЛ ───────────────────────────────────────── */ .footer { position: relative; z-index: 1; border-top: 1px solid var(--color-border); background-color: var(--color-bg); } .footer__main { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-8); padding: var(--space-10) var(--content-padding); } .footer__brand-name { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); letter-spacing: -0.03em; text-decoration: none; color: var(--color-ink); display: block; margin-bottom: var(--space-3); } .footer__brand-name span { color: var(--color-brand); } .footer__brand-desc { font-size: var(--text-sm); color: var(--color-muted); line-height: var(--leading-normal); max-width: 240px; } .footer__cols { display: flex; gap: var(--space-16); flex-wrap: wrap; } .footer__col-title { font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink); margin-bottom: var(--space-4); } .footer__col-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .footer__col-link { font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; transition: color var(--transition-fast); } .footer__col-link:hover { color: var(--color-brand); } .footer__bottom { border-top: 1px solid var(--color-border); padding: var(--space-5) var(--content-padding); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); } .footer__copy { font-size: var(--text-xs); color: var(--color-muted); } .footer__legal-info { font-size: var(--text-xs); color: var(--color-muted); text-align: right; line-height: var(--leading-loose); } /* ───────────────────────────────────────── АДАПТИВ ───────────────────────────────────────── */ @media (max-width: 768px) { :root { --content-padding: var(--space-6); /* 24px на мобиле */ --nav-height: 64px; } .footer__main { padding: var(--space-8) var(--content-padding); } .footer__cols { gap: var(--space-10); } .footer__legal-info { text-align: left; } } @media (max-width: 480px) { :root { --content-padding: var(--space-5); /* 20px на маленьких экранах */ } }