/* ============================================================ HOME PAGE — shared styles ============================================================ */ /* ------------------------------------------------------------ Hero Section ------------------------------------------------------------ */ .hero-home { position: relative; width: 100%; height: 560px; background-color: #1b254b; overflow: hidden; display: flex; align-items: center; } .hero-home__overlay { position: absolute; inset: 0; opacity: 0.2; } .hero-home__bg-img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: overlay; } .hero-home__gradient { position: absolute; inset: 0; background: linear-gradient(to right, #1b254b, rgba(27, 37, 75, 0.9), transparent); } .hero-home__container { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; width: 100%; } @media (min-width: 1024px) { .hero-home__container { padding: 0 2rem; } } .hero-home__content { max-width: 42rem; display: flex; flex-direction: column; gap: 1.5rem; } /* Badge */ .hero-home__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); width: fit-content; } .hero-home__badge-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #60a5fa; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .hero-home__badge-text { font-size: 0.75rem; font-weight: 600; color: #bfdbfe; text-transform: uppercase; letter-spacing: 0.05em; } /* Title */ .hero-home__title { font-size: 3rem; font-weight: 700; color: #ffffff; line-height: 1.2; letter-spacing: -0.02em; margin: 0; } @media (min-width: 1024px) { .hero-home__title { font-size: 3.75rem; } } /* Description */ .hero-home__desc { font-size: 1.125rem; color: #bfdbfe; line-height: 1.7; max-width: 36rem; margin: 0; } /* Actions */ .hero-home__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1rem; } /* Buttons */ .hero-home__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s ease-in-out; border: none; } .hero-home__btn--primary { background: #ffffff; color: #1b254b; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); } .hero-home__btn--primary:hover { background: #f9fafb; } .hero-home__btn--secondary { background: rgba(255, 255, 255, 0.1); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); } .hero-home__btn--secondary:hover { background: rgba(255, 255, 255, 0.2); } /* ------------------------------------------------------------ Research Impact Section ------------------------------------------------------------ */ .research-impact { padding: 80px 0; background-color: #f8fbff; } .research-impact__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; } .research-impact__title { font-size: 1.6rem; font-weight: 700; color: #1b254b; margin: 0; } .research-impact__year { font-size: 0.85rem; font-weight: 500; color: #6b7280; background: #e5e7eb; padding: 4px 12px; border-radius: 999px; } .research-impact__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 2rem; } @media (max-width: 991px) { .research-impact__stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .research-impact__stats { grid-template-columns: 1fr; } } .research-impact__stat-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .research-impact__stat-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin-bottom: 0.5rem; } .research-impact__stat-value-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; } .research-impact__stat-value { font-size: 2rem; font-weight: 700; color: #1b254b; line-height: 1; } .research-impact__stat-trend { font-size: 0.78rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .research-impact__stat-trend--up { background: #d1fae5; color: #065f46; } .research-impact__stat-trend--down { background: #fee2e2; color: #991b1b; } .research-impact__stat-trend--stable { background: #e5e7eb; color: #374151; } .research-impact__stat-sub { font-size: 0.8rem; color: #9ca3af; margin: 0; } .research-impact__charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 767px) { .research-impact__charts { grid-template-columns: 1fr; } } .research-impact__chart-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.75rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .research-impact__chart-title { font-size: 1rem; font-weight: 600; color: #1b254b; margin-bottom: 0.25rem; } .research-impact__chart-sub { font-size: 0.8rem; color: #9ca3af; margin-bottom: 1.25rem; } .research-impact__bar-chart { display: flex; align-items: flex-end; gap: 1.5rem; height: 160px; padding-top: 1rem; } .research-impact__bar-group { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex: 1; } .research-impact__bar { width: 100%; border-radius: 6px 6px 0 0; min-height: 8px; transition: height 0.4s ease; } .research-impact__bar--journals { background: #1b254b; } .research-impact__bar--conferences { background: #74c0fc; } .research-impact__bar-label { font-size: 0.78rem; color: #6b7280; font-weight: 500; } .research-impact__donut-wrapper { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .research-impact__donut { width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; -webkit-mask: radial-gradient(circle, transparent 40%, black 41%); mask: radial-gradient(circle, transparent 40%, black 41%); } .research-impact__legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .research-impact__legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; } .research-impact__legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .research-impact__legend-label { color: #374151; flex: 1; } .research-impact__legend-value { font-weight: 600; color: #1b254b; } /* ------------------------------------------------------------ Quick Links Grid ------------------------------------------------------------ */ .quick-links { padding: 80px 0; background: #ffffff; } .quick-links__header { margin-bottom: 3rem; } .quick-links__title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: #1b254b; margin-bottom: 0.75rem; } .quick-links__subtitle { color: #6b7280; max-width: 40rem; margin: 0 auto; } .quick-links__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } @media (max-width: 991px) { .quick-links__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .quick-links__grid { grid-template-columns: 1fr; } } .quick-links__card { display: flex; flex-direction: column; background: #f8fbff; padding: 2rem; border-radius: 1.5rem; border: 1px solid transparent; text-decoration: none; transition: box-shadow 0.2s ease, border-color 0.2s ease; cursor: pointer; } .quick-links__card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); border-color: #e5e7eb; } .quick-links__icon-wrap { width: 3.5rem; height: 3.5rem; background: #ffffff; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #1b254b; margin-bottom: 1.5rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease; } .quick-links__card:hover .quick-links__icon-wrap { transform: scale(1.1); } .quick-links__card-title { font-size: 1.125rem; font-weight: 700; color: #1b254b; margin-bottom: 0.75rem; } .quick-links__card-desc { font-size: 0.875rem; color: #6b7280; line-height: 1.6; flex: 1; margin-bottom: 1.5rem; } .quick-links__card-footer { display: flex; justify-content: space-between; align-items: center; } .quick-links__cta { font-size: 0.875rem; font-weight: 500; color: #1b254b; } .quick-links__arrow { width: 2rem; height: 2rem; border-radius: 50%; background: #1b254b; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; opacity: 0; transition: opacity 0.2s ease; } .quick-links__card:hover .quick-links__arrow { opacity: 1; }