diff --git a/blocks/footer-legal/footer-legal.css b/blocks/footer-legal/footer-legal.css new file mode 100644 index 0000000..8800473 --- /dev/null +++ b/blocks/footer-legal/footer-legal.css @@ -0,0 +1,109 @@ +/* footer-legal — fortinet.com's second footer section (light gray), below + the main black footer: sponsor/partner badges, copyright, an extended + legal-links row, a tagline, and "Also of Interest" links. Measured + directly from fortinet.com's own .footer-row.copyrights. + + This block's own .section wrapper inherits the generic "footer .footer > + div" rule from footer.css (1240px max-width, centered, 48/24/32px + padding) — right for the black footer's columns, but this section is + full-bleed light gray on the source, not centered on white. Overridden + below via the auto-generated {blockname}-container class, with the same + 1240px centering re-applied one level in on .footer-legal itself instead. */ +footer .footer-legal-container { + max-width: none; + margin: 0; + padding: 0; + background-color: #e6e6e6; +} + +footer .footer-legal { + max-width: var(--content-max-width, 1240px); + margin: 0 auto; + padding: 30px 24px 24px; + color: #000; + font-size: 15px; +} + +footer .footer-legal > div { + margin: 0 0 20px; +} + +/* Sponsor/partner badge row */ +footer .footer-legal-badges ul { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 24px 32px; + margin: 0 0 30px; + padding: 0; + list-style: none; +} + +footer .footer-legal-badges li { + display: flex; + align-items: center; +} + +/* The wordmark (first badge) sits well apart from the sponsor-badge cluster + after it on the source (a ~200px gap vs ~15-30px between the sponsor + badges themselves) — margin-right:auto pushes just this one item away + from the rest, which then keep their own small shared gap from the ul + above, rather than every item getting the same wide gap. */ +footer .footer-legal-badges li:first-child { + margin-right: auto; +} + +/* Fortinet wordmark (first badge) renders noticeably larger than the + sponsor badges after it on the source (194x22 vs ~120x35) — img itself + carries the real aspect ratio, height just caps it to match. */ +footer .footer-legal-badges img { + display: block; + height: 35px; + width: auto; +} + +footer .footer-legal-badges li:first-child img { + height: 22px; +} + +footer .footer-legal-copyright { + margin-bottom: 12px; +} + +/* Legal links row — plain black text/links separated by literal " | " + typed in the source doc (matching the pipe-separated convention already + used for the "Terms of Services / Privacy Policy" line and elsewhere on + this page), not list markup — an author can add/remove links without + touching this block's code. */ +footer .footer-legal-links { + margin-bottom: 20px; +} + +footer .footer-legal-copyright, +footer .footer-legal-links, +footer .footer-legal-tagline { + color: #000; +} + +footer .footer-legal a { + color: #000; +} + +footer .footer-legal-tagline { + margin-bottom: 12px; + font-size: 13px; +} + +footer .footer-legal-also-of-interest { + font-size: 13px; + color: #555; +} + +footer .footer-legal-also-of-interest-label { + font-weight: 700; + margin-right: 4px; +} + +footer .footer-legal-also-of-interest a { + color: #555; +} diff --git a/blocks/footer-legal/footer-legal.js b/blocks/footer-legal/footer-legal.js new file mode 100644 index 0000000..e423382 --- /dev/null +++ b/blocks/footer-legal/footer-legal.js @@ -0,0 +1,69 @@ +import { moveInstrumentation } from '../../scripts/scripts.js'; + +/** + * fortinet.com's footer has a second, visually distinct section below the + * main black footer (light gray, .footer-row.copyrights on the source): + * a row of sponsorship badge images, a copyright line, an extended legal + * links row, a tagline, and an "Also of Interest" links row. Authored here + * as one row per part (in that order) rather than needing named markers — + * each row is classified by what it actually contains (images vs. text + * starting with "Copyright" vs. "Also of Interest" vs. a plain link row vs. + * plain text), so the author doesn't need to remember a rigid row order. + * @param {Element} block The footer-legal block element + */ +export default function decorate(block) { + [...block.children].forEach((row) => { + // Rows may be authored as a single cell (row > div > content) or with + // content directly in the row — flatten either into the row itself so + // classification below doesn't need to care which. + const cells = [...row.children]; + if (cells.length === 1 && cells[0].tagName === 'DIV') { + const cell = cells[0]; + moveInstrumentation(cell, row); + while (cell.firstElementChild) row.append(cell.firstElementChild); + cell.remove(); + } + + const text = row.textContent.trim(); + const images = row.querySelectorAll('picture, img'); + const links = row.querySelectorAll('a'); + + if (images.length && links.length) { + row.classList.add('footer-legal-badges'); + // Each linked badge becomes its own list item, for flex/gap layout + // and so screen readers announce a count ("list of 7 items") instead + // of a wall of unrelated links. + const ul = document.createElement('ul'); + row.querySelectorAll('p').forEach((p) => { + const li = document.createElement('li'); + moveInstrumentation(p, li); + while (p.firstChild) li.append(p.firstChild); + ul.append(li); + p.remove(); + }); + row.append(ul); + } else if (/^Copyright/i.test(text)) { + row.classList.add('footer-legal-copyright'); + } else if (/Also of Interest/i.test(text)) { + row.classList.add('footer-legal-also-of-interest'); + // Split the leading label ("Also of Interest:") from the links after + // it so each can be styled on its own — the label is bold/dimmer on + // the source, not just plain running text. + const firstNode = row.firstChild; + if (firstNode?.nodeType === Node.TEXT_NODE) { + const [label, ...rest] = firstNode.textContent.split(':'); + if (rest.length) { + const labelSpan = document.createElement('span'); + labelSpan.className = 'footer-legal-also-of-interest-label'; + labelSpan.textContent = `${label}:`; + firstNode.textContent = rest.join(':'); + row.prepend(labelSpan); + } + } + } else if (links.length >= 2) { + row.classList.add('footer-legal-links'); + } else { + row.classList.add('footer-legal-tagline'); + } + }); +} diff --git a/icons/footer-badge-attanasio.jpg b/icons/footer-badge-attanasio.jpg new file mode 100644 index 0000000..18a950b Binary files /dev/null and b/icons/footer-badge-attanasio.jpg differ diff --git a/icons/footer-badge-barcelona.png b/icons/footer-badge-barcelona.png new file mode 100644 index 0000000..2f4061a Binary files /dev/null and b/icons/footer-badge-barcelona.png differ diff --git a/icons/footer-badge-european-tour.png b/icons/footer-badge-european-tour.png new file mode 100644 index 0000000..4a0e3f6 Binary files /dev/null and b/icons/footer-badge-european-tour.png differ diff --git a/icons/footer-badge-founders-cup.png b/icons/footer-badge-founders-cup.png new file mode 100644 index 0000000..128c37c Binary files /dev/null and b/icons/footer-badge-founders-cup.png differ diff --git a/icons/footer-badge-juventus.png b/icons/footer-badge-juventus.png new file mode 100644 index 0000000..84175b0 Binary files /dev/null and b/icons/footer-badge-juventus.png differ diff --git a/icons/footer-badge-pga-americas.png b/icons/footer-badge-pga-americas.png new file mode 100644 index 0000000..1699cd1 Binary files /dev/null and b/icons/footer-badge-pga-americas.png differ diff --git a/icons/footer-logo.svg b/icons/footer-logo.svg new file mode 100644 index 0000000..16a16ec --- /dev/null +++ b/icons/footer-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file