/** * Edible layouts — the homepage, and every interior page on an Edible template. * * Depends on tokens.css (scale) and colors.css (schemes). Everything is scoped to * .edible-theme, the class the Edible templates add to . That scoping is a leftover * from when this was an Avada child theme and had to keep out of the parent's way; it is * kept because it still marks exactly which pages get the section layout system. * * Mobile-first: the base rules describe the phone layout, and min-width queries at the * end of each section step up to tablet and desktop. Breakpoints are in em so they * respect the reader's text size: * * 48em = 768px tablet — two-column grids * 64em = 1024px desktop — sticky hero, absolutely placed hero meta * 90em = 1440px wide — larger type, set in tokens.css * * Contents * 1 Base and utilities * 2 Layout primitives * 3 Header and fullscreen menu * 4 Hero * 5 Media * 6 Spotlight slider * 7 News * 8 Programme strands * 9 Newsletter * 10 About * 10b Interior pages — Discover and Contact * 10c Programme * 11 Footer * 12 Block editor content * 13 Motion preferences * * @package Edible */ /* ----------------------------------------------------------------------------- 1 Base and utilities -------------------------------------------------------------------------- */ /* .screen-reader-text is the name core uses in the search form, comment form and pagination; .visually-hidden is ours. Same treatment. */ .edible-theme .visually-hidden, .edible-theme .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .edible-theme .skip-link { position: absolute; top: -100%; left: var(--space-md); z-index: 1001; padding: var(--space-sm) var(--space-md); background: var(--color-black); color: var(--color-white); font-size: var(--text-sm); text-transform: uppercase; } .edible-theme .skip-link:focus { top: calc(var(--admin-bar-height) + var(--space-sm)); } .edible-theme .spacer { height: var(--space-4xl); } /* Pointer devices only — a tap on a phone shouldn't leave the link faded. */ @media (hover: hover) { .edible-theme a:hover { opacity: var(--text-opacity-highlight); } } @media (min-width: 64em) { .edible-theme .spacer { height: 200px; } } /* ----------------------------------------------------------------------------- 2 Layout primitives -------------------------------------------------------------------------- */ .edible-theme .site-main { position: relative; z-index: 1; } .edible-theme .section { position: relative; } .edible-theme .section-wrapper { width: 100%; padding-inline: var(--gutter); } .edible-theme .section-container { width: 100%; padding-top: var(--space-sm); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--scheme-text); /* Revealed by the IntersectionObserver in home.js. The .is-revealed class is added immediately when the observer is unavailable, so this never traps content behind a script that failed to load. */ opacity: 0; transition: opacity 1000ms ease; } .edible-theme .section-container.is-revealed { opacity: 1; } /* Sections that own their background edge-to-edge shouldn't draw a rule as well. */ .edible-theme .section--bleed .section-container, .edible-theme .section--image .section-container, .edible-theme .section--spotlight .section-container, .edible-theme .section--space .section-container, .edible-theme .section--hero .section-container, .edible-theme .section--footer-partners .section-container { border-bottom: 0; } .edible-theme .section--news, .edible-theme .section--newsletter, .edible-theme .section--history, .edible-theme .section--partners, .edible-theme .section--footer-partners .section-wrapper { padding-block: var(--space-xl); } .edible-theme .grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } @media (min-width: 48em) { .edible-theme .grid--2, .edible-theme .grid--3, .edible-theme .grid--4 { grid-template-columns: repeat(2, 1fr); } .edible-theme .section--news, .edible-theme .section--newsletter, .edible-theme .section--history, .edible-theme .section--partners, .edible-theme .section--footer-partners .section-wrapper { padding-block: var(--space-2xl); } } @media (min-width: 64em) { .edible-theme .grid--3 { grid-template-columns: repeat(3, 1fr); } .edible-theme .grid--4 { grid-template-columns: repeat(4, 1fr); } .edible-theme .grid--9 { grid-template-columns: repeat(9, 1fr); } } /* ----------------------------------------------------------------------------- 3 Header and fullscreen menu -------------------------------------------------------------------------- */ .edible-theme .header { position: fixed; inset: var(--admin-bar-height) 0 auto; z-index: 999; font-size: var(--text-xs); text-transform: uppercase; transition: background-color 0.3s ease, color 0.3s ease; } /* * No z-index here, and that is load-bearing. * * The fullscreen panel is core Navigation's overlay, which means it is a descendant of this * bar rather than a sibling of it — the trigger and the panel are one block, and the trigger * belongs in the bar. .header's own z-index makes it a stacking context, and inside that * context the panel (z-index 998) has to paint *under* the bar's own contents so the title * stays visible and clickable while the menu is down. * * Giving this element a z-index would make it a stacking context too, and the panel would * then paint above the title inside it — the title vanishing instead of inverting, which is * the exact bug the old sibling markup had to be arranged around. So the bar's items are * lifted individually below, and this stays a plain flex row. */ .edible-theme .header-container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--header-height); padding-inline: var(--gutter); } /* Core's Group blocks bring flow spacing with them; the chrome does its own spacing. */ .edible-theme .header-wrapper > *, .edible-theme .header-container > *, .edible-theme .nav--primary > *, .edible-theme .nav__languages > * { margin-block: 0; } /* * The bar's text is uppercase, and its contents are Paragraph blocks now — which base.css * resets text-transform on, so that a tag never decides case. Uppercase has to be asked for * again here, on the children rather than the bar. Asked for at the reset instead it would * change every component that sets uppercase on a container, which is not this change. */ .edible-theme .header p { text-transform: uppercase; } /* * Fixed to the foot of the window, inverted against whatever is behind it. Kept above * the panel for the same reason as the bar above, so the dates stay legible with the * menu open — difference blending turns them white against the black panel. * * It belongs to the menu, not to the page: hidden until the panel is down. Fixed and * blended, it would otherwise sit across the foot of every page and invert whatever * scrolled under it — which is what it did. * * .has-menu-open is set on the bar by home.js § 3, on the same timing as the scheme * swap: immediately on open, held back until the panel has finished sliding up on close. * Gating on core's own state class instead — which goes the moment the close starts — * would take the dates away while the black panel is still covering the screen. */ .edible-theme .header-container--bottom { position: fixed; inset: auto 0 0; z-index: 999; gap: var(--space-md); padding-block: var(--space-sm); color: var(--color-white); mix-blend-mode: difference; pointer-events: none; visibility: hidden; opacity: 0; } /* The transition is declared here rather than above on purpose: it fades in with the panel and is gone the instant the class is, so nothing lingers over the page underneath. */ .edible-theme .header.has-menu-open .header-container--bottom { visibility: visible; opacity: 1; transition: opacity 0.3s ease; } /* Site Title renders a

, so the ellipsis and the weight go on the block, not a link. */ .edible-theme .header-logo { position: relative; z-index: 1000; font-weight: 600; letter-spacing: var(--tracking-tight); /* On a narrow phone the full lockup name would wrap the bar onto two lines. */ max-width: 55vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* * No z-index, for the reason given on .header-container: the panel lives inside this group, * and a stacking context here would trap it above the bar's own text. */ .edible-theme .nav--primary { display: flex; align-items: center; gap: var(--space-md); } .edible-theme .nav__languages { position: relative; z-index: 1000; display: flex; gap: var(--space-xs); } /* Two Paragraph blocks, so the separator between them is drawn rather than typed — otherwise it is a third block an editor has to know not to delete. */ .edible-theme .nav__languages > * + *::before { content: "/"; margin-inline-end: var(--space-xs); } .edible-theme .nav__languages .is-active { font-weight: 700; } /* ----------------------------------------------------------------------------- 3b The fullscreen menu — a core Navigation block with its overlay set to "always". WordPress owns the open/close, the focus trap and the scroll lock; what follows is the look, the slide-down and the one thing core cannot do — see home.js § 3 for the header inversion. -------------------------------------------------------------------------- */ /* The trigger, styled as the bar's own text rather than a button. Lifted above the panel so it stays the thing you click, exactly as the old .burger-button was. */ .edible-theme .nav--fullscreen .wp-block-navigation__responsive-container-open { all: unset; /* all:unset resets position to static, where z-index does nothing. */ position: relative; z-index: 1000; min-height: 44px; /* Comfortable tap target. */ display: inline-flex; align-items: center; cursor: pointer; font-size: inherit; text-transform: uppercase; } /* * Core ships two buttons — open in the bar, close in the panel — where the design has one * control that changes its label. So each is shown only in the state it belongs to and the * close button is put where the trigger was, which reads as the label swapping. * * .is-open is mirrored onto the