/* legal-defense-deferred.css Below-fold styles for use-cases/legal-defense/index.html. Loaded with media="print" onload="this.media='all'" to avoid blocking LCP. Critical above-fold CSS (hero + proof bar) stays inline in the HTML . */ /* ===== SECTIONS ===== */ .section { max-width: var(--container-max, 1080px); margin: 0 auto; padding: 72px 24px; } .section-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-blue); margin-bottom: 12px; } .section-title { font-size: 2rem; font-weight: 800; color: var(--navy); margin-bottom: 16px; letter-spacing: -0.3px; } .section-desc { font-size: 1.05rem; color: var(--slate-light); margin-bottom: 40px; line-height: 1.7; } /* Comparison Table */ .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); margin-bottom: 24px; } .compare-table th { background: var(--navy); color: var(--white); font-weight: 600; font-size: 0.9rem; padding: 14px 20px; text-align: left; } .compare-table th:first-child { width: 36%; } .compare-table td { padding: 14px 20px; font-size: 0.9rem; border-bottom: 1px solid var(--light-gray); } .compare-table tr:last-child td { border-bottom: none; } .compare-table tr:hover td { background: var(--off-white); } .compare-table td.highlight-col { background: rgba(59,130,246,0.04); } .compare-table th.highlight-col { background: var(--accent-blue); } .check { color: var(--trust-green); font-weight: 700; } .cross { color: #DC2626; font-weight: 700; } .partial { color: #B45309; font-weight: 600; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap table { min-width: 640px; } /* ===== HOW IT WORKS ===== Base layout for the 3-step grid (formerly inherited from `.use-case-page .steps` / `.step` in core.css — now self-contained). */ .how-bg { background: var(--off-white); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .step { position: relative; background: var(--white); border-radius: 12px; padding: 2rem 1.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); text-align: center; } .step-number { width: 44px; height: 44px; background: var(--accent-blue); color: var(--white); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; margin: 0 auto 18px; } .step h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.625rem; } .step p { font-size: 0.9rem; line-height: 1.6; color: var(--slate-light); } /* ===== USE CASES GRID ===== */ .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .case-card { background: var(--white); border: 1px solid var(--light-gray); border-radius: 12px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .case-card:hover { border-color: var(--accent-blue); box-shadow: 0 4px 14px rgba(59,130,246,0.08); } .case-card-img { width: 100%; height: 180px; object-fit: cover; display: block; background: linear-gradient(135deg, var(--navy) 0%, #2d4170 100%); } .case-card-body { padding: 20px 24px 24px; } .case-card h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .case-card p { font-size: 0.9rem; color: var(--slate-light); line-height: 1.6; } .case-card-cta { display: block; text-align: center; background: var(--accent-blue, #3B82F6); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; margin-top: 12px; padding: 10px 24px; border-radius: 8px; transition: all 0.2s; } .case-card-cta:hover { background: #2563EB; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59,130,246,0.3); } .card-learn-more { display: block; text-align: center; color: var(--accent-blue, #3B82F6); font-weight: 600; font-size: 14px; text-decoration: none; margin-top: 20px; } .card-learn-more:hover { text-decoration: underline; } /* ===== CASE STUDIES ===== */ .casestudy-bg { background: var(--off-white); } /* Featured: image on top, full width */ .casestudy-featured { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 6px 20px rgba(0,0,0,0.05); margin-bottom: 24px; } .cs-img-wrap { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); } .casestudy-featured .cs-img-wrap { height: 420px; } .cs-img-wrap img { display: none; } .cs-img-wrap[data-bg] { background-size: cover; background-position: center; background-repeat: no-repeat; } .casestudy-secondary .cs-img-wrap[data-bg] { background-size: auto 140%; background-position: center center; } .cs-body { padding: 48px; display: flex; flex-direction: column; justify-content: center; } .cs-label { display: inline-block; background: var(--trust-green-bg); color: var(--trust-green); padding: 4px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; margin-bottom: 20px; width: fit-content; } .cs-body h3 { font-size: 1.6rem; font-weight: 800; color: var(--navy); margin-bottom: 16px; line-height: 1.25; } .cs-body p { font-size: 0.95rem; line-height: 1.7; color: var(--slate); margin-bottom: 12px; } .cs-stats { display: flex; gap: 32px; margin: 20px 0; padding: 20px 0; border-top: 1px solid var(--light-gray); border-bottom: 1px solid var(--light-gray); flex-wrap: wrap; } .cs-stat .val { font-size: 1.8rem; font-weight: 800; color: var(--accent-blue); } .cs-stat .lbl { font-size: 0.8rem; color: var(--slate-light); } .cs-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-blue); font-weight: 600; font-size: 0.9rem; text-decoration: none; margin-top: 8px; } .cs-link:hover { text-decoration: underline; } /* Secondary cards: stacked in a 2-col grid */ .casestudy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .casestudy-secondary { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.04); } .casestudy-secondary .cs-img-wrap { height: 300px; } .casestudy-secondary .cs-body { padding: 28px 32px 32px; } .casestudy-secondary .cs-body h3 { font-size: 1.2rem; } .casestudy-secondary .cs-stats { gap: 24px; margin: 16px 0; padding: 16px 0; } .casestudy-secondary .cs-stat .val { font-size: 1.4rem; } .casestudy-secondary .cs-body p { font-size: 0.9rem; } /* Image placeholder fallback */ .cs-img-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); font-weight: 700; font-size: 0.95rem; text-align: center; padding: 20px; pointer-events: none; } .cs-img-placeholder .ph-icon { font-size: 2rem; margin-bottom: 8px; opacity: 0.6; } .cs-img-placeholder .ph-label { font-size: 0.75rem; font-weight: 500; opacity: 0.5; margin-top: 6px; } .cs-img-wrap img.loaded + .cs-img-placeholder { display: none; } /* ===== ATTORNEY SECTION ===== */ .attorney-section { background: linear-gradient(165deg, var(--navy) 0%, var(--navy-light) 100%); color: var(--white); padding: 72px 0; } .attorney-inner { max-width: var(--container-max, 1080px); width: calc(100% - 2 * var(--container-pad, 24px)); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .attorney-inner h2 { font-size: 2rem; font-weight: 800; margin-bottom: 16px; letter-spacing: -0.3px; } .attorney-inner p { font-size: 1rem; opacity: 0.8; line-height: 1.7; margin-bottom: 16px; } .attorney-features { list-style: none; } .attorney-features li { padding: 10px 0; font-size: 0.95rem; padding-left: 28px; position: relative; opacity: 0.9; } .attorney-features li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent-blue); font-weight: 700; } /* ===== FINAL CTA ===== */ .final-cta { text-align: center; padding: 80px 24px; background: var(--off-white); } .final-cta h2 { font-size: 2.2rem; font-weight: 800; color: var(--navy); margin-bottom: 16px; letter-spacing: -0.3px; } .final-cta p { font-size: 1.1rem; color: var(--slate-light); line-height: 1.6; max-width: 540px; margin: 0 auto 32px; } .final-cta .subtext { margin-top: 16px; font-size: 0.9rem; color: var(--slate-light); } /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { .steps { grid-template-columns: 1fr; } .cases { grid-template-columns: repeat(2, 1fr); } .case-card-img { height: 150px; } .attorney-inner { grid-template-columns: 1fr; gap: 32px; } .casestudy-featured .cs-img-wrap { height: 240px; } .casestudy-featured .cs-body { padding: 32px; } .casestudy-grid { grid-template-columns: 1fr; } .casestudy-secondary .cs-img-wrap { height: 220px; } .section-title { font-size: 1.6rem; } } @media (max-width: 600px) { .section { padding: 48px 16px; } .cases { grid-template-columns: 1fr; } .case-card-img { height: 200px; } .compare-table th, .compare-table td { padding: 10px 12px; font-size: 0.8rem; } .cs-stats { gap: 20px; } .final-cta h2 { font-size: 1.6rem; } }