/* ============================================================ Purme Foundation — Redesigned Home Page Styles Scoped under .home-new on Design: 1920px canvas, 1370px content area Font: Pretendard ============================================================ */ /* ---------- Reset & Base ---------- */ .home-new { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #222; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } .home-new *, .home-new *::before, .home-new *::after { box-sizing: border-box; } /* ---------- Utility: Container ---------- */ .container-new { max-width: 1370px; margin: 0 auto; padding: 0 40px; } /* GNB styles moved to gnb-footer.css (canonical) */ /* ============================================================ 2. Hero Section — Full-width banner slider with rounded card ============================================================ */ /* Home page: reduce top padding so hero is closer to GNB */ .home-new .site-content { margin-top: -70px; } .hero-section { position: relative; padding: 0 40px; max-width: 1920px; margin: -5px auto 0; } /* Rounded card wrapper */ .hero-section__wrapper { position: relative; width: 100%; padding-bottom: 42.4%; /* aspect ~1840:780 */ border-radius: 20px; overflow: hidden; background: #383E5E; border: 1px solid #e0e0e0; } /* Slides container */ .hero-section__slides { position: absolute; inset: 0; } .hero-section__slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.8s ease; cursor: pointer; } .hero-section__slide.is-active { opacity: 1; z-index: 1; } /* Slide text overlay */ .hero-section__text { position: absolute; bottom: 0; left: 0; right: 0; top: 0; display: flex; flex-direction: column; justify-content: center; padding: 60px 120px 60px 220px; color: #fff; z-index: 2; } .hero-section__top-title { font-size: 16px; font-weight: 500; opacity: 0.85; margin-bottom: 12px; letter-spacing: 0.02em; } .hero-section__title { font-size: 60px; font-weight: 800; line-height: 1.2; margin: 0 0 16px; color: #fff; overflow: hidden; white-space: normal; word-break: keep-all; } .hero-section__subtitle { font-size: 22px; font-weight: 400; line-height: 1.6; margin: 0 0 28px; opacity: 0.9; overflow: hidden; white-space: normal; word-break: keep-all; } .hero-section__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); border-radius: 30px; font-size: 15px; font-weight: 600; color: #fff; backdrop-filter: blur(4px); width: fit-content; transition: background 0.3s ease; } .hero-section__slide:hover .hero-section__btn { background: rgba(255,255,255,0.35); } /* Slide arrows: 좌우 중앙 */ .hero-section__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.6); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: #fff; z-index: 10; transition: background 0.2s, border-color 0.2s; backdrop-filter: blur(2px); } .hero-section__arrow:hover { background: rgba(0,0,0,0.6); border-color: #fff; } .hero-section__arrow svg { width: 34px; height: 34px; stroke-width: 2.4; } .hero-section__arrow--prev { left: 40px; } .hero-section__arrow--next { right: 40px; } /* ============================================================ 3. Campaign / News Section (.campaign-news-section) ============================================================ */ .campaign-news-section { padding: 60px 0; } /* Two-column grid: campaign(476) + news(834) */ .campaign-news-section__grid { display: flex; gap: 30px; } .campaign-news-section__col--campaign { flex: 0 0 calc(476 / 1310 * 100%); } .campaign-news-section__col--news { flex: 1; } .campaign-news-section__col-header { display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 12px; } .campaign-news-section__col-title { font-size: 28px; font-weight: 700; color: #0071BC; margin: 0; } .campaign-news-section__more { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 50%; border: none; background: none; cursor: pointer; text-decoration: none; margin-left: auto; transition: opacity 0.2s; } .campaign-news-section__more:hover { opacity: 0.7; } /* Cards */ .campaign-news-section__card { display: block; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.3s ease; } .campaign-news-section__card .campaign-news-section__card-image { transition: transform 0.5s ease, filter 0.3s ease; } .campaign-news-section__card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); } .campaign-news-section__card:hover .campaign-news-section__card-image { transform: scale(1.03); filter: brightness(1.04); } /* Slider: stack cards, show only .is-active */ .campaign-news-section__slider { position: relative; } .campaign-news-section__slider .campaign-news-section__card { display: none; } .campaign-news-section__slider .campaign-news-section__card.is-active { display: block; } .campaign-news-section__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.6); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 5; transition: background 0.2s, border-color 0.2s; } .campaign-news-section__nav:hover { background: rgba(0,0,0,0.65); border-color: #fff; } .campaign-news-section__nav--prev { left: 14px; } .campaign-news-section__nav--next { right: 14px; } /* Campaign card: 476x350 */ .campaign-news-section__card--campaign .campaign-news-section__card-image { width: 100%; aspect-ratio: 476 / 363; background-size: cover; background-position: center; } /* News card: 834x380, with overlay text */ .campaign-news-section__card--news .campaign-news-section__card-image { width: 100%; aspect-ratio: 834 / 380; background-size: cover; background-position: center; position: relative; } .campaign-news-section__card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 28px; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%); } .campaign-news-section__card-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 6px; line-height: 1.4; } .campaign-news-section__card-date { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.8); } /* ============================================================ 4. Stats Section (.stats-section) ============================================================ */ .stats-section { position: relative; overflow: hidden; } .stats-section__bg { background: linear-gradient(to bottom, #DFF0FC 0%, #DFF0FC 65%, transparent 65%); padding-bottom: 100px; } .stats-section .container { position: relative; } .stats-section__top { display: flex; align-items: flex-start; padding: 30px 0 0; position: relative; } @media (min-width: 551px) { .stats-section__top { padding: 235px 0 0; } } .stats-section__desc-area { flex: 1; padding-top: 20px; } .stats-section__desc { font-size: 34px; font-weight: 500; color: #000; line-height: 1.55; margin: 0; } @media (min-width: 551px) { .stats-section__desc { margin-top: -100px; margin-bottom: 80px; } } .stats-section__illust { position: absolute; right: -60px; bottom: -130px; width: 560px; z-index: 1; pointer-events: none; } .stats-section__illust img { width: 100%; height: auto; display: block; } /* Band: 둥근 박스, 본문 영역(container) 안, 이미지 위에 겹침 */ .stats-section__band { position: relative; z-index: 2; background: linear-gradient(135deg, #70C9E5 0%, #5BB8D8 100%); padding: 50px 40px 50px; border-radius: 20px; margin-top: -10px; margin-bottom: 30px; border: 1px solid #FFEDC8; } .stats-section__title { font-size: 30px; font-weight: 700; color: #fff; text-align: center; margin: 0 0 30px; } .stats-section__title-accent { color: #096396; } .stats-section__cards { display: flex; justify-content: center; gap: 20px; position: relative; z-index: 2; } .stats-section__card { flex: 1; background: #fff; border-radius: 16px; padding: 24px 24px 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.2s; } .stats-section__card:hover { transform: translateY(-4px); } .stats-section__badge { display: inline-block; background: #fff; color: #086395; font-size: 14px; font-weight: 600; padding: 1px 14px; border-radius: 20px; border: 1.5px solid #72C7E1; margin-bottom: 11px; } .stats-section__number { margin: 0 0 12px; line-height: 1.2; display: flex; align-items: baseline; justify-content: center; gap: 6px; } .stats-section__number strong { font-size: 43px; font-weight: 700; color: #0071BC; } .stats-section__number span { font-size: 18px; font-weight: 600; color: #0071BC; } .stats-section__card-desc { font-size: 17px; font-weight: 500; color: #2F778D; line-height: 1.5; margin: 0 0 16px; flex: 1; } .stats-section__card-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #0071BC; color: #fff; font-size: 15px; font-weight: 600; border: none; border-radius: 69px; padding: 10px 24px; cursor: pointer; text-decoration: none; transition: background 0.2s; } /* Card background SVGs — right center, small */ .stats-section__card:nth-child(1) { background-image: url(../images/main/card-bg-1.svg); background-repeat: no-repeat; background-position: right center; background-size: auto 60%; } .stats-section__card:nth-child(2) { background-image: url(../images/main/card-bg-2.svg); background-repeat: no-repeat; background-position: right center; background-size: auto 60%; } .stats-section__card:nth-child(3) { background-image: url(../images/main/card-bg-3.svg); background-repeat: no-repeat; background-position: right center; background-size: auto 60%; } .stats-section__card-link:hover { background: #005a96; color: #fff; } /* Decorative illustration (legacy, kept for backward compat) */ .stats-section__illustration { position: absolute; bottom: 0; left: 40px; z-index: 1; max-width: 260px; pointer-events: none; opacity: 0.9; } /* ============================================================ 5. Campaign Grid (.campaign-grid) ============================================================ */ .campaign-grid { padding: 0 0 80px; } .campaign-grid__header { margin-bottom: 40px; text-align: center; } .campaign-grid__title { font-size: 44px; font-weight: 600; color: #222; margin: 0 0 8px; } .campaign-grid__subtitle { font-size: 22px; font-weight: 500; color: #555; margin: 0; } .campaign-grid__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; /* allow hover scale to overflow into neighbor area */ overflow: visible; } .campaign-grid__item { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; transform-origin: center center; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; } .campaign-grid__item-image { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; } .campaign-grid__item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 40%, transparent 60%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 20px 20px 24px; z-index: 1; } .campaign-grid__item-badge { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); display: inline-block; background: #277DD6; color: #fff; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 37px; } .campaign-grid__item-title { margin-top: auto; font-size: 30px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } /* ============================================================ 6. Notice Section (.notice-section) ============================================================ */ .notice-section { background: #F8F8F8; padding: 80px 0; } .notice-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; } .notice-section__right { display: flex; flex-direction: column; gap: 20px; grid-row: span 2; align-self: stretch; } .notice-section__right .notice-section__card { flex: 1; } .notice-section__card { background: #fff; border-radius: 16px; padding: 20px 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .notice-section__card--large { grid-row: span 2; padding-bottom: 10px !important; background: linear-gradient(135deg, #eef6ff 0%, #f0f7ff 100%); border: 1px solid #277DD6; box-shadow: 0 4px 20px rgba(39, 125, 214, 0.10); } .notice-section__card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .notice-section__card--large .notice-section__card-header { padding-bottom: 16px; border-bottom: 2px solid #277DD6; } .notice-section__card-title { font-size: 26px; font-weight: 600; color: #0071BC; margin: 0; } .notice-section__card-more { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #ddd; background: none; color: #999; font-size: 18px; cursor: pointer; text-decoration: none; transition: border-color 0.2s, color 0.2s; } .notice-section__card-more:hover { border-color: #0071BC; color: #0071BC; } .notice-section__list { list-style: none; margin: 0; padding: 0; } .notice-section__list li { padding: 10px 0; border-bottom: 1px solid #f0f0f0; } .notice-section__card--large .notice-section__list li { padding: 13px 0; } .notice-section__list li:last-child { border-bottom: none; } .notice-section__list li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-decoration: none; } .notice-section__item-title { font-size: 16px; font-weight: 600; color: #222; line-height: 1.4; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; } .notice-section__list li a:hover .notice-section__item-title { color: #0071BC; } .notice-section__item-date { font-size: 13px; font-weight: 500; color: #9D9D9D; flex-shrink: 0; white-space: nowrap; } /* ============================================================ 7. Newsletter Bar (.newsletter-bar) ============================================================ */ .newsletter-bar { background: #0071BC; padding: 0; } .newsletter-bar__inner { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; gap: 30px; } /* Left: icon + title + desc stacked */ .newsletter-bar__info { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .newsletter-bar__icon { width: 28px; height: 28px; flex-shrink: 0; } .newsletter-bar__title { font-size: 26px; font-weight: 700; color: #fff; line-height: 1; margin: 0; } .newsletter-bar__desc-row { flex-shrink: 0; } .newsletter-bar__desc { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.85); margin: 8px 0 0; } /* Right: form */ .newsletter-bar__form { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } .newsletter-bar__inputs { display: flex; align-items: center; gap: 10px; } .newsletter-bar__field { flex-shrink: 0; } .newsletter-bar__field--email .newsletter-bar__input { width: 240px; } .newsletter-bar__input--name { width: 120px; } .newsletter-bar__input { height: 48px; padding: 0 16px; border: none; border-radius: 6px; font-size: 15px; font-family: 'Pretendard', sans-serif; font-weight: 500; background: rgba(255, 255, 255, 0.95); color: #222; outline: none; width: 160px; transition: box-shadow 0.2s; } .newsletter-bar__input::placeholder { color: #aaa; } .newsletter-bar__input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); } .newsletter-bar__submit { height: 48px; padding: 0 28px; background: #23AFE2; color: #fff; font-size: 16px; font-weight: 600; font-family: 'Pretendard', sans-serif; border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background 0.2s; display: inline-flex; align-items: center; gap: 6px; } .newsletter-bar__submit img { width: 22px; height: 22px; } .newsletter-bar__left { flex-shrink: 0; } .newsletter-bar__submit:hover { background: #1b9acc; } .newsletter-bar__agree { display: flex; align-items: center; gap: 6px; margin-left: 8px; } .newsletter-bar__agree input[type="checkbox"] { width: 16px; height: 16px; accent-color: #fff; cursor: pointer; } .newsletter-bar__agree span, .newsletter-bar__agree label { font-size: 13px; font-weight: 500; color: #fff; cursor: pointer; white-space: nowrap; } /* ============================================================ 8. Responsive Breakpoints ============================================================ */ /* Large desktop — keep full layout */ @media (max-width: 1440px) { .hero-section__title { font-size: 64px; } .stats-section__card { width: auto; flex: 1; min-width: 0; } .campaign-grid__item-title { font-size: 24px; } } /* Tablet landscape */ @media (max-width: 1200px) { .hero-section__inner { padding: 48px 0 80px; min-height: 560px; } .hero-section__content { flex-direction: column; text-align: center; gap: 40px; } .hero-section__text { max-width: 100%; } .hero-section__images { flex: 0 0 auto; width: 100%; max-width: 500px; margin: 0 auto; } .hero-section__title { font-size: 52px; } .stats-section__top { flex-direction: column; text-align: center; gap: 30px; padding: 60px 0 40px; } .stats-section__illust { max-width: 350px; } .stats-section__cards { flex-direction: column; align-items: center; } .stats-section__card { width: 100%; max-width: 500px; } .campaign-grid__items { grid-template-columns: repeat(2, 1fr); } .notice-section__grid { grid-template-columns: 1fr; } .notice-section__card--large { grid-row: auto; } .newsletter-bar__inner { flex-direction: column; height: auto; padding-top: 32px; padding-bottom: 32px; text-align: center; } .newsletter-bar__info { justify-content: center; } .newsletter-bar__form { flex-wrap: wrap; justify-content: center; } } /* Tablet portrait */ @media (max-width: 991px) { .container-new { padding: 0 24px; } .hero-section__inner { padding: 40px 0 70px; min-height: auto; } .hero-section__title { font-size: 42px; } .hero-section__subtitle { font-size: 20px; } .hero-section__desc { font-size: 17px; } .stats-section__title { font-size: 28px; } .stats-section__desc { font-size: 28px; } .campaign-grid__title { font-size: 34px; } .campaign-grid__subtitle { font-size: 18px; } .newsletter-bar__title { font-size: 26px; } } /* Mobile */ @media (max-width: 767px) { .container-new { padding: 0 16px; } .hero-section__inner { padding: 32px 0 60px; min-height: auto; } .hero-section__content { gap: 24px; } .hero-section__title { font-size: 32px; } .hero-section__subtitle { font-size: 17px; } .hero-section__desc { font-size: 15px; } .hero-section__cta { font-size: 16px; padding: 14px 28px; } .hero-section__images { flex: 0 0 auto; width: 100%; max-width: 100%; } .hero-section__images img { max-width: 100%; } .campaign-news-section { padding: 48px 0 40px; } .campaign-news-section__header { gap: 16px; margin-bottom: 24px; } .campaign-news-section__tab { font-size: 26px; } .stats-section { padding: 48px 0 60px; } .stats-section__title { font-size: 22px; } .stats-section__desc { font-size: 22px; } .stats-section__top { padding: 48px 0 30px; } .stats-section__band { padding: 30px 0 48px; } .stats-section__illust { display: none; } .stats-section__card { padding: 28px 24px; } .stats-section__number strong { font-size: 34px; } .stats-section__illustration { display: none; } .campaign-news-section__content { grid-template-columns: 1fr; } .campaign-grid { padding: 48px 0; } .campaign-grid__title { font-size: 28px; } .campaign-grid__subtitle { font-size: 16px; } .campaign-grid__items { grid-template-columns: 1fr; gap: 16px; } .campaign-grid__item { aspect-ratio: 4 / 3; } .campaign-grid__item-title { font-size: 22px; } .notice-section { padding: 48px 0; } .notice-section__card { padding: 24px; } .notice-section__card-title { font-size: 22px; } .notice-section__item-title { font-size: 16px; } .newsletter-bar__inner { padding: 28px 16px; gap: 24px; } .newsletter-bar__info { flex-direction: column; gap: 8px; } .newsletter-bar__title { font-size: 22px; } .newsletter-bar__desc { font-size: 15px; } .newsletter-bar__input { width: 100%; min-width: 0; } .newsletter-bar__form { width: 100%; } .newsletter-bar__agree { margin-left: 0; margin-top: 4px; justify-content: center; } } /* ============================================================ Mobile — matches site breakpoint (max-width: 550px) Mobile loads its own header via #masthead_mobile; .gnb-new hidden ============================================================ */ @media (max-width: 550px) { /* --- Container --- */ .container-new { padding: 0 16px; } /* --- Site content offset: mobile header space --- */ .home-new .site-content { margin-top: 10px; } /* --- Hero Section --- */ .hero-section { padding: 0 16px; margin-top: 60px; } .hero-section__wrapper { border-radius: 12px; padding-bottom: 120%; /* portrait ratio for mobile */ } .hero-section__text { padding: 40px 28px 70px; justify-content: flex-start; } .hero-section__text.is-mobile-hidden { display: none; } .hero-section__top-title { font-size: 13px; margin-bottom: 8px; } .hero-section__title { font-size: 28px; margin-bottom: 10px; } .hero-section__subtitle { font-size: 14px; margin-bottom: 20px; } .hero-section__btn { font-size: 13px; padding: 10px 22px; } .hero-section__arrow { width: 44px; height: 44px; } .hero-section__arrow svg { width: 20px; height: 20px; } .hero-section__arrow--prev { left: 12px; } .hero-section__arrow--next { right: 12px; } /* --- Campaign / News Section --- */ .campaign-news-section { padding: 36px 0 32px; } .campaign-news-section__grid { flex-direction: column; gap: 24px; } .campaign-news-section__col--campaign { flex: none; width: 100%; } .campaign-news-section__col--news { flex: none; width: 100%; } .campaign-news-section__card--campaign .campaign-news-section__card-image, .campaign-news-section__card--news .campaign-news-section__card-image { aspect-ratio: 4 / 3; } .campaign-news-section__col-title { font-size: 22px; } .campaign-news-section__card-title { font-size: 18px; } .campaign-news-section__card-overlay { padding: 16px 20px; } /* --- Stats Section --- */ .stats-section__bg { padding-bottom: 16px; } .stats-section__top { padding: 35px 0 35px !important; flex-direction: column; justify-content: center; } .stats-section__desc-area { padding-top: 0 !important; padding-bottom: 0 !important; text-align: center; width: 100%; flex: 0 0 auto; } .stats-section__top { align-items: center !important; } .stats-section__desc { font-size: 20px; margin: 0 !important; line-height: 1.6; text-align: center; } .stats-section__illust { display: none; } .stats-section__band { border-radius: 0; margin-left: -16px; margin-right: -16px; padding: 24px 16px 32px; } .stats-section__title { font-size: 20px; margin-bottom: 20px; } .stats-section__cards { flex-direction: column; gap: 12px; } .stats-section__card { width: 100%; max-width: none; padding: 20px 16px; } .stats-section__number strong { font-size: 30px; } .stats-section__card-desc { font-size: 15px; } .stats-section__card-link { font-size: 14px; padding: 8px 20px; } .stats-section__illustration { display: none; } /* --- Campaign Grid --- */ .campaign-grid { padding: 10px 0 36px; } .campaign-grid__header { margin-bottom: 24px; } .campaign-grid__title { font-size: 24px; } .campaign-grid__subtitle { font-size: 14px; } .campaign-grid__items { grid-template-columns: 1fr; gap: 12px; } .campaign-grid__item { aspect-ratio: 16 / 10; } .campaign-grid__item-title { font-size: 20px; } .campaign-grid__item-badge { font-size: 11px; padding: 3px 10px; } /* --- Notice Section --- */ .notice-section { padding: 36px 0; } .notice-section .container { padding: 0 16px; overflow: hidden; } .notice-section__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .notice-section__card--large { grid-row: auto; padding-bottom: 16px !important; } .notice-section__card { padding: 16px; box-sizing: border-box; max-width: 100%; min-width: 0; overflow: hidden; } .notice-section__item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .notice-section__card-header { margin-bottom: 16px; } .notice-section__card-title { font-size: 20px; } .notice-section__item-title { font-size: 14px; } .notice-section__item-date { display: block; font-size: 12px; flex-shrink: 0; margin-left: 8px; } .notice-section__list li a { gap: 0; min-width: 0; } .notice-section__right { gap: 16px; } /* --- Newsletter Bar --- */ .newsletter-bar__inner { flex-direction: column; padding: 24px 16px; gap: 16px; text-align: center; } .newsletter-bar__info { flex-direction: column; gap: 6px; justify-content: center; } .newsletter-bar__title { font-size: 20px; } .newsletter-bar__desc { font-size: 13px; } .newsletter-bar__form { width: 100%; flex-direction: column; align-items: stretch; } .newsletter-bar__inputs { flex-direction: column; gap: 8px; } .newsletter-bar__field { width: 100%; } .newsletter-bar__input, .newsletter-bar__field--email .newsletter-bar__input, .newsletter-bar__input--name { width: 100% !important; } .newsletter-bar__submit { width: 100%; justify-content: center; } .newsletter-bar__agree { margin-left: 0; justify-content: center; } } /* Small mobile */ @media (max-width: 400px) { .hero-section__title { font-size: 26px; } .newsletter-bar__form { flex-direction: column; } .newsletter-bar__submit { width: 100%; } } /* ============================================================ SCROLL REVEAL ANIMATIONS - Uses [data-reveal] to avoid class conflicts - JS adds .revealed after first paint to trigger transitions ============================================================ */ /* --- Initial hidden states (CSS only — no JS class needed) --- */ [data-reveal="up"] { opacity: 0; transform: translateY(40px); transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), transform 1.4s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; } [data-reveal="left"] { opacity: 0; transform: translateX(-45px); transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), transform 1.4s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; } [data-reveal="right"] { opacity: 0; transform: translateX(45px); transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), transform 1.4s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; } [data-reveal="scale"] { opacity: 0; transform: scale(0.9); transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), transform 1.4s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; } [data-reveal="zoom"] { opacity: 0; transform: scale(0.85) translateY(20px); transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), transform 1.4s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; } /* --- Revealed state --- */ [data-reveal].revealed { opacity: 1 !important; transform: none !important; } /* --- Stagger delays --- */ [data-delay="0"] { transition-delay: 0s; } [data-delay="1"] { transition-delay: 0.2s; } [data-delay="2"] { transition-delay: 0.4s; } [data-delay="3"] { transition-delay: 0.6s; } [data-delay="4"] { transition-delay: 0.8s; } [data-delay="5"] { transition-delay: 1.0s; } /* Clear delay after revealed so hover isn't delayed */ [data-delay].revealed { transition-delay: 0s !important; } /* --- Campaign grid: calm single-group reveal (no stagger) --- */ .campaign-grid__items[data-reveal] { transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.25, 1, 0.5, 1); } /* --- Campaign card hover: big scale that overflows into neighbors --- */ .campaign-grid__item:hover { transform: scale(1.18); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22); z-index: 5; } /* --- Notice list item hover: color change only --- */ .notice-section__list li a { transition: color 0.3s ease; } .notice-section__list li a:hover .notice-section__item-title { color: #0086e6; } /* --- Stats title accent --- */ .stats-section__title-accent { display: inline; } /* --- Stats card number color --- */ .stats-section__card .stats-section__number strong { color: #0086e6; } /* --- Newsletter bar inner stagger --- */ .newsletter-bar__left[data-reveal].reveal-ready { transform: translateX(-40px); opacity: 0; } .newsletter-bar__form[data-reveal].reveal-ready { transform: translateX(40px); opacity: 0; } /* --- Reduce motion for accessibility --- */ @media (prefers-reduced-motion: reduce) { [data-reveal].reveal-ready { transition: none !important; transform: none !important; opacity: 1 !important; } }