/* The breadcrumb bar (see Breadcrumb in screens.js) breaks out to the true viewport edge with calc(50% - 50vw), so it can render on a page that has no other full-bleed element. 100vw includes the scrollbar's own width in most browsers, so without this guard that breakout overshoots the visible area by the scrollbar's width and adds a horizontal scrollbar to the whole page. Deliberately "clip" and not "hidden": setting overflow-x to any value other than visible/clip forces the browser to compute an unset overflow-y as "auto" too, turning html/body into their own scroll containers — which breaks position:sticky for every sticky element on the page (it starts sticking relative to that container instead of the viewport). "clip" is excluded from that coupling rule, so it clips the horizontal overshoot without touching vertical scroll behaviour. */ html, body { overflow-x: clip; } /* App-shell styling for the Ealing Climate Week microsite root, scoped so it never bleeds into the surrounding WordPress theme. */ .ecw-microsite-root { background: #fff; font-family: "Nunito", sans-serif; color: #3d4543; } .ecw-microsite-root *, .ecw-microsite-root *::before, .ecw-microsite-root *::after { box-sizing: border-box; } /* Anti-spam honeypot on the event submission form — invisible to real visitors and screen readers, but present in the DOM for bots to find. */ .ecw-microsite-root .cw-hp-wrap { position: absolute; left: -9999px; top: -9999px; } .ecw-microsite-root a { color: #00833a; } .ecw-microsite-root a:hover { color: #005926; } /* The site-wide hover color above is tuned for light backgrounds; against the dark footer it drops to ~2.3:1 contrast, well under WCAG AA. Override with a brighter accent already used elsewhere on this dark background (the stats strip numbers), which measures ~10:1. */ .ecw-microsite-root footer a:hover { color: #5fd08a; } .ecw-microsite-root .cw-card { transition: box-shadow .14s, transform .14s; } .ecw-microsite-root .cw-card:hover { box-shadow: 0 8px 24px rgba(11,12,12,.13); transform: translateY(-3px); } .ecw-microsite-root .cw-topnav:hover { background: #f3f2f1 !important; } .ecw-microsite-root .cw-login:hover { background: #006e30 !important; } .ecw-microsite-root .cw-cardlink:hover { text-decoration: underline; } .ecw-microsite-root .cw-chip:hover { border-color: #8a918d; } .ecw-microsite-root button:active { transform: translateY(1px); } .ecw-microsite-root :focus-visible { outline: 3px solid #ffdd00; outline-offset: 2px; box-shadow: 0 0 0 3px #0b0c0c; } .ecw-microsite-root input:focus-visible, .ecw-microsite-root select:focus-visible, .ecw-microsite-root textarea:focus-visible { outline: 3px solid #ffdd00; outline-offset: 0; box-shadow: none; } @keyframes ecw-cwspin { to { transform: rotate(360deg); } } .ecw-microsite-root .cw-spin { animation: ecw-cwspin .8s linear infinite; } .ecw-microsite-root .cw-error-banner { background: #fdecea; border: 1px solid #f3c2bb; color: #d4351c; font-family: "Nunito", sans-serif; font-weight: 700; font-size: 14.5px; padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; } /* ---- header: desktop nav vs. hamburger menu ---- */ .ecw-microsite-root .cw-nav-desktop { margin-left: auto; display: flex; gap: 2px; align-items: center; } .ecw-microsite-root .cw-nav-toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; color: #1b1c1c; } @media (max-width: 780px) { .ecw-microsite-root .cw-nav-desktop { display: none; } .ecw-microsite-root .cw-nav-toggle { display: inline-flex; } } /* ---- programme filters: always open on desktop, a collapsible toggle on mobile ---- */ .ecw-microsite-root .cw-filters-toggle { display: none; width: 100%; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 10px; background: #f5f7f6; border: 1px solid #e4e8e6; border-radius: 14px; padding: 14px 18px; margin-bottom: 14px; font-family: "Nunito", sans-serif; font-weight: 800; font-size: 15px; color: #1b1c1c; cursor: pointer; } .ecw-microsite-root .cw-filters-panel { display: flex; flex-direction: column; } @media (max-width: 900px) { .ecw-microsite-root .cw-filters-toggle { display: flex; } .ecw-microsite-root .cw-filters-panel.cw-filters-collapsed { display: none; } } /* ---- responsive grids used across the site: cards, forms, hero/CTA splits ---- */ .ecw-microsite-root .cw-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .ecw-microsite-root .cw-hero-grid { display: grid; grid-template-columns: 1.3fr .7fr; } .ecw-microsite-root .cw-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .ecw-microsite-root .cw-hub-cta-grid { display: grid; grid-template-columns: 1.25fr .75fr; } .ecw-microsite-root .cw-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; } .ecw-microsite-root .cw-hub-card-grid { display: grid; grid-template-columns: 360px 1fr; } .ecw-microsite-root .cw-detail-grid { display: grid; grid-template-columns: 1fr 360px; } .ecw-microsite-root .cw-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .ecw-microsite-root .cw-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; } .ecw-microsite-root .cw-form-grid-2b { display: grid; grid-template-columns: 1fr 1.4fr; } .ecw-microsite-root .cw-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ecw-microsite-root .cw-filter-label { width: 130px; flex: none; } @media (max-width: 900px) { .ecw-microsite-root .cw-cards-grid { grid-template-columns: repeat(2, 1fr); } .ecw-microsite-root .cw-stats-grid { grid-template-columns: repeat(2, 1fr); } .ecw-microsite-root .cw-hero-grid, .ecw-microsite-root .cw-hub-cta-grid, .ecw-microsite-root .cw-footer-grid, .ecw-microsite-root .cw-detail-grid { grid-template-columns: 1fr; } .ecw-microsite-root .cw-steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ecw-microsite-root .cw-cards-grid, .ecw-microsite-root .cw-steps-grid, .ecw-microsite-root .cw-form-grid-2, .ecw-microsite-root .cw-form-grid-2b, .ecw-microsite-root .cw-hub-card-grid { grid-template-columns: 1fr; } .ecw-microsite-root .cw-filter-row { flex-direction: column; align-items: flex-start; gap: 8px; } .ecw-microsite-root .cw-filter-label { width: auto; } .ecw-microsite-root .cw-confirm-item { flex-direction: column; gap: 6px; } } /* ---- host pack: template gallery + logo grids ---- */ .ecw-microsite-root .cw-hp-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .ecw-microsite-root .cw-hp-logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* Applied when 4 or fewer logos actually have a file uploaded (see visibleLogos in hostpack.js), so a short list gets a tidy 2x2 instead of 3 columns with a lone card stranded on its own row. */ .ecw-microsite-root .cw-hp-logo-grid.cw-hp-logo-grid--2col { grid-template-columns: repeat(2, 1fr); } .ecw-microsite-root .cw-hp-ba { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } @media (max-width: 720px) { .ecw-microsite-root .cw-hp-pair-grid, .ecw-microsite-root .cw-hp-logo-grid, .ecw-microsite-root .cw-hp-logo-grid.cw-hp-logo-grid--2col { grid-template-columns: 1fr; } } /* ---- host pack: jump nav (01 Plan / 02 Promote / 03 Brand) ---- */ .ecw-microsite-root .cw-hostpack a[href^="#hp-"]:hover, .ecw-microsite-root .cw-hostpack a[href^="#hp-"]:focus-visible { border-color: #00722F; } @media (prefers-reduced-motion: no-preference) { html:has(.cw-hostpack) { scroll-behavior: smooth; } } /* Clears the site header (73px) + this sticky jump nav sitting below it, so a jump-nav click doesn't land with the section's eyebrow/heading tucked underneath them. The nav wraps from one line to two below ~720px (3 pills no longer fit one row), so it's taller there and needs more clearance. */ .ecw-microsite-root .cw-hp-jump-target { scroll-margin-top: 150px; } @media (max-width: 720px) { .ecw-microsite-root .cw-hp-jump-target { scroll-margin-top: 200px; } } /* ---- lightbox: hover/focus affordance on the trigger, full-screen overlay ---- */ .ecw-microsite-root .cw-lightbox-trigger img { transition: transform .15s ease, box-shadow .15s ease; } .ecw-microsite-root .cw-lightbox-trigger:hover img, .ecw-microsite-root .cw-lightbox-trigger:focus-visible img { transform: scale(1.035); box-shadow: 0 10px 26px rgba(11,12,12,.28); } .ecw-microsite-root .cw-lightbox-overlay { position: fixed; inset: 0; background: rgba(11,12,12,.86); z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; cursor: zoom-out; } .ecw-microsite-root .cw-lightbox-img { max-width: min(92vw, 1100px); max-height: 80vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; } .ecw-microsite-root .cw-lightbox-caption { color: #fff; font-family: "Nunito", sans-serif; font-weight: 700; font-size: 14px; margin-top: 14px; text-align: center; max-width: 700px; cursor: default; } .ecw-microsite-root .cw-lightbox-close { position: fixed; top: 18px; right: 20px; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(255,255,255,.14); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .ecw-microsite-root .cw-lightbox-close:hover { background: rgba(255,255,255,.24); } /* ---- host guide: grids + print ---- */ .ecw-microsite-root .cw-hg-cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ecw-microsite-root .cw-hg-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .ecw-microsite-root .cw-hg-checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; margin-bottom: 8px; } .ecw-microsite-root .cw-hg-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ecw-microsite-root .cw-hg-brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } /* the site-wide link color (colors_and_type.css --link) is the same green as the "ready to get started" CTA banner's background, so any [text](url) an editor adds to its copy would render invisible — force white instead. */ .ecw-microsite-root .cw-hg-cta-text a { color: #fff; text-decoration-color: rgba(255,255,255,.6); } .ecw-microsite-root .cw-hg-cta-text a:hover { color: #fff; text-decoration-color: #fff; } @media (max-width: 720px) { .ecw-microsite-root .cw-hg-cards-2, .ecw-microsite-root .cw-hg-cards-3, .ecw-microsite-root .cw-hg-checklist-grid, .ecw-microsite-root .cw-hg-hub-grid, .ecw-microsite-root .cw-hg-brand-grid { grid-template-columns: 1fr; } /* Without this, the breadcrumb trail + "Print or save as PDF" button wrap onto 2 lines, making the bar taller than the step sub-nav below it assumes (see its "top: 129" comment) — which then sticks partway under the bar instead of below it. Dropping the button's text (the icon alone is enough at this width, and the label is still on the accessible name via aria-label) keeps the bar to one line, same height as desktop, at every width. */ .ecw-microsite-root .cw-hg-print-label { display: none; } } @media print { .cw-hg-noprint, body:has(.cw-hostguide) .ecw-microsite-root > header, body:has(.cw-hostguide) .ecw-microsite-root > footer { display: none !important; } .ecw-microsite-root .cw-hostguide .cw-hg-step, .ecw-microsite-root .cw-hostguide .cw-hg-card, .ecw-microsite-root .cw-hostguide .cw-hg-survey { break-inside: avoid; } .ecw-microsite-root .cw-hostguide h1, .ecw-microsite-root .cw-hostguide h2, .ecw-microsite-root .cw-hostguide h3 { break-after: avoid; } .ecw-microsite-root .cw-hostguide .cw-hg-pagebreak { break-before: page; } } /* ---- standard page: styling for the normal WordPress content editor's HTML output (policy/terms/accessibility pages) — h1/h2/h3/p/a already have rules via colors_and_type.css; this fills in the tags that only show up in this kind of longer-form, editor-authored copy. ---- */ .ecw-microsite-root .cw-prose { font-family: "Nunito", sans-serif; font-size: 18px; line-height: 1.6; color: #3d4543; } .ecw-microsite-root .cw-prose > *:first-child { margin-top: 0; } .ecw-microsite-root .cw-prose h2 { margin: 40px 0 14px; } .ecw-microsite-root .cw-prose h3 { margin: 28px 0 12px; } .ecw-microsite-root .cw-prose h4 { margin: 22px 0 10px; } .ecw-microsite-root .cw-prose ul, .ecw-microsite-root .cw-prose ol { margin: 0 0 18px; padding-left: 24px; } .ecw-microsite-root .cw-prose li { margin-bottom: 8px; } .ecw-microsite-root .cw-prose strong { font-weight: 700; color: #1b1c1c; } .ecw-microsite-root .cw-prose blockquote { border-left: 4px solid #cfe6da; margin: 0 0 18px; padding: 2px 0 2px 18px; color: #626a65; font-style: italic; } .ecw-microsite-root .cw-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; } .ecw-microsite-root .cw-prose th, .ecw-microsite-root .cw-prose td { border: 1px solid #d6dbd8; padding: 8px 12px; text-align: left; vertical-align: top; } .ecw-microsite-root .cw-prose th { background: #f5f7f6; font-family: "Montserrat", sans-serif; font-weight: 700; } .ecw-microsite-root .cw-prose hr { border: 0; border-top: 1px solid #e4e8e6; margin: 32px 0; } /* gtranslate's floating language switcher sets a cookie once a visitor picks a language, so it's a "Functional" cookie per the site's cookie banner — stays hidden until that's been granted (see CookieConsent in components.js, which toggles ecw-functional-ok on ). Not scoped to .ecw-microsite-root since gtranslate prints this outside our app root. */ .gtranslate_wrapper { display: none !important; } body.ecw-functional-ok .gtranslate_wrapper { display: block !important; }