/* Valour Canada — base layer (container, button, shared primitives). Block-specific BEM rules follow below, one section per block. */ /* Full-bleed sections (e.g. .vc-archive-titlebar) use the 100vw/-50vw breakout trick, which overflows horizontally by the scrollbar's width when one is present. Clip it at the document level rather than fighting the scrollbar width in every full-bleed rule. Using `clip` (not `hidden`) — `overflow-x: hidden` forces the browser to compute `overflow-y: auto`, turning into its own scroll container and breaking `position: sticky` everywhere on the page (e.g. .vc-resource-sidebar). `clip` doesn't trigger that pairing. */ html { overflow-x: clip; /* Reserve the scrollbar's width on every page (even short ones with no visible scrollbar), so 100vw-based full-bleed sections (like .vc-archive-layout--single) always measure consistently and don't drift left/right by the scrollbar's width depending on page length. */ scrollbar-gutter: stable; } .vc-container { max-width: var(--vc-content-max); margin-inline: auto; padding-inline: var(--vc-gutter); } @media (max-width: 1024px) { .vc-container { padding-inline: 40px; } } @media (max-width: 640px) { .vc-container { padding-inline: 20px; } } .vc-button { display: inline-flex; align-items: center; gap: var(--vc-button-gap); padding: var(--vc-button-padding-y) var(--vc-button-padding-x); border-radius: var(--vc-button-radius); font-family: var(--vc-font-display); font-size: var(--vc-size-label); line-height: 1; text-decoration: none; white-space: nowrap; transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .vc-button:hover { opacity: 0.85; } .vc-button__icon { display: flex; align-items: center; } .vc-button__icon svg { width: 16px; height: 16px; } .vc-button--primary { background: var(--vc-color-crimson); color: var(--vc-color-white); /* Button labels are authored freely per-instance across the site (ACF text fields) and land inconsistently — "Search", "subscribe", "LEARN MORE" all exist today. `capitalize` only uppercases each word's first letter and leaves the rest alone, so it can't force ALL-CAPS labels down to Title Case, but it does normalize the lowercase/mixed ones without touching content, giving consistent Capital Case typography regardless of how an editor typed the label. */ text-transform: capitalize; } /* Same specificity as the generic .vc-button:hover opacity-dim above (one class + one pseudo-class each) — placed after it in source order so this wins the tie and replaces the dim with a proper crimson→black swap instead of stacking a translucent black on top of crimson. background-color/color are already in .vc-button's transition list above, so this animates in smoothly rather than snapping. */ .vc-button--primary:hover, .vc-button--primary:focus-visible { background: var(--vc-color-darkest); color: var(--vc-color-white); opacity: 1; } /* A primary button linking straight to a PDF gets the PDF icon before its label instead of the sitewide default — filled white rather than the usual crimson/red so it stays visible against both the button's own crimson rest-state and its black hover/focus background (see .vc-button--primary:hover above). Sits inside .vc-button's own `display: inline-flex; gap: ...` as the first flex item automatically — no extra layout rules needed. Specificity (2 classes + 1 attribute) beats the sitewide unscoped `a[href$=".pdf"]::before` at the end of this file outright, so nothing bleeds through from that rule. */ .vc-button.vc-button--primary[href$=".pdf"]::before { content: ""; display: inline-block; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%22-4%200%2040%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M25.669%2026.096c-.488.144-1.203.16-1.97.049a9.4%209.4%200%200%201-2.49-.742c1.473-.214%202.615-.148%203.592.198.23.082.611.301.868.495m-8.214-1.35-.177.048c-.396.108-.782.213-1.153.306l-.501.127a66%2066%200%200%200-3.055.826c.387-.932.746-1.875%201.098-2.797.26-.682.526-1.379.801-2.067q.21.345.437.692a13.5%2013.5%200%200%200%202.55%202.865m-2.562-10.513c.065%201.15-.183%202.257-.547%203.318-.449-1.312-.658-2.762-.097-3.932.144-.3.261-.46.338-.545.118.183.273.59.306%201.159m-5.26%2014.572q-.378.675-.772%201.272c-.637.958-1.677%201.985-2.212%201.985-.052%200-.116-.008-.209-.107-.06-.062-.07-.107-.066-.169.018-.352.485-.98%201.161-1.562a11.4%2011.4%200%200%201%202.098-1.419m17.738-2.659c-.082-1.174-2.059-1.927-2.078-1.934-.764-.271-1.594-.403-2.538-.403-1.01%200-2.098.146-3.497.473a12.2%2012.2%200%200%201-3.122-3.209%2020%2020%200%200%201-.951-1.605c.678-1.623%201.29-3.367%201.178-5.32-.09-1.566-.796-2.618-1.756-2.618-.659%200-1.226.488-1.688%201.451-.822%201.718-.606%203.915.643%206.537a92%2092%200%200%200-1.272%203.213c-.504%201.319-1.023%202.68-1.607%203.973-1.64.65-2.987%201.436-4.109%202.402-.735.631-1.622%201.597-1.672%202.605-.025.474.138.91.468%201.258.352.37.793.566%201.279.566%201.603%200%203.146-2.202%203.439-2.644a24%2024%200%200%200%201.68-3.021c1.361-.492%202.811-.859%204.217-1.214l.503-.128a68%2068%200%200%200%201.175-.313c.427-.115.867-.235%201.313-.349%201.443.918%202.995%201.517%204.51%201.737%201.274.185%202.406.078%203.173-.322.69-.36.728-.913.712-1.135m3.105%2010.097c0%202.15-1.896%202.283-2.278%202.287H3.745c-2.143%200-2.272-1.908-2.276-2.287V3.756c0-2.152%201.899-2.283%202.276-2.287h16.518l.009.009v6.446c0%201.294.782%203.743%203.744%203.743h6.404l.055.055zm-1.519-26.045h-4.94c-2.142%200-2.272-1.898-2.275-2.274v-4.97zm2.988%2026.045V11.116L21.742.87V.823h-.048L20.874%200H3.744C2.45%200%200%20.785%200%203.757v32.487C0%2037.543.783%2040%203.745%2040H28.2c1.295%200%203.745-.786%203.745-3.757%22%20fill%3D%22%23ffffff%22/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } .vc-button--secondary { background: var(--vc-color-white); color: var(--vc-color-near-black); } /* Similar to .vc-button--primary's style (radius, capitalize, crimson-style hover swap — using its own mid-gray→black rather than crimson→black since the rest state here is mid-gray, not crimson) — kept its own compact tag-style padding/font-size rather than adopting --primary's, same reason as .vc-linkgroups__btn/.vc-resource-sidebar__donate-banner: this renders as many small pills in a row (VC Resource Library file links), not a standalone CTA. */ /* Rest state matches .vc-button--primary's crimson exactly (was mid-gray) per correction 2026-08-12. */ .vc-button--tag { font-family: var(--vc-font-body); font-size: var(--vc-size-caption); padding: 10px 16px; background: var(--vc-color-crimson); color: var(--vc-color-white); border-radius: var(--vc-button-radius); text-transform: capitalize; transition: background-color 0.2s ease, color 0.2s ease; } .vc-button--tag:hover, .vc-button--tag:focus-visible { background: var(--vc-color-darkest); color: var(--vc-color-white); } /* Same treatment as .vc-button--primary above — most of these tag pills link straight to a downloadable file (VC Resource Library), so a PDF link gets the icon before its label, filled white to stay visible against both the crimson rest state and the black hover state. */ .vc-button.vc-button--tag[href$=".pdf"]::before { content: ""; display: inline-block; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%22-4%200%2040%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M25.669%2026.096c-.488.144-1.203.16-1.97.049a9.4%209.4%200%200%201-2.49-.742c1.473-.214%202.615-.148%203.592.198.23.082.611.301.868.495m-8.214-1.35-.177.048c-.396.108-.782.213-1.153.306l-.501.127a66%2066%200%200%200-3.055.826c.387-.932.746-1.875%201.098-2.797.26-.682.526-1.379.801-2.067q.21.345.437.692a13.5%2013.5%200%200%200%202.55%202.865m-2.562-10.513c.065%201.15-.183%202.257-.547%203.318-.449-1.312-.658-2.762-.097-3.932.144-.3.261-.46.338-.545.118.183.273.59.306%201.159m-5.26%2014.572q-.378.675-.772%201.272c-.637.958-1.677%201.985-2.212%201.985-.052%200-.116-.008-.209-.107-.06-.062-.07-.107-.066-.169.018-.352.485-.98%201.161-1.562a11.4%2011.4%200%200%201%202.098-1.419m17.738-2.659c-.082-1.174-2.059-1.927-2.078-1.934-.764-.271-1.594-.403-2.538-.403-1.01%200-2.098.146-3.497.473a12.2%2012.2%200%200%201-3.122-3.209%2020%2020%200%200%201-.951-1.605c.678-1.623%201.29-3.367%201.178-5.32-.09-1.566-.796-2.618-1.756-2.618-.659%200-1.226.488-1.688%201.451-.822%201.718-.606%203.915.643%206.537a92%2092%200%200%200-1.272%203.213c-.504%201.319-1.023%202.68-1.607%203.973-1.64.65-2.987%201.436-4.109%202.402-.735.631-1.622%201.597-1.672%202.605-.025.474.138.91.468%201.258.352.37.793.566%201.279.566%201.603%200%203.146-2.202%203.439-2.644a24%2024%200%200%200%201.68-3.021c1.361-.492%202.811-.859%204.217-1.214l.503-.128a68%2068%200%200%200%201.175-.313c.427-.115.867-.235%201.313-.349%201.443.918%202.995%201.517%204.51%201.737%201.274.185%202.406.078%203.173-.322.69-.36.728-.913.712-1.135m3.105%2010.097c0%202.15-1.896%202.283-2.278%202.287H3.745c-2.143%200-2.272-1.908-2.276-2.287V3.756c0-2.152%201.899-2.283%202.276-2.287h16.518l.009.009v6.446c0%201.294.782%203.743%203.744%203.743h6.404l.055.055zm-1.519-26.045h-4.94c-2.142%200-2.272-1.898-2.275-2.274v-4.97zm2.988%2026.045V11.116L21.742.87V.823h-.048L20.874%200H3.744C2.45%200%200%20.785%200%203.757v32.487C0%2037.543.783%2040%203.745%2040H28.2c1.295%200%203.745-.786%203.745-3.757%22%20fill%3D%22%23ffffff%22/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } .vc-eyebrow { font-family: var(--vc-font-body); font-weight: 500; font-size: var(--vc-size-caption); letter-spacing: var(--vc-letter-spacing-eyebrow); text-transform: uppercase; color: var(--vc-color-mid-gray); } .vc-section-heading { font-family: var(--vc-font-display); font-size: var(--vc-size-h2); color: var(--vc-color-near-black); text-align: center; margin-bottom: 40px; } .vc-section--alt { background: var(--vc-color-light-gray); } [data-aos] { transition-property: opacity, transform; } @media (prefers-reduced-motion: reduce) { [data-aos] { transition: none !important; transform: none !important; opacity: 1 !important; } } /* ========================================================================== .vc-header ========================================================================== */ /* Sticky at every breakpoint. `top: 0` assumes no admin bar; WordPress adds its own `admin-bar` body class when one is showing, so the override below drops the header just under it instead of behind it (its own CSS shrinks the bar to 46px under 783px, matching the breakpoint used here). `overflow-anchor: none` stops the browser's scroll-anchoring from treating this element as the page's anchor node: .vc-header sits at the very top of the document and its own height shrinks on scroll (the slim-on-scroll effect below), which is exactly the shape scroll anchoring watches for — without this, the browser "corrects" scrollTop by the shrink delta on top of the CSS height transition, producing the abrupt snap/jump Mohiz reported instead of the intended smooth 0.25s shrink. */ .vc-header { position: sticky; top: 0; z-index: 300; overflow-anchor: none; } body.admin-bar .vc-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .vc-header { top: 46px; } } .vc-header__utility { background: var(--vc-color-near-black); } .vc-header__utility-inner { display: flex; align-items: center; gap: 24px; height: 100px; } .vc-header__logo img, .vc-header__logo-text { display: block; color: var(--vc-color-white); font-family: var(--vc-font-display); font-size: 1.25rem; } .vc-header__search { display: flex; align-items: center; background: var(--vc-color-mid-gray); border-radius: 8px; padding-left: 24px; flex: 1; max-width: none; overflow: hidden; } /* Compound selector alone (0,2,0) already out-specifies WP core's global-styles-inline-css `input[type="search"]` rule (0,1,1) and GeneratePress's own `input[type="search"], ...` form-field rule, but `!important` on color is kept too — this exact fight (typed text turning the theme's default near-black instead of white against the dark header bar) has already recurred once after a GP/core styles update reshuffled selector order, so don't rely on specificity margins alone here. */ .vc-header__search .vc-header__search-input { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; color: var(--vc-color-white) !important; font-family: var(--vc-font-body); font-size: var(--vc-size-body); flex: 1; padding: 12px 0; } .vc-header__search .vc-header__search-input:focus { background: transparent; border: 0; outline: none; box-shadow: none; } .vc-header__search .vc-header__search-input:-webkit-autofill, .vc-header__search .vc-header__search-input:-webkit-autofill:hover, .vc-header__search .vc-header__search-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--vc-color-white); -webkit-box-shadow: 0 0 0 1000px var(--vc-color-mid-gray) inset; box-shadow: 0 0 0 1000px var(--vc-color-mid-gray) inset; caret-color: var(--vc-color-white); transition: background-color 5000s ease-in-out 0s; } .vc-header__search-input::placeholder { color: rgba(255, 255, 255, 0.5); } .vc-header__search-input::-webkit-search-decoration, .vc-header__search-input::-webkit-search-cancel-button, .vc-header__search-input::-webkit-search-results-button, .vc-header__search-input::-webkit-textfield-decoration-container { -webkit-appearance: none; appearance: none; background: transparent; } .vc-header__search-btn { width: 48px; height: 48px; background: var(--vc-color-white); border: 0; color: var(--vc-color-near-black); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .vc-header__search-btn:hover, .vc-header__search-btn:focus { background: var(--vc-color-white) !important; color: var(--vc-color-near-black) !important; outline: none; box-shadow: none; } .vc-header__search-btn svg, .vc-header__search-btn:hover svg, .vc-header__search-btn:focus svg { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; flex-shrink: 0; display: block; stroke: currentColor; position: static; top: auto; } .vc-header__utility-links { display: flex; align-items: center; justify-content: center; gap: 24px; margin-left: auto; } .vc-header__utility-links a { color: rgba(255, 255, 255, 0.5); font-family: var(--vc-font-body); font-size: var(--vc-size-body); text-decoration: none; } .vc-header__lang { position: relative; display: flex; align-items: center; } /* Prisna WP Translate renders no working widget/shortcode output in this version — its only functional control is the node it auto-injects into wp_footer as `position: absolute; top/right: 10px` against (for its floating "xy" placement). initHeaderLangSwitcher() in site.js relocates that real node into .vc-header__lang so the actual plugin-driven EN/FR control lives in the header instead of floating loose over the page. Plain `.vc-header__lang .prisna-wp-translate-container { position: relative }` isn't enough to neutralize the floating placement: translator-s.css itself (not just its runtime-injected