.page-blog { color: #333333; } .page-blog__hero-section { background-color: #08162B; background-image: linear-gradient(135deg, #08162B 0%, #10233F 100%); padding: 12px 0 20px; } .page-blog__hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; } .page-blog__hero-image-container { width: 100%; max-width: 1200px; margin: 0 auto; } .page-blog__hero-image { width: 100%; max-width: 1200px; height: auto; aspect-ratio: 17/6; object-fit: cover; border-radius: 16px; display: block; } .page-blog__hero-content { margin-top: 20px; text-align: center; padding: 0 12px; } .page-blog__hero-title { font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; color: #F3F8FF; margin: 0 0 10px; } .page-blog__hero-subtitle { color: #AFC4E8; line-height: 1.6; max-width: 860px; margin: 0 auto; font-size: 1.05rem; } .page-blog__featured-news { padding: 40px 16px 10px; max-width: 1240px; margin: 0 auto; } .page-blog__featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .page-blog__featured-card { background-color: #10233F; border-radius: 20px; border: 1px solid #244D84; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; } .page-blog__featured-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(79, 168, 255, 0.25); } .page-blog__featured-link { display: flex; flex-direction: column; text-decoration: none; width: 100%; } .page-blog__featured-card--main .page-blog__featured-link { display: grid; grid-template-columns: 1.2fr 1fr; } .page-blog__featured-image-wrapper { width: 100%; overflow: hidden; } .page-blog__featured-image { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2/1; display: block; } .page-blog__featured-card--main .page-blog__featured-image { aspect-ratio: auto; height: 100%; } .page-blog__featured-content { padding: 18px; display: flex; flex-direction: column; flex: 1; } .page-blog__badge { font-size: 0.8rem; text-transform: uppercase; font-weight: 700; color: #F2C14E; letter-spacing: 0.5px; margin-bottom: 12px; align-self: flex-start; background-color: rgba(242, 193, 78, 0.15); padding: 4px 10px; border-radius: 30px; } .page-blog__featured-title { color: #F3F8FF; margin: 0 0 8px; font-weight: 600; line-height: 1.35; } .page-blog__featured-excerpt { color: #AFC4E8; font-size: 0.95rem; line-height: 1.5; margin: 0; } .page-blog__promo-section { padding: 30px 16px; max-width: 1240px; margin: 0 auto; } .page-blog__promo-card { background: linear-gradient(180deg, #113B7A 0%, #10233F 100%); border: 1px solid #244D84; border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.5fr; align-items: center; gap: 0; } .page-blog__promo-image { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; } .page-blog__promo-content { padding: 28px 24px; } .page-blog__promo-title { color: #F3F8FF; font-size: 1.4rem; line-height: 1.3; margin: 0 0 10px; font-weight: 600; } .page-blog__promo-text { color: #AFC4E8; font-size: 0.98rem; line-height: 1.55; margin-bottom: 20px; } .page-blog__promo-cta { display: inline-block; padding: 14px 28px; border-radius: 50px; text-decoration: none; font-weight: 700; background: linear-gradient(180deg, #2B73F6 0%, #1144A6 100%); color: #F3F8FF; font-size: 0.95rem; transition: opacity 0.3s; } .page-blog__promo-cta:hover { opacity: 0.9; } .page-blog__posts-section { padding: 20px 16px 40px; background-color: #08162B; } .page-blog__section-header { max-width: 1240px; margin: 0 auto; text-align: center; padding: 24px 0 20px; } .page-blog__section-title { color: #F3F8FF; margin: 0 0 8px; font-weight: 600; } .page-blog__section-subtitle { color: #AFC4E8; font-size: 1rem; margin: 0 auto; max-width: 500px; } .page-blog__posts-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .page-blog__post-card { background-color: #10233F; border-radius: 16px; border: 1px solid #244D84; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; display: flex; } .page-blog__post-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(79, 168, 255, 0.22); } .page-blog__post-link { display: flex; flex-direction: column; text-decoration: none; width: 100%; } .page-blog__post-image { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; } .page-blog__post-body { padding: 18px 16px; display: flex; flex-direction: column; flex: 1; } .page-blog__post-date { font-size: 0.78rem; color: #F2C14E; margin-bottom: 8px; } .page-blog__post-title { color: #F3F8FF; font-size: 1.1rem; line-height: 1.35; margin: 0 0 8px; font-weight: 600; } .page-blog__post-excerpt { color: #AFC4E8; font-size: 0.9rem; line-height: 1.5; margin: 0; } .page-blog__cta-section { padding: 36px 16px; max-width: 1240px; margin: 0 auto; } .page-blog__cta-card { background: linear-gradient(135deg, #2B73F6 0%, #1144A6 100%); border-radius: 20px; padding: 32px 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; border: 1px solid #4FA8FF; box-shadow: 0 0 30px rgba(79, 168, 255, 0.2); } .page-blog__cta-card > h2 { flex: 1 0 100%; } .page-blog__cta-title { color: #F3F8FF; margin: 0; font-weight: 700; } .page-blog__cta-text { color: #AFC4E8; flex: 2 1 350px; margin: 0; line-height: 1.6; } .page-blog__cta-button { flex: 0 1 auto; display: inline-block; padding: 12px 25px; background: linear-gradient(180deg, #2B73F6 0%, #1144A6 100%); color: #F3F8FF !important; border: 1px solid #4FA8FF; border-radius: 50px; font-weight: 600; text-decoration: none; margin-left: auto; transition: opacity 0.3s; } .page-blog__cta-button:hover { opacity: 0.85; } .page-blog__faq-section { background-color: #10233F; padding: 40px 16px; } .page-blog__faq-inner { max-width: 800px; margin: 0 auto; } .page-blog__faq-title { color: #F3F8FF; font-weight: 600; text-align: center; margin: 0 0 8px; } .page-blog__faq-subtitle { color: #AFC4E8; text-align: center; margin: 0 0 20px; font-size: 0.98rem; } .page-blog__faq-item { border: 1px solid #244D84; background-color: #08162B; border-radius: 12px; margin-bottom: 12px; overflow: hidden; color: #AFC4E8; } .page-blog__faq-question { color: #F3F8FF; cursor: pointer; padding: 14px 18px; font-weight: 600; list-style-position: inside; } .page-blog__faq-answer { padding: 0 18px 16px; } .page-blog__promo-footer { padding: 30px 16px; max-width: 1240px; margin: 0 auto; } .page-blog__promo-footer-card { background: linear-gradient(135deg, #113B7A, #10233F); border: 1px solid #4FA8FF; border-radius: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px; box-shadow: 0 8px 32px rgba(79, 168, 255, 0.15); } .page-blog__promo-footer-title { color: #F3F8FF; font-weight: 600; margin: 0 0 8px; } .page-blog__promo-footer-subtitle { color: #AFC4E8; font-size: 0.92rem; margin: 0; } .page-blog__promo-footer-button { display: inline-block; padding: 12px 22px; background: linear-gradient(180deg, #2B73F6 0%, #1144A6 100%); color: #F3F8FF !important; border: 1px solid #4FA8FF; border-radius: 50px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: opacity 0.3s; } .page-blog__promo-footer-button:hover { opacity: 0.85; } @media (max-width: 1024px) { .page-blog__featured-grid { grid-template-columns: repeat(2, 1fr); } .page-blog__posts-grid { grid-template-columns: repeat(2, 1fr); } .page-blog__promo-card { grid-template-columns: 1fr 1.2fr; } .page-blog__featured-card--main .page-blog__featured-link { grid-template-columns: 1fr; } .page-blog__featured-card--main { grid-column: span 2; } .page-blog__featured-card--main .page-blog__featured-image { aspect-ratio: 2/1; } } @media (max-width: 768px) { .page-blog { overflow-x: hidden; } .page-blog__hero-section { padding-top: 8px; } .page-blog__hero-inner { padding: 0 12px; } .page-blog__hero-image { aspect-ratio: 16/9; border-radius: 12px; } .page-blog__hero-content { padding: 0; } .page-blog__featured-grid, .page-blog__posts-grid { grid-template-columns: 1fr; gap: 18px; padding-left: 12px; padding-right: 12px; } .page-blog__featured-grid { padding-left: 0; padding-right: 0; } .page-blog__featured-card--main { grid-column: auto; } .page-blog__featured-card--main .page-blog__featured-link { display: flex; flex-direction: column; } .page-blog__featured-card--main .page-blog__featured-image { aspect-ratio: 16/9; height: auto; } .page-blog__promo-card { grid-template-columns: 1fr; } .page-blog__promo-image { aspect-ratio: 16/9; } .page-blog__post-card { margin-left: 0; margin-right: 0; } .page-blog__image img, .page-blog img { max-width: 100%; height: auto; } .page-blog__cta-card, .page-blog__promo-footer-card { flex-direction: column; align-items: flex-start; padding: 24px 20px; text-align: center; } .page-blog__cta-text, .page-blog__promo-footer-text { text-align: center; } .page-blog__cta-button, .page-blog__promo-footer-button { width: 100%; max-width: 100%; box-sizing: border-box; text-align: center; margin-left: 0; white-space: normal; word-wrap: break-word; } .page-blog__section-header, .page-blog__posts-section { padding-left: 12px; padding-right: 12px; } }