diff --git a/buy.html b/buy.html index 20075675..4d3d34a7 100644 --- a/buy.html +++ b/buy.html @@ -218,6 +218,7 @@ line-height: 1.6; margin-bottom: 20px; display: -webkit-box; + line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; @@ -403,6 +404,216 @@ border-radius: 8px; cursor: pointer; } + + /* Footer Styles */ + .footer { + padding: 60px 0 20px; + background: #f4f7fb; + color: #111827; + margin-top: 60px; + } + + body.dark-mode .footer { + background: #0b0f14; + color: #e5e7eb; + } + + .footer .container { + max-width: 1200px; + margin-inline: auto; + padding: 0 20px; + } + + .footer-grid { + display: grid; + grid-template-columns: 1.2fr 1fr 1fr 1.2fr; + gap: 32px; + align-items: start; + } + + .footer-brand .logo { + display: inline-flex; + align-items: center; + gap: 8px; + } + + .footer-brand .logo img { + height: 44px; + } + + .footer-text { + margin-top: 12px; + color: #475569; + } + + body.dark-mode .footer-text { + color: #cbd5e1; + } + + .footer .social-list { + display: flex; + gap: 12px; + margin-top: 14px; + } + + .footer .social-link { + font-size: 22px; + color: #1f2937; + } + + .footer .social-link:hover { + color: #2563eb; + } + + body.dark-mode .footer .social-link { + color: #cbd5e1; + } + + .footer-list-title { + font-weight: 800; + margin-bottom: 10px; + color: #0f172a; + } + + body.dark-mode .footer-list-title { + color: #e2e8f0; + } + + .footer-link { + color: #374151; + font-weight: 500; + text-decoration: none; + } + + .footer-link:hover { + color: #2563eb; + transform: translateX(2px); + } + + body.dark-mode .footer-link { + color: #cbd5e1; + } + + body.dark-mode .footer-link:hover { + color: #60a5fa; + } + + .newsletter { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 16px; + padding: 16px; + } + + body.dark-mode .newsletter { + background: #111827; + border-color: #263241; + } + + .newsletter h4 { + margin-bottom: 8px; + font-weight: 800; + } + + .newsletter p { + font-size: 0.95rem; + color: #475569; + margin-bottom: 12px; + } + + body.dark-mode .newsletter p { + color: #94a3b8; + } + + .newsletter .form { + display: flex; + gap: 8px; + } + + .newsletter input { + flex: 1; + padding: 10px 12px; + border-radius: 10px; + border: 1px solid #e5e7eb; + outline: none; + } + + body.dark-mode .newsletter input { + background: #0f1218; + color: #e5e7eb; + border-color: #263241; + } + + .newsletter button { + padding: 10px 14px; + border-radius: 10px; + background: #2563eb; + color: #fff; + border: none; + font-weight: 700; + } + + .newsletter button:hover { + background: #1e40af; + } + + .footer-bottom { + margin-top: 32px; + border-top: 1px solid #e5e7eb; + padding-top: 16px; + display: flex; + align-items: center; + justify-content: space-between; + } + + body.dark-mode .footer-bottom { + border-color: #263241; + } + + .footer-bottom .mini-links { + display: flex; + gap: 12px; + } + + .footer-bottom .mini-links a { + color: #475569; + font-size: 0.95rem; + } + + .footer-bottom .mini-links a:hover { + color: #2563eb; + } + + .footer-list { + list-style-type: none; + } + + .social-list { + list-style-type: none; + display: flex; + gap: 12px; + } + + .copyright { + color: #475569; + } + + body.dark-mode .copyright { + color: #cbd5e1; + } + + @media (max-width: 768px) { + .footer-grid { + grid-template-columns: 1fr; + gap: 24px; + } + + .footer-bottom { + flex-direction: column; + gap: 16px; + text-align: center; + } + } @@ -544,6 +755,64 @@