diff --git a/frontend/css/style-responsive.css b/frontend/css/style-responsive.css index 7fd9e3d82..e48f98b89 100644 --- a/frontend/css/style-responsive.css +++ b/frontend/css/style-responsive.css @@ -32,6 +32,21 @@ input { min-width: 44px; } +.main-footer a { + min-height: 0; + min-width: 0; +} + +.main-footer .footer-nav a, +.main-footer .footer-legal a { + line-height: 1.35; +} + +.main-footer .social-icons a { + min-height: 40px; + min-width: 40px; +} + @media (max-width: 768px) { button, @@ -39,6 +54,16 @@ input { min-height: 48px; min-width: 48px; } + + .main-footer a { + min-height: 0; + min-width: 0; + } + + .main-footer .social-icons a { + min-height: 40px; + min-width: 40px; + } } /* --- Extra Large Screens (1200px+) --- */ @@ -1135,4 +1160,4 @@ input { .sort-select { width: 100%; } -} \ No newline at end of file +} diff --git a/frontend/css/style.css b/frontend/css/style.css index a505fa9bf..39a9353af 100644 --- a/frontend/css/style.css +++ b/frontend/css/style.css @@ -7496,22 +7496,44 @@ body.night-mode .tooltip-author { } .main-footer { - - padding: 4rem 2rem 1rem; + width: 100%; + box-sizing: border-box; + margin-top: 4rem; + padding: 60px 2rem 1rem; + background: var(--card-bg); + border-top: 1px solid var(--glass-border); + color: var(--text-main); } .footer-container { + width: min(1200px, 100%); + margin: 0 auto; display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 2rem; + grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(160px, 1fr)); + gap: 3rem; + align-items: start; + padding-bottom: 2rem; + border-bottom: 1px solid var(--glass-border); } .footer-container a { - + min-width: 0; + min-height: 0; text-decoration: none; transition: color 0.3s ease; } +.main-footer .footer-nav a, +.main-footer .footer-legal a { + display: inline; + line-height: 1.35; +} + +.main-footer .social-icons a { + min-width: 40px; + min-height: 40px; +} + .social-icons { @@ -7525,6 +7547,32 @@ body.night-mode .tooltip-author { padding-top: 1rem; border-top: 1px solid #374151; } + +@media (max-width: 900px) { + .footer-container { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 768px) { + .main-footer { + padding: 60px 1.25rem 1rem; + } + + .footer-container { + grid-template-columns: 1fr; + gap: 2rem; + text-align: center; + } + + .footer-brand { + align-items: center; + } + + .social-icons { + justify-content: center; + } +} /* ========================= Reader Perspectives ========================= */ diff --git a/frontend/css/style_main.css b/frontend/css/style_main.css index fb38ee86a..da8c748d2 100644 --- a/frontend/css/style_main.css +++ b/frontend/css/style_main.css @@ -2803,7 +2803,9 @@ main { background: var(--card-bg); /* Use card-bg for better contrast in dark mode */ border-top: 1px solid var(--glass-border); - padding: 3rem 2rem 1rem; + width: 100%; + box-sizing: border-box; + padding: 60px 2rem 1rem; margin-top: 4rem; color: var(--text-main); font-family: 'Georgia', serif; @@ -2812,11 +2814,12 @@ main { } .footer-container { - max-width: 1200px; + width: min(1200px, 100%); margin: 0 auto; display: grid; - grid-template-columns: 2fr 1fr 1fr; + grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(160px, 1fr)); gap: 3rem; + align-items: start; padding-bottom: 2rem; border-bottom: 1px solid var(--glass-border); } @@ -2853,6 +2856,7 @@ main { } .footer-nav h3, +.footer-legal h3, .footer-social h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; @@ -2860,7 +2864,8 @@ main { color: var(--text-main); } -.footer-nav ul { +.footer-nav ul, +.footer-legal ul { list-style: none; padding: 0; margin: 0; @@ -2869,15 +2874,20 @@ main { gap: 0.8rem; } -.footer-nav li a { +.footer-nav li a, +.footer-legal li a { text-decoration: none; color: var(--text-muted); transition: all 0.3s ease; font-size: 1rem; - display: inline-block; + display: inline; + min-width: 0; + min-height: 0; + line-height: 1.35; } -.footer-nav li a:hover { +.footer-nav li a:hover, +.footer-legal li a:hover { color: var(--accent-gold); transform: translateX(5px); } @@ -2890,6 +2900,8 @@ main { .social-icons a { width: 40px; height: 40px; + min-width: 40px; + min-height: 40px; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--glass-border); @@ -2932,7 +2944,17 @@ main { } } +@media (max-width: 900px) { + .footer-container { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + @media (max-width: 768px) { + .main-footer { + padding: 60px 1.25rem 1rem; + } + .footer-container { grid-template-columns: 1fr; gap: 2rem; diff --git a/frontend/pages/auth.html b/frontend/pages/auth.html index d85d93fd6..f735c2982 100644 --- a/frontend/pages/auth.html +++ b/frontend/pages/auth.html @@ -60,6 +60,19 @@ rel="stylesheet">