/** * Footer Styles * * Styles for the site footer including widget areas, footer bottom, * and responsive design. * * @package Apus_Theme * @since 1.0.0 */ /* ========================================================================== Footer Main Container ========================================================================== */ .site-footer { background-color: #1a1a1a; color: #e0e0e0; margin-top: auto; } /* ========================================================================== Footer Widgets Section ========================================================================== */ .footer-widgets { padding: 4rem 0 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer-widget-area { margin-bottom: 1rem; } /* Widget Titles */ .footer-widget-area .widget-title { font-size: 1.125rem; font-weight: 600; color: #ffffff; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid rgba(255, 255, 255, 0.15); text-transform: uppercase; letter-spacing: 0.5px; } /* Widget Content */ .footer-widget-area .widget { margin-bottom: 2rem; } .footer-widget-area .widget:last-child { margin-bottom: 0; } /* Widget Links */ .footer-widget-area a { color: #b0b0b0; text-decoration: none; transition: color 0.3s ease; } .footer-widget-area a:hover, .footer-widget-area a:focus { color: #ffffff; text-decoration: none; } /* Widget Lists */ .footer-widget-area ul { list-style: none; padding: 0; margin: 0; } .footer-widget-area ul li { margin-bottom: 0.75rem; position: relative; padding-left: 1.25rem; } .footer-widget-area ul li:last-child { margin-bottom: 0; } .footer-widget-area ul li::before { content: "\203A"; position: absolute; left: 0; color: #b0b0b0; font-size: 1.25rem; line-height: 1; } /* Widget Text */ .footer-widget-area p { margin-bottom: 1rem; line-height: 1.6; color: #b0b0b0; } .footer-widget-area p:last-child { margin-bottom: 0; } /* Widget Forms */ .footer-widget-area input[type="text"], .footer-widget-area input[type="email"], .footer-widget-area input[type="search"], .footer-widget-area textarea { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; padding: 0.5rem 0.75rem; border-radius: 4px; } .footer-widget-area input[type="text"]:focus, .footer-widget-area input[type="email"]:focus, .footer-widget-area input[type="search"]:focus, .footer-widget-area textarea:focus { background-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); outline: none; box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1); } .footer-widget-area input::placeholder, .footer-widget-area textarea::placeholder { color: #888888; } /* Widget Buttons */ .footer-widget-area button, .footer-widget-area input[type="submit"], .footer-widget-area .btn { background-color: #ffffff; color: #1a1a1a; border: none; padding: 0.5rem 1.5rem; border-radius: 4px; cursor: pointer; font-weight: 500; transition: all 0.3s ease; } .footer-widget-area button:hover, .footer-widget-area input[type="submit"]:hover, .footer-widget-area .btn:hover { background-color: #f0f0f0; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } /* ========================================================================== Footer Bottom Section ========================================================================== */ .footer-bottom { padding: 2rem 0; background-color: #0d0d0d; border-top: 1px solid rgba(255, 255, 255, 0.05); } /* Copyright Text */ .copyright-text { font-size: 0.875rem; color: #888888; margin: 0; } .copyright-text .site-name { color: #ffffff; font-weight: 500; } /* Footer Navigation Menu */ .footer-navigation { display: flex; justify-content: flex-end; } .footer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; } .footer-menu li { margin: 0; } .footer-menu a { color: #888888; text-decoration: none; font-size: 0.875rem; transition: color 0.3s ease; font-weight: 400; } .footer-menu a:hover, .footer-menu a:focus { color: #ffffff; text-decoration: none; } .footer-menu .current-menu-item a, .footer-menu .current_page_item a { color: #ffffff; } /* ========================================================================== Widget Specific Styles ========================================================================== */ /* Recent Posts Widget */ .footer-widget-area .widget_recent_entries ul li { padding-left: 0; } .footer-widget-area .widget_recent_entries ul li::before { display: none; } .footer-widget-area .widget_recent_entries .post-date { display: block; font-size: 0.75rem; color: #888888; margin-top: 0.25rem; } /* Categories Widget */ .footer-widget-area .widget_categories ul li, .footer-widget-area .widget_archive ul li { display: flex; justify-content: space-between; align-items: center; } .footer-widget-area .widget_categories ul li::before, .footer-widget-area .widget_archive ul li::before { position: static; margin-right: 0.5rem; } /* Tag Cloud Widget */ .footer-widget-area .tagcloud, .footer-widget-area .wp-block-tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; } .footer-widget-area .tagcloud a, .footer-widget-area .wp-block-tag-cloud a { display: inline-block; padding: 0.25rem 0.75rem; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; font-size: 0.875rem !important; transition: all 0.3s ease; } .footer-widget-area .tagcloud a:hover, .footer-widget-area .wp-block-tag-cloud a:hover { background-color: rgba(255, 255, 255, 0.2); color: #ffffff; } /* Search Widget */ .footer-widget-area .widget_search form { display: flex; gap: 0.5rem; } .footer-widget-area .widget_search input[type="search"] { flex: 1; } /* Calendar Widget */ .footer-widget-area .widget_calendar table { width: 100%; border-collapse: collapse; } .footer-widget-area .widget_calendar th, .footer-widget-area .widget_calendar td { padding: 0.5rem; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); } .footer-widget-area .widget_calendar th { background-color: rgba(255, 255, 255, 0.1); font-weight: 600; } .footer-widget-area .widget_calendar td a { font-weight: 600; color: #ffffff; } /* Social Media Links */ .footer-widget-area .social-links { display: flex; gap: 1rem; flex-wrap: wrap; } .footer-widget-area .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; transition: all 0.3s ease; } .footer-widget-area .social-links a:hover { background-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } /* ========================================================================== Responsive Design ========================================================================== */ /* Tablet Breakpoint (768px and below) */ @media (max-width: 767.98px) { .footer-widgets { padding: 3rem 0 2rem; } .footer-widget-area { margin-bottom: 2rem; } .footer-widget-area .widget-title { font-size: 1rem; margin-bottom: 1.25rem; padding-bottom: 0.5rem; } .footer-bottom { padding: 1.5rem 0; } .footer-navigation { justify-content: center; } .footer-menu { justify-content: center; gap: 1rem; } .copyright-text { margin-bottom: 1rem; } } /* Mobile Breakpoint (576px and below) */ @media (max-width: 575.98px) { .footer-widgets { padding: 2rem 0 1.5rem; } .footer-widget-area { margin-bottom: 2.5rem; } .footer-widget-area .widget-title { font-size: 0.9375rem; } .footer-bottom { padding: 1.25rem 0; } .footer-menu { flex-direction: column; gap: 0.75rem; align-items: center; } .footer-menu li { width: 100%; text-align: center; } .copyright-text, .footer-menu { font-size: 0.8125rem; } .footer-widget-area .social-links { justify-content: center; } } /* Large Desktop Breakpoint (1200px and above) */ @media (min-width: 1200px) { .footer-widgets { padding: 5rem 0 4rem; } .footer-widget-area .widget-title { font-size: 1.25rem; } } /* ========================================================================== Print Styles ========================================================================== */ @media print { .footer-widgets { display: none; } .footer-bottom { background: transparent; border: none; padding: 1rem 0; } .footer-navigation, .theme-credits { display: none; } .copyright-text { color: #000000; } } /* ========================================================================== Accessibility Improvements ========================================================================== */ /* Focus Styles */ .footer-widget-area a:focus, .footer-menu a:focus, .footer-widget-area button:focus, .footer-widget-area input:focus, .footer-widget-area textarea:focus { outline: 2px solid #ffffff; outline-offset: 2px; } /* Screen Reader Text */ .footer-widget-area .screen-reader-text { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Skip Link Focus */ .skip-to-footer:focus { position: fixed; top: 0; left: 0; background: #ffffff; color: #1a1a1a; padding: 1rem; z-index: 100000; text-decoration: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } /* High Contrast Mode Support */ @media (prefers-contrast: high) { .site-footer { border-top: 3px solid #ffffff; } .footer-widgets { border-bottom-width: 2px; } .footer-widget-area a, .footer-menu a { text-decoration: underline; } } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { .footer-widget-area a, .footer-widget-area button, .footer-widget-area .btn, .footer-menu a, .footer-widget-area .social-links a { transition: none; } }