/* * Food Village — School template stylesheet. * * Hand-written CSS with custom properties, not a Tailwind build — see the * Phase 1 report §B for why. Every color/spacing value below is taken * directly from the approved Next.js prototype's globals.css and the * Tailwind utility classes used in SchoolHero.tsx, AudienceSelector.tsx, * WorldPageNav.tsx, SiteFooter.tsx, KeytagCollection.tsx, MenuPreview.tsx * and SchoolHelp.tsx — nothing here is a new design decision. */ /* --------------------------------------------------------------------- 1. Design tokens --------------------------------------------------------------------- */ :root { --fv-ink: #141414; --fv-cream: #f7f1e6; --fv-paper: #fffdf8; --fv-oat: #efe6d2; --fv-red: #ff3b30; --fv-green: #7ab648; --fv-blue: #1c9bd8; --fv-gold: #f5b921; --fv-primary-accent: #f5b921; --fv-primary-accent-on-light: #8a5a0a; --fv-secondary-accent: #ff3b30; --fv-secondary-accent-on-light: #b31f16; --fv-industry-accent: #1c9bd8; --fv-industry-accent-on-light: #17698f; --fv-font-display: "Fraunces", Georgia, serif; --fv-font-sans: "Inter", system-ui, -apple-system, sans-serif; /* This is Tailwind's own default font-mono stack, not JetBrains Mono — matches the reference exactly. The prototype loads JetBrains Mono as --font-tech, but nothing in the Secondary school template actually uses Tailwind's font-tech utility; every "kicker"/code/label element uses plain font-mono, which the prototype's Tailwind config never remaps away from this default stack. Confirmed via computed styles against the live foodvillage.hoad.ie reference, not assumed. */ --fv-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --fv-max: 72rem; /* max-w-6xl */ --fv-radius-lg: 1rem; --fv-radius-xl: 1.25rem; --fv-radius-2xl: 1rem; --fv-radius-full: 999px; } /* --------------------------------------------------------------------- 2. Base --------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--fv-cream); color: var(--fv-ink); font-family: var(--fv-font-sans); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .fv-site { display: flex; flex-direction: column; min-height: 100vh; } .fv-main { flex: 1; display: flex; flex-direction: column; } /* .fv-hero__inner belongs in this shared list too — SchoolHero.tsx uses the exact same "mx-auto max-w-6xl px-5 sm:px-8" container as every other section. Its absence here was a bug: the hero content had no side padding and no max-width at all, so it sat flush against the viewport edge instead of matching the header/sections above and below it. */ .fv-section__inner, .fv-header__row, .fv-footer__inner, .fv-hero__inner { max-width: var(--fv-max); margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width: 640px) { .fv-section__inner, .fv-header__row, .fv-footer__inner, .fv-hero__inner { padding-left: 2rem; padding-right: 2rem; } } .fv-section { padding-top: 4rem; padding-bottom: 4rem; } @media (min-width: 640px) { .fv-section { padding-top: 5rem; padding-bottom: 5rem; } } .fv-section--cream { background: var(--fv-cream); } .fv-section--paper { background: var(--fv-paper); } .fv-kicker { font-family: var(--fv-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; /* Picks up --fv-world-accent from the nearest .fv-world--{primary, secondary, industry} ancestor (see §11) so Primary/Industry sections correctly show gold/blue instead of defaulting to Secondary's red. */ color: var(--fv-world-accent, var(--fv-secondary-accent)); margin: 0; } .fv-kicker--on-light { color: var(--fv-world-accent-on-light, var(--fv-secondary-accent-on-light)); } .fv-h2 { margin: 0.75rem 0 0; max-width: 32rem; font-family: var(--fv-font-display); font-weight: 500; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--fv-ink); } @media (min-width: 640px) { .fv-h2 { font-size: 2.25rem; } } .fv-h2--tight { max-width: 28rem; font-size: 1.5rem; } @media (min-width: 640px) { .fv-h2--tight { font-size: 1.875rem; } } .fv-body { font-size: 0.875rem; line-height: 1.6; color: rgba(20,20,20,0.65); max-width: 36rem; } .fv-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; } .fv-dot--primary { background: var(--fv-primary-accent); } .fv-dot--secondary { background: var(--fv-secondary-accent); } .fv-dot--industry { background: var(--fv-industry-accent); } .fv-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--fv-radius-full); padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600; transition: transform 0.15s ease; border: 1px solid transparent; cursor: pointer; } .fv-btn:hover { transform: translateY(-2px); } .fv-btn--accent { background: var(--fv-secondary-accent); color: var(--fv-ink); } .fv-btn--outline { background: transparent; border-color: rgba(20,20,20,0.2); color: rgba(20,20,20,0.8); font-weight: 500; } .fv-btn--outline:hover { border-color: rgba(20,20,20,0.4); color: var(--fv-ink); } .fv-btn--small { padding: 0.5rem 1rem; font-size: 0.75rem; } /* --------------------------------------------------------------------- 3. Header nav --------------------------------------------------------------------- */ .fv-header { position: sticky; top: 0; z-index: 40; background: rgba(255,253,248,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(20,20,20,0.1); } .fv-header__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.875rem; padding-bottom: 0.875rem; } .fv-header__brand { display: flex; align-items: center; gap: 0.75rem; } .fv-header__logo { height: 1.75rem; width: auto; } @media (min-width: 640px) { .fv-header__logo { height: 2rem; } } .fv-header__divider { display: none; width: 1px; height: 1rem; background: rgba(20,20,20,0.15); } @media (min-width: 640px) { .fv-header__divider { display: block; } } .fv-header__world { display: none; align-items: center; gap: 0.375rem; font-family: var(--fv-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; } @media (min-width: 640px) { .fv-header__world { display: flex; } } .fv-header__world--secondary { color: var(--fv-secondary-accent-on-light); } .fv-header__sections { display: none; align-items: center; gap: 0.25rem; } @media (min-width: 1024px) { .fv-header__sections { display: flex; } } .fv-header__sections a { border-radius: var(--fv-radius-full); padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: rgba(20,20,20,0.7); } .fv-header__sections a:hover { background: rgba(20,20,20,0.05); color: var(--fv-ink); } .fv-header__sep { display: inline-block; margin: 0 0.25rem; width: 1px; height: 1rem; background: rgba(20,20,20,0.1); } .fv-header__actions { display: flex; align-items: center; gap: 0.5rem; } .fv-header__worlds { display: none; align-items: center; gap: 0.25rem; } @media (min-width: 640px) { .fv-header__worlds { display: flex; } } .fv-world-link { display: flex; align-items: center; gap: 0.375rem; border-radius: var(--fv-radius-full); padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: rgba(20,20,20,0.7); } .fv-world-link:hover { background: rgba(20,20,20,0.05); color: var(--fv-ink); } .fv-world-link--current { background: rgba(20,20,20,0.08); color: var(--fv-ink); } .fv-world-link__label { display: none; } @media (min-width: 768px) { .fv-world-link__label { display: inline; } } .fv-header__login { display: none; border-radius: var(--fv-radius-full); background: var(--fv-ink); color: var(--fv-paper); padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 600; } @media (min-width: 640px) { .fv-header__login { display: inline-flex; } } .fv-header__login--block { display: flex; justify-content: center; width: 100%; } /* 44px tap target (was 36px) — meets the WCAG 2.5.5 / platform-HIG minimum. The mobile-only row padding below is trimmed by exactly the 8px this adds, so the header's total height is unchanged, not just "not noticeably taller." */ .fv-header__toggle { display: flex; height: 2.75rem; width: 2.75rem; align-items: center; justify-content: center; border-radius: var(--fv-radius-full); border: none; background: transparent; color: var(--fv-ink); cursor: pointer; } .fv-header__toggle:hover { background: rgba(20,20,20,0.05); } @media (min-width: 640px) { .fv-header__toggle { display: none; } } .fv-icon { height: 1.5rem; width: 1.5rem; flex-shrink: 0; } /* The inactive icon uses the [hidden] attribute, but this stylesheet's cascade doesn't reliably apply the UA default display:none to svg here (the same reason .fv-header__mobile[hidden] below needs an explicit rule) — without this, the hidden icon still occupies flex space in .fv-header__toggle and squeezes the visible one's width via flex-shrink, leaving a visibly non-square, squashed hamburger icon. */ .fv-icon[hidden] { display: none; } @media (max-width: 639px) { .fv-header__row { padding-top: 0.625rem; padding-bottom: 0.625rem; } } .fv-header__mobile { border-top: 1px solid rgba(20,20,20,0.1); background: var(--fv-paper); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; } @media (min-width: 640px) { .fv-header__mobile { display: none !important; } } .fv-header__mobile[hidden] { display: none; } .fv-header__mobile-worlds, .fv-header__mobile-sections, .fv-header__mobile-more { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border-top: 1px solid rgba(20,20,20,0.1); } .fv-header__mobile-worlds { border-top: none; } .fv-header__mobile-worlds a, .fv-header__mobile-worlds span, .fv-header__mobile-sections a, .fv-header__mobile-more a { display: flex; align-items: center; gap: 0.5rem; border-radius: 0.75rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: rgba(20,20,20,0.7); } .fv-header__mobile-worlds span[aria-current] { background: rgba(20,20,20,0.08); color: var(--fv-ink); } /* --------------------------------------------------------------------- 4. Hero --------------------------------------------------------------------- */ .fv-hero { position: relative; overflow: hidden; background: var(--fv-ink); color: var(--fv-paper); } .fv-hero__bg { position: absolute; inset: -1rem; opacity: 0.3; } .fv-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } .fv-hero__inner { position: relative; z-index: 1; padding-top: 1.5rem; padding-bottom: 3.5rem; } .fv-hero__breadcrumb { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 2rem; font-size: 0.875rem; color: rgba(255,253,248,0.5); } .fv-hero__breadcrumb a:hover { color: var(--fv-paper); } .fv-hero__breadcrumb span:last-child { color: rgba(255,253,248,0.8); } .fv-hero__identity { display: flex; flex-direction: column; gap: 1.25rem; } @media (min-width: 640px) { .fv-hero__identity { flex-direction: row; align-items: center; } } .fv-hero__crest { flex-shrink: 0; display: flex; height: 6rem; width: 6rem; align-items: center; justify-content: center; border-radius: var(--fv-radius-2xl); background: rgba(247,241,230,0.05); box-shadow: inset 0 0 0 1px rgba(247,241,230,0.1); } @media (min-width: 640px) { .fv-hero__crest { height: 7rem; width: 7rem; } } .fv-hero__crest-img { height: 5rem; width: 5rem; object-fit: contain; } @media (min-width: 640px) { .fv-hero__crest-img { height: 6rem; width: 6rem; } } .fv-hero__title-block { max-width: 36rem; } /* Deliberately inherits the body font (Inter), not var(--fv-font-display) — matches the Next.js reference exactly: SchoolHero.tsx's

has no font-display class, unlike every other heading on this page. */ /* Explicit color, not inherited from .fv-hero (which only sets color on the section itself). Same root cause and fix as the Gateway hero's .fv-gw-panel__headline: on production, Divi (the site's active theme — Food Village renders via the theme-independent router, Divi itself is never touched) applies its own default color directly to every

, and a directly-targeted rule always beats inherited color regardless of specificity. .fv-hero__address (the supporting address text right below this) already sets its own color explicitly, which is exactly why only the heading was affected. Scoped to this one Food Village component class only; !important is deliberate since Divi's own heading-color specificity is unknown and outside this project's control — nothing broader than this single selector is affected. Every School CPT page shares this same template and stylesheet, so this one rule fixes all 108 at once. */ .fv-hero__title { margin: 0.75rem 0 0; font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; font-size: clamp(2rem, 5.5vw, 3.4rem); text-wrap: balance; color: var(--fv-paper) !important; } .fv-hero__address { margin: 0.5rem 0 0; font-size: 0.875rem; color: rgba(255,253,248,0.55); } .fv-hero__code-row { margin-top: 2rem; } .fv-code-card { display: inline-flex; align-items: center; gap: 0.75rem; border-radius: var(--fv-radius-2xl); border: 1px solid rgba(255,59,48,0.4); background: rgba(20,20,20,0.45); padding: 0.75rem 1.25rem; backdrop-filter: blur(4px); } .fv-code-card__label { margin: 0; font-family: var(--fv-font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,253,248,0.5); } .fv-code-card__value { margin: 0; font-family: var(--fv-font-mono); font-size: 1.5rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; } .fv-hero__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .fv-hero__actions .fv-btn--outline { border-color: rgba(247,241,230,0.25); color: rgba(255,253,248,0.85); } .fv-hero__actions .fv-btn--outline:hover { border-color: rgba(247,241,230,0.4); color: var(--fv-paper); } .fv-hero__stores { display: flex; align-items: center; gap: 0.5rem; padding-left: 0.25rem; } .fv-hero__stores a { font-size: 0.75rem; color: rgba(255,253,248,0.5); } .fv-hero__stores a:hover { color: var(--fv-paper); text-decoration: underline; text-underline-offset: 2px; } /* --------------------------------------------------------------------- 5. Audience selector --------------------------------------------------------------------- */ .fv-audience { margin-top: 2rem; display: flex; flex-direction: column; gap: 2rem; } @media (min-width: 1024px) { .fv-audience--with-video { display: grid; grid-template-columns: 1.15fr 1fr; align-items: start; column-gap: 3rem; row-gap: 2.5rem; } } .fv-audience__left { grid-column: 1; grid-row: 1; } .fv-audience__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; } .fv-tab { border-radius: var(--fv-radius-full); border: 1px solid rgba(20,20,20,0.15); padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 500; color: rgba(20,20,20,0.6); background: transparent; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .fv-tab:hover { border-color: rgba(20,20,20,0.3); color: var(--fv-ink); } .fv-tab.is-active { border-color: transparent; background: var(--fv-secondary-accent); color: var(--fv-ink); } .fv-audience__intro { margin-top: 2rem; max-width: 28rem; font-size: 0.875rem; color: rgba(20,20,20,0.65); } .fv-audience__intro p { margin: 0; } .fv-audience__video { order: 2; } @media (min-width: 1024px) { .fv-audience__video { order: initial; grid-column: 2; grid-row: 1 / span 2; align-self: stretch; } } .fv-video-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--fv-radius-2xl); background: var(--fv-ink); } @media (min-width: 1024px) { .fv-video-frame { position: sticky; top: 6rem; } } .fv-video-frame iframe { width: 100%; height: 100%; border: 0; } .fv-audience__steps { order: 3; } @media (min-width: 1024px) { .fv-audience__steps { order: initial; grid-column: 1; grid-row: 2; } } .fv-steps { list-style: none; margin: 0; padding: 0 0 0 0; border-left: 1px solid rgba(20,20,20,0.1); } .fv-step { position: relative; display: flex; gap: 1rem; padding: 0.75rem 0 0.75rem 2rem; } .fv-step__num { position: absolute; left: 0; top: 0.75rem; transform: translateX(-50%); display: flex; height: 1.5rem; width: 1.5rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--fv-secondary-accent); font-family: var(--fv-font-mono); font-size: 0.625rem; color: var(--fv-ink); } .fv-step__label { margin: 0; font-family: var(--fv-font-display); font-weight: 500; font-size: 1rem; color: var(--fv-ink); } .fv-step__detail { margin: 0.125rem 0 0; max-width: 36rem; font-size: 0.875rem; line-height: 1.6; color: rgba(20,20,20,0.65); } /* --------------------------------------------------------------------- 6. Keytag --------------------------------------------------------------------- */ .fv-keytag__inner { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 640px) { .fv-keytag__inner { flex-direction: row; align-items: center; } } .fv-keytag__image { position: relative; height: 10rem; width: 100%; flex-shrink: 0; overflow: hidden; border-radius: var(--fv-radius-2xl); } @media (min-width: 640px) { .fv-keytag__image { height: 8rem; width: 8rem; } } .fv-keytag__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } /* --------------------------------------------------------------------- 7. Menu preview --------------------------------------------------------------------- */ .fv-menu__head { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 640px) { .fv-menu__head { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .fv-menu__grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 640px) { .fv-menu__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } .fv-menu__tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 0.75rem; } .fv-menu__tile img { width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------------------- 8. Help --------------------------------------------------------------------- */ .fv-help__grid { margin-top: 1.5rem; display: grid; gap: 0.75rem; } @media (min-width: 640px) { .fv-help__grid { grid-template-columns: repeat(2, 1fr); } } .fv-help__card { border-radius: var(--fv-radius-2xl); border: 1px solid rgba(20,20,20,0.1); background: var(--fv-paper); padding: 1.25rem; } .fv-help__title { margin: 0; font-family: var(--fv-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fv-secondary-accent-on-light); } .fv-help__body { margin: 0.375rem 0 0; font-size: 0.875rem; line-height: 1.6; color: rgba(20,20,20,0.65); } .fv-help__body + .fv-help__body { margin-top: 0.5rem; } .fv-help__contact { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; border-radius: var(--fv-radius-2xl); background: var(--fv-ink); padding: 1.25rem 1.5rem; color: var(--fv-paper); } .fv-help__contact p { margin: 0; font-size: 0.875rem; color: rgba(255,253,248,0.8); } .fv-help__contact a { font-weight: 500; color: var(--fv-secondary-accent); } .fv-help__contact a:hover { text-decoration: underline; } /* --------------------------------------------------------------------- 9. Notice banner --------------------------------------------------------------------- */ .fv-notice { border-bottom: 1px solid rgba(255,59,48,0.3); background: rgba(255,59,48,0.1); } .fv-notice__inner { max-width: var(--fv-max); margin: 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; font-size: 0.875rem; color: var(--fv-ink); } @media (min-width: 640px) { .fv-notice__inner { padding-left: 2rem; padding-right: 2rem; } } .fv-notice__inner p { margin: 0; } /* --------------------------------------------------------------------- 11. Shared components (Phase 2) — reused across Gateway/Primary/ Secondary/Industry rather than four separate style systems. See the Phase 2 report §36. --------------------------------------------------------------------- */ /* World accent helpers — swap the one CSS custom property a component reads instead of duplicating every rule per world. Set --fv-world- accent / --fv-world-accent-on-light on a section wrapper. */ .fv-world--primary { --fv-world-accent: var(--fv-primary-accent); --fv-world-accent-on-light: var(--fv-primary-accent-on-light); } .fv-world--secondary { --fv-world-accent: var(--fv-secondary-accent); --fv-world-accent-on-light: var(--fv-secondary-accent-on-light); } .fv-world--industry { --fv-world-accent: var(--fv-industry-accent); --fv-world-accent-on-light: var(--fv-industry-accent-on-light); } /* .fv-h1-hero is shared by TWO different contexts, and they need OPPOSITE colors: - Primary/Secondary/Industry: dark hero photo background, needs WHITE text, and (until now) had no color of its own — inherited it from .fv-hero-tall, the same inherited-color bug as the Gateway/School headings. - Contact/News/Gift Vouchers: light cream background, needs DARK/ink text, achieved via an inline style="color: var(--fv-ink)" on each page's own

— inline styles normally beat any external rule that ISN'T !important, so this already worked correctly on its own. The first fix here made this class always-white with !important, which fixed Primary/Secondary/Industry but broke Contact/News/Gift Vouchers — !important on an external rule DOES override inline styles, unlike a normal-specificity external rule. The correct fix scopes the forced-white rule to ONLY the dark-background context (nested inside .fv-hero-tall), leaving the light-background pages' own inline color to keep working exactly as it always did, uncontested. */ .fv-h1-hero { margin: 0.75rem 0 0; font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; font-size: clamp(2.4rem, 6vw, 4.6rem); text-wrap: balance; } .fv-hero-tall .fv-h1-hero { color: var(--fv-paper) !important; } .fv-hero-tall { position: relative; display: flex; min-height: 80svh; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--fv-ink); color: var(--fv-paper); } @media (min-width: 640px) { .fv-hero-tall { min-height: 85svh; } } .fv-hero-tall__bg { position: absolute; inset: -1rem; } .fv-hero-tall__bg img { width: 100%; height: 100%; object-fit: cover; } .fv-hero-tall__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,20,0.76), rgba(20,20,20,0.16) 55%, rgba(20,20,20,0.32)); } .fv-hero-tall__wash { position: absolute; inset: 0; mix-blend-mode: multiply; } .fv-hero-tall__inner { position: relative; z-index: 1; padding-top: 2.5rem; padding-bottom: 3.5rem; } .fv-hero-tall__body { margin-top: 1.25rem; max-width: 32rem; text-wrap: balance; font-size: 1rem; line-height: 1.6; color: rgba(255,253,248,0.8); } @media (min-width: 640px) { .fv-hero-tall__body { font-size: 1.125rem; } } .fv-hero-tall__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .fv-hero-tall__actions .fv-btn--outline { border-color: rgba(247,241,230,0.25); color: rgba(255,253,248,0.85); } .fv-hero-tall__actions .fv-btn--outline:hover { border-color: rgba(247,241,230,0.45); color: var(--fv-paper); } .fv-btn--world { background: var(--fv-world-accent, var(--fv-secondary-accent)); color: var(--fv-ink); } /* App download strip — Gateway/Primary/Secondary all use this shape */ .fv-app-download { border-top: 1px solid rgba(20,20,20,0.1); border-bottom: 1px solid rgba(20,20,20,0.1); background: var(--fv-paper); padding: 2.5rem 0; } @media (min-width: 640px) { .fv-app-download { padding: 3rem 0; } } .fv-app-download__inner { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 1024px) { .fv-app-download__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 3rem; } } .fv-app-download__text { max-width: 28rem; } .fv-app-download__heading { margin: 0.25rem 0 0; font-family: var(--fv-font-display); font-weight: 500; font-size: 1.25rem; color: var(--fv-ink); } @media (min-width: 640px) { .fv-app-download__heading { font-size: 1.5rem; } } .fv-app-download__body { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: rgba(20,20,20,0.65); } .fv-app-download__actions { display: flex; flex-shrink: 0; flex-direction: column; gap: 0.625rem; } @media (min-width: 640px) { .fv-app-download__actions { flex-direction: row; align-items: center; } } .fv-store-badge { display: inline-flex; align-items: center; gap: 0.65rem; border-radius: var(--fv-radius-full); background: var(--fv-ink); color: var(--fv-paper); padding: 0.75rem 1.25rem; transition: transform 0.15s ease; } .fv-store-badge:hover { transform: translateY(-2px); } .fv-store-badge svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .fv-store-badge__eyebrow { display: block; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,253,248,0.6); } .fv-store-badge__name { display: block; font-size: 0.875rem; font-weight: 600; } .fv-app-download__portal { text-align: center; font-size: 0.875rem; font-weight: 500; color: rgba(20,20,20,0.55); text-underline-offset: 4px; } .fv-app-download__portal:hover { color: var(--fv-ink); text-decoration: underline; } @media (min-width: 640px) { .fv-app-download__portal { text-align: left; } } /* Info card grid — ForSchools/FoodQuality/TrustProof/WorkplaceTypes/ AudienceTabs parent+school blocks all use this exact card shape. */ .fv-info-grid { display: grid; gap: 1rem; } .fv-info-grid--2 { grid-template-columns: 1fr; } @media (min-width: 640px) { .fv-info-grid--2 { grid-template-columns: repeat(2, 1fr); } } .fv-info-grid--3 { grid-template-columns: 1fr; } @media (min-width: 640px) { .fv-info-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .fv-info-grid--3 { grid-template-columns: repeat(3, 1fr); } } .fv-info-card { border-radius: var(--fv-radius-2xl); border: 1px solid rgba(20,20,20,0.1); background: var(--fv-paper); padding: 1.25rem; } .fv-info-card--dark { border-color: rgba(247,241,230,0.12); background: rgba(247,241,230,0.05); } .fv-info-card__title { margin: 0; font-family: var(--fv-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fv-world-accent-on-light, var(--fv-secondary-accent-on-light)); } .fv-info-card--dark .fv-info-card__title { color: var(--fv-world-accent, var(--fv-secondary-accent)); } .fv-info-card__body { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.6; color: rgba(20,20,20,0.7); } .fv-info-card--dark .fv-info-card__body { color: rgba(255,253,248,0.75); } /* Dark CTA banner — "Considering Food Village for your school?" etc. */ .fv-banner { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; border-radius: var(--fv-radius-2xl); background: var(--fv-ink); padding: 1.5rem; color: var(--fv-paper); } @media (min-width: 640px) { .fv-banner { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.75rem 2rem; } } .fv-banner__heading { margin: 0; font-family: var(--fv-font-display); font-weight: 500; font-size: 1.125rem; } .fv-banner__body { margin: 0.25rem 0 0; font-size: 0.875rem; color: rgba(255,253,248,0.7); } /* Pill tabs — reused for FoodShowcase categories / AudienceTabs roles / ServiceModelExplorer's mobile scroller (desktop uses .fv-stepper__list instead, see below), on top of the .fv-tab base already defined for the school template's audience selector. */ .fv-tabs-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .fv-tab--dark { border-color: rgba(247,241,230,0.2); color: rgba(255,253,248,0.7); } .fv-tab--dark:hover { border-color: rgba(247,241,230,0.4); color: var(--fv-paper); } .fv-tab--dark.is-active { border-color: transparent; background: var(--fv-paper); color: var(--fv-ink); } .fv-tab--ink.is-active { border-color: transparent; background: var(--fv-ink); color: var(--fv-paper); } .fv-tab--world.is-active { border-color: transparent; background: var(--fv-world-accent); color: var(--fv-ink); } /* Category dropdown — Secondary FoodShowcase mobile selector */ .fv-cat-dropdown { position: relative; } .fv-cat-trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; border-radius: var(--fv-radius-full); border: 1px solid rgba(20,20,20,0.15); background: var(--fv-paper); padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--fv-ink); } .fv-cat-trigger svg { width: 1rem; height: 1rem; transition: transform 0.15s ease; } .fv-cat-trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .fv-cat-menu { position: absolute; inset-inline: 0; top: 100%; z-index: 20; margin-top: 0.5rem; overflow: hidden; border-radius: var(--fv-radius-2xl); border: 1px solid rgba(20,20,20,0.1); background: var(--fv-paper); box-shadow: 0 12px 32px rgba(20,20,20,0.15); } .fv-cat-menu button { display: block; width: 100%; padding: 0.75rem 1rem; text-align: left; font-size: 0.875rem; color: rgba(20,20,20,0.7); background: transparent; border: none; cursor: pointer; } .fv-cat-menu button:hover { background: rgba(20,20,20,0.05); } .fv-cat-menu button.is-active { background: color-mix(in srgb, var(--fv-world-accent, var(--fv-secondary-accent)) 15%, transparent); font-weight: 600; color: var(--fv-ink); } /* Stepper — ServiceModelExplorer / WorkplaceJourney / PrimaryJourney / SecondaryJourney all share this exact left-list + right-stage shape. */ .fv-stepper-layout { display: grid; gap: 2rem; } @media (min-width: 1024px) { .fv-stepper-layout { grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; } } /* Grid items default to min-width:auto, which lets a child's intrinsic content width (a horizontal-scroll row, or just a long card title) force the whole grid track wider than its column instead of wrapping/ scrolling within itself. Found on both .fv-stepper-layout (the mobile step scroller) and .fv-option-grid (card titles) — applied broadly to every grid class here rather than patching each one as it's found. */ .fv-stepper-layout > *, .fv-info-grid > *, .fv-option-grid > *, .fv-meal-grid > *, .fv-meal-list > *, .fv-image-grid-2 > *, .fv-split > *, .fv-recognition-grid > *, .fv-proof-grid > * { min-width: 0; } .fv-stepper__list { display: flex; gap: 0.25rem; overflow-x: auto; } @media (min-width: 1024px) { .fv-stepper__list { flex-direction: column; overflow: visible; } } .fv-stepper__btn { display: flex; min-width: 220px; flex-shrink: 0; align-items: center; gap: 0.75rem; border-radius: 0.75rem; padding: 0.75rem; text-align: left; background: transparent; border: none; cursor: pointer; } @media (min-width: 1024px) { .fv-stepper__btn { min-width: 0; } } .fv-stepper__btn:hover { background: rgba(247,241,230,0.05); } .fv-stepper__btn.is-active { background: rgba(247,241,230,0.1); } .fv-stepper-layout--light .fv-stepper__btn:hover { background: rgba(20,20,20,0.05); } .fv-stepper-layout--light .fv-stepper__btn.is-active { background: rgba(20,20,20,0.08); } .fv-stepper__num { display: flex; height: 2rem; width: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--fv-font-mono); font-size: 0.75rem; background: rgba(247,241,230,0.1); color: rgba(255,253,248,0.6); } .fv-stepper__btn.is-active .fv-stepper__num { background: var(--fv-world-accent, var(--fv-secondary-accent)); color: var(--fv-ink); } .fv-stepper-layout--light .fv-stepper__num { background: rgba(20,20,20,0.08); color: rgba(20,20,20,0.5); } .fv-stepper__label { margin: 0; font-size: 0.9375rem; font-weight: 500; color: rgba(255,253,248,0.7); } .fv-stepper__btn.is-active .fv-stepper__label { color: var(--fv-paper); } .fv-stepper-layout--light .fv-stepper__label { color: rgba(20,20,20,0.7); } .fv-stepper-layout--light .fv-stepper__btn.is-active .fv-stepper__label { color: var(--fv-ink); } .fv-stepper__detail { display: none; margin: 0.125rem 0 0; font-size: 0.75rem; color: rgba(255,253,248,0.5); } @media (min-width: 1024px) { .fv-stepper__detail { display: block; } } .fv-stepper-layout--light .fv-stepper__detail { color: rgba(20,20,20,0.5); } .fv-stepper__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--fv-radius-2xl); background: var(--fv-ink); box-shadow: inset 0 0 0 1px rgba(247,241,230,0.1); } @media (min-width: 640px) { .fv-stepper__stage { aspect-ratio: 16 / 9; } } @media (min-width: 1024px) { .fv-stepper__stage { aspect-ratio: 4 / 3; } } .fv-stepper__stage-panel { position: absolute; inset: 0; } .fv-stepper__stage-panel img { width: 100%; height: 100%; object-fit: cover; } .fv-stepper__stage-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,20,0.72), transparent 60%); } .fv-stepper__stage-caption { position: absolute; inset-inline: 0; bottom: 0; padding: 1.5rem; color: var(--fv-paper); } .fv-stepper__stage-step { margin: 0; font-family: var(--fv-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--fv-world-accent, var(--fv-secondary-accent)); } .fv-stepper__stage-label { margin: 0.25rem 0 0; font-family: var(--fv-font-display); font-weight: 500; font-size: 1.25rem; } .fv-stepper__stage-detail { margin: 0.375rem 0 0; font-size: 0.875rem; color: rgba(255,253,248,0.8); max-width: 28rem; } .fv-stepper__nav { margin-top: 1.25rem; display: flex; gap: 0.75rem; } .fv-step-nav-btn { border-radius: var(--fv-radius-full); border: 1px solid rgba(247,241,230,0.15); background: transparent; padding: 0.5rem 1rem; font-size: 0.875rem; color: rgba(255,253,248,0.7); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .fv-step-nav-btn:hover:not(:disabled) { border-color: rgba(247,241,230,0.3); color: var(--fv-paper); } .fv-step-nav-btn:disabled { opacity: 0.3; cursor: default; } .fv-step-nav-btn--next { border-color: transparent; background: var(--fv-world-accent, var(--fv-secondary-accent)); color: var(--fv-ink); font-weight: 600; } .fv-step-nav-btn--next:hover:not(:disabled) { color: var(--fv-ink); } .fv-stepper-layout--light .fv-step-nav-btn { border-color: rgba(20,20,20,0.15); color: rgba(20,20,20,0.7); } .fv-stepper-layout--light .fv-step-nav-btn:hover:not(:disabled) { border-color: rgba(20,20,20,0.3); color: var(--fv-ink); } /* Draggable food strip — PrimaryFoodShowcase / IndustryFoodShowcase */ .fv-strip { display: flex; gap: 1rem; overflow-x: auto; padding: 0.25rem 0 1rem; cursor: grab; scrollbar-width: thin; } .fv-strip.is-dragging { cursor: grabbing; user-select: none; } .fv-strip__card { position: relative; flex-shrink: 0; overflow: hidden; background: var(--fv-kraft); box-shadow: 0 1px 2px rgba(20,20,20,0.06); } .fv-strip__card--lg { width: 210px; aspect-ratio: 4 / 5; border-radius: var(--fv-radius-2xl); } .fv-strip__card--md { width: 170px; aspect-ratio: 1 / 1; border-radius: var(--fv-radius-2xl); } .fv-strip__card--sm { width: 130px; aspect-ratio: 1 / 1; border-radius: 999px; } @media (min-width: 640px) { .fv-strip__card--lg { width: 260px; } .fv-strip__card--md { width: 210px; } .fv-strip__card--sm { width: 160px; } } .fv-strip__card--up { margin-top: -1.5rem; } .fv-strip__card--down { margin-top: 1.5rem; } @media (max-width: 639px) { .fv-strip__card--up, .fv-strip__card--down { margin-top: 0; } } .fv-strip__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .fv-strip__caption { position: absolute; inset-inline: 0; bottom: 0; padding: 0.6rem; background: linear-gradient(to top, rgba(20,20,20,0.7), transparent); opacity: 0; transition: opacity 0.2s ease; } .fv-strip__card--sm .fv-strip__caption { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.25rem; } .fv-strip__card:hover .fv-strip__caption { opacity: 1; } .fv-strip__caption-name { margin: 0; font-size: 0.75rem; font-weight: 500; color: var(--fv-paper); } .fv-strip__caption-cat { margin: 0.15rem 0 0; font-family: var(--fv-font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,253,248,0.75); } /* Photographed meal cards (Secondary FoodShowcase grid — not a strip) */ .fv-meal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 640px) { .fv-meal-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } @media (min-width: 1024px) { .fv-meal-grid { grid-template-columns: repeat(4, 1fr); } } .fv-meal-card { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--fv-radius-2xl); } .fv-meal-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .fv-meal-card:hover img { transform: scale(1.06); } .fv-meal-card__caption { position: absolute; inset-inline: 0; bottom: 0; padding: 0.6rem; background: linear-gradient(to top, rgba(20,20,20,0.75), transparent); color: var(--fv-paper); } .fv-meal-card__name { margin: 0; font-size: 0.75rem; font-weight: 500; } .fv-meal-card__desc { margin: 0.25rem 0 0; max-height: 0; overflow: hidden; font-size: 0.6875rem; line-height: 1.4; color: rgba(255,253,248,0.85); opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; display: none; } @media (min-width: 640px) { .fv-meal-card__desc { display: block; } .fv-meal-card:hover .fv-meal-card__desc { max-height: 4rem; opacity: 1; } } [data-fv-desktop-only] { display: none !important; } @media (min-width: 640px) { [data-fv-desktop-only] { display: inline-flex !important; } } [data-fv-mobile-only] { display: block; } @media (min-width: 640px) { [data-fv-mobile-only] { display: none; } } .fv-meal-card--sm-only { display: none; } @media (min-width: 640px) { .fv-meal-card--sm-only { display: block; } } .fv-meal-card__new { position: absolute; left: 0.5rem; top: 0.5rem; border-radius: var(--fv-radius-full); background: var(--fv-secondary-accent); padding: 0.15rem 0.5rem; font-family: var(--fv-font-mono); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fv-ink); } .fv-meal-list { display: grid; grid-template-columns: 1fr; gap: 0 2rem; } @media (min-width: 640px) { .fv-meal-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .fv-meal-list { grid-template-columns: repeat(3, 1fr); } } .fv-meal-list__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; border-bottom: 1px solid rgba(20,20,20,0.1); padding: 0.65rem 0; } .fv-meal-list__name { font-size: 0.875rem; color: rgba(20,20,20,0.85); } .fv-meal-list__price { font-family: var(--fv-font-mono); font-size: 0.75rem; color: rgba(20,20,20,0.5); } /* Two-image lifestyle grid (PrimaryLifestyle / StudentLife) */ .fv-image-grid-2 { margin-top: 2rem; display: grid; gap: 1rem; } @media (min-width: 640px) { .fv-image-grid-2 { grid-template-columns: repeat(2, 1fr); } } .fv-image-grid-2 figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--fv-radius-2xl); margin: 0; background: var(--fv-kraft); box-shadow: 0 1px 2px rgba(20,20,20,0.06); } .fv-image-grid-2 img { width: 100%; height: 100%; object-fit: cover; } /* FAQ accordion-style list (AudienceTabs Students tab) */ .fv-faq-list { border-radius: var(--fv-radius-2xl); border: 1px solid rgba(20,20,20,0.1); background: var(--fv-paper); overflow: hidden; } .fv-faq-item { padding: 1.25rem; } .fv-faq-item + .fv-faq-item { border-top: 1px solid rgba(20,20,20,0.1); } .fv-faq-item__q { margin: 0; font-family: var(--fv-font-display); font-weight: 500; font-size: 1.125rem; color: var(--fv-ink); } .fv-faq-item__a { margin: 0.375rem 0 0; font-size: 0.875rem; line-height: 1.6; color: rgba(20,20,20,0.65); } /* Single wide banner image (ServiceOptions) */ .fv-banner-image { position: relative; margin-top: 2rem; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 1.5rem; box-shadow: inset 0 0 0 1px rgba(20,20,20,0.1); } @media (min-width: 640px) { .fv-banner-image { aspect-ratio: 3 / 1; } } .fv-banner-image img { width: 100%; height: 100%; object-fit: cover; } /* Numbered service-option cards (ServiceOptions) */ .fv-option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 1024px) { .fv-option-grid { grid-template-columns: repeat(4, 1fr); } } .fv-option-card { display: flex; aspect-ratio: 1 / 1; flex-direction: column; justify-content: space-between; border-radius: var(--fv-radius-2xl); border: 1px solid rgba(20,20,20,0.1); background: var(--fv-paper); padding: 1rem; } @media (min-width: 640px) { .fv-option-card { padding: 1.5rem; } } .fv-option-card__num { display: flex; height: 2rem; width: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--fv-world-accent, var(--fv-primary-accent)) 20%, transparent); font-family: var(--fv-font-mono); font-size: 0.75rem; color: var(--fv-world-accent-on-light, var(--fv-primary-accent-on-light)); } @media (min-width: 640px) { .fv-option-card__num { height: 2.25rem; width: 2.25rem; } } .fv-option-card__title { margin: 0; font-family: var(--fv-font-display); font-weight: 500; font-size: 1rem; line-height: 1.2; color: var(--fv-ink); } @media (min-width: 640px) { .fv-option-card__title { font-size: 1.125rem; } } .fv-option-card__body { margin: 0.375rem 0 0; font-size: 0.75rem; line-height: 1.5; color: rgba(20,20,20,0.65); } @media (min-width: 640px) { .fv-option-card__body { font-size: 0.875rem; } } /* Split hero+image layout (FoodQuality) */ .fv-split { display: grid; gap: 2.5rem; } @media (min-width: 1024px) { .fv-split { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; } } .fv-split__image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 1.5rem; box-shadow: inset 0 0 0 1px rgba(247,241,230,0.1); } .fv-split__image img { width: 100%; height: 100%; object-fit: cover; } /* Chip badge (hero "Scan & go", industry blink-dot chip) */ .fv-chip { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--fv-radius-full); border: 1px solid rgba(28,155,216,0.5); background: rgba(20,20,20,0.45); padding: 0.25rem 0.875rem 0.25rem 0.25rem; backdrop-filter: blur(4px); } .fv-chip img { height: 1.75rem; width: 1.75rem; border-radius: 50%; box-shadow: 0 0 0 1px rgba(28,155,216,0.6); } .fv-chip span { font-family: var(--fv-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,253,248,0.9); } .fv-blink-dot { display: inline-block; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--fv-green); animation: blink-dot 1.8s ease-in-out infinite; } .fv-needs-info { display: inline-block; border-radius: var(--fv-radius-full); border: 1px solid rgba(20,20,20,0.15); padding: 0.1rem 0.5rem; font-family: var(--fv-font-mono); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(20,20,20,0.4); } /* --------------------------------------------------------------------- 12. News, Contact, Gift Vouchers (Phase 3) --------------------------------------------------------------------- */ /* News archive */ .fv-news__grid { margin-top: 3rem; display: grid; gap: 1.5rem; } @media (min-width: 640px) { .fv-news__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .fv-news__grid { grid-template-columns: repeat(3, 1fr); } } .fv-news__card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--fv-radius-2xl); border: 1px solid rgba(20,20,20,0.1); background: var(--fv-paper); transition: border-color 0.15s ease; } .fv-news__card:hover { border-color: rgba(20,20,20,0.25); } .fv-news__card:hover .fv-news__card-image img { transform: scale(1.05); } .fv-news__card-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fv-kraft); } .fv-news__card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .fv-news__card-body { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 1.25rem; } .fv-news__card-date { margin: 0; font-family: var(--fv-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(20,20,20,0.4); } .fv-news__card-title { margin: 0; font-family: var(--fv-font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.3; color: var(--fv-ink); } .fv-news__card-excerpt { margin: 0.25rem 0 0; font-size: 0.875rem; color: rgba(20,20,20,0.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fv-news__card-more { margin-top: auto; padding-top: 0.75rem; display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--fv-secondary-accent-on-light); } .fv-news__card:hover .fv-news__card-more span { transform: translateX(2px); } .fv-news__card-more span { transition: transform 0.15s ease; } /* News single article */ /* .fv-news-article previously had no background of its own, unlike every other utility page (Contact/News archive/Gift Vouchers), which all wrap their content in .fv-section--cream. Without a directly-targeted rule here, Divi's own body/post styling (Divi stays the site's active theme and its CSS is never dequeued — see the router's header comment) won a dark background on this specific route, and its own default heading/ text colors won the same way the Gateway/School/World hero headings did earlier — a directly-targeted rule always beats an inherited one, regardless of specificity. Fixed the same way: an explicit background plus !important on every text color below, scoped to .fv-news-article descendants only, so this can never affect any other route. */ .fv-news-article { padding: 4rem 0 6rem; background: var(--fv-cream) !important; } @media (min-width: 640px) { .fv-news-article { padding: 6rem 0; } } .fv-news-article__inner { max-width: 48rem; margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 640px) { .fv-news-article__inner { padding: 0 2rem; } } .fv-news-article .fv-kicker--on-light { color: var(--fv-world-accent-on-light, var(--fv-secondary-accent-on-light)) !important; } .fv-news-article__back { font-size: 0.875rem; font-weight: 500; color: rgba(20,20,20,0.6) !important; } .fv-news-article__back:hover { color: var(--fv-ink) !important; } /* Intro rhythm: date -> title -> image -> first paragraph, each slightly more separated than before — part of why the article read as "plain WordPress content" was everything sitting too close together. */ .fv-news-article__title { margin: 0.75rem 0 0; font-family: var(--fv-font-display); font-weight: 500; font-size: 1.875rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--fv-ink) !important; } @media (min-width: 640px) { .fv-news-article__title { font-size: 2.25rem; } } .fv-news-article__image { position: relative; margin-top: 2.5rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--fv-radius-2xl); background: var(--fv-kraft); } @media (min-width: 640px) { .fv-news-article__image { aspect-ratio: 16 / 9; } } .fv-news-article__image img { width: 100%; height: 100%; object-fit: cover; } /* Article body — editorial typography pass. Everything below is scoped to .fv-news-article__body, the container that wraps the_content() for EVERY News post — new Gutenberg posts and older Divi/Divi Supreme posts alike render through this same element, so these rules apply equally to both. Nothing here touches saved post content; it only styles whatever HTML the_content() already outputs. Verified against both a real Gutenberg-shaped article and a synthetic Divi-shaped snippet (et_pb_section/et_pb_text wrapping plain prose) — see the accompanying report. */ .fv-news-article__body { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.35rem; font-size: 1rem; line-height: 1.75; color: rgba(20,20,20,0.8) !important; } .fv-news-article__body p { margin: 0; } .fv-news-article__body img { max-width: 100%; height: auto; border-radius: var(--fv-radius-lg); } /* H2s as editorial "chapter" breaks: a small red accent rule, extra space above (adds on top of the flex gap, doesn't replace it — margin and gap both contribute in a flex column), and real display-font typography — the_content()'s H2 output previously had none of its own, relying entirely on the browser default. */ .fv-news-article__body h2 { margin: 1.75rem 0 0; padding: 0; font-family: var(--fv-font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.3; color: var(--fv-ink) !important; } @media (min-width: 640px) { .fv-news-article__body h2 { font-size: 1.5rem; } } .fv-news-article__body h2::before { content: ''; display: block; width: 2.5rem; height: 3px; margin-bottom: 1rem; background: var(--fv-red); border-radius: var(--fv-radius-full); } .fv-news-article__body h2:first-child { margin-top: 0; } /* Bold text: distinct from a heading, but noticeably less heavy than the browser default (700+), which was making bold runs feel shouty rather than intentional. */ .fv-news-article__body strong { font-weight: 600; color: var(--fv-ink) !important; } /* Lists: Gutenberg's default