/** * Campaign block + full-screen template styling. * Brand tokens default to Het Vergeten Kind; override the variables (or the * block's colour controls) to rebrand. */ .trybes-campaign { --hvk-red: #d51224; --hvk-navy: #112337; --hvk-indigo: #2a2b5d; --hvk-cream: #e5e0db; --hvk-font: "Filson Soft", "filson-soft", "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif; box-sizing: border-box; color: var(--hvk-navy); font-family: var(--hvk-font); } /* Hero treatment: a full-bleed page eye-catcher with generous padding. Applied on the standalone campaign template and when the editor sets the block to Wide or Full width. With the default ("None") width — e.g. inside a column on a donation page — the block stays compact and lets the map fill its container. The background is never forced: it only appears when the editor picks a background colour (which sets --hvk-surface); otherwise transparent. */ .trybes-campaign.alignwide, .trybes-campaign.alignfull, .trybes-campaign-page .trybes-campaign { padding: 56px 20px 80px; /* Hold our own horizontal gutter against themes that add a mobile content gutter to children of
/.entry-content — e.g. a `@media (max-width: 1024px) { main .entry-content > :not(.alignfull) { padding-inline: … } }` rule outranks our (0,2,0) selector. Only left/right are forced; top/bottom stay overridable. */ padding-left: 20px !important; padding-right: 20px !important; background: var(--hvk-surface, transparent); } /* Full-screen on the standalone campaign template. The class sits on (classic page template) or on the block template's full-bleed
— the selector matches either so the layout is theme-agnostic. */ .trybes-campaign-page { margin: 0; background: #ffffff; } .trybes-campaign-page .trybes-campaign { min-height: 100vh; } /* Default: fill the container (column / in-flow). */ .trybes-campaign__inner { max-width: 100%; margin: 0 auto; } /* Hero contexts keep a readable, centred content column. */ .trybes-campaign.alignwide .trybes-campaign__inner, .trybes-campaign.alignfull .trybes-campaign__inner, .trybes-campaign-page .trybes-campaign__inner { max-width: 920px; } .trybes-campaign__hero { margin-bottom: 30px; text-align: center; } .trybes-campaign__logo { margin: 0 0 22px; } .trybes-campaign__logo img { max-width: 190px; height: auto; } .trybes-campaign__eyebrow { margin: 0 0 12px; letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; font-weight: 700; /* !important defends the editor's chosen colour (which still flows through the CSS variable) against themes that set a blanket `h2/p { color: … !important }` — specificity alone can never beat a theme !important. Scoped to the hero text colour only. */ color: var(--hvk-red) !important; } .trybes-campaign__title { margin: 0 0 14px; font-size: clamp(32px, 5vw, 54px); line-height: 1.05; font-weight: 800; color: var(--hvk-navy) !important; } .trybes-campaign__lead { margin: 0 auto; max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--hvk-indigo) !important; } .trybes-campaign__map { margin-top: 30px; } .trybes-campaign__map .trybes-map-studio { margin-inline: auto; max-width: 680px; } .trybes-campaign__cta { margin-top: 32px; text-align: center; } /* The CTA uses standard WordPress button markup so the theme styles it; editors only optionally override its colours. */ /* Hover and keyboard focus share one clear affordance: a ring in the button's own colour (falls back to the current text colour if no button colour is set). Replaces the theme's faint default outline and the missing hover state. The outline is not transitioned — animating outline-colour flashes white first (it eases from the default text colour to red). */ .trybes-campaign__cta .wp-block-button__link:hover, .trybes-campaign__cta .wp-block-button__link:focus-visible { outline: 3px solid var(--tms-cta-color, currentColor); outline-offset: 3px; } /* No lingering ring after a mouse click (focus but not keyboard focus). */ .trybes-campaign__cta .wp-block-button__link:focus:not(:focus-visible) { outline: none; } /* Editor preview placeholder for the campaign map. */ .trybes-campaign__map-placeholder { margin-top: 30px; padding: 48px 20px; border: 1px dashed rgba(17, 35, 55, 0.35); border-radius: 18px; background: rgba(17, 35, 55, 0.04); text-align: center; color: var(--hvk-indigo); font-weight: 600; }