/* Tiny supplement to Tailwind — things Tailwind utilities don't cover cleanly: - Google Font imports (Suranna + Work Sans + JetBrains Mono) - Body defaults - Marquee mask gradient - Print rules (sticky off, dropdowns hidden) */ @import url("https://fonts.googleapis.com/css2?family=Suranna&family=Work+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"); html, body { background: #FAF7F1; color: #1A1A1A; font-family: "Work Sans", -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Suranna ships single-weight; lock weight to 400 for headings */ .font-display { font-weight: 400; } ::selection { background: #D7B97D; color: #0E1A30; } /* Reserve space for the fixed mobile call/text bar so it never covers content. Class is toggled on by MobileCallBar; only applies below lg. */ @media (max-width: 1023px) { body.pl-has-mobilebar { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); } } /* Marquee fades (Tailwind can't compose mask-image gradients cleanly) */ .marquee-fade { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); } @media (prefers-reduced-motion: reduce) { .marquee-fade { -webkit-mask-image: none; mask-image: none; } .animate-marquee, .animate-marquee-med, .animate-marquee-slow { animation: none !important; } } /* Homepage awards / credentials bar (template-parts/awards-bar.php). Self-contained so it does not depend on the purged Tailwind build: medallions are inline SVGs drawn in currentColor — we only set color, size, and the row layout here. */ .pl-awards { background-color: #0E1A30; /* navy-deep */ } .pl-awards__inner { max-width: 1200px; margin-inline: auto; padding: 2.5rem 1.25rem; } @media (min-width: 768px) { .pl-awards__inner { padding: 3.5rem 2rem; } } .pl-awards__grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 2rem; } .pl-medal { display: flex; justify-content: center; flex: 0 0 auto; } .pl-medal__svg { width: 7rem; height: 7rem; color: #D7B97D; /* brass-soft */ transition: color 0.2s ease; } @media (min-width: 640px) { .pl-medal__svg { width: 9rem; height: 9rem; } } @media (min-width: 1024px) { .pl-medal__svg { width: 10rem; height: 10rem; } } .pl-medal__svg:hover { color: #B08A4A; /* brass */ } /* Inline CTA button used in page content (e.g. Payments). */ .pl-btn { display: inline-flex; align-items: center; gap: 0.5rem; background-color: #14213D; /* navy */ color: #FAF7F1 !important; /* parchment */ font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none !important; padding: 0.875rem 1.5rem; border-radius: 0.25rem; transition: background-color 0.2s ease; } .pl-btn:hover { background-color: #0E1A30; /* navy-deep */ } /* Closing "Contact Us For … You Can Trust" CTA text block (template-parts/cta-contact-block.php). Old-site style: serif heading + descriptive paragraph + a linked free-consultation sentence. Self-contained so it does not depend on the purged Tailwind build. */ .pl-contact { background-color: #0E1A30; /* navy-deep */ color: #FAF7F1; /* parchment */ } .pl-contact__inner { max-width: 1200px; margin-inline: auto; padding: 3.5rem 1.25rem; } @media (min-width: 768px) { .pl-contact__inner { padding: 5rem 2rem; } } .pl-contact__body { max-width: 68ch; } .pl-contact__eyebrow { display: inline-block; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #D7B97D; /* brass-soft */ margin-bottom: 1rem; } .pl-contact__heading { font-family: "Suranna", Georgia, serif; font-weight: 400; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; color: #FAF7F1; margin: 0 0 1.25rem; } .pl-contact__text { font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 1.7; color: rgba(250, 247, 241, 0.82); margin: 0 0 1rem; } .pl-contact__text a { color: #D7B97D; /* brass-soft */ text-decoration: underline; text-decoration-color: rgba(215, 185, 125, 0.45); text-underline-offset: 4px; transition: color 0.2s ease; } .pl-contact__text a:hover { color: #FAF7F1; } .pl-contact__cta { margin: 2rem 0 0; } /* Print: collapse sticky nav, hide dropdowns, stop marquee */ @media print { @page { size: A4 portrait; margin: 1cm; } body { background: #fff; } .pl-sticky { position: static !important; } .pl-dropdown { display: none !important; } body.pl-has-mobilebar { padding-bottom: 0 !important; } .animate-marquee, .animate-marquee-med, .animate-marquee-slow { animation: none !important; } .marquee-fade { -webkit-mask-image: none; mask-image: none; max-height: none !important; overflow: visible !important; } } /* Smooth-scroll article TOC (single.php) */ html { scroll-behavior: smooth; } .article-prose h2, .article-prose h3 { scroll-margin-top: 6.5rem; } .pl-toc-link.is-active { color: #9a6a2f; font-weight: 600; border-left: 2px solid #9a6a2f; margin-left: -1rem; padding-left: calc(1rem - 2px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Case Results (case_study CPT: single-case_study.php, archive-case_study.php, template-parts/case-study-card.php, [case_results] shortcode). Self-contained so nothing depends on the purged Tailwind build. Success green #2F7D4F (tint #EAF3ED) is new here and harmonizes with the brass/navy palette. */ .pl-cs-pill { display: inline-flex; align-items: center; gap: 0.375rem; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em; color: #2F7D4F; background-color: #EAF3ED; border-radius: 999px; padding: 4px 12px; margin: 0 0 1.25rem; } .pl-cs-pill__check { width: 14px; height: 14px; flex-shrink: 0; } .pl-cs-summary { font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 1.7; color: rgba(250, 247, 241, 0.8); /* parchment/80 — only used on the navy hero */ max-width: 65ch; margin: 0; } .pl-cs-card { background-color: #fff; border: 1px solid rgba(14, 26, 48, 0.12); border-radius: 12px; padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 1px 2px rgba(14, 26, 48, 0.06); } .pl-cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 639px) { .pl-cs-stats { grid-template-columns: 1fr; } } .pl-cs-stat { background-color: #F7F5F0; border-radius: 8px; padding: 1.125rem 1.25rem; } .pl-cs-stat__label { display: block; font-family: "Work Sans", sans-serif; font-size: 13px; color: rgba(26, 26, 26, 0.55); margin-bottom: 0.375rem; } .pl-cs-stat__value { display: block; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: clamp(26px, 3vw, 30px); line-height: 1.15; color: #1A1A1A; } .pl-cs-stat--win .pl-cs-stat__value { color: #2F7D4F; } .pl-cs-bar { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(14, 26, 48, 0.12); } .pl-cs-bar__label { font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 15px; color: #1A1A1A; margin: 0 0 0.875rem; } .pl-cs-bar__track { height: 10px; width: 100%; background-color: #E8E4DC; border-radius: 999px; overflow: hidden; } .pl-cs-bar__fill { height: 100%; background-color: #2F7D4F; border-radius: 999px; } .pl-cs-bar__captions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; font-family: "Work Sans", sans-serif; font-size: 13px; color: rgba(26, 26, 26, 0.55); margin-top: 0.625rem; } .pl-cs-bar__caption--center { color: #2F7D4F; font-weight: 600; } .pl-cs-actions { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(14, 26, 48, 0.12); } .pl-cs-actions__title { font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 15px; color: #1A1A1A; margin: 0 0 1rem; } .pl-cs-actions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .pl-cs-actions li { display: flex; align-items: flex-start; gap: 10px; font-family: "Work Sans", sans-serif; font-size: 15px; line-height: 1.55; color: rgba(26, 26, 26, 0.75); } .pl-cs-actions__check { width: 18px; height: 18px; flex-shrink: 0; color: #2F7D4F; margin-top: 2px; } .pl-cs-body { margin-top: 2.5rem; } .pl-cs-disclaimer { font-family: "Work Sans", sans-serif; font-size: 13px; color: rgba(26, 26, 26, 0.55); max-width: 72ch; margin: 1.5rem 0 0; } .pl-cs-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 1024px) { .pl-cs-grid { grid-template-columns: repeat(2, 1fr); } } .pl-cs-card--grid { display: flex; flex-direction: column; align-items: flex-start; } .pl-cs-card__title { font-size: clamp(1.375rem, 2.5vw, 1.625rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.75rem; } .pl-cs-card__title a { color: #14213D; /* navy */ text-decoration: none; transition: color 0.2s ease; } .pl-cs-card__title a:hover { color: #9a6a2f; /* brass-deep */ } .pl-cs-card__summary { font-family: "Work Sans", sans-serif; font-size: 15px; line-height: 1.6; color: rgba(26, 26, 26, 0.75); margin: 0 0 1.25rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pl-cs-card__stats { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-bottom: 1.25rem; } .pl-cs-card__stat-label { display: block; font-family: "Work Sans", sans-serif; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(26, 26, 26, 0.55); margin-bottom: 0.125rem; } .pl-cs-card__stat-value { display: block; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 18px; color: #1A1A1A; } .pl-cs-card__stat--win .pl-cs-card__stat-value { color: #2F7D4F; } .pl-cs-card__link { display: inline-flex; align-items: center; gap: 0.375rem; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 13px; color: #14213D; /* navy */ text-decoration: none; margin-top: auto; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .pl-cs-card__link:hover { border-bottom-color: #B08A4A; /* brass */ } /* Case Studies page (page-case-studies.php). Same success green (#2F7D4F / #EAF3ED), tile (#F7F5F0) and card treatment as the .pl-cs-* Case Results components above, but laid out for the static outcome cards on /case-studies/ — badge, display headline, stat tiles, an optional savings bar, and the "What we did" note. Self-contained so nothing depends on the prebuilt Tailwind file. */ .pl-cases-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 1024px) { .pl-cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pl-case { display: flex; flex-direction: column; background-color: #fff; border: 1px solid rgba(14, 26, 48, 0.12); border-radius: 12px; padding: clamp(1.5rem, 3.5vw, 2.25rem); box-shadow: 0 1px 2px rgba(20, 33, 61, 0.06), 0 1px 1px rgba(20, 33, 61, 0.04); transition: box-shadow 0.2s ease; } .pl-case:hover { box-shadow: 0 8px 24px -12px rgba(20, 33, 61, 0.18); } .pl-case__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.375rem; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em; color: #2F7D4F; background-color: #EAF3ED; border-radius: 999px; padding: 4px 12px; margin: 0 0 1.125rem; } .pl-case__badge svg { width: 14px; height: 14px; flex-shrink: 0; } .pl-case__headline { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; color: #14213D; /* navy */ margin: 0 0 0.625rem; text-wrap: balance; } .pl-case__summary { font-family: "Work Sans", sans-serif; font-size: 15px; line-height: 1.6; color: rgba(26, 26, 26, 0.75); margin: 0 0 1.5rem; } .pl-case__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; /* stat row bottoms out so cards in a row stay aligned */ } .pl-case__stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 479px) { .pl-case__stats, .pl-case__stats--2 { grid-template-columns: 1fr; } } .pl-case__stat { background-color: #F7F5F0; border-radius: 8px; padding: 0.875rem 1rem; } .pl-case__stat-label { display: block; font-family: "Work Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(26, 26, 26, 0.55); margin-bottom: 0.3125rem; } .pl-case__stat-value { display: block; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.15; color: #1A1A1A; overflow-wrap: break-word; hyphens: auto; /* long text values ("Closed retroactively") hyphenate instead of breaking mid-word */ } .pl-case__stat--win .pl-case__stat-value { color: #2F7D4F; } /* Long text values ("Closed retroactively") — smaller type so words wrap whole. */ .pl-case__stat--sm .pl-case__stat-value { font-size: 15px; line-height: 1.3; hyphens: none; } .pl-case__bar { margin-top: 1.125rem; } .pl-case__bar-track { height: 10px; width: 100%; background-color: #E8E4DC; border-radius: 999px; overflow: hidden; } .pl-case__bar-fill { height: 100%; background-color: #2F7D4F; border-radius: 999px; } .pl-case__bar-labels { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; font-family: "Work Sans", sans-serif; font-size: 12.5px; color: rgba(26, 26, 26, 0.55); margin-top: 0.5rem; } .pl-case__bar-labels span:last-child { color: #2F7D4F; font-weight: 600; } .pl-case__did { font-family: "Work Sans", sans-serif; font-size: 14px; line-height: 1.6; color: rgba(26, 26, 26, 0.72); margin: 1.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(14, 26, 48, 0.12); } .pl-case__did strong { font-weight: 600; color: #1A1A1A; } /* Same type as .pl-cs-disclaimer, but runs the full container width under the card grid instead of the 72ch measure used on the /case-results/ pages. */ .pl-cases-disclaimer { font-family: "Work Sans", sans-serif; font-size: 13px; line-height: 1.5; color: rgba(26, 26, 26, 0.55); max-width: none; margin: 1.5rem 0 0; } /* ------------------------------------------------------------------ */ /* Contact page case-evaluation form (Contact Form 7) */ /* Matches the theme's parchment/navy/rule palette; CF7 markup can't */ /* carry Tailwind classes so it's styled here. */ /* ------------------------------------------------------------------ */ .wpcf7 { margin: 2.5rem 0 0; } .wpcf7 form.wpcf7-form { background: #fff; border: 1px solid rgb(217 210 194); border-radius: 8px; padding: 2rem; max-width: 640px; display: grid; gap: 1.1rem; } .wpcf7-form > p { margin: 0; } .wpcf7-form label { display: block; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; color: rgb(26 26 26); } .wpcf7-form .wpcf7-form-control-wrap { display: block; margin-top: 0.4rem; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form textarea { font-family: "Work Sans", sans-serif; font-size: 15px; font-weight: 400; color: rgb(26 26 26); background: #fff; border: 1px solid rgb(217 210 194); border-radius: 4px; padding: 0.65rem 0.75rem; width: 100%; } .wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: rgb(20 33 61); box-shadow: 0 0 0 2px rgb(20 33 61 / 0.1); } .wpcf7-form label:has(.wpcf7-acceptance) { font-weight: 400; font-size: 0.85rem; color: rgb(74 74 74); line-height: 1.6; } .wpcf7-form label:has(.wpcf7-acceptance) .wpcf7-form-control-wrap { display: inline; margin: 0; } .wpcf7-form .wpcf7-list-item { margin: 0 0.35rem 0 0; } .wpcf7-form .wpcf7-acceptance input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: rgb(20 33 61); vertical-align: -2px; } .wpcf7-form input[type="submit"] { font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 15px; color: rgb(250 247 241); background: rgb(20 33 61); border: 0; border-radius: 4px; padding: 0.9rem 1.5rem; cursor: pointer; justify-self: start; transition: background-color 0.2s; } .wpcf7-form input[type="submit"]:hover { background: rgb(14 26 48); } .wpcf7-form .wpcf7-spinner { margin: 0 0 0 0.75rem; } .wpcf7 .wpcf7-not-valid-tip { font-size: 0.78rem; color: #b3261e; margin-top: 0.25rem; } .wpcf7 .wpcf7-response-output { margin: 0; padding: 0.75rem 1rem; border-radius: 4px; border: 1px solid rgb(142 110 55); font-family: "Work Sans", sans-serif; font-size: 0.9rem; color: rgb(26 26 26); background: rgb(250 247 241); } /* Contact page (page-contact.php). Self-contained: tailwind.css is purged against the original HTML build, so arbitrary utilities written only in PHP would silently not exist. */ .plc-hero-lede { margin: 1.25rem 0 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.6; color: rgb(250 247 241 / 0.82); } .plc-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 1024px) { .plc-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 4rem; } .plc-aside { position: sticky; top: 7rem; } } .plc-main > .prose > *:first-child { margin-top: 0; } .plc-aside { display: flex; flex-direction: column; gap: 1.5rem; } .plc-card { background: #fff; border: 1px solid #E4DCCF; /* rule */ border-radius: 0.375rem; padding: 1.75rem; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04); } .plc-card__title { font-family: Suranna, Georgia, serif; font-weight: 400; font-size: 1.25rem; line-height: 1.25; color: #14213D; /* ink */ margin: 0 0 1.25rem; } .plc-dl { margin: 0; display: grid; grid-template-columns: 74px 1fr; gap: 0.85rem 1rem; } .plc-dl dt { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9a6a2f; /* brass-deep */ padding-top: 0.15rem; margin: 0; } .plc-dl dd { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: #3D4557; } .plc-dl dd a { color: #14213D; text-decoration: underline; text-underline-offset: 2px; } .plc-dl dd a:hover { color: #9a6a2f; } .plc-pre { white-space: pre-line; } .plc-card--steps { background: #FAF7F1; } /* parchment */ .plc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: plc; } .plc-steps li { display: flex; gap: 0.85rem; font-size: 0.9375rem; line-height: 1.55; color: #3D4557; } .plc-steps__n { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #14213D; color: #FAF7F1; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; } .plc-note { margin: 1.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid #E4DCCF; font-size: 0.875rem; line-height: 1.55; color: #6B7280; } .plc-card--badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; } .plc-card--badge img { width: 150px; height: auto; } .plc-badge__caption { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: #6B7280; } .plc-formnote { margin: 1.25rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: #6B7280; } /* About-page credentials band: 5 medallions across at desktop. Compiled tailwind.css orders .lg\:grid-cols-5 before .md\:grid-cols-3, so the md rule wins at >=1024px; this scoped rule restores the intended 5-up row. */ @media (min-width: 1024px) { .pl-badges-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Header fit below 1360px: the design kit's header row (logo + 5-item nav + button + phone) needs ~1260px, so on 1024–1359px laptops the phone number clipped off the right edge (client-reported). Compact the row in that band; below 1200px drop the phone link (number stays in the mobile menu + CTAs). */ @media (min-width: 1024px) and (max-width: 1359px) { .pl-hdr-in { gap: 1rem; padding-left: 1.5rem; padding-right: 1.5rem; } .pl-hdr-nav { gap: 1.125rem; } .pl-hdr-cta { gap: 0.875rem; } .pl-hdr-tel { font-size: 17px; padding-left: 0.875rem; } } @media (min-width: 1024px) and (max-width: 1199px) { .pl-hdr-tel { display: none; } } /* Tax Return Preparation page (single-practice_area-tax-preparation.php). Client page spec Aug 2026. Self-contained (.pl-txp-*) so nothing depends on the purged Tailwind build. Palette: navy #14213D / navy-deep #0E1A30 / parchment #FAF7F1 / brass #B08A4A / brass-soft #D7B97D / brass-deep #9a6a2f. */ .pl-txp-h1 { max-width: 26ch; } .pl-txp-btn { display: inline-flex; align-items: center; gap: 0.5rem; background-color: #FAF7F1; /* parchment on the navy hero */ color: #14213D !important; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none !important; padding: 0.875rem 1.5rem; border-radius: 0.25rem; transition: background-color 0.2s ease, color 0.2s ease; } .pl-txp-btn:hover { background-color: #D7B97D; /* brass-soft */ } /* Intro: prose + the two attorney photo cards (client note: existing photos). */ .pl-txp-intro { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 1024px) { .pl-txp-intro { grid-template-columns: 1fr 240px; gap: 2.5rem; } } .pl-txp-people { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-self: start; } @media (min-width: 1024px) { .pl-txp-people { grid-template-columns: 1fr; } } .pl-txp-person { display: block; background-color: #fff; border: 1px solid rgba(14, 26, 48, 0.12); border-radius: 0.375rem; overflow: hidden; text-decoration: none; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .pl-txp-person:hover { border-color: rgba(176, 138, 74, 0.5); box-shadow: 0 4px 14px rgba(14, 26, 48, 0.08); } .pl-txp-person img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; } .pl-txp-person__name { display: block; font-family: "Suranna", Georgia, serif; font-size: 17px; line-height: 1.25; color: #1A1A1A; padding: 0.75rem 0.875rem 0.125rem; } .pl-txp-person__role { display: block; font-family: "Work Sans", sans-serif; font-size: 12px; line-height: 1.4; color: rgba(26, 26, 26, 0.55); padding: 0 0.875rem 0.875rem; } /* Gold-bordered credential callout (spec: "sidebar or gold-bordered highlight block"). */ .pl-txp-cred { margin-top: 2.5rem; border: 1px solid #B08A4A; /* brass */ border-left-width: 4px; border-radius: 0.375rem; background-color: #FCFAF5; padding: 1.5rem 1.75rem; } .pl-txp-cred__label { display: inline-block; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #9a6a2f; /* brass-deep */ margin-bottom: 0.875rem; } .pl-txp-cred__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.5rem 2rem; } @media (min-width: 768px) { .pl-txp-cred__list { grid-template-columns: 1fr 1fr; } } .pl-txp-cred__list li { position: relative; padding-left: 1.375rem; font-family: "Work Sans", sans-serif; font-size: 14.5px; line-height: 1.5; color: #1A1A1A; } .pl-txp-cred__list li::before { content: ""; position: absolute; left: 0; top: 0.4em; width: 0.75rem; height: 0.75rem; background-color: transparent; border: 2px solid #B08A4A; border-radius: 999px; } /* Service icon cards (spec: "icon cards similar to home page practice area cards"). */ .pl-txp-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .pl-txp-cards { grid-template-columns: 1fr 1fr; } } .pl-txp-card { background-color: #fff; border: 1px solid rgba(14, 26, 48, 0.12); border-radius: 0.375rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(14, 26, 48, 0.05); } .pl-txp-card__icon { width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(14, 26, 48, 0.12); border-radius: 0.25rem; background-color: #FCFAF5; color: #9a6a2f; /* brass-deep */ margin-bottom: 1rem; } .pl-txp-card__icon svg { width: 1.5rem; height: 1.5rem; } .pl-txp-card h3 { font-family: "Suranna", Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; color: #1A1A1A; margin: 0 0 0.625rem; } .pl-txp-card p { font-family: "Work Sans", sans-serif; font-size: 14.5px; line-height: 1.6; color: rgba(26, 26, 26, 0.72); margin: 0 0 0.875rem; } .pl-txp-card p:last-child { margin-bottom: 0; } .pl-txp-card a { color: #14213D; text-decoration: underline; text-underline-offset: 3px; } .pl-txp-card a:hover { color: #9a6a2f; } .pl-txp-card__inc { border-top: 1px solid rgba(14, 26, 48, 0.1); padding-top: 0.75rem; font-size: 13px !important; color: rgba(26, 26, 26, 0.6) !important; } .pl-txp-card__inc strong { color: #9a6a2f; font-weight: 600; } /* Unique-positioning navy band (spec: "the most important differentiator — give it visual weight") with the 3-item stat bar at its foot. */ .pl-txp-pos { background-color: #0E1A30; /* navy-deep */ border-radius: 0.5rem; padding: clamp(1.75rem, 4vw, 3rem); } .pl-txp-pos__eyebrow { display: inline-block; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #D7B97D; /* brass-soft */ margin-bottom: 0.875rem; } .pl-txp-pos h2 { font-family: "Suranna", Georgia, serif; font-weight: 400; font-size: clamp(1.75rem, 4vw, 2.375rem); line-height: 1.12; letter-spacing: -0.02em; color: #FAF7F1; margin: 0 0 1.25rem; max-width: 24ch; } .pl-txp-pos p { font-family: "Work Sans", sans-serif; font-size: 16px; line-height: 1.7; color: rgba(250, 247, 241, 0.82); max-width: 65ch; margin: 0 0 1rem; } .pl-txp-pos a { color: #D7B97D; text-decoration: underline; text-decoration-color: rgba(215, 185, 125, 0.45); text-underline-offset: 4px; transition: color 0.2s ease; } .pl-txp-pos a:hover { color: #FAF7F1; } .pl-txp-quote { margin: 1.75rem 0; padding-left: 1.25rem; border-left: 3px solid #B08A4A; font-family: "Suranna", Georgia, serif; font-size: clamp(1.25rem, 2.5vw, 1.5rem); line-height: 1.4; color: #FAF7F1; } .pl-txp-quote cite { display: block; margin-top: 0.5rem; font-family: "Work Sans", sans-serif; font-style: normal; font-size: 13px; color: rgba(250, 247, 241, 0.6); } .pl-txp-stats { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(250, 247, 241, 0.15); } @media (min-width: 640px) { .pl-txp-stats { grid-template-columns: repeat(3, 1fr); } } .pl-txp-stat__value { display: block; font-family: "Suranna", Georgia, serif; font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.1; color: #D7B97D; /* brass-soft */ margin-bottom: 0.375rem; } .pl-txp-stat__label { display: block; font-family: "Work Sans", sans-serif; font-size: 13px; line-height: 1.5; color: rgba(250, 247, 241, 0.7); } /* The page's article wrapper is .prose-pl, and content.css (loaded after this file) styles .prose-pl h2/h3/p/a/ul/blockquote/img at equal specificity — which turned the navy band's text ink-on-navy and re-bulleted the credential list. These compounds out-rank content.css without touching load order. */ .prose-pl .pl-txp-pos h2 { font-family: "Suranna", Georgia, serif; font-size: clamp(1.75rem, 4vw, 2.375rem); line-height: 1.12; color: #FAF7F1; margin: 0 0 1.25rem; } .prose-pl .pl-txp-pos p { font-size: 16px; line-height: 1.7; color: rgba(250, 247, 241, 0.82); margin: 0 0 1rem; } .prose-pl .pl-txp-pos a { color: #D7B97D; text-decoration-color: rgba(215, 185, 125, 0.45); text-underline-offset: 4px; } .prose-pl .pl-txp-pos a:hover { color: #FAF7F1; } .prose-pl blockquote.pl-txp-quote { border-left: 3px solid #B08A4A; padding: 0.25rem 0 0.25rem 1.25rem; margin: 1.75rem 0; font-family: "Suranna", Georgia, serif; font-size: clamp(1.25rem, 2.5vw, 1.5rem); line-height: 1.4; color: #FAF7F1; } .prose-pl a.pl-txp-person { text-decoration: none; } .prose-pl .pl-txp-person img { margin: 0; border-radius: 0; } .prose-pl .pl-txp-card h3 { font-size: 21px; margin: 0 0 0.625rem; } .prose-pl .pl-txp-card p { font-size: 14.5px; line-height: 1.6; color: rgba(26, 26, 26, 0.72); margin: 0 0 0.875rem; } .prose-pl .pl-txp-card p:last-child { margin-bottom: 0; } .prose-pl .pl-txp-card__inc strong { color: #9a6a2f; } .prose-pl ul.pl-txp-cred__list { list-style: none; margin: 0; padding: 0; } .prose-pl .pl-txp-cred__list li { font-size: 14.5px; line-height: 1.5; color: #1A1A1A; margin: 0; padding-left: 1.375rem; } .prose-pl .pl-txp-cred__list li::marker { content: ""; }