/* ═══════════════════════════════════════════════════════════════════════════ SITE FOOTER ═══════════════════════════════════════════════════════════════════════════ */ .ce-footer { background-color: #ffffff; border-top: 1px solid #e5e5e3; margin: 0; padding: 0; } /* ── Main footer body ── */ .ce-footer__body { max-width: 1520px; margin: 0 auto; padding: 4rem 2rem 3rem; display: grid; /* Brand column plus one per top-nav section, so the footer mirrors the main navigation exactly. */ grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr; gap: 2.5rem 3rem; align-items: start; } /* ── Brand column ── */ .ce-footer__brand { display: flex; flex-direction: column; gap: 1rem; } .ce-footer__logo img { display: block; width: auto; max-height: 48px; } .ce-footer__tagline { font-family: var(--ci-font-primary); font-size: var(--ci-text-utility); /* 16px */ font-weight: 700; color: var(--ci-color-navy); margin: 0; line-height: 1.4; } .ce-footer__desc { font-family: var(--ci-font-primary); font-size: var(--ci-text-utility); /* 16px */ line-height: 1.7; color: var(--ci-color-text-muted); margin: 0; } /* ── Nav columns ── */ .ce-footer__col { display: flex; flex-direction: column; gap: 0.6rem; } .ce-footer__col-heading { font-family: var(--ci-font-primary); font-size: var(--ci-text-card-body); /* 18px — a full step above the links beneath it, so the columns are scannable */ font-weight: 700; color: var(--ci-color-navy); margin: 0 0 0.2rem; } .ce-footer__col a, .ce-footer__brand-contact > a { font-family: var(--ci-font-primary); font-size: var(--ci-text-utility); /* 16px */ font-weight: 400; color: var(--ci-color-navy); text-decoration: none; line-height: 1.4; transition: color 0.15s ease; } .ce-footer__col a:hover, .ce-footer__brand-contact > a:hover { color: var(--ci-color-engage); } /* ── Touch devices: tap targets big enough to hit ─────────────────────────── These links were sized for a cursor. Each one is a bare line box — 22px tall with no padding — and 10px from its neighbour, so 21 of the 26 were under 44px. Apple's guideline is 44x44pt; WCAG 2.2 AA (2.5.8) sets a floor of 24x24 CSS px, which 22px misses on its own. 0.47rem top and bottom takes each link to ~37.5px. That is short of Apple's 44pt but comfortably clear of the WCAG floor, and it is the spacing that looked right on the device — 0.7rem (a 44.8px target) read as too airy, so this is a third off it. The column's 0.6rem gap goes at the same time, deliberately: the padding replaces it as the visual spacing, and with no gap the tap areas are contiguous, so there is no dead strip between two links for a thumb to land in. Keyed off .is-touch-nav — set on before first paint (functions.php) from a real touch check — rather than a width breakpoint, because an iPad in landscape is 1180px wide and would otherwise be treated as a desktop. Same signal the nav already uses to decide it is a touch device. */ html.is-touch-nav .ce-footer__col { gap: 0; } html.is-touch-nav .ce-footer__col a { padding: 0.47rem 0; } /* The legal row and the brand contact link are the same size and the same problem — both sit at 22px. */ html.is-touch-nav .ce-footer__legal a, html.is-touch-nav .ce-footer__brand-contact > a { display: inline-block; padding: 0.47rem 0; } /* ── Get in touch — lives inside brand column ── */ .ce-footer__brand-contact { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid #e0e0de; } /* ── Get in touch column ── */ .ce-footer__contact-email { font-family: var(--ci-font-primary); font-size: var(--ci-text-utility); /* 16px */ font-weight: 400; color: var(--ci-color-navy); text-decoration: none; transition: color 0.15s ease; /* break-all let the address split anywhere, and in the 209px brand column it chose the worst possible place: "enquiries@cornerstoneseduc / ation.co.uk". The address is one unbreakable token to the layout engine, so it needs a break opportunity given to it rather than permission to break anywhere — there is a after the @ in parts/footer.html, and the two halves are 78px and 203px, both inside the column. overflow-wrap: break-word is the safety net, and only breaks a word that genuinely cannot fit a line of its own. textContent is unchanged either way, so copying the address still yields the whole thing. */ overflow-wrap: break-word; } .ce-footer__contact-email:hover { color: var(--ci-color-engage); } .ce-footer__social { display: flex; gap: 0.6rem; margin-top: 0.4rem; } .ce-footer__social a { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.375rem; background-color: #e8e8e6; color: var(--ci-color-navy) !important; font-size: 1rem; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .ce-footer__social a:hover { background-color: var(--ci-color-navy); color: #ffffff !important; } /* ── Primary CTA — the one conversion action in the footer, set apart from the navigation links rather than sitting among them. ── */ .ce-footer__cta { align-self: flex-start; margin-top: 1.25rem; padding-left: 2rem; padding-right: 2rem; } /* ── Bottom bar ── */ .ce-footer__bar { border-top: 1px solid #e0e0de; max-width: 1520px; margin: 0 auto; padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ce-footer__copyright { font-family: var(--ci-font-primary); font-size: 0.875rem; /* 14px — legal microcopy, the one step below the floor */ color: var(--ci-color-text-muted); margin: 0; } .ce-footer__legal { display: flex; gap: 1.5rem; } .ce-footer__legal a { font-family: var(--ci-font-primary); font-size: 0.875rem; /* 14px */ color: var(--ci-color-text-muted); text-decoration: none; transition: color 0.15s ease; } .ce-footer__legal a:hover { color: var(--ci-color-navy); } /* ── Collapsible section wrappers ────────────────────────────────────────── assets/js/components/footer-accordion.js inserts these two elements around each column's links, at every screen size. display: contents takes them back out of the layout above the phone breakpoint, so the links remain direct flex children of .ce-footer__col and desktop renders exactly as it did before the accordion existed. */ .ce-footer__col-panel, .ce-footer__col-panel-inner { display: contents; } /* ── Mobile ── */ @media (max-width: 1024px) { .ce-footer__body { grid-template-columns: 1fr 1fr 1fr; } .ce-footer__brand { grid-column: 1 / -1; } } /* ── Phones — sections collapse ──────────────────────────────────────────── Was a two-column grid, which does not work here: a grid row is as tall as its tallest cell, so Curriculum's ten links sat beside Platform's four and left a 192px void, and About landed on a row of its own with an empty column beside it. 1490px of footer on an 844px screen. One column of collapsed sections instead. Nothing is removed — every link is still in the markup and one tap away. 767px rather than the 640px this block used to sit at: between those widths the ≤1024 rule gives three columns of roughly 210px, which has the same ragged-row problem in a milder form, and 767 is the breakpoint the rest of the theme treats as a phone. PLUS any portrait screen up to 1024px, which is every iPad held upright. The ragged rows are not a phone problem, they are a not-enough-width problem: at iPad portrait the footer measured 1230px — a full screen, and 22 per cent of the homepage — with 256px of void beside Curriculum and an empty third column on the second row. Collapsed it comes to 741px. Orientation rather than width alone, so an iPad on its side — which has the room to lay five sections out properly — keeps the grid it has today. This condition must stay identical to MOBILE in assets/js/components/footer-accordion.js. The script swaps the headings for