/* Base styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } /* Mixology Quest Neon Palette Tokens */ :root { --bg-gradient-start: #5A00FF; --bg-gradient-end: #FF00A6; --surface: #2E0068; --accent-pink: #FF4D8D; --accent-teal: #00FFC6; --accent-sun: #FFD166; --text: #FFFFFF; --text-muted: rgba(255,255,255,0.78); --border: rgba(255,255,255,0.12); --glow-pink: 0 0 16px rgba(255,77,141,0.35); --glow-teal: 0 0 16px rgba(0,255,198,0.35); } /* 🧹 СТИЛИ ШАПКИ УДАЛЕНЫ - теперь работают только из header.js */ display: inline-block; border: none !important; box-shadow: none !important; font-size: 0.85rem; line-height: 1.5; white-space: nowrap; } /* 🗑️ СТИЛИ НАВИГАЦИИ УДАЛЕНЫ - создаются вручную */ box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3) !important; transition: all 0.3s ease !important; } /* Mobile responsiveness */ /* 🗑️ МОБИЛЬНЫЕ СТИЛИ НАВИГАЦИИ УДАЛЕНЫ - создаются вручную */ /* Styles for sections without cards */ .section-nocards { background: linear-gradient(135deg, #f6f9fc 0%, #ffffff 100%); border-radius: 40px; padding: 5rem 3rem; margin: 4rem auto; max-width: 1400px; box-shadow: 0 30px 60px rgba(0,0,0,0.15); position: relative; overflow: hidden; } .section-nocards::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, #FF6B6B, #4ECDC4); } .section-nocards h2 { font-size: 3rem; font-weight: 900; text-align: center; margin-bottom: 3rem; background: linear-gradient(45deg, #2C3E50, #3498DB); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; letter-spacing: 3px; font-family: "Montserrat", sans-serif; text-shadow: 3px 3px 6px rgba(0,0,0,0.2); } .section-nocards p { font-size: 1.8rem; text-align: center; margin-bottom: 5rem; color: #34495E; font-family: "Playfair Display", serif; font-style: italic; line-height: 1.8; max-width: 800px; margin: 0 auto 5rem; padding: 0 1.5rem; } /* Styles for blocks in sections without cards */ .section-nocards .service-block { background: rgba(255, 255, 255, 0.95); border-radius: 30px; padding: 4rem; box-shadow: 0 15px 45px rgba(0,0,0,0.08); border: 2px solid rgba(0,0,0,0.08); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(0); margin-bottom: 4rem; } .section-nocards .service-block:hover { transform: translateY(-20px); box-shadow: 0 30px 60px rgba(0,0,0,0.15); border-color: #4ECDC4; border-width: 3px; } .section-nocards .service-block h3 { font-size: 2.8rem; font-weight: 800; margin-bottom: 2.5rem; color: #2C3E50; font-family: "Montserrat", sans-serif; border-bottom: 4px solid #4ECDC4; padding-bottom: 1.5rem; } .section-nocards .service-block p { font-size: 1.5rem; line-height: 2; color: #34495E; font-family: "Playfair Display", serif; white-space: pre-wrap; text-align: left; margin: 0; } /* Styles for sections without cards with images */ .section-nocards.with-image { display: flex; flex-direction: row; align-items: flex-start; gap: 4rem; } .section-nocards.with-image .content { flex: 1; } .section-nocards.with-image .image-container { flex: 0 0 40%; position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.15); transition: all 0.4s ease; } .section-nocards.with-image .image-container:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.2); } .section-nocards.with-image .image-container img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; } .section-nocards.with-image .image-container:hover img { transform: scale(1.05); } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .section-nocards .service-block { animation: fadeInUp 0.7s ease-out forwards; } /* Responsiveness */ @media (max-width: 768px) { .section-nocards { padding: 3rem 1.5rem; margin: 2rem auto; border-radius: 20px; } .section-nocards h2 { font-size: 2rem; margin-bottom: 2rem; } .section-nocards p { font-size: 1.2rem; margin-bottom: 3rem; } .section-nocards .service-block { padding: 2rem; margin-bottom: 2rem; } .section-nocards .service-block h3 { font-size: 1.8rem; margin-bottom: 1.5rem; } .section-nocards .service-block p { font-size: 1.1rem; line-height: 1.6; } .section-nocards.with-image { flex-direction: column; } .section-nocards.with-image .image-container { flex: 0 0 100%; margin-bottom: 2rem; } } /* Old header styles removed - now using header.js */ body { line-height: 1.6; color: #333; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; margin: 0; padding: 0; width: 100%; } /* --- NEW: Landing page core styles --- */ .mq-hero { min-height: 100vh; position: relative; display: grid; place-items: center; padding: 120px 1rem 80px; color: var(--text); } .mq-hero-bg { position: absolute; inset: 0; overflow: hidden; } .mq-hero-gradient { position: absolute; inset: -10%; background: linear-gradient(140deg, var(--bg-gradient-start), var(--bg-gradient-end)); filter: saturate(110%); opacity: 0.45; } .mq-hero-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; mix-blend-mode: normal; } .mq-hero-content { position: relative; z-index: 2; max-width: 980px; text-align: center; padding: 0 1rem; } .mq-hero-title { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 3rem; letter-spacing: 0.5px; text-shadow: 0 2px 12px rgba(0,0,0,0.35); } .mq-hero-subtitle { margin-top: 1rem; font-size: 1.2rem; color: var(--text); text-shadow: 0 1px 6px rgba(0,0,0,0.4); } .mq-hero-subtext { margin-top: 0.8rem; font-size: 1rem; color: var(--text-muted); } .mq-hero-actions { margin-top: 1.6rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .mq-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .mq-btn-primary { background: var(--accent-pink); color: var(--text); box-shadow: var(--glow-pink); } .mq-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(255,77,141,0.5); } .mq-btn-secondary { background: var(--accent-teal); color: #041b16; box-shadow: var(--glow-teal); } .mq-btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(0,255,198,0.5); } .mq-btn-outline { background: transparent; border-color: var(--accent-teal); color: var(--accent-teal); } .mq-btn-outline:hover { background: var(--accent-teal); color: #0b1a16; box-shadow: var(--glow-teal); } .mq-section { position: relative; padding: 5rem 0; background: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,0.06), transparent 60%), #0b001b; color: var(--text); } .mq-section:nth-child(even) { background: linear-gradient(180deg, #0b001b 0%, #120033 100%); } .mq-minigame .section-header p, .mq-flavor-map .section-header p, .mq-features .section-header p, .mq-ingredients .section-header p, .mq-secrets .section-header p, .mq-community .section-header p { color: var(--text-muted); } .mq-minigame .game-toolbar { display:flex; gap:.75rem; justify-content:center; margin-bottom:1rem; } .mq-minigame .game-wrapper { display:flex; justify-content:center; } .mq-minigame .game-container { width: 100%; max-width: 900px; aspect-ratio: 4 / 3; background: var(--surface); border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,0.35); overflow: hidden; } .mq-minigame .game-frame { width: 100%; height: 100%; border: 0; display: block; } .mq-flavor-map .map-card { background: #16003b; border: 1px solid var(--border); border-radius: 20px; padding: 1rem; box-shadow: 0 10px 40px rgba(0,0,0,0.35); } .mq-flavor-map .map-surface { position: relative; width: 100%; padding-top: 50%; background-image: linear-gradient(0deg, rgba(14,0,40,0.55), rgba(14,0,40,0.55)), url('../images/1.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 16px; overflow: hidden; } .feature-card { background: #19004a; border: 1px solid var(--border); color: var(--text); box-shadow: 0 12px 32px rgba(0,0,0,0.35); } .feature-card .card-title { color: var(--accent-teal); } .ingredient-card { background: #1d0056; border: 1px solid var(--border); color: var(--text); } .ingredient-card .card-title { color: var(--accent-sun); } .tip-card { background: #220068; border: 1px solid var(--border); color: var(--text); } .tip-card .card-title { color: var(--accent-pink); } .tip-card .card-image { height: 140px; margin: -1.5rem -1.5rem 1rem -1.5rem; border-bottom: 1px solid var(--border); overflow: hidden; } .tip-card .card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .testimonial-card { background: #24006f; border: 1px solid var(--border); color: var(--text); } @media (max-width: 960px) { .mq-hero-title { font-size: 2.35rem; } .mq-hero-subtitle { font-size: 1.05rem; } } @media (max-width: 600px) { .mq-hero { padding-top: 110px; } .mq-hero-title { font-size: 1.9rem; } .mq-hero-subtitle { font-size: .95rem; } /* Ensure full hero image is visible on mobile */ .mq-hero-map { object-fit: contain; } } /* Active link state for header navigation */ .nav-link.active { background: rgba(255,255,255,0.12) !important; color: #ffffff !important; font-weight: 600 !important; border-radius: 12px !important; padding: 0.4rem 0.8rem !important; box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important; transition: all 0.3s ease !important; } /* Text block styling for features section replacement */ .mq-text-block { max-width: 900px; margin: 0 auto; text-align: center; } .mq-text-block p { font-size: 1.2rem; line-height: 1.8; color: var(--text); opacity: 0.95; margin-bottom: 1rem; } /* Juicy Bar: Cocktail Challenge */ .juicybar { width: 100%; max-width: 900px; margin: 0 auto; } .jb-screen { background: #140034; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); padding: 1rem; display: none; } .jb-screen[aria-hidden="false"], .jb-screen.active { display: block; } .jb-title { text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 800; margin: 1rem 0 .5rem; color: var(--accent-teal); } .jb-subtitle { text-align: center; color: var(--text-muted); margin-bottom: 1.25rem; } .jb-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; } .jb-welcome { place-items: center; min-height: 56vh; text-align: center; padding: 2rem 1rem; } .jb-welcome[aria-hidden="false"], .jb-result[aria-hidden="false"] { display: grid; } .jb-welcome .jb-start-btn { margin-top: .75rem; } .jb-game { padding: 0; } .jb-hud { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; background: rgba(255,255,255,0.05); border-radius: 12px; margin: .5rem; border: 1px solid var(--border); } .jb-timer, .jb-score { font-weight: 800; font-family: 'Montserrat', sans-serif; } .jb-timer { color: var(--accent-sun); } .jb-score { color: var(--accent-teal); } .jb-stage { position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 72vh; margin: .5rem auto 1rem; background: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,0.06), transparent 60%), linear-gradient(180deg, #120033 0%, #0b001b 100%); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; touch-action: manipulation; } .jb-hint { text-align: center; color: var(--text-muted); font-size: .95rem; margin-bottom: .75rem; } .jb-fruit { position: absolute; width: clamp(36px, 8vw, 64px); height: clamp(36px, 8vw, 64px); display: grid; place-items: center; font-size: clamp(18px, 5.5vw, 36px); user-select: none; cursor: pointer; transition: transform .12s ease; will-change: transform, top; } .jb-fruit:active { transform: scale(0.9); } .jb-splash { position: absolute; width: 120px; height: 120px; border-radius: 50%; pointer-events: none; opacity: 0.6; filter: blur(6px); transform: translate(-50%, -50%) scale(0.6); animation: jbSplash .45s ease-out forwards; } @keyframes jbSplash { 0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.6); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); } } .jb-result { display: grid; place-items: center; text-align: center; padding: 2rem 1rem; min-height: 56vh; opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity .25s ease, transform .25s ease; } .jb-result.show { opacity: 1; transform: translateY(0) scale(1); } .jb-result .jb-result-text { color: var(--text); opacity: .95; margin: .5rem 0 1rem; } .jb-result .jb-bonus { color: var(--accent-sun); margin-bottom: 1rem; } .jb-result .jb-restart-btn { margin-top: .5rem; } @media (max-width: 960px) { .jb-stage { aspect-ratio: 3 / 5; max-height: 70vh; } } @media (max-width: 600px) { .jb-title { font-size: 1.35rem; } .jb-subtitle { font-size: .95rem; } .jb-hud { padding: .6rem .8rem; } .jb-hint { font-size: .85rem; } } /* СТИЛИ ДЛЯ АКТИВНОЙ ССЫЛКИ УДАЛЕНЫ - теперь в header.js */ /* Styles for image gallery */ .section-gallery { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .gallery-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease; } .gallery-dot { cursor: pointer; transition: background-color 0.3s ease; } /* Styles for images inside sections with text wrapping */ section p + .section-gallery, section h2 + .section-gallery { margin-top: 1rem; margin-bottom: 1rem; } /* Styles for section borders */ section { position: relative; padding: 6rem 0; margin: 2rem 0; overflow: hidden; } section:first-child { margin-top: 0; } section:last-child { margin-bottom: 0; } /* СТИЛИ MAIN С ОТСТУПОМ ДЛЯ ШАПКИ УДАЛЕНЫ - теперь в header.js */ .hero { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 2rem; position: relative; overflow: hidden; } .hero { position: relative; overflow: hidden; } .hero-bg-animation { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; animation: heroBackgroundZoom 15s ease-in-out infinite; } @keyframes heroBackgroundZoom { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes zoomIn { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; animation: fadeIn 1s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .hero-content { max-width: 800px; z-index: 2; position: relative; animation: slideUp 1s ease-out; } @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; line-height: 1.1; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); animation: none !important; } .hero p { font-size: 1.2rem; margin-bottom: 1rem; line-height: 1.3; max-width: 600px; margin-left: auto; margin-right: auto; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); animation: none !important; } .hero button { padding: 1rem 2rem; font-size: 1.1rem; border: none; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2); animation: none !important; } .hero button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); } .section { padding: 6rem 1rem; width: 100%; box-sizing: border-box; position: relative; overflow: hidden; background-color: var(--section-background-color, transparent); z-index: 1; } .section[data-show-background="false"] { background-color: transparent !important; background-image: none !important; } .section[data-show-background="false"] .section-background-blur, .section[data-show-background="false"] .section-overlay { display: none !important; } .section-background-blur { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; z-index: 0; animation: zoomIn 20s ease-in-out infinite alternate; } .section-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .section-header { text-align: center; margin-bottom: 3rem; } .section-header h2 { font-size: 2.5rem; margin-bottom: 1rem; position: relative; } .section-header h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 50px; height: 3px; background-color: #1976d2; transition: width 0.3s ease-in-out; } .section-header h2:hover::after { width: 100px; } .section-header p { font-size: 1.2rem; max-width: 800px; margin: 0 auto; line-height: 1.6; } .about-section { display: flex; align-items: flex-start; gap: 2rem; padding: 2rem; position: relative; border-radius: 16px; background: linear-gradient(145deg, #ffffff, #f5f5f5); box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .about-content { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding-left: 1rem; text-align: left; position: relative; } .about-content::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, #1976d2, #42a5f5); border-radius: 2px; } .about-content h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; text-align: left; position: relative; } .about-content h2::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 60px; height: 4px; background: linear-gradient(to right, #1976d2, #42a5f5); border-radius: 2px; } .about-content p { font-size: 1.1rem; line-height: 1.6; text-align: left; } .section-image { width: 100%; margin: 2rem auto; text-align: center; max-width: 800px; } .section-image img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.3s ease; } .section-image img:hover { transform: scale(1.02); } @media (max-width: 768px) { .about-section { flex-direction: column; } .about-content { padding-left: 0; padding-top: 1rem; } } .section h2 { font-size: 2.5rem; margin-bottom: 1rem; text-align: center; position: relative; } .section h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 50px; height: 3px; background-color: #1976d2; transition: width 0.3s ease-in-out; } .section h2:hover::after { width: 100px; } .section p { font-size: 1.1rem; margin-bottom: 3rem; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; } /* Container for cards */ .cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; padding: 1rem; position: relative; z-index: 2; pointer-events: auto; } @media (max-width: 1024px) { .cards-container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .cards-container { grid-template-columns: 1fr; } } /* Basic card styles with animations */ .card { transition: all 0.3s ease-in-out; padding: 1.5rem; display: flex; flex-direction: column; background: linear-gradient(180deg, #19004a 0%, #0b001b 100%); border: 1px solid var(--border); color: var(--text); width: 100%; max-width: 280px; border-radius: 12px; overflow: hidden; height: 100%; margin: 1rem; position: relative; z-index: 2; } /* Service image styles for image cards */ .service-image { width: 100%; overflow: hidden; position: relative; background: #f8f9fa; display: flex; align-items: center; justify-content: center; border-radius: 8px; } .service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .service-image:hover img { transform: scale(1.05); } /* Card headings and text */ .card-title { color: var(--accent-pink); margin-bottom: 0.7rem; font-size: 1.5rem; font-weight: 600; transition: all 0.3s ease-in-out; } .card-text { color: var(--text); opacity: 0.9; font-size: 1rem; line-height: 1.6; transition: all 0.3s ease-in-out; } /* Simple Card */ .card.simple { background-color: transparent; border: 3px solid #e0e0e0; } .card.simple:hover { transform: scale(1.2); z-index: 3; } /* Elevated Card */ .card.elevated { background-color: #ffffff; border: 3px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card.elevated:hover { transform: rotate(3deg) scale(1.05); box-shadow: 0 8px 16px rgba(0,0,0,0.2); z-index: 3; } .card.elevated:hover .card-title { color: #1976d2; transform: translateX(4px); } /* Outlined Card */ .card.outlined { background: linear-gradient(to right, #e8f5e9, #c8e6c9); border: 3px solid #e0e0e0; } .card.outlined:hover { transform: skew(-5deg) translateY(-5px); border-color: #1976d2; z-index: 3; } .card.outlined:hover .card-title { color: #1976d2; } /* Accent Card */ .card.accent { background-color: #ffffff; border: 3px solid #e0e0e0; position: relative; } .card.accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, #1976d2, #42a5f5); transition: width 0.3s ease-in-out; z-index: 1; } .card.accent:hover { transform: translateX(10px) translateY(-5px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 3; } .card.accent:hover::before { width: 6px; } .card.accent:hover .card-title { color: #1976d2; } /* Gradient Card */ .card.gradient { background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%); border: 3px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.3s ease-in-out; position: relative; z-index: 2; } .card.gradient:hover { transform: scale(1.2); box-shadow: 0 8px 16px rgba(0,0,0,0.2); z-index: 3; } .card.gradient:hover h3 { color: #1976d2; } .card.gradient:hover p { color: #455a64; } /* Container for sections */ .section-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } /* Section heading */ .section-header { text-align: center; margin-bottom: 4rem; } .section-header h2 { font-size: 2.5rem; margin-bottom: 1rem; position: relative; display: inline-block; } .section-header p { font-size: 1.2rem; max-width: 800px; margin: 0 auto; line-height: 1.6; } @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; } } .section-image img:hover { transform: scale(1.02); } .image-upload-control { margin-top: 1rem; display: flex; justify-content: flex-start; } @keyframes fadeInSection { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .upload-button { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background-color: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .upload-button:hover { background-color: #1565c0; } .upload-button i { font-size: 1.2rem; } .cards-container.cards-2 { max-width: 1200px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .cards-container.cards-3 { max-width: 1200px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } @media (max-width: 1024px) { .cards-container.cards-2, .cards-container.cards-3 { grid-template-columns: 1fr; } } .cards-container.cards-2 .card, .cards-container.cards-3 .card { max-width: 100%; width: 100%; } .card, .section-image img, .about-image img { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1); } .card.animate-on-scroll, .section-image img.animate-on-scroll, .about-image img.animate-on-scroll { opacity: 1; transform: translateY(0); } @media (max-width: 1024px) { .no-card-section { flex-direction: column; align-items: center; } .no-card-section .about-image { min-width: 100%; max-width: 500px; margin: 0 auto 2rem auto; order: -1; } .no-card-section .about-content { width: 100%; text-align: center; } .no-card-section .about-content h2, .no-card-section .about-content p, .no-card-section .about-content div { text-align: center !important; } .no-card-section .about-content div br { display: none; } .no-card-section .about-content div strong { display: block; margin-top: 1rem; margin-bottom: 0.5rem; } } /* Styles for text in sections */ .section h2 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01562em; text-transform: none; margin-bottom: 1.5rem; text-align: center; color: inherit; word-wrap: break-word; } .section p { font-size: 1.25rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.00938em; text-align: center; margin-bottom: 2rem; color: inherit; max-width: 100%; word-wrap: break-word; } @media (max-width: 600px) { .section h2 { font-size: 2rem; } .section p { font-size: 1rem; } } @media (max-width: 960px) { .section h2 { font-size: 2.25rem; } .section p { font-size: 1.1rem; } } /* Old multi-page header styles removed - now using header.js */ /* Hero Section for index page */ .hero-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 4rem 0; text-align: center; } .hero-section .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; } .hero-subtitle { font-size: 1.5rem; font-weight: 300; margin-bottom: 1rem; opacity: 0.9; } .hero-description { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.8; } .hero-button { display: inline-block; background: #ff6b6b; color: white; padding: 1rem 2rem; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; } .hero-button:hover { background: #ff5252; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4); } /* Sections Preview Grid */ .sections-preview { padding: 4rem 0; } .sections-preview .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .sections-preview h2 { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #2c3e50; } .preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .preview-card { background: white; border-radius: 15px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; border: 1px solid #e9ecef; } .preview-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); } .preview-card h3 { color: #2c3e50; font-size: 1.5rem; margin-bottom: 1rem; } .preview-card p { color: #6c757d; line-height: 1.6; margin-bottom: 1.5rem; } .preview-link { display: inline-block; background: #007bff; color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 8px; font-weight: 500; transition: all 0.3s ease; } .preview-link:hover { background: #0056b3; transform: translateY(-2px); } /* Стили для выделенного раздела */ .featured-section { position: relative; overflow: hidden; } .featured-content { position: relative; z-index: 2; } .featured-image { border-radius: 15px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .featured-image img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; } .featured-image:hover img { transform: scale(1.05); } .featured-button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(25, 118, 210, 0.3); } /* Стили для разных режимов отображения разделов */ .sections-preview.mode-cards .preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } /* Стили для превью контактов */ .contact-preview { position: relative; overflow: hidden; } .contact-preview-content { position: relative; z-index: 2; } .contact-preview-button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255,255,255,0.2); } /* Адаптивность для новых режимов */ @media (max-width: 768px) { .featured-content { grid-template-columns: 1fr !important; gap: 2rem !important; } .featured-section .container { padding: 0 1rem !important; } .featured-text h2 { font-size: 2rem !important; text-align: center !important; } .featured-text p { font-size: 1.1rem !important; text-align: center !important; } .featured-elements { text-align: center !important; } .featured-actions { text-align: center !important; } .sections-preview.mode-cards .preview-grid { grid-template-columns: 1fr; } .contact-preview-info { flex-direction: column; gap: 1rem; } .contact-preview-content { grid-template-columns: 1fr !important; gap: 2rem !important; } } /* Section Content Pages */ .section-content { padding: 2rem 0; } .section-content .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .section-title { font-size: 2.5rem; color: #2c3e50; margin-bottom: 1rem; text-align: center; } .section-description { font-size: 1.2rem; color: #6c757d; text-align: center; margin-bottom: 3rem; line-height: 1.6; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .cards-grid .card { background: linear-gradient(180deg, #19004a 0%, #0b001b 100%); color: var(--text); border-radius: 15px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.25); transition: all 0.3s ease; border: 1px solid var(--border); } .cards-grid .card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.15); } .card-title { color: #2c3e50; font-size: 1.3rem; margin-bottom: 1rem; } .card-content { color: #6c757d; line-height: 1.6; } /* Contact Section */ .contact-section { padding: 2rem 0; } .contact-section .container { max-width: 800px; margin: 0 auto; padding: 0 1rem; } .contact-section h1 { font-size: 2.5rem; color: #2c3e50; text-align: center; margin-bottom: 2rem; } .contact-section p { font-size: 1.2rem; color: #6c757d; text-align: center; margin-bottom: 2rem; line-height: 1.6; } .contact-info { background: inherit; /* Наследует фон от родительского контейнера */ border-radius: 15px; padding: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.1); } .contact-info p { margin-bottom: 1rem; text-align: left; font-size: 1.1rem; } .contact-info strong { color: #2c3e50; } /* Legal Content */ .legal-content { padding: 2rem 0; } .legal-content .container { max-width: 900px; margin: 0 auto; padding: 0 1rem; } .legal-content h1 { font-size: 2.5rem; color: #2c3e50; text-align: center; margin-bottom: 2rem; } .legal-content .content { background: white; border-radius: 15px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid #e9ecef; line-height: 1.6; color: #495057; } /* МОБИЛЬНЫЕ СТИЛИ ШАПКИ УДАЛЕНЫ - теперь в header.js */ @media (max-width: 768px) { .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1.2rem; } .sections-preview h2 { font-size: 2rem; } .preview-grid { grid-template-columns: 1fr; } .section-title { font-size: 2rem; } .cards-grid { grid-template-columns: 1fr; } } /* Enhanced section styles from EnhancedSectionEditor */ /* Animation keyframes */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideInDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { transform: translateY(0); } 40%, 43% { transform: translateY(-20px); } 70% { transform: translateY(-10px); } 90% { transform: translateY(-4px); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Chart Components */ .chart-component { animation: fadeInUp 0.6s ease-out; } .chart-component canvas { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .chart-component div[id^="chart-"] { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Общие стили для счетчиков */ .animated-counter { text-align: center !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } .counter-description { word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; text-align: center !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Мобильные стили для счетчиков */ @media (max-width: 768px) { .animated-counter { text-align: center !important; max-width: 100% !important; overflow: hidden !important; width: 100% !important; margin: 0 auto !important; padding: 1rem !important; box-sizing: border-box !important; } .counter-container { width: 100% !important; max-width: 100% !important; overflow: hidden !important; text-align: center !important; margin: 0 auto !important; } .counter-number-wrapper { width: 100% !important; max-width: 100% !important; justify-content: center !important; flex-wrap: wrap !important; text-align: center !important; } .counter { display: inline-block !important; text-align: center !important; width: auto !important; max-width: 100% !important; } .counter-suffix { display: inline-block !important; text-align: center !important; max-width: 100% !important; } .counter-description { text-align: center !important; width: 100% !important; max-width: 100% !important; margin: 0.5rem auto !important; display: block !important; word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; line-height: 1.4 !important; padding: 0 5px !important; box-sizing: border-box !important; } .content-element.animated-counter { text-align: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } }