/*============================================================================== Clunky Design System (CDS) File: footer.css Version: 0.1.0 Sprint: 1 Purpose: Site footer, resource navigation, pillar links, newsletter CTA, legal information and bottom navigation. ==============================================================================*/ /*============================================================================== SECTION 1 Footer ==============================================================================*/ .site-footer{ margin-top:6rem; background:#0f172a; color:rgba(255,255,255,.88); overflow:hidden; } .site-footer a{ color:rgba(255,255,255,.88); text-decoration:none; transition:color .2s ease; } .site-footer a:hover{ color:#ffffff; } /*============================================================================== SECTION 2 Footer Container ==============================================================================*/ .footer-container{ max-width:1280px; margin-inline:auto; padding:5rem 1.5rem 2rem; } /*============================================================================== SECTION 3 Newsletter Banner ==============================================================================*/ .footer-banner{ display:grid; grid-template-columns:2fr 1fr; gap:3rem; align-items:center; padding:3rem; margin-bottom:4rem; border-radius:28px; background: linear-gradient( 135deg, rgba(59,130,246,.12), rgba(16,185,129,.08)); border:1px solid rgba(255,255,255,.08); } .footer-banner h2{ margin-top:0; margin-bottom:1rem; color:#ffffff; } .footer-banner p{ margin-bottom:0; color:rgba(255,255,255,.78); } .footer-banner-actions{ display:flex; justify-content:flex-end; align-items:center; gap:1rem; flex-wrap:wrap; } /*============================================================================== SECTION 4 Footer Grid ==============================================================================*/ .footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:3rem; } /*============================================================================== SECTION 5 Brand Column ==============================================================================*/ .footer-brand{ max-width:420px; } .footer-logo{ display:inline-flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; font-size:1.4rem; font-weight:800; color:#ffffff; } .footer-description{ line-height:1.8; color:rgba(255,255,255,.75); margin-bottom:2rem; } /*============================================================================== SECTION 6 Footer Headings ==============================================================================*/ .footer-title{ margin-bottom:1.25rem; font-size:1rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#ffffff; } /*============================================================================== SECTION 7 Navigation Lists ==============================================================================*/ .footer-nav{ list-style:none; padding:0; margin:0; display:grid; gap:.75rem; } .footer-nav li{ margin:0; } .footer-nav a{ display:inline-flex; align-items:center; gap:.5rem; } .footer-nav a:hover{ transform:translateX(4px); } /*============================================================================== SECTION 8 Featured Resource ==============================================================================*/ .footer-feature{ margin-top:2rem; padding:1.5rem; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); } .footer-feature h3{ margin-top:0; margin-bottom:.75rem; font-size:1rem; color:#ffffff; } .footer-feature p{ margin-bottom:1rem; font-size:.95rem; color:rgba(255,255,255,.72); } /*============================================================================== SECTION 9 Topic Tags ==============================================================================*/ .footer-tags{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; } .footer-tag{ display:inline-flex; align-items:center; padding:.45rem .85rem; border-radius:999px; background:rgba(255,255,255,.08); font-size:.82rem; font-weight:600; transition: background .2s ease, transform .2s ease; } .footer-tag:hover{ background:rgba(59,130,246,.35); transform:translateY(-2px); } /*============================================================================== SECTION 10 Divider ==============================================================================*/ .footer-divider{ margin:3rem 0 2rem; height:1px; background:rgba(255,255,255,.08); } /*============================================================================== SECTION 11 Bottom Bar ==============================================================================*/ .footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; font-size:.92rem; color:rgba(255,255,255,.62); } .footer-bottom-links{ display:flex; flex-wrap:wrap; gap:1.5rem; } /*============================================================================== SECTION 12 Reading Time / Version ==============================================================================*/ .footer-meta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; font-size:.82rem; color:rgba(255,255,255,.58); } /*============================================================================== SECTION 13 Back To Top ==============================================================================*/ .back-to-top{ display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-radius:999px; background:rgba(255,255,255,.08); font-weight:600; transition: background .2s ease, transform .2s ease; } .back-to-top:hover{ background:rgba(59,130,246,.28); transform:translateY(-2px); } /*============================================================================== SECTION 14 Responsive ==============================================================================*/ @media (max-width:1024px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } .footer-banner{ grid-template-columns:1fr; } .footer-banner-actions{ justify-content:flex-start; } } @media (max-width:768px){ .footer-container{ padding:4rem 1.25rem 2rem; } .footer-grid{ grid-template-columns:1fr; gap:2.5rem; } .footer-bottom{ flex-direction:column; align-items:flex-start; } .footer-bottom-links{ flex-direction:column; gap:.75rem; } .footer-tags{ gap:.5rem; } .footer-banner{ padding:2rem; } } /*============================================================================== END OF FILE Version 0.1.0 Future Sections 15 Newsletter Form 16 Social Links 17 GitHub Activity 18 Recent Articles 19 Related Resources 20 Search Footer 21 Popular Topics 22 Mini Sitemap 23 Theme Toggle 24 Copyright Banner 25 Structured Data Helpers ==============================================================================*/ /* Footer CTA correction: the global footer link colour must not override CDS button text. */ .footer-banner-actions .btn-primary, .footer-banner-actions .btn-secondary { text-decoration: none; } .footer-banner-actions .btn-primary { color: #ffffff; } .footer-banner-actions .btn-secondary { background: #ffffff; border: 1px solid var(--color-border); color: var(--color-heading); } .footer-banner-actions .btn-secondary:hover { background: var(--color-bg-alt); color: var(--color-heading); }