/* ========================================================== Project : Compro Doodle Module : Layout File : footer.css Version : 2.3.0 Author : Doodle Engineering ========================================================== */ /* ========================================================== FOOTER ========================================================== */ .footer{ position:relative; width:100%; margin:0; padding: var(--footer-padding-top) var(--space-20) var(--footer-padding-bottom); background: var(--color-background); font-family: var(--font-family-primary); } /* ========================================================== CONTAINER ========================================================== */ .footer-container{ width:100%; max-width: var(--footer-container-width); margin: 0 auto; } /* ========================================================== NAVIGATION ========================================================== */ .footer-navigation{ display:flex; flex-direction:column; align-items:flex-start; } /* ========================================================== MENU ========================================================== */ .footer-menu{ display:flex; flex-direction:column; gap: var(--space-0); margin:0; padding:0; list-style:none; } /* ========================================================== SECONDARY MENU ========================================================== */ .footer-menu-secondary{ margin-top: var(--footer-menu-group-gap); } /* ========================================================== MENU LINK ========================================================== */ .footer-menu a{ display:inline-flex; align-items:center; min-height: var(--footer-menu-font-size); color: var(--footer-menu-color); font-family: var(--font-family-primary); font-size: var(--footer-menu-font-size); font-weight: var(--font-regular); line-height: var(--footer-menu-line-height); letter-spacing: var(--tracking-normal); text-decoration:none; transition: color var(--transition-normal); } /* ========================================================== MENU HOVER ========================================================== */ .footer-menu a:hover{ color: var(--footer-menu-hover-color); } /* ========================================================== MENU FOCUS ========================================================== */ .footer-menu a:focus-visible{ border-radius: var(--radius-xs); } /* ========================================================== SOCIAL MEDIA ========================================================== */ .footer-social{ display:none; align-items:center; justify-content:flex-start; gap: var(--footer-social-gap); margin-top: var(--space-32); } /* ========================================================== SOCIAL LINK ========================================================== */ .footer-social a{ display:flex; align-items:center; justify-content:center; width: var(--footer-social-size); height: var(--footer-social-size); flex: 0 0 var(--footer-social-size); border-radius: var(--radius-sm); transition: transform var(--transition-normal), opacity var(--transition-normal); } /* ========================================================== SOCIAL IMAGE ========================================================== */ .footer-social img{ display:block; width: var(--footer-social-size); height: var(--footer-social-size); object-fit: contain; } /* ========================================================== SOCIAL HOVER ========================================================== */ .footer-social a:hover{ transform: translateY( calc(var(--space-4) * -1) ); opacity: var(--opacity-muted); } /* ========================================================== BRAND ========================================================== */ .footer-brand{ display:flex; align-items:center; justify-content:flex-start; margin-top: var(--space-32); } /* ========================================================== BRAND LOCKUP ========================================================== */ .footer-brand-lockup{ display:block; width:auto; height: var(--footer-brand-lockup-height); max-width:100%; object-fit: contain; } /* ========================================================== DIVIDER ========================================================== */ .footer-divider{ width: var(--footer-divider-width); height: var(--border-width-thin); margin: var(--space-24) 0 var(--space-16); background: var(--footer-divider-color); } /* ========================================================== FOOTER BOTTOM ========================================================== */ .footer-bottom{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--space-24); margin-top: var(--space-16); } /* ========================================================== LOCATION ========================================================== */ .footer-location{ margin-top: var(--space-0); color: var(--color-text-muted); font-size: var(--footer-bottom-font-size); font-weight: var(--font-regular); line-height: var(--line-normal); text-align:right; white-space:nowrap; } /* ========================================================== COPYRIGHT ========================================================== */ .footer-copyright{ display:flex; flex-direction:column; gap: var(--footer-bottom-gap); margin-top: var(--space-0); color: var(--color-text-muted); font-size: var(--footer-bottom-font-size); font-weight: var(--font-regular); line-height: var(--line-normal); } /* ========================================================== MOBILE ========================================================== */ @media(max-width:768px){ .footer{ padding: var(--space-40) var(--footer-mobile-padding-inline) var(--space-48); } /* ------------------------------------------------------ CONTAINER ------------------------------------------------------ */ .footer-container{ max-width: var(--container-md); margin: 0 auto; } /* ------------------------------------------------------ NAVIGATION ------------------------------------------------------ */ .footer-navigation{ width:100%; align-items:flex-start; } /* ------------------------------------------------------ MENU ------------------------------------------------------ */ .footer-menu{ gap: var(--space-0); align-items:flex-start; } /* ------------------------------------------------------ MENU LINK ------------------------------------------------------ */ .footer-menu a{ text-align:left; } /* ------------------------------------------------------ SECONDARY MENU ------------------------------------------------------ */ .footer-menu-secondary{ margin-top: var(--footer-menu-group-gap); } /* ------------------------------------------------------ SOCIAL ------------------------------------------------------ */ .footer-social{ display:flex; justify-content:flex-start; gap: var(--footer-social-gap); margin-top: var(--space-32); } /* ------------------------------------------------------ SOCIAL LINK ------------------------------------------------------ */ .footer-social a{ width: var(--footer-social-mobile-size); height: var(--footer-social-mobile-size); flex: 0 0 var(--footer-social-mobile-size); } /* ------------------------------------------------------ SOCIAL IMAGE ------------------------------------------------------ */ .footer-social img{ width: var(--footer-social-mobile-size); height: var(--footer-social-mobile-size); } /* ------------------------------------------------------ BRAND ------------------------------------------------------ */ .footer-brand{ margin-top: var(--space-32); align-items:flex-start; justify-content:flex-start; } /* ------------------------------------------------------ BRAND LOCKUP ------------------------------------------------------ */ .footer-brand-lockup{ width:auto; height: var(--footer-brand-lockup-height); max-width:100%; } /* ------------------------------------------------------ DIVIDER ------------------------------------------------------ */ .footer-divider{ margin: var(--space-32) 0 var(--space-32); background: var(--footer-mobile-divider-color); } /* ------------------------------------------------------ FOOTER BOTTOM ------------------------------------------------------ */ .footer-bottom{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap: var(--footer-bottom-mobile-gap); margin-top: var(--space-0); } /* ------------------------------------------------------ LOCATION ------------------------------------------------------ */ .footer-location{ margin-top: var(--space-0); color: var(--color-text-muted); font-size: var(--footer-bottom-font-size); text-align:left; white-space:normal; } /* ------------------------------------------------------ COPYRIGHT ------------------------------------------------------ */ .footer-copyright{ margin-top: var(--space-0); gap: var(--footer-bottom-gap); text-align:left; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media(max-width:480px){ .footer{ padding: var(--space-32) var(--footer-mobile-padding-inline) var(--space-40); } .footer-menu a{ font-size: var(--font-lg); text-align:left; } .footer-social{ margin-top: var(--space-32); justify-content:flex-start; } .footer-brand{ margin-top: var(--space-32); justify-content:flex-start; } .footer-brand-lockup{ height: var(--footer-brand-lockup-height); } .footer-divider{ margin: var(--space-32) 0 var(--space-32); } .footer-bottom{ gap: var(--footer-bottom-mobile-gap); } }