/** * Footer Styles - Professional & Production Ready * FSE-First Approach with Minimal Custom Styles * * @package Versana * @since 1.0.0 */ /* ========================================================================== Base Footer Styles ========================================================================== */ .site-footer { position: relative; margin-top: auto; /* Push to bottom for sticky footer */ } /* Footer widgets/content area */ .footer-widgets { padding-top: var(--wp--preset--spacing--60, 2.5rem); padding-bottom: var(--wp--preset--spacing--60, 2.5rem); } /* Footer bottom/copyright area */ .footer-bottom { padding-top: var(--wp--preset--spacing--40, 1.5rem); padding-bottom: var(--wp--preset--spacing--40, 1.5rem); border-top: 1px solid var(--wp--preset--color--contrast, rgba(0, 0, 0, 0.1)); } /* ========================================================================== Back to Top Button ========================================================================== */ .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 50px; height: 50px; background: var(--wp--preset--color--primary, #000); color: var(--wp--preset--color--base, #fff); border: none; border-radius: 50%; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; z-index: 998; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .back-to-top:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } .back-to-top.show { opacity: 1; visibility: visible; } /* Back to top icon */ .back-to-top svg { width: 24px; height: 24px; fill: currentColor; } /* Mobile: Smaller button */ @media (max-width: 781px) { .back-to-top { width: 44px; height: 44px; bottom: 1.5rem; right: 1.5rem; } .back-to-top svg { width: 20px; height: 20px; } } /* ========================================================================== Footer Navigation Enhancements ========================================================================== */ /* Footer menu links - subtle styling */ .site-footer .wp-block-navigation-item__content { padding: var(--wp--preset--spacing--20, 0.5rem) 0; text-decoration: none; transition: opacity 0.2s ease; } .site-footer .wp-block-navigation-item__content:hover { opacity: 0.7; } /* Footer navigation - compact spacing */ .site-footer .wp-block-navigation__container { gap: var(--wp--preset--spacing--30, 1rem); } /* Mobile: Stack footer navigation */ @media (max-width: 781px) { .site-footer .wp-block-navigation__container { flex-direction: column; align-items: flex-start; } } /* ========================================================================== Footer Social Links Enhancement ========================================================================== */ /* Social icons in footer - consistent sizing */ .site-footer .wp-block-social-links { gap: var(--wp--preset--spacing--30, 1rem); } .site-footer .wp-block-social-link { width: 36px; height: 36px; } /* ========================================================================== Copyright Text Styling ========================================================================== */ .footer-copyright { font-size: var(--wp--preset--font-size--small, 0.875rem); opacity: 0.8; } /* ========================================================================== Sticky Footer Support ========================================================================== */ /* * Make footer stick to bottom on short pages * Requires adding class to or root element */ .has-sticky-footer { min-height: 100vh; display: flex; flex-direction: column; } .has-sticky-footer .site-footer { margin-top: auto; } /* ========================================================================== Admin Bar Adjustment ========================================================================== */ /* Adjust back-to-top position when admin bar is present */ .admin-bar .back-to-top { bottom: calc(2rem + 32px); } @media screen and (max-width: 782px) { .admin-bar .back-to-top { bottom: calc(1.5rem + 46px); } } /* ========================================================================== Accessibility Enhancements ========================================================================== */ /* Focus visible for back-to-top button */ .back-to-top:focus-visible { outline: 2px solid var(--wp--preset--color--base, #fff); outline-offset: 2px; } /* Skip to footer link (for accessibility) */ .skip-to-footer { position: absolute; top: -40px; left: 0; background: var(--wp--preset--color--contrast, #000); color: var(--wp--preset--color--base, #fff); padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--30, 1rem); text-decoration: none; z-index: 10000; } .skip-to-footer:focus { top: 0; } /* ========================================================================== Print Styles ========================================================================== */ @media print { .back-to-top { display: none; } }