/* Personal Injury page additions. The base layout, typography, spacing and shared module components come from Modules.css. This file only adds the Personal Injury-specific visuals needed by the Figma/PDF design. */ .personal-injury-page { --pi-teal: #078c88; --pi-teal-dark: #045a58; --pi-teal-deep: #062f31; --pi-mint: #88d9c6; --pi-orange: #ff5b3b; --pi-text: #243235; --pi-muted: #5d696b; /* `clip` rather than `hidden`: `hidden` makes this a scroll container, which stops the sticky navbar sticking. basestyle.css clips on for the same reason. */ overflow-x: clip; } .personal-injury-page .hero-section { padding-top: 40px; background-image: linear-gradient(90deg, rgba(2, 23, 27, .95) 0%, rgba(2, 28, 31, .78) 42%, rgba(0, 102, 101, .20) 100%), url("./images/PersonalInjury/hero-bg.webp"); background-position: center; } .personal-injury-page .hero-content { max-width: 590px; } /* homestyle.css (loaded for the final-CTA component) ships its own unscoped .section-title and .hero-content h1 rules with a dark teal color, meant for a light-background hero elsewhere. Restore white text here so the heading stays readable against this page's dark hero background. */ .personal-injury-page .hero-content h1, .personal-injury-page .hero-section .section-title { color: #fff; } .personal-injury-page .hero-badges { text-transform: uppercase; } .personal-injury-page .hero-description { max-width: 590px; } .pi-hero-visual { min-height: 405px; margin-right: -70px; display: flex; align-items: center; justify-content: center; } .pi-hero-dashboard { position: relative; z-index: 2; width: min(100%, 720px); } .pi-hero-dashboard img { width: 100%; height: auto; filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .34)); } .pi-hero-pills { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .pi-pill { position: absolute; min-height: 26px; padding: 7px 13px 7px 10px; font-size: 7.5px; letter-spacing: .02em; } .pi-pill-attorney { top: 20px; left: 105px; } .pi-pill-lien { top: 145px; left: -5px; } .pi-pill-settlement { top: 18px; right: 40px; } .pi-pill-negotiation { bottom: 73px; left: 43px; } .pi-pill-payment { bottom: 54px; right: 48px; } .pi-pill-reporting { top: 143px; right: 0; } .personal-injury-page .pi-ordinary-section { padding: 65px 0; } /* .personal-injury-page .pi-ordinary-section .billgenix-fixes-content { background: linear-gradient(135deg, #188f8b, #096b68 55%, #07524f); } */ .pi-ordinary-image { max-width: 390px; margin-left: auto; padding: 22px; border-radius: 16px; background: #fff; box-shadow: 0 18px 38px rgba(0, 0, 0, .18); } .pi-ordinary-image img { width: 100% !important; height: auto; } /* Comparison */ .pi-compare-section { padding: 88px 0 92px; background: #fff; } /* Same lined heading treatment as .title-wrapper in homestyle.css: the divider lines run out to the viewport edges either side of the heading. */ .pi-section-title { display: flex; align-items: center; justify-content: center; gap: var(--heading-rule-gap); margin-bottom: 60px; text-align: center; width: 100vw; margin-left: calc(50% - 50vw); } .pi-section-title > span { flex: 1; width: auto; height: 1px; background: var(--heading-rule-color); } .pi-section-title h2 { flex-shrink: 0; max-width: 570px; margin: 0; /* Fallback color */ color: #269797; /* Gradient text */ background: linear-gradient( 181.19deg, #269797 1.02%, #0C3131 98.99% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; font-size: 36px; } .pi-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; /* gap: 0 26px; */ max-width: 980px; margin: 0 auto; } .pi-compare-card { overflow: hidden; border: 1px solid #d7dedd; border-radius: 41px; background: #fff; box-shadow: 0 13px 28px rgba(20, 68, 66, .10); } .pi-with-card { margin-top: -22px; border-color: #cfe3e0; box-shadow: 0 20px 38px rgba(6, 63, 60, .18); } .pi-compare-card h3 { margin: 0; padding: 26px 22px 20px; color: #fff; text-align: center; font-size: 27px; font-weight: 900; line-height: 114.99999999999999%; } .pi-without-card h3 { background: linear-gradient(90deg, #D9D9D9 0%, #FFFFFF 100%); color: #3a4142; } .pi-with-card h3 { background: linear-gradient(181.19deg, #269797 1.02%, #0C3131 98.99%); } .pi-compare-card ul { margin: 0; padding: 14px 25px 18px; list-style: none; } .pi-compare-card li { display: flex; gap: 11px; padding: 13px 0; color: #000000; font-size: 15px; line-height: 1.4; border-bottom: 1px solid #e2e7e7; } .pi-compare-card li:last-child { border-bottom: 0; } .pi-without-card i { color: #ff5262; } .pi-with-card i { color: #0a9e7d; } .pi-compare-card i { flex: 0 0 16px; margin-top: 2px; } /* Product screen showcase */ .pi-explore-section { position: relative; overflow: hidden; padding: 78px 0 62px; color: #fff; text-align: center; background: linear-gradient(rgba(1, 20, 24, .90), rgba(2, 58, 61, .72)), url("./images/PersonalInjury/hero-bg.webp") center / cover no-repeat; } .pi-explore-section > .container > p { margin-bottom: 3px; color: #fff; font-size: 13px; font-weight: 700; } .pi-explore-section h2 { margin-bottom: 28px; color: #fff; font-size: 31px; font-weight: 800; } .pi-screen-stage { position: relative; height: 335px; max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .pi-screen { position: absolute; border-radius: 10px; box-shadow: 0 20px 42px rgba(0, 0, 0, .38); } .pi-screen-main { z-index: 5; width: 64%; } .pi-screen-left, .pi-screen-right { z-index: 3; width: 48%; opacity: .72; } .pi-screen-left { left: 2%; } .pi-screen-right { right: 2%; } .pi-screen-far-left, .pi-screen-far-right { z-index: 1; width: 38%; opacity: .28; } .pi-screen-far-left { left: -8%; } .pi-screen-far-right { right: -8%; } .pi-screen-dots { display: flex; justify-content: center; gap: 7px; margin-top: 18px; } .pi-screen-dots span { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .42); } .pi-screen-dots .active { width: 21px; background: #fff; } /* Monitoring */ .pi-monitor-visual { position: relative; overflow: visible; padding: 38px 8px 22px; } .pi-monitor-visual > img { width: 100%; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .15)); } .pi-monitor-tag { position: absolute; display: flex; align-items: center; } .pi-monitor-tag-icon { position: relative; z-index: 2; display: grid; flex: none; place-items: center; width: 30px; height: 30px; color: var(--pi-teal-dark); font-size: 12px; background: #fff; border-radius: 50%; box-shadow: 0 6px 14px rgba(16, 87, 82, .18); } .pi-monitor-tag-label { position: relative; z-index: 1; margin-left: -13px; padding: 7px 12px 7px 20px; color: #0d7771; font-size: 9px; font-weight: 800; white-space: nowrap; border: 1px solid #79c7bf; border-radius: 999px; background: #fff; box-shadow: 0 6px 14px rgba(16, 87, 82, .12); } .pi-tag-case { top: 0; left: 12%; } .pi-tag-attorney { top: 4%; right: 4%; } .pi-tag-provider { bottom: 24%; left: -2%; } .pi-tag-settlement { bottom: 25%; right: -4%; } .pi-tag-lien { bottom: 2%; left: 42%; } /* Modules.css hides .case-bg-text globally (.cleaner-stat-bg, .case-bg-text { display: none }), but this page's "35%" stat needs its dotted accent texture visible, per the Figma reference. */ .personal-injury-page .case-bg-text, .personal-injury-page .cleaner-stat-bg { display: block; } .personal-injury-page .case-record-stat strong::after, .personal-injury-page .stat-number-wrap strong::after { content: none; } /* Integration process map */ .pi-process-map { position: relative; min-height: 460px; max-width: 560px; margin: 0 auto; } .pi-process-map-image { min-height: 0; display: flex; align-items: center; justify-content: center; } .pi-process-map-image img { width: 100%; max-width: 480px; height: auto; } .pi-process-arrows { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; } .pi-process-center { position: absolute; top: 50%; left: 50%; z-index: 2; width: 135px; height: 135px; transform: translate(-50%, -50%); display: grid; place-items: center; color: #fff; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #15928b, #033c3c 70%); box-shadow: 0 15px 30px rgba(0, 79, 75, .22); } .pi-process-center span { font-size: 18px; font-weight: 800; } .pi-process-step { position: absolute; z-index: 3; width: 160px; display: flex; flex-direction: column; align-items: center; gap: 7px; } .pi-process-badge { display: inline-block; width: max-content; max-width: none; padding: 7px 14px; color: #fff; text-align: center; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; border-radius: 999px; background: linear-gradient(145deg, #118d87, #04534f); box-shadow: 0 8px 16px rgba(0, 70, 66, .25); } .pi-process-card { width: 100%; padding: 9px 11px; text-align: center; background: #fff; border: 1px solid #dce6e5; border-radius: 10px; box-shadow: 0 8px 16px rgba(16, 87, 82, .12); } .pi-process-card small { display: block; color: #56605f; font-size: 8px; line-height: 1.3; } .step-intake { top: 0; left: 50%; transform: translateX(-50%); } .step-attorney { top: 96px; right: 0; } .step-lien { bottom: 78px; right: 0; } .step-monitor { bottom: 0; left: 50%; transform: translateX(-50%); } .step-negotiate { bottom: 78px; left: 0; } .step-payment { top: 96px; left: 0; } /* Capabilities */ .personal-injury-page .pi-capabilities-section .case-card-outer { justify-content: center; } .pi-capability-bottom { margin-top: 5px; } /* Testimonial */ .personal-injury-page .pi-testimonial-section { margin-top: 65px; } .personal-injury-page .pi-testimonial-section .testimonial-image { object-position: center top; } /* testimonial-person.webp is a full-resolution 832x1027 photo, unlike the other module pages' pre-cropped 260x275 testimonial images, so it needs an explicit size + crop to match that same plain (non-circular) layout. */ .personal-injury-page .testimonial-image { width: 260px; height: 275px; object-fit: cover; object-position: center top; } /* Providers */ .pi-providers-section { position: relative; padding: 95px 0 105px; background: #fff; } .pi-providers-heading { max-width: 860px; margin: 0 auto 28px; text-align: center; } .pi-providers-heading > p { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; color: #4c5b5d; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; } /* .pi-providers-heading > p span { flex-shrink: 1; width: min(24vw, 260px); height: 1px; background: #9ca9aa; } */ .pi-providers-heading h2 { margin-bottom: 13px; color: #087773; background: linear-gradient(181.19deg, #269797 1.02%, #0C3131 98.99%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 32px; font-weight: 900; line-height: 1.12; } .pi-providers-intro { color: var(--pi-muted); font-size: 15px; line-height: 1.55; } .pi-provider-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 675px; margin: 0 auto 55px; } .pi-provider-tags span { padding: 6px 13px; color: #535353; font-size: 16px; font-weight: 600px; border: 1px solid #007878; border-radius: 999px; background: #fff; } .pi-provider-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px 22px; width: 1100px; max-width: 100%; margin: 0 auto; } .pi-provider-grid article { position: relative; width: 100%; max-width: 260px; height: 220px; padding: 50px 20px 24px; box-sizing: border-box; opacity: 1; transform: rotate(0deg); color: #fff; text-align: center; border-top-left-radius: 41px; border-bottom-right-radius: 35px; background: linear-gradient( 181.19deg, #269797 1.02%, #0C3131 98.99% ); box-shadow: 0 14px 28px rgba(4, 82, 77, 0.16); } .pi-provider-grid article:nth-child(n+5) { transform: translateX(52%); } .pi-provider-icon { position: absolute; top: -32px; left: 50%; width: 68px; height: 68px; padding: 7px; transform: translateX(-50%); overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 8px 17px rgba(0, 0, 0, .12); } .pi-provider-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; } .pi-provider-grid h3 { /* min-height: 45px; */ /* margin-bottom: 10px; */ color: #fff; font-size: 18px; font-weight: 900; line-height: 114.99999999999999%; } .pi-provider-grid p { margin: 0; color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 1.5; } /* Recovery path */ .pi-path-wrap { max-width: 510px; margin: 0 auto; text-align: center; } .pi-path-wrap > p { margin-bottom: 12px; color: #3b4f50; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; } .pi-path-list { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; } .pi-path-list li { padding: 11px 16px; color: #fff; font-size: 12px; font-weight: 700; border-radius: 4px; background: #1e765f; } .pi-path-list li:nth-child(1) { width: 100%; } .pi-path-list li:nth-child(2) { width: 89%; background: #278e73; } .pi-path-list li:nth-child(3) { width: 78%; background: #36a187; } .pi-path-list li:nth-child(4) { width: 68%; background: #4bb69a; } .pi-path-list li:nth-child(5) { width: 58%; background: #69cbb2; } .pi-path-list li:nth-child(6) { width: 48%; color: #184942; background: #96dfcf; } .pi-path-list li:nth-child(7) { width: 39%; color: #184942; font-size: 10px; background: #c6efe5; } .pi-path-list li:nth-child(5) { color: #184942; } .pi-support-image img { width: 100%; max-width: 460px; } /* FAQ */ .pi-faq-section { position: relative; overflow: hidden; padding: 85px 0 92px; background: #f7faf9; } .pi-faq-section::before, .pi-faq-section::after { content: ""; position: absolute; width: 380px; height: 380px; opacity: .10; background: repeating-linear-gradient(35deg, #0d9d94 0 1px, transparent 1px 10px); } .pi-faq-section::before { left: -240px; bottom: -220px; } .pi-faq-section::after { right: -230px; top: 40px; } .pi-faq-section h2 { position: relative; z-index: 1; margin-bottom: 34px; text-align: center; font-family: 'DM Sans', sans-serif; font-weight: 900; font-size: 36px; line-height: 115%; letter-spacing: 0%; background: linear-gradient(181.19deg, #269797 1.02%, #0C3131 98.99%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .pi-faq-list { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; } .pi-faq-list details { margin-bottom: 11px; padding: 0 20px; border: 1px solid #ccd5d5; border-radius: 9px; background: #fff; box-shadow: 0 5px 14px rgba(28, 81, 77, .06); } .pi-faq-list summary { position: relative; padding: 18px 32px 18px 0; color: #24514e; font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; } .pi-faq-list summary::-webkit-details-marker { display: none; } .pi-faq-list summary::after { content: "+"; position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 20px; font-weight: 400; } .pi-faq-list details[open] summary::after { content: "×"; } .pi-faq-list details p { margin: 0; padding: 0 0 18px; color: #5d696b; font-size: 13px; line-height: 1.55; } .personal-injury-page .module-navigation-content { justify-content: space-between; } @media (max-width: 1199px) { .pi-hero-visual { margin-right: -20px; } .pi-provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pi-provider-grid article:nth-child(n+5) { transform: none; } .pi-provider-grid article:last-child { grid-column: 2; } } @media (max-width: 991px) { /* Lines are dropped entirely below 767px, so stop bleeding the wrapper past the container here (matches Modules.css / homestyle.css). */ .pi-section-title { width: auto; margin-left: 0; } .personal-injury-page .hero-section { padding-top: 55px; } .pi-hero-visual { min-height: 360px; margin: 25px 0 0; } .pi-pill-attorney { left: 18%; } .pi-pill-lien { left: 3%; } .pi-pill-reporting { right: 3%; } .pi-ordinary-image { margin: 35px auto 0; } .pi-screen-stage { height: 285px; } .pi-screen-main { width: 78%; } .pi-monitor-visual { max-width: 600px; margin: 0 auto 35px; } .pi-process-map { margin-top: 45px; } .pi-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pi-provider-grid article:last-child { grid-column: auto; } .pi-path-wrap { margin-top: 45px; } } @media (max-width: 767px) { .pi-hero-visual { min-height: 310px; } .pi-pill { display: none; } .pi-section-title > span { display: none; } .pi-section-title h2, .pi-explore-section h2, .pi-providers-heading h2, .pi-faq-section h2 { font-size: 27px; } .pi-compare-grid { grid-template-columns: 1fr; gap: 22px 0; } .pi-with-card { margin-top: 0; } .pi-screen-stage { height: 225px; } .pi-screen-main { width: 94%; } .pi-screen-left, .pi-screen-right { width: 68%; } .pi-screen-far-left, .pi-screen-far-right { display: none; } .pi-monitor-tag-label { font-size: 7px; padding: 6px 8px 6px 16px; } .pi-monitor-tag-icon { width: 24px; height: 24px; font-size: 10px; } .pi-process-map { min-height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; } .pi-process-arrows, .pi-process-center { display: none; } .pi-process-step { position: static; width: auto; min-height: 86px; transform: none !important; display: flex; flex-direction: column; justify-content: center; } .pi-provider-grid { grid-template-columns: 1fr; gap: 55px; } .pi-provider-grid article { min-height: 220px; } .pi-path-list li:nth-child(n) { width: 100%; } .personal-injury-page .module-navigation-content { justify-content: center; } } @media (max-width: 480px) { .pi-hero-visual { min-height: 250px; } .pi-compare-section, .pi-providers-section, .pi-faq-section { padding: 65px 0; } .pi-screen-stage { height: 175px; } .pi-process-map { grid-template-columns: 1fr; } .pi-monitor-tag { display: none; } .pi-providers-heading > p span { display: none; } } /* Final alignment with the shared module testimonial / CTA components */ body.patient-case .pi-testimonial-section { margin-top: 115px; padding-top: 90px; } body.patient-case .pi-testimonial-section .testimonial-image-wrap { top: -178px; width: 178px; height: 178px; } body.patient-case .pi-testimonial-section .testimonial-image { position: static; left: auto; top: auto; width: 178px; height: 178px; transform: none; object-fit: cover; object-position: center 18%; border: 10px solid #8bd5c8; border-radius: 50%; background: #fff; } .pi-provider-icon img { padding: 4px; object-fit: contain; } .personal-injury-page .pi-final-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; padding: 16px 32px; color: #fff; background: linear-gradient(0deg, #FF4B1B 0%, #F46F4B 100%); border-radius: 999px; font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px rgba(255, 91, 59, .28); transition: transform .2s ease, background .2s ease; } .personal-injury-page .pi-final-cta:hover { color: #fff; background: linear-gradient(0deg, #FF4B1B 0%, #F46F4B 100%); transform: translateY(-2px); } .personal-injury-page .pi-integrations-section .pi-final-cta { width: 100%; } .personal-injury-page .module-navigation-content { max-width: 760px; margin: 0 auto; justify-content: center; gap: 20px; } @media (max-width: 767px) { body.patient-case .pi-testimonial-section { margin-top: 90px; padding-top: 75px; } body.patient-case .pi-testimonial-section .testimonial-image-wrap { top: -145px; width: 145px; height: 145px; } body.patient-case .pi-testimonial-section .testimonial-image { width: 145px; height: 145px; border-width: 8px; } } /* "Revenue control" CTA panels (reused in two places on this page: the "SEE IT IN YOUR WORKFLOW" walkthrough prompt and the final "Recover More. Wait Less." CTA). This component normally ships from homestyle.css, but that stylesheet also carries unrelated unscoped rules that clash with this page (see the hero heading fix above), so it isn't linked here - these are just the rules this page actually needs, scoped locally. */ .personal-injury-page .revenue-control-section { position: relative; padding: 60px 0 68px; background: url("images/about-us/module-demo.png") no-repeat center / cover; overflow: hidden; } .personal-injury-page .revenue-control-section .container { position: relative; z-index: 2; } .personal-injury-page .revenue-control-section h2 { margin: 0 0 32px; color: #fff; font-size: 36px; line-height: 1.18; font-weight: 900; text-align: center; text-transform: capitalize; } .personal-injury-page .revenue-badges { display: inline-flex; align-items: center; justify-content: center; width: 420px; max-width: 100%; min-height: 58px; padding: 16px 24px; margin-bottom: 18px; color: #fff; background: linear-gradient(180deg, #2F2F2F, #171717); border-radius: 999px; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: .2px; text-transform: uppercase; box-shadow: 0 12px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .18); } .personal-injury-page .revenue-control-panel { width: min(950px, 100%); margin: 0 auto; padding: 48px 64px 50px; border-radius: 24px; background: rgba(6, 49, 49, .86); color: #fff; text-align: center; } .personal-injury-page .revenue-control-panel p { max-width: 820px; margin: 0 auto 16px; color: rgba(255, 255, 255, .95); font-size: 16px; line-height: 1.35; } .personal-injury-page .revenue-control-cta { width: min(745px, 100%); min-height: 56px; margin: 0 auto; padding: 13px 22px; border-radius: 8px; background: #fff; color: #111; text-decoration: none; font-size: 18px; line-height: 1.2; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; transition: .3s ease; } .personal-injury-page .revenue-control-cta:hover { color: #007878; transform: translateY(-2px); } @media (max-width: 767px) { .personal-injury-page .revenue-control-panel { padding: 36px 24px 40px; } .personal-injury-page .revenue-control-section h2 { font-size: 27px; } .personal-injury-page .revenue-badges { width: 320px; } } /* Download PDF button (Print > Save as PDF trigger) .pi-print-btn { position: fixed; right: 26px; bottom: 26px; z-index: 1000; display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; color: #fff; font-size: 14px; font-weight: 700; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--pi-teal), var(--pi-teal-dark)); box-shadow: 0 12px 26px rgba(4, 60, 58, .28); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; } .pi-print-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px rgba(4, 60, 58, .34); } .pi-print-btn i { font-size: 15px; } */ @media (max-width: 480px) { .pi-print-btn { right: 16px; bottom: 16px; padding: 11px 16px; font-size: 12px; } } /* Print-friendly version of this page (browser Print / Save as PDF) */ @media print { @page { size: A4; margin: 12mm; } body.personal-injury-page, body.personal-injury-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; } /* Chrome that only makes sense on screen */ body.personal-injury-page .no-print, body.personal-injury-page .custom-navbar, body.personal-injury-page .mobile-menu, body.personal-injury-page .site-footer .footer-newsletter, body.personal-injury-page .site-footer .footer-socials, body.personal-injury-page .module-navigation, body.personal-injury-page .footer-legal { display: none !important; } body.personal-injury-page { background: #fff !important; } body.personal-injury-page .site-footer { position: static !important; } /* Avoid a section/card splitting across two pages */ body.personal-injury-page section, body.personal-injury-page .pi-compare-card, body.personal-injury-page .case-operation-box, body.personal-injury-page .pi-provider-grid article, body.personal-injury-page .pi-faq-list details, body.personal-injury-page .pi-process-step { break-inside: avoid; page-break-inside: avoid; } /* Drop shadows/filters that only add value on a lit screen */ body.personal-injury-page img, body.personal-injury-page .pi-hero-dashboard img, body.personal-injury-page .pi-monitor-visual > img, body.personal-injury-page .pi-screen, body.personal-injury-page .pi-ordinary-image, body.personal-injury-page .pi-compare-grid, body.personal-injury-page .case-record-stat, body.personal-injury-page .cleaner-billing-stat { box-shadow: none !important; filter: none !important; } /* Reflow decorative, absolutely-positioned overlays so nothing gets clipped or hidden once the page is paginated */ body.personal-injury-page .pi-hero-pills, body.personal-injury-page .pi-monitor-tag, body.personal-injury-page .pi-process-arrows { display: none !important; } body.personal-injury-page .pi-process-map { position: static; min-height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; max-width: 100%; } body.personal-injury-page .pi-process-center { display: none; } body.personal-injury-page .pi-process-step { position: static; width: auto; transform: none !important; } body.personal-injury-page .pi-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.personal-injury-page .pi-provider-grid article { transform: none !important; } body.personal-injury-page .pi-screen-stage { height: auto; flex-wrap: wrap; } body.personal-injury-page .pi-screen { position: static; display: inline-block; width: 45%; margin: 4px; opacity: 1 !important; } /* Expand every FAQ answer so the printed page reads as content, not a collapsed accordion */ body.personal-injury-page .pi-faq-list details, body.personal-injury-page .pi-faq-list details > * { display: block !important; } body.personal-injury-page .pi-faq-list summary::after { display: none; } } /* ================================ Showcase carousel ("See Billgenix In Action" pattern from the Home page, reused here for Personal Injury screens only) ================================ */ .billgenix-showcase { position: relative; overflow: visible; width: 100%; min-height: 606px; background-color: #00171a; background-image: url("images/faq-bg.png"); background-position: center; background-size: cover; } .showcase-container { position: relative; z-index: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 48px 20px 20px; } .showcase-title { position: relative; z-index: 20; margin: 25px; color: #ffffff; font-size: clamp(30px, 3vw, 36px); font-weight: 700; line-height: 1.2; text-align: center; letter-spacing: 0.2px; } .showcase-carousel { position: relative; width: min(1240px, calc(100% - 120px)); max-width: 1240px; margin: 50px auto 0; } .carousel-stage { position: relative; width: 100%; height: 430px; } .carousel-slide { position: absolute; top: 50%; left: 50%; width: clamp(680px, 56vw, 820px); aspect-ratio: 2 / 1; margin: 0; overflow: hidden; border-radius: 36px; opacity: 0; pointer-events: none; transform-origin: center center; transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease, filter 500ms ease; } .carousel-slide img { display: block; width: 100%; height: auto; border-radius: 30px; cursor: zoom-in; } .carousel-slide[data-position="0"] { z-index: 5; opacity: 1; pointer-events: auto; filter: none; transform: translate(-50%, -50%) scale(1); } .carousel-slide[data-position="-1"] { z-index: 4; opacity: .72; filter: brightness(.9); transform: translate(calc(-50% - 220px), -50%) scale(.82); } .carousel-slide[data-position="1"] { z-index: 4; opacity: .72; filter: brightness(.9); transform: translate(calc(-50% + 220px), -50%) scale(.82); } .carousel-slide[data-position="-2"] { z-index: 3; opacity: .42; filter: brightness(.8); transform: translate(calc(-50% - 345px), -50%) scale(.67); } .carousel-slide[data-position="2"] { z-index: 3; opacity: .42; filter: brightness(.8); transform: translate(calc(-50% + 345px), -50%) scale(.67); } .carousel-slide:not( [data-position="-2"], [data-position="-1"], [data-position="0"], [data-position="1"], [data-position="2"] ) { opacity: 0; pointer-events: none; } .carousel-navigation { position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 12px; } .carousel-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 34px; padding: 0; border: 0; color: rgba(255, 255, 255, .48); background: transparent; font-size: 25px; font-weight: 300; line-height: 1; cursor: pointer; transition: color 200ms ease, transform 200ms ease; } .carousel-arrow:hover { color: #ffffff; } .carousel-arrow:active { transform: scale(.88); } .carousel-arrow:focus-visible, .carousel-dot:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; } .carousel-dots { display: flex; align-items: center; justify-content: center; gap: 12px; } .carousel-dot { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .25); cursor: pointer; transition: background-color 250ms ease, transform 250ms ease; } .carousel-dot:hover { background: rgba(255, 255, 255, .55); } .carousel-dot.active { background: #ffffff; transform: scale(1.25); } /* Image preview modal */ .showcase-image-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 30px; background: rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .showcase-image-modal.active { opacity: 1; visibility: visible; } .showcase-modal-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .showcase-modal-content img { display: block; max-width: 95%; max-height: 90vh; object-fit: contain; border-radius: 10px; transform: scale(.92); transition: transform .3s ease; } .showcase-image-modal.active .showcase-modal-content img { transform: scale(1); } .showcase-modal-close { position: absolute; top: 20px; right: 25px; z-index: 2; width: 45px; height: 45px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #ffffff; font-size: 24px; cursor: pointer; transition: background .2s ease; } .showcase-modal-close:hover { background: rgba(255, 255, 255, .3); } body.showcase-modal-open { overflow: hidden; } @media (max-width: 991px) { .carousel-stage { height: 360px; margin-top: 35px; } .carousel-slide { width: min(76vw, 700px); border-radius: 28px; } .carousel-slide[data-position="-1"] { transform: translate(-100%, -50%) scale(.78); } .carousel-slide[data-position="1"] { transform: translate(0%, -50%) scale(.78); } .carousel-slide[data-position="-2"], .carousel-slide[data-position="2"] { opacity: 0; } } @media (max-width: 767px) { .billgenix-showcase, .showcase-container { min-height: 440px; } .showcase-container { padding: 34px 12px 18px; } .showcase-title { font-size: 27px; } .showcase-carousel { width: calc(100% - 32px); margin-top: 18px; } .showcase-image-modal { padding: 15px; } .showcase-modal-close { top: 12px; right: 12px; } .showcase-modal-content img { max-width: 100%; max-height: 85vh; } } @media (max-width: 576px) { .carousel-stage { height: 245px; margin-top: 25px; } .carousel-slide { width: 88vw; border-radius: 18px; } .carousel-slide[data-position="-1"], .carousel-slide[data-position="1"], .carousel-slide[data-position="-2"], .carousel-slide[data-position="2"] { opacity: 0; pointer-events: none; } .carousel-navigation { gap: 16px; } .carousel-dots { gap: 9px; } .carousel-dot { width: 10px; height: 10px; } .carousel-arrow { font-size: 29px; } } @media (prefers-reduced-motion: reduce) { .carousel-slide, .carousel-arrow, .carousel-dot { transition: none; } }