/** * pf_quinquis - custom overrides, baked-in header, off-canvas menu, fluid body. * Brand blue #004B7E | eyebrow grey #A4A4A4 | strip grey #f5f5f5 | dark band #222 */ /* ---- prevent any horizontal overflow ---- */ html, body.site { max-width: 100%; overflow-x: hidden; } body.site { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; } /* ========================================================= HEADER (interior pages) — thin light-grey strip, in flow ========================================================= */ #sp-header.pf-header { position: relative; background: #f5f5f5; border-bottom: 1px solid #e8e8e8; z-index: 200; width: 100%; } .pf-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; padding: 8px 0; } .pf-header-left, .pf-header-right { flex: 1 1 0; min-width: 0; } .pf-availability { color: #A4A4A4; font-family: "Crimson Text", Georgia, serif; font-size: 15px; line-height: 1.3; letter-spacing: 1px; } .pf-header-logo { flex: 0 0 auto; text-align: center; } .pf-header-logo img { max-height: 48px; width: auto; display: inline-block; } .pf-header-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; } .pf-phone { color: #004B7E; font-family: "Crimson Text", Georgia, serif; font-size: 22px; font-weight: 700; white-space: nowrap; text-decoration: none; } .pf-phone:hover, .pf-phone:focus { color: #00365a; text-decoration: none; } .pf-phone .fa { font-size: 16px; margin-right: 5px; } #sp-header.pf-header #offcanvas-toggler { float: none; margin: 0; line-height: 1; font-size: 24px; color: #004B7E; display: inline-flex; align-items: center; cursor: pointer; } #sp-header.pf-header #offcanvas-toggler > i { color: #004B7E; } /* ========================================================= FLOATING ACCESSIBILITY (bottom-left) + COOKIE (bottom-right) CONTROLS ========================================================= */ .pf-fab { position: fixed; bottom: 20px; z-index: 1030; width: 48px; height: 48px; padding: 0; border: none; border-radius: 50%; background: #004B7E; color: #ffffff; font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); transition: background .2s, transform .2s; } .pf-fab > i { color: #ffffff; } .pf-fab:hover, .pf-fab:focus { background: #00365a; transform: translateY(-2px); } .pf-fab--a11y { left: 20px; } .pf-fab--consent { right: 20px; } /* Hide the plugins' own floating widgets — the FABs above replace them. oui4all is enabled site-wide via `show-oui4all` on so its panel can open; its native open button is out-specified here to stay hidden, leaving the .pf-fab as the only trigger. */ body.show-oui4all .oui4all-container .oui4all__openbtn { display: none !important; } .ck-icon { display: none !important; } /* Accessibility + cookie tools inside the mobile off-canvas menu (mobile only) */ .pf-offcanvas-tools { display: none; } .pf-offcanvas-tool { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 4px; background: none; border: none; border-top: 1px solid rgba(255, 255, 255, .15); color: inherit; font: inherit; font-size: 16px; cursor: pointer; text-align: left; } .pf-offcanvas-tool .fa { width: 22px; font-size: 20px; text-align: center; } /* ========================================================= HEADER (home page) — transparent overlay on the full-bleed hero ========================================================= */ #sp-header.pf-header-transparent { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: none; } #sp-header.pf-header-transparent .pf-availability { color: rgba(255, 255, 255, .85); } #sp-header.pf-header-transparent .pf-phone, #sp-header.pf-header-transparent .pf-phone:hover, #sp-header.pf-header-transparent #offcanvas-toggler, #sp-header.pf-header-transparent #offcanvas-toggler > i { color: #ffffff; } /* blue logo turned white for the transparent (home) header */ #sp-header.pf-header-transparent .pf-header-logo img { filter: brightness(0) invert(1); } /* ========================================================= MAIN BODY — full width (fluid); SPPB manages its own widths ========================================================= */ #sp-main-body { overflow: hidden; width: 100%; } #sp-main-body > .row { margin: 0; } #sp-main-body > .row > #sp-component { padding: 0; float: none; width: 100%; } /* ========================================================= OFF-CANVAS MENU — style the Joomla 4 mod_menu (.mod-menu) ========================================================= */ .offcanvas-menu { background: #fff; } .offcanvas-menu .offcanvas-inner { padding: 64px 32px 32px; } .offcanvas-menu ul.mod-menu, .offcanvas-menu ul.nav { list-style: none; margin: 0; padding: 0; } .offcanvas-menu ul.mod-menu li { position: relative; } .offcanvas-menu ul.mod-menu li a, .offcanvas-menu ul.mod-menu li span.nav-header { display: block; padding: 13px 0; color: #333; font-family: "Crimson Text", Georgia, serif; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid #ededed; transition: color .2s, padding-left .2s; } .offcanvas-menu ul.mod-menu li a:hover, .offcanvas-menu ul.mod-menu li a:focus, .offcanvas-menu ul.mod-menu li.current > a, .offcanvas-menu ul.mod-menu li.active > a { color: #004B7E; padding-left: 6px; } /* nested submenu */ .offcanvas-menu ul.mod-menu ul { list-style: none; margin: 0; padding-left: 14px; } .offcanvas-menu ul.mod-menu ul li a { font-size: 14px; letter-spacing: 1px; color: #666; } .close-offcanvas { background: #004B7E; } .scrollup { background: #004B7E; } /* ========================================================= FOOTER — template-defined columns on FUNERIS grey (#575757) ========================================================= */ #sp-footer.pf-footer { background: #575757; color: #e0e0e0; width: 100%; overflow: hidden; } .pf-footer-top { padding: 52px 0 42px; } .pf-footer-top > .container, .pf-copyright > .container { max-width: 1170px; margin: 0 auto; padding: 0 15px; } .pf-footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; align-items: start; } .pf-footer-col { min-width: 0; } /* column headings (module title / SPPB / custom H tags) */ #sp-footer .pf-footer-col h1, #sp-footer .pf-footer-col h2, #sp-footer .pf-footer-col h3, #sp-footer .pf-footer-col h4, #sp-footer .pf-footer-col .sppb-addon-title, #sp-footer .pf-footer-col .mod-menu__heading { color: #ffffff; font-family: "Crimson Text", Georgia, serif; font-size: 18px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .18); } #sp-footer ul { list-style: none; margin: 0; padding: 0; } #sp-footer li a, #sp-footer a { color: #d6d6d6; text-decoration: none; display: inline-block; padding: 5px 0; transition: color .2s, padding-left .2s; } #sp-footer li a:hover, #sp-footer a:hover { color: #ffffff; padding-left: 4px; text-decoration: none; } #sp-footer p { color: #d6d6d6; margin: 0 0 8px; line-height: 1.6; } /* FUNERIS logo / images blend into the grey background */ #sp-footer img { max-width: 100%; height: auto; } /* copyright bar — text far left, legal links far right, one line */ .pf-copyright { background: #4a4a4a; padding: 15px 0; } .pf-copyright > .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; } .pf-copyright p { margin: 0; color: #b9b9b9; font-size: 13px; letter-spacing: .3px; } .pf-copyright a { color: #cfcfcf; } .pf-legal-links { font-size: 12px; white-space: nowrap; } .pf-legal-links a { color: #cfcfcf; text-decoration: none; } .pf-legal-links a:hover { color: #ffffff; text-decoration: underline; } .pf-legal-links .pf-sep { color: #7c7c7c; margin: 0 9px; } /* footer responsive */ @media (max-width: 991px) { .pf-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } } @media (max-width: 575px) { .pf-footer-grid { grid-template-columns: 1fr; text-align: center; } #sp-footer .pf-footer-col h1, #sp-footer .pf-footer-col h2, #sp-footer .pf-footer-col h3, #sp-footer .pf-footer-col .sppb-addon-title { border-bottom: none; } .pf-copyright > .container { justify-content: center; text-align: center; } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 767px) { /* clean single-row mobile header: logo left, call-icon + burger right */ .pf-header-inner { flex-wrap: nowrap; justify-content: space-between; align-items: center; min-height: 56px; gap: 10px; text-align: left; } .pf-header-left { display: none; /* availability hidden on mobile */ } .pf-header-logo { flex: 1 1 auto; text-align: left; min-width: 0; } .pf-header-logo img { max-height: 40px; } .pf-header-right { flex: 0 0 auto; gap: 14px; } .pf-phone { font-size: 0; /* keep the call icon, drop the number text */ } .pf-phone .fa { font-size: 21px; margin: 0; } /* home header is a normal in-flow bar on mobile (no overlap on the hero) */ #sp-header.pf-header-transparent { position: relative; background: #f5f5f5; border-bottom: 1px solid #e8e8e8; } #sp-header.pf-header-transparent .pf-header-logo img { filter: none; } #sp-header.pf-header-transparent .pf-phone, #sp-header.pf-header-transparent #offcanvas-toggler, #sp-header.pf-header-transparent #offcanvas-toggler > i { color: #004B7E; } /* on mobile the corner FABs give way to entries inside the off-canvas menu */ .pf-fab { display: none; } .pf-offcanvas-tools { display: block; margin-top: 10px; } }