@prosophia/lab-classic 0.0.3 → 0.0.5

package/dist/Footer.module.css

@@ -0,0 +1,240 @@
+/* Footer.module.css - Verdant Edition */
+
+.footerWrapper {
+  padding: var(--space-3xl, 6rem) var(--space-xl, 3rem) var(--space-xl, 3rem);
+  margin-top: var(--space-3xl, 6rem);
+  border-top: 1px solid;
+}
+
+/* Light mode footer */
+:global(body:not(.dark-mode)) .footerWrapper,
+:global(.light-mode) .footerWrapper {
+  background: var(--light-bg-secondary, #F2F4F5);
+  border-top-color: rgba(21, 48, 33, 0.1);
+}
+
+/* Dark mode footer */
+:global(.dark-mode) .footerWrapper,
+:global(.dark) .footerWrapper {
+  background: var(--dark-bg-secondary, #0F2419);
+  border-top-color: rgba(139, 218, 163, 0.1);
+}
+
+.footerContainer {
+  max-width: 1400px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+/* Verdant 4-column grid */
+.mainFooter {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-3xl, 6rem);
+  margin-bottom: var(--space-3xl, 6rem);
+}
+
+@media (min-width: 768px) {
+  .mainFooter {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 1024px) {
+  .mainFooter {
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+  }
+}
+
+.footerAbout {
+  max-width: 400px;
+}
+
+/* Verdant Logo Style */
+.footerLogo {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--accent-tertiary, #5CB87A);
+  text-decoration: none;
+  display: inline-block;
+  margin-bottom: var(--space-md, 1.5rem);
+  transition: opacity var(--transition-base);
+}
+
+.footerLogo:hover {
+  opacity: 0.9;
+}
+
+.logoAccent {
+  color: var(--accent-tertiary, #5CB87A);
+}
+
+.footerDescription {
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  max-width: 400px;
+}
+
+:global(body:not(.dark-mode)) .footerDescription,
+:global(.light-mode) .footerDescription {
+  color: var(--light-text-muted, #7F878B);
+}
+
+:global(.dark-mode) .footerDescription,
+:global(.dark) .footerDescription {
+  color: var(--dark-text-muted, #5C6366);
+}
+
+/* Social Icons */
+.socials {
+  display: flex;
+  gap: var(--space-md, 1.5rem);
+  margin-top: var(--space-lg, 2rem);
+}
+
+.socialIcon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+}
+
+:global(body:not(.dark-mode)) .socialIcon,
+:global(.light-mode) .socialIcon {
+  background: rgba(42, 104, 71, 0.1);
+  color: var(--accent-primary, #2A6847);
+}
+
+:global(.dark-mode) .socialIcon,
+:global(.dark) .socialIcon {
+  background: rgba(92, 184, 122, 0.1);
+  color: var(--accent-tertiary, #5CB87A);
+}
+
+.socialIcon:hover {
+  transform: translateY(-3px);
+  background: var(--accent-tertiary, #5CB87A);
+  color: white;
+}
+
+/* Footer Links Grid */
+.footerLinksGrid {
+  display: contents;
+}
+
+.footerColumn h4 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  margin-bottom: var(--space-md, 1.5rem);
+}
+
+:global(body:not(.dark-mode)) .footerColumn h4,
+:global(.light-mode) .footerColumn h4 {
+  color: var(--light-text-primary, #0A1810);
+}
+
+:global(.dark-mode) .footerColumn h4,
+:global(.dark) .footerColumn h4 {
+  color: var(--dark-text-primary, #E8F9ED);
+}
+
+.footerColumn a {
+  display: block;
+  text-decoration: none;
+  font-size: 0.9375rem;
+  margin-bottom: var(--space-sm, 1rem);
+  transition: color var(--transition-base);
+}
+
+:global(body:not(.dark-mode)) .footerColumn a,
+:global(.light-mode) .footerColumn a {
+  color: var(--light-text-muted, #7F878B);
+}
+
+:global(.dark-mode) .footerColumn a,
+:global(.dark) .footerColumn a {
+  color: var(--dark-text-muted, #5C6366);
+}
+
+.footerColumn a::before {
+  display: none;
+}
+
+.footerColumn a:hover {
+  color: var(--accent-tertiary, #5CB87A);
+  padding-left: 0;
+}
+
+/* Footer Bottom Bar */
+.footerBottomBar {
+  padding-top: var(--space-lg, 2rem);
+  border-top: 1px solid;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-md, 1.5rem);
+}
+
+:global(body:not(.dark-mode)) .footerBottomBar,
+:global(.light-mode) .footerBottomBar {
+  border-top-color: rgba(21, 48, 33, 0.08);
+}
+
+:global(.dark-mode) .footerBottomBar,
+:global(.dark) .footerBottomBar {
+  border-top-color: rgba(139, 218, 163, 0.08);
+}
+
+.footerBottomBar p {
+  font-size: 0.875rem;
+}
+
+:global(body:not(.dark-mode)) .footerBottomBar p,
+:global(.light-mode) .footerBottomBar p {
+  color: var(--light-text-muted, #7F878B);
+}
+
+:global(.dark-mode) .footerBottomBar p,
+:global(.dark) .footerBottomBar p {
+  color: var(--dark-text-muted, #5C6366);
+}
+
+.legalLinks {
+  display: flex;
+  gap: var(--space-lg, 2rem);
+}
+
+.legalLinks a {
+  font-size: 0.875rem;
+  text-decoration: none;
+  transition: color var(--transition-base);
+}
+
+:global(body:not(.dark-mode)) .legalLinks a,
+:global(.light-mode) .legalLinks a {
+  color: var(--light-text-muted, #7F878B);
+}
+
+:global(.dark-mode) .legalLinks a,
+:global(.dark) .legalLinks a {
+  color: var(--dark-text-muted, #5C6366);
+}
+
+.legalLinks a:hover {
+  color: var(--accent-tertiary, #5CB87A);
+}
+
+/* Mobile adjustments */
+@media (max-width: 767px) {
+  .footerBottomBar {
+    flex-direction: column;
+    text-align: center;
+  }
+}