/* ========================================================================== Wayfable Shared IA Site-wide orientation chrome for the marketing surface: skip link, footer columns, breadcrumb list layout, in-body crosslink strip. ia- prefix to avoid collisions; consumes design tokens from styles.css only. Loaded from base_landing.html after landing.css (R7). Persistent chrome never animates in — no .fade-up on these components. Spec: bmad-output/redesign/DESIGN.md §2.7 + §2.13 ========================================================================== */ /* --- Skip link (WCAG 2.4.1) --- Visually hidden until focused; first element in , targets #main-content. --- */ .ia-skip-link { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 200; /* above the sticky header (z-index 100) */ display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-4); background-color: var(--cloud); color: var(--forest-moss); font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); text-decoration: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); transform: translateY(-200%); } .ia-skip-link:focus, .ia-skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--color-primary); outline-offset: 2px; } /* --- Footer columns (DESIGN §2.13) --- Wraps the slim footer's flat .footer-nav into labelled columns. The direction switch is scoped to the wrapper context only — .footer-nav is never restyled globally, and the locked sage link treatment is untouched. Expected DOM: --- */ .ia-footer-col { display: flex; flex-direction: column; gap: var(--space-2); } /* Column title is a

, not a heading — charcoal, never footer sage (R-5) */ .ia-footer-col-title { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-primary); } .ia-footer-col .footer-nav { flex-direction: column; gap: var(--space-1); } /* Layout-only: pad the existing link recipe up to ≥44px touch targets */ .ia-footer-col .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; } @media (max-width: 900px) { /* Inside the stacked footer the columns centre with everything else */ .ia-footer-col { align-items: center; } /* ...but `align-items: center` only centres the NAV BOX. Each nav shrink-wraps to its own longest link, and the links (stretched flex items) then rendered left-aligned inside it — so a centred column title sat over a left edge that differed per column (375: 154 vs 99). Centring the labels puts title and links on one axis. */ .ia-footer-col .footer-nav a { justify-content: center; } } /* --- Footer disclaimer (layout-only) --- The Yoto disclaimer used to be the last inside .footer-legal, which is a nowrap-ish flex row: at 375 the sentence could not wrap and pushed document scrollWidth to 377 on EVERY page. It now sits in its own full-width sibling directly after .footer-legal, so .footer-legal itself is untouched. Same 11px uppercase legal register as the row above it. */ .ia-footer-disclaimer { flex: 0 0 100%; width: 100%; margin: var(--space-2) 0 0; font-family: var(--font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.6; overflow-wrap: break-word; } /* --- Breadcrumb (DESIGN §2.7 — THE breadcrumb, site-wide) --- Expected DOM:

Mirrors the page's BreadcrumbList JSON-LD exactly. Crumbs wrap at 320px — no truncation, no horizontal scroll. --- */ .ia-breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; } .ia-breadcrumb-list li { display: flex; align-items: center; gap: var(--space-1); } /* Layout-only: pad the existing .lib-breadcrumb link recipe to ≥44px */ .ia-breadcrumb-list a { display: inline-flex; align-items: center; min-height: 44px; } /* New breadcrumb links take the standard 2px forest ring, not the locked gold .lib-breadcrumb ring (gold rings stay confined to the locked story-card pattern — DESIGN §2.0) */ .lib-breadcrumb .ia-breadcrumb-list a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } /* Current crumb: charcoal, fixing the inherited driftwood-at-14px AA miss by adding a class — .lib-breadcrumb itself is never restyled */ .ia-breadcrumb-current { color: var(--color-text-primary); font-weight: 500; } /* Decorative "›" separator between crumbs (aria-hidden in markup) */ .ia-breadcrumb-sep { color: var(--color-text-primary); user-select: none; } /* --- Crosslink strip (DESIGN §2.13) --- In-body related-links band — the R-5 mitigation: the footer is never the only internal path to a page. Expected DOM: --- */ .ia-crosslink-strip { background-color: var(--parchment); border-radius: var(--radius-lg); padding: var(--space-5); } .ia-crosslink-title { margin: 0 0 var(--space-2); font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); color: var(--color-text-primary); } .ia-crosslink-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; } /* Forest on parchment is 5.47:1 (PASS); rows are ≥44px touch targets */ .ia-crosslink-strip a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-body); font-weight: 500; font-size: var(--text-base); color: var(--color-primary); text-decoration: none; } .ia-crosslink-strip a:hover { color: var(--color-primary-hover); text-decoration: underline; } .ia-crosslink-strip a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }