/* ============================================================ ALLY_MONDAY — SITE HEADER + SITE FOOTER ------------------------------------------------------------ First-party presentation layer for this template's own partials/site_header.php and partials/site_footer.php. Structure and navigation logic live in those files and in the shared navigation engine — this file is PRESENTATION ONLY. ── ALLY IDENTITY ────────────────────────────────────────── NAVY + BLUE + WHITE + COOL NEUTRAL. Navy is the structure, white is the content, blue is the only accent, cool blue-grey carries muted text. There is deliberately NO terracotta/orange anywhere in the header or footer. WHY THIS FILE DEFINES ITS OWN PALETTE (§1a) INSTEAD OF RE-POINTING A GLOBAL TOKEN: this template's --mt-accent (00-tokens.css, #E85D2F terracotta) is the orange source. That token file IS template-scoped — it only loads for ally_monday, so editing it could not affect fable5 / AnuAi / engineering-one. But it is shared by every OTHER ally_monday module (Hero, Services, About, CTA, Programs, Projects, Process Flow, Testimonials, Trust Bar…), which are all outside this task's scope and legitimately still use terracotta. Re-valuing --mt-accent would silently restyle the whole site. So the Ally header/footer palette is established HERE, at the correct template-AND-component-scoped level, and this file makes ZERO references to --mt-accent. Nothing below can emit orange. ── HEADER vs FOOTER ─────────────────────────────────────── They share the system but are deliberately not identical: HEADER = lighter navy, compact, tight rhythm, navigation-focused. FOOTER = deeper navy, generous spacing, layered surfaces, information-focused. ── STUDIO READINESS ─────────────────────────────────────── §1a is the raw palette; §1b is the semantic layer every rule below actually reads. A future Studio presentation layer can restyle the header/footer by re-declaring any variable in §1 — colour, spacing, radius, shadow, CTA treatment — and never needs to touch a selector or the PHP structure. Values are chosen in exactly one place; no rule below §1 hardcodes a colour. ============================================================ */ /* ============================================================ §1a ALLY PALETTE — raw values, chosen once. ============================================================ */ body.tpl-AllyTuesday { /* Navy scale — light (header) to deep (footer base) */ --ally-navy-600: #1C2C4E; /* elevated: dropdown */ --ally-navy-700: #14213D; /* HEADER surface (brand navy) */ --ally-navy-800: #101B31; /* footer raised panels/chips */ --ally-navy-900: #0C1424; /* FOOTER base — deepest */ /* Blue — the only accent in this component */ --ally-blue-300: #8FB6EE; /* light blue, icons on dark */ --ally-blue-400: #6098E0; /* active markers, hover */ --ally-blue-500: #4B82D4; /* primary blue */ /* Neutrals */ --ally-white: #FFFFFF; --ally-grey-200: #EAF0F9; /* near-white, CTA hover */ --ally-grey-400: #A8B6CE; /* cool muted text */ --ally-grey-500: #8494B0; /* subtle / legal text */ /* White transparencies — separators and glass surfaces (dark-surface contexts only: the Footer, and the Header's own dark dropdown flyout, which stays dark by deliberate choice — see §5's own note). */ --ally-line-faint: rgba(255, 255, 255, 0.07); --ally-line: rgba(255, 255, 255, 0.11); --ally-line-strong: rgba(255, 255, 255, 0.18); --ally-wash: rgba(255, 255, 255, 0.06); /* Header Direction 1 — "Confident Light Brand" (2026-09-19): the Header surface moved from navy to white/light (§1b), so it needs the INVERSE of the white-transparency trio above — navy at low alpha, for separators/washes that read on a LIGHT surface. Mirrors the exact naming + alpha steps of --ally-line*/--ally-wash above, just navy-tinted instead of white-tinted; a genuinely new, missing semantic concept (this file had no light-surface separator/wash before this pass), not a scattered one-off value. */ --ally-hairline-faint: rgba(20, 33, 61, 0.06); /* ally-navy-700 at 6% */ --ally-hairline: rgba(20, 33, 61, 0.10); /* ally-navy-700 at 10% */ --ally-hairline-strong: rgba(20, 33, 61, 0.18); /* ally-navy-700 at 18% */ --ally-blue-wash: rgba(75, 130, 212, 0.08); /* ally-blue-500 at 8% — hover/focus wash on light surfaces */ } /* ============================================================ §1b SEMANTIC PRESENTATION VARIABLES — what the rules read. Override these to restyle. Nothing below hardcodes a colour. ============================================================ */ body.tpl-AllyTuesday { /* —— Header: surface —— Direction 1 — "Confident Light Brand" (2026-09-19): the Header moves from a solid navy block to a light/white surface, creating a deliberate LIGHT HEADER -> DARK HERO -> LIGHT TRUST BAR sequence. Only the values below changed — the raw-palette -> semantic-token -> component-rule chain is unchanged, and no component rule below §2 was touched for this. */ --mt-header-bg: var(--ally-white); --mt-header-height: 92px; --mt-header-divider: var(--ally-hairline); --mt-header-shadow: inset 0 -1px 0 var(--mt-header-divider); /* Scroll elevation kept the same neutral dark shadow colour (never tied to the header's own surface colour), intensity reduced from the navy-bar tuning (.40) to a value that reads as a considered lift, not a heavy shadow, under a light bar. */ --mt-header-shadow-scroll: inset 0 -1px 0 var(--mt-header-divider), 0 8px 24px rgba(6, 12, 24, 0.14); /* —— Header: navigation —— Hierarchy is now carried by weight + the blue underline, not by a resting/hover colour split — both the resting and emphasised nav text read as the SAME confident navy on a light surface (this is why --mt-header-fg and --mt-header-fg-muted intentionally share one value below; the two semantic names are kept so a future edit can re-diverge them without touching any component rule). */ --mt-header-fg: var(--ally-navy-700); --mt-header-fg-muted: var(--ally-navy-700); --mt-header-accent: var(--ally-blue-400); --mt-header-hover-bg: var(--ally-blue-wash); --mt-header-link-px: var(--mt-space-4, 16px); --mt-header-link-py: var(--mt-space-3, 12px); --mt-header-link-radius: var(--mt-radius-md, 10px); /* —— Header: CTA — solid navy on white: the brand colour becomes the primary action, inverted from the prior white-on-navy treatment now that the surface itself is light. Still zero decoration — one solid fill, one hover step, same pill shape. —— */ --mt-header-cta-bg: var(--ally-navy-700); --mt-header-cta-bg-hover: var(--ally-navy-600); --mt-header-cta-fg: var(--ally-white); --mt-header-cta-radius: var(--mt-radius-full); --mt-header-cta-shadow: 0 4px 14px rgba(6, 12, 24, 0.20); /* —— Header: dropdown —— */ --mt-dropdown-bg: var(--ally-navy-600); --mt-dropdown-fg: var(--ally-grey-400); --mt-dropdown-fg-hover: var(--ally-white); --mt-dropdown-hover-bg: var(--ally-wash); --mt-dropdown-border: var(--ally-line); --mt-dropdown-radius: var(--mt-radius-md, 10px); --mt-dropdown-shadow: 0 20px 44px rgba(6, 12, 24, 0.46); /* —— Footer: surface — deeper than the header, on purpose —— */ --mt-footer-bg: var(--ally-navy-900); --mt-footer-panel-bg: var(--ally-navy-800); --mt-footer-py: var(--mt-space-20, 80px); --mt-footer-divider: var(--ally-line-faint); --mt-footer-divider-hard: var(--ally-line); /* —— Footer: text —— */ --mt-footer-fg: var(--ally-grey-400); --mt-footer-fg-strong: var(--ally-white); --mt-footer-heading: var(--ally-grey-500); --mt-footer-legal: var(--ally-grey-500); /* —— Footer: accents + controls —— */ --mt-footer-accent: var(--ally-blue-400); --mt-footer-icon: var(--ally-blue-300); --mt-footer-chip-bg: var(--ally-navy-800); --mt-footer-chip-border: var(--ally-line); --mt-footer-chip-hover: var(--ally-blue-500); --mt-footer-radius: var(--mt-radius-md, 10px); } /* ============================================================ §2 HEADER — shell Three nested boxes take the same surface so the bar reads as one solid plane:
→ .fixed-header-stack → .navbar. The .navbar is innermost and is what the visitor actually sees; the ancestors are painted so the fixed/spacer area never flashes a different colour. ============================================================ */ body.tpl-AllyTuesday header.mt-site-header, body.tpl-AllyTuesday .site-header.mt-site-header { background: var(--mt-header-bg); } body.tpl-AllyTuesday .mt-site-header .fixed-header-stack { background: var(--mt-header-bg); } body.tpl-AllyTuesday .mt-site-header__bar { min-height: var(--mt-header-height); padding: 0; background: var(--mt-header-bg); box-shadow: var(--mt-header-shadow); transition: box-shadow var(--mt-duration-normal, 240ms) var(--mt-ease-default, ease); } /* Elevation on scroll. `.scrolled` is toggled on the .navbar by the shared web/assets/js/main.js — an existing hook, no JS change. */ body.tpl-AllyTuesday .mt-site-header__bar.scrolled { box-shadow: var(--mt-header-shadow-scroll); } body.tpl-AllyTuesday .header-spacer { height: var(--mt-header-height); } body.tpl-AllyTuesday .mt-site-header__inner { display: flex; align-items: center; gap: var(--mt-space-4, 16px); } /* ============================================================ §3 HEADER — logo ============================================================ */ body.tpl-AllyTuesday .mt-site-header__logo { display: flex; align-items: center; padding: 0; margin-right: var(--mt-space-3, 12px); } body.tpl-AllyTuesday .mt-site-header__logo .site-logo { /* Direction 1: enlarged from 42px so the mark has real presence at the new 92px header height. The logo file itself is unchanged — its white background (previously a visible box on the dark header) is now simply the header's own surface colour. */ max-height: 60px; width: auto; display: block; } /* ============================================================ §4 HEADER — navigation Direction 1 (2026-09-19, supersedes the original dark-header note): hierarchy is carried by weight and the blue underline, never by hue — resting AND active links are the same confident navy, hover adds a soft blue-tinted wash, and the active item additionally gets semibold weight plus a short blue underline. ============================================================ */ body.tpl-AllyTuesday .mt-site-header__nav { align-items: center; gap: var(--mt-space-2, 8px); } body.tpl-AllyTuesday .mt-site-header__nav .nav-link { position: relative; display: block; color: var(--mt-header-fg-muted); font-size: var(--mt-text-base, 1rem); font-weight: var(--mt-weight-medium, 500); letter-spacing: 0.01em; padding: var(--mt-header-link-py) var(--mt-header-link-px); border-radius: var(--mt-header-link-radius); transition: color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease), background-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease); } body.tpl-AllyTuesday .mt-site-header__nav .nav-link:hover { color: var(--mt-header-fg); background: var(--mt-header-hover-bg); } body.tpl-AllyTuesday .mt-site-header__nav .nav-link.active { color: var(--mt-header-fg); font-weight: var(--mt-weight-semibold, 600); } /* The one accent marker in the navigation. */ body.tpl-AllyTuesday .mt-site-header__nav .nav-link.active::after { content: ""; position: absolute; left: var(--mt-header-link-px); right: var(--mt-header-link-px); bottom: 2px; height: 2px; border-radius: 2px; background: var(--mt-header-accent); } body.tpl-AllyTuesday .mt-site-header__nav .nav-link:focus-visible { color: var(--mt-header-fg); outline: 2px solid var(--mt-header-accent); outline-offset: 2px; } /* Bootstrap's caret on .dropdown-toggle — align and soften it. */ body.tpl-AllyTuesday .mt-site-header__nav .dropdown-toggle::after { margin-left: 0.4em; vertical-align: 0.15em; opacity: 0.65; } /* ============================================================ §5 HEADER — dropdown menu Direction 1 (2026-09-19): left dark on purpose. An elevated dark flyout beneath a light nav bar is a deliberate, common, legible pattern — not an oversight — and it means the dropdown's own tokens (--mt-dropdown-*, still built on --ally-navy-600 / --ally-line / --ally-wash) needed no change at all for this pass. ============================================================ */ body.tpl-AllyTuesday .mt-site-header .dropdown-menu { margin-top: var(--mt-space-2, 8px); padding: var(--mt-space-2, 8px); background: var(--mt-dropdown-bg); border: 1px solid var(--mt-dropdown-border); border-radius: var(--mt-dropdown-radius); box-shadow: var(--mt-dropdown-shadow); } body.tpl-AllyTuesday .mt-site-header .dropdown-item { color: var(--mt-dropdown-fg); font-size: var(--mt-text-sm, 0.9rem); padding: var(--mt-space-2, 8px) var(--mt-space-3, 12px); border-radius: var(--mt-radius-sm, 6px); transition: color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease), background-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease); } body.tpl-AllyTuesday .mt-site-header .dropdown-item:hover, body.tpl-AllyTuesday .mt-site-header .dropdown-item:focus, body.tpl-AllyTuesday .mt-site-header .dropdown-item.active { background: var(--mt-dropdown-hover-bg); color: var(--mt-dropdown-fg-hover); } /* Current service reads as current without shouting. */ body.tpl-AllyTuesday .mt-site-header .dropdown-item.active { box-shadow: inset 2px 0 0 var(--mt-header-accent); } /* ============================================================ §6 HEADER — CTA Rendered by the shared navigation engine as li.nav-item.ms-lg-2 > a.btn.btn-primary.btn-sm — styled here, never re-marked-up. ============================================================ */ body.tpl-AllyTuesday .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary { background: var(--mt-header-cta-bg); border-color: var(--mt-header-cta-bg); color: var(--mt-header-cta-fg); border-radius: var(--mt-header-cta-radius); padding: 0.65rem var(--mt-space-6, 24px); font-size: var(--mt-text-base, 1rem); font-weight: var(--mt-weight-semibold, 600); letter-spacing: 0.01em; box-shadow: var(--mt-header-cta-shadow); transition: transform var(--mt-duration-normal, 240ms) var(--mt-ease-default, ease), background-color var(--mt-duration-normal, 240ms) var(--mt-ease-default, ease); } body.tpl-AllyTuesday .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary:hover, body.tpl-AllyTuesday .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary:focus-visible { background: var(--mt-header-cta-bg-hover); border-color: var(--mt-header-cta-bg-hover); color: var(--mt-header-cta-fg); transform: translateY(-1px); } body.tpl-AllyTuesday .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary:focus-visible { outline: 2px solid var(--mt-header-accent); outline-offset: 3px; } body.tpl-AllyTuesday .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary:active { transform: translateY(0); } /* ============================================================ §7 HEADER — mobile toggler + collapsed panel ============================================================ */ body.tpl-AllyTuesday .mt-site-header .navbar-toggler { padding: 0.4rem 0.6rem; border: 1px solid var(--ally-hairline-strong); border-radius: var(--mt-radius-md, 10px); } body.tpl-AllyTuesday .mt-site-header .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--ally-blue-wash); } /* Direction 1: navy-lined icon — the header is light now, so the prior white-lined icon (tuned for a navy bar) would be invisible. Same SVG, same stroke width/opacity, navy instead of white. */ body.tpl-AllyTuesday .mt-site-header .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(20, 33, 61, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } @media (max-width: 991px) { body.tpl-AllyTuesday .mt-site-header__collapse { background: var(--mt-header-bg); border-top: 1px solid var(--mt-header-divider); margin-top: var(--mt-space-3, 12px); padding: var(--mt-space-3, 12px) 0 var(--mt-space-4, 16px); } /* Stacked links get a full-width touch target and a hairline between them instead of the desktop pill hover. */ body.tpl-AllyTuesday .mt-site-header__nav .nav-link { border-radius: 0; padding: var(--mt-space-3, 12px) var(--mt-space-2, 8px); border-bottom: 1px solid var(--ally-hairline-faint); } body.tpl-AllyTuesday .mt-site-header__nav .nav-link:hover { background: transparent; color: var(--mt-header-accent); } /* An underline doesn't read in a stacked list — use a left rule. */ body.tpl-AllyTuesday .mt-site-header__nav .nav-link.active::after { left: calc(var(--mt-space-2, 8px) * -1); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: 2px; height: 18px; } body.tpl-AllyTuesday .mt-site-header .dropdown-menu { background: transparent; border: 0; box-shadow: none; padding: 0 0 var(--mt-space-2, 8px) var(--mt-space-4, 16px); } /* Direction 1 fix: the dropdown-menu above goes transparent on mobile and sits directly on the (now light) collapse panel — but .dropdown-item's own colour, --mt-dropdown-fg, is a light grey-blue tuned for the dark dropdown flyout (§5). Left unchanged, mobile Service-domain sub-links would render nearly illegible on the light panel. Re-point to the same navy/blue the surrounding stacked nav-links already use — no new token, same mobile-nav language. */ body.tpl-AllyTuesday .mt-site-header .dropdown-item { color: var(--mt-header-fg-muted); } body.tpl-AllyTuesday .mt-site-header .dropdown-item:hover, body.tpl-AllyTuesday .mt-site-header .dropdown-item:focus, body.tpl-AllyTuesday .mt-site-header .dropdown-item.active { background: transparent; color: var(--mt-header-accent); } body.tpl-AllyTuesday .mt-site-header__nav .nav-item.ms-lg-2 { margin-top: var(--mt-space-4, 16px); } body.tpl-AllyTuesday .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary { display: block; text-align: center; } } /* ============================================================ §8 FOOTER — shell A deeper navy than the header, with a hard top edge, so the page closes on a distinctly lower surface level. ============================================================ */ body.tpl-AllyTuesday .mt-site-footer { position: relative; background: var(--mt-footer-bg); color: var(--mt-footer-fg); padding: var(--mt-footer-py) 0 var(--mt-space-6, 24px); border-top: 1px solid var(--mt-footer-divider-hard); } body.tpl-AllyTuesday .mt-site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--mt-space-12, 48px) var(--mt-space-10, 40px); padding-bottom: var(--mt-space-12, 48px); } /* ============================================================ §9 FOOTER — brand column ============================================================ */ body.tpl-AllyTuesday .mt-site-footer__name { color: var(--mt-footer-fg-strong); font-weight: var(--mt-weight-bold, 700); font-size: var(--mt-text-lg, 1.125rem); line-height: 1.4; letter-spacing: -0.01em; margin-bottom: var(--mt-space-4, 16px); } body.tpl-AllyTuesday .mt-site-footer__statement { font-size: var(--mt-text-sm, 0.9rem); line-height: 1.75; color: var(--mt-footer-fg); max-width: 40ch; margin-bottom: var(--mt-space-6, 24px); } /* Contact lines — each icon sits in a raised navy chip so the column scans as a list rather than loose runs of text. */ body.tpl-AllyTuesday .mt-site-footer__line { display: flex; align-items: center; gap: var(--mt-space-3, 12px); font-size: var(--mt-text-sm, 0.9rem); color: var(--mt-footer-fg); margin: 0 0 var(--mt-space-3, 12px); } body.tpl-AllyTuesday .mt-site-footer__line i { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--mt-footer-radius); background: var(--mt-footer-chip-bg); border: 1px solid var(--mt-footer-chip-border); color: var(--mt-footer-icon); font-size: 0.76rem; } body.tpl-AllyTuesday .mt-site-footer__line a { color: inherit; text-decoration: none; transition: color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease); } body.tpl-AllyTuesday .mt-site-footer__line a:hover { color: var(--mt-footer-fg-strong); } body.tpl-AllyTuesday .mt-site-footer__whatsapp { display: inline-flex; align-items: center; gap: var(--mt-space-2, 8px); margin-top: var(--mt-space-1, 4px); padding: var(--mt-space-2, 8px) var(--mt-space-4, 16px); border-radius: var(--mt-radius-full); background: var(--mt-footer-chip-bg); border: 1px solid var(--mt-footer-chip-border); color: var(--mt-footer-fg-strong); font-size: var(--mt-text-sm, 0.9rem); font-weight: var(--mt-weight-medium, 500); text-decoration: none; transition: background-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease), border-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease); } /* Kept inside the Ally palette (no WhatsApp brand green) so the footer holds to navy/blue/white/neutral. Flip this one variable if brand-accurate green is ever wanted. */ body.tpl-AllyTuesday .mt-site-footer__whatsapp i { color: var(--mt-footer-icon); } body.tpl-AllyTuesday .mt-site-footer__whatsapp:hover { background: var(--ally-navy-700); border-color: var(--ally-line-strong); } body.tpl-AllyTuesday .mt-site-footer__social { display: flex; flex-wrap: wrap; gap: var(--mt-space-2, 8px); margin-top: var(--mt-space-6, 24px); } body.tpl-AllyTuesday .mt-site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--mt-radius-full); background: var(--mt-footer-chip-bg); border: 1px solid var(--mt-footer-chip-border); color: var(--mt-footer-fg-strong); text-decoration: none; transition: background-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease), border-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease); } body.tpl-AllyTuesday .mt-site-footer__social a:hover { background: var(--mt-footer-chip-hover); border-color: var(--mt-footer-chip-hover); color: var(--ally-white); } /* ============================================================ §10 FOOTER — link columns Headings are small, wide-tracked and quiet; a short blue rule marks each column start. ============================================================ */ body.tpl-AllyTuesday .mt-site-footer__heading { position: relative; font-size: var(--mt-text-xs, 0.75rem); font-weight: var(--mt-weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mt-footer-heading); padding-bottom: var(--mt-space-4, 16px); margin-bottom: var(--mt-space-5, 20px); } body.tpl-AllyTuesday .mt-site-footer__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 20px; height: 2px; border-radius: 2px; background: var(--mt-footer-accent); } body.tpl-AllyTuesday .mt-site-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--mt-space-3, 12px); } body.tpl-AllyTuesday .mt-site-footer__links a { color: var(--mt-footer-fg); font-size: var(--mt-text-sm, 0.9rem); text-decoration: none; transition: color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease); } body.tpl-AllyTuesday .mt-site-footer__links a:hover { color: var(--mt-footer-fg-strong); } /* ============================================================ §11 FOOTER — location panel The map is desaturated toward the footer's own register so it reads as part of the design, not a pasted-in widget. ============================================================ */ body.tpl-AllyTuesday .mt-site-footer__map { border-radius: var(--mt-footer-radius); overflow: hidden; border: 1px solid var(--mt-footer-chip-border); background: var(--mt-footer-panel-bg); margin-bottom: var(--mt-space-4, 16px); } body.tpl-AllyTuesday .mt-site-footer__map iframe { display: block; width: 100%; height: 170px; border: 0; filter: grayscale(0.35) contrast(0.95) brightness(0.95); } /* ============================================================ §12 FOOTER — base row ============================================================ */ body.tpl-AllyTuesday .mt-site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mt-space-3, 12px); padding-top: var(--mt-space-6, 24px); border-top: 1px solid var(--mt-footer-divider); font-size: var(--mt-text-xs, 0.75rem); color: var(--mt-footer-legal); } body.tpl-AllyTuesday .mt-site-footer__base a { color: var(--mt-footer-fg); text-decoration: none; transition: color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease); } body.tpl-AllyTuesday .mt-site-footer__base a:hover { color: var(--mt-footer-fg-strong); } /* ============================================================ §13 FOOTER — responsive stacking ============================================================ */ @media (max-width: 1199px) { body.tpl-AllyTuesday .mt-site-footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; } body.tpl-AllyTuesday .mt-site-footer__map-col { grid-column: span 3; } body.tpl-AllyTuesday .mt-site-footer__map iframe { height: 210px; } } @media (max-width: 991px) { body.tpl-AllyTuesday .mt-site-footer { padding-top: var(--mt-space-12, 48px); } body.tpl-AllyTuesday .mt-site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--mt-space-10, 40px) var(--mt-space-8, 32px); } body.tpl-AllyTuesday .mt-site-footer__brand, body.tpl-AllyTuesday .mt-site-footer__map-col { grid-column: span 2; } } @media (max-width: 575px) { body.tpl-AllyTuesday .mt-site-footer__grid { grid-template-columns: 1fr; } body.tpl-AllyTuesday .mt-site-footer__brand, body.tpl-AllyTuesday .mt-site-footer__map-col { grid-column: span 1; } body.tpl-AllyTuesday .mt-site-footer__statement { max-width: none; } body.tpl-AllyTuesday .mt-site-footer__base { flex-direction: column; text-align: center; } }