/* ========================================================================== Foundation banner global element (AB#98955, section 3.7; AB#99003 visitor) -------------------------------------------------------------------------- Every rule is scoped under .brand-foundation, the class masterFoundation.cshtml puts on , so nothing here can reach the ASISA, ESD or Academy layouts (site-within-a-site rule, handover 31 Aug 2026). Linked after main.css so the two Slick rules overridden at the foot win. Markup: Views/Shared/Components/FoundationBanner/Default.cshtml. Behaviour: foundationBanners.js. Slick is shared, and three of its rules have to be answered here: main.css:1202 pulls every dotted slider up by 30px, main.css:1016 gives every slide the track's inherited height, and main.css:1012 makes every track a flex container. The first two are overridden at the foot of this file. The third is left alone on purpose: it was measured on 11 September 2026 and moves nothing here, because Slick writes an explicit width on every slide and the track's width is their sum, so no slide is ever shrunk by it. Source of every value: the 5 August 2026 HeyGuys frames attached to the page features in Azure DevOps, measured with Pillow at 1440 px (design/foundation-banners/SOURCE.md, "frame" below), or an ESTIMATE / INFERENCE marked as such. The two programme banner Figma nodes (5842-338758 and 7564-309792) refine the programme values once cached. Design over WCAG: colours from the frames are kept as they are; the ratios are recorded in Documentation/foundation-banners.md. Locked composition: each pattern is an inline SVG at the frame's own pixel size (1440 wide), absolutely positioned at the top left of the band and never scaled, and the photo is a separate box behind it, cropped to fit with object-fit. So an uploaded image of any size or ratio changes what shows through the pattern and nothing else (Cathy Harrison, part 1 [51:15]: "the image goes behind those shapes and there's a bit of opacity there, so we need to lock that"). On screens wider than 1440 the accent and the photo simply continue to the right; on narrower screens the right of the drawing is cropped, which is the photo side. ========================================================================== */ .brand-foundation { /* --fnd-banner-accent is declared on .fnd-banner below, not here: a custom property resolves where it is declared, and --programme-accent arrives as an inline style on the banner root, so declaring the alias on body would fix it to the violet before the programme colour is in scope. */ --fnd-banner-text: #FFFFFF; /* frame: every word on a banner is white */ --fnd-banner-font: var(--font-family-main, Arial, Helvetica, sans-serif); /* Alignment. The frames start the copy, the lock-up and the breadcrumbs 60 px in at 1440, which is the margin of the header's 1320 px column (foundation-navigation.css --fnd-nav-column), so the copy uses the same column and moves with it on other widths. */ --fnd-banner-column: var(--fnd-nav-column, 1320px); --fnd-banner-column-pad: 20px; /* Where the frame's left edge sits. The drawings are 1440 px wide and the copy starts 60 px into them, which at 1440 is also the header column's left edge (margin 40 + padding 20). Wider than 1440 the column is centred, so the drawing, the photo edge and the lock-up move with it: at 1897 px the frame's edge is 228 px in and the heading again sits on the panel and its translucent triangle, as the frame shows. Narrower than 1440 the drawing stays at 0 and the photo side is cropped. Seen on the first dev test at 1897 px, where the heading had drifted onto the photo (Michiel Visser, 7 Sep 2026). ESTIMATE for widths above 1440: no wider frame exists. */ --fnd-banner-frame-width: 1440px; --fnd-banner-frame-left: max(0px, calc((100% - var(--fnd-banner-frame-width)) / 2)); /* Heights. frame: hero 628 (home), band 110/111 (About Us and the small programme band), programme 501. The section-with-slides height has no frame: INFERENCE, the hero composition lowered so a section page is not mistaken for the home page. */ --fnd-banner-hero-height: 628px; --fnd-banner-section-height: 400px; --fnd-banner-band-height: 110px; --fnd-banner-programme-height: 501px; /* Where the photo box starts. frame: the hero panel's top edge is at x=520 and the programme panel ends at x=540. The hero pattern's chevron edge and translucent triangle then overlap the photo. */ --fnd-banner-hero-photo-left: 520px; --fnd-banner-programme-photo-left: 540px; /* The shapes. Black or white at fixed opacities over the accent, so one drawing serves every programme colour. ESTIMATE: fitted to the sampled tones (violet band: #76138A dark, #8B23A0 mid over a #9930B0 base; hero panel #701284 with #8A299D, #B45FC6 and a #863199 veil over the photo; WageWise panel #386433 with #598854 and #284F22). The frames' own tones are brand shades rather than overlays, so the Figma fills replace these when cached. */ --fnd-banner-shape-dark: 0.24; --fnd-banner-shape-mid: 0.10; --fnd-banner-shape-darker: 0.30; --fnd-banner-shape-lift: 0.18; --fnd-banner-shape-light: 0.50; --fnd-banner-shape-veil: 0.82; --fnd-banner-programme-panel: 0.25; --fnd-banner-programme-light: 0.22; --fnd-banner-programme-dark: 0.28; /* Phone band tones, from Figma node 5842:340198 (7 Sep 2026): the WageWise band is drawn in #244620 (darkest), #3E5D3A (mid) and #558650 (light) over the WageWise/100 base #50754C. Those are brand shades of one colour, so they are derived from the accent here rather than stored per programme (nothing programme-specific is in code). ESTIMATE for the mix amounts: sRGB mixing with black loses a little saturation against the frame's shades. */ --fnd-banner-tone-darkest-mix: 40%; --fnd-banner-tone-deep-mix: 30%; /* the large phone banner's #2C5328 / #33572F over #50754C */ --fnd-banner-tone-mid-mix: 20%; --fnd-banner-tone-midlight-mix: 15%; /* its #416A3D / #436740 */ --fnd-banner-tone-light-mix: 10%; /* Copy. frame: heading cap height 46 px over two lines 70 px apart (64px/1.1), supporting line 24px, block 620 px wide, its last line 88 px above the band's foot, dots 40 px above it. */ --fnd-banner-heading-size: 64px; --fnd-banner-heading-line: 1.1; --fnd-banner-tagline-size: 24px; --fnd-banner-tagline-line: 1.5; --fnd-banner-copy-width: 620px; --fnd-banner-copy-bottom: 88px; --fnd-banner-heading-gap: 24px; /* frame: 26 px from the heading's descenders to the tagline's cap tops */ --fnd-banner-cta-gap: 32px; /* ESTIMATE: no frame carries a button */ --fnd-banner-dot-size: 10px; /* frame: 9 to 10 px dots */ --fnd-banner-dot-gap: 6px; /* frame: 6 px between dots */ --fnd-banner-dots-bottom: 34px; /* frame: dot centres 40 px above the foot */ --fnd-banner-dot: rgba(255, 255, 255, 0.85); /* frames: the inactive dots are white (the phone frame shows them plainly; on the desktop panel they read #4A to #55 through the JPEG) */ --fnd-banner-dot-active: #262626; /* frame: the active dot is near black */ /* The lock-up. frame: on the large banner it spans x 50 to 470 and is centred vertically; on the small band it is 68 px tall from x=60 and the headline starts at x=300. */ --fnd-banner-lockup-large-width: 420px; --fnd-banner-lockup-large-left: 50px; --fnd-banner-lockup-small-height: 68px; --fnd-banner-brand-gap: 50px; --fnd-banner-headline-size: 24px; /* frame: 17 px cap height */ --fnd-banner-subline-size: 16px; /* ESTIMATE: the frame shows no supporting line on the small band */ /* Phones. No mobile frame exists (SOURCE.md); the Feb 2026 wireframes and the handover ("the geometric shape... just inverted... it just moves down", part 1 [52:13]) are the only sources. ESTIMATE, all of it. The breakpoint follows the estate's Slick breakpoint (770) rather than the header's 1024: between the two the desktop composition still fits. */ /* The hero on phones, from Michiel Visser's screenshot of the Figma frame (7 Sep 2026): 243 wide, the hero 490 tall (2.016 of the width), the photo the top 256 rows (52.2%), the heading four lines of about 28 px starting 7 px in with its block ending 20% above the foot, the supporting line about 11 px ending 12% above the foot, the dots 5% above it. Sizes scale from the 243 px frame to the device with clamps; the height is capped so a tablet is not given a 1500 px hero: ESTIMATE above phone width. */ --fnd-banner-mobile-hero-ratio: 2.016; --fnd-banner-mobile-hero-max-height: 820px; --fnd-banner-mobile-hero-photo-height: 52.2%; --fnd-banner-mobile-hero-copy-bottom: 12%; --fnd-banner-mobile-hero-pad: 3%; --fnd-banner-mobile-hero-heading-size: clamp(28px, 11.3vw, 46px); --fnd-banner-mobile-hero-heading-line: 1.05; --fnd-banner-mobile-hero-tagline-size: clamp(14px, 4.5vw, 18px); --fnd-banner-mobile-hero-tagline-gap: 5%; --fnd-banner-mobile-hero-dots-bottom: 4%; --fnd-banner-mobile-hero-dot-size: 12px; /* frame: 7.5 px on the 243 px mock, 12 px at 390 */ --fnd-banner-mobile-hero-dot-gap: 11px; /* The large programme banner on phones, from Michiel Visser's screenshot of Figma node 4816-132212 (7 Sep 2026): the frame is 247 x 360, the photo fills the top 216 rows (60%), the lock-up is 156 px wide (63%) with its left edge 34 px in (13.8%) and its centre 296 px down (82%). The banner keeps the frame's proportions up to a cap, so a tablet does not get a 1100 px banner: ESTIMATE above phone width. */ --fnd-banner-mobile-programme-ratio: 1.4575; --fnd-banner-mobile-programme-max-height: 560px; --fnd-banner-mobile-programme-photo-height: 60%; --fnd-banner-mobile-lockup-large-left: 13.8%; --fnd-banner-mobile-lockup-large-width: 63%; --fnd-banner-mobile-lockup-large-top: 75%; --fnd-banner-mobile-heading-size: 32px; --fnd-banner-mobile-tagline-size: 16px; --fnd-banner-mobile-pad: 24px; --fnd-banner-mobile-headline-size: 18px; /* The small band on phones, from Figma node 5842:340198 (frame, not estimate): 80 px tall, the lock-up 48 px tall with its left edge 16 px in, vertically centred, and no words on the band. */ --fnd-banner-mobile-band-height: 80px; --fnd-banner-mobile-lockup-height: 48px; --fnd-banner-mobile-lockup-left: 16px; } /* ---- The band ---------------------------------------------------------- */ .brand-foundation .fnd-banner { /* The programme colour arrives as --programme-accent on this element (FoundationBannerAccent); outside a programme it is absent and the Foundation violet applies. Declared here, on the element that carries the inline value, so the fallback is evaluated with the programme colour in scope. */ --fnd-banner-accent: var(--programme-accent, var(--foundation, #A137B7)); /* The tones are mixed here too, on the element where the accent is defined: a custom property that reads another one resolves where it is declared, and on body the accent does not exist yet, which made every tone an invalid colour and every shape black on the first phone check. */ --fnd-banner-tone-darkest: color-mix(in srgb, var(--fnd-banner-accent), #000 var(--fnd-banner-tone-darkest-mix)); --fnd-banner-tone-deep: color-mix(in srgb, var(--fnd-banner-accent), #000 var(--fnd-banner-tone-deep-mix)); --fnd-banner-tone-mid: color-mix(in srgb, var(--fnd-banner-accent), #000 var(--fnd-banner-tone-mid-mix)); --fnd-banner-tone-midlight: color-mix(in srgb, var(--fnd-banner-accent), #000 var(--fnd-banner-tone-midlight-mix)); --fnd-banner-tone-light: color-mix(in srgb, var(--fnd-banner-accent), #fff var(--fnd-banner-tone-light-mix)); position: relative; isolation: isolate; /* keeps the slide z-indexes inside; the sticky header (z 5) stays above */ width: 100%; overflow: hidden; background: var(--fnd-banner-accent); color: var(--fnd-banner-text); font-family: var(--fnd-banner-font); } .brand-foundation .fnd-banner--home { height: var(--fnd-banner-hero-height); } .brand-foundation .fnd-banner--section { height: var(--fnd-banner-section-height); } .brand-foundation .fnd-banner--band { height: var(--fnd-banner-band-height); } .brand-foundation .fnd-banner--programme-small { display: flex; align-items: center; height: auto; min-height: var(--fnd-banner-band-height); /* grows only when the words wrap */ } .brand-foundation .fnd-banner--programme-large { height: var(--fnd-banner-programme-height); } /* ---- Slides ------------------------------------------------------------ */ .brand-foundation .fnd-banner__slides { position: absolute; inset: 0; } .brand-foundation .fnd-banner__slide { position: relative; height: 100%; overflow: hidden; } /* Without JavaScript only the first slide shows; with it, Slick stacks them for the fade. */ .brand-foundation .fnd-banner__slides:not(.slick-initialized) .fnd-banner__slide:not(:first-child) { display: none; } /* ---- The photo --------------------------------------------------------- */ .brand-foundation .fnd-banner__media { position: absolute; top: 0; bottom: 0; left: calc(var(--fnd-banner-frame-left) + var(--fnd-banner-hero-photo-left)); right: 0; z-index: 1; } .brand-foundation .fnd-banner--programme-large .fnd-banner__media { left: calc(var(--fnd-banner-frame-left) + var(--fnd-banner-programme-photo-left)); } .brand-foundation .fnd-banner__media picture, .brand-foundation .fnd-banner__image { display: block; width: 100%; height: 100%; } .brand-foundation .fnd-banner__image { object-fit: cover; /* the crop already has the box's shape; this covers the rounding */ object-position: center; } /* ---- The pattern ------------------------------------------------------- */ .brand-foundation .fnd-banner__panel { position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* Never scaled: the width and height attributes on the SVG are the frame's pixels, and the drawing is pinned to the frame's left edge (see --fnd-banner-frame-left). Its leftmost shapes run past the viewBox to the left, and overflow is visible, so no seam shows where the band continues left of the drawing on a wide screen. See the file header for why it never scales. */ .brand-foundation .fnd-banner__pattern { position: absolute; top: 0; left: var(--fnd-banner-frame-left); display: block; overflow: visible; } /* The band has two drawings; the phone one is shown below the breakpoint, the desktop one above. */ .brand-foundation .fnd-banner__pattern--band-mobile { display: none; } .brand-foundation .fnd-banner__tone--darkest { fill: var(--fnd-banner-tone-darkest); } .brand-foundation .fnd-banner__tone--deep { fill: var(--fnd-banner-tone-deep); } .brand-foundation .fnd-banner__tone--mid { fill: var(--fnd-banner-tone-mid); } .brand-foundation .fnd-banner__tone--midlight { fill: var(--fnd-banner-tone-midlight); } .brand-foundation .fnd-banner__tone--light { fill: var(--fnd-banner-tone-light); } /* The phone drawings of the large programme banner and the hero: hidden on desktop, sized to the banner on phones. */ .brand-foundation .fnd-banner__pattern--programme-mobile, .brand-foundation .fnd-banner__pattern--hero-mobile { display: none; } .brand-foundation .fnd-banner__panel-fill { fill: var(--fnd-banner-accent); } .brand-foundation .fnd-banner__shape { fill: #000000; } .brand-foundation .fnd-banner__shape--dark { fill-opacity: var(--fnd-banner-shape-dark); } .brand-foundation .fnd-banner__shape--mid { fill-opacity: var(--fnd-banner-shape-mid); } .brand-foundation .fnd-banner__shape--darker { fill-opacity: var(--fnd-banner-shape-darker); } .brand-foundation .fnd-banner__shape--lift { fill: #FFFFFF; fill-opacity: var(--fnd-banner-shape-lift); } .brand-foundation .fnd-banner__shape--light { fill: #FFFFFF; fill-opacity: var(--fnd-banner-shape-light); } .brand-foundation .fnd-banner__shape--strip { fill: var(--fnd-banner-accent); fill-opacity: 1; } .brand-foundation .fnd-banner__shape--veil { fill: var(--fnd-banner-accent); fill-opacity: var(--fnd-banner-shape-veil); } /* The programme panel is a darker field with lighter and darker triangles cut into it. */ .brand-foundation .fnd-banner__pattern--programme .fnd-banner__shape--mid { fill-opacity: var(--fnd-banner-programme-panel); } .brand-foundation .fnd-banner__pattern--programme .fnd-banner__shape--light { fill-opacity: var(--fnd-banner-programme-light); } .brand-foundation .fnd-banner__pattern--programme .fnd-banner__shape--dark { fill-opacity: var(--fnd-banner-programme-dark); } /* ---- Copy (hero and section) ------------------------------------------- */ .brand-foundation .fnd-banner__copy { position: absolute; left: 0; right: 0; bottom: var(--fnd-banner-copy-bottom); z-index: 3; } /* The header's column, so the copy lines up with the logo above and the breadcrumbs below. Content-box, like the site container and the header. */ .brand-foundation .fnd-banner__copy-inner { box-sizing: content-box; max-width: var(--fnd-banner-column); margin: 0 auto; padding: 0 var(--fnd-banner-column-pad); } .brand-foundation .fnd-banner__heading { max-width: var(--fnd-banner-copy-width); margin: 0; font-family: var(--fnd-banner-font); font-size: var(--fnd-banner-heading-size); font-weight: 700; line-height: var(--fnd-banner-heading-line); color: var(--fnd-banner-text); text-transform: none; } .brand-foundation .fnd-banner__tagline { max-width: var(--fnd-banner-copy-width); margin: var(--fnd-banner-heading-gap) 0 0; font-size: var(--fnd-banner-tagline-size); font-weight: 400; line-height: var(--fnd-banner-tagline-line); color: var(--fnd-banner-text); } /* The optional button. ESTIMATE: no delivered frame carries one (the note on AB#99003 says the CTAs sit in the content blocks below the banner and whether one stays on the banner is with HeyGuys), so this is the site's outlined pill in white, as the frames draw the Search button in violet. */ .brand-foundation .fnd-banner__cta { display: inline-block; margin-top: var(--fnd-banner-cta-gap); padding: 12px 32px; border: 2px solid var(--fnd-banner-text); border-radius: 999px; background: transparent; color: var(--fnd-banner-text); font-family: var(--fnd-banner-font); font-size: 16px; font-weight: 700; line-height: 1.5; text-decoration: none; transition: background-color 150ms ease, color 150ms ease; } .brand-foundation .fnd-banner__cta:hover, .brand-foundation .fnd-banner__cta:focus-visible { background: var(--fnd-banner-text); color: var(--fnd-banner-accent); } .brand-foundation .fnd-banner__cta:focus-visible { outline: 2px solid var(--fnd-banner-text); outline-offset: 3px; } /* ---- The programme lock-up and headline -------------------------------- */ .brand-foundation .fnd-banner__brand { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; display: flex; align-items: center; gap: var(--fnd-banner-brand-gap); pointer-events: none; } .brand-foundation .fnd-banner--programme-large .fnd-banner__brand { left: calc(var(--fnd-banner-frame-left) + var(--fnd-banner-lockup-large-left)); width: var(--fnd-banner-lockup-large-width); } .brand-foundation .fnd-banner--programme-small .fnd-banner__brand { position: relative; /* in flow, so the band can grow with its words */ z-index: 3; width: 100%; min-height: var(--fnd-banner-band-height); box-sizing: border-box; padding: 12px var(--fnd-banner-column-pad) 12px calc((100% - var(--fnd-banner-column)) / 2 + var(--fnd-banner-column-pad)); /* the column's left edge, 60 px at 1440 */ } /* The pattern stays pinned to the band even when the words make it taller. */ .brand-foundation .fnd-banner--programme-small > .fnd-banner__panel { z-index: 0; } .brand-foundation .fnd-banner__lockup { display: block; flex: 0 0 auto; } .brand-foundation .fnd-banner__logo { display: block; } /* The programme's ordinary logo turned white when no white banner logo has been uploaded: brightness(0) makes every opaque pixel black, invert(1) makes it white, and transparency (including anti-aliased edges) is untouched, which is the same result as the hand-made files in design/foundation-banners/ logos-white/. A logo that is already white stays white. Michiel Visser, 7 Sep 2026: the normal logo blends into the banner colour, so each programme needs a white-out variation. */ .brand-foundation .fnd-banner__logo--whitened { filter: brightness(0) invert(1); } .brand-foundation .fnd-banner--programme-large .fnd-banner__logo { width: var(--fnd-banner-lockup-large-width); height: auto; } .brand-foundation .fnd-banner--programme-small .fnd-banner__logo { width: auto; height: var(--fnd-banner-lockup-small-height); } .brand-foundation .fnd-banner__brand-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .brand-foundation .fnd-banner__headline { margin: 0; font-family: var(--fnd-banner-font); font-size: var(--fnd-banner-headline-size); font-weight: 700; line-height: 1.3; color: var(--fnd-banner-text); text-transform: none; } /* The first slide's supporting line under the headline. ESTIMATE: no frame shows a second line on the small band, so it takes the body size and the band grows only when it wraps. */ .brand-foundation .fnd-banner__subline { margin: 2px 0 0; font-family: var(--fnd-banner-font); font-size: var(--fnd-banner-subline-size); font-weight: 400; line-height: 1.4; color: var(--fnd-banner-text); } /* ---- Dots -------------------------------------------------------------- */ .brand-foundation .fnd-banner__dots { position: absolute; left: 0; right: 0; bottom: var(--fnd-banner-dots-bottom); z-index: 4; display: flex; justify-content: center; } .brand-foundation .fnd-banner__dots:empty { display: none; } /* Slick's own dotsClass, so the white .slick-dots rules in main.css and slick-theme.css never match. */ .brand-foundation .fnd-banner__dot-list { display: flex; gap: var(--fnd-banner-dot-gap); margin: 0; padding: 0; list-style: none; } .brand-foundation .fnd-banner__dot-list li { margin: 0; padding: 0; line-height: 0; } .brand-foundation .fnd-banner__dot-list li::before { content: none; /* main.css draws a coloured marker before every li */ } .brand-foundation .fnd-banner__dot { display: block; width: var(--fnd-banner-dot-size); height: var(--fnd-banner-dot-size); padding: 0; border: 0; border-radius: 50%; background: var(--fnd-banner-dot); cursor: pointer; } .brand-foundation .fnd-banner__dot-list .slick-active .fnd-banner__dot { background: var(--fnd-banner-dot-active); } .brand-foundation .fnd-banner__dot:focus-visible { outline: 2px solid var(--fnd-banner-text); outline-offset: 2px; } /* The slide-position announcement: present for screen readers, invisible otherwise. */ .brand-foundation .fnd-banner__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- Slick leak overrides ---------------------------------------------- */ /* main.css pulls every dotted Slick slider up by 30 px and gives every slide the track's inherited height; the band's height is fixed and its slides fill it. */ .brand-foundation .fnd-banner .slick-slider, .brand-foundation .fnd-banner .slick-dotted.slick-slider { margin-bottom: 0; } /* The slide is the band: the three Slick boxes between the band and the slide carry its height down. `.slick-slide > div` is NOT in this list, and must not be put back. It is the selector for Slick's row wrapper, and foundationBanners.js passes `rows: 0`, so no wrapper is built and `slick-slide` lands on the banner's own article. The selector then matched the article's own children, and the one it broke was `.fnd-banner__copy`: giving an absolutely positioned box with `bottom: 88px` a height of 100% resolves its `top` to -88px, which lifted the heading and the supporting line clean off the top of the band. Only ever with two or more slides, because one slide never initialises Slick and never gets the class. Michiel Visser reported the copy leaving the coloured panel when more images were added, on 11 September 2026. Measured in a browser against these stylesheets: with the selector present the heading sat 88px ABOVE the band; without it, 232.8px down, which is exactly where the single-slide band puts it. The panel, the photo and the picture are positioned by their insets and never needed a height, so nothing is added back in its place: every box now measures identically with one slide and with three. */ .brand-foundation .fnd-banner .slick-list, .brand-foundation .fnd-banner .slick-track, .brand-foundation .fnd-banner .slick-slide { height: 100%; } /* ---- The legacy programme logo strip ----------------------------------- */ /* Four programme child templates still call the ProgrammeLogo partial, a white box floated over the top right of the page that predates the banner and now duplicates the lock-up. Those template lines are removed after pull request 53825 (the breadcrumbs partial) merges, because it rewrites the same hunks; until then the strip is hidden here. Foundation-scoped, so the Academy programme page keeps its strip. */ .brand-foundation .contentLogoContainer { display: none; } /* ---- Reduced motion ---------------------------------------------------- */ /* The fade between slides is decoration. The script also sets Slick's speed to 0 and switches autoplay off, because Slick animates in JavaScript and CSS alone cannot stop it. */ @media (prefers-reduced-motion: reduce) { .brand-foundation .fnd-banner .slick-track, .brand-foundation .fnd-banner .slick-slide { transition: none !important; } .brand-foundation .fnd-banner__cta { transition: none; } } /* ---- Phones (ESTIMATE, see the token block) ----------------------------- */ @media (max-width: 768px) { /* The hero keeps the frame's proportions up to a cap; a section page with slides reuses it (INFERENCE). */ .brand-foundation .fnd-banner--home, .brand-foundation .fnd-banner--section { height: min(calc(100vw * var(--fnd-banner-mobile-hero-ratio)), var(--fnd-banner-mobile-hero-max-height)); } .brand-foundation .fnd-banner--programme-large { height: min(calc(100vw * var(--fnd-banner-mobile-programme-ratio)), var(--fnd-banner-mobile-programme-max-height)); } /* The photos move to the top of the band on phones: the hero's across the top 52% (screenshot of its frame), the large programme banner's across the top 60% (screenshot of node 4816-132212). The December 2025 idea of dropping the photo on phones did not survive into the delivered frames. */ .brand-foundation .fnd-banner__media { display: block; top: 0; bottom: auto; left: 0; right: 0; height: var(--fnd-banner-mobile-hero-photo-height); } .brand-foundation .fnd-banner--programme-large .fnd-banner__media { display: block; top: 0; bottom: auto; left: 0; right: 0; height: var(--fnd-banner-mobile-programme-photo-height); } .brand-foundation .fnd-banner__pattern--programme { display: none; } .brand-foundation .fnd-banner__pattern--programme-mobile { display: block; left: 0; top: 0; width: 100%; height: 100%; } /* The bands (About Us, every section, the small programme band) swap to the phone drawing from Figma node 5842:340198, pinned to the left edge as the frame has it. The plain Foundation band uses the same drawing in the violet: INFERENCE, the frame is a programme band. */ .brand-foundation .fnd-banner__pattern--band { display: none; } .brand-foundation .fnd-banner__pattern--band-mobile { display: block; left: 0; } /* The hero swaps to its phone drawing, scaled to the band. */ .brand-foundation .fnd-banner__pattern--hero { display: none; } .brand-foundation .fnd-banner__pattern--hero-mobile { display: block; left: 0; top: 0; width: 100%; height: 100%; } .brand-foundation .fnd-banner__pattern--hero { top: auto; bottom: 0; } /* The plain band and the small programme band are 80 px tall on phones (frame). */ .brand-foundation .fnd-banner--band { height: var(--fnd-banner-mobile-band-height); } .brand-foundation .fnd-banner--programme-small { min-height: var(--fnd-banner-mobile-band-height); } /* The copy sits on the panel at the left, its block ending 12% above the foot (frame). */ .brand-foundation .fnd-banner__copy { top: auto; bottom: var(--fnd-banner-mobile-hero-copy-bottom); text-align: left; } .brand-foundation .fnd-banner__copy-inner { padding: 0 var(--fnd-banner-mobile-hero-pad); } .brand-foundation .fnd-banner__heading, .brand-foundation .fnd-banner__tagline { max-width: none; } .brand-foundation .fnd-banner__heading { font-size: var(--fnd-banner-mobile-hero-heading-size); line-height: var(--fnd-banner-mobile-hero-heading-line); } .brand-foundation .fnd-banner__tagline { margin-top: var(--fnd-banner-mobile-hero-tagline-gap); font-size: var(--fnd-banner-mobile-hero-tagline-size); line-height: 1.35; } .brand-foundation .fnd-banner__cta { margin-top: 20px; padding: 10px 24px; font-size: 14px; } /* The lock-up in the panel's lower left, as the screenshot of the node places it. */ .brand-foundation .fnd-banner--programme-large .fnd-banner__brand { top: var(--fnd-banner-mobile-lockup-large-top); bottom: auto; left: var(--fnd-banner-mobile-lockup-large-left); right: auto; width: var(--fnd-banner-mobile-lockup-large-width); align-items: flex-start; padding: 0; } .brand-foundation .fnd-banner--programme-large .fnd-banner__lockup, .brand-foundation .fnd-banner--programme-large .fnd-banner__logo { width: 100%; } /* The frame shows the lock-up alone on the phone band, 48 px tall and 16 px in, and no words: the headline and supporting line return at tablet width and above. */ .brand-foundation .fnd-banner--programme-small .fnd-banner__brand { min-height: var(--fnd-banner-mobile-band-height); padding: 16px var(--fnd-banner-mobile-pad) 16px var(--fnd-banner-mobile-lockup-left); } .brand-foundation .fnd-banner--programme-small .fnd-banner__logo { height: var(--fnd-banner-mobile-lockup-height); } .brand-foundation .fnd-banner--programme-small .fnd-banner__brand-copy { display: none; } .brand-foundation .fnd-banner__dots { bottom: var(--fnd-banner-mobile-hero-dots-bottom); } .brand-foundation .fnd-banner__dot { width: var(--fnd-banner-mobile-hero-dot-size); height: var(--fnd-banner-mobile-hero-dot-size); } .brand-foundation .fnd-banner__dot-list { gap: var(--fnd-banner-mobile-hero-dot-gap); } }