From f00283dfe1945710cd14c303bbacf19a3c0fce34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C4=90=E1=BB=97=20Minh=20Nh=E1=BA=ADt?= Date: Wed, 15 Apr 2026 02:32:40 +0700 Subject: [PATCH] refactor: merge code and update main.css, delete file css in component --- app/accreditation/accreditation.css | 53 - app/accreditation/page.tsx | 1 - app/components/about/about.css | 902 ---- .../{contactus => contact}/Accessibility.tsx | 0 .../{contactus => contact}/ContactHero.tsx | 0 .../{contactus => contact}/ContactSplit.tsx | 0 .../{contactus => contact}/DepartmentCard.tsx | 0 .../DepartmentCardBlue.tsx | 0 .../DepartmentCardEmpty.tsx | 0 .../DepartmentDirectory.tsx | 0 .../{contactus => contact}/InquiryForm.tsx | 0 .../{contactus => contact}/LocationMap.tsx | 0 .../{contactus => contact}/OfficeHours.tsx | 0 app/components/home/home.css | 514 --- app/components/publications/publications.css | 787 ---- app/components/research/research.css | 718 ---- app/contact/contact.json | 89 - app/contact/page.tsx | 242 +- app/contact/types.ts | 44 - app/contactus/contact.css | 159 - app/contactus/page.tsx | 14 - app/globals.css | 4 - app/layout.tsx | 4 +- public/assets/css/main.css | 3705 ++++++++++++++--- 24 files changed, 3170 insertions(+), 4066 deletions(-) delete mode 100644 app/accreditation/accreditation.css delete mode 100644 app/components/about/about.css rename app/components/{contactus => contact}/Accessibility.tsx (100%) rename app/components/{contactus => contact}/ContactHero.tsx (100%) rename app/components/{contactus => contact}/ContactSplit.tsx (100%) rename app/components/{contactus => contact}/DepartmentCard.tsx (100%) rename app/components/{contactus => contact}/DepartmentCardBlue.tsx (100%) rename app/components/{contactus => contact}/DepartmentCardEmpty.tsx (100%) rename app/components/{contactus => contact}/DepartmentDirectory.tsx (100%) rename app/components/{contactus => contact}/InquiryForm.tsx (100%) rename app/components/{contactus => contact}/LocationMap.tsx (100%) rename app/components/{contactus => contact}/OfficeHours.tsx (100%) delete mode 100644 app/components/home/home.css delete mode 100644 app/components/publications/publications.css delete mode 100644 app/components/research/research.css delete mode 100644 app/contact/contact.json delete mode 100644 app/contact/types.ts delete mode 100644 app/contactus/contact.css delete mode 100644 app/contactus/page.tsx diff --git a/app/accreditation/accreditation.css b/app/accreditation/accreditation.css deleted file mode 100644 index 08d8e17..0000000 --- a/app/accreditation/accreditation.css +++ /dev/null @@ -1,53 +0,0 @@ -/* ============================================ - Accreditation Page — Scoped Styles - Scope: .accreditation-page - ============================================ */ - -/* Typography — dùng div thay h1/h2/h3 */ -.accreditation-page .acc-heading { - font-size: clamp(2.5rem, 5vw, 3.75rem); - line-height: 1.15; -} - -.accreditation-page .acc-section-title { - font-size: 1.875rem; - line-height: 1.3; -} - -.accreditation-page .acc-card-title { - font-size: 1.25rem; - line-height: 1.4; -} - -/* ---------- Color tokens ---------- */ -.accreditation-page .text-brand-blue { color: #1b254b; } -.accreditation-page .bg-brand-blue { background-color: #1b254b; } -.accreditation-page .bg-brand-light { background-color: #f8fbff; } -.accreditation-page .bg-brand-accent { background-color: #3b82f6; } -.accreditation-page .text-brand-accent { color: #3b82f6; } -.accreditation-page .text-ui-text { color: #111827; } -.accreditation-page .text-ui-muted { color: #6b7280; } -.accreditation-page .bg-ui-bg { background-color: #f9fafb; } -.accreditation-page .border-ui-border { border-color: #e5e7eb; } - -/* ---------- Shadow tokens ---------- */ -.accreditation-page .shadow-soft { - box-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04); -} -.accreditation-page .shadow-hover, -.accreditation-page .hover\:shadow-hover:hover { - box-shadow: 0 8px 24px rgb(0 0 0 / 0.1); -} - -/* ---------- Border radius fix ---------- */ -.accreditation-page .rounded-\[24px\] { border-radius: 24px !important; } -.accreditation-page .rounded-lg { border-radius: 8px !important; } -.accreditation-page .rounded-md { border-radius: 6px !important; } - -/* Mesh background gradient */ -.accreditation-page .mesh-bg { - background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 40%, #ffffff 100%); -} - -/* rounded-xl fix */ -.accreditation-page .rounded-xl { border-radius: 12px !important; } diff --git a/app/accreditation/page.tsx b/app/accreditation/page.tsx index cfa0734..9e443c7 100644 --- a/app/accreditation/page.tsx +++ b/app/accreditation/page.tsx @@ -1,4 +1,3 @@ -import "./accreditation.css"; import AccreditationHero from "../components/accreditation/AccreditationHero"; import AccreditationGrid from "../components/accreditation/AccreditationGrid"; import QualityStandards from "../components/accreditation/QualityStandards"; diff --git a/app/components/about/about.css b/app/components/about/about.css deleted file mode 100644 index 7f3b447..0000000 --- a/app/components/about/about.css +++ /dev/null @@ -1,902 +0,0 @@ -/* ============================================================ - ABOUT PAGE - ============================================================ */ - -.about-hero { - padding: 80px 0; - background-color: #f8fbff; - position: relative; - overflow: hidden; -} - -.about-hero__content { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.about-hero__badge { - display: inline-flex; - align-items: center; - gap: 0.75rem; -} - -.about-hero__badge-line { - display: inline-block; - width: 2rem; - height: 2px; - background: #1b254b; -} - -.about-hero__badge-text { - font-size: 0.8rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1em; - color: #6b7280; -} - -.about-hero__title { - font-size: clamp(2rem, 4vw, 3.5rem); - font-weight: 700; - color: #1b254b; - line-height: 1.15; - margin: 0; -} - -.about-hero__title span { - color: var(--theme, #E13833); -} - -.about-hero__desc { - font-size: 1.05rem; - color: #6b7280; - line-height: 1.7; - max-width: 36rem; - margin: 0; -} - -.about-hero__actions { - padding-top: 0.5rem; -} - -.about-hero__btn { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.875rem 2rem; - background-color: #1b254b; - color: #ffffff; - font-weight: 600; - font-size: 1rem; - border-radius: 0.375rem; - border: none; - cursor: pointer; - box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); - transition: background-color 0.2s ease; -} - -.about-hero__btn:hover { - background-color: #151c3a; -} - -/* Image side */ -.about-hero__image-wrap { - position: relative; - border-radius: 1rem; - overflow: visible; -} - -.about-hero__image { - width: 100%; - height: auto; - border-radius: 1rem; - object-fit: cover; - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12); - display: block; -} - -/* Badge card overlay */ -.about-hero__badge-card { - position: absolute; - bottom: -1.5rem; - left: -1.5rem; - background: #ffffff; - padding: 1.25rem 1.5rem; - border-radius: 0.75rem; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); - border: 1px solid #e5e7eb; - display: flex; - align-items: center; - gap: 1rem; -} - -@media (max-width: 767px) { - .about-hero__badge-card { - display: none; - } -} - -.about-hero__badge-icon { - width: 3rem; - height: 3rem; - background: #f8fbff; - border-radius: 0.5rem; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.25rem; - color: #1b254b; - flex-shrink: 0; -} - -.about-hero__badge-value { - font-size: 1.5rem; - font-weight: 700; - color: #1b254b; - margin: 0; -} - -.about-hero__badge-label { - font-size: 0.8rem; - color: #6b7280; - margin: 0; -} - -@media (max-width: 991px) { - .about-hero { - padding: 80px 0 60px; - } - - .about-hero__image-wrap { - margin-top: 3rem; - } -} - -/* ------------------------------------------------------------ - Mission & Values - ------------------------------------------------------------ */ -.about-mission { - padding: 80px 0; - background-color: #f8f8f9; - border-top: 1px solid #e5e7eb; -} - -.about-mission__header { - max-width: 48rem; - margin: 0 auto 4rem; -} - -.about-mission__badge { - display: inline-flex; - align-items: center; - gap: 0.75rem; - margin-bottom: 1rem; -} - -.about-mission__badge-line { - display: inline-block; - width: 2rem; - height: 2px; - background: #E13833; -} - -.about-mission__badge-text { - font-size: 0.8rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1em; - color: #6b7280; -} - -.about-mission__title { - font-size: clamp(1.75rem, 3vw, 2.25rem); - font-weight: 700; - color: #1b254b; - margin-bottom: 1rem; -} - -.about-mission__subtitle { - font-size: 1.05rem; - color: #6b7280; - line-height: 1.7; - margin: 0; -} - -.about-mission__grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 2rem; -} - -@media (max-width: 991px) { - .about-mission__grid { - grid-template-columns: 1fr; - } -} - -.about-mission__card { - background: #ffffff; - padding: 2rem; - border-radius: 0.75rem; - border: 1px solid #e5e7eb; - box-shadow: 0 1px 4px rgba(0,0,0,0.04); - transition: box-shadow 0.2s ease; -} - -.about-mission__card:hover { - box-shadow: 0 8px 24px rgba(0,0,0,0.08); -} - -.about-mission__icon-wrap { - width: 3.5rem; - height: 3.5rem; - background: #f8fbff; - border-radius: 0.5rem; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.25rem; - color: #1b254b; - margin-bottom: 1.5rem; - border-top: 4px solid transparent; - transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; -} - -.about-mission__card:hover .about-mission__icon-wrap { - background-color: #1b254b; - color: #ffffff; - border-top-color: #E13833; -} - -.about-mission__card-title { - font-size: 1.125rem; - font-weight: 700; - color: #1b254b; - margin-bottom: 0.75rem; -} - -.about-mission__card-desc { - font-size: 0.95rem; - color: #6b7280; - line-height: 1.7; - margin: 0; -} - -/* ------------------------------------------------------------ - Why Paris - ------------------------------------------------------------ */ -.why-paris { - padding: 80px 0; - background: #ffffff; -} - -.why-paris__image-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -} - -.why-paris__image-col { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.why-paris__image-col--offset { - padding-top: 2rem; -} - -.why-paris__img { - width: 100%; - object-fit: cover; - border-radius: 0.75rem; - box-shadow: 0 4px 12px rgba(0,0,0,0.1); - display: block; -} - -.why-paris__img--short { height: 12rem; } -.why-paris__img--tall { height: 16rem; } - -.why-paris__content { - display: flex; - flex-direction: column; - gap: 1.25rem; - padding-left: 2rem; -} - -@media (max-width: 991px) { - .why-paris__content { - padding-left: 0; - margin-bottom: 2.5rem; - } -} - -.why-paris__title { - font-size: clamp(1.75rem, 3vw, 2.25rem); - font-weight: 700; - color: #1b254b; - margin: 0; -} - -.why-paris__desc { - font-size: 1.05rem; - color: #6b7280; - line-height: 1.7; - margin: 0; -} - -.why-paris__list { - list-style: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: column; - gap: 1rem; -} - -.why-paris__list-item { - display: flex; - align-items: flex-start; - gap: 0.75rem; - color: #1b254b; - font-size: 0.95rem; -} - -.why-paris__check { - width: 1.25rem; - height: 1.25rem; - border-radius: 50%; - background: #f8fbff; - display: flex; - align-items: center; - justify-content: center; - color: #1b254b; - font-size: 0.65rem; - flex-shrink: 0; - margin-top: 2px; -} - -.why-paris__btn { - display: inline-block; - margin-top: 0.5rem; - padding: 0.625rem 1.5rem; - background: #f8fbff; - color: #1b254b; - font-weight: 600; - font-size: 0.95rem; - border-radius: 0.375rem; - border: 1px solid #e5e7eb; - cursor: pointer; - transition: background-color 0.2s ease; -} - -.why-paris__btn:hover { - background-color: #e5e7eb; -} - -/* ------------------------------------------------------------ - Leadership Message - ------------------------------------------------------------ */ -.about-message { - padding: 80px 0; - background: #ffffff; -} - -.about-message__header { - margin-bottom: 2rem; -} - -.about-message__title { - font-size: clamp(1.75rem, 3vw, 2.5rem); - font-weight: 700; - color: #1b254b; - margin-bottom: 1rem; -} - -.about-message__divider { - width: 5rem; - height: 4px; - background: #E13833; - border-radius: 999px; -} - -.about-message__body p { - color: #6b7280; - line-height: 1.8; - margin-bottom: 1.25rem; -} - -.about-message__quote { - font-size: 1.2rem; - font-weight: 500; - color: #1b254b !important; - line-height: 1.7; -} - -.about-message__author { - display: flex; - align-items: center; - gap: 1.25rem; - margin-top: 2rem; - padding: 1.5rem; - background: #f8f8f9; - border-radius: 1rem; - border: 1px solid #e5e7eb; -} - -.about-message__avatar { - width: 5rem; - height: 5rem; - border-radius: 50%; - overflow: hidden; - border: 2px solid #E13833; - flex-shrink: 0; -} - -.about-message__avatar img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.about-message__author-name { - font-size: 1.1rem; - font-weight: 700; - color: #1b254b; - margin: 0 0 0.25rem; -} - -.about-message__author-role { - font-size: 0.875rem; - color: #E13833; - font-weight: 500; - margin: 0; -} - -.about-message__quote-icon { - font-size: 3rem; - color: #1b254b; - opacity: 0.15; - margin-left: auto; -} - -/* Sidebar */ -.about-message__sidebar { - display: flex; - flex-direction: column; - gap: 1.25rem; - position: sticky; - top: 7rem; -} - -.about-message__sidebar-card { - background: #f8f8f9; - padding: 2rem; - border-radius: 1.5rem; - border: 1px solid #e5e7eb; -} - -.about-message__sidebar-card h3 { - font-size: 1.1rem; - font-weight: 700; - color: #1b254b; - margin-bottom: 0.75rem; -} - -.about-message__sidebar-card p { - font-size: 0.875rem; - color: #6b7280; - margin-bottom: 1.25rem; -} - -.about-message__sidebar-card--primary { - background: #1b254b; -} - -.about-message__sidebar-card--primary h3, -.about-message__sidebar-card--primary p { - color: #ffffff; -} - -.about-message__sidebar-card--primary p { - color: rgba(255,255,255,0.75); -} - -.about-message__sidebar-link { - display: inline-flex; - align-items: center; - justify-content: space-between; - width: 100%; - background: #ffffff; - color: #1b254b; - padding: 0.75rem 1.5rem; - border-radius: 999px; - font-weight: 500; - font-size: 0.9rem; - text-decoration: none; - transition: background 0.2s; -} - -.about-message__sidebar-link:hover { background: #f3f4f6; } - -.about-message__sidebar-icon { - width: 3rem; - height: 3rem; - background: #ffffff; - border-radius: 0.75rem; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.25rem; - color: #1b254b; - margin-bottom: 1rem; - box-shadow: 0 1px 4px rgba(0,0,0,0.08); -} - -.about-message__sidebar-text-link { - display: inline-flex; - align-items: center; - gap: 0.5rem; - color: #1b254b; - font-weight: 500; - font-size: 0.9rem; - text-decoration: none; -} - -.about-message__sidebar-text-link:hover { text-decoration: underline; } - -.about-message__sidebar-outline-link { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - border: 2px solid #1b254b; - color: #1b254b; - padding: 0.75rem 1.5rem; - border-radius: 999px; - font-weight: 500; - font-size: 0.9rem; - text-decoration: none; - transition: all 0.2s; -} - -.about-message__sidebar-outline-link:hover { - background: #1b254b; - color: #ffffff; -} - -/* ------------------------------------------------------------ - Leadership Board - ------------------------------------------------------------ */ -.about-leadership { - padding: 80px 0; - background: #f8f8f9; -} - -.about-leadership__header { - margin-bottom: 3rem; -} - -.about-leadership__title { - font-size: clamp(1.75rem, 3vw, 2.25rem); - font-weight: 700; - color: #1b254b; - margin-bottom: 0.75rem; -} - -.about-leadership__subtitle { - color: #6b7280; - font-size: 1.05rem; - margin: 0; -} - -.about-leadership__grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 2rem; -} - -@media (max-width: 991px) { - .about-leadership__grid { grid-template-columns: repeat(2, 1fr); } -} - -@media (max-width: 575px) { - .about-leadership__grid { grid-template-columns: 1fr; } -} - -.about-leadership__card { - background: #ffffff; - border-radius: 0.75rem; - border: 1px solid #e5e7eb; - overflow: hidden; - transition: box-shadow 0.2s; -} - -.about-leadership__card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); } - -.about-leadership__photo-wrap { - height: 16rem; - overflow: hidden; - background: #f3f4f6; -} - -.about-leadership__photo { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.5s ease; -} - -.about-leadership__card:hover .about-leadership__photo { transform: scale(1.05); } - -.about-leadership__info { - padding: 1.5rem; - text-align: center; -} - -.about-leadership__name { - font-size: 1rem; - font-weight: 700; - color: #1b254b; - margin-bottom: 0.25rem; -} - -.about-leadership__role { - font-size: 0.875rem; - color: #E13833; - font-weight: 500; - margin-bottom: 0.75rem; -} - -.about-leadership__socials { - display: flex; - justify-content: center; - gap: 0.75rem; -} - -.about-leadership__social-link { - color: #6b7280; - font-size: 1rem; - text-decoration: none; - transition: color 0.2s; -} - -.about-leadership__social-link:hover { color: #1b254b; } - -/* ------------------------------------------------------------ - Campus - ------------------------------------------------------------ */ -.about-campus { - padding: 80px 0; - background: #f8f8f9; -} - -.about-campus__header { - margin-bottom: 3rem; -} - -.about-campus__title { - font-size: clamp(1.75rem, 3vw, 2.25rem); - font-weight: 700; - color: #1b254b; - margin-bottom: 0.75rem; -} - -.about-campus__subtitle { - color: #6b7280; - max-width: 40rem; - margin: 0 auto; -} - -.about-campus__grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 2rem; -} - -@media (max-width: 991px) { - .about-campus__grid { grid-template-columns: 1fr; } -} - -.about-campus__card { - background: #ffffff; - border-radius: 1.5rem; - overflow: hidden; - box-shadow: 0 2px 8px rgba(0,0,0,0.06); - transition: box-shadow 0.2s; -} - -.about-campus__card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.1); } - -.about-campus__img-wrap { - height: 12rem; - overflow: hidden; -} - -.about-campus__img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.5s ease; -} - -.about-campus__card:hover .about-campus__img { transform: scale(1.05); } - -.about-campus__body { - padding: 2rem; -} - -.about-campus__tag { - display: inline-block; - padding: 0.2rem 0.75rem; - border-radius: 999px; - font-size: 0.75rem; - font-weight: 700; - margin-bottom: 1rem; -} - -.about-campus__tag--blue { background: #eff6ff; color: #1b254b; } -.about-campus__tag--yellow { background: #fefce8; color: #854d0e; } -.about-campus__tag--green { background: #f0fdf4; color: #166534; } - -.about-campus__card-title { - font-size: 1.1rem; - font-weight: 700; - color: #1b254b; - margin-bottom: 0.75rem; -} - -.about-campus__card-desc { - font-size: 0.875rem; - color: #6b7280; - line-height: 1.6; - margin-bottom: 1.5rem; -} - -.about-campus__link { - display: inline-flex; - align-items: center; - gap: 0.5rem; - color: #1b254b; - font-weight: 500; - font-size: 0.875rem; - text-decoration: none; - transition: gap 0.2s; -} - -.about-campus__link:hover { gap: 0.75rem; } - -/* ------------------------------------------------------------ - History Timeline - ------------------------------------------------------------ */ -.about-timeline { - padding: 80px 0; - background: #1b254b; - color: #ffffff; -} - -.about-timeline__header { margin-bottom: 3rem; } - -.about-timeline__title { - font-size: clamp(1.75rem, 3vw, 2.5rem); - font-weight: 700; - color: #ffffff; - margin-bottom: 0.75rem; -} - -.about-timeline__subtitle { color: rgba(255,255,255,0.65); font-size: 1rem; margin: 0; } - -.about-timeline__track { - max-width: 44rem; - margin: 0 auto; - position: relative; - padding: 1rem 0; -} - -/* Vertical line chạy giữa track */ -.about-timeline__line { - position: absolute; - left: 50%; - top: 0; - bottom: 0; - width: 2px; - margin-left: -1px; - background: rgba(100,160,255,0.3); -} - -.about-timeline__item { - display: flex; - margin-bottom: 3.5rem; - width: 100%; - position: relative; -} - -.about-timeline__item:last-child { margin-bottom: 0; } - -/* Content chiếm nửa trái hoặc phải */ -.about-timeline__content { - width: calc(50% - 1.5rem); -} - -/* Dot nằm absolute giữa line */ -.about-timeline__dot-wrap { - position: absolute; - left: 50%; - top: 0.3rem; - transform: translateX(-50%); - z-index: 2; - display: flex; - align-items: center; - justify-content: center; -} - -/* Spacer chiếm nửa còn lại */ -.about-timeline__spacer { - width: calc(50% - 1.5rem); -} - -/* Left: content bên trái, text align right */ -.about-timeline__item--left .about-timeline__content { - text-align: right; - order: 1; - margin-right: 3rem; -} -.about-timeline__item--left .about-timeline__dot-wrap { order: 2; } -.about-timeline__item--left .about-timeline__spacer { order: 3; } - -/* Right: spacer bên trái, content bên phải */ -.about-timeline__item--right .about-timeline__spacer { order: 1; } -.about-timeline__item--right .about-timeline__dot-wrap { order: 2; } -.about-timeline__item--right .about-timeline__content { - text-align: left; - order: 3; - margin-left: 3rem; -} - -.about-timeline__dot { - width: 1.25rem; - height: 1.25rem; - border-radius: 50%; - background: transparent; - border: 2px solid #74b3ff; - box-shadow: 0 0 0 4px rgba(116,179,255,0.15); - flex-shrink: 0; -} - -.about-timeline__year { - font-size: 1.75rem; - font-weight: 700; - color: #ffffff; - margin-bottom: 0.25rem; - line-height: 1; -} - -.about-timeline__event { - font-size: 0.95rem; - font-weight: 600; - color: #74b3ff; - margin-bottom: 0.5rem; -} - -.about-timeline__desc { - font-size: 0.875rem; - color: rgba(255,255,255,0.65); - line-height: 1.6; - margin: 0; - max-width: 18rem; -} - -.about-timeline__item--left .about-timeline__desc { margin-left: auto; } -.about-timeline__item--right .about-timeline__desc { margin-right: auto; } - -@media (max-width: 767px) { - .about-timeline__line { left: 0.75rem; } - .about-timeline__item { flex-direction: column; align-items: flex-start; padding-left: 2.5rem; } - .about-timeline__item--left .about-timeline__content, - .about-timeline__item--right .about-timeline__content { text-align: left; padding: 0; order: 2; } - .about-timeline__item--left .about-timeline__desc, - .about-timeline__item--right .about-timeline__desc { margin: 0; max-width: 100%; } - .about-timeline__dot-wrap { position: absolute; left: 0; top: 0.25rem; order: 1; } - .about-timeline__spacer { display: none; } -} diff --git a/app/components/contactus/Accessibility.tsx b/app/components/contact/Accessibility.tsx similarity index 100% rename from app/components/contactus/Accessibility.tsx rename to app/components/contact/Accessibility.tsx diff --git a/app/components/contactus/ContactHero.tsx b/app/components/contact/ContactHero.tsx similarity index 100% rename from app/components/contactus/ContactHero.tsx rename to app/components/contact/ContactHero.tsx diff --git a/app/components/contactus/ContactSplit.tsx b/app/components/contact/ContactSplit.tsx similarity index 100% rename from app/components/contactus/ContactSplit.tsx rename to app/components/contact/ContactSplit.tsx diff --git a/app/components/contactus/DepartmentCard.tsx b/app/components/contact/DepartmentCard.tsx similarity index 100% rename from app/components/contactus/DepartmentCard.tsx rename to app/components/contact/DepartmentCard.tsx diff --git a/app/components/contactus/DepartmentCardBlue.tsx b/app/components/contact/DepartmentCardBlue.tsx similarity index 100% rename from app/components/contactus/DepartmentCardBlue.tsx rename to app/components/contact/DepartmentCardBlue.tsx diff --git a/app/components/contactus/DepartmentCardEmpty.tsx b/app/components/contact/DepartmentCardEmpty.tsx similarity index 100% rename from app/components/contactus/DepartmentCardEmpty.tsx rename to app/components/contact/DepartmentCardEmpty.tsx diff --git a/app/components/contactus/DepartmentDirectory.tsx b/app/components/contact/DepartmentDirectory.tsx similarity index 100% rename from app/components/contactus/DepartmentDirectory.tsx rename to app/components/contact/DepartmentDirectory.tsx diff --git a/app/components/contactus/InquiryForm.tsx b/app/components/contact/InquiryForm.tsx similarity index 100% rename from app/components/contactus/InquiryForm.tsx rename to app/components/contact/InquiryForm.tsx diff --git a/app/components/contactus/LocationMap.tsx b/app/components/contact/LocationMap.tsx similarity index 100% rename from app/components/contactus/LocationMap.tsx rename to app/components/contact/LocationMap.tsx diff --git a/app/components/contactus/OfficeHours.tsx b/app/components/contact/OfficeHours.tsx similarity index 100% rename from app/components/contactus/OfficeHours.tsx rename to app/components/contact/OfficeHours.tsx diff --git a/app/components/home/home.css b/app/components/home/home.css deleted file mode 100644 index 42a26f2..0000000 --- a/app/components/home/home.css +++ /dev/null @@ -1,514 +0,0 @@ -/* ============================================================ - 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; -} diff --git a/app/components/publications/publications.css b/app/components/publications/publications.css deleted file mode 100644 index 6c797e2..0000000 --- a/app/components/publications/publications.css +++ /dev/null @@ -1,787 +0,0 @@ -/* ============================================================ - publications.css — Scoped under .pub-wrapper - Matches the HTML reference design exactly. - All rules are scoped to avoid conflicts with Bootstrap/main.css - ============================================================ */ - -/* --- Local CSS Variables (override globals for this page) --- */ -.pub-wrapper { - --pub-blue: #263c6f; - --pub-blue-hover: #1d2e55; - --pub-blue-light: #f0f4f8; - --pub-border: #e5e7eb; - --pub-text: #111827; - --pub-muted: #6b7280; - --pub-bg: #f9fafb; - --pub-accent: #3b82f6; - - background-color: var(--pub-bg); - width: 100%; -} - -/* ============================================================ - SEARCH HEADER SECTION - ============================================================ */ -.pub-wrapper #repo-header { - width: 100%; - background-color: #ffffff; - border-bottom: 1px solid var(--pub-border); - padding-top: 3rem; - padding-bottom: 3rem; -} - -.pub-wrapper #repo-header h1 { - font-size: 2.25rem; - font-weight: 700; - color: var(--pub-text); - letter-spacing: -0.025em; - margin-bottom: 0.5rem; - line-height: 2.5rem; -} - -.pub-wrapper #repo-header p { - color: var(--pub-muted); - font-size: 1.125rem; - margin: 0; -} - -/* Search bar */ -.pub-wrapper .pub-search-bar { - position: relative; - width: 100%; - border-radius: 0.75rem; - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); -} - -.pub-wrapper .pub-search-bar input { - display: block; - width: 100%; - padding: 1rem 8rem 1rem 3rem; - border: 1px solid var(--pub-border); - border-radius: 0.75rem; - font-size: 1.125rem; - color: var(--pub-text); - background-color: #ffffff; - outline: none; - transition: border-color 0.2s, box-shadow 0.2s; - box-sizing: border-box; -} - -.pub-wrapper .pub-search-bar input::placeholder { - color: var(--pub-muted); -} - -.pub-wrapper .pub-search-bar input:focus { - border-color: var(--pub-blue); - box-shadow: 0 0 0 2px rgba(38, 60, 111, 0.15); -} - -.pub-wrapper .pub-search-bar .pub-search-icon { - position: absolute; - top: 50%; - left: 1rem; - transform: translateY(-50%); - color: var(--pub-muted); - font-size: 1.125rem; - pointer-events: none; -} - -.pub-wrapper .pub-search-bar .pub-search-btn-wrap { - position: absolute; - top: 50%; - right: 0.5rem; - transform: translateY(-50%); -} - -/* ============================================================ - BUTTONS - ============================================================ */ -.pub-wrapper .pub-btn-primary { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - background-color: var(--pub-blue); - color: #ffffff; - border: 1px solid var(--pub-blue); - border-radius: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: background-color 0.2s; - text-decoration: none; - white-space: nowrap; -} - -.pub-wrapper .pub-btn-primary:hover { - background-color: var(--pub-blue-hover); - color: #ffffff; -} - -.pub-wrapper .pub-btn-outline { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - background-color: #ffffff; - color: var(--pub-text); - border: 1px solid var(--pub-border); - border-radius: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: border-color 0.2s, color 0.2s; - text-decoration: none; - white-space: nowrap; - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); -} - -.pub-wrapper .pub-btn-outline:hover { - border-color: var(--pub-blue); - color: var(--pub-blue); -} - -/* ============================================================ - MAIN CONTENT LAYOUT - ============================================================ */ -.pub-wrapper #repo-content { - padding-top: 2.5rem; - padding-bottom: 2.5rem; -} - -.pub-wrapper .pub-layout { - display: flex; - flex-direction: column; - gap: 2rem; -} - -@media (min-width: 1024px) { - .pub-wrapper .pub-layout { - flex-direction: row; - } -} - -/* ============================================================ - SIDEBAR - ============================================================ */ -.pub-wrapper .pub-sidebar { - width: 100%; - flex-shrink: 0; -} - -@media (min-width: 1024px) { - .pub-wrapper .pub-sidebar { - width: 20rem; /* 320px */ - min-width: 20rem; - max-width: 20rem; - } -} - -.pub-wrapper .pub-sidebar-inner { - background-color: #ffffff; - border-radius: 0.75rem; - border: 1px solid var(--pub-border); - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); - padding: 1.25rem; - position: sticky; - top: 7rem; /* below fixed header */ - height: fit-content; -} - -.pub-wrapper .pub-sidebar-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 1.5rem; - padding-bottom: 1rem; - border-bottom: 1px solid var(--pub-border); -} - -.pub-wrapper .pub-sidebar-header h2 { - font-size: 1.125rem; - font-weight: 700; - color: var(--pub-text); - display: flex; - align-items: center; - gap: 0.5rem; - margin: 0; -} - -.pub-wrapper .pub-sidebar-header h2 i { - color: var(--pub-blue); -} - -.pub-wrapper .pub-sidebar-header .pub-clear-btn { - font-size: 0.875rem; - color: var(--pub-accent); - font-weight: 500; - background: none; - border: none; - cursor: pointer; - padding: 0; - text-decoration: none; -} - -.pub-wrapper .pub-sidebar-header .pub-clear-btn:hover { - text-decoration: underline; -} - -/* Accordion */ -.pub-wrapper .pub-accordion { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.pub-wrapper .pub-accordion-item { - /* no extra styles needed */ -} - -.pub-wrapper .pub-accordion-trigger { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - text-align: left; - font-size: 0.9375rem; - font-weight: 600; - color: var(--pub-text); - background: none; - border: none; - cursor: pointer; - padding: 0; - margin-bottom: 0.75rem; -} - -.pub-wrapper .pub-accordion-trigger i { - font-size: 0.75rem; - color: var(--pub-muted); - transition: transform 0.3s ease; -} - -.pub-wrapper .pub-accordion-trigger.open i { - transform: rotate(180deg); -} - -.pub-wrapper .pub-accordion-body { - overflow: hidden; - transition: max-height 0.3s ease-out, opacity 0.3s ease-out; - max-height: 0; - opacity: 0; -} - -.pub-wrapper .pub-accordion-body.open { - max-height: 600px; - opacity: 1; -} - -.pub-wrapper .pub-accordion-body .pub-filter-list { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding-bottom: 0.5rem; -} - -/* Filter checkbox labels */ -.pub-wrapper .pub-filter-label { - display: flex; - align-items: center; - gap: 0.75rem; - cursor: pointer; -} - -.pub-wrapper .pub-filter-label span { - font-size: 0.875rem; - color: var(--pub-text); - transition: color 0.15s; -} - -.pub-wrapper .pub-filter-label:hover span { - color: var(--pub-blue); -} - -/* Custom checkbox */ -.pub-wrapper .pub-checkbox { - appearance: none; - -webkit-appearance: none; - width: 1.15em; - height: 1.15em; - border: 1px solid var(--pub-border); - border-radius: 0.25em; - background-color: #ffffff; - display: grid; - place-content: center; - cursor: pointer; - flex-shrink: 0; - transition: background-color 0.15s, border-color 0.15s; -} - -.pub-wrapper .pub-checkbox::before { - content: ""; - width: 0.65em; - height: 0.65em; - transform: scale(0); - transition: transform 120ms ease-in-out; - background-color: #ffffff; - clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); -} - -.pub-wrapper .pub-checkbox:checked { - background-color: var(--pub-blue); - border-color: var(--pub-blue); -} - -.pub-wrapper .pub-checkbox:checked::before { - transform: scale(1); -} - -/* Year range inputs */ -.pub-wrapper .pub-year-range { - display: flex; - gap: 0.5rem; - padding-top: 0.5rem; -} - -.pub-wrapper .pub-year-range input { - width: 50%; - padding: 0.375rem 0.5rem; - border: 1px solid var(--pub-border); - border-radius: 0.25rem; - font-size: 0.875rem; - color: var(--pub-text); - background-color: #ffffff; - outline: none; - transition: border-color 0.2s; - box-sizing: border-box; -} - -.pub-wrapper .pub-year-range input:focus { - border-color: var(--pub-blue); -} - -/* ============================================================ - RESULTS AREA - ============================================================ */ -.pub-wrapper .pub-results { - flex: 1; - min-width: 0; -} - -/* Results toolbar */ -.pub-wrapper .pub-results-toolbar { - display: flex; - flex-direction: column; - gap: 1rem; - align-items: center; - background-color: #ffffff; - padding: 1rem; - border-radius: 0.75rem; - border: 1px solid var(--pub-border); - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); - margin-bottom: 1.5rem; -} - -@media (min-width: 640px) { - .pub-wrapper .pub-results-toolbar { - flex-direction: row; - justify-content: space-between; - } -} - -.pub-wrapper .pub-results-count { - font-size: 0.875rem; - color: var(--pub-text); -} - -.pub-wrapper .pub-results-count strong { - font-weight: 700; -} - -.pub-wrapper .pub-sort-wrap { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.pub-wrapper .pub-sort-wrap label { - font-size: 0.875rem; - color: var(--pub-muted); - white-space: nowrap; -} - -.pub-wrapper .pub-sort-select { - border: 1px solid var(--pub-border); - border-radius: 0.5rem; - padding: 0.375rem 0.75rem; - font-size: 0.875rem; - color: var(--pub-text); - background-color: #ffffff; - outline: none; - cursor: pointer; - transition: border-color 0.2s; - min-width: 140px; -} - -.pub-wrapper .pub-sort-select:focus, -.pub-wrapper .pub-sort-select:hover { - border-color: var(--pub-blue); -} - -/* Sort dropdown (custom React dropdown) */ -.pub-wrapper .pub-sort-dropdown { - position: relative; -} - -.pub-wrapper .pub-sort-dropdown-btn { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - border: 1px solid var(--pub-border); - border-radius: 0.5rem; - padding: 0.375rem 0.75rem; - font-size: 0.875rem; - background-color: #ffffff; - color: var(--pub-text); - cursor: pointer; - min-width: 140px; - transition: border-color 0.2s; - outline: none; -} - -.pub-wrapper .pub-sort-dropdown-btn:hover, -.pub-wrapper .pub-sort-dropdown-btn.open { - border-color: var(--pub-blue); -} - -.pub-wrapper .pub-sort-dropdown-btn i { - font-size: 0.625rem; - color: var(--pub-muted); - transition: transform 0.3s; -} - -.pub-wrapper .pub-sort-dropdown-btn.open i { - transform: rotate(180deg); -} - -.pub-wrapper .pub-sort-dropdown-menu { - position: absolute; - top: calc(100% + 4px); - right: 0; - width: 100%; - background-color: #ffffff; - border: 1px solid var(--pub-border); - border-radius: 0.5rem; - box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); - z-index: 50; - overflow: hidden; - padding: 0.25rem 0; -} - -.pub-wrapper .pub-sort-dropdown-option { - padding: 0.5rem 1rem; - font-size: 0.875rem; - cursor: pointer; - transition: background-color 0.15s; - color: var(--pub-text); -} - -.pub-wrapper .pub-sort-dropdown-option:hover { - background-color: #f9fafb; -} - -.pub-wrapper .pub-sort-dropdown-option.selected { - background-color: var(--pub-blue-light); - color: var(--pub-blue); - font-weight: 600; -} - -/* ============================================================ - PUBLICATION CARD - ============================================================ */ -.pub-wrapper .pub-card-list { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.pub-wrapper .pub-card { - background-color: #ffffff; - border-radius: 0.75rem; - border: 1px solid var(--pub-border); - padding: 1.5rem; - transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; - cursor: default; -} - -.pub-wrapper .pub-card:hover { - border-color: var(--pub-blue); - box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); -} - -/* Card top row: title + badges */ -.pub-wrapper .pub-card-top { - display: flex; - flex-direction: column; - gap: 1rem; - margin-bottom: 0.75rem; -} - -@media (min-width: 768px) { - .pub-wrapper .pub-card-top { - flex-direction: row; - justify-content: space-between; - } -} - -.pub-wrapper .pub-card-title { - font-size: 1.25rem; - font-weight: 700; - color: var(--pub-text); - line-height: 1.4; - margin: 0; - transition: color 0.2s; -} - -.pub-wrapper .pub-card:hover .pub-card-title { - color: var(--pub-blue); -} - -.pub-wrapper .pub-card-title a { - color: inherit; - text-decoration: none; -} - -.pub-wrapper .pub-card-title a:hover { - color: var(--pub-blue); -} - -/* Badges */ -.pub-wrapper .pub-badges { - display: flex; - gap: 0.5rem; - flex-shrink: 0; - flex-wrap: wrap; -} - -.pub-wrapper .pub-badge { - display: inline-flex; - align-items: center; - gap: 0.25rem; - padding: 0.25rem 0.625rem; - border-radius: 0.25rem; - font-size: 0.75rem; - font-weight: 600; - border: 1px solid transparent; - white-space: nowrap; -} - -.pub-wrapper .pub-badge-open { - background-color: #f0fdf4; - color: #15803d; - border-color: #bbf7d0; -} - -.pub-wrapper .pub-badge-peer { - background-color: var(--pub-blue-light); - color: var(--pub-blue); - border-color: rgba(38, 60, 111, 0.2); -} - -.pub-wrapper .pub-badge-institutional { - background-color: #fefce8; - color: #a16207; - border-color: #fde68a; -} - -.pub-wrapper .pub-badge-request { - background-color: #eff6ff; - color: #1d4ed8; - border-color: #bfdbfe; -} - -/* Card meta row */ -.pub-wrapper .pub-card-meta { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.5rem 1.5rem; - font-size: 0.875rem; - color: var(--pub-muted); - margin-bottom: 1rem; -} - -.pub-wrapper .pub-card-meta .pub-meta-item { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.pub-wrapper .pub-card-meta .pub-meta-item strong { - color: var(--pub-text); - font-weight: 500; -} - -/* Card abstract */ -.pub-wrapper .pub-card-abstract { - font-size: 0.875rem; - color: var(--pub-muted); - line-height: 1.625; - margin-bottom: 1rem; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* Keywords */ -.pub-wrapper .pub-keywords { - display: flex; - align-items: center; - gap: 0.5rem; - flex-wrap: wrap; - margin-bottom: 1rem; -} - -.pub-wrapper .pub-keywords-label { - font-size: 0.75rem; - font-weight: 500; - color: var(--pub-muted); -} - -.pub-wrapper .pub-keyword-tag { - display: inline-block; - padding: 0.25rem 0.5rem; - background-color: #f3f4f6; - color: #4b5563; - border-radius: 0.25rem; - font-size: 0.75rem; -} - -/* Card actions */ -.pub-wrapper .pub-card-actions { - display: flex; - align-items: center; - gap: 0.75rem; - padding-top: 1rem; - border-top: 1px solid var(--pub-border); - flex-wrap: wrap; -} - -.pub-wrapper .pub-action-btn { - display: inline-flex; - align-items: center; - gap: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - background: none; - border: none; - cursor: pointer; - padding: 0; - transition: color 0.2s; - text-decoration: none; -} - -.pub-wrapper .pub-action-btn-primary { - color: var(--pub-blue); -} - -.pub-wrapper .pub-action-btn-primary:hover { - color: var(--pub-blue-hover); -} - -.pub-wrapper .pub-action-btn-secondary { - color: var(--pub-muted); - margin-left: 1rem; -} - -.pub-wrapper .pub-action-btn-secondary:hover { - color: var(--pub-text); -} - -/* ============================================================ - PAGINATION - ============================================================ */ -.pub-wrapper .pub-pagination { - display: flex; - align-items: center; - justify-content: space-between; - border-top: 1px solid var(--pub-border); - padding-top: 1.5rem; - margin-top: 2rem; - gap: 1rem; -} - -.pub-wrapper .pub-page-btn { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - border: 1px solid var(--pub-border); - border-radius: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - background-color: #ffffff; - color: var(--pub-text); - cursor: pointer; - transition: border-color 0.2s, color 0.2s; -} - -.pub-wrapper .pub-page-btn:hover:not(:disabled) { - border-color: var(--pub-blue); - color: var(--pub-blue); -} - -.pub-wrapper .pub-page-btn:disabled { - opacity: 0.5; - cursor: not-allowed; - background-color: #f9fafb; -} - -.pub-wrapper .pub-page-numbers { - display: none; - align-items: center; - gap: 0.25rem; -} - -@media (min-width: 768px) { - .pub-wrapper .pub-page-numbers { - display: flex; - } -} - -.pub-wrapper .pub-page-num { - width: 2rem; - height: 2rem; - display: flex; - align-items: center; - justify-content: center; - border-radius: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - background-color: #ffffff; - color: var(--pub-text); - border: none; - cursor: pointer; - transition: background-color 0.15s, color 0.15s; -} - -.pub-wrapper .pub-page-num:hover { - background-color: #f3f4f6; -} - -.pub-wrapper .pub-page-num.active { - background-color: var(--pub-blue); - color: #ffffff; - cursor: default; -} - -.pub-wrapper .pub-page-ellipsis { - width: 2rem; - height: 2rem; - display: flex; - align-items: center; - justify-content: center; - color: var(--pub-muted); - font-size: 0.875rem; -} diff --git a/app/components/research/research.css b/app/components/research/research.css deleted file mode 100644 index f73db68..0000000 --- a/app/components/research/research.css +++ /dev/null @@ -1,718 +0,0 @@ -/* ============================================================ - research.css — Scoped under .research-wrapper - Matches the HTML reference design exactly. - All rules scoped to avoid conflicts with Bootstrap/main.css - ============================================================ */ - -/* --- Local CSS Variables --- */ -.research-wrapper { - --r-blue: #263c6f; - --r-blue-hover: #1d2e55; - --r-blue-light: #f0f4f8; - --r-accent: #3b82f6; - --r-border: #e5e7eb; - --r-text: #111827; - --r-muted: #6b7280; - --r-bg: #f9fafb; - --r-white: #ffffff; - --r-shadow-soft: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); - --r-shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); - - width: 100%; - background-color: var(--r-bg); -} - -/* ============================================================ - HERO SECTION - ============================================================ */ -.research-wrapper #research-hero { - width: 100%; - background-color: var(--r-bg); - border-bottom: 1px solid var(--r-border); - padding-top: 3rem; - padding-bottom: 4rem; - font-family: 'Inter', sans-serif; -} - -/* Label row: gạch ngang + text "Research Hub" */ -.research-wrapper #research-hero .hero-label { - display: inline-flex; - align-items: center; - gap: 0.5rem; -} - -.research-wrapper #research-hero .hero-label-line { - display: block; - width: 2rem; - height: 2.5px; - background-color: var(--r-accent); - flex-shrink: 0; -} - -.research-wrapper #research-hero .hero-label-text { - font-size: 0.875rem; - font-weight: 600; - color: var(--r-blue); - text-transform: uppercase; - letter-spacing: 0.05em; - font-family: 'Inter', sans-serif; -} - -/* Heading */ -.research-wrapper #research-hero h1 { - font-family: 'Inter', sans-serif; - font-size: 3rem; - font-weight: 700; - color: var(--r-text); - letter-spacing: -0.025em; - line-height: 1.1; - margin: 0; -} - -@media (min-width: 1024px) { - .research-wrapper #research-hero h1 { - font-size: 4.5rem; - } -} - -.research-wrapper #research-hero h1 span { - color: var(--r-blue); -} - -/* Paragraph */ -.research-wrapper #research-hero .hero-desc { - font-family: 'Inter', sans-serif; - font-size: 1.125rem; - color: var(--r-muted); - line-height: 1.625; - max-width: 36rem; - margin: 0; -} - -/* Left column spacing */ -.research-wrapper #research-hero .hero-left { - display: flex; - flex-direction: column; - gap: 2rem; -} - -/* Button row */ -.research-wrapper #research-hero .hero-buttons { - display: flex; - flex-wrap: wrap; - gap: 1rem; -} - -/* Hero buttons */ -.research-wrapper .r-btn-primary { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 1rem 2rem; - background-color: var(--r-blue); - color: var(--r-white); - border: none; - border-radius: 9999px; - font-size: 1rem; - font-weight: 600; - cursor: pointer; - transition: background-color 0.2s; - box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); - text-decoration: none; -} - -.research-wrapper .r-btn-primary:hover { - background-color: var(--r-blue-hover); - color: var(--r-white); -} - -.research-wrapper .r-btn-outline { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 1rem 2rem; - background-color: var(--r-white); - color: var(--r-text); - border: 1px solid var(--r-border); - border-radius: 9999px; - font-size: 1rem; - font-weight: 600; - cursor: pointer; - transition: background-color 0.2s; - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); - text-decoration: none; -} - -.research-wrapper .r-btn-outline:hover { - background-color: #f9fafb; - color: var(--r-text); -} - -/* Hero floating stat cards */ -.research-wrapper .r-stat-card { - position: absolute; - background-color: var(--r-white); - border-radius: 1rem; - padding: 1rem; - border: 1px solid var(--r-border); - box-shadow: var(--r-shadow-hover); - z-index: 20; - display: flex; - align-items: center; - gap: 1rem; -} - -.research-wrapper .r-stat-card p { - margin: 0; - line-height: 1.2; -} - -/* ============================================================ - RESEARCH DOMAINS SECTION - ============================================================ */ -.research-wrapper #research-domains { - padding-top: 5rem; - padding-bottom: 5rem; - background-color: var(--r-white); -} - -.research-wrapper #research-domains h2 { - font-size: 1.875rem; - font-weight: 700; - color: var(--r-text); - margin-bottom: 1rem; -} - -@media (min-width: 1024px) { - .research-wrapper #research-domains h2 { - font-size: 2.25rem; - } -} - -.research-wrapper #research-domains > div > div:first-child p { - color: var(--r-muted); - max-width: 42rem; - margin: 0 auto; -} - -/* Domain card — folder tab shape */ -.research-wrapper .folder-tab { - clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); - padding: 2rem; - min-height: 320px; - display: flex; - flex-direction: column; - border-radius: 1.5rem; - position: relative; - overflow: hidden; - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.research-wrapper .folder-tab:hover { - transform: translateY(-4px); - box-shadow: var(--r-shadow-hover); -} - -/* Blue variant (first card) */ -.research-wrapper .folder-tab-blue { - background-color: var(--r-blue); - color: var(--r-white); -} - -.research-wrapper .folder-tab-blue h3 { - color: var(--r-white); -} - -.research-wrapper .folder-tab-blue p { - color: rgba(255,255,255,0.8); -} - -/* Light variant */ -.research-wrapper .folder-tab-light { - background-color: var(--r-blue-light); - color: var(--r-text); - border: 1px solid var(--r-border); -} - -/* CTA card (dashed border) */ -.research-wrapper .domain-card-cta { - border-radius: 1.5rem; - padding: 2rem; - min-height: 320px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - border: 2px dashed var(--r-border); - background-color: var(--r-bg); - cursor: pointer; - transition: border-color 0.2s; -} - -.research-wrapper .domain-card-cta:hover { - border-color: var(--r-blue); -} - -.research-wrapper .domain-card-cta h3 { - font-size: 1.25rem; - font-weight: 700; - color: var(--r-text); - margin-bottom: 0.5rem; -} - -.research-wrapper .domain-card-cta p { - font-size: 0.875rem; - color: var(--r-muted); - margin: 0; -} - -/* Domain card icon box */ -.research-wrapper .domain-icon-blue { - width: 3.5rem; - height: 3.5rem; - border-radius: 1rem; - background-color: rgba(255,255,255,0.2); - backdrop-filter: blur(4px); - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 2rem; - border: 1px solid rgba(255,255,255,0.3); - flex-shrink: 0; -} - -.research-wrapper .domain-icon-light { - width: 3.5rem; - height: 3.5rem; - border-radius: 1rem; - background-color: var(--r-white); - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 2rem; - border: 1px solid var(--r-border); - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); - flex-shrink: 0; -} - -.research-wrapper .domain-card-cta .domain-icon-cta { - width: 4rem; - height: 4rem; - border-radius: 9999px; - background-color: var(--r-white); - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 1rem; - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); - transition: transform 0.2s; -} - -.research-wrapper .domain-card-cta:hover .domain-icon-cta { - transform: scale(1.1); -} - -/* Domain card footer row */ -.research-wrapper .domain-card-footer { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: auto; -} - -.research-wrapper .domain-badge-white { - font-size: 0.875rem; - font-weight: 500; - background-color: var(--r-white); - padding: 0.25rem 0.75rem; - border-radius: 9999px; - border: 1px solid var(--r-border); - color: var(--r-blue); -} - -.research-wrapper .domain-badge-glass { - font-size: 0.875rem; - font-weight: 500; - background-color: rgba(255,255,255,0.2); - padding: 0.25rem 0.75rem; - border-radius: 9999px; - color: var(--r-white); -} - -/* ============================================================ - PROJECTS & CENTERS SECTION - ============================================================ */ -.research-wrapper #projects-centers { - padding-top: 5rem; - padding-bottom: 5rem; - background-color: var(--r-bg); - border-top: 1px solid var(--r-border); - border-bottom: 1px solid var(--r-border); -} - -.research-wrapper #projects-centers h2 { - font-size: 1.5rem; - font-weight: 700; - color: var(--r-text); - margin: 0; -} - -/* Project item card */ -.research-wrapper .project-card { - background-color: var(--r-white); - border-radius: 1.25rem; - padding: 1.5rem; - border: 1px solid var(--r-border); - box-shadow: var(--r-shadow-soft); - display: flex; - flex-direction: column; - gap: 1.5rem; - align-items: flex-start; - transition: box-shadow 0.25s ease; -} - -.research-wrapper .project-card:hover { - box-shadow: var(--r-shadow-hover); -} - -@media (min-width: 640px) { - .research-wrapper .project-card { - flex-direction: row; - align-items: center; - } -} - -.research-wrapper .project-icon { - width: 4rem; - height: 4rem; - border-radius: 0.75rem; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - border: 1px solid var(--r-border); -} - -.research-wrapper .project-icon-blue { background-color: var(--r-blue-light); border-color: var(--r-border); } -.research-wrapper .project-icon-purple { background-color: #faf5ff; border-color: #e9d5ff; } -.research-wrapper .project-icon-orange { background-color: #fff7ed; border-color: #fed7aa; } - -/* Status badges */ -.research-wrapper .badge { - display: inline-flex; - align-items: center; - padding: 0.25rem 0.625rem; - border-radius: 0.375rem; - font-size: 0.75rem; - font-weight: 600; - border: 1px solid transparent; -} - -.research-wrapper .badge-active { background-color: #f0fdf4; color: #15803d; border-color: #bbf7d0; } -.research-wrapper .badge-collection { background-color: #fefce8; color: #a16207; border-color: #fde68a; } -.research-wrapper .badge-review { background-color: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } - -/* Progress bar */ -.research-wrapper .progress-bar-track { - width: 8rem; - background-color: var(--r-bg); - border-radius: 9999px; - height: 0.375rem; -} - -.research-wrapper .progress-bar-fill { - height: 0.375rem; - border-radius: 9999px; -} - -.research-wrapper .progress-fill-blue { background-color: var(--r-blue); } -.research-wrapper .progress-fill-accent { background-color: var(--r-accent); } - -/* ============================================================ - FUNDING CALLS (right column) - ============================================================ */ -.research-wrapper .funding-card { - background-color: var(--r-white); - border-radius: 1.5rem; - padding: 1.5rem; - border: 1px solid var(--r-border); - box-shadow: var(--r-shadow-soft); - display: flex; - flex-direction: column; - transition: box-shadow 0.25s ease; -} - -.research-wrapper .funding-card:hover { - box-shadow: var(--r-shadow-hover); -} - -.research-wrapper .funding-item { - padding: 1.25rem; - background-color: var(--r-bg); - border-radius: 1rem; - border: 1px solid var(--r-border); - transition: border-color 0.2s; -} - -.research-wrapper .funding-item:hover { - border-color: var(--r-accent); -} - -.research-wrapper .funding-item h4 { - font-size: 1rem; - font-weight: 700; - color: var(--r-text); - margin: 0 0 0.75rem 0; -} - -.research-wrapper .funding-label-urgent { - font-size: 0.625rem; - font-weight: 700; - color: #ef4444; - text-transform: uppercase; - letter-spacing: 0.05em; - display: block; - margin-bottom: 0.5rem; -} - -.research-wrapper .funding-label-internal { - font-size: 0.625rem; - font-weight: 700; - color: var(--r-blue); - text-transform: uppercase; - letter-spacing: 0.05em; - display: block; - margin-bottom: 0.5rem; -} - -.research-wrapper .funding-meta { - display: flex; - justify-content: space-between; - align-items: center; -} - -.research-wrapper .funding-due { - font-size: 0.75rem; - color: var(--r-muted); - font-weight: 500; - display: inline-flex; - align-items: center; - gap: 0.375rem; -} - -.research-wrapper .funding-link { - font-size: 0.75rem; - font-weight: 600; - color: var(--r-blue); - display: inline-flex; - align-items: center; - gap: 0.25rem; - text-decoration: none; - transition: color 0.15s; -} - -.research-wrapper .funding-link:hover { - color: var(--r-blue-hover); -} - -.research-wrapper .funding-view-all { - width: 100%; - margin-top: 1.5rem; - padding: 0.75rem; - border-radius: 0.75rem; - border: 1px solid var(--r-border); - font-size: 0.875rem; - font-weight: 600; - color: var(--r-text); - background-color: var(--r-white); - cursor: pointer; - transition: border-color 0.2s, color 0.2s; - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); -} - -.research-wrapper .funding-view-all:hover { - border-color: var(--r-blue); - color: var(--r-blue); -} - -/* ============================================================ - RESEARCH RESOURCES (Quick Links) - ============================================================ */ -.research-wrapper #research-quick-links { - padding-top: 5rem; - padding-bottom: 5rem; - background-color: var(--r-white); -} - -.research-wrapper .resource-card { - display: block; - background-color: var(--r-bg); - border-radius: 1.5rem; - padding: 2rem; - border: 1px solid var(--r-border); - position: relative; - overflow: hidden; - text-decoration: none; - transition: border-color 0.2s; -} - -.research-wrapper .resource-card:hover { - border-color: var(--r-accent); -} - -.research-wrapper .resource-card-glow { - position: absolute; - right: 0; - top: 0; - width: 16rem; - height: 16rem; - background-color: var(--r-blue-light); - border-radius: 9999px; - filter: blur(64px); - opacity: 0.5; - transform: translateY(-50%) translateX(25%); - transition: opacity 0.3s; - pointer-events: none; -} - -.research-wrapper .resource-card:hover .resource-card-glow { - opacity: 0.8; -} - -.research-wrapper .resource-icon { - width: 4rem; - height: 4rem; - border-radius: 1rem; - background-color: var(--r-white); - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); - border: 1px solid var(--r-border); - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - transition: transform 0.2s; -} - -.research-wrapper .resource-card:hover .resource-icon { - transform: scale(1.05); -} - -.research-wrapper .resource-card h3 { - font-size: 1.5rem; - font-weight: 700; - color: var(--r-text); - margin-bottom: 0.5rem; - transition: color 0.2s; -} - -.research-wrapper .resource-card:hover h3 { - color: var(--r-blue); -} - -.research-wrapper .resource-card p { - color: var(--r-muted); - line-height: 1.625; - margin-bottom: 1rem; -} - -.research-wrapper .resource-link { - display: inline-flex; - align-items: center; - font-size: 0.875rem; - font-weight: 600; - color: var(--r-blue); - gap: 0.5rem; -} - -/* ============================================================ - COLLABORATION CTA SECTION - ============================================================ */ -.research-wrapper #collaboration-cta { - padding-top: 6rem; - padding-bottom: 6rem; - background-color: var(--r-blue); - position: relative; - overflow: hidden; -} - -.research-wrapper #collaboration-cta h2 { - font-size: 2.25rem; - font-weight: 700; - color: var(--r-white); - letter-spacing: -0.025em; - margin-bottom: 1.5rem; -} - -@media (min-width: 768px) { - .research-wrapper #collaboration-cta h2 { font-size: 3rem; } -} - -@media (min-width: 1024px) { - .research-wrapper #collaboration-cta h2 { font-size: 3.75rem; } -} - -.research-wrapper #collaboration-cta p { - font-size: 1.25rem; - color: var(--r-blue-light); - opacity: 0.9; - line-height: 1.625; - max-width: 42rem; - margin: 0 auto 2.5rem; - font-weight: 300; -} - -.research-wrapper .cta-btn-white { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - padding: 1rem 2rem; - background-color: var(--r-white); - color: var(--r-blue); - border: none; - border-radius: 0.75rem; - font-size: 1rem; - font-weight: 700; - cursor: pointer; - transition: background-color 0.2s; - box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); - text-decoration: none; - width: 100%; -} - -@media (min-width: 640px) { - .research-wrapper .cta-btn-white { width: auto; } -} - -.research-wrapper .cta-btn-white:hover { - background-color: #f9fafb; - color: var(--r-blue); -} - -.research-wrapper .cta-btn-ghost { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - padding: 1rem 2rem; - background-color: transparent; - color: var(--r-white); - border: 2px solid rgba(255,255,255,0.3); - border-radius: 0.75rem; - font-size: 1rem; - font-weight: 700; - cursor: pointer; - transition: background-color 0.2s; - text-decoration: none; - width: 100%; -} - -@media (min-width: 640px) { - .research-wrapper .cta-btn-ghost { width: auto; } -} - -.research-wrapper .cta-btn-ghost:hover { - background-color: rgba(255,255,255,0.1); - color: var(--r-white); -} diff --git a/app/contact/contact.json b/app/contact/contact.json deleted file mode 100644 index 7b77f13..0000000 --- a/app/contact/contact.json +++ /dev/null @@ -1,89 +0,0 @@ -{ - "title": "Liên Hệ Với Chúng Tôi", - "subtitle": "Chúng tôi luôn sẵn sàng hỗ trợ bạn 24/7", - "contactInfo": { - "address": { - "label": "Địa chỉ", - "value": "123 Nguyễn Huệ, Quận 1, TP.HCM", - "icon": "📍" - }, - "phone": { - "label": "Điện thoại", - "value": "+84 28 1234 5678", - "icon": "📞" - }, - "email": { - "label": "Email", - "value": "info@visaservice.com", - "icon": "✉️" - }, - "hours": { - "label": "Giờ làm việc", - "value": "Thứ 2 - Thứ 6: 8:00 - 18:00\nThứ 7: 8:00 - 12:00", - "icon": "🕒" - } - }, - "offices": [ - { - "name": "Văn Phòng TP.HCM", - "address": "123 Nguyễn Huệ, Quận 1, TP.HCM", - "phone": "+84 28 1234 5678", - "email": "hcm@visaservice.com" - }, - { - "name": "Văn Phòng Hà Nội", - "address": "456 Hoàn Kiếm, Hà Nội", - "phone": "+84 24 1234 5678", - "email": "hanoi@visaservice.com" - }, - { - "name": "Văn Phòng Đà Nẵng", - "address": "789 Hải Châu, Đà Nẵng", - "phone": "+84 236 1234 567", - "email": "danang@visaservice.com" - } - ], - "formFields": [ - { - "name": "fullName", - "label": "Họ và tên", - "type": "text", - "required": true, - "placeholder": "Nhập họ và tên của bạn" - }, - { - "name": "email", - "label": "Email", - "type": "email", - "required": true, - "placeholder": "example@email.com" - }, - { - "name": "phone", - "label": "Số điện thoại", - "type": "tel", - "required": true, - "placeholder": "+84 xxx xxx xxx" - }, - { - "name": "service", - "label": "Dịch vụ quan tâm", - "type": "select", - "required": true, - "options": [ - "Tư vấn visa", - "Chuẩn bị hồ sơ", - "Đặt vé máy bay", - "Tour trọn gói", - "Khác" - ] - }, - { - "name": "message", - "label": "Tin nhắn", - "type": "textarea", - "required": false, - "placeholder": "Mô tả chi tiết nhu cầu của bạn..." - } - ] -} diff --git a/app/contact/page.tsx b/app/contact/page.tsx index cd1f004..7001ebe 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -1,237 +1,13 @@ -"use client"; - -import { useState, useEffect, FormEvent } from "react"; -import { ContactData } from "./types"; -import Breadcrumb from "../components/Breadcrumb"; - -export default function ContactPage() { - const [contactData, setContactData] = useState(null); - const [loading, setLoading] = useState(true); - const [formData, setFormData] = useState({ - name: "", - email: "", - phone: "", - address: "", - date: "", - message: "", - }); - const [isSubmitting, setIsSubmitting] = useState(false); - const [submitStatus, setSubmitStatus] = useState<{ - type: "success" | "error" | null; - message: string; - }>({ type: null, message: "" }); - - const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001"; - - // Fetch contact data from CMS - useEffect(() => { - const fetchContactData = async () => { - try { - const response = await fetch(`${apiUrl}/api/contact`, { cache: 'no-store' }); - if (response.ok) { - const data = await response.json(); - setContactData(data); - } - } catch (error) { - console.error("Error fetching contact data:", error); - } finally { - setLoading(false); - } - }; - - fetchContactData(); - }, [apiUrl]); - - const handleChange = ( - e: React.ChangeEvent - ) => { - const { name, value } = e.target; - setFormData((prev) => ({ ...prev, [name]: value })); - }; - - const handleSubmit = async (e: FormEvent) => { - e.preventDefault(); - setIsSubmitting(true); - setSubmitStatus({ type: null, message: "" }); - - try { - const response = await fetch(`${apiUrl}/api/contact/submit`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(formData), - }); - - const data = await response.json(); - - if (response.ok && data.success) { - setSubmitStatus({ - type: "success", - message: data.message || "Thank you! We will contact you soon.", - }); - setFormData({ - name: "", - email: "", - phone: "", - address: "", - date: "", - message: "", - }); - } else { - setSubmitStatus({ - type: "error", - message: data.error || "Something went wrong. Please try again.", - }); - } - } catch (error) { - console.error("Submit error:", error); - setSubmitStatus({ - type: "error", - message: "Network error. Please check your connection and try again.", - }); - } finally { - setIsSubmitting(false); - } - }; - - if (loading) { - return ( -
-

Loading...

-
- ); - } - - // Default values if API fails - const hero = contactData?.hero || { title: "Contact Us", backgroundImage: "/assets/img/inner-page/breadcrumb.jpg" }; - const contactCards = contactData?.contactCards || []; - const map = contactData?.map || { embedUrl: "" }; - const form = contactData?.form || { - heading: "Send Us Message", - description: "Have questions? Send us a message today.", - fields: [], - submitButton: { text: "SEND MESSAGE", icon: "fa-solid fa-arrow-right", buttonClass: "theme-btn style-2" } - }; +import ContactHero from "../components/contact/ContactHero"; +import DepartmentDirectory from "../components/contact/DepartmentDirectory"; +import ContactSplit from "../components/contact/ContactSplit"; +export default function ContactUsPage() { return ( - <> - {/* Breadcrumb-Wrapper Section Start */} - - - {/* Contact Icon Section Start */} -
-
-
- {contactCards.map((card, index) => ( -
-
-
- -
-
-

{card.title}

-
- {card.content.map((line, i) => ( - - {card.type === "email" ? ( - {line} - ) : card.type === "phone" ? ( - {line} - ) : ( - line - )} - {i < card.content.length - 1 &&
} - - ))} -
-
-
-
- ))} -
-
-
- - {/* Contact Section Start */} -
-
-
-
{form.heading}
-

"{form.description}"

- - {/* Status Message */} - {submitStatus.type && ( -
- {submitStatus.message} -
- )} - -
-
-
-
- {form.fields.map((field, index) => ( -
-
- {field.label}{field.required && " *"} - {field.type === "textarea" ? ( - - ) : ( - - )} -
-
- ))} -
- -
-
-
-
-
-
-
-
- - {/* Map Section Start */} - {map.embedUrl && ( -
-
-
- -
-
-
- )} - +
+ + + +
); } diff --git a/app/contact/types.ts b/app/contact/types.ts deleted file mode 100644 index 8bdffd5..0000000 --- a/app/contact/types.ts +++ /dev/null @@ -1,44 +0,0 @@ -export interface ContactCard { - type: string; - title: string; - content: string[]; - iconType: string; -} - -export interface ContactHero { - title: string; - backgroundImage: string; -} - -export interface ContactMap { - embedUrl: string; -} - -export interface ContactFormField { - name: string; - label: string; - type: string; - placeholder: string; - required: boolean; - colClass: string; -} - -export interface ContactSubmitButton { - text: string; - icon: string; - buttonClass: string; -} - -export interface ContactForm { - heading: string; - description: string; - fields: ContactFormField[]; - submitButton: ContactSubmitButton; -} - -export interface ContactData { - hero: ContactHero; - contactCards: ContactCard[]; - map: ContactMap; - form: ContactForm; -} diff --git a/app/contactus/contact.css b/app/contactus/contact.css deleted file mode 100644 index 567d422..0000000 --- a/app/contactus/contact.css +++ /dev/null @@ -1,159 +0,0 @@ -/* ============================================ - Contact Page — Scoped Styles - Scope: .contact-page - ============================================ */ - -@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap'); - -/* Reset heading override từ main.css */ -.contact-page h1, -.contact-page h2, -.contact-page h3, -.contact-page h4 { - font-size: unset; - font-weight: unset; - line-height: unset; - margin: 0; - padding: 0; -} - -/* Typography */ -.contact-page .contact-heading { - font-family: 'Playfair Display', serif; - font-size: clamp(2rem, 4vw, 3.5rem); - font-weight: 700; - line-height: 1.15; -} - -.contact-page .contact-card-title { - font-family: 'Playfair Display', serif; - font-size: 1.1rem; - font-weight: 700; - line-height: 1.3; -} - -.contact-page .contact-form-title { - font-family: 'Playfair Display', serif; - font-size: 1.75rem; - font-weight: 700; - line-height: 1.2; -} - -.contact-page .contact-pin-title { - font-family: 'Playfair Display', serif; - font-size: 0.875rem; - font-weight: 700; -} - -/* Color token: --primary */ -.contact-page .text-primary, -.contact-page .hover\:text-primary:hover { color: rgb(38, 60, 111); } - -.contact-page .bg-primary { background-color: rgb(38, 60, 111) !important; } - -.contact-page .border-primary { border-color: rgb(38, 60, 111); } - -.contact-page .focus\:border-primary:focus { border-color: rgb(38, 60, 111); } -.contact-page .focus\:ring-primary:focus { --tw-ring-color: rgb(38, 60, 111); } - -/* group-hover bg-primary */ -.contact-page .group:hover .group-hover\:bg-primary { background-color: rgb(38, 60, 111) !important; } -.contact-page .group:hover .group-hover\:text-white { color: #fff; } - -/* Color token: --dark */ -.contact-page .text-dark { color: #111827; } - -/* bg-white/5, /10 */ -.contact-page .bg-white\/5 { background-color: rgba(255,255,255,0.05); } -.contact-page .bg-white\/10 { background-color: rgba(255,255,255,0.10); } - -/* border-white/20, /50 */ -.contact-page .border-white\/20 { border-color: rgba(255,255,255,0.20); } -.contact-page .border-white\/50 { border-color: rgba(255,255,255,0.50); } - -/* text-white/80, /90 */ -.contact-page .text-white\/80 { color: rgba(255,255,255,0.80); } -.contact-page .text-white\/90 { color: rgba(255,255,255,0.90); } - -/* bg-white/95 */ -.contact-page .bg-white\/95 { background-color: rgba(255,255,255,0.95); } - -/* border-t border-white/20 */ -.contact-page .border-white\/20 { border-color: rgba(255,255,255,0.20); } - -/* rounded fixes — main.css có thể reset border-radius */ -.contact-page .rounded-\[16px\] { border-radius: 16px !important; } -.contact-page .rounded-\[24px\] { border-radius: 24px !important; } -.contact-page .rounded-\[12px\] { border-radius: 12px !important; } -.contact-page .rounded-full { border-radius: 9999px !important; } -.contact-page .rounded-\[12px\] { border-radius: 12px !important; } - -/* button reset */ -.contact-page button, -.contact-page input, -.contact-page select, -.contact-page textarea { - font-size: inherit; -} - -/* Send Message button */ -.contact-page .bg-primary.rounded-\[12px\] { - border-radius: 12px !important; - background-color: rgb(38, 60, 111) !important; -} - -.contact-page .bg-primary.rounded-\[12px\]:hover { - background-color: rgba(38, 60, 111, 0.9) !important; -} - -/* Icon color fix */ -.contact-page .text-primary i, -.contact-page i.text-primary, -.contact-page .text-primary svg, -.contact-page svg.text-primary { - color: rgb(38, 60, 111) !important; -} - -/* Icon box bg-blue-50 */ -.contact-page .bg-blue-50 { - background-color: rgb(239, 246, 255) !important; -} - -/* blue-100 border */ -.contact-page .border-blue-100 { - border-color: rgb(219, 234, 254) !important; -} - -/* info box bg-blue-50 text-primary */ -.contact-page .bg-blue-50.rounded-\[12px\] { - background-color: rgb(239, 246, 255) !important; -} - -/* Icon box hover — đổi icon sang trắng khi hover card */ -.contact-page .group:hover .group-hover\:text-white i, -.contact-page .group:hover .group-hover\:text-white svg { - color: #ffffff !important; -} - -/* Form inputs border-radius và placeholder */ -.contact-page input, -.contact-page select, -.contact-page textarea { - border-radius: 12px !important; -} - -.contact-page input::placeholder, -.contact-page textarea::placeholder { - color: #9ca3af !important; -} - -/* contact-form-title size */ -.contact-page .contact-form-title { - font-size: 2rem !important; -} - -/* Consent checkbox alignment */ -.contact-page .custom-checkbox { - margin-top: 2px !important; - flex-shrink: 0; -} diff --git a/app/contactus/page.tsx b/app/contactus/page.tsx deleted file mode 100644 index 8cffc62..0000000 --- a/app/contactus/page.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import "./contact.css"; -import ContactHero from "../components/contactus/ContactHero"; -import DepartmentDirectory from "../components/contactus/DepartmentDirectory"; -import ContactSplit from "../components/contactus/ContactSplit"; - -export default function ContactUsPage() { - return ( -
- - - -
- ); -} diff --git a/app/globals.css b/app/globals.css index 2868526..d360863 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,10 +1,6 @@ @import "tailwindcss"; @import "./components/layout/Header/mobile-menu.css"; @import "./components/layout/Header/header-responsive.css"; -@import "./components/home/home.css"; -@import "./components/about/about.css"; -@import "./components/research/research.css"; -@import "./components/publications/publications.css"; @theme { --color-brand-blue: #1b254b; diff --git a/app/layout.tsx b/app/layout.tsx index eaffd84..ce11f84 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -8,8 +8,8 @@ import MouseCursor from "./components/MouseCursor"; import Script from "next/script"; export const metadata: Metadata = { - title: "H.A.I Learning", - description: "H.A.I Learning", + title: "ULDP", + description: "ULDP", }; import "./globals.css"; diff --git a/public/assets/css/main.css b/public/assets/css/main.css index d286402..a008f28 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -15,26 +15,30 @@ Version: 1.0.0 01. Variables & Mixins 02. Typography 03. Buttons -04. About -05. Animation -06. Brand -07. Contact -08. Cta -09. Faq -10. Feature -11. Footer -12. Header -13. Helping -14. Hero -15. Marquee -16. Meanmenu -17. News -18. Preloader -19. Pricing -20. Section -21. Service -22. Testimonial -23. Visa +04. About + +05. Accreditation + +06. Animation +07. Brand +08. Contact + +09. Cta +10. Faq +11. Feature +12. Footer +13. Header +14. Helping +15. Hero +16 Home + +17. Marquee +18. Meanmenu +19. News +20. Preloader +21. Pricing +22. Publication + +23. Research + +24. Section +25. Service +26. Testimonial +27. Visa -------------------------------------------------------------- @@ -287,254 +291,975 @@ span { margin: 0px; } -.about-wrapper .about-image { - max-width: 375px; - position: relative; - z-index: 9; +/* ============================================================ + ABOUT PAGE + ============================================================ */ + +.about-hero { + padding: 80px 0; + background-color: #f8fbff; + position: relative; + overflow: hidden; } -@media (max-width: 1399px) { - .about-wrapper .about-image { - max-width: initial; - } + +.about-hero__content { + display: flex; + flex-direction: column; + gap: 1.5rem; } -.about-wrapper .about-image img { - width: 100%; - height: 100%; - border-radius: 16px; + +.about-hero__badge { + display: inline-flex; + align-items: center; + gap: 0.75rem; } -.about-wrapper .about-image .about-image-2 { - position: absolute; - bottom: -170px; - right: -238px; + +.about-hero__badge-line { + display: inline-block; + width: 2rem; + height: 2px; + background: #1b254b; } -@media (max-width: 1399px) { - .about-wrapper .about-image .about-image-2 { - max-width: 250px; - right: 0; - bottom: 0; - } + +.about-hero__badge-text { + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + color: #6b7280; } -.about-wrapper .about-image .bg-shape { - position: absolute; - z-index: -1; - top: 0; - left: 0; - right: 0; + +.about-hero__title { + font-size: clamp(2rem, 4vw, 3.5rem); + font-weight: 700; + color: #1b254b; + line-height: 1.15; + margin: 0; } -@media (max-width: 1399px) { - .about-wrapper .about-image .bg-shape { - display: none; - } + +.about-hero__title span { + color: var(--theme, #E13833); } -.about-wrapper .about-image .bg-shape img { - width: initial; - height: initial; + +.about-hero__desc { + font-size: 1.05rem; + color: #6b7280; + line-height: 1.7; + max-width: 36rem; + margin: 0; } -.about-wrapper .about-image .plane-shape { - position: absolute; - left: -38px; - bottom: -163px; - z-index: -1; + +.about-hero__actions { + padding-top: 0.5rem; } -@media (max-width: 1399px) { - .about-wrapper .about-image .plane-shape { - display: none; - } + +.about-hero__btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.875rem 2rem; + background-color: #1b254b; + color: #ffffff; + font-weight: 600; + font-size: 1rem; + border-radius: 0.375rem; + border: none; + cursor: pointer; + box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); + transition: background-color 0.2s ease; } -.about-wrapper .about-image .plane-shape img { - width: initial; - height: initial; + +.about-hero__btn:hover { + background-color: #151c3a; } -.about-wrapper .about-image .top-shape { - position: absolute; - right: -200px; - top: 0; + +/* Image side */ +.about-hero__image-wrap { + position: relative; + border-radius: 1rem; + overflow: visible; } -@media (max-width: 1399px) { - .about-wrapper .about-image .top-shape { - display: none; - } + +.about-hero__image { + width: 100%; + height: auto; + border-radius: 1rem; + object-fit: cover; + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12); + display: block; } -.about-wrapper .about-image .top-shape img { - width: initial; - height: initial; + +/* Badge card overlay */ +.about-hero__badge-card { + position: absolute; + bottom: -1.5rem; + left: -1.5rem; + background: #ffffff; + padding: 1.25rem 1.5rem; + border-radius: 0.75rem; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); + border: 1px solid #e5e7eb; + display: flex; + align-items: center; + gap: 1rem; } -.about-wrapper .about-content .text { - margin-top: 24px; - padding-left: 40px; - border-left: 3px solid var(--border-2); - margin-bottom: 30px; + +@media (max-width: 767px) { + .about-hero__badge-card { + display: none; + } } -@media (max-width: 1399px) { - .about-wrapper .about-content .text { - border-left: none; - padding-left: 0; - } + +.about-hero__badge-icon { + width: 3rem; + height: 3rem; + background: #f8fbff; + border-radius: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + color: #1b254b; + flex-shrink: 0; } -.about-wrapper .about-content .about-item { - display: flex; - align-items: center; - justify-content: space-between; - border-top: 1px solid rgba(203, 204, 207, 0.24); - padding-top: 24px; + +.about-hero__badge-value { + font-size: 1.5rem; + font-weight: 700; + color: #1b254b; + margin: 0; } + +.about-hero__badge-label { + font-size: 0.8rem; + color: #6b7280; + margin: 0; +} + @media (max-width: 991px) { - .about-wrapper .about-content .about-item { - flex-wrap: wrap; - gap: 30px; - } -} -.about-wrapper .about-content .about-item .content span { - font-size: 20px; - font-weight: 500; - color: var(--header); - display: inline-block; - margin-bottom: 5px; -} -.about-wrapper .about-content .about-item .content span img { - margin-right: 8px; -} -.about-wrapper .about-content .list { - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding: 24px 0 32px; - margin-bottom: 48px; -} -@media (max-width: 1399px) { - .about-wrapper .about-content .list { - margin-bottom: 30px; - padding: 24px 0 30px; - } -} -.about-wrapper .about-content .list li:not(:last-child) { - margin-bottom: 10px; -} -@media (max-width: 1399px) { - .about-wrapper .about-content .list li { - font-size: 14px; - } -} -.about-wrapper .about-content .list li i { - color: var(--theme-2); - margin-right: 8px; + .about-hero { + padding: 80px 0 60px; + } + + .about-hero__image-wrap { + margin-top: 3rem; + } } -.about-section { - position: relative; - z-index: 9; -} -.about-section .top-shape { - position: absolute; - right: 0; - top: -50px; - z-index: -1; -} -@media (max-width: 1399px) { - .about-section .top-shape { - display: none; - } +/* ------------------------------------------------------------ + Mission & Values In About Page + ------------------------------------------------------------ */ +.about-mission { + padding: 80px 0; + background-color: #f8f8f9; + border-top: 1px solid #e5e7eb; } -.about-wrapper-3 .about-content .text { - margin-top: 20px; - max-width: 616px; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 24px; - margin-bottom: 30px; +.about-mission__header { + max-width: 48rem; + margin: 0 auto 4rem; } -.about-wrapper-3 .about-content .about-list-item { - display: flex; - gap: 32px; + +.about-mission__badge { + display: inline-flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1rem; } -@media (max-width: 1399px) { - .about-wrapper-3 .about-content .about-list-item { - flex-wrap: wrap; - gap: 25px; - } + +.about-mission__badge-line { + display: inline-block; + width: 2rem; + height: 2px; + background: #E13833; } -.about-wrapper-3 .about-content .about-list-item .loading-box { - height: 256px; - width: 214px; - border-radius: 16px; - position: relative; - text-align: center; + +.about-mission__badge-text { + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + color: #6b7280; } -.about-wrapper-3 .about-content .about-list-item .loading-box .loading-boxs { - height: 200px; - width: 200px; - display: flex; - align-items: center; - justify-content: center; - background: #0a4ebd; - border-radius: 16px; + +.about-mission__title { + font-size: clamp(1.75rem, 3vw, 2.25rem); + font-weight: 700; + color: #1b254b; + margin-bottom: 1rem; } -.about-wrapper-3 .about-content .about-list-item .loading-box .loading-boxs .circle-bar { - position: relative; + +.about-mission__subtitle { + font-size: 1.05rem; + color: #6b7280; + line-height: 1.7; + margin: 0; } -.about-wrapper-3 .about-content .about-list-item .loading-box .loading-boxs .circle-bar strong { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 28px; - font-weight: bold; - color: var(--white); + +.about-mission__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; } -.about-wrapper-3 .about-content .about-list-item .loading-box h6 { - color: var(--white); - font-weight: 500; - font-size: 14px; + +@media (max-width: 991px) { + .about-mission__grid { + grid-template-columns: 1fr; + } } -.about-wrapper-3 .about-content .about-list-item .list-item .list { - margin-bottom: 48px; + +.about-mission__card { + background: #ffffff; + padding: 2rem; + border-radius: 0.75rem; + border: 1px solid #e5e7eb; + box-shadow: 0 1px 4px rgba(0,0,0,0.04); + transition: box-shadow 0.2s ease; } -.about-wrapper-3 .about-content .about-list-item .list-item .list li { - font-size: 18px; - font-weight: 500; - color: var(--header); - font-family: "Space Grotesk", serif; + +.about-mission__card:hover { + box-shadow: 0 8px 24px rgba(0,0,0,0.08); } -@media (max-width: 1399px) { - .about-wrapper-3 .about-content .about-list-item .list-item .list li { - font-size: 16px; - } + +.about-mission__icon-wrap { + width: 3.5rem; + height: 3.5rem; + background: #f8fbff; + border-radius: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + color: #1b254b; + margin-bottom: 1.5rem; + border-top: 4px solid transparent; + transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } -.about-wrapper-3 .about-content .about-list-item .list-item .list li:not(:last-child) { - margin-bottom: 15px; + +.about-mission__card:hover .about-mission__icon-wrap { + background-color: #1b254b; + color: #ffffff; + border-top-color: #E13833; } -.about-wrapper-3 .about-content .about-list-item .list-item .list li i { - margin-right: 8px; - color: var(--theme-2); + +.about-mission__card-title { + font-size: 1.125rem; + font-weight: 700; + color: #1b254b; + margin-bottom: 0.75rem; } -.about-wrapper-3 .about-image img { - width: 100%; - height: 100%; - border-radius: 8px; + +.about-mission__card-desc { + font-size: 0.95rem; + color: #6b7280; + line-height: 1.7; + margin: 0; } -.about-wrapper-3 .about-image.tp-clip-anim { - width: 100%; - display: grid; - align-items: center; - justify-items: center; - overflow: hidden; - position: relative; + +/* ------------------------------------------------------------ + Why Paris In About Page + ------------------------------------------------------------ */ +.why-paris { + padding: 80px 0; + background: #ffffff; } -.about-wrapper-3 .about-image.tp-clip-anim .tp-anim-img { - opacity: 0; - width: 100%; - height: 100%; + +.why-paris__image-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; } -.about-wrapper-3 .about-image.tp-clip-anim .mask { - background-size: cover; - background-position: center; - transform: scale(1.005); + +.why-paris__image-col { + display: flex; + flex-direction: column; + gap: 1rem; } -.about-wrapper-3 .about-image.tp-clip-anim > * { - grid-area: 1/1/2/2; - width: 100%; - height: 100%; - max-height: 100%; + +.why-paris__image-col--offset { + padding-top: 2rem; } +.why-paris__img { + width: 100%; + object-fit: cover; + border-radius: 0.75rem; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + display: block; +} + +.why-paris__img--short { height: 12rem; } +.why-paris__img--tall { height: 16rem; } + +.why-paris__content { + display: flex; + flex-direction: column; + gap: 1.25rem; + padding-left: 2rem; +} + +@media (max-width: 991px) { + .why-paris__content { + padding-left: 0; + margin-bottom: 2.5rem; + } +} + +.why-paris__title { + font-size: clamp(1.75rem, 3vw, 2.25rem); + font-weight: 700; + color: #1b254b; + margin: 0; +} + +.why-paris__desc { + font-size: 1.05rem; + color: #6b7280; + line-height: 1.7; + margin: 0; +} + +.why-paris__list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.why-paris__list-item { + display: flex; + align-items: flex-start; + gap: 0.75rem; + color: #1b254b; + font-size: 0.95rem; +} + +.why-paris__check { + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; + background: #f8fbff; + display: flex; + align-items: center; + justify-content: center; + color: #1b254b; + font-size: 0.65rem; + flex-shrink: 0; + margin-top: 2px; +} + +.why-paris__btn { + display: inline-block; + margin-top: 0.5rem; + padding: 0.625rem 1.5rem; + background: #f8fbff; + color: #1b254b; + font-weight: 600; + font-size: 0.95rem; + border-radius: 0.375rem; + border: 1px solid #e5e7eb; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.why-paris__btn:hover { + background-color: #e5e7eb; +} + +/* ------------------------------------------------------------ + Leadership Message In About Page + ------------------------------------------------------------ */ +.about-message { + padding: 80px 0; + background: #ffffff; +} + +.about-message__header { + margin-bottom: 2rem; +} + +.about-message__title { + font-size: clamp(1.75rem, 3vw, 2.5rem); + font-weight: 700; + color: #1b254b; + margin-bottom: 1rem; +} + +.about-message__divider { + width: 5rem; + height: 4px; + background: #E13833; + border-radius: 999px; +} + +.about-message__body p { + color: #6b7280; + line-height: 1.8; + margin-bottom: 1.25rem; +} + +.about-message__quote { + font-size: 1.2rem; + font-weight: 500; + color: #1b254b !important; + line-height: 1.7; +} + +.about-message__author { + display: flex; + align-items: center; + gap: 1.25rem; + margin-top: 2rem; + padding: 1.5rem; + background: #f8f8f9; + border-radius: 1rem; + border: 1px solid #e5e7eb; +} + +.about-message__avatar { + width: 5rem; + height: 5rem; + border-radius: 50%; + overflow: hidden; + border: 2px solid #E13833; + flex-shrink: 0; +} + +.about-message__avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.about-message__author-name { + font-size: 1.1rem; + font-weight: 700; + color: #1b254b; + margin: 0 0 0.25rem; +} + +.about-message__author-role { + font-size: 0.875rem; + color: #E13833; + font-weight: 500; + margin: 0; +} + +.about-message__quote-icon { + font-size: 3rem; + color: #1b254b; + opacity: 0.15; + margin-left: auto; +} + +/* Sidebar */ +.about-message__sidebar { + display: flex; + flex-direction: column; + gap: 1.25rem; + position: sticky; + top: 7rem; +} + +.about-message__sidebar-card { + background: #f8f8f9; + padding: 2rem; + border-radius: 1.5rem; + border: 1px solid #e5e7eb; +} + +.about-message__sidebar-card h3 { + font-size: 1.1rem; + font-weight: 700; + color: #1b254b; + margin-bottom: 0.75rem; +} + +.about-message__sidebar-card p { + font-size: 0.875rem; + color: #6b7280; + margin-bottom: 1.25rem; +} + +.about-message__sidebar-card--primary { + background: #1b254b; +} + +.about-message__sidebar-card--primary h3, +.about-message__sidebar-card--primary p { + color: #ffffff; +} + +.about-message__sidebar-card--primary p { + color: rgba(255,255,255,0.75); +} + +.about-message__sidebar-link { + display: inline-flex; + align-items: center; + justify-content: space-between; + width: 100%; + background: #ffffff; + color: #1b254b; + padding: 0.75rem 1.5rem; + border-radius: 999px; + font-weight: 500; + font-size: 0.9rem; + text-decoration: none; + transition: background 0.2s; +} + +.about-message__sidebar-link:hover { background: #f3f4f6; } + +.about-message__sidebar-icon { + width: 3rem; + height: 3rem; + background: #ffffff; + border-radius: 0.75rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + color: #1b254b; + margin-bottom: 1rem; + box-shadow: 0 1px 4px rgba(0,0,0,0.08); +} + +.about-message__sidebar-text-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: #1b254b; + font-weight: 500; + font-size: 0.9rem; + text-decoration: none; +} + +.about-message__sidebar-text-link:hover { text-decoration: underline; } + +.about-message__sidebar-outline-link { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + border: 2px solid #1b254b; + color: #1b254b; + padding: 0.75rem 1.5rem; + border-radius: 999px; + font-weight: 500; + font-size: 0.9rem; + text-decoration: none; + transition: all 0.2s; +} + +.about-message__sidebar-outline-link:hover { + background: #1b254b; + color: #ffffff; +} + +/* ------------------------------------------------------------ + Leadership Board In About Page + ------------------------------------------------------------ */ +.about-leadership { + padding: 80px 0; + background: #f8f8f9; +} + +.about-leadership__header { + margin-bottom: 3rem; +} + +.about-leadership__title { + font-size: clamp(1.75rem, 3vw, 2.25rem); + font-weight: 700; + color: #1b254b; + margin-bottom: 0.75rem; +} + +.about-leadership__subtitle { + color: #6b7280; + font-size: 1.05rem; + margin: 0; +} + +.about-leadership__grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; +} + +@media (max-width: 991px) { + .about-leadership__grid { grid-template-columns: repeat(2, 1fr); } +} + +@media (max-width: 575px) { + .about-leadership__grid { grid-template-columns: 1fr; } +} + +.about-leadership__card { + background: #ffffff; + border-radius: 0.75rem; + border: 1px solid #e5e7eb; + overflow: hidden; + transition: box-shadow 0.2s; +} + +.about-leadership__card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); } + +.about-leadership__photo-wrap { + height: 16rem; + overflow: hidden; + background: #f3f4f6; +} + +.about-leadership__photo { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; +} + +.about-leadership__card:hover .about-leadership__photo { transform: scale(1.05); } + +.about-leadership__info { + padding: 1.5rem; + text-align: center; +} + +.about-leadership__name { + font-size: 1rem; + font-weight: 700; + color: #1b254b; + margin-bottom: 0.25rem; +} + +.about-leadership__role { + font-size: 0.875rem; + color: #E13833; + font-weight: 500; + margin-bottom: 0.75rem; +} + +.about-leadership__socials { + display: flex; + justify-content: center; + gap: 0.75rem; +} + +.about-leadership__social-link { + color: #6b7280; + font-size: 1rem; + text-decoration: none; + transition: color 0.2s; +} + +.about-leadership__social-link:hover { color: #1b254b; } + +/* ------------------------------------------------------------ + Campus In About Page + ------------------------------------------------------------ */ +.about-campus { + padding: 80px 0; + background: #f8f8f9; +} + +.about-campus__header { + margin-bottom: 3rem; +} + +.about-campus__title { + font-size: clamp(1.75rem, 3vw, 2.25rem); + font-weight: 700; + color: #1b254b; + margin-bottom: 0.75rem; +} + +.about-campus__subtitle { + color: #6b7280; + max-width: 40rem; + margin: 0 auto; +} + +.about-campus__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; +} + +@media (max-width: 991px) { + .about-campus__grid { grid-template-columns: 1fr; } +} + +.about-campus__card { + background: #ffffff; + border-radius: 1.5rem; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0,0,0,0.06); + transition: box-shadow 0.2s; +} + +.about-campus__card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.1); } + +.about-campus__img-wrap { + height: 12rem; + overflow: hidden; +} + +.about-campus__img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; +} + +.about-campus__card:hover .about-campus__img { transform: scale(1.05); } + +.about-campus__body { + padding: 2rem; +} + +.about-campus__tag { + display: inline-block; + padding: 0.2rem 0.75rem; + border-radius: 999px; + font-size: 0.75rem; + font-weight: 700; + margin-bottom: 1rem; +} + +.about-campus__tag--blue { background: #eff6ff; color: #1b254b; } +.about-campus__tag--yellow { background: #fefce8; color: #854d0e; } +.about-campus__tag--green { background: #f0fdf4; color: #166534; } + +.about-campus__card-title { + font-size: 1.1rem; + font-weight: 700; + color: #1b254b; + margin-bottom: 0.75rem; +} + +.about-campus__card-desc { + font-size: 0.875rem; + color: #6b7280; + line-height: 1.6; + margin-bottom: 1.5rem; +} + +.about-campus__link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: #1b254b; + font-weight: 500; + font-size: 0.875rem; + text-decoration: none; + transition: gap 0.2s; +} + +.about-campus__link:hover { gap: 0.75rem; } + +/* ------------------------------------------------------------ + History Timeline In About Page + ------------------------------------------------------------ */ +.about-timeline { + padding: 80px 0; + background: #1b254b; + color: #ffffff; +} + +.about-timeline__header { margin-bottom: 3rem; } + +.about-timeline__title { + font-size: clamp(1.75rem, 3vw, 2.5rem); + font-weight: 700; + color: #ffffff; + margin-bottom: 0.75rem; +} + +.about-timeline__subtitle { color: rgba(255,255,255,0.65); font-size: 1rem; margin: 0; } + +.about-timeline__track { + max-width: 44rem; + margin: 0 auto; + position: relative; + padding: 1rem 0; +} + +/* Vertical line chạy giữa track */ +.about-timeline__line { + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 2px; + margin-left: -1px; + background: rgba(100,160,255,0.3); +} + +.about-timeline__item { + display: flex; + margin-bottom: 3.5rem; + width: 100%; + position: relative; +} + +.about-timeline__item:last-child { margin-bottom: 0; } + +/* Content chiếm nửa trái hoặc phải */ +.about-timeline__content { + width: calc(50% - 1.5rem); +} + +/* Dot nằm absolute giữa line */ +.about-timeline__dot-wrap { + position: absolute; + left: 50%; + top: 0.3rem; + transform: translateX(-50%); + z-index: 2; + display: flex; + align-items: center; + justify-content: center; +} + +/* Spacer chiếm nửa còn lại */ +.about-timeline__spacer { + width: calc(50% - 1.5rem); +} + +/* Left: content bên trái, text align right */ +.about-timeline__item--left .about-timeline__content { + text-align: right; + order: 1; + margin-right: 3rem; +} +.about-timeline__item--left .about-timeline__dot-wrap { order: 2; } +.about-timeline__item--left .about-timeline__spacer { order: 3; } + +/* Right: spacer bên trái, content bên phải */ +.about-timeline__item--right .about-timeline__spacer { order: 1; } +.about-timeline__item--right .about-timeline__dot-wrap { order: 2; } +.about-timeline__item--right .about-timeline__content { + text-align: left; + order: 3; + margin-left: 3rem; +} + +.about-timeline__dot { + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; + background: transparent; + border: 2px solid #74b3ff; + box-shadow: 0 0 0 4px rgba(116,179,255,0.15); + flex-shrink: 0; +} + +.about-timeline__year { + font-size: 1.75rem; + font-weight: 700; + color: #ffffff; + margin-bottom: 0.25rem; + line-height: 1; +} + +.about-timeline__event { + font-size: 0.95rem; + font-weight: 600; + color: #74b3ff; + margin-bottom: 0.5rem; +} + +.about-timeline__desc { + font-size: 0.875rem; + color: rgba(255,255,255,0.65); + line-height: 1.6; + margin: 0; + max-width: 18rem; +} + +.about-timeline__item--left .about-timeline__desc { margin-left: auto; } +.about-timeline__item--right .about-timeline__desc { margin-right: auto; } + +@media (max-width: 767px) { + .about-timeline__line { left: 0.75rem; } + .about-timeline__item { flex-direction: column; align-items: flex-start; padding-left: 2.5rem; } + .about-timeline__item--left .about-timeline__content, + .about-timeline__item--right .about-timeline__content { text-align: left; padding: 0; order: 2; } + .about-timeline__item--left .about-timeline__desc, + .about-timeline__item--right .about-timeline__desc { margin: 0; max-width: 100%; } + .about-timeline__dot-wrap { position: absolute; left: 0; top: 0.25rem; order: 1; } + .about-timeline__spacer { display: none; } +} +/* +---------------------------------------------------------- + End About Page +---------------------------------------------------------- +*/ + +/* +----------------------------------------------- + Accreditation Page +----------------------------------------------- +*/ + +/* Typography — dùng div thay h1/h2/h3 */ +.accreditation-page .acc-heading { + font-size: clamp(2.5rem, 5vw, 3.75rem); + line-height: 1.15; +} + +.accreditation-page .acc-section-title { + font-size: 1.875rem; + line-height: 1.3; +} + +.accreditation-page .acc-card-title { + font-size: 1.25rem; + line-height: 1.4; +} + +/* ---------- Color tokens ---------- */ +.accreditation-page .text-brand-blue { color: #1b254b; } +.accreditation-page .bg-brand-blue { background-color: #1b254b; } +.accreditation-page .bg-brand-light { background-color: #f8fbff; } +.accreditation-page .bg-brand-accent { background-color: #3b82f6; } +.accreditation-page .text-brand-accent { color: #3b82f6; } +.accreditation-page .text-ui-text { color: #111827; } +.accreditation-page .text-ui-muted { color: #6b7280; } +.accreditation-page .bg-ui-bg { background-color: #f9fafb; } +.accreditation-page .border-ui-border { border-color: #e5e7eb; } + +/* ---------- Shadow tokens ---------- */ +.accreditation-page .shadow-soft { + box-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04); +} +.accreditation-page .shadow-hover, +.accreditation-page .hover\:shadow-hover:hover { + box-shadow: 0 8px 24px rgb(0 0 0 / 0.1); +} + +/* ---------- Border radius fix ---------- */ +.accreditation-page .rounded-\[24px\] { border-radius: 24px !important; } +.accreditation-page .rounded-lg { border-radius: 8px !important; } +.accreditation-page .rounded-md { border-radius: 6px !important; } + +/* Mesh background gradient */ +.accreditation-page .mesh-bg { + background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 40%, #ffffff 100%); +} + +/* rounded-xl fix */ +.accreditation-page .rounded-xl { border-radius: 12px !important; } +/* +----------------------------------------------- + End Accreditation Page +----------------------------------------------- +*/ + + @-webkit-keyframes rippleOne { 70% { -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0); @@ -1422,339 +2147,172 @@ span { opacity: 1; } -.contact-wrapper-2 { - display: flex; - align-items: center; - gap: 325px; -} -@media (max-width: 1399px) { - .contact-wrapper-2 { - flex-wrap: wrap; - gap: 30px; - } -} -.contact-wrapper-2 .contact-from-box { - padding: 60px 48px; - background-color: var(--theme-2); - border-radius: 24px; - width: 644px; -} -@media (max-width: 1399px) { - .contact-wrapper-2 .contact-from-box { - padding: 30px; - } -} -.contact-wrapper-2 .contact-from-box h3 { - color: var(--white); - font-size: 32px; - text-transform: uppercase; - margin-bottom: 30px; - text-align: center; -} -@media (max-width: 1399px) { - .contact-wrapper-2 .contact-from-box h3 { - font-size: 25px; - margin-bottom: 20px; - } -} -@media (max-width: 575px) { - .contact-wrapper-2 .contact-from-box h3 { - font-size: 20px; - } -} -.contact-wrapper-2 .contact-from-box .form-clt input, .contact-wrapper-2 .contact-from-box .form-clt textarea { - width: 100%; - outline: none; - border: none; - background: transparent; - padding: 16px 0; - font-weight: 400; - font-size: 16px; - color: rgba(255, 255, 255, 0.7); - line-height: 1; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); -} -.contact-wrapper-2 .contact-from-box .form-clt input::placeholder, .contact-wrapper-2 .contact-from-box .form-clt textarea::placeholder { - color: rgba(255, 255, 255, 0.7); -} -.contact-wrapper-2 .contact-from-box .form-clt .nice-select { - width: 100% !important; +/* +----------------------------------------------- + Contact Page +----------------------------------------------- +*/ + +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap'); + +/* Reset heading override từ main.css */ +.contact-page h1, +.contact-page h2, +.contact-page h3, +.contact-page h4 { + font-size: unset; + font-weight: unset; + line-height: unset; + margin: 0; padding: 0; - padding-bottom: 10px; - padding-top: 20px; - font-size: 16px; - border-radius: 0; - background-color: transparent; - border: none; - box-shadow: none; - font-size: 16px; - color: rgba(255, 255, 255, 0.7); - font-weight: 400; - width: initial; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); -} -.contact-wrapper-2 .contact-from-box .form-clt .nice-select::after { - right: 0; - width: 10px; - height: 8px; - border-bottom: 2px solid transparent; - border-right: 2px solid transparent; - margin-top: 0; - background-color: rgba(255, 255, 255, 0.7); - clip-path: polygon(100% 0, 49% 100%, 0 0); - -webkit-transform: rotate(0eg); - transform: rotate(0deg); - top: 36%; -} -.contact-wrapper-2 .contact-from-box .form-clt .nice-select .list { - width: 100%; - background-color: var(--bg); - top: 60%; - font-size: 16px; - color: var(--header); -} -.contact-wrapper-2 .contact-from-box .form-clt .nice-select .focus { - background-color: transparent; - font-weight: 400; - color: var(--text); -} -.contact-wrapper-2 .contact-from-box .form-clt .nice-select .option { - border: none; -} -.contact-wrapper-2 .contact-from-box .form-clt .nice-select .option:hover { - background-color: transparent; -} -.contact-wrapper-2 .contact-from-box .contact-btn { - margin-top: 48px; - text-align: center; - margin-bottom: 48px; -} -@media (max-width: 1399px) { - .contact-wrapper-2 .contact-from-box .contact-btn { - margin-top: 30px; - margin-bottom: 30px; - } -} -.contact-wrapper-2 .contact-from-box .contact-btn .theme-btn { - color: var(--white); -} -.contact-wrapper-2 .contact-from-box .contact-btn .theme-btn:hover { - border: 1px solid var(--theme); -} -.contact-wrapper-2 .contact-from-box h5 { - font-weight: 500; - color: var(--white); - margin-bottom: 10px; -} -.contact-wrapper-2 .contact-from-box h2 { - font-size: 40px; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 10px; - margin-bottom: 5px; -} -@media (max-width: 1399px) { - .contact-wrapper-2 .contact-from-box h2 { - font-size: 25px; - } -} -@media (max-width: 575px) { - .contact-wrapper-2 .contact-from-box h2 { - font-size: 20px; - } -} -.contact-wrapper-2 .contact-from-box h2 a { - color: var(--white); -} -.contact-wrapper-2 .contact-from-box p { - color: rgba(255, 255, 255, 0.7); -} -.contact-wrapper-2 .video-btn { - width: 88px; - height: 88px; - line-height: 88px; - text-align: center; - background-color: var(--theme); - color: var(--white); - position: relative; - font-size: 16px; - border-radius: 100px; - z-index: 999; - display: inline-block; -} -@media (max-width: 991px) { - .contact-wrapper-2 .video-btn { - margin-left: 30px; - } -} -@media (max-width: 575px) { - .contact-wrapper-2 .video-btn { - width: 70px; - height: 70px; - line-height: 70px; - margin-left: 15px; - } -} -.contact-wrapper-2 .video-btn::before { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - content: ""; - width: 120px; - height: 120px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: rgba(225, 56, 51, 0.24); - border-radius: 100%; - border: 2px solid var(--white); -} -@media (max-width: 575px) { - .contact-wrapper-2 .video-btn::before { - width: 100px; - height: 100px; - } } -.contact-section-2 { - background-attachment: fixed; +/* Typography */ +.contact-page .contact-heading { + font-family: 'Playfair Display', serif; + font-size: clamp(2rem, 4vw, 3.5rem); + font-weight: 700; + line-height: 1.15; } -.contact-from-wrapper { - background-color: var(--bg); - border-radius: 16px; - padding: 48px; -} -@media (max-width: 1399px) { - .contact-from-wrapper { - padding: 30px; - } -} -.contact-from-wrapper .form-clt { - position: relative; -} -.contact-from-wrapper .form-clt span { - color: var(--header); - font-size: 18px; - font-weight: 500; - font-family: "Space Grotesk", serif; - margin-bottom: 10px; - display: inline-block; -} -.contact-from-wrapper .form-clt input, .contact-from-wrapper .form-clt textarea { - width: 100%; - border: none; - outline: none; - background: var(--white); - color: var(--text); - border-radius: 100px; - padding: 18px 20px; -} -@media (max-width: 767px) { - .contact-from-wrapper .form-clt input, .contact-from-wrapper .form-clt textarea { - padding: 14px 20px; - } -} -@media (max-width: 575px) { - .contact-from-wrapper .form-clt input, .contact-from-wrapper .form-clt textarea { - padding: 12px 18px; - } -} -.contact-from-wrapper .form-clt input::placeholder, .contact-from-wrapper .form-clt textarea::placeholder { - color: var(--text); -} -.contact-from-wrapper .form-clt textarea { - padding-bottom: 100px; - resize: none; - border-radius: 40px; -} -.contact-from-wrapper .cheak-list-item { - margin-top: 30px; - margin-bottom: 48px; -} -@media (max-width: 1399px) { - .contact-from-wrapper .cheak-list-item { - margin-bottom: 30px; - } -} -.contact-from-wrapper .cheak-list-item .cheak-list { - display: flex; - align-items: center; - gap: 80px; - margin-bottom: 24px; -} -@media (max-width: 1399px) { - .contact-from-wrapper .cheak-list-item .cheak-list { - flex-wrap: wrap; - gap: 22px; - } -} -.contact-from-wrapper .cheak-list-item .cheak-list .form-check { - flex-basis: 200px; -} -.contact-from-wrapper .cheak-list-item .cheak-list .form-check-label { - font-size: 18px; - color: var(--header); - font-weight: 500; - font-family: "Space Grotesk", serif; -} -.contact-from-wrapper .cheak-list-item .cheak-list .form-check .form-check-input { - float: left; - transform: translateY(0px); - border-radius: 100px; - border: 1px solid var(--text); - background-color: var(--white); -} -.contact-from-wrapper .cheak-list-item .cheak-list .form-check .form-check-input:checked { - background-color: var(--theme-2); - border: 1px solid var(--theme-2); -} -.contact-from-wrapper .theme-btn { - width: 100%; -} -.contact-from-wrapper .theme-btn.style-2 { - width: initial; +.contact-page .contact-card-title { + font-family: 'Playfair Display', serif; + font-size: 1.1rem; + font-weight: 700; + line-height: 1.3; } -.contact-icon-item { - display: flex; - align-items: center; - gap: 24px; - background-color: var(--bg); - border-radius: 16px; - padding: 30px; +.contact-page .contact-form-title { + font-family: 'Playfair Display', serif; + font-size: 1.75rem; + font-weight: 700; + line-height: 1.2; } -@media (max-width: 991px) { - .contact-icon-item { - flex-wrap: wrap; - } + +.contact-page .contact-pin-title { + font-family: 'Playfair Display', serif; + font-size: 0.875rem; + font-weight: 700; } -.contact-icon-item .icon { - width: 64px; - height: 64px; - line-height: 64px; - text-align: center; - border-radius: 100px; - background-color: var(--header); - color: var(--white); - transition: all 0.4s ease-in-out; - font-size: 20px; + +/* Color token: --primary */ +.contact-page .text-primary, +.contact-page .hover\:text-primary:hover { color: rgb(38, 60, 111); } + +.contact-page .bg-primary { background-color: rgb(38, 60, 111) !important; } + +.contact-page .border-primary { border-color: rgb(38, 60, 111); } + +.contact-page .focus\:border-primary:focus { border-color: rgb(38, 60, 111); } +.contact-page .focus\:ring-primary:focus { --tw-ring-color: rgb(38, 60, 111); } + +/* group-hover bg-primary */ +.contact-page .group:hover .group-hover\:bg-primary { background-color: rgb(38, 60, 111) !important; } +.contact-page .group:hover .group-hover\:text-white { color: #fff; } + +/* Color token: --dark */ +.contact-page .text-dark { color: #111827; } + +/* bg-white/5, /10 */ +.contact-page .bg-white\/5 { background-color: rgba(255,255,255,0.05); } +.contact-page .bg-white\/10 { background-color: rgba(255,255,255,0.10); } + +/* border-white/20, /50 */ +.contact-page .border-white\/20 { border-color: rgba(255,255,255,0.20); } +.contact-page .border-white\/50 { border-color: rgba(255,255,255,0.50); } + +/* text-white/80, /90 */ +.contact-page .text-white\/80 { color: rgba(255,255,255,0.80); } +.contact-page .text-white\/90 { color: rgba(255,255,255,0.90); } + +/* bg-white/95 */ +.contact-page .bg-white\/95 { background-color: rgba(255,255,255,0.95); } + +/* border-t border-white/20 */ +.contact-page .border-white\/20 { border-color: rgba(255,255,255,0.20); } + +/* rounded fixes — main.css có thể reset border-radius */ +.contact-page .rounded-\[16px\] { border-radius: 16px !important; } +.contact-page .rounded-\[24px\] { border-radius: 24px !important; } +.contact-page .rounded-\[12px\] { border-radius: 12px !important; } +.contact-page .rounded-full { border-radius: 9999px !important; } +.contact-page .rounded-\[12px\] { border-radius: 12px !important; } + +/* button reset */ +.contact-page button, +.contact-page input, +.contact-page select, +.contact-page textarea { + font-size: inherit; } -.contact-icon-item .content p { - margin-bottom: 5px; + +/* Send Message button */ +.contact-page .bg-primary.rounded-\[12px\] { + border-radius: 12px !important; + background-color: rgb(38, 60, 111) !important; } -.contact-icon-item .content h6 { - font-size: 18px; - font-weight: 500; - line-height: 144%; + +.contact-page .bg-primary.rounded-\[12px\]:hover { + background-color: rgba(38, 60, 111, 0.9) !important; } -.contact-icon-item:hover .icon { - background-color: var(--theme); + +/* Icon color fix */ +.contact-page .text-primary i, +.contact-page i.text-primary, +.contact-page .text-primary svg, +.contact-page svg.text-primary { + color: rgb(38, 60, 111) !important; } +/* Icon box bg-blue-50 */ +.contact-page .bg-blue-50 { + background-color: rgb(239, 246, 255) !important; +} + +/* blue-100 border */ +.contact-page .border-blue-100 { + border-color: rgb(219, 234, 254) !important; +} + +/* info box bg-blue-50 text-primary */ +.contact-page .bg-blue-50.rounded-\[12px\] { + background-color: rgb(239, 246, 255) !important; +} + +/* Icon box hover — đổi icon sang trắng khi hover card */ +.contact-page .group:hover .group-hover\:text-white i, +.contact-page .group:hover .group-hover\:text-white svg { + color: #ffffff !important; +} + +/* Form inputs border-radius và placeholder */ +.contact-page input, +.contact-page select, +.contact-page textarea { + border-radius: 12px !important; +} + +.contact-page input::placeholder, +.contact-page textarea::placeholder { + color: #9ca3af !important; +} + +/* contact-form-title size */ +.contact-page .contact-form-title { + font-size: 2rem !important; +} + +/* Consent checkbox alignment */ +.contact-page .custom-checkbox { + margin-top: 2px !important; + flex-shrink: 0; +} +/* +----------------------------------------------- +End Contact Page +----------------------------------------------- +*/ + .map-items .googpemap iframe { width: 100%; height: 724px; @@ -4248,6 +4806,526 @@ span { color: var(--header); } +/* ============================================================ + HOME PAGE — shared styles + ============================================================ */ + +/* ------------------------------------------------------------ + Hero Section In Home Page + ------------------------------------------------------------ */ +.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 In Home Page + ------------------------------------------------------------ */ +.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 In Home Page + ------------------------------------------------------------ */ +.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; +} +/* +------------------------------------------------------ + End Home Page +------------------------------------------------------ +*/ + .sticky { position: fixed !important; top: 0 !important; @@ -6575,6 +7653,1541 @@ html.lenis, html.lenis body { transform: translateY(-10px); } +/* +--------------------------------------------------------------- + PUBLICATIONS PAGE +--------------------------------------------------------------- +*/ + +/* --- Local CSS Variables (override globals for this page) --- */ +.pub-wrapper { + --pub-blue: #263c6f; + --pub-blue-hover: #1d2e55; + --pub-blue-light: #f0f4f8; + --pub-border: #e5e7eb; + --pub-text: #111827; + --pub-muted: #6b7280; + --pub-bg: #f9fafb; + --pub-accent: #3b82f6; + + background-color: var(--pub-bg); + width: 100%; +} + +/* +--------------------------------------------------------------- + SEARCH HEADER SECTION In Publications Page +--------------------------------------------------------------- +*/ +.pub-wrapper #repo-header { + width: 100%; + background-color: #ffffff; + border-bottom: 1px solid var(--pub-border); + padding-top: 3rem; + padding-bottom: 3rem; +} + +.pub-wrapper #repo-header h1 { + font-size: 2.25rem; + font-weight: 700; + color: var(--pub-text); + letter-spacing: -0.025em; + margin-bottom: 0.5rem; + line-height: 2.5rem; +} + +.pub-wrapper #repo-header p { + color: var(--pub-muted); + font-size: 1.125rem; + margin: 0; +} + +/* Search bar */ +.pub-wrapper .pub-search-bar { + position: relative; + width: 100%; + border-radius: 0.75rem; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); +} + +.pub-wrapper .pub-search-bar input { + display: block; + width: 100%; + padding: 1rem 8rem 1rem 3rem; + border: 1px solid var(--pub-border); + border-radius: 0.75rem; + font-size: 1.125rem; + color: var(--pub-text); + background-color: #ffffff; + outline: none; + transition: border-color 0.2s, box-shadow 0.2s; + box-sizing: border-box; +} + +.pub-wrapper .pub-search-bar input::placeholder { + color: var(--pub-muted); +} + +.pub-wrapper .pub-search-bar input:focus { + border-color: var(--pub-blue); + box-shadow: 0 0 0 2px rgba(38, 60, 111, 0.15); +} + +.pub-wrapper .pub-search-bar .pub-search-icon { + position: absolute; + top: 50%; + left: 1rem; + transform: translateY(-50%); + color: var(--pub-muted); + font-size: 1.125rem; + pointer-events: none; +} + +.pub-wrapper .pub-search-bar .pub-search-btn-wrap { + position: absolute; + top: 50%; + right: 0.5rem; + transform: translateY(-50%); +} + +/* +--------------------------------------------------------------- + BUTTONS In Publications Page +--------------------------------------------------------------- +*/ +.pub-wrapper .pub-btn-primary { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background-color: var(--pub-blue); + color: #ffffff; + border: 1px solid var(--pub-blue); + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: background-color 0.2s; + text-decoration: none; + white-space: nowrap; +} + +.pub-wrapper .pub-btn-primary:hover { + background-color: var(--pub-blue-hover); + color: #ffffff; +} + +.pub-wrapper .pub-btn-outline { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background-color: #ffffff; + color: var(--pub-text); + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: border-color 0.2s, color 0.2s; + text-decoration: none; + white-space: nowrap; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); +} + +.pub-wrapper .pub-btn-outline:hover { + border-color: var(--pub-blue); + color: var(--pub-blue); +} + +/* +--------------------------------------------------------------- + MAIN CONTENT LAYOUT In Publications Page +--------------------------------------------------------------- +*/ +.pub-wrapper #repo-content { + padding-top: 2.5rem; + padding-bottom: 2.5rem; +} + +.pub-wrapper .pub-layout { + display: flex; + flex-direction: column; + gap: 2rem; +} + +@media (min-width: 1024px) { + .pub-wrapper .pub-layout { + flex-direction: row; + } +} + +/* +--------------------------------------------------------------- + SIDEBAR In Publications Page +--------------------------------------------------------------- +*/ +.pub-wrapper .pub-sidebar { + width: 100%; + flex-shrink: 0; +} + +@media (min-width: 1024px) { + .pub-wrapper .pub-sidebar { + width: 20rem; /* 320px */ + min-width: 20rem; + max-width: 20rem; + } +} + +.pub-wrapper .pub-sidebar-inner { + background-color: #ffffff; + border-radius: 0.75rem; + border: 1px solid var(--pub-border); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + padding: 1.25rem; + position: sticky; + top: 7rem; /* below fixed header */ + height: fit-content; +} + +.pub-wrapper .pub-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1.5rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--pub-border); +} + +.pub-wrapper .pub-sidebar-header h2 { + font-size: 1.125rem; + font-weight: 700; + color: var(--pub-text); + display: flex; + align-items: center; + gap: 0.5rem; + margin: 0; +} + +.pub-wrapper .pub-sidebar-header h2 i { + color: var(--pub-blue); +} + +.pub-wrapper .pub-sidebar-header .pub-clear-btn { + font-size: 0.875rem; + color: var(--pub-accent); + font-weight: 500; + background: none; + border: none; + cursor: pointer; + padding: 0; + text-decoration: none; +} + +.pub-wrapper .pub-sidebar-header .pub-clear-btn:hover { + text-decoration: underline; +} + +/* Accordion */ +.pub-wrapper .pub-accordion { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.pub-wrapper .pub-accordion-item { + /* no extra styles needed */ +} + +.pub-wrapper .pub-accordion-trigger { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + text-align: left; + font-size: 0.9375rem; + font-weight: 600; + color: var(--pub-text); + background: none; + border: none; + cursor: pointer; + padding: 0; + margin-bottom: 0.75rem; +} + +.pub-wrapper .pub-accordion-trigger i { + font-size: 0.75rem; + color: var(--pub-muted); + transition: transform 0.3s ease; +} + +.pub-wrapper .pub-accordion-trigger.open i { + transform: rotate(180deg); +} + +.pub-wrapper .pub-accordion-body { + overflow: hidden; + transition: max-height 0.3s ease-out, opacity 0.3s ease-out; + max-height: 0; + opacity: 0; +} + +.pub-wrapper .pub-accordion-body.open { + max-height: 600px; + opacity: 1; +} + +.pub-wrapper .pub-accordion-body .pub-filter-list { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding-bottom: 0.5rem; +} + +/* Filter checkbox labels */ +.pub-wrapper .pub-filter-label { + display: flex; + align-items: center; + gap: 0.75rem; + cursor: pointer; +} + +.pub-wrapper .pub-filter-label span { + font-size: 0.875rem; + color: var(--pub-text); + transition: color 0.15s; +} + +.pub-wrapper .pub-filter-label:hover span { + color: var(--pub-blue); +} + +/* Custom checkbox */ +.pub-wrapper .pub-checkbox { + appearance: none; + -webkit-appearance: none; + width: 1.15em; + height: 1.15em; + border: 1px solid var(--pub-border); + border-radius: 0.25em; + background-color: #ffffff; + display: grid; + place-content: center; + cursor: pointer; + flex-shrink: 0; + transition: background-color 0.15s, border-color 0.15s; +} + +.pub-wrapper .pub-checkbox::before { + content: ""; + width: 0.65em; + height: 0.65em; + transform: scale(0); + transition: transform 120ms ease-in-out; + background-color: #ffffff; + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); +} + +.pub-wrapper .pub-checkbox:checked { + background-color: var(--pub-blue); + border-color: var(--pub-blue); +} + +.pub-wrapper .pub-checkbox:checked::before { + transform: scale(1); +} + +/* Year range inputs */ +.pub-wrapper .pub-year-range { + display: flex; + gap: 0.5rem; + padding-top: 0.5rem; +} + +.pub-wrapper .pub-year-range input { + width: 50%; + padding: 0.375rem 0.5rem; + border: 1px solid var(--pub-border); + border-radius: 0.25rem; + font-size: 0.875rem; + color: var(--pub-text); + background-color: #ffffff; + outline: none; + transition: border-color 0.2s; + box-sizing: border-box; +} + +.pub-wrapper .pub-year-range input:focus { + border-color: var(--pub-blue); +} + +/* +----------------------------------------------------------------- + RESULTS AREA In Publications Page +----------------------------------------------------------------- +*/ +.pub-wrapper .pub-results { + flex: 1; + min-width: 0; +} + +/* Results toolbar */ +.pub-wrapper .pub-results-toolbar { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; + background-color: #ffffff; + padding: 1rem; + border-radius: 0.75rem; + border: 1px solid var(--pub-border); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + margin-bottom: 1.5rem; +} + +@media (min-width: 640px) { + .pub-wrapper .pub-results-toolbar { + flex-direction: row; + justify-content: space-between; + } +} + +.pub-wrapper .pub-results-count { + font-size: 0.875rem; + color: var(--pub-text); +} + +.pub-wrapper .pub-results-count strong { + font-weight: 700; +} + +.pub-wrapper .pub-sort-wrap { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.pub-wrapper .pub-sort-wrap label { + font-size: 0.875rem; + color: var(--pub-muted); + white-space: nowrap; +} + +.pub-wrapper .pub-sort-select { + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + color: var(--pub-text); + background-color: #ffffff; + outline: none; + cursor: pointer; + transition: border-color 0.2s; + min-width: 140px; +} + +.pub-wrapper .pub-sort-select:focus, +.pub-wrapper .pub-sort-select:hover { + border-color: var(--pub-blue); +} + +/* Sort dropdown (custom React dropdown) */ +.pub-wrapper .pub-sort-dropdown { + position: relative; +} + +.pub-wrapper .pub-sort-dropdown-btn { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + background-color: #ffffff; + color: var(--pub-text); + cursor: pointer; + min-width: 140px; + transition: border-color 0.2s; + outline: none; +} + +.pub-wrapper .pub-sort-dropdown-btn:hover, +.pub-wrapper .pub-sort-dropdown-btn.open { + border-color: var(--pub-blue); +} + +.pub-wrapper .pub-sort-dropdown-btn i { + font-size: 0.625rem; + color: var(--pub-muted); + transition: transform 0.3s; +} + +.pub-wrapper .pub-sort-dropdown-btn.open i { + transform: rotate(180deg); +} + +.pub-wrapper .pub-sort-dropdown-menu { + position: absolute; + top: calc(100% + 4px); + right: 0; + width: 100%; + background-color: #ffffff; + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); + z-index: 50; + overflow: hidden; + padding: 0.25rem 0; +} + +.pub-wrapper .pub-sort-dropdown-option { + padding: 0.5rem 1rem; + font-size: 0.875rem; + cursor: pointer; + transition: background-color 0.15s; + color: var(--pub-text); +} + +.pub-wrapper .pub-sort-dropdown-option:hover { + background-color: #f9fafb; +} + +.pub-wrapper .pub-sort-dropdown-option.selected { + background-color: var(--pub-blue-light); + color: var(--pub-blue); + font-weight: 600; +} + +/* +--------------------------------------------------------------- + PUBLICATION CARD In Publications Page +--------------------------------------------------------------- +*/ +.pub-wrapper .pub-card-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.pub-wrapper .pub-card { + background-color: #ffffff; + border-radius: 0.75rem; + border: 1px solid var(--pub-border); + padding: 1.5rem; + transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; + cursor: default; +} + +.pub-wrapper .pub-card:hover { + border-color: var(--pub-blue); + box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); +} + +/* Card top row: title + badges */ +.pub-wrapper .pub-card-top { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 0.75rem; +} + +@media (min-width: 768px) { + .pub-wrapper .pub-card-top { + flex-direction: row; + justify-content: space-between; + } +} + +.pub-wrapper .pub-card-title { + font-size: 1.25rem; + font-weight: 700; + color: var(--pub-text); + line-height: 1.4; + margin: 0; + transition: color 0.2s; +} + +.pub-wrapper .pub-card:hover .pub-card-title { + color: var(--pub-blue); +} + +.pub-wrapper .pub-card-title a { + color: inherit; + text-decoration: none; +} + +.pub-wrapper .pub-card-title a:hover { + color: var(--pub-blue); +} + +/* Badges */ +.pub-wrapper .pub-badges { + display: flex; + gap: 0.5rem; + flex-shrink: 0; + flex-wrap: wrap; +} + +.pub-wrapper .pub-badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.25rem 0.625rem; + border-radius: 0.25rem; + font-size: 0.75rem; + font-weight: 600; + border: 1px solid transparent; + white-space: nowrap; +} + +.pub-wrapper .pub-badge-open { + background-color: #f0fdf4; + color: #15803d; + border-color: #bbf7d0; +} + +.pub-wrapper .pub-badge-peer { + background-color: var(--pub-blue-light); + color: var(--pub-blue); + border-color: rgba(38, 60, 111, 0.2); +} + +.pub-wrapper .pub-badge-institutional { + background-color: #fefce8; + color: #a16207; + border-color: #fde68a; +} + +.pub-wrapper .pub-badge-request { + background-color: #eff6ff; + color: #1d4ed8; + border-color: #bfdbfe; +} + +/* Card meta row */ +.pub-wrapper .pub-card-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem 1.5rem; + font-size: 0.875rem; + color: var(--pub-muted); + margin-bottom: 1rem; +} + +.pub-wrapper .pub-card-meta .pub-meta-item { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.pub-wrapper .pub-card-meta .pub-meta-item strong { + color: var(--pub-text); + font-weight: 500; +} + +/* Card abstract */ +.pub-wrapper .pub-card-abstract { + font-size: 0.875rem; + color: var(--pub-muted); + line-height: 1.625; + margin-bottom: 1rem; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Keywords */ +.pub-wrapper .pub-keywords { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + margin-bottom: 1rem; +} + +.pub-wrapper .pub-keywords-label { + font-size: 0.75rem; + font-weight: 500; + color: var(--pub-muted); +} + +.pub-wrapper .pub-keyword-tag { + display: inline-block; + padding: 0.25rem 0.5rem; + background-color: #f3f4f6; + color: #4b5563; + border-radius: 0.25rem; + font-size: 0.75rem; +} + +/* Card actions */ +.pub-wrapper .pub-card-actions { + display: flex; + align-items: center; + gap: 0.75rem; + padding-top: 1rem; + border-top: 1px solid var(--pub-border); + flex-wrap: wrap; +} + +.pub-wrapper .pub-action-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + background: none; + border: none; + cursor: pointer; + padding: 0; + transition: color 0.2s; + text-decoration: none; +} + +.pub-wrapper .pub-action-btn-primary { + color: var(--pub-blue); +} + +.pub-wrapper .pub-action-btn-primary:hover { + color: var(--pub-blue-hover); +} + +.pub-wrapper .pub-action-btn-secondary { + color: var(--pub-muted); + margin-left: 1rem; +} + +.pub-wrapper .pub-action-btn-secondary:hover { + color: var(--pub-text); +} + +/* +--------------------------------------------------------------- + PAGINATION In Publications Page +--------------------------------------------------------------- +*/ +.pub-wrapper .pub-pagination { + display: flex; + align-items: center; + justify-content: space-between; + border-top: 1px solid var(--pub-border); + padding-top: 1.5rem; + margin-top: 2rem; + gap: 1rem; +} + +.pub-wrapper .pub-page-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + background-color: #ffffff; + color: var(--pub-text); + cursor: pointer; + transition: border-color 0.2s, color 0.2s; +} + +.pub-wrapper .pub-page-btn:hover:not(:disabled) { + border-color: var(--pub-blue); + color: var(--pub-blue); +} + +.pub-wrapper .pub-page-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + background-color: #f9fafb; +} + +.pub-wrapper .pub-page-numbers { + display: none; + align-items: center; + gap: 0.25rem; +} + +@media (min-width: 768px) { + .pub-wrapper .pub-page-numbers { + display: flex; + } +} + +.pub-wrapper .pub-page-num { + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + background-color: #ffffff; + color: var(--pub-text); + border: none; + cursor: pointer; + transition: background-color 0.15s, color 0.15s; +} + +.pub-wrapper .pub-page-num:hover { + background-color: #f3f4f6; +} + +.pub-wrapper .pub-page-num.active { + background-color: var(--pub-blue); + color: #ffffff; + cursor: default; +} + +.pub-wrapper .pub-page-ellipsis { + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + color: var(--pub-muted); + font-size: 0.875rem; +} + +/* +---------------------------------------------------------------- + End Publications Page +---------------------------------------------------------------- +*/ + +/* +--------------------------------------------------------------- + RESEARCH PAGE +--------------------------------------------------------------- +*/ + +/* --- Local CSS Variables --- */ +.research-wrapper { + --r-blue: #263c6f; + --r-blue-hover: #1d2e55; + --r-blue-light: #f0f4f8; + --r-accent: #3b82f6; + --r-border: #e5e7eb; + --r-text: #111827; + --r-muted: #6b7280; + --r-bg: #f9fafb; + --r-white: #ffffff; + --r-shadow-soft: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); + --r-shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); + + width: 100%; + background-color: var(--r-bg); +} + +/* +--------------------------------------------------------------- + HERO SECTION In Research Page +--------------------------------------------------------------- +*/ +.research-wrapper #research-hero { + width: 100%; + background-color: var(--r-bg); + border-bottom: 1px solid var(--r-border); + padding-top: 3rem; + padding-bottom: 4rem; + font-family: 'Inter', sans-serif; +} + +/* Label row: gạch ngang + text "Research Hub" */ +.research-wrapper #research-hero .hero-label { + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.research-wrapper #research-hero .hero-label-line { + display: block; + width: 2rem; + height: 2.5px; + background-color: var(--r-accent); + flex-shrink: 0; +} + +.research-wrapper #research-hero .hero-label-text { + font-size: 0.875rem; + font-weight: 600; + color: var(--r-blue); + text-transform: uppercase; + letter-spacing: 0.05em; + font-family: 'Inter', sans-serif; +} + +/* Heading */ +.research-wrapper #research-hero h1 { + font-family: 'Inter', sans-serif; + font-size: 3rem; + font-weight: 700; + color: var(--r-text); + letter-spacing: -0.025em; + line-height: 1.1; + margin: 0; +} + +@media (min-width: 1024px) { + .research-wrapper #research-hero h1 { + font-size: 4.5rem; + } +} + +.research-wrapper #research-hero h1 span { + color: var(--r-blue); +} + +/* Paragraph */ +.research-wrapper #research-hero .hero-desc { + font-family: 'Inter', sans-serif; + font-size: 1.125rem; + color: var(--r-muted); + line-height: 1.625; + max-width: 36rem; + margin: 0; +} + +/* Left column spacing */ +.research-wrapper #research-hero .hero-left { + display: flex; + flex-direction: column; + gap: 2rem; +} + +/* Button row */ +.research-wrapper #research-hero .hero-buttons { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +/* Hero buttons */ +.research-wrapper .r-btn-primary { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 1rem 2rem; + background-color: var(--r-blue); + color: var(--r-white); + border: none; + border-radius: 9999px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s; + box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); + text-decoration: none; +} + +.research-wrapper .r-btn-primary:hover { + background-color: var(--r-blue-hover); + color: var(--r-white); +} + +.research-wrapper .r-btn-outline { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 1rem 2rem; + background-color: var(--r-white); + color: var(--r-text); + border: 1px solid var(--r-border); + border-radius: 9999px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + text-decoration: none; +} + +.research-wrapper .r-btn-outline:hover { + background-color: #f9fafb; + color: var(--r-text); +} + +/* Hero floating stat cards */ +.research-wrapper .r-stat-card { + position: absolute; + background-color: var(--r-white); + border-radius: 1rem; + padding: 1rem; + border: 1px solid var(--r-border); + box-shadow: var(--r-shadow-hover); + z-index: 20; + display: flex; + align-items: center; + gap: 1rem; +} + +.research-wrapper .r-stat-card p { + margin: 0; + line-height: 1.2; +} + +/* --------------------------------------------------------------- + RESEARCH DOMAINS SECTION In Research Page + --------------------------------------------------------------- */ +.research-wrapper #research-domains { + padding-top: 5rem; + padding-bottom: 5rem; + background-color: var(--r-white); +} + +.research-wrapper #research-domains h2 { + font-size: 1.875rem; + font-weight: 700; + color: var(--r-text); + margin-bottom: 1rem; +} + +@media (min-width: 1024px) { + .research-wrapper #research-domains h2 { + font-size: 2.25rem; + } +} + +.research-wrapper #research-domains > div > div:first-child p { + color: var(--r-muted); + max-width: 42rem; + margin: 0 auto; +} + +/* Domain card — folder tab shape */ +.research-wrapper .folder-tab { + clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); + padding: 2rem; + min-height: 320px; + display: flex; + flex-direction: column; + border-radius: 1.5rem; + position: relative; + overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.research-wrapper .folder-tab:hover { + transform: translateY(-4px); + box-shadow: var(--r-shadow-hover); +} + +/* Blue variant (first card) */ +.research-wrapper .folder-tab-blue { + background-color: var(--r-blue); + color: var(--r-white); +} + +.research-wrapper .folder-tab-blue h3 { + color: var(--r-white); +} + +.research-wrapper .folder-tab-blue p { + color: rgba(255,255,255,0.8); +} + +/* Light variant */ +.research-wrapper .folder-tab-light { + background-color: var(--r-blue-light); + color: var(--r-text); + border: 1px solid var(--r-border); +} + +/* CTA card (dashed border) */ +.research-wrapper .domain-card-cta { + border-radius: 1.5rem; + padding: 2rem; + min-height: 320px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + border: 2px dashed var(--r-border); + background-color: var(--r-bg); + cursor: pointer; + transition: border-color 0.2s; +} + +.research-wrapper .domain-card-cta:hover { + border-color: var(--r-blue); +} + +.research-wrapper .domain-card-cta h3 { + font-size: 1.25rem; + font-weight: 700; + color: var(--r-text); + margin-bottom: 0.5rem; +} + +.research-wrapper .domain-card-cta p { + font-size: 0.875rem; + color: var(--r-muted); + margin: 0; +} + +/* Domain card icon box */ +.research-wrapper .domain-icon-blue { + width: 3.5rem; + height: 3.5rem; + border-radius: 1rem; + background-color: rgba(255,255,255,0.2); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 2rem; + border: 1px solid rgba(255,255,255,0.3); + flex-shrink: 0; +} + +.research-wrapper .domain-icon-light { + width: 3.5rem; + height: 3.5rem; + border-radius: 1rem; + background-color: var(--r-white); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 2rem; + border: 1px solid var(--r-border); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + flex-shrink: 0; +} + +.research-wrapper .domain-card-cta .domain-icon-cta { + width: 4rem; + height: 4rem; + border-radius: 9999px; + background-color: var(--r-white); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + transition: transform 0.2s; +} + +.research-wrapper .domain-card-cta:hover .domain-icon-cta { + transform: scale(1.1); +} + +/* Domain card footer row */ +.research-wrapper .domain-card-footer { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: auto; +} + +.research-wrapper .domain-badge-white { + font-size: 0.875rem; + font-weight: 500; + background-color: var(--r-white); + padding: 0.25rem 0.75rem; + border-radius: 9999px; + border: 1px solid var(--r-border); + color: var(--r-blue); +} + +.research-wrapper .domain-badge-glass { + font-size: 0.875rem; + font-weight: 500; + background-color: rgba(255,255,255,0.2); + padding: 0.25rem 0.75rem; + border-radius: 9999px; + color: var(--r-white); +} + +/* --------------------------------------------------------------- + PROJECTS & CENTERS SECTION In Research Page + --------------------------------------------------------------- */ +.research-wrapper #projects-centers { + padding-top: 5rem; + padding-bottom: 5rem; + background-color: var(--r-bg); + border-top: 1px solid var(--r-border); + border-bottom: 1px solid var(--r-border); +} + +.research-wrapper #projects-centers h2 { + font-size: 1.5rem; + font-weight: 700; + color: var(--r-text); + margin: 0; +} + +/* Project item card */ +.research-wrapper .project-card { + background-color: var(--r-white); + border-radius: 1.25rem; + padding: 1.5rem; + border: 1px solid var(--r-border); + box-shadow: var(--r-shadow-soft); + display: flex; + flex-direction: column; + gap: 1.5rem; + align-items: flex-start; + transition: box-shadow 0.25s ease; +} + +.research-wrapper .project-card:hover { + box-shadow: var(--r-shadow-hover); +} + +@media (min-width: 640px) { + .research-wrapper .project-card { + flex-direction: row; + align-items: center; + } +} + +.research-wrapper .project-icon { + width: 4rem; + height: 4rem; + border-radius: 0.75rem; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + border: 1px solid var(--r-border); +} + +.research-wrapper .project-icon-blue { background-color: var(--r-blue-light); border-color: var(--r-border); } +.research-wrapper .project-icon-purple { background-color: #faf5ff; border-color: #e9d5ff; } +.research-wrapper .project-icon-orange { background-color: #fff7ed; border-color: #fed7aa; } + +/* Status badges */ +.research-wrapper .badge { + display: inline-flex; + align-items: center; + padding: 0.25rem 0.625rem; + border-radius: 0.375rem; + font-size: 0.75rem; + font-weight: 600; + border: 1px solid transparent; +} + +.research-wrapper .badge-active { background-color: #f0fdf4; color: #15803d; border-color: #bbf7d0; } +.research-wrapper .badge-collection { background-color: #fefce8; color: #a16207; border-color: #fde68a; } +.research-wrapper .badge-review { background-color: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } + +/* Progress bar */ +.research-wrapper .progress-bar-track { + width: 8rem; + background-color: var(--r-bg); + border-radius: 9999px; + height: 0.375rem; +} + +.research-wrapper .progress-bar-fill { + height: 0.375rem; + border-radius: 9999px; +} + +.research-wrapper .progress-fill-blue { background-color: var(--r-blue); } +.research-wrapper .progress-fill-accent { background-color: var(--r-accent); } + +/* --------------------------------------------------------------- + FUNDING CALLS (right column) In Research Page + --------------------------------------------------------------- */ +.research-wrapper .funding-card { + background-color: var(--r-white); + border-radius: 1.5rem; + padding: 1.5rem; + border: 1px solid var(--r-border); + box-shadow: var(--r-shadow-soft); + display: flex; + flex-direction: column; + transition: box-shadow 0.25s ease; +} + +.research-wrapper .funding-card:hover { + box-shadow: var(--r-shadow-hover); +} + +.research-wrapper .funding-item { + padding: 1.25rem; + background-color: var(--r-bg); + border-radius: 1rem; + border: 1px solid var(--r-border); + transition: border-color 0.2s; +} + +.research-wrapper .funding-item:hover { + border-color: var(--r-accent); +} + +.research-wrapper .funding-item h4 { + font-size: 1rem; + font-weight: 700; + color: var(--r-text); + margin: 0 0 0.75rem 0; +} + +.research-wrapper .funding-label-urgent { + font-size: 0.625rem; + font-weight: 700; + color: #ef4444; + text-transform: uppercase; + letter-spacing: 0.05em; + display: block; + margin-bottom: 0.5rem; +} + +.research-wrapper .funding-label-internal { + font-size: 0.625rem; + font-weight: 700; + color: var(--r-blue); + text-transform: uppercase; + letter-spacing: 0.05em; + display: block; + margin-bottom: 0.5rem; +} + +.research-wrapper .funding-meta { + display: flex; + justify-content: space-between; + align-items: center; +} + +.research-wrapper .funding-due { + font-size: 0.75rem; + color: var(--r-muted); + font-weight: 500; + display: inline-flex; + align-items: center; + gap: 0.375rem; +} + +.research-wrapper .funding-link { + font-size: 0.75rem; + font-weight: 600; + color: var(--r-blue); + display: inline-flex; + align-items: center; + gap: 0.25rem; + text-decoration: none; + transition: color 0.15s; +} + +.research-wrapper .funding-link:hover { + color: var(--r-blue-hover); +} + +.research-wrapper .funding-view-all { + width: 100%; + margin-top: 1.5rem; + padding: 0.75rem; + border-radius: 0.75rem; + border: 1px solid var(--r-border); + font-size: 0.875rem; + font-weight: 600; + color: var(--r-text); + background-color: var(--r-white); + cursor: pointer; + transition: border-color 0.2s, color 0.2s; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); +} + +.research-wrapper .funding-view-all:hover { + border-color: var(--r-blue); + color: var(--r-blue); +} + +/* --------------------------------------------------------------- + RESEARCH RESOURCES (Quick Links) In Research Page + --------------------------------------------------------------- */ +.research-wrapper #research-quick-links { + padding-top: 5rem; + padding-bottom: 5rem; + background-color: var(--r-white); +} + +.research-wrapper .resource-card { + display: block; + background-color: var(--r-bg); + border-radius: 1.5rem; + padding: 2rem; + border: 1px solid var(--r-border); + position: relative; + overflow: hidden; + text-decoration: none; + transition: border-color 0.2s; +} + +.research-wrapper .resource-card:hover { + border-color: var(--r-accent); +} + +.research-wrapper .resource-card-glow { + position: absolute; + right: 0; + top: 0; + width: 16rem; + height: 16rem; + background-color: var(--r-blue-light); + border-radius: 9999px; + filter: blur(64px); + opacity: 0.5; + transform: translateY(-50%) translateX(25%); + transition: opacity 0.3s; + pointer-events: none; +} + +.research-wrapper .resource-card:hover .resource-card-glow { + opacity: 0.8; +} + +.research-wrapper .resource-icon { + width: 4rem; + height: 4rem; + border-radius: 1rem; + background-color: var(--r-white); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + border: 1px solid var(--r-border); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: transform 0.2s; +} + +.research-wrapper .resource-card:hover .resource-icon { + transform: scale(1.05); +} + +.research-wrapper .resource-card h3 { + font-size: 1.5rem; + font-weight: 700; + color: var(--r-text); + margin-bottom: 0.5rem; + transition: color 0.2s; +} + +.research-wrapper .resource-card:hover h3 { + color: var(--r-blue); +} + +.research-wrapper .resource-card p { + color: var(--r-muted); + line-height: 1.625; + margin-bottom: 1rem; +} + +.research-wrapper .resource-link { + display: inline-flex; + align-items: center; + font-size: 0.875rem; + font-weight: 600; + color: var(--r-blue); + gap: 0.5rem; +} + +/* --------------------------------------------------------------- + COLLABORATION CTA SECTION In Research Page + --------------------------------------------------------------- */ +.research-wrapper #collaboration-cta { + padding-top: 6rem; + padding-bottom: 6rem; + background-color: var(--r-blue); + position: relative; + overflow: hidden; +} + +.research-wrapper #collaboration-cta h2 { + font-size: 2.25rem; + font-weight: 700; + color: var(--r-white); + letter-spacing: -0.025em; + margin-bottom: 1.5rem; +} + +@media (min-width: 768px) { + .research-wrapper #collaboration-cta h2 { font-size: 3rem; } +} + +@media (min-width: 1024px) { + .research-wrapper #collaboration-cta h2 { font-size: 3.75rem; } +} + +.research-wrapper #collaboration-cta p { + font-size: 1.25rem; + color: var(--r-blue-light); + opacity: 0.9; + line-height: 1.625; + max-width: 42rem; + margin: 0 auto 2.5rem; + font-weight: 300; +} + +.research-wrapper .cta-btn-white { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem 2rem; + background-color: var(--r-white); + color: var(--r-blue); + border: none; + border-radius: 0.75rem; + font-size: 1rem; + font-weight: 700; + cursor: pointer; + transition: background-color 0.2s; + box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); + text-decoration: none; + width: 100%; +} + +@media (min-width: 640px) { + .research-wrapper .cta-btn-white { width: auto; } +} + +.research-wrapper .cta-btn-white:hover { + background-color: #f9fafb; + color: var(--r-blue); +} + +.research-wrapper .cta-btn-ghost { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem 2rem; + background-color: transparent; + color: var(--r-white); + border: 2px solid rgba(255,255,255,0.3); + border-radius: 0.75rem; + font-size: 1rem; + font-weight: 700; + cursor: pointer; + transition: background-color 0.2s; + text-decoration: none; + width: 100%; +} + +@media (min-width: 640px) { + .research-wrapper .cta-btn-ghost { width: auto; } +} + +.research-wrapper .cta-btn-ghost:hover { + background-color: rgba(255,255,255,0.1); + color: var(--r-white); +} + +/* +--------------------------------------------------------------- + End Research Page +--------------------------------------------------------------- +*/ + .section-title { position: relative; z-index: 99; -- 2.49.1