/* Shared chrome for every Ferguson Media page: design tokens, Bootstrap theme overrides, navbar, mobile offcanvas menu, page loader, cookie bar, footer, buttons, reveal-on-scroll animation, WhatsApp float. Bootstrap-first: layout/spacing/components lean on Bootstrap classes. Custom CSS below is only for things Bootstrap has no equivalent for (the page loader, the cookie bar, the reveal-on-scroll animation, the brand's exact button/nav look) or for theming Bootstrap's own variables to match the brand. */ :root { --orange: #ff7a00; --orange-dk: #e06d00; --orange-pale: #fff4ea; --black: #0a0a0a; --black-2: #111; --white: #fff; --page: #fafaf7; --surface: #f4f2ee; --mid: #6b6b6b; --border: #00000014; --fh: 'Poppins', sans-serif; --fb: 'Public Sans', sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --max: 1280px; --bs-primary: var(--orange); --bs-primary-rgb: 255, 122, 0; --bs-body-color: var(--black); --bs-body-bg: var(--page); --bs-body-font-family: var(--fb); --bs-body-line-height: 1.6; --bs-font-sans-serif: var(--fh); --bs-link-color: var(--black); --bs-link-color-rgb: 10, 10, 10; --bs-link-hover-color: var(--orange); --bs-link-hover-color-rgb: 255, 122, 0; --bs-border-color: var(--border); --bs-border-radius: 0; --bs-border-radius-lg: 0; --bs-border-radius-sm: 0; --bs-btn-border-radius: 0; --bs-card-border-radius: 0; --bs-modal-border-radius: 0; --bs-offcanvas-bg: var(--black); --bs-offcanvas-color: var(--white); --bs-offcanvas-width: 280px; --bs-offcanvas-border-width: 0; --bs-modal-zindex: 8500; --bs-modal-backdrop-zindex: 8450; --bs-offcanvas-zindex: 8400; --bs-backdrop-zindex: 8350; } .html-root { scroll-behavior: smooth; } /* Brand container: overrides Bootstrap's own .container (different max-width breakpoints and 0.75rem padding) since this site uses one fixed max-width and a wider fixed side padding at every breakpoint except mobile, handled below. */ .container { max-width: var(--max); margin: 0 auto; padding: 0 56px; width: 100%; } /* Every component below sets its own spacing explicitly (matching the original design, which reset all margins to 0 and opted back in per class). Bootstrap's Reboot gives headings and paragraphs a nonzero default margin-bottom, which would otherwise leak into every heading and paragraph that doesn't already carry an explicit margin rule. Scoped under .html-root (present on every page's ) rather than a bare tag selector, per the no-direct-tag-selector rule. */ .html-root h1, .html-root h2, .html-root h3, .html-root h4, .html-root h5, .html-root h6, .html-root p { margin: 0; } /* Bootstrap's Reboot hardcodes text-decoration: underline on the base a{} rule with no CSS variable controlling it (unlike its color, which reads --bs-link-color-rgb, already themed above). Every page on this site defaults links to no underline and opts back in per component (e.g. .cookie-bar-text a), matching the original design's own blanket a{text-decoration:none} reset — so this is themed the same way as the h1-h6/p margin reset above, not a stray tag-selector hack. Scoped under .html-root for the same reason as above. */ .html-root a { text-decoration: none; } /* ── Reveal-on-scroll (no Bootstrap equivalent) ── */ .rv { opacity: 0; transform: translateY(36px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .rv.on { opacity: 1; transform: translateY(0); } .rv-l { opacity: 0; transform: translateX(-36px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .rv-l.on { opacity: 1; transform: translateX(0); } .rv-r { opacity: 0; transform: translateX(36px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .rv-r.on { opacity: 1; transform: translateX(0); } .rv-f { opacity: 0; transition: opacity 0.65s var(--ease-out); } .rv-f.on { opacity: 1; } .d1 { transition-delay: 0.05s; } .d2 { transition-delay: 0.12s; } .d3 { transition-delay: 0.19s; } .d4 { transition-delay: 0.26s; } .d5 { transition-delay: 0.33s; } .d6 { transition-delay: 0.4s; } /* ── Page loader (no Bootstrap equivalent) ── */ .page-loader { position: fixed; inset: 0; z-index: 9000; background: var(--black); display: flex; align-items: center; justify-content: center; transition: opacity 0.6s var(--ease), visibility 0.6s; } .page-loader.gone { opacity: 0; visibility: hidden; pointer-events: none; } .loader-wordmark { font-family: var(--fh); font-size: 18px; font-weight: 900; color: var(--white); letter-spacing: 4px; text-transform: uppercase; text-align: center; margin-bottom: 24px; } .loader-wordmark span { color: var(--orange); } .loader-line-bg { width: 140px; height: 1px; background: #ffffff1a; margin: 0 auto; overflow: hidden; } .loader-line { height: 100%; background: var(--orange); animation: ll 1.5s var(--ease) forwards; } @keyframes ll { from { width: 0; } to { width: 100%; } } /* ── Toast notification (no Bootstrap equivalent this simple) ── */ .toast-fm { position: fixed; bottom: 32px; right: 32px; background: var(--black); color: var(--white); font-family: var(--fh); font-size: 13px; font-weight: 600; padding: 16px 24px; border-left: 3px solid var(--orange); box-shadow: 0 12px 40px #00000059; z-index: 9999; transform: translateY(70px); opacity: 0; transition: all 0.4s var(--ease); } .toast-fm.show { transform: translateY(0); opacity: 1; } .toast-fm.error { border-left-color: #e53935; } /* ── Navbar ── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 76px; padding: 0 56px; transition: background 0.4s var(--ease), box-shadow 0.4s, height 0.4s, border-color 0.4s; animation: nav-in 0.6s var(--ease) 0.3s both; } @keyframes nav-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } /* Three navbar colour treatments are used across the site: "fade" starts transparent over a hero and turns light+blurred on scroll (index, about, news, creative-hub, community-media-hub, good-news-story, good-news-check-in, contact); "solid" is permanently dark, no scroll change (terms, privacy); "light" is permanently light with dark text, only height changes on scroll — no hero image to fade over (article). */ .navbar-fade { background: transparent; } .navbar-fade.scrolled { background: #fafaf7f5; backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); box-shadow: 0 4px 24px #0000000f; height: 64px; } /* .navbar-fade defaults to the dark-hero case (white text/hamburger over the hero image, switching to dark once .scrolled adds the light background) since that's the majority of pages using this variant. index.html's hero has no image behind it and needs a permanently-dark-text override — add a .navbar-fade-light-hero modifier for that page when it's migrated, rather than assuming this default suits it too. */ .navbar-fade .nav-logo-text { color: var(--white); } .navbar-fade.scrolled .nav-logo-text { color: var(--black); } .navbar-fade .nav-links a { color: #ffffff8c; } .navbar-fade .nav-links a:hover, .navbar-fade .nav-links a.active { color: var(--white); } .navbar-fade.scrolled .nav-links a { color: #00000080; } .navbar-fade.scrolled .nav-links a:hover, .navbar-fade.scrolled .nav-links a.active { color: var(--black); } .navbar-fade .nav-ham span { background: var(--white); } .navbar-fade.scrolled .nav-ham span { background: var(--black); } /* Modifier for .navbar-fade pages whose hero has no dark image behind it (index): text/logo/hamburger stay dark from the start instead of the default white-fading-to-dark. The background/height fade-on-scroll transition from .navbar-fade is unchanged. */ .navbar-fade-light-hero .nav-logo-text { color: var(--black); } .navbar-fade-light-hero .nav-links a { color: #00000080; } .navbar-fade-light-hero .nav-links a:hover, .navbar-fade-light-hero .nav-links a.active { color: var(--black); } .navbar-fade-light-hero .nav-ham span { background: var(--black); } .navbar-solid { background: #0a0a0af7; backdrop-filter: blur(20px); border-bottom: 1px solid #ffffff14; } .navbar-solid.scrolled { box-shadow: 0 4px 32px #00000080; } .navbar-solid .nav-logo-text { color: var(--white); } .navbar-solid .nav-links a { color: #ffffff8c; } .navbar-solid .nav-links a:hover, .navbar-solid .nav-links a.active { color: var(--white); } .navbar-solid .nav-ham span { background: var(--white); } .navbar-light { background: #fafaf7f5; backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); box-shadow: 0 4px 24px #0000000f; } .navbar-light.scrolled { height: 64px; } .navbar-light .nav-logo-text { color: var(--black); } .navbar-light .nav-links a { color: #00000080; } .navbar-light .nav-links a:hover, .navbar-light .nav-links a.active { color: var(--black); } .navbar-light .nav-ham span { background: var(--black); } .nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; transition: opacity 0.2s; } .nav-logo:hover { opacity: 0.82; } .nav-logo img { height: 48px; width: auto; object-fit: contain; transition: height 0.4s var(--ease); } .navbar.scrolled .nav-logo img { height: 40px; } .nav-logo-text { font-family: var(--fh); font-size: 15px; font-weight: 900; letter-spacing: 1px; transition: color 0.4s; } .nav-logo-text span { color: var(--orange); } .nav-links { display: flex; align-items: center; gap: 2px; margin: 0; } .nav-links a { font-family: var(--fh); font-size: 13px; font-weight: 600; padding: 8px 15px; position: relative; text-decoration: none; transition: color 0.25s; } .nav-links a::after { content: ''; position: absolute; bottom: 3px; left: 15px; right: 15px; height: 1.5px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } .nav-cta-btn { background: var(--orange); color: var(--white); font-family: var(--fh); font-size: 12px; font-weight: 700; padding: 11px 22px; letter-spacing: 0.5px; text-decoration: none; transition: background 0.25s, transform 0.25s, box-shadow 0.25s; white-space: nowrap; } .nav-cta-btn:hover { background: var(--orange-dk); transform: translateY(-2px); box-shadow: 0 8px 20px #ff7a0047; } .nav-cta-btn:focus-visible, .btn-fm:focus-visible, .nav-links a:focus-visible, .ft-links a:focus-visible, .sb-nav a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* ── Hamburger trigger (Bootstrap's offcanvas has no built-in animated icon) ── */ .nav-ham { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-ham span { display: block; width: 22px; height: 1.5px; transition: all 0.3s var(--ease); } .nav-ham[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-ham[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .nav-ham[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── Mobile menu: Bootstrap Offcanvas, themed to the brand ── */ .offcanvas-fm .offcanvas-header { padding: 0 22px; height: 76px; border-bottom: 1px solid #ffffff0f; } .sb-logo { font-family: var(--fh); font-size: 14px; font-weight: 900; color: var(--white); letter-spacing: 1px; } .sb-logo span { color: var(--orange); } .offcanvas-fm .btn-close { transition: transform 0.3s; } .offcanvas-fm .btn-close:hover { transform: rotate(90deg); } .sb-nav { padding: 24px 14px; display: flex; flex-direction: column; gap: 2px; } .sb-nav a { font-family: var(--fh); font-size: 14px; font-weight: 600; color: #ffffff7a; padding: 13px 14px; text-decoration: none; transition: color 0.2s, padding-left 0.3s; display: block; } .sb-nav a:hover { color: var(--white); padding-left: 20px; } .sb-cta { margin: 8px 14px 28px; background: var(--orange); color: var(--white); font-family: var(--fh); font-size: 13px; font-weight: 700; padding: 15px; text-align: center; text-decoration: none; transition: background 0.25s; display: block; } .sb-cta:hover { background: var(--orange-dk); } .sb-section-label { font-family: var(--fh); font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #ffffff40; padding: 16px 14px 6px; } /* ── Nav dropdown ── */ .nav-dropdown-wrap { position: relative; } .nav-dropdown-trigger { display: flex; align-items: center; color: inherit; text-decoration: none; } .nav-dropdown-wrap::after { content: ''; position: absolute; top: 100%; left: -20px; right: -20px; height: 20px; } .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--white); border: 1px solid var(--border); box-shadow: 0 20px 60px #00000021; width: 280px; opacity: 0; pointer-events: none; margin-top: 12px; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); z-index: 200; } .nav-dropdown-wrap:hover .nav-dropdown { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); transition-delay: 0s; } .nav-dropdown-wrap:not(:hover) .nav-dropdown { transition-delay: 0.12s; } .nav-dropdown::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: var(--white); border-left: 1px solid var(--border); border-top: 1px solid var(--border); rotate: 45deg; } .nav-dropdown-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; color: inherit; text-decoration: none; transition: background 0.2s; border-bottom: 1px solid var(--border); } .nav-dropdown-item:last-child { border-bottom: none; } .nav-dropdown-item:hover { background: var(--orange-pale); } .nav-di-icon { width: 32px; height: 32px; background: var(--orange-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .nav-dropdown-item:hover .nav-di-icon { background: #ff7a0026; } .nav-di-title { font-family: var(--fh); font-size: 13px; font-weight: 700; color: var(--black); margin-bottom: 2px; } .nav-di-sub { font-size: 11px; color: var(--mid); } .nav-dropdown-wrap:hover .nav-dropdown-trigger svg { transform: rotate(180deg); } /* ── Buttons: Bootstrap .btn base, brand modifiers via --bs-btn-* ── */ .btn-fm { --bs-btn-font-family: var(--fh); --bs-btn-font-size: 13px; --bs-btn-font-weight: 700; --bs-btn-padding-x: 30px; --bs-btn-padding-y: 15px; --bs-btn-border-width: 0; display: inline-flex; align-items: center; gap: 9px; letter-spacing: 0.2px; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); white-space: nowrap; } .btn-fm svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; transition: transform 0.3s; flex-shrink: 0; } .btn-fm:hover svg { transform: translateX(4px); } .btn-fm-orange { --bs-btn-bg: var(--orange); --bs-btn-color: var(--white); --bs-btn-hover-bg: var(--orange-dk); --bs-btn-hover-color: var(--white); } .btn-fm-orange:hover { transform: translateY(-2px); box-shadow: 0 12px 32px #ff7a0047; } .btn-fm-outline { --bs-btn-bg: transparent; --bs-btn-color: var(--black); --bs-btn-border-width: 1.5px; --bs-btn-border-color: #00000040; --bs-btn-hover-bg: #0000000d; --bs-btn-hover-color: var(--black); --bs-btn-hover-border-color: var(--black); } .btn-fm-outline:hover { transform: translateY(-2px); } .btn-fm-outline-white { --bs-btn-bg: transparent; --bs-btn-color: var(--white); --bs-btn-border-width: 1.5px; --bs-btn-border-color: #ffffff47; --bs-btn-hover-bg: #ffffff14; --bs-btn-hover-color: var(--white); --bs-btn-hover-border-color: var(--white); } .btn-fm-outline-white:hover { transform: translateY(-2px); } .btn-fm-dark { --bs-btn-bg: #2a2a27; --bs-btn-color: var(--white); --bs-btn-hover-bg: #3a3a36; --bs-btn-hover-color: var(--white); } .btn-fm-dark:hover { transform: translateY(-2px); } .btn-fm-white { --bs-btn-bg: var(--white); --bs-btn-color: var(--black); --bs-btn-hover-bg: #f0f0f0; --bs-btn-hover-color: var(--black); } .btn-fm-white:hover { transform: translateY(-2px); box-shadow: 0 12px 32px #00000026; } .eyebrow { font-family: var(--fh); font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--orange); display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .eyebrow::before { content: ''; display: block; width: 24px; height: 2px; background: var(--orange); flex-shrink: 0; } .eyebrow.center { justify-content: center; } .eyebrow.center::before { display: none; } /* ── Footer ── */ .footer { background: var(--surface); padding: 80px 0 0; border-top: 1px solid var(--border); } .ft-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 60px; border-bottom: 1px solid var(--border); } .ft-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .ft-logo img { height: 40px; width: auto; object-fit: contain; filter: brightness(0); } .ft-tag { font-size: 13px; color: var(--mid); line-height: 1.72; max-width: 260px; margin-bottom: 24px; } .ft-soc { display: flex; gap: 7px; flex-wrap: wrap; } .ft-sl { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--white); display: flex; align-items: center; justify-content: center; transition: all 0.25s; } .ft-sl:hover { border-color: var(--orange); background: var(--orange-pale); transform: translateY(-2px); } .ft-sl svg { width: 13px; height: 13px; fill: #0006; transition: fill 0.25s; } .ft-sl:hover svg { fill: var(--orange); } .ft-ct { font-family: var(--fh); font-size: 10px; font-weight: 700; color: var(--black); letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 20px; } .ft-links { display: flex; flex-direction: column; gap: 10px; margin: 0; } .ft-links a { font-size: 13px; color: var(--mid); text-decoration: none; transition: color 0.2s, padding-left 0.25s; } .ft-links a:hover { color: var(--orange); padding-left: 4px; } .ft-ci { display: flex; gap: 10px; margin-bottom: 14px; } .ft-cic { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; } .ft-cic svg { width: 100%; height: 100%; stroke: var(--orange); fill: none; stroke-width: 2; } .ft-cit { font-size: 13px; color: var(--mid); line-height: 1.6; } .ft-cit a { color: var(--mid); text-decoration: none; transition: color 0.2s; } .ft-cit a:hover { color: var(--orange); } .ft-bot { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; gap: 14px; flex-wrap: wrap; } .ft-copy { font-size: 12px; color: #00000059; } .ft-bl { display: flex; gap: 20px; margin: 0; } .ft-bl a { font-size: 12px; color: #00000059; text-decoration: none; transition: color 0.2s; } .ft-bl a:hover { color: var(--orange); } .footer-bar { height: 3px; background: linear-gradient(90deg, var(--orange) 0%, #ff7a0026 60%, transparent 100%); } /* ── Cookie bar (no Bootstrap equivalent) ── */ .cookie-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 8000; background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -4px 24px #00000014; padding: 18px 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; transform: translateY(100%); transition: transform 0.5s var(--ease); } .cookie-bar.visible { transform: translateY(0); } .cookie-bar-text { font-size: 13px; color: var(--mid); line-height: 1.5; max-width: 640px; } .cookie-bar-text a { color: var(--orange-dk); text-decoration: underline; text-underline-offset: 2px; } .cookie-bar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .cookie-btn { font-family: var(--fh); font-size: 12px; font-weight: 700; padding: 10px 20px; cursor: pointer; border: none; transition: all 0.25s; white-space: nowrap; } .cookie-btn-accept { background: var(--orange); color: var(--white); } .cookie-btn-accept:hover { background: var(--orange-dk); } .cookie-btn-decline { background: transparent; color: var(--mid); border: 1px solid var(--border); } .cookie-btn-decline:hover { color: var(--black); border-color: #00000040; } /* ── WhatsApp float (no Bootstrap equivalent) ── */ @keyframes wa-pulse { 0%, 100% { box-shadow: 0 0 0 0 #25d3668c, 0 4px 20px #25d36661, 0 2px 8px #0000002e; } 50% { box-shadow: 0 0 0 12px #25d36600, 0 4px 24px #25d36673, 0 2px 8px #0000002e; } } .wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 3000; width: 56px; height: 56px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: wa-pulse 2.4s ease-in-out infinite; transition: transform 0.3s var(--ease); } .wa-float:hover { transform: scale(1.1) translateY(-3px); animation: none; box-shadow: 0 10px 36px #25d3668c, 0 4px 16px #00000038; } .wa-float:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; } .wa-float svg { width: 28px; height: 28px; fill: var(--white); } @media (width < 900px) { .nav-links, .nav-cta-btn { display: none; } .nav-ham { display: flex; } .container { padding: 0 24px; } } @media (width < 600px) { .navbar, .cookie-bar { padding: 0 24px; } .ft-top { grid-template-columns: 1fr; gap: 28px; } .ft-bot { flex-direction: column; align-items: flex-start; gap: 10px; } .wa-float { bottom: 20px; right: 20px; width: 50px; height: 50px; } .wa-float svg { width: 24px; height: 24px; } } @media (width < 1100px) { .ft-top { grid-template-columns: 1fr 1fr; gap: 36px; } } /* ── Small shared utilities (no Bootstrap equivalent at this exact value) ── */ .nav-chevron { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.5; margin-left: 4px; transition: transform 0.3s; display: inline-block; vertical-align: middle; } .nav-di-svg { width: 16px; height: 16px; stroke: var(--orange); fill: none; stroke-width: 2; } .gap-nav { gap: 12px; } .sb-nav-sub { padding-left: 28px; font-size: 13px; } .ft-bl a.active { color: var(--orange); } .text-accent { color: var(--orange); } .section-intro { text-align: center; max-width: 560px; margin: 0 auto 56px; } .section-title { font-family: var(--fh); font-size: clamp(28px, 3.5vw, 44px); font-weight: 900; color: var(--black); line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 12px; } .nav-dropdown-item.current { background: var(--orange-pale); }