/* If you use Font Awesome, make sure it's loaded in your */ @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'); :root { --footer-bg: #021b12; --footer-text: #fff6d8; /* align with header cream */ --footer-accent: #f1b646; } /* ===== FOOTER LAYOUT ===== */ .site-footer { background-color: var(--footer-bg); color: var(--footer-text); padding: 60px 7vw 30px; font-family: "Merriweather", serif; } .footer-inner { display: grid; grid-template-columns: 0.8fr 1.2fr 1fr 1fr; /* <- tweak here */ gap: 40px; align-items: flex-start; } /* generic column styling */ .footer-col { font-size: 0.98rem; line-height: 1.8; } /* headings */ .footer-heading { font-size: 1.1rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--footer-accent); margin: 0 0 18px; } /* ===== LEFT COL: CONTACT ===== */ .footer-contact p { margin: 0 0 10px; } .footer-social { display: flex; gap: 14px; margin-top: 18px; } /* all icons in matching round buttons */ .footer-social a { color: var(--footer-text); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(245, 243, 221, 0.7); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .footer-social a:hover { background-color: var(--footer-accent); color: #0b2317; transform: translateY(-1px); } /* Booking "B." same style as others */ .footer-social .booking-icon { font-weight: 700; letter-spacing: 0.06em; } /* ===== COL 2: LOGO ===== */ .footer-logo { text-align: center; } .footer-logo img { max-width: 260px; width: 100%; height: auto; } /* ===== COLS 3 & 4: HOURS ===== */ .footer-hours .hours-list { list-style: none; margin: 0; padding: 0; } /* each row: DAY .... TIME */ .footer-hours .hours-list li { display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; align-items: baseline; font-size: 0.9rem; } .footer-hours .day { text-transform: uppercase; font-weight: 700; letter-spacing: 0.12em; font-size: 0.75rem; } .footer-hours .line { border-bottom: 1px dotted rgba(245, 243, 221, 0.4); height: 1px; transform: translateY(-1px); } .footer-hours .time { white-space: nowrap; } /* ===== BOTTOM STRIP ===== */ .footer-bottom { margin-top: 28px; padding-top: 14px; border-top: 1px solid rgba(245, 243, 221, 0.15); display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; } .footer-privacy { color: var(--footer-text); text-decoration: none; padding: 6px 18px; border-radius: 999px; border: 1px solid rgba(245, 243, 221, 0.7); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; transition: background-color 0.2s ease, color 0.2s ease; } .footer-privacy:hover { background-color: var(--footer-accent); color: #0b2317; } /* ===== RESPONSIVE ===== */ @media (max-width: 1100px) { .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } .footer-logo { order: -1; /* logo on first row centre */ grid-column: 1 / -1; } } @media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; row-gap: 24px; } .footer-logo { order: -1; } .footer-bottom { flex-direction: column; gap: 8px; text-align: center; } } /* make all columns start at the same vertical height */ .footer-inner { align-items: flex-start; /* already there, but re-assert it */ } /* ensure headings control the top spacing consistently */ .footer-heading { margin: 0 0 16px; /* no top margin, only bottom */ } /* remove any sneaky extra top margin on first child after heading */ .footer-contact p:first-of-type, .footer-hours .hours-list { margin-top: 0; } /* make sure the logo isn't vertically centred – align its top with the headings in the other columns */ .footer-logo { text-align: center; align-self: center; /* centre this column vertically in the grid */ } /* remove stray margins around the hours lists */ .footer-hours .hours-list { margin: 0; padding: 0; } .footer-logo img { max-width: 260px; width: 100%; height: auto; } .footer-drink-resp { display: flex; align-items: center; /* vertically center text & logo */ gap: 8px; /* space between text and image (optional) */ } .footer-copy { color: #fff6d8; margin-top: 10px; font-size: 0.6rem; letter-spacing: 0.05em; text-align: center; } @media (max-width: 600px) { .footer-copy { text-align: center; width: 100%; margin-top: 20px; } } .plain-link { color: inherit; text-decoration: none; } .plain-link:hover { text-decoration: none; color: inherit; } /* ===== Subtle footer animations ===== */ /* Gentle floating logo to add a touch of life without distraction */ @keyframes gentleFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0); } } .footer-logo img { animation: gentleFloat 6s ease-in-out infinite; } /* Enhanced, smoother interaction on social icons */ .footer-social a { transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .footer-social a:hover { background-color: var(--footer-accent); color: #0b2317; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); } .footer-contact a.plain-link { overflow-wrap: anywhere; /* allows long email to wrap mid-word */ } @media (max-width: 600px) { .footer-contact p { font-size: 0.9rem; } } .footer-copy a { color: inherit; /* same color as surrounding text */ text-decoration: none; /* remove underline */ } .footer-copy a:hover { text-decoration: underline; /* optional: subtle hover */ } .site-footer .footer-copy a { color: inherit !important; text-decoration: none !important; } .site-footer .footer-copy a, .site-footer .footer-copy a:link, .site-footer .footer-copy a:visited, .site-footer .footer-copy a:hover, .site-footer .footer-copy a:active { color: #FBFBF2 !important; /* pick your footer text colour */ text-decoration: none !important; } .site-footer .footer-copy { color: #FBFBF2; /* or whatever your footer text colour is */ } .site-footer .footer-copy a { color: #FBFBF2 !important; text-decoration: none !important; -webkit-text-fill-color: #FBFBF2 !important; /* fixes rare cases */ } /* Chrome/Safari override for link styling */ .site-footer .footer-copy a:-webkit-any-link { color: #FBFBF2 !important; -webkit-text-fill-color: #FBFBF2 !important; text-decoration: none !important; } /* ---------- Reveal animation (same feel as music cards) ---------- */ .reveal { opacity: 0; transform: translateY(14px); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: translateY(0); transition: opacity 420ms ease, transform 520ms ease; transition-delay: var(--d, 0ms); } /* Images get a tiny "pop" */ .reveal.reveal--img { transform: translateY(14px) scale(0.99); } .reveal.reveal--img.is-in { transform: translateY(0) scale(1); } /* accessibility */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal.reveal--img { opacity: 1 !important; transform: none !important; transition: none !important; } }