diff --git a/dist/css/styles.css b/dist/css/styles.css index 2aabe57..6d4a16c 100644 --- a/dist/css/styles.css +++ b/dist/css/styles.css @@ -913,69 +913,171 @@ select:focus { } } -.site-footer { - background: var(--bg-secondary); - border-top: 1px solid var(--border-primary); - padding: var(--space-6xl) 0 var(--space-3xl); - margin-top: auto -} + /* Footer */ + .site-footer { + background: var(--bg-secondary); + border-top: 1px solid var(--border-primary); + padding: var(--space-7xl) 0 var(--space-4xl); + margin-top: auto; + } -.footer-content { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: var(--space-4xl); - margin-bottom: var(--space-4xl) -} + .footer-content { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: var(--space-5xl); + margin-bottom: var(--space-5xl); + } -.footer-section h4 { - margin: 0 0 var(--space-xl); - font-size: var(--text-lg); - font-weight: var(--font-semibold); - color: var(--text-primary) -} + .footer-section h4, + .footer-section h5 { + margin: 0 0 var(--space-xl); + font-size: var(--text-lg); + font-weight: var(--font-semibold); + color: var(--text-primary); + } -.footer-section p { - margin: 0; - color: var(--text-secondary); - line-height: 1.6 -} + .footer-section h5 { + font-size: var(--text-base); + margin-bottom: var(--space-lg); + } -.footer-section ul { - list-style: none; - padding: 0; - margin: 0 -} + .footer-brand { + display: flex; + align-items: center; + gap: var(--space-md); + margin-bottom: var(--space-lg); + } -.footer-section li { - margin-bottom: var(--space-sm) -} + .footer-logo { + width: 32px; + height: 32px; + color: var(--primary); + } -.footer-section a { - color: var(--text-secondary); - transition: color var(--transition-fast) -} + .footer-brand h4 { + margin: 0; + font-size: var(--text-xl); + font-weight: var(--font-bold); + } -.footer-section a:hover { - color: var(--primary) -} + .footer-description { + margin: 0 0 var(--space-xl); + color: var(--text-secondary); + line-height: 1.6; + max-width: 300px; + } -.footer-bottom { - text-align: center; - padding-top: var(--space-3xl); - border-top: 1px solid var(--border-primary) -} + .footer-stats { + display: flex; + gap: var(--space-lg); + flex-wrap: wrap; + } -.footer-bottom p { - margin: 0; - color: var(--text-tertiary); - font-size: var(--text-sm) -} + .footer-stat { + display: inline-flex; + align-items: center; + padding: var(--space-xs) var(--space-md); + background: var(--bg-primary); + border: 1px solid var(--border-primary); + border-radius: var(--radius-full); + font-size: var(--text-xs); + font-weight: var(--font-medium); + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; + } -.footer-bottom a { - color: var(--primary) -} + .footer-links { + list-style: none; + padding: 0; + margin: 0; + } -.back-to-top.visible { + .footer-links li { + margin-bottom: var(--space-md); + } + + .footer-links a { + color: var(--text-secondary); + text-decoration: none; + transition: color var(--transition-fast); + font-size: var(--text-sm); + line-height: 1.5; + } + + .footer-links a:hover { + color: var(--primary); + } + + .footer-bottom { + padding-top: var(--space-4xl); + border-top: 1px solid var(--border-primary); + } + + .footer-bottom-content { + display: flex; + justify-content: space-between; + align-items: flex-end; + gap: var(--space-3xl); + } + + .footer-left p { + margin: 0 0 var(--space-sm); + color: var(--text-tertiary); + font-size: var(--text-sm); + } + + .footer-disclaimer { + font-size: var(--text-xs) !important; + color: var(--text-muted) !important; + font-style: italic; + } + + .footer-left a { + color: var(--primary); + text-decoration: none; + } + + .footer-left a:hover { + text-decoration: underline; + } + + .footer-right { + text-align: right; + } + + .footer-meta { + display: flex; + align-items: center; + gap: var(--space-lg); + } + + .last-updated { + font-size: var(--text-xs); + color: var(--text-muted); + } + + .github-link { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + background: var(--bg-primary); + border: 1px solid var(--border-primary); + border-radius: var(--radius-md); + color: var(--text-secondary); + text-decoration: none; + transition: all var(--transition-fast); + } + + .github-link:hover { + background: var(--primary); + color: white; + border-color: var(--primary); + transform: translateY(-1px); + box-shadow: var(--shadow-md); + }.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0) @@ -1184,6 +1286,15 @@ select:focus { text-align: center; gap: var(--space-md) } + + .footer-content { + grid-template-columns: repeat(2, 1fr); + gap: var(--space-xl) + } + + .footer-brand h3 { + font-size: var(--text-lg) + } } @media (max-width:480px) { @@ -1209,6 +1320,31 @@ select:focus { .comparison-filters { gap: var(--space-sm) } + + .footer-content { + grid-template-columns: 1fr; + gap: var(--space-lg) + } + + .footer-brand { + text-align: center; + padding-bottom: var(--space-lg); + border-bottom: 1px solid rgba(var(--text-rgb), 0.1); + margin-bottom: var(--space-lg) + } + + .footer-links { + justify-content: center + } + + .footer-links h4 { + text-align: center; + margin-bottom: var(--space-md) + } + + .footer-bottom { + text-align: center + } } @media print { diff --git a/dist/index.html b/dist/index.html index 7967897..f60f32f 100644 --- a/dist/index.html +++ b/dist/index.html @@ -61,7 +61,7 @@ })(); @@ -84,8 +84,12 @@ Intro Pricing Hosts - Speed Test Compare + Adult Hosts + Speed Test + Status + Resources +