/* ============================================ CSS для ОДО «УНИВЕРСАЛ-АВТО» Адаптивный дизайн, сине-стальная палитра с оранжевыми акцентами ============================================ */ /* CSS Custom Properties (переменные) */ :root { /* Цветовая палитра - сине-стальная с оранжевыми акцентами */ --color-primary: #1e40af; /* Основной синий */ --color-primary-light: #3b82f6; /* Светлый синий */ --color-primary-dark: #1e3a8a; /* Темный синий */ --color-secondary: #f97316; /* Оранжевый акцент */ --color-secondary-light: #fb923c; --color-secondary-dark: #ea580c; /* Нейтральные цвета */ --color-white: #ffffff; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; --color-black: #000000; /* Эффекты */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Стекло-эффект */ --glass-background: rgba(255, 255, 255, 0.85); --glass-border: rgba(255, 255, 255, 0.2); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* Темный режим для карточек */ --dark-card-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); --dark-card-border: rgba(255, 255, 255, 0.1); /* Типографика */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; /* Отступы и контейнер */ --container-max: 1200px; --container-padding: 1rem; --section-spacing: 5rem; /* Анимации */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 500ms ease; /* Скругления */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; } /* Базовый сброс */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; /* Базовый размер шрифта */ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-primary); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-gray-800); background-color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Типографика */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: var(--line-height-tight); color: var(--color-gray-900); margin-bottom: 1rem; } h1 { font-size: var(--font-size-3xl); font-weight: 700; } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } p { margin-bottom: 1rem; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-secondary); } /* Утилитарные классы */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -40px; left: 0; background: var(--color-primary); color: white; padding: 8px 16px; z-index: 9999; text-decoration: none; border-radius: var(--radius-md); } .skip-link:focus { top: 10px; } /* Контейнер */ .container2 { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } /* Секции */ section { padding: var(--section-spacing) 0; } .section-title { text-align: center; margin-bottom: 3rem; position: relative; margin-top:60px; } .section-title::after { content: ''; position: absolute; bottom: -0.75rem; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: var(--color-secondary); border-radius: var(--radius-full); } /* Кнопки */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-family: var(--font-primary); font-size: var(--font-size-base); font-weight: 500; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; transition: all var(--transition-normal); user-select: none; -webkit-user-select: none; touch-action: manipulation; } .btn:focus { outline: 2px solid var(--color-primary-light); outline-offset: 2px; } .btn--primary { background: var(--color-primary); color: var(--color-white); } .btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn--accent { background: var(--color-secondary); color: var(--color-white); } .btn--accent:hover { background: var(--color-secondary-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn--outline:hover { background: var(--color-primary); color: var(--color-white); transform: translateY(-2px); } .btn--large { padding: 1rem 2rem; font-size: var(--font-size-lg); } .btn--block { width: 100%; } /* Шапка */ .header2 { position: fixed; top: 0; left: 0; right: 0; background: var(--glass-background); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); z-index: 1000; } .header__inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; } /* Герой-секция */ .hero2 { background: linear-gradient(135deg, var(--primary-dark) 0%, rgb(0 0 0 / 70%) 100%), url(/assets/images/metalloobrabotka.jpg) no-repeat center center/cover; } .hero2 h1 { margin-top:1.5rem; font-size: 1.8rem; margin-bottom: 1.5rem; color: white; } .hero2 p { font-size: 1.4rem; margin-bottom: 2.5rem; color: #cbd5e1; } .hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .hero__title { font-size: var(--font-size-5xl); margin-bottom: 1.5rem; line-height: 1.1; } .hero__subtitle { font-size: var(--font-size-lg); color: var(--color-gray-600); margin-bottom: 2rem; max-width: 90%; } .hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; } .hero__image { position: relative; } .image-placeholder { background: var(--color-white); background-image: url(/assets/images/metalloobrabotka.jpg); border-radius: var(--radius-2xl); padding: 2rem; box-shadow: var(--shadow-xl); border: 1px solid var(--color-gray-200); animation: float 6s ease-in-out infinite; height: 400px; width: 600px; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* Спецификации */ .specs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .spec-card { background: var(--color-white); padding: 2rem; border-radius: var(--radius-xl); text-align: center; border: 1px solid var(--color-gray-200); transition: all var(--transition-normal); } .spec-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-light); } .spec-card__icon { font-size: 2.5rem; margin-bottom: 1rem; } .spec-card__title { font-size: var(--font-size-lg); margin-bottom: 0.5rem; } .spec-card__value { font-size: var(--font-size-3xl); font-weight: 700; color: var(--color-primary); margin-bottom: 0.5rem; } .spec-card__desc { color: var(--color-gray-600); font-size: var(--font-size-sm); } /* Особенности (темные карточки) */ .features { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: var(--color-white); } .features .section-title { color: var(--color-white); } .features .section-title::after { background: var(--color-secondary); } .features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .features__grid2 { display: grid; grid-template-columns: repeat(1, 1fr); gap: 2rem; } .feature-card { background: var(--dark-card-bg); border: 1px solid var(--dark-card-border); border-radius: var(--radius-xl); padding: 2.5rem 2rem; text-align: center; transition: all var(--transition-normal); cursor: pointer; position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--color-secondary); transform: scaleX(0); transition: transform var(--transition-normal); } .feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); } .feature-card:hover::before { transform: scaleX(1); } .feature-card:focus { outline: 2px solid var(--color-secondary); outline-offset: 2px; } .feature-card__icon { font-size: 3rem; margin-bottom: 1.5rem; color: var(--color-secondary); } .feature-card__title { font-size: var(--font-size-xl); color: var(--color-white); margin-bottom: 1rem; } .feature-card__desc { color: var(--color-gray-400); line-height: var(--line-height-relaxed); } /* Категории */ .categories__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .category-card { display: block; background: var(--color-white); border-radius: var(--radius-xl); padding: 2.5rem 2rem; text-align: center; border: 2px solid transparent; transition: all var(--transition-normal); text-decoration: none; } .category-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); border-color: var(--color-primary-light); } .category-card:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } .category-card__image { margin-bottom: 1.5rem; } .category-card__title { font-size: var(--font-size-xl); color: var(--color-gray-900); margin-bottom: 0.75rem; } .category-card__desc { color: var(--color-gray-600); font-size: var(--font-size-sm); } /* Подвал */ .footer { background: var(--color-gray-900); color: var(--color-gray-300); padding: 4rem 0 2rem; } .footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; margin-bottom: 3rem; } .footer__title { color: var(--color-white); font-size: var(--font-size-lg); margin-bottom: 1.5rem; position: relative; padding-bottom: 0.75rem; } .footer__title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: var(--color-secondary); border-radius: var(--radius-full); } .footer__desc { margin-bottom: 1.5rem; line-height: var(--line-height-relaxed); } .footer__social { display: flex; gap: 1rem; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--color-gray-800); color: var(--color-white); border-radius: var(--radius-md); transition: all var(--transition-fast); } .social-link:hover { background: var(--color-secondary); transform: translateY(-2px); } .footer__links { list-style: none; } .footer__link { display: block; padding: 0.5rem 0; color: var(--color-gray-400); transition: color var(--transition-fast); } .footer__link:hover { color: var(--color-secondary); padding-left: 5px; } .footer__address { font-style: normal; margin-bottom: 1.5rem; line-height: var(--line-height-relaxed); } .footer__contacts { list-style: none; } .footer__contact-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; color: var(--color-gray-400); transition: color var(--transition-fast); } .footer__contact-link:hover { color: var(--color-secondary); } .contact-icon { font-size: 1.25rem; } .subscribe-form { margin-top: 1rem; } .form-group { margin-bottom: 1rem; } .form-input { width: 100%; padding: 0.75rem 1rem; font-family: var(--font-primary); font-size: var(--font-size-base); border: 2px solid var(--color-gray-700); border-radius: var(--radius-md); background: var(--color-gray-800); color: var(--color-white); transition: all var(--transition-fast); } .form-input:focus { outline: none; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1); } .form-input::placeholder { color: var(--color-gray-500); } .footer__note { font-size: var(--font-size-sm); color: var(--color-gray-500); margin-top: 1rem; } .footer__policy { color: var(--color-secondary); text-decoration: underline; } .footer__bottom { padding-top: 2rem; border-top: 1px solid var(--color-gray-800); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer__copyright { color: var(--color-gray-500); font-size: var(--font-size-sm); } .footer__legal { display: flex; gap: 1.5rem; } .footer__legal-link { color: var(--color-gray-500); font-size: var(--font-size-sm); transition: color var(--transition-fast); } .footer__legal-link:hover { color: var(--color-secondary); } /* Адаптивность */ @media (max-width: 1024px) { :root { --container-max: 960px; --font-size-5xl: 2.5rem; --font-size-4xl: 2rem; --font-size-3xl: 1.75rem; } .hero__grid { gap: 3rem; } .specs__grid, .features__grid, .categories__grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } @media (max-width: 768px) { :root { --container-padding: 1.5rem; --section-spacing: 3rem; --font-size-5xl: 2rem; --font-size-4xl: 1.75rem; --font-size-3xl: 1.5rem; } .header__actions .btn:not(.mobile-toggle) { display: none; } .mobile-toggle { display: flex; } .hero { padding-top: 6rem; } .hero__grid { grid-template-columns: 1fr; text-align: center; gap: 2rem; } .hero__subtitle { max-width: 100%; margin-left: auto; margin-right: auto; } .hero__actions { justify-content: center; } .specs__grid, .features__grid, .categories__grid { grid-template-columns: 1fr; gap: 1.5rem; } .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; text-align: center; gap: 1rem; } .footer__legal { flex-wrap: wrap; justify-content: center; gap: 1rem; } } @media (max-width: 480px) { :root { --container-padding: 1rem; --font-size-5xl: 1.75rem; --font-size-4xl: 1.5rem; --font-size-3xl: 1.25rem; } .hero__actions { flex-direction: column; align-items: stretch; } .btn--large { padding: 0.875rem 1.5rem; font-size: var(--font-size-base); } .spec-card, .feature-card, .category-card { padding: 1.5rem 1rem; } .mobile-menu { width: 100%; } } /* Анимации для загрузки */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.6s ease-out; } /* Поддержка prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Поддержка темной темы ОС */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-white: #111827; --color-gray-50: #1f2937; --color-gray-100: #374151; --color-gray-200: #4b5563; --color-gray-300: #6b7280; --color-gray-400: #9ca3af; --color-gray-500: #d1d5db; --color-gray-600: #e5e7eb; --color-gray-700: #f3f4f6; --color-gray-800: #f9fafb; --color-gray-900: #ffffff; --glass-background: rgba(17, 24, 39, 0.85); --glass-border: rgba(255, 255, 255, 0.1); } } /* Ховеры и фокусы для доступности */ @media (hover: hover) and (pointer: fine) { .btn:hover, .nav__link:hover, .category-card:hover, .social-link:hover { transform: translateY(-2px); } } /* Печать */ @media print { .header, .footer, .hero__actions, .mobile-toggle { display: none !important; } body { font-size: 12pt; line-height: 1.5; color: black; } .container { max-width: 100%; padding: 0; } a { color: black; text-decoration: underline; } .hero { padding-top: 0; } section { padding: 1rem 0; break-inside: avoid; } }