/* footer styles.
Extracted verbatim from footer.php on 2026-06-10 (audit PERF-07 stage C):
same rules, same cascade position via an in-place , now cacheable
instead of re-sent inside every page's HTML. */
/* ═════════════════════════════════════════════════════════════════
UKU-FOOTER STYLES — single scoped block.
Palette:
#f2f2e9 cream main bg
#1a1a1a near-black sub-footer (matches header)
#0d0d0d even darker bottom band (legal strip)
#a2321b brand red (UkuTabs wordmark, link hover)
#a78e46 gold accent (matches header highlights)
═════════════════════════════════════════════════════════════════ */
.uku-footer {
/* Migrated to token so dark mode swaps automatically. Light
default is preserved via the var() fallback. */
background: var(--uku-footer-bg, #f2f2e9);
color: var(--uku-footer-text, #4a3a2a);
font-size: 14px;
line-height: 1.6;
}
/* Main row — CSS Grid (replaced Bootstrap col classes which were
wrapping the 4th column on wider screens). 4 cols on desktop,
2 cols on tablet, 1 col on mobile. */
.uku-footer__main {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
gap: 40px;
padding: 40px 0 30px;
}
@media (max-width: 991px) {
.uku-footer__main { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 600px) {
.uku-footer__main { grid-template-columns: 1fr; gap: 28px; padding: 28px 0 12px; }
}
/* Column titles — force-override the theme's global heading rules
that were applying Lobster Two italic to . */
.uku-footer__title {
margin: 0 0 14px !important;
padding: 0 !important;
font-family: inherit !important;
font-style: normal !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .8px !important;
color: #5b4530 !important;
line-height: 1.3 !important;
}
/* Brand block in the About column. */
.uku-footer__brand {
display: flex !important;
align-items: center;
gap: 14px;
text-decoration: none !important;
margin-bottom: 14px;
}
.uku-footer__brand img { display: block; flex-shrink: 0; }
.uku-footer__brand-text { display: flex; flex-direction: column; }
/* The wordmark — gold, matching the header's gold accents and the
tone of the U-icon image. !important because theme anchor rules
would otherwise override. */
.uku-footer__brand-name,
.uku-footer .uku-footer__brand-name {
font-family: 'Lobster Two', cursive !important;
font-style: italic !important;
font-weight: 700 !important;
font-size: 24px !important;
color: #a78e46 !important;
line-height: 1 !important;
}
.uku-footer__brand-tag {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #968a79;
margin-top: 4px;
}
.uku-footer__about { margin: 0 0 18px; color: #5b4530; }
/* Social icon row */
.uku-footer__socials {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.uku-footer__social {
display: flex !important;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(162, 50, 27, .10); /* faint brick-red tint */
color: #a2321b;
text-decoration: none !important;
transition: background .15s ease, color .15s ease, transform .1s ease;
}
.uku-footer__social svg {
width: 16px;
height: 16px;
display: block;
fill: currentColor;
}
.uku-footer__social:hover { transform: translateY(-2px); color: #fff !important; }
.uku-footer__social--patreon:hover { background: #ff424d; }
.uku-footer__social--discord:hover { background: #5865f2; }
.uku-footer__social--youtube:hover { background: #ff0000; }
.uku-footer__social--facebook:hover { background: #1877f2; }
.uku-footer__social--twitter:hover { background: #000; }
/* Link lists in Browse / Tools / Connect */
.uku-footer__links { list-style: none; padding: 0; margin: 0; }
.uku-footer__links li { margin-bottom: 8px; }
.uku-footer__links a {
color: #4a3a2a;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color .12s ease, padding-left .12s ease;
font-size: 14px;
}
.uku-footer__links a:hover {
color: #a2321b !important;
padding-left: 4px;
}
.uku-footer__link-icon {
width: 16px;
text-align: center;
font-size: 13px;
color: #a2321b; /* brick red, matches the social icons */
flex-shrink: 0;
}
.uku-footer__links a:hover .uku-footer__link-icon { color: #c8473c; } /* brighter on hover */
.uku-footer__links--compact { margin-top: 16px; }
.uku-footer__links--compact li { margin-bottom: 6px; }
/* Newsletter signup */
.uku-footer__newsletter-pitch {
margin: 0 0 12px;
font-size: 13px;
color: #5b4530;
}
.uku-footer__newsletter {
display: flex !important;
align-items: stretch;
gap: 6px;
background: #fff;
border: 1px solid #d6cdb1;
border-radius: 4px;
padding: 4px;
margin: 0 !important;
width: 100%;
box-sizing: border-box;
transition: border-color .12s ease, box-shadow .12s ease;
}
.uku-footer__newsletter:focus-within {
border-color: #a2321b;
box-shadow: 0 0 0 2px rgba(162, 50, 27, .15);
}
.uku-footer__newsletter-input {
flex: 1 1 auto;
min-width: 0;
width: auto !important;
border: none !important;
outline: none;
padding: 8px 10px !important;
font-size: 13px !important;
color: #1f1408 !important;
background: transparent !important;
margin: 0 !important;
box-shadow: none !important;
height: auto !important;
line-height: normal !important;
}
.uku-footer__newsletter-input::placeholder { color: #888; opacity: 1; }
/* Submit button + its wrapper. MailerLite wraps the buttons in
.ml-form-embedSubmit which we treat as a flex item. */
.uku-footer__newsletter .ml-form-embedSubmit {
flex-shrink: 0;
margin: 0 !important;
padding: 0 !important;
display: flex;
align-items: stretch;
}
.uku-footer__newsletter-btn {
background: #a2321b;
color: #fff;
border: none;
padding: 0 14px;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
text-transform: uppercase;
border-radius: 3px;
cursor: pointer;
transition: background .12s ease;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
}
.uku-footer__newsletter-btn.primary { display: inline-flex; }
.uku-footer__newsletter-btn.loading { display: none; gap: 6px; }
.uku-footer__newsletter-btn:hover { background: #c8473c; }
.uku-footer__newsletter-spinner {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: uku-footer-spin 0.8s linear infinite;
}
@keyframes uku-footer-spin { to { transform: rotate(360deg); } }
/* Success message */
.uku-footer__newsletter-success {
margin: 0;
padding: 10px 12px;
background: rgba(46, 125, 50, .1);
border: 1px solid rgba(46, 125, 50, .3);
border-radius: 4px;
font-size: 13px;
color: #2e7d32;
display: flex;
align-items: center;
gap: 8px;
}
.uku-footer__newsletter-success i { font-size: 16px; }
/* ─── Sub-footer (DARK, two-tier matching the header) ────────── */
.uku-footer__sub {
background: #1a1a1a; /* matches the header's main band */
color: #b8b8b8;
padding: 16px 0 14px; /* explicit non-zero padding-bottom prevents the alphabet's margin escaping into a light band */
font-size: 13px;
}
.uku-footer__sub a {
color: #e8dfc7;
text-decoration: none;
transition: color .12s ease;
}
.uku-footer__sub a:hover { color: #fff !important; text-decoration: underline; }
/* Sister-site brand row */
.uku-footer__brands ul {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.uku-footer__brands li {
display: inline-flex;
align-items: center;
font-weight: 600;
}
.uku-footer__brands li:not(:last-child)::after {
content: "·";
margin: 0 12px;
color: #6c6c6c;
}
/* A-Z alphabet — note: NO margin-bottom. As the last child of
.uku-footer__sub, any margin here would escape the parent (margin
collapse) and reveal the cream .uku-footer bg behind it as a
light band between the two dark sections. */
.uku-footer__alphabet {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2px 4px;
margin: 0;
}
.uku-footer__alphabet a {
display: inline-block;
padding: 3px 7px;
border-radius: 3px;
font-weight: 700;
font-size: 13px;
min-width: 22px;
text-align: center;
transition: background .12s ease, color .12s ease;
}
.uku-footer__alphabet a:hover {
background: #a78e46;
color: #1a1a1a !important;
text-decoration: none !important;
}
/* Bottom strip — slightly darker for two-tier effect, with a subtle
dotted grey divider line at the top to separate from the band
above. The thick light line that was appearing was the theme's
default border between sections; explicitly resetting + adding
our own intentional divider replaces it cleanly. */
.uku-footer__legal {
background: #0d0d0d;
text-align: center;
padding: 14px 0;
margin-top: 0;
border: 0 !important;
border-top: 1px dotted #4a4a4a !important;
box-shadow: none !important;
}
.uku-footer__legal .container { padding: 0 15px; }
/* Make sure no leftover border on the band above either. */
.uku-footer__sub { border: 0 !important; box-shadow: none !important; }
.uku-footer__copy {
margin: 0 0 6px;
font-size: 11.5px;
color: #999;
line-height: 1.5;
}
.uku-footer__legal-links {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
}
.uku-footer__legal-links li { display: inline-flex; align-items: center; }
.uku-footer__legal-links li:not(:last-child)::after {
content: "·";
margin: 0 8px;
color: #555;
}
.uku-footer__legal-links a { font-size: 11.5px; color: #aaa; }
/* Back-to-top button styling moved to inc/uku-totop.php (with new
JS-driven visibility — see that file's header for why). */
/* ─── Mobile tweaks ───────────────────────────────────────── */
@media (max-width: 600px) {
.uku-footer__col { text-align: left; }
.uku-footer__title { font-size: 12px !important; }
.uku-footer__brands ul { gap: 6px 0; }
.uku-footer__brands li:not(:last-child)::after { margin: 0 8px; }
.uku-footer__alphabet a { padding: 2px 5px; font-size: 12px; min-width: 20px; }
.uku-footer__legal-links li:not(:last-child)::after { margin: 0 6px; }
}