@prosophia/lab-classic 0.0.2 → 0.0.4

package/dist/NewsArticlePage.module.css

@@ -0,0 +1,214 @@
+/* NewsArticlePage.module.css - Verdant Edition */
+
+.pageWrapper {
+  padding-top: var(--header-height, 80px);
+  min-height: 100vh;
+}
+
+.pageContainer {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 var(--space-xl, 3rem);
+}
+
+/* Page Header */
+.pageHeader {
+  text-align: center;
+  padding: var(--space-3xl, 6rem) 0;
+  margin-bottom: var(--space-2xl, 4rem);
+}
+
+.title {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  margin: 0 0 var(--space-md, 1.5rem) 0;
+  max-width: 900px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.meta {
+  font-size: 0.875rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--accent-tertiary, #5CB87A);
+}
+
+.main {
+  padding-bottom: var(--space-3xl, 6rem);
+}
+
+.content {
+  max-width: 850px;
+  margin: 0 auto;
+}
+
+/* Featured Image */
+.featuredImage {
+  width: 100%;
+  max-height: 500px;
+  height: auto;
+  object-fit: cover;
+  border-radius: var(--radius-xl, 20px);
+  margin-bottom: var(--space-2xl, 4rem);
+  box-shadow: 0 20px 60px rgba(10, 24, 16, 0.15);
+}
+
+/* Article Content */
+.content :global(p) {
+  margin: 0 0 var(--space-lg, 2rem) 0;
+  line-height: 1.8;
+  font-size: 1.0625rem;
+}
+
+:global(body:not(.dark-mode)) .content :global(p),
+:global(.light-mode) .content :global(p) {
+  color: var(--light-text-secondary, #153021);
+}
+
+:global(.dark-mode) .content :global(p),
+:global(.dark) .content :global(p) {
+  color: var(--dark-text-secondary, #8BDAA3);
+}
+
+.content :global(p:first-of-type) {
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin-bottom: var(--space-xl, 3rem);
+}
+
+.content :global(h2) {
+  font-size: 1.75rem;
+  font-weight: 600;
+  margin: var(--space-2xl, 4rem) 0 var(--space-lg, 2rem) 0;
+  padding-left: var(--space-md, 1.5rem);
+  position: relative;
+}
+
+.content :global(h2)::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 4px;
+  height: 100%;
+  background: linear-gradient(180deg, var(--accent-tertiary, #5CB87A), var(--accent-gold, #D4A574));
+  border-radius: 2px;
+}
+
+.content :global(h3) {
+  font-size: 1.375rem;
+  font-weight: 600;
+  margin: var(--space-xl, 3rem) 0 var(--space-md, 1.5rem) 0;
+  color: var(--accent-tertiary, #5CB87A);
+}
+
+.content :global(ul),
+.content :global(ol) {
+  margin: 0 0 var(--space-lg, 2rem) var(--space-xl, 3rem);
+  padding: 0;
+}
+
+.content :global(li) {
+  margin-bottom: var(--space-sm, 1rem);
+  line-height: 1.7;
+}
+
+.content :global(a) {
+  color: var(--accent-tertiary, #5CB87A);
+  text-decoration: none;
+  font-weight: 500;
+  border-bottom: 1px solid transparent;
+  transition: all var(--transition-base);
+}
+
+.content :global(a:hover) {
+  border-bottom-color: var(--accent-tertiary, #5CB87A);
+}
+
+.content :global(blockquote) {
+  margin: var(--space-xl, 3rem) 0;
+  padding: var(--space-lg, 2rem);
+  border-radius: var(--radius-lg, 16px);
+  font-style: italic;
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+}
+
+:global(body:not(.dark-mode)) .content :global(blockquote),
+:global(.light-mode) .content :global(blockquote) {
+  background: rgba(42, 104, 71, 0.08);
+  border-left: 4px solid var(--accent-tertiary, #5CB87A);
+  color: var(--light-text-secondary, #153021);
+}
+
+:global(.dark-mode) .content :global(blockquote),
+:global(.dark) .content :global(blockquote) {
+  background: rgba(92, 184, 122, 0.1);
+  border-left: 4px solid var(--accent-tertiary, #5CB87A);
+  color: var(--dark-text-secondary, #8BDAA3);
+}
+
+.content :global(img) {
+  display: block;
+  max-width: 100%;
+  max-height: 500px;
+  height: auto;
+  object-fit: contain;
+  margin: var(--space-2xl, 4rem) auto;
+  border-radius: var(--radius-lg, 16px);
+  box-shadow: 0 12px 40px rgba(10, 24, 16, 0.15);
+}
+
+/* Back Link */
+.backLinkWrapper {
+  margin-top: var(--space-3xl, 6rem);
+  text-align: center;
+  padding-top: var(--space-xl, 3rem);
+  border-top: 1px solid;
+}
+
+:global(body:not(.dark-mode)) .backLinkWrapper,
+:global(.light-mode) .backLinkWrapper {
+  border-top-color: rgba(21, 48, 33, 0.1);
+}
+
+:global(.dark-mode) .backLinkWrapper,
+:global(.dark) .backLinkWrapper {
+  border-top-color: rgba(139, 218, 163, 0.1);
+}
+
+.backLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.75rem;
+  border: 1px solid var(--accent-tertiary, #5CB87A);
+  border-radius: var(--radius-md, 12px);
+  font-weight: 500;
+  font-size: 0.9375rem;
+  text-decoration: none;
+  transition: all var(--transition-base);
+  backdrop-filter: blur(8px);
+}
+
+:global(body:not(.dark-mode)) .backLink,
+:global(.light-mode) .backLink {
+  background: rgba(42, 104, 71, 0.08);
+  color: var(--accent-primary, #2A6847);
+}
+
+:global(.dark-mode) .backLink,
+:global(.dark) .backLink {
+  background: rgba(92, 184, 122, 0.1);
+  color: var(--accent-tertiary, #5CB87A);
+}
+
+.backLink:hover {
+  background: linear-gradient(135deg, var(--accent-primary, #2A6847), var(--accent-secondary, #3A8F62));
+  color: white;
+  transform: translateY(-2px);
+  border-color: transparent;
+}

package/dist/NewsPage.module.css

@@ -0,0 +1,189 @@
+/* NewsPage.module.css - Verdant Edition */
+
+.pageWrapper {
+  padding-top: var(--header-height, 80px);
+  min-height: 100vh;
+}
+
+.newsSection {
+  padding: var(--space-3xl, 6rem) var(--space-xl, 3rem);
+}
+
+.sectionContainer {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* Page Header */
+.sectionHeading {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  margin: 0 0 var(--space-md, 1.5rem) 0;
+  text-align: center;
+}
+
+.subtitle {
+  font-size: 1.125rem;
+  line-height: 1.7;
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto var(--space-3xl, 6rem);
+}
+
+:global(body:not(.dark-mode)) .subtitle,
+:global(.light-mode) .subtitle {
+  color: var(--light-text-muted, #7F878B);
+}
+
+:global(.dark-mode) .subtitle,
+:global(.dark) .subtitle {
+  color: var(--dark-text-muted, #5C6366);
+}
+
+/* News Grid */
+.newsGrid {
+  display: grid;
+  gap: var(--space-lg, 2rem);
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+  .newsGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .newsGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.newsCardLink {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  height: 100%;
+}
+
+/* Verdant News Card - Glass with lift */
+.newsCard {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius-xl, 20px);
+  overflow: hidden;
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  transition: all var(--transition-slow);
+}
+
+:global(body:not(.dark-mode)) .newsCard,
+:global(.light-mode) .newsCard {
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(21, 48, 33, 0.08);
+  box-shadow: 0 8px 32px rgba(10, 24, 16, 0.08);
+}
+
+:global(.dark-mode) .newsCard,
+:global(.dark) .newsCard {
+  background: var(--dark-bg-tertiary);
+  border: 1px solid rgba(var(--accent-primary-rgb, 139, 218, 163), 0.12);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.newsCard:hover {
+  transform: translateY(-8px);
+}
+
+:global(body:not(.dark-mode)) .newsCard:hover,
+:global(.light-mode) .newsCard:hover {
+  box-shadow: 0 20px 60px rgba(10, 24, 16, 0.15);
+  border-color: rgba(42, 104, 71, 0.25);
+}
+
+:global(.dark-mode) .newsCard:hover,
+:global(.dark) .newsCard:hover {
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  border-color: rgba(var(--accent-primary-rgb, 139, 218, 163), 0.25);
+}
+
+/* News Image with zoom */
+.newsImageWrapper {
+  width: 100%;
+  height: 220px;
+  overflow: hidden;
+}
+
+.newsImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform var(--transition-slow);
+}
+
+.newsCard:hover .newsImage {
+  transform: scale(1.08);
+}
+
+.newsCardContent {
+  padding: var(--space-lg, 2rem);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.newsDate {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: var(--space-sm, 1rem);
+  color: var(--accent-tertiary, #5CB87A);
+}
+
+.newsTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.4;
+  margin: 0 0 var(--space-sm, 1rem) 0;
+  transition: color var(--transition-base);
+}
+
+.newsCard:hover .newsTitle {
+  color: var(--accent-tertiary, #5CB87A);
+}
+
+.newsExcerpt {
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  flex: 1;
+  margin-bottom: var(--space-md, 1.5rem);
+}
+
+:global(body:not(.dark-mode)) .newsExcerpt,
+:global(.light-mode) .newsExcerpt {
+  color: var(--light-text-muted, #7F878B);
+}
+
+:global(.dark-mode) .newsExcerpt,
+:global(.dark) .newsExcerpt {
+  color: var(--dark-text-muted, #5C6366);
+}
+
+.readMore {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: auto;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--accent-tertiary, #5CB87A);
+  transition: all var(--transition-base);
+}
+
+.newsCard:hover .readMore {
+  gap: 0.75rem;
+}

package/dist/PastMembersPage.module.css

@@ -0,0 +1,236 @@
+/* PastMembersPage.module.css - Verdant Edition */
+
+.pageWrapper {
+  padding-top: var(--header-height, 80px);
+  min-height: 100vh;
+}
+
+.pageContainer {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 var(--space-xl, 3rem);
+}
+
+/* Page Header */
+.pageHeader {
+  text-align: center;
+  padding: var(--space-3xl, 6rem) 0;
+  margin-bottom: var(--space-2xl, 4rem);
+}
+
+.title {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  margin: 0 0 var(--space-md, 1.5rem) 0;
+}
+
+.subtitle {
+  font-size: 1.125rem;
+  line-height: 1.7;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+:global(body:not(.dark-mode)) .subtitle,
+:global(.light-mode) .subtitle {
+  color: var(--light-text-muted, #7F878B);
+}
+
+:global(.dark-mode) .subtitle,
+:global(.dark) .subtitle {
+  color: var(--dark-text-muted, #5C6366);
+}
+
+.main {
+  padding-bottom: var(--space-3xl, 6rem);
+}
+
+.membersList {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3xl, 6rem);
+}
+
+/* Year Section */
+.yearSection {
+  width: 100%;
+}
+
+.yearHeader {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin-bottom: var(--space-xl, 3rem);
+  padding-left: var(--space-md, 1.5rem);
+  position: relative;
+}
+
+:global(body:not(.dark-mode)) .yearHeader,
+:global(.light-mode) .yearHeader {
+  color: var(--accent-secondary, #3A8F62);
+}
+
+:global(.dark-mode) .yearHeader,
+:global(.dark) .yearHeader {
+  color: var(--dark-text-secondary, #8BDAA3);
+}
+
+.yearHeader::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 4px;
+  height: 100%;
+  background: linear-gradient(180deg, var(--accent-tertiary, #5CB87A), var(--accent-gold, #D4A574));
+  border-radius: 2px;
+}
+
+/* Members Grid */
+.membersCardsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-lg, 2rem);
+}
+
+/* Member Card - Glass with translateX hover */
+.memberCard {
+  padding: var(--space-lg, 2rem);
+  border-radius: var(--radius-xl, 20px);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  transition: all var(--transition-base);
+}
+
+:global(body:not(.dark-mode)) .memberCard,
+:global(.light-mode) .memberCard {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(21, 48, 33, 0.08);
+}
+
+:global(.dark-mode) .memberCard,
+:global(.dark) .memberCard {
+  background: var(--dark-bg-tertiary);
+  border: 1px solid rgba(var(--accent-primary-rgb, 139, 218, 163), 0.08);
+}
+
+.memberCard:hover {
+  transform: translateX(8px);
+}
+
+:global(body:not(.dark-mode)) .memberCard:hover,
+:global(.light-mode) .memberCard:hover {
+  background: rgba(255, 255, 255, 0.9);
+  border-color: rgba(42, 104, 71, 0.15);
+  box-shadow: 0 8px 32px rgba(10, 24, 16, 0.1);
+}
+
+:global(.dark-mode) .memberCard:hover,
+:global(.dark) .memberCard:hover {
+  background: var(--dark-bg-secondary);
+  border-color: rgba(var(--accent-primary-rgb, 139, 218, 163), 0.15);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.memberName {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0 0 var(--space-xs, 0.5rem) 0;
+  transition: color var(--transition-base);
+}
+
+.memberCard:hover .memberName {
+  color: var(--accent-tertiary, #5CB87A);
+}
+
+.memberRole {
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin: 0 0 var(--space-xs, 0.5rem) 0;
+}
+
+:global(body:not(.dark-mode)) .memberRole,
+:global(.light-mode) .memberRole {
+  color: var(--light-text-muted, #7F878B);
+}
+
+:global(.dark-mode) .memberRole,
+:global(.dark) .memberRole {
+  color: var(--dark-text-muted, #5C6366);
+}
+
+.memberYears {
+  font-size: 0.8125rem;
+  font-style: italic;
+  margin: 0 0 var(--space-md, 1.5rem) 0;
+  color: var(--accent-tertiary, #5CB87A);
+}
+
+.memberDestination {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  margin: 0;
+  padding-top: var(--space-sm, 1rem);
+  border-top: 1px solid;
+}
+
+:global(body:not(.dark-mode)) .memberDestination,
+:global(.light-mode) .memberDestination {
+  color: var(--light-text-muted, #7F878B);
+  border-top-color: rgba(21, 48, 33, 0.1);
+}
+
+:global(.dark-mode) .memberDestination,
+:global(.dark) .memberDestination {
+  color: var(--dark-text-muted, #5C6366);
+  border-top-color: rgba(139, 218, 163, 0.1);
+}
+
+.memberDestination strong {
+  color: var(--accent-tertiary, #5CB87A);
+  font-weight: 600;
+}
+
+/* Back Link */
+.backLinkWrapper {
+  text-align: center;
+  margin-top: var(--space-2xl, 4rem);
+}
+
+.backLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.75rem;
+  border: 1px solid var(--accent-tertiary, #5CB87A);
+  border-radius: var(--radius-md, 12px);
+  font-weight: 500;
+  font-size: 0.9375rem;
+  text-decoration: none;
+  transition: all var(--transition-base);
+  backdrop-filter: blur(8px);
+}
+
+:global(body:not(.dark-mode)) .backLink,
+:global(.light-mode) .backLink {
+  background: rgba(42, 104, 71, 0.08);
+  color: var(--accent-primary, #2A6847);
+}
+
+:global(.dark-mode) .backLink,
+:global(.dark) .backLink {
+  background: rgba(92, 184, 122, 0.1);
+  color: var(--accent-tertiary, #5CB87A);
+}
+
+.backLink:hover {
+  background: linear-gradient(135deg, var(--accent-primary, #2A6847), var(--accent-secondary, #3A8F62));
+  color: white;
+  transform: translateY(-2px);
+  border-color: transparent;
+}