/* footer.css Updated: horizontal links, centered layout, brand-gold for links & brand text, phone/email moved into the legal block above the copyright. Include in page : Assumes Bootstrap 5 and Montserrat are loaded. */ :root{ --blue-charcoal: #010d1a; --brand-gold: #C9A86A; --off-white: #F5F5F5; --muted: #bfbfbf; } /* Footer base: increased left/right inner spacing for an open centered layout */ .footer-section { background: var(--blue-charcoal); color: var(--off-white); border-top: 1px solid rgba(201,168,106,0.06); font-family: 'Montserrat', sans-serif; margin-top: 3.5rem; padding: 14px 48px; } /* Make everything centered and stacked compactly */ .footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; } /* Brand */ .footer-brand { font-size: 1rem; font-weight: 700; color: var(--brand-gold); /* brand gold color applied to brand text */ line-height: 1; display: inline-block; text-transform: none; margin-bottom: 4px; } /* Quick links (horizontal) */ .footer-links { list-style: none; padding: 0; margin: 0; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 0.95rem; } .footer-links li { margin: 0; } /* Separator dot between quick links for visual separation (keeps them horizontal) */ .footer-links li + li::before { content: "ยท"; color: var(--muted); margin: 0 8px; font-size: 0.95rem; vertical-align: middle; } /* Links and contact use brand gold color as requested */ .footer-link { color: var(--brand-gold); text-decoration: none; transition: color 140ms ease; } .footer-link:hover, .footer-link:focus { color: #E0C687; /* slightly lighter gold on hover */ text-decoration: none; } /* Footer legal block now contains phone/email + copyright/regulator */ .footer-legal { color: var(--muted); font-size: 0.78rem; text-align: center; margin-top: 10px; line-height: 1.35; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; } /* Inline contact within legal block - horizontal and centered */ .footer-legal .contact-inline { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 0.95rem; } .footer-legal .contact-inline a { color: var(--brand-gold); text-decoration: none; } .footer-legal .contact-inline a:hover { color: #E0C687; } /* Responsive adjustments */ @media (max-width: 767.98px) { .footer-section { padding: 14px 16px; } .footer-links { gap: 10px; } .footer-links li + li::before { margin: 0 6px; } .footer-legal { font-size: 0.74rem; text-align: center; } .footer-brand { font-size: 0.95rem; } }