From 39f66f2966ff4b4e0b990604fb8ca5a5ef147d42 Mon Sep 17 00:00:00 2001 From: choibk Date: Mon, 19 Jan 2026 18:17:22 +0900 Subject: [PATCH] Refactor CSS Clean up old files --- src/App.css | 42 - src/components/PostCard.css | 117 --- src/components/ResourceListItem.css | 93 -- src/index.css | 362 -------- src/main.jsx | 2 +- src/pages/About.jsx | 40 +- src/pages/Cases.css | 138 --- src/pages/Home.jsx | 6 +- src/pages/News.css | 92 -- src/pages/NewsDetail.css | 165 ---- src/pages/Resources.css | 121 --- src/pages/ServiceDetail.css | 241 ----- src/styles/main.css | 1326 +++++++++++++++++++++++++++ 13 files changed, 1344 insertions(+), 1401 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/components/PostCard.css delete mode 100644 src/components/ResourceListItem.css delete mode 100644 src/index.css delete mode 100644 src/pages/Cases.css delete mode 100644 src/pages/News.css delete mode 100644 src/pages/NewsDetail.css delete mode 100644 src/pages/Resources.css delete mode 100644 src/pages/ServiceDetail.css create mode 100644 src/styles/main.css diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/components/PostCard.css b/src/components/PostCard.css deleted file mode 100644 index 3fda23d..0000000 --- a/src/components/PostCard.css +++ /dev/null @@ -1,117 +0,0 @@ -/* PostCard.css */ - -.post-card { - background-color: white; - border-radius: 1rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - overflow: hidden; - transition: box-shadow 0.3s ease, transform 0.3s ease; - display: flex; - flex-direction: column; - height: 100%; -} - -.post-card:hover { - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - transform: translateY(-5px); -} - -.post-card-image-wrapper { - height: 12rem; - background-color: #e5e7eb; - overflow: hidden; - position: relative; - display: flex; - align-items: center; - justify-content: center; -} - -.post-card-image { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.3s ease; -} - -.post-card:hover .post-card-image { - transform: scale(1.05); -} - -.post-card-fallback { - font-size: 3rem; - color: #9ca3af; -} - -.post-card-content { - padding: 1.5rem; - display: flex; - flex-direction: column; - flex: 1; -} - -.post-meta { - display: flex; - align-items: center; - font-size: 0.875rem; - color: #6b7280; - margin-bottom: 0.75rem; -} - -.post-category-badge { - color: #2563eb; - font-weight: 700; - text-transform: uppercase; - font-size: 0.75rem; - letter-spacing: 0.05em; -} - -.post-meta-divider { - margin: 0 0.5rem; - color: #e5e7eb; -} - -.post-title { - font-size: 1.25rem; - font-weight: 700; - margin-bottom: 0.75rem; - line-height: 1.4; -} - -.post-title a { - color: #111827; - text-decoration: none; - transition: color 0.2s; -} - -.post-title a:hover { - color: #2563eb; -} - -.post-excerpt { - color: #4b5563; - font-size: 0.95rem; - line-height: 1.6; - margin-bottom: 1.5rem; - flex: 1; - - /* Line clamping for Webkit browsers */ - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.post-read-more { - display: inline-flex; - align-items: center; - color: #2563eb; - font-weight: 600; - text-decoration: none; - font-size: 0.95rem; - transition: color 0.2s; -} - -.post-read-more:hover { - color: #1d4ed8; - text-decoration: underline; -} \ No newline at end of file diff --git a/src/components/ResourceListItem.css b/src/components/ResourceListItem.css deleted file mode 100644 index fbfef93..0000000 --- a/src/components/ResourceListItem.css +++ /dev/null @@ -1,93 +0,0 @@ -/* ResourceListItem.css */ - -.resource-list-item { - display: flex; - align-items: center; - padding: 1.25rem 0; - border-bottom: 1px solid #e5e7eb; - transition: background-color 0.2s; -} - -.resource-list-item:hover { - background-color: #f9fafb; -} - -.resource-item-date { - width: 120px; - font-size: 0.9rem; - color: #6b7280; - flex-shrink: 0; -} - -.resource-item-content { - flex: 1; - padding-right: 2rem; -} - -.resource-item-title { - font-size: 1.1rem; - font-weight: 500; - color: #111827; - text-decoration: none; - display: block; - transition: color 0.2s; -} - -.resource-item-title:hover { - color: #2563eb; - text-decoration: underline; -} - -.resource-item-meta { - display: flex; - align-items: center; - gap: 1.5rem; - flex-shrink: 0; -} - -.resource-item-author { - font-size: 0.9rem; - color: #6b7280; - display: none; - /* Hidden on small screens */ -} - -.resource-item-link { - font-size: 0.85rem; - font-weight: 600; - color: #2563eb; - text-decoration: none; - padding: 0.4rem 0.8rem; - background-color: #eff6ff; - border-radius: 0.375rem; - transition: all 0.2s; - white-space: nowrap; -} - -.resource-item-link:hover { - background-color: #dbeafe; - color: #1d4ed8; -} - -@media (min-width: 640px) { - .resource-item-author { - display: block; - } -} - -@media (max-width: 640px) { - .resource-list-item { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .resource-item-date { - font-size: 0.8rem; - } - - .resource-item-meta { - width: 100%; - justify-content: flex-end; - } -} \ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index a5960ac..0000000 --- a/src/index.css +++ /dev/null @@ -1,362 +0,0 @@ -:root { - --primary-color: #0056b3; - --secondary-color: #004494; - --text-color: #333333; - --light-gray: #f8f9fa; - --white: #ffffff; - --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - --transition: all 0.3s ease; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - line-height: 1.6; - color: var(--text-color); - scroll-behavior: smooth; -} - -/* Utilities */ -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} - -.section-padding { - padding: 80px 0; -} - -.bg-light { - background-color: var(--light-gray); -} - -.section-title { - text-align: center; - font-size: 2.5rem; - margin-bottom: 3rem; - color: var(--primary-color); -} - -.btn { - display: inline-block; - padding: 12px 30px; - border-radius: 5px; - text-decoration: none; - font-weight: bold; - transition: var(--transition); - cursor: pointer; - border: none; -} - -.btn-primary { - background-color: var(--primary-color); - color: var(--white); -} - -.btn-primary:hover { - background-color: var(--secondary-color); -} - -/* Navbar */ -.navbar { - position: fixed; - top: 0; - width: 100%; - background-color: var(--white); - box-shadow: var(--shadow); - z-index: 1000; - height: 70px; - display: flex; - align-items: center; -} - -.navbar-container { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} - -.logo { - font-size: 1.5rem; - font-weight: 700; - color: var(--primary-color); - text-decoration: none; - display: flex !important; - align-items: center; - gap: 0.75rem; -} - -.logo-image { - height: 45px; - width: auto; - object-fit: contain; -} - -.nav-links a { - margin-left: 30px; - text-decoration: none; - color: var(--text-color); - font-weight: 500; - transition: var(--transition); -} - -.nav-links a:hover { - color: var(--primary-color); -} - -.hamburger { - display: none; - cursor: pointer; -} - -.hamburger .bar { - display: block; - width: 25px; - height: 3px; - background-color: var(--text-color); - margin: 5px auto; - transition: var(--transition); -} - -/* Hero */ -.hero { - height: 100vh; - display: flex; - align-items: center; - background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'); - background-size: cover; - background-position: center; - color: var(--white); - text-align: center; - padding-top: 70px; -} - -.hero-content h1 { - font-size: 3rem; - margin-bottom: 20px; -} - -.hero-content p { - font-size: 1.25rem; - margin-bottom: 30px; -} - -/* Solutions */ -.solutions-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 30px; -} - -.solution-card { - background: var(--white); - padding: 30px; - border-radius: 10px; - box-shadow: var(--shadow); - text-align: center; - transition: var(--transition); -} - -.solution-card:hover { - transform: translateY(-5px); -} - -.solution-icon { - font-size: 3rem; - margin-bottom: 20px; -} - -/* Contact */ -.contact-form { - max-width: 600px; - margin: 0 auto; - background: var(--white); - padding: 40px; - border-radius: 10px; - box-shadow: var(--shadow); -} - -.form-group { - margin-bottom: 20px; -} - -.form-group label { - display: block; - margin-bottom: 8px; - font-weight: 500; -} - -.form-group input, -.form-group textarea { - width: 100%; - padding: 12px; - border: 1px solid #ddd; - border-radius: 5px; - font-family: inherit; -} - -.form-status { - margin-top: 20px; - text-align: center; - font-weight: bold; - color: var(--primary-color); -} - -/* Buttons */ -.btn-outline { - background-color: transparent; - border: 2px solid var(--white); - color: var(--white); - margin-left: 10px; -} - -.btn-outline:hover { - background-color: var(--white); - color: var(--primary-color); -} - -.btn-nav { - padding: 8px 16px; - background-color: var(--primary-color); - color: var(--white) !important; - border-radius: 5px; -} - -.btn-nav:hover { - background-color: var(--secondary-color); -} - -.hero-btns { - display: flex; - justify-content: center; -} - -/* Service Link */ -.service-link { - display: inline-block; - margin-top: 15px; - color: var(--primary-color); - text-decoration: none; - font-weight: bold; -} - -.service-link:hover { - text-decoration: underline; -} - -/* Footer Dark */ -.footer-dark { - background-color: #222; - color: #ccc; - padding: 50px 0 20px; -} - -.footer-container { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - border-bottom: 1px solid #444; - padding-bottom: 30px; - margin-bottom: 20px; -} - -.footer-info h3 { - color: var(--white); - margin-bottom: 15px; -} - -.footer-links a { - color: #ccc; - text-decoration: none; - margin-left: 20px; -} - -.footer-links a:hover { - color: var(--white); -} - -.footer-copyright { - text-align: center; - font-size: 0.9rem; -} - -/* Floating CTA */ -.floating-cta { - position: fixed; - bottom: 30px; - right: 30px; - background-color: var(--primary-color); - color: var(--white); - padding: 15px 30px; - border-radius: 50px; - text-decoration: none; - font-weight: bold; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); - z-index: 1000; - transition: var(--transition); -} - -.floating-cta:hover { - transform: translateY(-5px); - background-color: var(--secondary-color); -} - -/* Responsive */ -@media (max-width: 768px) { - .hero-btns { - flex-direction: column; - gap: 10px; - } - - .btn-outline { - margin-left: 0; - text-align: center; - } - - .footer-container { - flex-direction: column; - gap: 30px; - } - - .footer-links { - margin-top: 20px; - } - - .footer-links a { - margin-left: 0; - margin-right: 20px; - } - - .nav-links { - position: absolute; - top: 70px; - left: -100%; - background-color: var(--white); - width: 100%; - flex-direction: column; - text-align: center; - padding: 20px 0; - transition: 0.3s; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - } - - .nav-links.active { - left: 0; - } - - .nav-links a { - display: block; - margin: 20px 0; - } - - .hero-content h1 { - font-size: 2rem; - } -} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index b9a1a6d..a2693f5 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,6 +1,6 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -import './index.css' +import './styles/main.css' import App from './App.jsx' createRoot(document.getElementById('root')).render( diff --git a/src/pages/About.jsx b/src/pages/About.jsx index efce858..a7a0542 100644 --- a/src/pages/About.jsx +++ b/src/pages/About.jsx @@ -1,56 +1,44 @@ import consultantProfile from '../assets/consultant_profile.png'; +import './About.css'; const About = () => { return (
{/* Intro Section with Background */} -
+

회사 소개

-
-

+

+

Sokuree Consultant는 현장의 목소리(데이터)에서 필요한 정보를
시스템(System)화 하여 기업의 지속 가능한 성장을 지원합니다.

-
-
+
+

Vision

누구나 쉽게 스마트 경영을 실현하는 세상

-
+

Mission

복잡한 기술을 현장에 맞게 단순화하고, 실질적인 성과를 창출하는 것

-
+

대표 컨설턴트

-
-
+
+
대표 컨설턴트
-
-
-
    +
    +
    +
    • ✅ 품질관리 기술사 diff --git a/src/pages/Cases.css b/src/pages/Cases.css deleted file mode 100644 index 7b9bc52..0000000 --- a/src/pages/Cases.css +++ /dev/null @@ -1,138 +0,0 @@ -/* Cases.css */ - -.cases-container { - padding-top: 100px; - min-height: 100vh; - background-color: #f9fafb; - /* Gray-50 */ - padding-bottom: 80px; -} - -.cases-content-wrapper { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} - -.cases-header { - text-align: center; - margin-bottom: 4rem; -} - -.cases-title { - font-size: 2.5rem; - font-weight: 700; - color: #111827; - margin-bottom: 1rem; -} - -.cases-subtitle { - color: #4b5563; - font-size: 1.125rem; -} - -.cases-grid { - display: grid; - grid-template-columns: 1fr; - gap: 2rem; -} - -@media (min-width: 768px) { - .cases-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -.case-card { - background-color: white; - border-radius: 1rem; - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); - overflow: hidden; - transition: transform 0.3s ease, box-shadow 0.3s ease; - display: flex; - flex-direction: column; -} - -.case-card:hover { - transform: translateY(-5px); - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); -} - -.case-image-wrapper { - height: 16rem; - position: relative; - overflow: hidden; - background-color: #e5e7eb; -} - -.case-image { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.5s ease; -} - -.case-card:hover .case-image { - transform: scale(1.05); -} - -.case-category-badge { - position: absolute; - top: 1rem; - left: 1rem; - background-color: #2563eb; - /* Blue-600 */ - color: white; - font-size: 0.75rem; - font-weight: 700; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.case-bar { - height: 0.5rem; - background-color: #2563eb; -} - -.case-content { - padding: 2rem; - flex: 1; - display: flex; - flex-direction: column; -} - -.case-category-text { - color: #2563eb; - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 0.5rem; -} - -.case-card-title { - font-size: 1.5rem; - font-weight: 700; - color: #111827; - margin-bottom: 0.75rem; -} - -.case-result-badge { - display: inline-block; - background-color: #eff6ff; - /* Blue-50 */ - color: #1d4ed8; - /* Blue-700 */ - font-weight: 600; - font-size: 0.875rem; - padding: 0.25rem 0.75rem; - border-radius: 0.25rem; - margin-bottom: 1rem; -} - -.case-details { - color: #4b5563; - line-height: 1.625; -} \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 27a7481..3681d4c 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -40,10 +40,10 @@ const Home = () => {

      진행 프로세스

      -
      +
      {['진단', '설계', '실행', '정착', '고도화'].map((step, index) => ( -
      -
      {index + 1}
      +
      +
      {index + 1}

      {step}

      ))} diff --git a/src/pages/News.css b/src/pages/News.css deleted file mode 100644 index f3ffac5..0000000 --- a/src/pages/News.css +++ /dev/null @@ -1,92 +0,0 @@ -/* News.css */ - -.news-container { - padding-top: 100px; - padding-bottom: 80px; - min-height: 100vh; - /* Ensures footer stays at the bottom */ - background-color: #f9fafb; - /* Gray-50 */ -} - -.news-content-wrapper { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} - -.news-header { - text-align: center; - margin-bottom: 4rem; -} - -.news-title { - font-size: 2.5rem; - font-weight: 700; - color: #111827; - margin-bottom: 1rem; -} - -.news-subtitle { - color: #4b5563; - font-size: 1.125rem; - max-width: 42rem; - margin: 0 auto; - line-height: 1.6; -} - -.news-grid { - display: grid; - grid-template-columns: 1fr; - gap: 2rem; -} - -@media (min-width: 768px) { - .news-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (min-width: 1024px) { - .news-grid { - grid-template-columns: repeat(3, 1fr); - } -} - -/* Loading & Error States */ -.news-loading, -.news-error, -.news-empty { - min-height: 100vh; - padding-top: 100px; - display: flex; - justify-content: center; - align-items: center; - text-align: center; -} - -.loading-spinner { - width: 3rem; - height: 3rem; - border: 4px solid #e5e7eb; - border-top-color: #2563eb; - border-radius: 50%; - animation: spin 1s linear infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -.error-title { - font-size: 1.5rem; - font-weight: 700; - color: #dc2626; - margin-bottom: 1rem; -} - -.error-message { - color: #4b5563; -} \ No newline at end of file diff --git a/src/pages/NewsDetail.css b/src/pages/NewsDetail.css deleted file mode 100644 index ebc2957..0000000 --- a/src/pages/NewsDetail.css +++ /dev/null @@ -1,165 +0,0 @@ -/* NewsDetail.css */ - -.news-detail-container { - padding-top: 100px; - padding-bottom: 80px; - min-height: 100vh; - background-color: #f9fafb; - display: flex; - justify-content: center; -} - -.news-article { - background-color: white; - max-width: 800px; - width: 100%; - margin: 0 20px; - padding: 3rem; - border-radius: 1rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); -} - -@media (max-width: 768px) { - .news-article { - padding: 1.5rem; - margin: 0 10px; - } -} - -/* Loading & Error */ -.news-detail-loading, -.news-detail-error { - min-height: 100vh; - padding-top: 100px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} - -.back-link { - color: #2563eb; - text-decoration: none; - font-weight: 600; - margin-top: 1rem; -} - -/* Header */ -.article-header { - margin-bottom: 2rem; - text-align: center; -} - -.article-meta { - font-size: 0.9rem; - color: #6b7280; - margin-bottom: 1rem; - display: flex; - justify-content: center; - align-items: center; -} - -.article-meta-divider { - margin: 0 0.5rem; -} - -.article-title { - font-size: 2.25rem; - font-weight: 800; - color: #111827; - line-height: 1.3; -} - -/* Image */ -.article-image-wrapper { - margin-bottom: 2.5rem; - border-radius: 0.75rem; - overflow: hidden; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); -} - -.article-image { - width: 100%; - height: auto; - display: block; -} - -/* Content */ -.article-content { - font-size: 1.125rem; - line-height: 1.8; - color: #374151; - margin-bottom: 3rem; -} - -.article-content p { - margin-bottom: 1.5rem; -} - -.article-content h2 { - font-size: 1.75rem; - font-weight: 700; - color: #111827; - margin-top: 2.5rem; - margin-bottom: 1.25rem; -} - -.article-content h3 { - font-size: 1.5rem; - font-weight: 600; - color: #1f2937; - margin-top: 2rem; - margin-bottom: 1rem; -} - -.article-content ul, -.article-content ol { - margin-bottom: 1.5rem; - padding-left: 1.5rem; -} - -.article-content li { - margin-bottom: 0.5rem; -} - -.article-content a { - color: #2563eb; - text-decoration: underline; -} - -.article-content blockquote { - border-left: 4px solid #2563eb; - padding-left: 1rem; - font-style: italic; - color: #4b5563; - margin: 2rem 0; -} - -.article-content img { - max-width: 100%; - height: auto; - border-radius: 0.5rem; - margin: 2rem 0; -} - -/* Footer */ -.article-footer { - border-top: 1px solid #e5e7eb; - padding-top: 2rem; - text-align: center; -} - -.back-button { - display: inline-block; - padding: 0.75rem 2rem; - background-color: #f3f4f6; - color: #374151; - font-weight: 600; - border-radius: 0.5rem; - text-decoration: none; - transition: background-color 0.2s; -} - -.back-button:hover { - background-color: #e5e7eb; -} \ No newline at end of file diff --git a/src/pages/Resources.css b/src/pages/Resources.css deleted file mode 100644 index 74205e4..0000000 --- a/src/pages/Resources.css +++ /dev/null @@ -1,121 +0,0 @@ -/* Resources.css */ - -.resources-container { - padding-top: 100px; - padding-bottom: 80px; - min-height: 100vh; - background-color: #f9fafb; -} - -.resources-content-wrapper { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} - -.resources-header { - text-align: center; - margin-bottom: 3rem; -} - -.resources-title { - font-size: 2.5rem; - font-weight: 700; - color: #111827; - margin-bottom: 1rem; -} - -.resources-subtitle { - color: #4b5563; - font-size: 1.125rem; -} - -/* Tabs */ -.resources-tabs { - display: flex; - justify-content: center; - margin-bottom: 3rem; - gap: 1rem; - flex-wrap: wrap; -} - -.tab-button { - padding: 0.75rem 1.5rem; - border-radius: 9999px; - font-weight: 600; - font-size: 1rem; - background-color: white; - color: #4b5563; - border: 1px solid #e5e7eb; - cursor: pointer; - transition: all 0.2s; -} - -.tab-button:hover { - background-color: #f3f4f6; - color: #111827; -} - -.tab-button.active { - background-color: #2563eb; - color: white; - border-color: #2563eb; - box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2); -} - -/* Two Column Layout for 'All' tab */ -.resources-all-grid { - display: grid; - grid-template-columns: 1fr; - gap: 3rem; -} - -@media (min-width: 1024px) { - .resources-all-grid { - grid-template-columns: repeat(2, 1fr); - align-items: start; - } -} - -.resources-section { - margin-bottom: 2rem; -} - -/* List Layout */ -.resources-list { - background: white; - border-radius: 1rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); - padding: 0 1.5rem; - display: flex; - flex-direction: column; -} - -/* Section specific */ -.section-heading { - border-left: 4px solid #2563eb; - padding-left: 1rem; - font-size: 1.5rem; - font-weight: 700; - color: #111827; - margin-bottom: 1.5rem; -} - -.empty-message { - text-align: center; - padding: 3rem; - color: #6b7280; - background: white; - border-radius: 1rem; - width: 100%; -} - -.resource-helper-text { - text-align: center; - margin-top: 1rem; - padding: 1rem; - background-color: #eff6ff; - border-radius: 0.5rem; - color: #1e40af; - font-size: 0.9rem; -} \ No newline at end of file diff --git a/src/pages/ServiceDetail.css b/src/pages/ServiceDetail.css deleted file mode 100644 index b217613..0000000 --- a/src/pages/ServiceDetail.css +++ /dev/null @@ -1,241 +0,0 @@ -/* ServiceDetail.css */ - -.service-container { - padding-top: 80px; - min-height: 100vh; - background-color: #ffffff; - padding-bottom: 80px; -} - -/* Header */ -.service-header { - text-align: center; - padding: 60px 20px; -} - -.service-title { - font-size: 2.5rem; - font-weight: 700; - color: #111827; - /* Gray-900 */ - margin-bottom: 1rem; -} - -.service-subtitle { - color: #4b5563; - /* Gray-600 */ - font-size: 1.125rem; - line-height: 1.6; -} - -.service-content-wrapper { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} - -/* Section Common */ -.service-section { - margin-bottom: 5rem; -} - -.section-label { - font-size: 1.875rem; - font-weight: 700; - margin-bottom: 1rem; - color: #111827; -} - -.section-desc { - color: #4b5563; - margin-bottom: 2.5rem; -} - -/* Purpose Grid (Top 3 Cards) */ -.purpose-grid { - display: grid; - grid-template-columns: repeat(1, 1fr); - gap: 1.5rem; -} - -@media (min-width: 768px) { - .purpose-grid { - grid-template-columns: repeat(3, 1fr); - } -} - -.purpose-card { - background-color: #f9fafb; - /* Gray-50 */ - border-radius: 1rem; - padding: 2rem; - height: 16rem; - position: relative; - overflow: hidden; - transition: transform 0.3s ease; -} - -.purpose-card:hover { - transform: translateY(-5px); -} - -.purpose-card-title { - font-size: 1.25rem; - font-weight: 700; - color: #1f2937; - margin-bottom: 0.5rem; -} - -.purpose-card-text { - color: #6b7280; - font-size: 0.875rem; - line-height: 1.5; -} - -.purpose-icon { - position: absolute; - bottom: 1rem; - right: 1rem; - font-size: 4rem; - opacity: 0.9; -} - -/* Curriculum Grid (Bottom 4 Columns) */ -.curriculum-grid { - display: grid; - grid-template-columns: repeat(1, 1fr); - gap: 1.5rem; -} - -@media (min-width: 768px) { - .curriculum-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (min-width: 1024px) { - .curriculum-grid { - grid-template-columns: repeat(4, 1fr); - } -} - -.curriculum-card { - background-color: white; - border: 1px solid #e5e7eb; - border-radius: 1rem; - padding: 2rem; - transition: box-shadow 0.3s ease; - display: flex; - flex-direction: column; -} - -.curriculum-card:hover { - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); -} - -.curriculum-number { - display: block; - color: #2563eb; - /* Blue-600 */ - font-weight: 700; - font-size: 1.125rem; - margin-bottom: 1rem; -} - -.curriculum-title { - font-size: 1.25rem; - font-weight: 700; - color: #111827; - margin-bottom: 1.5rem; - min-height: 3.5rem; - /* Align heights */ -} - -.curriculum-list { - list-style: none; - padding: 0; - margin: 0; - font-size: 0.875rem; - color: #4b5563; -} - -.curriculum-list li { - display: flex; - align-items: flex-start; - margin-bottom: 0.75rem; -} - -.curriculum-bullet { - margin-right: 0.5rem; - color: #9ca3af; -} - -.curriculum-btn { - width: 100%; - margin-top: 1.5rem; - padding: 0.75rem 1rem; - background-color: #f9fafb; - border: 1px solid #e5e7eb; - border-radius: 0.5rem; - color: #374151; - font-weight: 500; - cursor: pointer; - transition: background-color 0.2s; - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; -} - -.curriculum-btn:hover { - background-color: #f3f4f6; -} - -/* CTA Banner */ -.cta-banner { - background-color: #f9fafb; - border-radius: 1rem; - padding: 3.5rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - gap: 2rem; - margin-bottom: 5rem; -} - -@media (min-width: 768px) { - .cta-banner { - flex-direction: row; - text-align: left; - } -} - -.cta-title { - font-size: 1.5rem; - font-weight: 700; - color: #111827; - margin-bottom: 0.75rem; -} - -.cta-text { - color: #6b7280; - font-size: 0.875rem; -} - -.cta-button { - background-color: #2563eb; - color: white; - padding: 0.75rem 2rem; - border-radius: 0.5rem; - font-weight: 700; - border: none; - cursor: pointer; - box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3); - transition: background-color 0.2s; - white-space: nowrap; -} - -.cta-button:hover { - background-color: #1d4ed8; -} \ No newline at end of file diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 0000000..ab19026 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,1326 @@ +/* ========================================= + 1. VARIABLES & RESET (from index.css) + ========================================= */ +:root { + --primary-color: #4A628A; + /* Deep Blue */ + --secondary-color: #7AB2D3; + /* Medium Blue */ + --text-color: #1e293b; + /* Dark Slate */ + --light-gray: #f1f5f9; + /* Slate-100 */ + --white: #ffffff; + --main-bg: #f8fafc; + /* Slate-50 - Clean Light Background */ + --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --border-color: #cbd5e1; + /* Slate-300 */ + --transition: all 0.3s ease; + + /* Header/Footer Dark Color */ + --header-bg: #1e293b; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + line-height: 1.6; + color: var(--text-color); + background-color: var(--main-bg); + scroll-behavior: smooth; +} + +/* Utilities */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.section-padding { + padding: 80px 0; +} + +.bg-light { + background-color: var(--white); +} + +.section-title { + text-align: center; + font-size: 2.5rem; + margin-bottom: 3rem; + color: var(--primary-color); +} + +.btn { + display: inline-block; + padding: 12px 30px; + border-radius: 5px; + text-decoration: none; + font-weight: bold; + transition: var(--transition); + cursor: pointer; + border: none; +} + +.btn-primary { + background-color: var(--primary-color); + color: var(--white); +} + +.btn-primary:hover { + background-color: var(--secondary-color); +} + +/* ========================================= + 2. GLOBAL LAYOUT (Navbar, Footer from index.css) + ========================================= */ + +/* Navbar */ +.navbar { + position: fixed; + top: 0; + width: 100%; + background-color: var(--header-bg); + /* Dark Header */ + box-shadow: var(--shadow); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + z-index: 1000; + height: 70px; + display: flex; + align-items: center; +} + +.navbar-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--white); + text-decoration: none; + display: flex !important; + align-items: center; + gap: 0.75rem; +} + +.logo-image { + height: 45px; + width: auto; + object-fit: contain; + background: white; + /* Ensure logo is visible on dark */ + padding: 2px; + border-radius: 4px; +} + +.nav-links a { + margin-left: 30px; + text-decoration: none; + color: #e2e8f0; + /* Light text for dark header */ + font-weight: 500; + transition: var(--transition); +} + +.nav-links a:hover { + color: var(--white); +} + +.hamburger { + display: none; + cursor: pointer; +} + +.hamburger .bar { + display: block; + width: 25px; + height: 3px; + background-color: var(--white); + /* White bars */ + margin: 5px auto; + transition: var(--transition); +} + +/* Footer Dark */ +.footer-dark { + background-color: var(--header-bg); + color: #ccc; + padding: 50px 0 20px; +} + +.footer-container { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + border-bottom: 1px solid #444; + padding-bottom: 30px; + margin-bottom: 20px; +} + +.footer-info h3 { + color: var(--white); + margin-bottom: 15px; +} + +.footer-links a { + color: #ccc; + text-decoration: none; + margin-left: 20px; +} + +.footer-links a:hover { + color: var(--white); +} + +.footer-copyright { + text-align: center; + font-size: 0.9rem; +} + +/* Floating CTA */ +.floating-cta { + position: fixed; + bottom: 30px; + right: 30px; + background-color: var(--primary-color); + color: var(--white); + padding: 15px 30px; + border-radius: 50px; + text-decoration: none; + font-weight: bold; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + z-index: 1000; + transition: var(--transition); +} + +.floating-cta:hover { + transform: translateY(-5px); + background-color: var(--secondary-color); +} + +/* Responsive */ +@media (max-width: 768px) { + .footer-container { + flex-direction: column; + gap: 30px; + } + + .footer-links { + margin-top: 20px; + } + + .footer-links a { + margin-left: 0; + margin-right: 20px; + } + + .nav-links { + position: absolute; + top: 70px; + left: -100%; + background-color: var(--header-bg); + /* Use header bg */ + width: 100%; + flex-direction: column; + text-align: center; + padding: 20px 0; + transition: 0.3s; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + + .nav-links.active { + left: 0; + } + + .nav-links a { + display: block; + margin: 20px 0; + } +} + +/* ========================================= + 3. APP STYLES (from App.css) + ========================================= */ +#root { + width: 100%; + /* Fix width */ +} + +/* ========================================= + 4. COMPONENT STYLES + ========================================= */ + +/* PostCard.css */ +.post-card { + background-color: var(--white); + border: 1px solid var(--border-color); + border-radius: 1rem; + box-shadow: var(--shadow); + overflow: hidden; + transition: box-shadow 0.3s ease, transform 0.3s ease; + display: flex; + flex-direction: column; + height: 100%; +} + +.post-card:hover { + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + transform: translateY(-5px); +} + +.post-card-image-wrapper { + height: 12rem; + background-color: var(--light-gray); + overflow: hidden; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.post-card-image { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.post-card:hover .post-card-image { + transform: scale(1.05); +} + +.post-card-content { + padding: 1.5rem; + display: flex; + flex-direction: column; + flex: 1; +} + +.post-meta { + display: flex; + align-items: center; + font-size: 0.875rem; + color: var(--text-color); + opacity: 0.7; + margin-bottom: 0.75rem; +} + +.post-category-badge { + color: var(--primary-color); + font-weight: 700; + text-transform: uppercase; + font-size: 0.75rem; + letter-spacing: 0.05em; +} + +.post-meta-divider { + margin: 0 0.5rem; + color: var(--border-color); +} + +.post-title { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: 0.75rem; + line-height: 1.4; +} + +.post-title a { + color: var(--text-color); + text-decoration: none; + transition: color 0.2s; +} + +.post-title a:hover { + color: var(--primary-color); +} + +.post-excerpt { + color: var(--text-color); + opacity: 0.8; + font-size: 0.95rem; + line-height: 1.6; + margin-bottom: 1.5rem; + flex: 1; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.post-read-more { + display: inline-flex; + align-items: center; + color: var(--primary-color); + font-weight: 600; + text-decoration: none; + font-size: 0.95rem; + transition: color 0.2s; +} + +.post-read-more:hover { + color: var(--secondary-color); + text-decoration: underline; +} + +/* ResourceListItem.css */ +.resource-list-item { + display: flex; + align-items: center; + padding: 1.25rem 0; + border-bottom: 1px solid var(--border-color); + transition: background-color 0.2s; +} + +.resource-list-item:hover { + background-color: rgba(0, 0, 0, 0.02); + /* Subtle gray overlay */ +} + +.resource-item-date { + width: 120px; + font-size: 0.9rem; + color: var(--text-color); + opacity: 0.6; + flex-shrink: 0; +} + +.resource-item-content { + flex: 1; + padding-right: 2rem; +} + +.resource-item-title { + font-size: 1.1rem; + font-weight: 500; + color: var(--text-color); + text-decoration: none; + display: block; + transition: color 0.2s; +} + +.resource-item-title:hover { + color: var(--primary-color); + text-decoration: underline; +} + +.resource-item-meta { + display: flex; + align-items: center; + gap: 1.5rem; + flex-shrink: 0; +} + +.resource-item-author { + font-size: 0.9rem; + color: var(--text-color); + opacity: 0.6; + display: none; +} + +.resource-item-link { + font-size: 0.85rem; + font-weight: 600; + color: var(--primary-color); + text-decoration: none; + padding: 0.4rem 0.8rem; + background-color: rgba(74, 98, 138, 0.1); + border: 1px solid rgba(74, 98, 138, 0.2); + border-radius: 0.375rem; + transition: all 0.2s; + white-space: nowrap; +} + +.resource-item-link:hover { + background-color: rgba(74, 98, 138, 0.2); + color: var(--primary-color); +} + +@media (min-width: 640px) { + .resource-item-author { + display: block; + } +} + +@media (max-width: 640px) { + .resource-list-item { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .resource-item-date { + font-size: 0.8rem; + } + + .resource-item-meta { + width: 100%; + justify-content: flex-end; + } +} + +/* ========================================= + 5. PAGE STYLES + ========================================= */ + +/* Home (Process Section) */ +.process-grid { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + text-align: center; + gap: 20px; +} + +.process-step-card { + flex: 1; + min-width: 120px; + background-color: var(--white); + padding: 20px; + border-radius: 10px; + box-shadow: var(--shadow); + border: 1px solid var(--border-color); + transition: transform 0.3s ease; +} + +.process-step-card:hover { + transform: translateY(-5px); + border-color: var(--primary-color); +} + +.process-step-number { + font-size: 2rem; + margin-bottom: 10px; + color: var(--primary-color); + font-weight: 700; +} + +.process-step-card h3 { + color: var(--text-color); +} + +/* Home (Hero Overlay) */ +.hero { + height: 100vh; + display: flex; + align-items: center; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'); + background-size: cover; + background-position: center; + color: var(--white); + text-align: center; + padding-top: 70px; + /* Offset for fixed header */ +} + +.hero-content h1 { + font-size: 3rem; + margin-bottom: 20px; +} + +.hero-content p { + font-size: 1.25rem; + margin-bottom: 30px; +} + +.hero-btns { + display: flex; + justify-content: center; + gap: 15px; +} + +.btn-outline { + background-color: transparent; + border: 2px solid var(--white); + color: var(--white); +} + +.btn-outline:hover { + background-color: var(--white); + color: var(--primary-color); +} + +/* Contact Section Styles */ +.contact-form { + max-width: 600px; + margin: 0 auto; + background: var(--white); + padding: 40px; + border-radius: 10px; + box-shadow: var(--shadow); +} + +.form-group { + margin-bottom: 20px; +} + +.form-group label { + display: block; + margin-bottom: 8px; + font-weight: 500; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 12px; + background-color: var(--white); + color: var(--text-color); + border: 1px solid var(--border-color); + border-radius: 5px; + font-family: inherit; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 2px var(--primary-color); +} + +/* About.css */ +.about-hero { + margin-bottom: 60px; + text-align: center; + padding: 80px 20px; + background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.9)), url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'); + background-size: cover; + background-position: center; + border-radius: 20px; + box-shadow: var(--shadow); + color: var(--white); + /* Force white text */ + border: 1px solid var(--border-color); +} + +.about-hero .section-title { + color: var(--white); +} + +.about-intro { + max-width: 800px; + margin: 0 auto; +} + +.about-intro p { + font-size: 1.2rem; + line-height: 1.8; + font-weight: 500; + color: #e2e8f0; +} + +.vision-mission-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + margin-bottom: 80px; +} + +.vision-card { + padding: 30px; + background-color: var(--white); + border-radius: 10px; + border: 1px solid var(--border-color); + box-shadow: var(--shadow); + transition: transform 0.3s ease; +} + +.vision-card:hover { + transform: translateY(-5px); +} + +.vision-card h3 { + color: var(--primary-color); + margin-bottom: 15px; + font-size: 1.5rem; +} + +.vision-card p { + font-size: 1.1rem; + color: var(--text-color); + opacity: 0.9; +} + +.expert-profile { + margin-bottom: 80px; +} + +.profile-wrapper { + display: flex; + gap: 50px; + align-items: center; + flex-wrap: wrap; + justify-content: center; +} + +.profile-image-container { + flex: 0 0 350px; +} + +.profile-image { + width: 100%; + border-radius: 20px; + box-shadow: var(--shadow); +} + +.profile-content-container { + flex: 1; + min-width: 300px; +} + +.profile-card { + background: var(--white); + padding: 30px; + border-radius: 20px; + border: 1px solid var(--border-color); + box-shadow: var(--shadow); +} + +.profile-list { + list-style: none; + padding: 0; + line-height: 2.5; + font-size: 1.1rem; + color: var(--text-color); +} + +/* ServiceDetail.css */ +.service-container { + padding-top: 80px; + min-height: 100vh; + padding-bottom: 80px; +} + +.service-header { + text-align: center; + padding: 0 20px 60px; +} + +.service-title { + font-size: 2.5rem; + font-weight: 700; + color: var(--text-color); + margin-bottom: 1rem; +} + +.service-subtitle { + color: var(--text-color); + opacity: 0.8; + font-size: 1.125rem; + line-height: 1.6; +} + +.service-section { + margin-bottom: 5rem; +} + +.section-label { + font-size: 1.875rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-color); +} + +.section-desc { + color: var(--text-color); + opacity: 0.8; + margin-bottom: 2.5rem; +} + +.purpose-grid { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 1.5rem; +} + +@media (min-width: 768px) { + .purpose-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +.purpose-card { + background-color: var(--white); + border: 1px solid var(--border-color); + border-radius: 1rem; + padding: 2rem; + height: 16rem; + position: relative; + overflow: hidden; + transition: transform 0.3s ease; + box-shadow: var(--shadow); +} + +.purpose-card:hover { + transform: translateY(-5px); +} + +.purpose-card-title { + font-size: 1.25rem; + font-weight: 700; + color: var(--text-color); + margin-bottom: 0.5rem; +} + +.purpose-card-text { + color: var(--text-color); + opacity: 0.8; + font-size: 0.875rem; + line-height: 1.5; +} + +.purpose-icon { + position: absolute; + bottom: 1rem; + right: 1rem; + font-size: 4rem; + opacity: 0.2; + color: var(--primary-color); +} + +.curriculum-grid { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 1.5rem; +} + +@media (min-width: 768px) { + .curriculum-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .curriculum-grid { + grid-template-columns: repeat(4, 1fr); + } +} + +.curriculum-card { + background-color: var(--white); + border: 1px solid var(--border-color); + border-radius: 1rem; + padding: 2rem; + transition: box-shadow 0.3s ease; + display: flex; + flex-direction: column; + box-shadow: var(--shadow); +} + +.curriculum-card:hover { + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); +} + +.curriculum-number { + display: block; + color: var(--primary-color); + font-weight: 700; + font-size: 1.125rem; + margin-bottom: 1rem; +} + +.curriculum-title { + font-size: 1.25rem; + font-weight: 700; + color: var(--text-color); + margin-bottom: 1.5rem; + min-height: 3.5rem; +} + +.curriculum-list { + list-style: none; + padding: 0; + margin: 0; + font-size: 0.875rem; + color: var(--text-color); +} + +.curriculum-list li { + display: flex; + align-items: flex-start; + margin-bottom: 0.75rem; + color: var(--text-color); + opacity: 0.9; +} + +.curriculum-bullet { + margin-right: 0.5rem; + color: var(--primary-color); +} + +.curriculum-btn { + width: 100%; + margin-top: 1.5rem; + padding: 0.75rem 1rem; + background-color: var(--white); + border: 1px solid var(--border-color); + border-radius: 0.5rem; + color: var(--text-color); + font-weight: 500; + cursor: pointer; + transition: background-color 0.2s; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.curriculum-btn:hover { + background-color: var(--light-gray); + color: var(--primary-color); +} + +.cta-banner { + background-color: var(--white); + border: 1px solid var(--border-color); + border-radius: 1rem; + padding: 3.5rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + gap: 2rem; + margin-bottom: 5rem; + box-shadow: var(--shadow); +} + +@media (min-width: 768px) { + .cta-banner { + flex-direction: row; + text-align: left; + } +} + +.cta-title { + font-size: 1.5rem; + font-weight: 700; + color: var(--text-color); + margin-bottom: 0.75rem; +} + +.cta-text { + color: var(--text-color); + opacity: 0.9; + font-size: 0.875rem; +} + +.cta-button { + background-color: var(--primary-color); + color: white; + padding: 0.75rem 2rem; + border-radius: 0.5rem; + font-weight: 700; + border: none; + cursor: pointer; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); + transition: background-color 0.2s; + white-space: nowrap; +} + +.cta-button:hover { + background-color: var(--secondary-color); +} + +/* Resources.css */ +.resources-container { + padding-top: 100px; + padding-bottom: 80px; + min-height: 100vh; +} + +.resources-header { + text-align: center; + margin-bottom: 3rem; +} + +.resources-title { + font-size: 2.5rem; + font-weight: 700; + color: var(--text-color); + margin-bottom: 1rem; +} + +.resources-subtitle { + color: var(--text-color); + opacity: 0.8; + font-size: 1.125rem; +} + +.resources-tabs { + display: flex; + justify-content: center; + margin-bottom: 3rem; + gap: 1rem; + flex-wrap: wrap; +} + +.tab-button { + padding: 0.75rem 1.5rem; + border-radius: 9999px; + font-weight: 600; + font-size: 1rem; + background-color: var(--white); + color: var(--text-color); + border: 1px solid var(--border-color); + cursor: pointer; + transition: all 0.2s; +} + +.tab-button:hover { + background-color: var(--light-gray); + color: var(--primary-color); +} + +.tab-button.active { + background-color: var(--primary-color); + color: white; + border-color: var(--primary-color); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2); +} + +.resources-all-grid { + display: grid; + grid-template-columns: 1fr; + gap: 3rem; +} + +@media (min-width: 1024px) { + .resources-all-grid { + grid-template-columns: repeat(2, 1fr); + align-items: start; + } +} + +.resources-section { + margin-bottom: 2rem; +} + +.resources-list { + background: var(--white); + border-radius: 1rem; + box-shadow: var(--shadow); + border: 1px solid var(--border-color); + padding: 0 1.5rem; + display: flex; + flex-direction: column; +} + +.section-heading { + border-left: 4px solid var(--primary-color); + padding-left: 1rem; + font-size: 1.5rem; + font-weight: 700; + color: var(--text-color); + margin-bottom: 1.5rem; +} + +.empty-message { + text-align: center; + padding: 3rem; + color: var(--text-color); + opacity: 0.6; + background: var(--white); + border-radius: 1rem; + border: 1px solid var(--border-color); + width: 100%; +} + +.resource-helper-text { + text-align: center; + margin-top: 1rem; + padding: 1rem; + background-color: rgba(74, 98, 138, 0.1); + border-radius: 0.5rem; + color: var(--primary-color); + border: 1px solid rgba(74, 98, 138, 0.2); + font-size: 0.9rem; +} + +/* Cases.css */ +.cases-container { + padding-top: 100px; + min-height: 100vh; + padding-bottom: 80px; +} + +.cases-header { + text-align: center; + margin-bottom: 4rem; +} + +.cases-title { + font-size: 2.5rem; + font-weight: 700; + color: var(--text-color); + margin-bottom: 1rem; +} + +.cases-subtitle { + color: var(--text-color); + opacity: 0.8; + font-size: 1.125rem; +} + +.cases-grid { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; +} + +@media (min-width: 768px) { + .cases-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-card { + background-color: var(--white); + border-radius: 1rem; + box-shadow: var(--shadow); + overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease; + display: flex; + flex-direction: column; + border: 1px solid var(--border-color); +} + +.case-card:hover { + transform: translateY(-5px); + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); + border-color: var(--primary-color); +} + +.case-image-wrapper { + height: 16rem; + position: relative; + overflow: hidden; + background-color: var(--light-gray); +} + +.case-image { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; +} + +.case-card:hover .case-image { + transform: scale(1.05); +} + +.case-category-badge { + position: absolute; + top: 1rem; + left: 1rem; + background-color: var(--primary-color); + color: white; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.75rem; + border-radius: 9999px; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.case-bar { + height: 0.5rem; + background-color: var(--primary-color); +} + +.case-content { + padding: 2rem; + flex: 1; + display: flex; + flex-direction: column; +} + +.case-category-text { + color: var(--primary-color); + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 0.5rem; +} + +.case-card-title { + font-size: 1.5rem; + font-weight: 700; + color: var(--text-color); + margin-bottom: 0.75rem; +} + +.case-result-badge { + display: inline-block; + background-color: rgba(74, 98, 138, 0.1); + color: var(--primary-color); + font-weight: 600; + font-size: 0.875rem; + padding: 0.25rem 0.75rem; + border-radius: 0.25rem; + margin-bottom: 1rem; + border: 1px solid rgba(74, 98, 138, 0.2); +} + +.case-details { + color: var(--text-color); + opacity: 0.8; + line-height: 1.625; +} + +/* News.css */ +.news-container { + padding-top: 100px; + padding-bottom: 80px; + min-height: 100vh; +} + +.news-header { + text-align: center; + margin-bottom: 4rem; +} + +.news-title { + font-size: 2.5rem; + font-weight: 700; + color: var(--text-color); + margin-bottom: 1rem; +} + +.news-subtitle { + color: var(--text-color); + font-size: 1.125rem; + max-width: 42rem; + margin: 0 auto; + line-height: 1.6; + opacity: 0.8; +} + +.news-grid { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; +} + +@media (min-width: 768px) { + .news-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .news-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +.news-loading, +.news-error, +.news-empty { + min-height: 100vh; + padding-top: 100px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +.loading-spinner { + width: 3rem; + height: 3rem; + border: 4px solid var(--border-color); + border-top-color: var(--primary-color); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.error-title { + font-size: 1.5rem; + font-weight: 700; + color: #ef4444; + margin-bottom: 1rem; +} + +.error-message { + color: var(--text-color); + opacity: 0.8; +} + +/* NewsDetail.css */ +.news-detail-container { + padding-top: 100px; + padding-bottom: 80px; + min-height: 100vh; + display: flex; + justify-content: center; +} + +.news-article { + background-color: var(--white); + max-width: 800px; + width: 100%; + margin: 0 20px; + padding: 3rem; + border-radius: 1rem; + box-shadow: var(--shadow); + border: 1px solid var(--border-color); +} + +.back-link { + color: var(--primary-color); + text-decoration: none; + font-weight: 600; + margin-top: 1rem; +} + +.article-header { + margin-bottom: 2rem; + text-align: center; +} + +.article-meta { + font-size: 0.9rem; + color: var(--text-color); + margin-bottom: 1rem; + display: flex; + justify-content: center; + align-items: center; + opacity: 0.7; +} + +.article-meta-divider { + margin: 0 0.5rem; +} + +.article-title { + font-size: 2.25rem; + font-weight: 800; + color: var(--text-color); + line-height: 1.3; +} + +.article-image-wrapper { + margin-bottom: 2.5rem; + border-radius: 0.75rem; + overflow: hidden; + box-shadow: var(--shadow); +} + +/* ... NewsDetail content styles ... */ \ No newline at end of file