/* ── Site footer ───────────────────────────────────────────────────────────── Styling for includes/site-footer.php. Lives with the markup, in the plugin, for the same reason the markup does: it travels by rsync, so the footer can never be half-deployed (correct markup, missing styles) the way it would be if this sat in the customiser's Additional CSS. Brand tokens come from configure-theme.php's :root block, but EVERY var here carries its brand.md literal as a fallback. A database restored from before that script ran would otherwise render this footer with no colours at all — unstyled black-on-black, which is the single most expensive failure mode this palette has (see the header-logo-color trap in configure-theme.php). Contrast, measured, all on Iron #1A1D23: Chalk #F5F6F8 15.61:1 body and links Steel Light #8F98A6 4.63:1 muted text — the AA floor, deliberately Signal #FF5A1F 5.41:1 hover and headings accent Steel #5A6472 is 2.81:1 on Iron and appears nowhere below. */ .hgs-footer { background: var(--iron, #1A1D23); color: var(--chalk, #F5F6F8); padding: var(--space-8, 64px) var(--space-5, 24px) var(--space-5, 24px); font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.65; } .hgs-footer__inner { max-width: 1200px; margin-inline: auto; display: grid; /* Brand column is wider: it carries the pitch and the canonical facts. */ grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--space-7, 48px) var(--space-6, 32px); align-items: start; } /* ── Brand column ─────────────────────────────────────────────────────── */ .hgs-footer__logo img, .hgs-footer__logo { display: block; max-width: 210px; height: auto; } /* ⚠ Astra recolours .custom-logo-link img through an SVG filter when header-logo-color is set. This logo is NOT that element, but the same class can be picked up by broad theme rules — pin the filter off so the two-colour reverse lockup (Signal mark + Chalk wordmark) can never be flattened. */ .hgs-footer__logo img { filter: none; } .hgs-footer__wordmark { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--chalk, #F5F6F8); text-decoration: none; } .hgs-footer__pitch { color: var(--steel-light, #8F98A6); margin: var(--space-4, 16px) 0 var(--space-4, 16px); max-width: 44ch; } .hgs-footer__facts { list-style: none; margin: 0 0 var(--space-4, 16px); padding: 0; color: var(--chalk, #F5F6F8); font-size: 14px; } .hgs-footer__facts li { position: relative; padding-left: 20px; margin-bottom: var(--space-1, 4px); } /* A rule, not a tick: this store does not do decorative reassurance. */ .hgs-footer__facts li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 2px; background: var(--signal, #FF5A1F); } .hgs-footer__support a { color: var(--chalk, #F5F6F8); font-weight: 500; } /* ── Link columns ─────────────────────────────────────────────────────── */ .hgs-footer__heading { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-light, #8F98A6); margin: 0 0 var(--space-3, 12px); } .hgs-footer__col ul { list-style: none; margin: 0; padding: 0; } .hgs-footer__col li { margin-bottom: var(--space-2, 8px); } .hgs-footer a { color: var(--chalk, #F5F6F8); text-decoration: none; transition: color 150ms ease-out; } .hgs-footer a:hover, .hgs-footer a:focus-visible { color: var(--signal, #FF5A1F); } /* Never removed, never colour-change alone (brand.md §6). Signal rather than Signal Deep because this ring is drawn on Iron, not on Chalk. */ .hgs-footer a:focus-visible, .hgs-footer button:focus-visible, .hgs-footer input:focus-visible { outline: 3px solid var(--signal, #FF5A1F); outline-offset: 2px; border-radius: 2px; } /* ── 15%-off signup band ──────────────────────────────────────────────── */ .hgs-footer__signup { max-width: 1200px; margin: var(--space-7, 48px) auto 0; padding: var(--space-5, 24px) 0 0; border-top: 1px solid rgba(245, 246, 248, 0.12); } /* The form supplies its own heading and copy (see site-footer.php — the shortcode's chrome is suppressed), so this band only has to give it a comfortable column and put the input and button side by side. */ .hgs-footer__signup .hgs-cta__inner { max-width: 760px; margin-inline: auto; } .hgs-footer__signup .hgs-cta__form h2, .hgs-footer__signup .mailpoet_form h2 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; color: var(--chalk, #F5F6F8); margin: 0 0 var(--space-2, 8px); } .hgs-footer__signup .mailpoet_form p { color: var(--steel-light, #8F98A6); } /* Input and button as one row on desktop. FLEX, not inline-block. The first attempt used inline-block at `calc(100% - 210px)` + `210px`, which adds to exactly 100% — and then the whitespace between the two
s in MailPoet's markup counts as a ~4px inline box and wraps the button onto its own line. Flex has no such whitespace and the gap is explicit. The form's other children (heading, copy paragraph) take a full-width basis; MailPoet's hidden inputs and honeypot label are display:none and so never become flex items. */ @media (min-width: 700px) { .hgs-footer__signup form.mailpoet_form_form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 12px; } .hgs-footer__signup form.mailpoet_form_form > * { flex: 1 1 100%; } .hgs-footer__signup .mailpoet_paragraph:has(> .mailpoet_text) { flex: 1 1 260px; } .hgs-footer__signup .mailpoet_paragraph:has(> .mailpoet_submit) { flex: 0 0 200px; } } /* The MailPoet form carries inline styles tuned for the POPUP, which sits on Iron at 420px wide. In the footer it is a two-up row on a wider column, so the geometry is overridden here and the colours are left alone — they are already the popup's Iron-ground palette and they are correct. */ .hgs-footer__signup .mailpoet_form { padding: 0 !important; width: 100% !important; max-width: none !important; background: transparent !important; } .hgs-footer__signup .mailpoet_paragraph { margin-bottom: var(--space-2, 8px) !important; } .hgs-footer__signup .mailpoet_text { width: 100% !important; min-height: 48px; border-radius: var(--radius-control, 6px) !important; border: 1px solid rgba(245, 246, 248, 0.28) !important; background: var(--iron-raised, #232830) !important; color: var(--chalk, #F5F6F8) !important; padding: 0 14px !important; } .hgs-footer__signup .mailpoet_text::placeholder { color: var(--steel-light, #8F98A6); } /* On dark, the primary fill INVERTS: bright Signal with an Iron label is 5.41:1. White on Signal is 3.12:1 and is forbidden (brand.md §3). */ .hgs-footer__signup .mailpoet_submit { width: 100% !important; min-height: 48px; background: var(--signal, #FF5A1F) !important; color: var(--iron, #1A1D23) !important; border: 0 !important; border-radius: var(--radius-control, 6px) !important; font-family: 'Archivo', sans-serif !important; font-weight: 600 !important; font-size: 16px !important; cursor: pointer; transition: background-color 150ms ease-out; } .hgs-footer__signup .mailpoet_submit:hover { background: var(--signal-deep, #C9430F) !important; color: #FFFFFF !important; } .hgs-footer__signup .mailpoet_validate_success, .hgs-footer__signup .mailpoet_validate_error { color: var(--chalk, #F5F6F8) !important; } /* ── Utility bar: consent + payment ───────────────────────────────────── */ .hgs-footer__utility { max-width: 1200px; margin: var(--space-5, 24px) auto 0; padding-top: var(--space-4, 16px); border-top: 1px solid rgba(245, 246, 248, 0.12); display: flex; flex-wrap: wrap; gap: var(--space-3, 12px) var(--space-5, 24px); align-items: center; justify-content: space-between; } .hgs-footer__consent { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px) var(--space-5, 24px); align-items: center; font-size: 13px; } /* The consent control must be a