Instantly share code, notes, and snippets.
Last active
August 21, 2025 07:34
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
-
Save JusTruetice/c67c722dfbf0b87e4ebdbca6789fb3db to your computer and use it in GitHub Desktop.
Custom Site Footer Styles
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| background-color: #f0f2f5; | |
| } | |
| .extra-footer { | |
| background-color: #0B0720; /* ან შენი ფერი */ | |
| padding: 0; /* სიმაღლეში არანაირი ზედმეტი სივრცე */ | |
| } | |
| .footer-content { | |
| width: 100%; | |
| max-width: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| padding-left: 60px; | |
| padding-right: 60px; | |
| box-sizing: border-box; | |
| margin: 0 auto; | |
| } | |
| .footer-column { | |
| flex: 1; | |
| min-width: 220px; | |
| margin-bottom: 30px; | |
| box-sizing: border-box; | |
| padding: 0 15px; | |
| } | |
| .footer-logo-column { | |
| flex: 1.1; | |
| min-width: 80px; | |
| margin-right: 80px; | |
| margin-top: 37px; | |
| text-align: left; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| justify-content: flex-start; | |
| padding-left: 0; | |
| } | |
| .footer-logo { | |
| width: 160px; /* ან უფრო მცირე — 140px, 120px საჭიროებისამებრ */ | |
| height: auto; | |
| } | |
| .footer-tagline { | |
| font-size: 14px; | |
| color: #b0b0b0; | |
| line-height: 1.5; | |
| margin-top: 0; | |
| margin-bottom: 20px; | |
| max-width: 200px; | |
| } | |
| .footer-column:last-of-type { | |
| margin-right: 0; | |
| } | |
| .contact-column { | |
| flex: 1.2; | |
| min-width: 280px; | |
| } | |
| .footer-title { | |
| font-size: 16px; | |
| font-weight: bold; | |
| color: #ffffff; | |
| margin-bottom: 20px; | |
| text-transform: uppercase; | |
| position: relative; | |
| cursor: default; | |
| } | |
| .footer-column ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .footer-column ul li { | |
| margin-bottom: 10px; | |
| } | |
| .footer-column ul li a { | |
| font-size: 14px; | |
| color: #e0e0e0; | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-column ul li a:hover { | |
| color: #ffffff; | |
| } | |
| .contact-info { | |
| display: flex; | |
| align-items: center; | |
| font-size: 14px; | |
| color: #ffffff; | |
| margin-bottom: 10px; | |
| } | |
| .contact-info i { | |
| margin-right: 10px; | |
| color: #ffffff; | |
| } | |
| .company-address { | |
| font-size: 14px; | |
| color: #b0b0b0; | |
| line-height: 1.6; | |
| margin-top: 15px; | |
| margin-bottom: 25px; | |
| } | |
| .footer-column:not(.footer-logo-column) { | |
| margin-top: 25px; | |
| } | |
| /* ✅ UPDATED: Social Icons - Horizontal Layout */ | |
| .social-icons { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: flex-start; | |
| align-items: center; | |
| gap: 10px; | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| flex-wrap: nowrap; | |
| } | |
| .social-icon { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 36px; | |
| height: 36px; | |
| border: 1px solid #777; | |
| border-radius: 4px; | |
| color: #e0e0e0; | |
| font-size: 16px; | |
| text-decoration: none; | |
| transition: background-color 0.3s ease, border-color 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| background-color: #4a485a; | |
| border-color: #e0e0e0; | |
| } | |
| .copyright-bar { | |
| background-color: #f7b731; | |
| color: #191919; | |
| text-align: center; | |
| padding: 10px 20px; | |
| font-size: 14px; | |
| margin-top: 0px; | |
| box-sizing: border-box; | |
| } | |
| .copyright-bar p { | |
| margin: 0; | |
| font-weight: bold; | |
| } | |
| /* --- Mobile Specific Styles (Accordion) --- */ | |
| @media (max-width: 768px) { | |
| .extra-footer { | |
| padding: 0; /* Remove padding from the main footer container on mobile */ | |
| } | |
| .footer-content { | |
| flex-direction: column; /* Stack columns vertically */ | |
| align-items: center; /* Center all column items on mobile */ | |
| padding: 0 15px; /* Slightly less horizontal padding for mobile content */ | |
| gap: 0; /* Ensure no flex gap when stacked */ | |
| } | |
| .footer-column { | |
| flex: unset; /* Reset flex properties */ | |
| min-width: unset; /* Remove min-width */ | |
| width: 100%; /* Full width */ | |
| margin: 0; /* Remove all margins for columns on mobile */ | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator line */ | |
| padding: 0; /* Remove padding from the column itself */ | |
| box-sizing: border-box; /* Ensure padding/border are included in element's total size */ | |
| } | |
| /* Specific adjustments for the logo column on mobile */ | |
| .footer-logo-column { | |
| padding: 20px 15px; /* Added horizontal padding to align with text */ | |
| margin-bottom: 0; /* No bottom margin, border handles separation */ | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator line */ | |
| /* UPDATED FOR LOGO AND TAGLINE SIDE-BY-SIDE WITH SPACE-BETWEEN */ | |
| display: flex; /* Make it a flex container */ | |
| flex-direction: row; /* Arrange items in a row */ | |
| align-items: center; /* Vertically center logo and tagline */ | |
| justify-content: flex-start; /* Align contents to the left */ | |
| gap: 15px; /* Adjusted gap: More space between logo and tagline */ | |
| text-align: left; /* Ensure any text within the column is left-aligned */ | |
| } | |
| .footer-logo { | |
| max-width: 60px !important; /* !important to ensure size change */ | |
| height: auto; | |
| margin: 0 !important; /* Remove all default margins to allow flexbox to control spacing */ | |
| flex-shrink: 0; /* Prevent logo from shrinking */ | |
| } | |
| .footer-tagline { | |
| font-size: 13px; /* Smaller font for tagline on mobile */ | |
| margin: 0 !important; /* Remove all default margins from tagline */ | |
| line-height: 1.2; /* Adjust line height if needed for better alignment */ | |
| flex-grow: 1; /* Allow tagline to take up available space */ | |
| } | |
| .footer-column:last-of-type { | |
| border-bottom: none; /* No border for the last column */ | |
| } | |
| .footer-title { | |
| margin: 0; /* Remove all margins from the title */ | |
| cursor: pointer; /* Indicate it's clickable */ | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px; /* Changed padding to 15px to align with logo's new padding */ | |
| font-size: 16px; /* Ensure title font size is consistent */ | |
| text-align: left; /* Ensure title is left-aligned */ | |
| } | |
| /* Hide content by default on mobile */ | |
| .footer-column ul, | |
| .footer-column .contact-info, | |
| .footer-column .company-address, | |
| .footer-column .social-icons { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out; /* Add margin to transition */ | |
| opacity: 0; | |
| pointer-events: none; /* Disable clicks when hidden */ | |
| margin: 0; /* Ensure no margins when hidden */ | |
| width: 100%; /* Ensure these elements take full width when hidden */ | |
| } | |
| /* Show content when .footer-column has .open class */ | |
| .footer-column.open ul, | |
| .footer-column.open .contact-info, | |
| .footer-column.open .company-address, | |
| .footer-column.open .social-icons { | |
| max-height: 500px; /* Adjust as needed, ensure it's larger than content */ | |
| opacity: 1; | |
| pointer-events: auto; /* Enable clicks when open */ | |
| transition: max-height 0.5s ease-in, opacity 0.5s ease-in, margin 0.5s ease-in; /* Smoother transition for opening */ | |
| margin-top: 10px; /* Space after title when open */ | |
| margin-bottom: 10px; /* Space before next section/end of column when open */ | |
| display: block; /* Ensure these block elements take full width */ | |
| text-align: left; /* Align content to the left when open */ | |
| padding-left: 15px; /* Add left padding to align with the titles */ | |
| padding-right: 15px; /* Add right padding for consistency */ | |
| } | |
| /* Adjust specific elements within the opened section for better spacing */ | |
| .footer-column.open ul { | |
| padding-bottom: 10px; /* Add padding to the bottom of the opened list */ | |
| } | |
| .footer-column.open ul li { | |
| margin-bottom: 8px; /* Slightly reduce space between list items when open */ | |
| font-size: 14px; /* Ensure link font size is consistent */ | |
| text-align: left; /* Left align list items */ | |
| } | |
| .footer-column.open ul li:last-child { | |
| margin-bottom: 0; /* No bottom margin for the last list item */ | |
| } | |
| .contact-column.open .contact-info { | |
| margin-top: 0; /* Reset default margin for contact-info */ | |
| margin-bottom: 8px; /* Small margin between contact lines */ | |
| font-size: 14px; /* Ensure contact info font size is consistent */ | |
| justify-content: flex-start; /* Align contact info elements to the left */ | |
| } | |
| .contact-column.open .contact-info:first-of-type { | |
| margin-top: 10px; /* Add top margin only for the first contact-info item after title */ | |
| } | |
| .contact-column.open .company-address { | |
| margin-top: 10px; /* Space before addresses */ | |
| margin-bottom: 10px; /* Space after addresses */ | |
| font-size: 14px; /* Ensure address font size is consistent */ | |
| } | |
| /* UPDATED Social Icons - Force Horizontal Layout on Mobile */ | |
| .contact-column .social-icons { | |
| display: flex !important; /* Force flexbox */ | |
| flex-direction: row !important; /* Force horizontal direction */ | |
| flex-wrap: wrap !important; /* Allow wrapping if icons overflow */ | |
| justify-content: flex-start !important; /* Align icons to the left */ | |
| padding-left: 15px; /* Align with other content's padding */ | |
| padding-right: 15px; | |
| box-sizing: border-box; /* Include padding in element's total width */ | |
| } | |
| .contact-column .social-icon { | |
| margin-right: 10px !important; /* Space between icons */ | |
| margin-bottom: 10px !important; /* Space below if wrapped */ | |
| } | |
| /* Adjust social icon alignment within the open state (redundant but safe with !important) */ | |
| .contact-column.open .social-icons { | |
| justify-content: flex-start !important; /* Ensure left alignment when open */ | |
| /* display: flex; -- Not needed here because it's already set above with !important */ | |
| /* flex-direction: row; -- Not needed here */ | |
| } | |
| /* Arrow Icon for Accordion Titles */ | |
| .footer-title::after { | |
| content: '\f107'; /* FontAwesome angle-down icon */ | |
| font-family: 'Font Awesome 5 Free'; | |
| font-weight: 900; /* For solid icon */ | |
| position: absolute; | |
| right: 15px; /* Aligned to the right with 15px padding */ | |
| top: 50%; | |
| transform: translateY(-50%) rotate(0deg); | |
| transition: transform 0.3s ease; | |
| } | |
| .footer-title.active::after { | |
| transform: translateY(-50%) rotate(180deg); /* Rotate arrow when active */ | |
| } | |
| .copyright-bar { | |
| margin-top: 0; /* Remove top margin from copyright bar on mobile */ | |
| padding: 10px 15px; /* Adjust padding for copyright bar on mobile */ | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment