/** * THL Practice Area template — component styles. * CONSTANT across all sites; consumes only variables from thl-tokens.css. */ /* ================= Base / layout ================= */ .thl-pa { width: 100%; font-family: var(--thl-font-body); color: var(--thl-color-text); font-size: 16px; line-height: 1.65; } .thl-pa__wrap { max-width: var(--thl-maxw); margin: 0 auto; padding: 0 20px; } .thl-pa__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--thl-sidebar-w); gap: var(--thl-gap); padding: 32px 0 48px; } /* The sidebar itself scrolls (it's taller than the viewport — pinning the whole aside would hide its lower sections). Instead its LAST child, .thl-sb-sticky (TOC + CTA card together), pins once the reader scrolls past the sidebar stack, so both stay in view for the rest of the article. When the viewport is short the TOC shrinks and its list scrolls internally — the CTA card never gets pushed out. */ .thl-sidebar { align-self: stretch; display: flex; flex-direction: column; gap: 20px; min-width: 0; } .thl-sb-sticky { position: sticky; top: var(--thl-sticky-top, 120px); display: flex; flex-direction: column; gap: 20px; min-width: 0; max-height: calc(100vh - var(--thl-sticky-top, 120px) - 16px); } .thl-sb-sticky .thl-toc { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; } .thl-sb-sticky .thl-toc__list { flex: 0 1 auto; min-height: 0; } .thl-sb-sticky .thl-sb-cta { flex: 0 0 auto; } /* position:sticky dies when ANY ancestor has overflow!=visible (hidden/auto create a scroll container). Astra and several themes put overflow:hidden on the .site wrapper. On template pages only, lift it — using overflow-x:clip, which clips like hidden but does NOT create a scroll container, so sticky keeps working and stray off-canvas elements can't cause horizontal scroll. */ body.thl-template .site, body.thl-template .hfeed, body.thl-template #page { overflow: visible; overflow-x: clip; } body.thl-template { overflow: visible; overflow-x: clip; } /* Flex-column items default to min-width:auto — a Swiper inside the sidebar then feeds its own width back into its resize observer and runs away. Pin sidebar children to the column width. */ .thl-sidebar > * { min-width: 0; max-width: 100%; } @media (max-width: 900px) { .thl-pa__grid { grid-template-columns: 1fr; } .thl-sb-sticky { position: static; max-height: none; } } .thl-pa h1, .thl-pa h2, .thl-pa h3, .thl-pa h4 { font-family: var(--thl-font-heading); color: var(--thl-color-heading); line-height: 1.2; } .thl-h { font-weight: 800; margin: 1.6em 0 .6em; font-size: 1.7rem; } h3.thl-h { font-size: 1.3rem; } /* Enforce our heading font + scale over the theme's global h2/h3 styles (Astra/Elementor kit force bio-sans @40px onto bare h2). Scoped to THL pages via body.thl-template so the rest of the site is untouched. */ body.thl-template .thl-pa .thl-h, body.thl-template .thl-pa .thl-prose h2, body.thl-template .thl-pa .thl-prose h3, body.thl-template .thl-hero__h1 { font-family: var(--thl-font-heading) !important; } body.thl-template .thl-pa .thl-h { font-size: 1.7rem; font-weight: 800; line-height: 1.25; color: var(--thl-color-heading) !important; } body.thl-template .thl-pa h3.thl-h { font-size: 1.3rem; } body.thl-template .thl-pa .thl-prose h2 { font-size: 1.5rem; } body.thl-template .thl-pa .thl-prose h3 { font-size: 1.2rem; } /* Restore white headings on dark / colored bands (the enforced color above would otherwise make .thl-h--invert headings dark & illegible). */ body.thl-template .thl-pa .thl-h--invert, body.thl-template .thl-dark .thl-h, body.thl-template .thl-testimonials .thl-h { color: var(--thl-color-heading-invert) !important; } /* Kit-proofing: on pages where Elementor adds its .elementor-kit-N body class, the kit's `.elementor-kit-N h3 {…}` rules (0,1,1) outrank our single-class component headings (0,1,0) — force font/size/color for every heading the template styles. */ body.thl-template .thl-sb-cta__title, body.thl-template .thl-faq2__q, body.thl-template .thl-sb-about h4, body.thl-template .thl-sb-guides h4, body.thl-template .thl-card h3, body.thl-template .thl-takeaways h3 { font-family: var(--thl-font-heading) !important; } body.thl-template .thl-sb-cta__title { font-size: 1.5rem !important; line-height: 1.3; color: var(--thl-color-heading-invert) !important; } body.thl-template .thl-faq2__q { font-size: 1.7rem !important; line-height: 1.25; color: var(--thl-color-heading) !important; } body.thl-template .thl-sb-about h4, body.thl-template .thl-sb-guides h4 { font-size: 1.35rem !important; color: var(--thl-color-heading) !important; } body.thl-template .thl-card h3 { font-size: 1.12rem !important; line-height: 1.3; } .thl-h--invert, .thl-dark .thl-h { color: var(--thl-color-heading-invert); } .thl-pa__content { min-width: 0; } .thl-pa__content h2, .thl-pa__content h3 { scroll-margin-top: calc(var(--thl-sticky-top, 120px) + 16px); } .thl-pa__content a { color: var(--thl-color-accent); } .thl-prose > * + * { margin-top: 1em; } .thl-prose img { max-width: 100%; height: auto; border-radius: var(--thl-radius); } /* Dark sections */ .thl-dark { background: var(--thl-color-dark); color: var(--thl-color-heading-invert); } .thl-dark h1, .thl-dark h2, .thl-dark h3, .thl-dark h4 { color: var(--thl-color-heading-invert); } /* ================= Buttons ================= */ .thl-btn { border-radius: var(--thl-radius); font-family: var(--thl-font-body); font-weight: 600; padding: .85em 1.4em; display: inline-flex; gap: .5em; align-items: center; text-decoration: none; font-size: 1rem; line-height: 1.2; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .thl-btn--primary { background: var(--thl-cta-grad); color: var(--thl-color-primary-text); border: 0; } .thl-btn--primary:hover { background: var(--thl-color-primary-hover); color: #fff; } .thl-btn--ghost { background: transparent; color: var(--thl-color-heading); border: 1px solid var(--thl-color-border); } .thl-dark .thl-btn--ghost, .thl-sb-card .thl-btn--ghost { color: var(--thl-color-heading-invert); } .thl-btn--ghost:hover { border-color: var(--thl-color-primary); color: var(--thl-color-primary); } .thl-cta-pair { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0; } /* ================= Hero ================= */ .thl-hero { padding: 56px 0 40px; position: relative; } .thl-hero__inner { max-width: var(--thl-maxw); margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; } /* Location image hero — LIGHT treatment matching the live site: pastel artwork sits on the right, a white wash on the left keeps dark text legible. Wash strength is tokenized (--thl-hero-wash) so it adapts per brand/image. */ .thl-hero--image { background-size: cover; background-position: right center; background-repeat: no-repeat; background-color: #fff; min-height: 440px; display: flex; align-items: center; } /* Inner must span full width so its max-width box left-aligns with the page content below (in a flex parent a shrink-wrapped child would center-indent). */ .thl-hero__inner { width: 100%; } @media (max-width: 700px) { .thl-hero--image { min-height: 340px; } } .thl-hero--image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255,255,255,var(--thl-hero-wash, .94)) 0%, rgba(255,255,255,calc(var(--thl-hero-wash, .94) * .9)) 40%, rgba(255,255,255,.12) 100%); } /* Light hero => dark text (overrides the default dark-hero inversion). */ .thl-hero--image, .thl-hero--image .thl-hero__h1 { color: var(--thl-color-heading); } .thl-hero--image .thl-hero__sub, .thl-hero--image .thl-hero__trust { color: var(--thl-color-text); } .thl-hero--image .thl-btn--ghost { color: var(--thl-color-heading); border-color: var(--thl-color-border); } .thl-hero--image .thl-trustbar { border-top-color: rgba(0,0,0,.14); color: var(--thl-color-text); } /* Light hero: the yellow stat numbers wash out — use brand blue for contrast. */ .thl-hero--image .thl-trustbar__stat strong { color: var(--thl-color-primary); } .thl-hero--image .thl-trustbar__google { color: var(--thl-color-heading); } @media (max-width: 700px) { /* On narrow screens the artwork is mostly off-frame — near-solid wash. */ .thl-hero--image::before { background: rgba(255,255,255,calc(var(--thl-hero-wash, .94) + .03)); } } .thl-hero__h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; margin: 0 0 .4em; } .thl-hero__sub { font-size: 1.15rem; max-width: 720px; margin: 0 0 .6em; opacity: .92; } .thl-hero__trust { margin: 0 0 1em; } .thl-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .thl-trustbar { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; font-size: .95rem; } .thl-trustbar__stat strong { color: var(--thl-color-star); margin-right: .35em; } .thl-stars { color: var(--thl-color-star); } /* Office address line (demoted from a migrated heading) */ .thl-office-address { font-family: var(--thl-font-heading); font-size: 1.35rem; font-weight: 700; color: var(--thl-color-heading); margin: .2em 0 1em; } /* ================= Breadcrumb / meta ================= */ .thl-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.08); font-size: .875rem; } .thl-breadcrumb a { color: var(--thl-color-accent); text-decoration: none; } .thl-meta__updated { opacity: .75; } /* ================= Lists ================= */ .thl-list--number { list-style: none; counter-reset: thl; padding-left: 0; } .thl-list--number li { counter-increment: thl; position: relative; padding-left: 2.6em; margin-bottom: .8em; } .thl-list--number li::before { content: counter(thl); position: absolute; left: 0; top: -.1em; font-family: var(--thl-font-heading); font-weight: 800; color: var(--thl-color-accent); font-size: 1.4em; } .thl-list--bullet { padding-left: 1.2em; } .thl-list--bullet li { margin-bottom: .5em; } .thl-list--bullet li::marker { content: "\203A "; color: var(--thl-color-accent); font-weight: 700; } /* ================= Key takeaways ================= */ .thl-takeaways { background: rgba(0,0,0,.035); border-left: 4px solid var(--thl-color-accent); border-radius: 0 var(--thl-radius) var(--thl-radius) 0; padding: 20px 24px; margin: 1.6em 0; } .thl-takeaways .thl-h { margin-top: 0; font-size: 1.25rem; } /* ================= Video / promo ================= */ .thl-video { margin: 1.6em 0; } .thl-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--thl-radius); } .thl-video figcaption { font-size: .875rem; opacity: .75; margin-top: .5em; } .thl-promo { position: relative; border-radius: var(--thl-radius); overflow: hidden; margin: 1.6em 0; transform: skewX(-2deg); } .thl-promo > a, .thl-promo img { display: block; width: 100%; transform: skewX(2deg) scale(1.05); } .thl-promo__hl { position: absolute; left: 24px; bottom: 18px; color: #fff; font-family: var(--thl-font-heading); font-weight: 800; font-size: 1.3rem; text-shadow: 0 1px 8px rgba(0,0,0,.6); transform: skewX(2deg); } /* ================= FAQ accordion ================= */ .thl-faq { margin: 1.6em 0; } .thl-acc__item { border: 1px solid rgba(0,0,0,.1); border-radius: var(--thl-radius); margin-bottom: 10px; overflow: hidden; } .thl-acc__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: none; border: 0; padding: 16px 18px; font-family: var(--thl-font-body); font-size: 1.05rem; font-weight: 600; color: var(--thl-color-heading); text-align: left; cursor: pointer; } .thl-acc__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding: 0 18px; } .thl-acc__item.is-open .thl-acc__a { max-height: 1000px; padding-bottom: 16px; } .thl-acc__caret { transition: transform .2s; flex: 0 0 auto; line-height: 0; } .thl-acc__item.is-open .thl-acc__caret { transform: rotate(180deg); } /* ================= Sidebar widgets ================= */ .thl-sb-card { border-radius: var(--thl-radius); padding: 24px; } .thl-sb-card h3 { margin: 0 0 14px; font-size: 1.2rem; } .thl-sb-card .thl-cta-pair, .thl-sb-card .thl-btn { margin: 0 0 8px; } .thl-sb-card .thl-btn { width: 100%; justify-content: center; } .thl-sb-stats { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); font-size: .9rem; } .thl-breadcrumb .thl-crumb-home { display: inline-block; vertical-align: -2.5px; } /* Content images: width/height attrs reserve space (CLS); keep ratio when scaled */ .thl-pa__content img { max-width: 100%; height: auto; } /* Article text matches the site's editorial size (live site body copy is 18px) */ .thl-pa__content .thl-prose { font-size: var(--thl-prose-size, 18px); } /* Native video embeds: force a sane 16:9 box — Astra's .ast-oembed-container aspect styles don't load on template pages, letting iframes balloon. */ .thl-prose .ast-oembed-container { position: relative; height: auto !important; padding: 0 !important; aspect-ratio: 16 / 9; margin: 1.5em 0; border-radius: var(--thl-radius); overflow: hidden; background: #000; } .thl-prose .ast-oembed-container > iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } .thl-prose > iframe[src*="youtube"], .thl-prose p > iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--thl-radius); } /* ---- Magazine treatment: numbered steps + H3 card grids (auto-generated) ---- */ .thl-steps { margin: 1.7em 0; display: flex; flex-direction: column; } .thl-step { display: flex; gap: 18px; position: relative; padding-bottom: 26px; } .thl-step::before { content: ""; position: absolute; left: 21px; top: 48px; bottom: 6px; width: 2px; background: linear-gradient(180deg, rgba(144,112,81,.45), rgba(144,112,81,.1)); } .thl-step:last-child { padding-bottom: 6px; } .thl-step:last-child::before { display: none; } .thl-step__num { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--thl-font-heading); font-weight: 700; font-size: 1.2rem; color: var(--thl-color-dark); background: linear-gradient(135deg, var(--thl-color-star), #e9c418); box-shadow: 0 4px 10px rgba(0,0,0,.16); } .thl-step__body { flex: 1; min-width: 0; padding-top: 7px; } body.thl-template .thl-pa .thl-step__body h3 { margin: 0 0 6px !important; font-size: 22px !important; } .thl-step__body p { margin: 0 0 .7em; } .thl-step__body :last-child { margin-bottom: 0; } .thl-h3grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.7em 0; } .thl-h3card { border: 1px solid rgba(0,0,0,.1); border-left: 3px solid var(--thl-color-accent); border-radius: 10px; background: #fff; padding: 18px 20px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.045); transition: transform .18s ease, box-shadow .18s ease; } .thl-h3card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.1); } body.thl-template .thl-pa .thl-h3card h3 { margin: 0 0 8px !important; font-size: 20px !important; line-height: 1.3; } .thl-h3card p, .thl-h3card li { font-size: .93em; } .thl-h3card p { margin: 0 0 .6em; } .thl-h3card :last-child { margin-bottom: 0; } .thl-h3card ul { margin: .4em 0 0; } @media (max-width: 760px) { .thl-h3grid { grid-template-columns: 1fr; gap: 12px; } .thl-step { gap: 13px; padding-bottom: 20px; } .thl-step__num { width: 38px; height: 38px; font-size: 1.05rem; } .thl-step::before { left: 18px; top: 42px; } } /* Prose bullets match the branded list-block chevrons (migrated ULs have no class) */ .thl-prose ul:not([class]) { padding-left: 1.2em; } .thl-prose ul:not([class]) > li { margin-bottom: .5em; } .thl-prose ul:not([class]) > li::marker { content: "\203A "; color: var(--thl-color-accent); font-weight: 700; } /* ---- Related Topics: auto silo chips (children / parent+siblings) ---- */ .thl-topics { margin: 2.4em 0 0; } .thl-topics .thl-h { margin: 0 0 14px; } .thl-topics__list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .thl-topics__list li { margin: 0; padding: 0; } .thl-topics__list li::marker { content: none; } .thl-pa .thl-topics__list a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border-radius: 999px; border: 1px solid rgba(144,112,81,.5); background: #fff; color: var(--thl-color-accent); font-weight: 600; font-size: .95rem; line-height: 1.25; text-decoration: none; transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; } .thl-pa .thl-topics__list a::after { content: "\2192"; opacity: .65; transition: transform .15s ease; } .thl-pa .thl-topics__list a:hover { background: var(--thl-color-accent); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.14); } .thl-pa .thl-topics__list a:hover::after { transform: translateX(3px); } /* ---- Mobile "On This Page" TOC (details) + mobile sticky contact bar ---- */ .thl-toc-mobile { display: none; } .thl-mobilebar { display: none; } @media (max-width: 900px) { .thl-toc-mobile { display: block; margin: 0 0 24px; border: 1px solid rgba(0,0,0,.12); border-radius: var(--thl-radius); background: #fff; overflow: hidden; } .thl-toc-mobile summary { list-style: none; cursor: pointer; font-family: var(--thl-font-heading); font-weight: 700; font-size: 1.18rem; color: #fff; background: var(--thl-color-accent); padding: 12px 40px 12px 16px; position: relative; } .thl-toc-mobile summary::-webkit-details-marker { display: none; } .thl-toc-mobile summary::after { content: "\203A"; position: absolute; right: 18px; top: 50%; transform: translateY(-55%) rotate(90deg); transition: transform .2s ease; font-size: 1.3em; } .thl-toc-mobile[open] summary::after { transform: translateY(-45%) rotate(-90deg); } .thl-toc-mobile__list { display: flex; flex-direction: column; padding: 6px 0; max-height: 320px; overflow-y: auto; } body.thl-template .thl-toc-mobile__list a { padding: 10px 16px; font-size: .93rem; line-height: 1.35; color: var(--thl-color-text); text-decoration: none; border-top: 1px solid rgba(0,0,0,.05); } body.thl-template .thl-toc-mobile__list a:first-child { border-top: 0; } body.thl-template .thl-toc-mobile__list a:hover { color: var(--thl-color-accent); background: rgba(0,0,0,.03); } .thl-sidebar .thl-toc { display: none; } /* stacked below content on mobile — redundant */ /* Floating "On This Page" button + bottom sheet */ .thl-tocfab { display: flex; align-items: center; justify-content: center; position: fixed; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 9989; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: var(--thl-color-dark); color: var(--thl-color-star); box-shadow: 0 6px 16px rgba(0,0,0,.32); cursor: pointer; padding: 0; } .thl-tocfab[hidden] { display: none; } .thl-tocsheet { position: fixed; inset: 0; z-index: 9995; } .thl-tocsheet[hidden] { display: none; } .thl-tocsheet__backdrop { position: absolute; inset: 0; background: rgba(10,12,40,.55); } .thl-tocsheet__panel { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 16px 16px 0 0; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 -10px 30px rgba(0,0,0,.28); padding-bottom: env(safe-area-inset-bottom); } .thl-tocsheet__head { display: flex; align-items: center; justify-content: space-between; font-family: var(--thl-font-heading); font-weight: 700; font-size: 19px; color: var(--thl-color-heading); padding: 14px 18px 12px; border-bottom: 1px solid rgba(0,0,0,.08); } .thl-tocsheet__close { all: unset; box-sizing: border-box; cursor: pointer; font-size: 26px; line-height: 1; padding: 0 6px; color: var(--thl-color-text); } .thl-tocsheet__list { overflow-y: auto; padding: 6px 0 12px; } body.thl-template .thl-tocsheet__list a { display: block; padding: 12px 18px; font-size: 15px; line-height: 1.4; color: var(--thl-color-text); text-decoration: none; border-left: 3px solid transparent; border-bottom: 1px solid rgba(0,0,0,.05); } body.thl-template .thl-tocsheet__list a:last-child { border-bottom: 0; } body.thl-template .thl-tocsheet__list a:hover, body.thl-template .thl-tocsheet__list a:active { color: var(--thl-color-accent); border-left-color: var(--thl-color-accent); background: rgba(0,0,0,.03); } .thl-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; gap: 8px; background: var(--thl-color-dark); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(0,0,0,.22); } body.thl-template { padding-bottom: 76px; } /* keep page end reachable above the bar */ body.thl-template a.thl-mobilebar__call, body.thl-template a.thl-mobilebar__cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px; border-radius: 8px; font-weight: 700; font-size: .98rem; line-height: 1; text-decoration: none; } body.thl-template a.thl-mobilebar__call { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.35); } body.thl-template a.thl-mobilebar__cta { background: var(--thl-color-primary); color: var(--thl-color-primary-text); border: 1px solid transparent; } } /* Hero trustbar: rotating featured case results (grid-stacked slides, fade) */ .thl-trustbar__rotator { display: inline-grid; align-items: baseline; } .thl-trustbar__slide { grid-area: 1 / 1; opacity: 0; transition: opacity .45s ease; white-space: nowrap; } .thl-trustbar__slide.is-active { opacity: 1; } .thl-toc { border: 1px solid rgba(0,0,0,.1); border-radius: var(--thl-radius); overflow: hidden; background: #fff; } .thl-toc__header { background: var(--thl-color-accent); color: #fff; font-family: var(--thl-font-heading); font-weight: 700; padding: 13px 16px; font-size: 1.35rem; } .thl-toc__list { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; } .thl-toc__link { display: block; padding: 9px 16px; font-family: var(--thl-font-body); font-size: .9rem; line-height: 1.35; color: var(--thl-color-text); text-decoration: none; border-left: 3px solid transparent; transition: background .12s, border-color .12s, color .12s; } .thl-toc__link:hover { background: rgba(0,0,0,.04); color: var(--thl-color-accent); } .thl-toc__link.is-active { border-left-color: var(--thl-color-accent); color: var(--thl-color-accent); font-weight: 600; background: rgba(127,51,61,.06); } .thl-toc__link + .thl-toc__link { border-top: 1px solid rgba(0,0,0,.06); } .thl-sb-results { border-radius: var(--thl-radius); background: rgba(0,0,0,.035); padding: 20px; overflow: hidden; } .thl-sb-results__slide { display: flex; flex-direction: column; gap: 4px; text-align: center; } .thl-sb-results__slide strong { font-family: var(--thl-font-heading); font-size: 1.6rem; color: var(--thl-color-accent); } .thl-sb-results__slide em { font-style: normal; font-weight: 600; } .thl-sb-results__slide p { font-size: .9rem; margin: 0; opacity: .8; } .thl-sb-about, .thl-sb-guides { border: 1px solid rgba(0,0,0,.1); border-radius: var(--thl-radius); padding: 18px 20px; } .thl-sb-about h4, .thl-sb-guides h4 { margin: 0 0 10px; } .thl-sb-form { border: 1px solid rgba(0,0,0,.1); border-radius: var(--thl-radius); padding: 20px; scroll-margin-top: 110px; } /* ================= Filter pills ================= */ .thl-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; } .thl-tag { border: 1px solid rgba(255,255,255,.35); background: transparent; color: inherit; font-family: var(--thl-font-body); font-size: .875rem; padding: .45em 1em; border-radius: 999px; cursor: pointer; transition: background .15s ease; } .thl-tag:hover { border-color: #fff; } .thl-tag--active { background: var(--thl-color-accent); border-color: var(--thl-color-accent); color: #fff; } .thl-card__eyebrow { display: inline-block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--thl-color-accent); font-weight: 700; margin-bottom: 6px; } /* ================= Carousels / cards ================= */ .thl-related, .thl-offices { padding: 56px 0; margin-top: 40px; } .thl-news { padding: 40px 0 20px; } .thl-related .thl-h, .thl-news .thl-h, .thl-offices .thl-h { margin-top: 0; } .thl-card { background: #fff; border-radius: var(--thl-radius); padding: 22px; box-sizing: border-box; height: auto; } .thl-dark .thl-card { background: var(--thl-color-dark-2); } .thl-card h3 { font-size: 1.1rem; margin: 0; } .thl-card h3 a { color: inherit; text-decoration: none; } .thl-card h3 a:hover { color: var(--thl-color-primary); } .thl-dark .thl-card h3 a { color: var(--thl-color-heading-invert); } .thl-card--news .thl-card__thumb img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--thl-radius); margin-bottom: 12px; } .thl-related__swiper, .thl-news__swiper, .thl-testimonials__swiper { position: relative; } /* Some builders (Elementor pages) load their own Swiper CSS where .swiper-slide{height:100%} — inside flex theme containers that inflates slides to the full article height. Pin OUR carousels to natural sizing, same as Elementor does for its own widgets. */ .thl-pa .swiper-wrapper { height: auto; } .thl-pa .swiper-slide { height: auto; } .thl-pa .swiper-button-prev, .thl-pa .swiper-button-next { color: var(--thl-color-primary); } .thl-pa .swiper-button-prev::after, .thl-pa .swiper-button-next::after { font-size: 26px; } /* ================= Testimonials band ================= */ .thl-testimonials { background: var(--thl-color-accent); color: #fff; padding: 56px 0; } .thl-review { background: rgba(255,255,255,.08); border-radius: var(--thl-radius); padding: 26px; box-sizing: border-box; height: auto; } .thl-review__stars { color: var(--thl-color-star); letter-spacing: 2px; } .thl-review__author { font-weight: 700; } .thl-review__body { font-size: .98rem; line-height: 1.6; } /* ================= Offices ================= */ .thl-offices__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin-top: 10px; } .thl-office { background: rgba(255,255,255,.06); border-radius: var(--thl-radius); padding: 22px; } .thl-office h3 { margin: 0 0 8px; font-size: 1.1rem; } .thl-office a { color: var(--thl-color-star); text-decoration: none; } .thl-office p { margin: 0 0 10px; opacity: .9; } /* ================= Mega menu (optional) ================= */ .thl-mega { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px; background: #fff; border-radius: var(--thl-radius); box-shadow: 0 12px 40px rgba(0,0,0,.14); } .thl-mega ul { list-style: none; margin: 0; padding: 0; } .thl-mega li a { display: block; padding: 8px 10px; color: var(--thl-color-text); text-decoration: none; border-radius: 4px; } .thl-mega li a:hover { background: rgba(0,0,0,.05); color: var(--thl-color-accent); } .thl-mega__desc { font-size: .9rem; opacity: .85; padding: 8px 10px; } /* ============ Builder-global overrides ============ Elementor/theme kits ship global `.elementor-kit-* a { color: … }` rules (0,1,1) that beat single-class component selectors. Re-assert anchor colors at higher specificity so kit globals can't repaint the template. */ .thl-pa a.thl-btn--primary { color: var(--thl-color-primary-text); } .thl-pa a.thl-btn--primary:hover { color: #fff; } .thl-pa a.thl-btn--ghost { color: var(--thl-color-heading); } .thl-pa .thl-dark a.thl-btn--ghost, .thl-pa .thl-sb-card a.thl-btn--ghost { color: var(--thl-color-heading-invert); } .thl-hero--image a.thl-btn--ghost { color: var(--thl-color-heading); border-color: var(--thl-color-border); } .thl-pa a.thl-btn--ghost:hover { color: var(--thl-color-primary); } .thl-pa .thl-breadcrumb a { color: var(--thl-color-accent); } .thl-pa .thl-office a { color: var(--thl-color-star); } .thl-pa .thl-card h3 a { color: inherit; } .thl-pa .thl-dark .thl-card h3 a { color: var(--thl-color-heading-invert); } .thl-pa .thl-card h3 a:hover { color: var(--thl-color-primary); } /* ================= Utility ================= */ .thl-pa .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); word-wrap: normal !important; } /* ============================================================ THL v1.3 modules ============================================================ */ /* ---- Attorney / Team ---- */ .thl-attorneys { margin: 2em 0; } .thl-attorneys__collage { width: 100%; height: auto; border-radius: var(--thl-radius); margin: .5em 0 1.4em; } .thl-attorneys__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; } .thl-attorney-card { text-align: left; } .thl-attorney-card__link { display: block; text-decoration: none; color: inherit; } .thl-attorney-card__photo { display: block; width: 100%; aspect-ratio: 1/1; background-size: cover; background-position: center top; border-radius: var(--thl-radius); background-color: rgba(0,0,0,.06); } .thl-attorney-card__photo--empty { background: linear-gradient(135deg, var(--thl-color-dark-2), var(--thl-color-accent)); } .thl-attorney-card__name { display: block; font-family: var(--thl-font-heading); font-weight: 700; margin-top: 10px; color: var(--thl-color-heading); } .thl-attorney-card__link:hover .thl-attorney-card__name { color: var(--thl-color-primary); } .thl-attorney-card__role { display: block; font-size: .85rem; color: var(--thl-color-accent); font-weight: 600; } .thl-attorney-card__bio { font-size: .88rem; margin: 6px 0 0; opacity: .85; } /* ---- Case results (in-body) ---- */ .thl-results { margin: 2em 0; } .thl-results__list { list-style: none; padding: 0; display: grid; gap: 10px; } .thl-results__list li { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; background: rgba(0,0,0,.035); border-left: 4px solid var(--thl-color-accent); border-radius: 0 var(--thl-radius) var(--thl-radius) 0; } .thl-results__amount { font-family: var(--thl-font-heading); font-size: 1.25rem; color: var(--thl-color-accent); flex: 0 0 auto; } .thl-results__desc { color: var(--thl-color-text); } .thl-results__note { font-size: .95rem; opacity: .8; margin-top: 1em; } /* ---- Areas served ---- */ .thl-areas { margin: 2em 0; } /* Dark panel treatment (matches the Other Cases band reference) */ .thl-areas--panel { background: linear-gradient(160deg, var(--thl-color-dark), var(--thl-color-dark-2)); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 30px 28px 28px; } .thl-areas__title { text-align: center; margin: 0 0 4px; } .thl-pa .thl-areas__sub { text-align: center; color: var(--thl-color-star); text-transform: uppercase; letter-spacing: 2.2px; font-size: .82rem; font-weight: 600; margin: 6px 0 4px; } .thl-areas--panel .thl-areas__list { justify-content: center; } .thl-areas--panel .thl-areas__list li > span { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); } .thl-pa .thl-areas--panel .thl-areas__list li > a { color: var(--thl-color-star); background: rgba(255,255,255,.05); border-color: rgba(255,218,48,.45); } .thl-pa .thl-areas--panel .thl-areas__list li > a:hover { background: var(--thl-color-star); color: var(--thl-color-dark); box-shadow: 0 6px 16px rgba(0,0,0,.35); } /* Chip grid — towns flow as rounded tags; towns with a location page get a map pin + accent styling and a fill-on-hover so the links are unmissable. */ .thl-areas__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; } .thl-areas__list li { margin: 0; padding: 0; } .thl-areas__list li::marker { content: none; } .thl-areas__list li > span, .thl-areas__list li > a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(0,0,0,.13); background: rgba(0,0,0,.02); font-size: .92rem; line-height: 1; color: var(--thl-color-text); text-decoration: none; } .thl-pa .thl-areas__list li > a { color: var(--thl-color-accent); font-weight: 600; background: #fff; border-color: rgba(144,112,81,.5); transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; } .thl-areas__list li > a::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; } .thl-pa .thl-areas__list li > a:hover { background: var(--thl-color-accent); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.14); } @media (max-width: 600px) { .thl-areas__list { gap: 8px; } .thl-areas__list li > span, .thl-areas__list li > a { padding: 8px 13px; font-size: .88rem; } } .thl-area-chip { width: auto !important; } .thl-area-chip a, .thl-area-chip span { display: inline-block; padding: .5em 1em; background: rgba(0,0,0,.05); border-radius: 999px; font-size: .9rem; text-decoration: none; color: var(--thl-color-heading); white-space: nowrap; } .thl-area-chip a:hover { background: var(--thl-color-accent); color: #fff; } .thl-areas--carousel .thl-areas__swiper { padding-bottom: 4px; } /* ---- Author / review box ---- */ .thl-authorbox { margin: 2.4em 0 1em; padding: 20px 22px; border: 1px solid rgba(0,0,0,.1); border-radius: var(--thl-radius); background: rgba(0,0,0,.02); } .thl-authorbox__head { display: flex; gap: 16px; align-items: flex-start; } .thl-authorbox__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .thl-authorbox__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; } .thl-authorbox__name { display: block; font-family: var(--thl-font-heading); font-weight: 700; font-size: 1.1rem; } .thl-authorbox__name a { color: var(--thl-color-accent); text-decoration: none; } .thl-authorbox__blurb { font-size: .9rem; opacity: .85; margin-top: 4px; } .thl-share { display: flex; align-items: center; gap: 8px; margin: 16px 0; } .thl-share__label { font-size: .85rem; opacity: .7; } .thl-share__btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--thl-color-dark-2); color: #fff; text-decoration: none; font-weight: 700; font-size: .85rem; transition: background .15s; } .thl-share__btn:hover { background: var(--thl-color-accent); } .thl-trustacc { margin-top: 12px; } .thl-trustacc .thl-acc__item { border-color: rgba(0,0,0,.12); } .thl-trustacc__badge { color: var(--thl-color-accent); margin-right: 6px; } /* ---- Office map (location template centerpiece) ---- */ .thl-officemap { padding: 56px 0; margin-top: 40px; } .thl-officemap__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; } .thl-officemap--has-map .thl-officemap__list { display: grid; grid-template-columns: 1fr; gap: 18px; } .thl-officemap:not(.thl-officemap--has-map) .thl-officemap__grid { grid-template-columns: 1fr; } .thl-officemap:not(.thl-officemap--has-map) .thl-officemap__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; } .thl-officemap__map { position: relative; } .thl-officemap__map img { width: 100%; height: auto; border-radius: var(--thl-radius); display: block; } .thl-officemap__pin { position: absolute; transform: translate(-50%, -100%); color: var(--thl-color-star); font-size: 1.8rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); line-height: 1; pointer-events: none; } @media (max-width: 800px) { .thl-officemap__grid { grid-template-columns: 1fr; } } /* ---- Video facade (branded, click-to-load) ---- */ .thl-video__facade { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; cursor: pointer; background-size: cover; background-position: center; border-radius: var(--thl-radius); overflow: hidden; } .thl-video__facade::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); transition: background .2s; } .thl-video__facade:hover::after { background: rgba(0,0,0,.15); } .thl-video__title { position: absolute; left: 20px; bottom: 18px; right: 20px; z-index: 2; color: #fff; text-align: left; font-family: var(--thl-font-heading); font-weight: 800; font-size: 1.3rem; text-shadow: 0 2px 8px rgba(0,0,0,.7); } .thl-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 68px; height: 48px; background: var(--thl-color-primary); border-radius: 12px; } .thl-video__play::before { content: ""; position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--thl-color-primary-text); } /* ---- Sidebar extras ---- */ .thl-sb-results__cta { margin-top: 10px; width: 100%; justify-content: center; font-size: .85rem; padding: .55em 1em; } .thl-sb-results .swiper-pagination { position: static; margin-top: 12px; } .thl-sb-results .swiper-pagination-bullet-active { background: var(--thl-color-accent); } .thl-sb-about__photo { width: 100%; border-radius: calc(var(--thl-radius) - 2px); margin-bottom: 16px; display: block; } .thl-sb-about__link { display: inline-block; margin-top: 12px; color: var(--thl-color-accent); font-weight: 700; text-decoration: none; transition: transform .15s ease; } .thl-sb-about__link:hover { transform: translateX(4px); color: var(--thl-color-primary); } /* About card polish: roomier padding, bronze accent bar under the heading, calmer body copy */ .thl-sb-about { padding: 20px 22px 22px; } .thl-sb-about h4 { position: relative; padding-bottom: 10px; margin: 0 0 12px; } .thl-sb-about h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 2px; background: var(--thl-color-accent); } .thl-sb-about p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--thl-color-text); } .thl-review__g { display: inline-flex; vertical-align: middle; margin-right: 6px; } /* ============================================================ THL v1.4 — Location template (fixed layout) + section rework ============================================================ */ /* ---- Location layout rhythm ---- */ .thl-loc__intro { padding: 40px 20px 8px; } .thl-loc__intro .thl-pa__content { max-width: 860px; } .thl-loc__intro .thl-h { margin-top: 0; } .thl-loc__attorneys { padding: 8px 20px 24px; } /* ---- Office info + embedded map ---- */ .thl-locoffice { padding: 48px 0; background: rgba(0,0,0,.03); } .thl-locoffice .thl-h { margin-top: 0; } .thl-locoffice__grid { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 28px; align-items: stretch; } .thl-locoffice__grid--nomap { grid-template-columns: 1fr; } .thl-locoffice__card { background: #fff; border-radius: var(--thl-radius); padding: 26px; border: 1px solid rgba(0,0,0,.08); } .thl-locoffice__name { margin: 0 0 10px; font-size: 1.15rem; } .thl-locoffice__addr { margin: 0 0 10px; } .thl-locoffice__phone { margin: 0 0 14px; font-weight: 600; } .thl-locoffice__phone a { color: var(--thl-color-accent); text-decoration: none; } .thl-locoffice__hours h4 { margin: 0 0 6px; font-size: .95rem; } .thl-locoffice__hours ul { list-style: none; margin: 0 0 14px; padding: 0; font-size: .92rem; } .thl-locoffice__hours li { padding: 3px 0; border-bottom: 1px dashed rgba(0,0,0,.08); } .thl-locoffice__ctas { margin: 6px 0 0; } .thl-locoffice__map { min-height: 320px; } .thl-locoffice__map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; border-radius: var(--thl-radius); display: block; } @media (max-width: 800px) { .thl-locoffice__grid { grid-template-columns: 1fr; } } /* ---- Practice-area carousel (dark band) ---- */ .thl-locpa { padding: 56px 0; } .thl-locpa .thl-h { margin-top: 0; } .thl-locpa__swiper { position: relative; } .thl-card--pa { display: flex; flex-direction: column; gap: 8px; } .thl-card__excerpt { font-size: .9rem; margin: 0; opacity: .82; } .thl-card__more { margin-top: auto; font-weight: 700; font-size: .9rem; color: var(--thl-color-accent); text-decoration: none; } .thl-pa a.thl-card__more { color: var(--thl-color-accent); } .thl-dark .thl-card__more, .thl-pa .thl-dark a.thl-card__more { color: var(--thl-color-star); } .thl-card__more:hover { text-decoration: underline; } /* ---- Neighborhoods + ZIPs ---- */ .thl-locareas { padding: 48px 0 32px; } .thl-locareas .thl-h { margin-top: 0; } .thl-locareas__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; } .thl-locareas__col h3 { font-size: 1.15rem; margin: 0 0 12px; } .thl-locareas__list { columns: 2; column-gap: 28px; margin: 0; } .thl-locareas__zips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .thl-locareas__zip { background: rgba(0,0,0,.05); border-radius: 999px; padding: .4em .95em; font-size: .9rem; font-weight: 600; } /* Collapse at 800px like the sibling location grids (locoffice/loccta). */ @media (max-width: 800px) { .thl-locareas__grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .thl-locareas__list { columns: 1; } } /* ---- Two-column scroll-sync FAQ ---- */ .thl-faq2 { padding: 48px 0 40px; } .thl-faq2__title { margin: 0 0 24px; font-size: clamp(2rem, 4vw, 2.6rem); } .thl-faq2__grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 36px; align-items: start; } .thl-faq2__nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--thl-sticky-top, 120px); } .thl-faq2__navbtn { background: none; border: 0; border-left: 3px solid transparent; text-align: left; cursor: pointer; font-family: var(--thl-font-body); font-size: .98rem; font-weight: 600; color: var(--thl-color-heading); padding: 11px 14px; line-height: 1.35; transition: color .15s, border-color .15s, background .15s; } .thl-faq2__navbtn:hover { color: var(--thl-color-accent); background: rgba(0,0,0,.03); } .thl-faq2__navbtn.is-active { border-left-color: var(--thl-color-accent); color: var(--thl-color-accent); background: rgba(127,51,61,.06); } .thl-faq2__answers { max-height: 560px; overflow-y: auto; scroll-behavior: smooth; background: rgba(0,0,0,.03); border-radius: var(--thl-radius); padding: 8px 26px; position: relative; } .thl-faq2__item { padding: 18px 0 6px; border-bottom: 1px solid rgba(0,0,0,.08); scroll-margin-top: 8px; border-radius: 4px; transition: background .5s ease, box-shadow .5s ease; } .thl-faq2__item:last-of-type { border-bottom: 0; } .thl-faq2__q { margin: 0 0 12px; font-size: 1.7rem; line-height: 1.25; } .thl-faq2__qbtn { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; font-family: var(--thl-font-heading); font-weight: 700; font-size: inherit; color: var(--thl-color-heading); cursor: default; line-height: 1.3; } .thl-faq2__qbtn:focus-visible { outline: 2px solid var(--thl-color-accent); outline-offset: 3px; } .thl-faq2__qbtn .thl-acc__caret { display: none; } .thl-faq2__a { padding: 0 0 14px; } .thl-faq2__a > * + * { margin-top: .7em; } .thl-faq2__hint { position: sticky; bottom: 0; margin: 0 -26px; padding: 8px 26px 10px; text-align: center; font-size: .82rem; opacity: .65; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.92) 45%); pointer-events: none; } /* "Lights up" flash when a question is clicked */ .thl-faq2__item.is-lit { background: rgba(255,218,48,.22); box-shadow: inset 3px 0 0 var(--thl-color-primary); } @media (prefers-reduced-motion: reduce) { .thl-faq2__answers { scroll-behavior: auto; } .thl-faq2__item { transition: none; } .thl-faq2__item.is-lit { background: none; box-shadow: none; } } /* In-body variant (practice-area faq_block): block spacing instead of a full-width band, narrower rail to fit the content column. */ .thl-faq2--inbody { padding: 0; margin: 1.6em 0; } .thl-faq2--inbody .thl-faq2__grid { grid-template-columns: minmax(200px, 260px) 1fr; gap: 24px; } .thl-faq2--inbody .thl-faq2__answers { max-height: 480px; } /* Mobile: rail hides, items accordion. Selectors doubled with the --inbody variant so its higher-specificity desktop overrides can't win here (media queries add no specificity). */ @media (max-width: 899px) { .thl-faq2__grid, .thl-faq2--inbody .thl-faq2__grid { grid-template-columns: 1fr; } .thl-faq2__nav, .thl-faq2__hint { display: none; } .thl-faq2__answers, .thl-faq2--inbody .thl-faq2__answers { max-height: none !important; overflow: visible; padding: 0; background: none; } .thl-faq2__item { border: 1px solid rgba(0,0,0,.12); border-radius: var(--thl-radius); margin-bottom: 10px; padding: 0 !important; background: #fff; } .thl-faq2__item.is-open { border-color: rgba(144,112,81,.45); } body.thl-template .thl-faq2__q { margin: 0 !important; font-size: 16px !important; line-height: 1.4; } /* compact tappable row; kill the kit's dark button hover/focus fill + tap flash */ body.thl-template .thl-pa .thl-faq2__qbtn { cursor: pointer; padding: 14px 16px; font-family: var(--thl-font-body); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--thl-color-heading) !important; background: transparent !important; -webkit-tap-highlight-color: transparent; } body.thl-template .thl-pa .thl-faq2__qbtn:hover, body.thl-template .thl-pa .thl-faq2__qbtn:focus, body.thl-template .thl-pa .thl-faq2__qbtn:active { background: transparent !important; color: var(--thl-color-heading) !important; } .thl-faq2__qbtn:focus-visible { outline: 2px solid var(--thl-color-accent); outline-offset: -2px; border-radius: var(--thl-radius); } /* drawn chevron in a soft bronze circle (replaces the glyph caret) */ .thl-faq2__qbtn .thl-acc__caret { display: block; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(144,112,81,.12); position: relative; font-size: 0; line-height: 0; transition: transform .25s ease, background .2s ease; } .thl-faq2__qbtn .thl-acc__caret::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--thl-color-accent); border-bottom: 2px solid var(--thl-color-accent); transform: translate(-50%, -68%) rotate(45deg); } .thl-faq2__item.is-open .thl-acc__caret { transform: rotate(180deg); background: rgba(144,112,81,.2); } .thl-faq2__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding: 0 16px !important; font-size: 15.5px; } .thl-faq2__item.is-open .thl-faq2__a { max-height: 1400px; padding: 2px 16px 16px !important; } } /* ---- CTA band + form ---- */ .thl-loccta { padding: 56px 0; } .thl-loccta__grid { display: grid; grid-template-columns: 1fr minmax(320px, 480px); gap: 40px; align-items: start; } .thl-loccta__pitch .thl-h { margin-top: 0; } .thl-loccta__stat strong { font-family: var(--thl-font-heading); font-size: 1.5rem; color: var(--thl-color-star); } .thl-loccta__form { background: #fff; border-radius: var(--thl-radius); padding: 24px; color: var(--thl-color-text); } @media (max-width: 800px) { .thl-loccta__grid { grid-template-columns: 1fr; } } /* ---- News rework ---- */ .thl-news__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; } .thl-news__all { font-weight: 700; font-size: .95rem; color: var(--thl-color-accent); text-decoration: none; white-space: nowrap; } .thl-pa a.thl-news__all { color: var(--thl-color-accent); } .thl-news__all:hover { text-decoration: underline; } .thl-card--news { display: flex; flex-direction: column; gap: 6px; } .thl-card--news .thl-card__more { margin-top: auto; } .thl-card__thumb--empty { display: block; height: 160px; border-radius: var(--thl-radius); margin-bottom: 12px; background: linear-gradient(135deg, var(--thl-color-dark-2), var(--thl-color-accent)); } /* ---- Reviews rework ---- */ .thl-testimonials__agg { display: flex; justify-content: center; align-items: center; gap: 10px; margin: -6px 0 26px; font-size: 1.05rem; } .thl-testimonials__agg strong { font-family: var(--thl-font-heading); font-size: 1.3rem; } .thl-testimonials__count { opacity: .85; font-size: .92rem; } .thl-review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .thl-review__avatar { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--thl-color-primary); color: var(--thl-color-primary-text); font-family: var(--thl-font-heading); font-weight: 800; font-size: 1.1rem; } .thl-review__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .thl-review__head .thl-review__g { margin-left: auto; } .thl-review__body { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ THL v1.5 — Location visual pass (bands, proof strip, cards) ============================================================ */ /* ---- Proof strip (navy trust band under the breadcrumb) ---- */ .thl-locproof { padding: 14px 0; } .thl-locproof__row { display: flex; flex-wrap: wrap; gap: 10px 36px; align-items: center; justify-content: center; } .thl-locproof__item { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; letter-spacing: .01em; } .thl-locproof__icon { width: 21px; height: 21px; color: var(--thl-color-star); flex: 0 0 auto; } .thl-locproof__item .thl-stars { margin-right: 2px; } .thl-locproof__item--recovered { color: var(--thl-color-star); font-family: var(--thl-font-heading); } /* ---- Content bands: migrated sections get full-bleed alternating backgrounds; prose stays readable at 860px. ---- */ .thl-loc__band { padding: 36px 0 28px; } .thl-loc__band--tint { background: rgba(0,0,0,.035); } .thl-loc__band-inner { max-width: 860px; } .thl-loc__band-inner .thl-h { margin-top: 0; } /* Plain prose bullets inside bands read as gold checklists. */ .thl-loc__band .thl-prose ul { list-style: none; padding-left: 0; } .thl-loc__band .thl-prose ul > li { position: relative; padding-left: 1.9em; margin-bottom: .55em; } .thl-loc__band .thl-prose ul > li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--thl-color-star); background: var(--thl-color-dark); width: 1.3em; height: 1.3em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8em; } /* ---- "Continue reading" collapse (copy stays in the DOM) ---- */ .thl-loc__more { display: none; } .thl-loc__more.is-open { display: block; } .thl-loc__more-toggle { text-align: center; padding: 6px 0 34px; } .thl-loc__more-toggle .thl-btn { min-width: 220px; justify-content: center; } /* ---- Practice-area cards: white cards with a gold scales icon on the navy band; hover lifts and nudges the arrow. ---- */ .thl-dark .thl-card--pa { background: #fff; } .thl-pa .thl-dark .thl-card--pa h3 a { color: var(--thl-color-heading); } .thl-pa .thl-dark .thl-card--pa h3 a:hover { color: var(--thl-color-accent); } .thl-dark .thl-card--pa .thl-card__excerpt { color: var(--thl-color-text); } .thl-pa .thl-dark .thl-card--pa a.thl-card__more { color: var(--thl-color-accent); } .thl-card__icon { display: inline-flex; width: 46px; height: 46px; border-radius: 50%; align-items: center; justify-content: center; background: var(--thl-color-dark); color: var(--thl-color-star); margin-bottom: 4px; } .thl-card__icon svg { width: 26px; height: 26px; } .thl-card--pa { transition: transform .18s ease, box-shadow .18s ease; } .thl-card--pa:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.22); } .thl-card--pa .thl-card__more span { display: inline-block; transition: transform .18s ease; } .thl-card--pa:hover .thl-card__more span { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .thl-card--pa, .thl-card--pa .thl-card__more span { transition: none; } .thl-card--pa:hover { transform: none; } } /* ---- Office card: navy with gold accents + 24/7 chip ---- */ .thl-locoffice__card { background: var(--thl-color-dark); color: var(--thl-color-heading-invert); border: 0; position: relative; } .thl-locoffice__card h3, .thl-locoffice__card h4 { color: var(--thl-color-heading-invert); } .thl-locoffice__badge { position: absolute; top: 0; right: 0; background: var(--thl-color-star); color: var(--thl-color-dark); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: .45em .95em; border-radius: 0 var(--thl-radius) 0 var(--thl-radius); } .thl-locoffice__name { padding-right: 120px; } .thl-locoffice__addr { opacity: .88; } .thl-locoffice__phone { font-size: 1.15rem; } .thl-locoffice__phone a, .thl-pa .thl-locoffice__card a:not(.thl-btn) { color: var(--thl-color-star); text-decoration: none; } .thl-locoffice__hours li { border-bottom-color: rgba(255,255,255,.16); opacity: .9; } .thl-locoffice__card a.thl-btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); } .thl-locoffice__card a.thl-btn--ghost:hover { color: var(--thl-color-star); border-color: var(--thl-color-star); } /* ============================================================ THL v1.6 — PA sidebar rebuild, CTA modal, nested TOC, in-content CTAs ============================================================ */ /* ---- Full-bleed: escape Astra's ~1200px .ast-container so the hero and the global bands run edge-to-edge (TorHerman). Each band's inner .thl-pa__wrap re-centers content at --thl-maxw. Safe against horizontal scroll because body.thl-template already sets overflow-x: clip (sticky fix). ---- */ .thl-hero, .thl-pa__bleed, .thl-related, .thl-news, .thl-testimonials, .thl-officemap, .thl-offices, .thl-attorneys--band, .thl-faq2:not(.thl-faq2--inbody), .thl-locproof, .thl-locpa, .thl-locoffice, .thl-locareas, .thl-loccta, .thl-loc__band { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* The two-column body widens to --thl-maxw and stays centered inside the bleed. */ .thl-pa__bleed > .thl-pa__wrap { width: 100%; } /* ---- Inline icons (inherit currentColor) ---- */ .thl-ico { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; } .thl-btn--phone .thl-ico { margin-right: .1em; } /* ---- Sidebar CTA card (top + bottom) ---- */ .thl-sb-cta { border-radius: var(--thl-radius); padding: 24px 22px; background-size: cover; background-position: center; } .thl-sb-cta__title { margin: 0 0 6px; font-size: 1.2rem; line-height: 1.25; color: var(--thl-color-heading-invert); } .thl-sb-cta__sub { margin: 0 0 16px; font-size: .92rem; opacity: .9; } .thl-sb-cta__btns { margin: 0 0 4px; flex-direction: column; gap: 10px; } .thl-sb-cta__btns .thl-btn { width: 100%; justify-content: center; } .thl-sb-cta__proof { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); } .thl-sb-cta__proof-cell { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; line-height: 1.3; } .thl-sb-cta__proof-cell strong { font-family: var(--thl-font-heading); font-size: 1.05rem; } .thl-sb-cta__proof-g { display: inline-flex; align-items: center; gap: 5px; } .thl-sb-cta__proof-cell .thl-stars { color: var(--thl-color-star); font-size: .85rem; letter-spacing: 1px; } .thl-sb-cta__proof-cell--recovered strong { color: var(--thl-color-star); } .thl-sb-cta__proof-note { opacity: .72; font-size: .72rem; } .thl-sb-cta__trust { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); overflow: hidden; } .thl-sb-cta__trust-slide { display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: .92rem; min-height: 24px; text-align: center; } .thl-sb-cta__trust-slide .thl-ico { color: var(--thl-color-star); width: 20px; height: 20px; } /* Swiper's CDN CSS loads after ours and pins .swiper-pagination absolute (bottom:8px), which floated the dots over the slide text — force static. */ .thl-sb-cta__trust .swiper-pagination { position: static !important; margin: 10px 0 0; } .thl-sb-cta__trust .swiper-pagination-bullet { background: rgba(255,255,255,.5); opacity: 1; } .thl-sb-cta__trust .swiper-pagination-bullet-active { background: var(--thl-color-star); } /* ---- Table of Contents: collapsible nested subheadings ---- */ .thl-toc__row { border-top: 1px solid rgba(0,0,0,.06); position: relative; } .thl-toc__row:first-child { border-top: 0; } .thl-toc__row .thl-toc__link { border-top: 0; padding-right: 40px; } .thl-toc__toggle { position: absolute; top: 0; right: 0; width: 38px; height: 40px; background: none; border: 0; cursor: pointer; color: var(--thl-color-text); display: flex; align-items: center; justify-content: center; } .thl-toc__caret { transition: transform .2s; line-height: 0; font-size: 1rem; } .thl-toc__toggle[aria-expanded="true"] .thl-toc__caret { transform: rotate(180deg); } .thl-toc__sub { display: none; flex-direction: column; padding: 0 0 6px; background: rgba(0,0,0,.02); } .thl-toc__sub.is-open { display: flex; } .thl-toc__sublink { display: block; padding: 7px 16px 7px 30px; font-family: var(--thl-font-body); font-size: .84rem; line-height: 1.35; color: var(--thl-color-text); text-decoration: none; border-left: 3px solid transparent; } .thl-toc__sublink:hover { background: rgba(0,0,0,.04); color: var(--thl-color-accent); } .thl-toc__sublink.is-active { border-left-color: var(--thl-color-accent); color: var(--thl-color-accent); font-weight: 600; } /* ---- Sidebar results: prominent featured card (eyebrow OUTSIDE the swiper so Swiper only ever sees .swiper-wrapper — otherwise it mis-sizes slides and adjacent slide text bleeds in). ---- */ .thl-sb-results-box { border: 1px solid rgba(0,0,0,.1); border-radius: var(--thl-radius); overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.05); } .thl-sb-results__eyebrow { background: linear-gradient(120deg, var(--thl-color-dark), var(--thl-color-dark-2)); color: var(--thl-color-heading-invert); font-family: var(--thl-font-heading); font-weight: 700; padding: 13px 18px; font-size: 1.35rem; } .thl-sb-results { padding: 0; background: rgba(0,0,0,.035); overflow: hidden; } .thl-sb-results__slide { padding: 26px 22px 8px; text-align: center; box-sizing: border-box; } .thl-sb-results__slide strong { display: block; font-family: var(--thl-font-heading); font-size: 2.3rem; line-height: 1.05; letter-spacing: -.5px; color: var(--thl-color-heading); } .thl-sb-results__slide em { display: block; font-style: normal; font-weight: 700; margin-top: 6px; color: var(--thl-color-accent); text-transform: uppercase; font-size: .8rem; letter-spacing: .9px; } .thl-sb-results__slide p { font-size: .9rem; margin: 8px 0 0; opacity: .8; line-height: 1.55; } .thl-sb-results .swiper-pagination { position: static !important; margin: 4px 0 14px; } /* ---- Sidebar guides ---- */ .thl-sb-guides { border: 1px solid rgba(0,0,0,.1); border-radius: var(--thl-radius); padding: 18px 20px; } .thl-sb-guides h4 { margin: 0 0 10px; } .thl-sb-guides__list { list-style: none; margin: 0; padding: 0; } .thl-sb-guides__list li { border-top: 1px solid rgba(0,0,0,.07); } .thl-sb-guides__list li:first-child { border-top: 0; } .thl-sb-guides__list a { display: block; padding: 8px 0 8px 16px; position: relative; font-size: .9rem; line-height: 1.4; color: var(--thl-color-text); text-decoration: none; } .thl-sb-guides__list a::before { content: "\203A"; position: absolute; left: 2px; color: var(--thl-color-accent); font-weight: 700; } .thl-sb-guides__list a:hover { color: var(--thl-color-accent); } /* ---- In-content CTA band (auto-injected) ---- */ .thl-inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; background: var(--thl-cta-grad); border-radius: var(--thl-radius); padding: 20px 24px; margin: 2em 0; } .thl-inline-cta__text { margin: 0; font-size: 1.05rem; color: var(--thl-color-primary-text); max-width: 30em; } .thl-inline-cta__btns { margin: 0; flex-wrap: nowrap; } .thl-inline-cta .thl-btn--primary { background: #fff; } /* The Elementor kit forces .thl-pa a{color:...}; re-assert the label color at higher specificity or the white-on-white button text vanishes. */ .thl-pa .thl-inline-cta a.thl-btn--primary { color: var(--thl-color-primary); } .thl-pa .thl-inline-cta a.thl-btn--primary:hover { background: var(--thl-color-heading-invert); color: var(--thl-color-primary-hover); } .thl-inline-cta a.thl-btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); } .thl-inline-cta a.thl-btn--ghost:hover { color: #fff; border-color: #fff; } @media (max-width: 560px) { .thl-inline-cta__btns { flex-wrap: wrap; } .thl-inline-cta__btns .thl-btn { flex: 1 1 auto; justify-content: center; } } /* ---- Global FAQ band (PA) ---- */ .thl-faq2--global { background: rgba(0,0,0,.03); padding: 48px 0; margin-top: 8px; } /* ---- Consult modal ---- */ .thl-modal[hidden] { display: none; } .thl-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; } .thl-modal__overlay { position: absolute; inset: 0; background: rgba(9,11,30,.62); backdrop-filter: blur(2px); } .thl-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.4); animation: thl-modal-in .22s ease; } @keyframes thl-modal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .thl-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; background: var(--thl-color-dark); color: var(--thl-color-heading-invert); padding: 20px 24px; border-radius: 12px 12px 0 0; } .thl-modal__title { margin: 0; color: var(--thl-color-heading-invert); font-size: 1.35rem; } .thl-modal__sub { margin: 4px 0 0; font-size: .9rem; opacity: .85; } .thl-modal__close { background: none; border: 0; color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0 4px; } .thl-modal__body { padding: 22px 24px 26px; } body.thl-modal-open { overflow: hidden; } /* Gravity Form inside the modal — force a clean stacked layout regardless of the site's (legacy) GF markup: no list bullets, labels above full-width inputs, hidden honeypot/validation rows. */ .thl-modal__body .gform_wrapper ul.gform_fields, .thl-modal__body .gform_wrapper .gform_fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .thl-modal__body .gform_wrapper li.gfield, .thl-modal__body .gform_wrapper .gfield { list-style: none; margin: 0; padding: 0; } .thl-modal__body .gform_wrapper .gfield_label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 5px; line-height: 1.3; color: var(--thl-color-heading); } .thl-modal__body .gform_wrapper .ginput_container { margin: 0; } .thl-modal__body .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .thl-modal__body .gform_wrapper select, .thl-modal__body .gform_wrapper textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid rgba(0,0,0,.22); border-radius: 6px; font-size: 1rem; font-family: var(--thl-font-body); background: #fff; } .thl-modal__body .gform_wrapper textarea { min-height: 90px; } .thl-modal__body .gform_wrapper .gfield_required { color: #c0392b; margin-left: 2px; } .thl-modal__body .gform_footer { margin: 16px 0 0; padding: 0; } .thl-modal__body .gform_wrapper .gform_footer input[type="submit"], .thl-modal__body .gform_wrapper .gform_footer button { width: 100%; justify-content: center; } .thl-modal__body .gform_validation_container, .thl-modal__body .gform_wrapper .gform_validation_container, .thl-modal__body .gfield_visibility_hidden, .thl-modal__body .gform_hidden { display: none !important; } @media (prefers-reduced-motion: reduce) { .thl-modal__dialog { animation: none; } } /* ============================================================ THL v1.7 — visual polish pass (full-bleed bands, section design) ============================================================ */ /* Full-bleed bands sit flush — no white page-gap leaking between them. */ .thl-related, .thl-officemap, .thl-offices, .thl-news, .thl-testimonials, .thl-faq2--global { margin-top: 0; } /* Hairline divider where two consecutive dark bands meet (Other Cases→Offices). */ .thl-related + .thl-officemap, .thl-related + .thl-offices { border-top: 1px solid rgba(255,255,255,.1); } /* Prominent section headings across the full-width bands (TorHerman scale). */ .thl-related .thl-h, .thl-officemap .thl-h, .thl-offices .thl-h, .thl-news .thl-h, .thl-testimonials .thl-h, .thl-faq2__title { font-size: clamp(1.7rem, 2.6vw, 2.15rem); } .thl-related, .thl-officemap, .thl-offices { padding: 60px 0; } .thl-news { padding: 60px 0; } .thl-testimonials { padding: 64px 0; } /* ---- Other Cases We Handle: lift-on-hover cards with an arrow ---- */ .thl-related .thl-card { position: relative; border: 1px solid rgba(255,255,255,.09); padding: 22px 22px 46px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .thl-related .thl-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.34); border-color: var(--thl-color-primary); } .thl-related .thl-card h3 { font-size: 1.12rem; line-height: 1.3; } .thl-related .thl-card__eyebrow { color: var(--thl-color-star); } .thl-related .thl-card::after { content: "Learn more \2192"; position: absolute; left: 22px; bottom: 16px; font-size: .82rem; font-weight: 700; color: var(--thl-color-primary); transition: transform .18s ease; } .thl-related .thl-card:hover::after { transform: translateX(4px); } .thl-pa .thl-related .thl-card h3 a { color: var(--thl-color-heading-invert); } .thl-pa .thl-related .thl-card:hover h3 a { color: var(--thl-color-primary); } /* ---- Our Offices: consistent bordered office cards ---- */ .thl-officemap .thl-office, .thl-offices .thl-office { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--thl-radius); padding: 22px; transition: border-color .18s ease, background .18s ease; } .thl-officemap .thl-office:hover, .thl-offices .thl-office:hover { border-color: var(--thl-color-primary); background: rgba(255,255,255,.08); } .thl-office h3 { font-size: 1.12rem; margin-bottom: 10px; } .thl-office p { font-size: .92rem; } .thl-pa .thl-office a { color: var(--thl-color-star); font-weight: 600; } /* ---- Latest News: image-topped cards, flush image, padded body ---- */ .thl-news .thl-card--news { padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; border: 1px solid rgba(0,0,0,.09); transition: transform .18s ease, box-shadow .18s ease; } .thl-news .thl-card--news:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.12); } .thl-news .thl-card__thumb { display: block; margin: 0; } .thl-news .thl-card--news .thl-card__thumb img { width: 100%; height: 180px; object-fit: cover; border-radius: 0; margin: 0; display: block; } .thl-news .thl-card__thumb--empty { height: 180px; border-radius: 0; margin: 0; } .thl-news .thl-card__eyebrow { padding: 15px 18px 0; margin: 0; } .thl-news .thl-card--news h3 { padding: 6px 18px 0; font-size: 1.08rem; line-height: 1.35; } .thl-news .thl-card__excerpt { padding: 8px 18px 0; } .thl-news .thl-card--news .thl-card__more { padding: 12px 18px 18px; } /* ---- Global FAQ: white answer panel on the tinted band, bigger title ---- */ .thl-faq2--global .thl-faq2__title { margin-bottom: 22px; } .thl-faq2--global .thl-faq2__answers { background: #fff; border: 1px solid rgba(0,0,0,.08); } .thl-faq2--global .thl-faq2__hint { background: linear-gradient(to bottom, transparent, #fff 45%); } .thl-faq2--global .thl-faq2__navbtn { border-radius: 6px; } /* ---- Meet Our Attorneys: global full-width band w/ polished cards ---- */ .thl-attorneys--band { padding: 62px 0; background: rgba(0,0,0,.03); margin-top: 0; } .thl-attorneys--band .thl-attorneys__head { text-align: center; max-width: 720px; margin: 0 auto 32px; } .thl-attorneys--band .thl-attorneys__head .thl-h { margin: 0 0 10px; font-size: clamp(1.7rem, 2.6vw, 2.15rem); } .thl-attorneys--band .thl-attorneys__intro { opacity: .85; } .thl-attorneys--band .thl-attorneys__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 24px; } .thl-attorneys--band .thl-attorney-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--thl-radius); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .thl-attorneys--band .thl-attorney-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(0,0,0,.14); } .thl-attorneys--band .thl-attorney-card__link { display: block; text-decoration: none; color: inherit; } .thl-attorneys--band .thl-attorney-card__photo { width: 100%; aspect-ratio: 4 / 5; border-radius: 0; background-size: cover; background-position: center top; margin: 0; } .thl-attorneys--band .thl-attorney-card__body { display: block; padding: 16px 18px 18px; } .thl-attorneys--band .thl-attorney-card__name { display: block; font-family: var(--thl-font-heading); font-weight: 700; font-size: 1.06rem; color: var(--thl-color-heading); } .thl-attorneys--band .thl-attorney-card:hover .thl-attorney-card__name { color: var(--thl-color-primary); } .thl-attorneys--band .thl-attorney-card__role { display: block; font-size: .84rem; color: var(--thl-color-accent); font-weight: 600; margin: 2px 0 10px; } .thl-attorneys--band .thl-attorney-card__more { display: inline-block; font-size: .82rem; font-weight: 700; color: var(--thl-color-primary); } .thl-attorneys--band .thl-attorney-card:hover .thl-attorney-card__more { text-decoration: underline; } .thl-pa .thl-attorneys--band .thl-attorney-card__link { color: inherit; } .thl-attorneys--band .thl-attorneys__cta { text-align: center; margin-top: 32px; } /* ============================================================ THL v1.8 — premium polish pass (design review fixes) ============================================================ */ /* ---- Type scale: confident section headings; readable in-content h3; keep decorative headings from out-sizing real section titles ---- */ .thl-related .thl-h, .thl-officemap .thl-h, .thl-offices .thl-h, .thl-news .thl-h, .thl-testimonials .thl-h, .thl-faq2__title, .thl-attorneys--band .thl-h { font-size: clamp(1.95rem, 3vw, 2.4rem); } .thl-pa__content .thl-prose h2, .thl-pa__content > .thl-h { font-size: clamp(1.5rem, 2.4vw, 1.85rem); } .thl-pa__content .thl-prose h3, .thl-pa__content h3.thl-h { font-size: 1.35rem; } /* ---- Carousel navigation: circular controls, never bare chevrons over text; hidden on mobile in favor of swipe. ---- */ .thl-pa .swiper-button-prev, .thl-pa .swiper-button-next { width: 44px; height: 44px; margin-top: 0; top: 44%; border-radius: 50%; background: #fff; box-shadow: 0 5px 16px rgba(0,0,0,.2); color: var(--thl-color-dark); transition: background .15s ease, color .15s ease, transform .15s ease; } .thl-pa .swiper-button-prev { left: -4px; } .thl-pa .swiper-button-next { right: -4px; } .thl-pa .swiper-button-prev::after, .thl-pa .swiper-button-next::after { font-size: 15px; font-weight: 800; } .thl-pa .swiper-button-prev:hover, .thl-pa .swiper-button-next:hover { background: var(--thl-color-primary); color: #fff; transform: scale(1.06); } .thl-pa .thl-dark .swiper-button-prev, .thl-pa .thl-dark .swiper-button-next, .thl-pa .thl-testimonials .swiper-button-prev, .thl-pa .thl-testimonials .swiper-button-next { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; } .thl-pa .thl-dark .swiper-button-prev:hover, .thl-pa .thl-dark .swiper-button-next:hover, .thl-pa .thl-testimonials .swiper-button-prev:hover, .thl-pa .thl-testimonials .swiper-button-next:hover { background: var(--thl-color-primary); } @media (max-width: 767px) { .thl-pa .swiper-button-prev, .thl-pa .swiper-button-next { display: none; } } /* ---- Consult modal: legible white serif title, capped textarea so the submit stays in view, sticky brand-blue footer button ---- */ .thl-modal__title { color: #fff !important; font-family: var(--thl-font-heading); } .thl-modal__body .gform_wrapper textarea { min-height: 96px; max-height: 120px; } .thl-modal__body { position: relative; } .thl-modal__body .gform_footer { position: sticky; bottom: 0; background: #fff; padding: 12px 0 2px; margin-top: 12px; box-shadow: 0 -8px 16px -8px rgba(0,0,0,.12); } .thl-modal__body .thl-gf-submit, .thl-modal__body .gform_button { width: 100%; background: var(--thl-color-primary); color: #fff; border: 0; border-radius: var(--thl-radius); padding: .95em 1.4em; font-weight: 700; font-size: 1rem; cursor: pointer; } .thl-modal__body .thl-gf-submit:hover, .thl-modal__body .gform_button:hover { background: var(--thl-color-primary-hover); } /* ---- Our Offices: balanced office-card grid (placeholder map removed) ---- */ .thl-offices__head { max-width: 760px; margin: 0 auto 34px; text-align: center; } .thl-offices__head .thl-h { margin: 0 0 8px; } .thl-offices__sub { color: rgba(255,255,255,.78); font-size: 1.02rem; margin: 0; } .thl-offices__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 22px; } @media (max-width: 760px) { .thl-offices__grid { grid-template-columns: 1fr; } } .thl-offices .thl-office { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--thl-radius); padding: 24px; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .thl-offices .thl-office:hover { border-color: var(--thl-color-primary); background: rgba(255,255,255,.08); transform: translateY(-3px); } .thl-office h3 { margin: 0 0 8px; font-size: 1.18rem; } .thl-office__addr { margin: 0 0 14px; opacity: .82; font-size: .94rem; line-height: 1.55; } .thl-office__links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; } .thl-pa .thl-office__phone { display: inline-flex; align-items: center; gap: 7px; color: var(--thl-color-star); font-weight: 700; text-decoration: none; } .thl-pa .thl-office__dir { color: rgba(255,255,255,.75); text-decoration: none; font-size: .9rem; font-weight: 600; } .thl-pa .thl-office__dir:hover { color: #fff; } /* ---- Sidebar Results: comfortable spacing, no button/text overlap, dots with breathing room (autoHeight in JS handles per-slide sizing) ---- */ /* The site's globally-loaded Swiper CSS forces .swiper-slide{display:block} and an equal-height stretch, which clipped the taller slide and dropped its "Learn More" button onto the description text. Force a natural-height flex column with !important so the button always sits cleanly below the copy. */ .thl-sb-results .swiper-wrapper { align-items: flex-start; } .thl-sb-results .swiper-slide.thl-sb-results__slide { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; height: auto !important; padding: 24px 20px 22px; box-sizing: border-box; text-align: center; } .thl-sb-results__slide > * + * { margin-top: 5px; } .thl-sb-results__slide p { margin: 6px 0 0; } .thl-sb-results__cta { display: inline-block; width: auto; margin-top: 16px !important; } .thl-sb-results .swiper-pagination { position: static !important; margin: 16px 0 0 !important; } /* the site's global Swiper CSS (loads after ours) zeroes .swiper padding */ .thl-pa .thl-sb-results.swiper, .thl-pa .thl-sb-results { padding-bottom: 26px !important; } .thl-sb-results-box { padding-bottom: 0 !important; } /* ---- Author / share box: legible share icons + left-aligned trust rows ---- */ .thl-pa a.thl-share__btn { background: var(--thl-color-dark); color: #fff; } .thl-pa a.thl-share__btn:hover { background: var(--thl-color-primary); color: #fff; transform: translateY(-1px); } .thl-trustacc .thl-acc__q, .thl-refs .thl-acc__q { justify-content: flex-start; gap: 9px; text-align: left; } .thl-trustacc .thl-acc__caret, .thl-refs .thl-acc__caret { margin-left: auto; } .thl-trustacc__badge { color: var(--thl-color-accent); } /* ---- Meet Our Attorneys: clean white band, flat cards (no gray, no shadow), balanced 4-up grid ---- */ .thl-attorneys--band { background: #fff; } .thl-attorneys--band .thl-attorneys__grid { grid-template-columns: repeat(6, 1fr); gap: 20px; } @media (max-width: 1250px) { .thl-attorneys--band .thl-attorneys__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } } .thl-attorneys--band .thl-attorney-card { background: transparent; border: 0; box-shadow: none; } .thl-attorneys--band .thl-attorney-card:hover { transform: translateY(-4px); box-shadow: none; } .thl-attorneys--band .thl-attorney-card__photo { border-radius: var(--thl-radius); background-color: #fff; } .thl-attorneys--band .thl-attorney-card__body { padding: 14px 2px 0; } @media (max-width: 1000px) { .thl-attorneys--band .thl-attorneys__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .thl-attorneys--band .thl-attorneys__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } /* ---- Latest News: empty thumbnail becomes a branded panel, not a bare block ---- */ /* Default LOGO thumbnail — logo centered/contained on a light branded panel (never cover-cropped like a photo). */ .thl-news .thl-card__thumb--logo { display: flex; align-items: center; justify-content: center; height: 180px; padding: 30px 40px; background: linear-gradient(135deg, var(--thl-color-dark) 0%, var(--thl-color-dark-2) 100%); } .thl-news .thl-card--news .thl-card__thumb--logo img { width: 72%; max-width: 250px; max-height: 100%; height: auto; object-fit: contain; margin: 0; border-radius: 0; display: block; } .thl-news .thl-card__thumb--empty { background: var(--thl-color-dark); position: relative; } .thl-news .thl-card__thumb--empty::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.12), transparent 60%), linear-gradient(135deg, var(--thl-color-dark-2), var(--thl-color-accent)); } /* ---- Reviews: navy band (was muddy bronze), clean cards, content-height ---- */ .thl-testimonials { background: var(--thl-color-dark); } .thl-testimonials .thl-review { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); } .thl-testimonials__swiper .swiper-wrapper { align-items: stretch; } .thl-testimonials .thl-review__body { color: rgba(255,255,255,.92); } .thl-testimonials__agg { color: #fff; } /* ---- Other Cases: readable "Learn more" on dark cards ---- */ .thl-pa .thl-related .thl-card::after { color: var(--thl-color-star); } .thl-pa .thl-related .thl-card__eyebrow { color: var(--thl-color-star); } /* ---- FAQ: breathing room so the highlight/text isn't cramped ---- */ .thl-faq2__answers { padding: 10px 22px; } .thl-faq2__item { padding: 18px 16px; border-radius: 8px; scroll-margin-top: 10px; } .thl-faq2__q { margin: 0 0 6px; } .thl-faq2__a { padding: 0; } .thl-faq2__item.is-lit { background: rgba(255,218,48,.2); box-shadow: inset 3px 0 0 var(--thl-color-primary); } .thl-faq2__hint { margin: 0 -22px; padding: 10px 22px 12px; background: linear-gradient(to bottom, transparent, var(--thl-color-heading-invert) 55%); } .thl-faq2--global .thl-faq2__hint { background: linear-gradient(to bottom, transparent, #fff 55%); } /* keep the last answer clear of the sticky "scroll for more" hint */ .thl-faq2__answers .thl-faq2__item:last-of-type { padding-bottom: 42px; } /* ============================================================ THL v1.8.1 — carousel dots, remove overlapping FAQ hint ============================================================ */ /* Carousel controls are now dots BELOW the cards (never over card content). Flex-center + fixed gap so they never squish or left-align (the failure mode of Swiper's dynamicBullets, which we do NOT use). */ .thl-pa .swiper-pagination.thl-cdots { position: static; margin: 24px 0 0; display: flex; justify-content: center; align-items: center; gap: 9px; } .thl-pa .thl-cdots .swiper-pagination-bullet { margin: 0 !important; background: rgba(0,0,0,.22); opacity: 1; width: 9px; height: 9px; border-radius: 50%; transform: none !important; transition: background .15s; } .thl-pa .thl-cdots .swiper-pagination-bullet-active { background: var(--thl-color-primary); } .thl-pa .thl-dark .thl-cdots .swiper-pagination-bullet, .thl-pa .thl-testimonials .thl-cdots .swiper-pagination-bullet, .thl-pa .thl-locpa .thl-cdots .swiper-pagination-bullet { background: rgba(255,255,255,.32); } .thl-pa .thl-dark .thl-cdots .swiper-pagination-bullet-active, .thl-pa .thl-testimonials .thl-cdots .swiper-pagination-bullet-active, .thl-pa .thl-locpa .thl-cdots .swiper-pagination-bullet-active { background: var(--thl-color-star); } /* The sticky "scroll for more" hint overlapped answer text — the panel's own scrollbar is a clearer, non-overlapping affordance. */ .thl-faq2__hint { display: none !important; } /* Hide a lone/locked pagination (a carousel whose slides all fit = 1 dot). */ .thl-pa .swiper-pagination-lock { display: none !important; } /* ============================================================ THL v1.8.4 — Cases icon grid + interactive offices map ============================================================ */ /* ---- Other Cases We Handle: icon-card grid (from the site's cases menu) ---- */ .thl-cases__sub { color: rgba(255,255,255,.78); font-size: 1.02rem; margin: 0 0 26px; max-width: 720px; } /* ---- Other Cases: dark row-list (client-referenced design) ---- */ .thl-cases__title { text-align: center; } .thl-pa .thl-cases__sub { text-align: center; color: var(--thl-color-star); text-transform: uppercase; letter-spacing: 2.4px; font-size: .86rem; font-weight: 600; margin: 8px auto 30px; max-width: none; } .thl-cases__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .thl-pa a.thl-case-row { display: flex; align-items: center; gap: 13px; padding: 16px 20px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045); color: #fff; text-decoration: none; transition: border-color .18s ease, background .18s ease, color .18s ease; } .thl-case-row__icon { display: inline-flex; color: var(--thl-color-star); flex: none; } .thl-case-row__icon svg { width: 21px; height: 21px; } .thl-case-row__name { font-weight: 600; font-size: 1.02rem; } .thl-case-row__arrow { margin-left: auto; display: inline-flex; flex: none; opacity: .65; transition: transform .18s ease, opacity .18s ease; } .thl-pa a.thl-case-row:hover { border-color: var(--thl-color-star); color: var(--thl-color-star); background: rgba(255,255,255,.07); } .thl-pa a.thl-case-row:hover .thl-case-row__arrow { transform: translateX(4px); opacity: 1; } .thl-pa a.thl-cases__allbtn { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 22px; padding: 15px 20px; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: .88rem; font-weight: 600; text-decoration: none; transition: border-color .18s ease, color .18s ease; } .thl-pa a.thl-cases__allbtn:hover { border-color: var(--thl-color-star); color: var(--thl-color-star); } @media (max-width: 760px) { .thl-cases__rows { grid-template-columns: 1fr; gap: 10px; } } .thl-cases__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .thl-case-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; padding: 26px 24px; overflow: hidden; border-radius: 14px; text-decoration: none; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(158deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.025) 100%); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } /* gold→blue accent bar that sweeps across the top edge on hover */ .thl-case-card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--thl-color-star), var(--thl-color-primary)); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; } .thl-case-card:hover { transform: translateY(-6px); border-color: rgba(255,218,48,.42); box-shadow: 0 20px 44px rgba(0,0,0,.42); } .thl-case-card:hover::before { transform: scaleX(1); } .thl-case-card__icon { width: 56px; height: 56px; border-radius: 50%; margin-inline: auto; display: inline-flex; align-items: center; justify-content: center; color: var(--thl-color-star); border: 1px solid rgba(255,218,48,.32); background: radial-gradient(circle at 38% 32%, rgba(255,218,48,.3), rgba(255,218,48,.07)); transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .thl-case-card:hover .thl-case-card__icon { background: var(--thl-color-star); color: var(--thl-color-dark); transform: scale(1.07); box-shadow: 0 8px 20px rgba(255,218,48,.3); } .thl-case-card__icon svg { width: 27px; height: 27px; } .thl-pa .thl-case-card .thl-case-card__title { font-family: var(--thl-font-heading); font-weight: 700; font-size: 1.14rem; color: var(--thl-color-heading-invert); line-height: 1.3; } .thl-case-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--thl-color-star); } .thl-case-card__more span { transition: transform .2s ease; } .thl-case-card:hover .thl-case-card__more span { transform: translateX(5px); } @media (max-width: 600px) { .thl-cases__grid { grid-template-columns: 1fr 1fr; gap: 12px; } .thl-case-card { padding: 20px 18px; } .thl-case-card__icon { width: 48px; height: 48px; } } /* ---- Our Offices: interactive Google-Maps layout ---- */ .thl-offices--map .thl-offices__layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: stretch; } .thl-offices__mapwrap { border-radius: var(--thl-radius); overflow: hidden; min-height: 470px; border: 1px solid rgba(255,255,255,.12); } .thl-offices__map { width: 100%; height: 100%; min-height: 470px; border: 0; display: block; } .thl-offices__list { display: flex; flex-direction: column; gap: 10px; max-height: 490px; overflow-y: auto; padding-right: 6px; } .thl-offices__list::-webkit-scrollbar { width: 6px; } .thl-offices__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; } .thl-office-item { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--thl-radius); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: border-color .15s ease, background .15s ease, transform .15s ease; } .thl-office-item:hover { background: rgba(255,255,255,.08); transform: translateX(2px); } .thl-office-item.is-active { border-color: var(--thl-color-star); background: rgba(255,218,48,.09); } .thl-office-item:focus-visible { outline: 2px solid var(--thl-color-star); outline-offset: 2px; } .thl-office-item__pin { color: var(--thl-color-star); flex: 0 0 auto; margin-top: 2px; } .thl-office-item.is-active .thl-office-item__pin { animation: thl-pin-pop .3s ease; } @keyframes thl-pin-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } .thl-office-item__body { min-width: 0; } .thl-office-item__name { display: block; font-family: var(--thl-font-heading); font-weight: 700; font-size: 1.05rem; color: #fff; } .thl-office-item__addr { display: block; font-size: .88rem; opacity: .8; margin: 2px 0 8px; line-height: 1.5; } .thl-office-item__links { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; } .thl-pa .thl-office-item__links .thl-office__phone { color: var(--thl-color-star); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; } .thl-pa .thl-office-item__links .thl-office__dir { color: rgba(255,255,255,.72); text-decoration: none; font-size: .85rem; font-weight: 600; } .thl-pa .thl-office-item__links .thl-office__dir:hover { color: #fff; } @media (max-width: 860px) { .thl-offices--map .thl-offices__layout { grid-template-columns: 1fr; } .thl-offices__list { max-height: none; } .thl-offices__mapwrap, .thl-offices__map { min-height: 320px; } } /* ============================================================ THL v1.9 — spec-completion: references, cases pills, hero Google cell ============================================================ */ /* ---- References / sources accordion (author box) ---- */ .thl-refs { margin-top: 12px; } .thl-refs .thl-acc__item { border: 1px solid rgba(0,0,0,.12); border-radius: var(--thl-radius); } .thl-refs__list { margin: 0; padding: 4px 0 4px 1.5em; } .thl-refs__list li { margin-bottom: .5em; font-size: .92rem; line-height: 1.5; } .thl-refs__list li::marker { color: var(--thl-color-accent); } .thl-pa .thl-refs__list a { color: var(--thl-color-accent); word-break: break-word; text-decoration: underline; } /* ---- Case-type filter pills on Other Cases ---- */ .thl-cases__pills { margin: 0 0 24px; } .thl-cases .thl-tag { border-color: rgba(255,255,255,.35); } .thl-cases .thl-tag--active { background: var(--thl-color-primary); border-color: var(--thl-color-primary); color: #fff; } /* ---- Hero trust bar Google cell ---- */ .thl-trustbar__google { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .thl-trustbar__google .thl-review__g { display: inline-flex; } .thl-trustbar__google strong { font-family: var(--thl-font-heading); } .thl-trustbar__google .thl-stars { color: var(--thl-color-star); letter-spacing: 1px; } .thl-trustbar__gnote { font-size: .86rem; opacity: .85; } .thl-hero--image .thl-trustbar__google { color: var(--thl-color-heading); } /* ---- Floating chatbot stub ---- */ .thl-chatbot { position: fixed; right: 20px; bottom: 20px; z-index: 9998; } .thl-chatbot__toggle { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; background: var(--thl-color-primary); color: var(--thl-color-primary-text); font-size: 1.5rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); } .thl-chatbot__badge { position: absolute; top: -2px; right: -2px; background: #e23; color: #fff; font-size: .7rem; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .thl-chatbot__panel { position: absolute; right: 0; bottom: 74px; width: 300px; max-width: 78vw; background: #fff; color: var(--thl-color-text); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.28); overflow: hidden; display: none; } .thl-chatbot.is-open .thl-chatbot__panel { display: block; } .thl-chatbot__head { background: var(--thl-color-dark); color: #fff; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; } .thl-chatbot__close { background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; line-height: 1; } .thl-chatbot__body { padding: 16px; } .thl-chatbot__msg { background: rgba(0,0,0,.05); border-radius: 12px; padding: 10px 14px; margin: 0 0 10px; font-size: .9rem; } .thl-chatbot__cta { margin: 0 16px 16px; width: calc(100% - 32px); justify-content: center; } @media (max-width: 600px) { .thl-chatbot { right: 14px; bottom: 14px; } } /* ============================================================ JT template review round (2026-07-17 Loom + dev-notes doc) Appended last so these win the cascade. px not rem — Astra roots at 15px, so rem sizes undershoot the intended scale. ============================================================ */ /* --- 1 · Typography: H2/H3 must clearly outrank 18px body text --- */ body.thl-template .thl-pa .thl-h { font-size: 30px; } body.thl-template .thl-pa h3.thl-h { font-size: 22px; } body.thl-template .thl-pa .thl-prose > h2 { font-size: 28px; } body.thl-template .thl-pa .thl-prose > h3 { font-size: 22px; } @media (max-width: 760px) { body.thl-template .thl-pa .thl-h { font-size: 26px !important; } body.thl-template .thl-pa .thl-prose > h2 { font-size: 24px !important; } body.thl-template .thl-pa .thl-prose > h3 { font-size: 20px !important; } } /* Numbered lists match the chevron-bullet treatment: accent markers, indented */ .thl-pa .thl-prose ol:not([class]) { padding-left: 1.7em; } .thl-pa .thl-prose ol:not([class]) > li { margin-bottom: .55em; padding-left: .4em; } .thl-pa .thl-prose ol:not([class]) > li::marker { color: var(--thl-color-accent); font-weight: 800; font-family: var(--thl-font-heading); } /* --- 2 · Trust factors: bigger figures, breathing room under the divider --- */ .thl-trustbar { padding-top: 18px; } .thl-trustbar__google strong, .thl-trustbar__stat strong { font-size: 21px; } /* The firm-total recovered figure must not read as another case result: accent color + larger figure + small-caps label. */ .thl-pa .thl-trustbar__stat--recovered strong { font-size: 26px; color: var(--thl-color-star); } .thl-hero--image .thl-trustbar__stat--recovered strong { color: var(--thl-color-accent); } .thl-trustbar__stat--recovered { text-transform: uppercase; letter-spacing: .05em; font-size: .82em; font-weight: 600; } .thl-sb-cta__proof { padding-top: 14px; } .thl-sb-cta__proof-cell strong { font-size: 21px; } .thl-sb-cta__proof-cell--recovered strong { font-size: 23px; } /* --- 5 · CTA variants: soft = button pair only; alt = warm tint band --- */ .thl-pa__content .thl-inline-cta--soft { background: transparent; border: 0; box-shadow: none; padding: 6px 0; } .thl-inline-cta--soft .thl-inline-cta__btns { justify-content: center; margin-top: 0; } .thl-pa__content .thl-inline-cta--soft-alt { background: var(--thl-cta-soft-bg, #f3ece1); border-radius: var(--thl-radius); padding: 18px 16px; } /* --- 5b · Mobile CTA reduction: bottom sticky bar is the single CTA --- In-article bands and the sidebar's top CTA card hide on mobile; the card inside .thl-sb-sticky (stacked at the page end) is the one that remains. */ @media (max-width: 899px) { body.thl-template .thl-pa__content .thl-inline-cta { display: none !important; } body.thl-template .thl-sidebar > .thl-sb-cta { display: none !important; } } /* --- 7 · Areas We Serve: office cities lead with a pin, even unlinked --- */ .thl-areas__list li.is-office > span::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; } .thl-areas--panel .thl-areas__list li.is-office > span { color: var(--thl-color-star); border-color: rgba(255,218,48,.45); background: rgba(255,255,255,.05); font-weight: 600; } /* Areas band relocated below Offices: give the panel band its own rhythm */ .thl-areasband { padding: 34px 20px 10px; } .thl-areasband .thl-areas { margin: 0 0 24px; } /* --- 11 · Published-by band (now after the FAQ section) + reviewer column --- */ .thl-authorband { padding: 26px 20px 6px; } .thl-authorband .thl-authorbox { margin: 0; } .thl-authorbox__cols { display: flex; flex-wrap: wrap; gap: 22px 40px; } .thl-authorbox__cols .thl-authorbox__head { flex: 1 1 280px; min-width: 240px; } .thl-authorbox__reviewer .thl-trustacc__badge { margin-right: 2px; } .thl-authorbox__reviewer .thl-authorbox__avatar { width: 56px; height: 56px; } /* --- 9 · Intro video slot (per-page pa_video) --- */ .thl-video--intro { margin: 24px 0 8px; } /* Article headings darken to the brand's deep navy (JT: "darken … so it pops a bit more"). Scoped to prose + magazine cards — always on light ground, so inverted/dark-band headings are untouched. Override per site via token. */ body.thl-template .thl-pa .thl-prose > h2, body.thl-template .thl-pa .thl-prose > h3, body.thl-template .thl-pa .thl-h3card h3, body.thl-template .thl-pa .thl-step__body h3 { color: var(--thl-heading-ink, var(--thl-color-dark)) !important; } /* Soft CTA variants sit on light ground (page white / warm tan), so the band's white-on-blue button styling has no contrast there: primary goes solid brand blue, the phone ghost goes deep navy with a visible border. */ .thl-pa .thl-inline-cta--soft a.thl-btn--primary { background: var(--thl-color-primary); color: var(--thl-color-primary-text); } .thl-pa .thl-inline-cta--soft a.thl-btn--primary:hover { background: var(--thl-color-primary-hover); color: var(--thl-color-primary-text); } .thl-pa .thl-inline-cta--soft a.thl-btn--ghost { color: var(--thl-color-heading); border-color: var(--thl-color-heading); background: transparent; } .thl-pa .thl-inline-cta--soft a.thl-btn--ghost:hover { color: var(--thl-color-heading-invert); background: var(--thl-color-heading); border-color: var(--thl-color-heading); } /* Award-badge carousel (Elementor image-carousel above the footer): badges sat edge-to-edge — inset each background within its slide so there's always breathing room between badges (JT note). Content-box clipping pads the image without changing slide widths. Scoped to template pages only. */ body.thl-template .elementor-swiper .elementor-carousel-image { padding: 0 14px; box-sizing: border-box; background-origin: content-box; background-clip: content-box; background-size: contain; background-repeat: no-repeat; background-position: center; } /* Badge links (footer media-carousel now links out): visible hover lift + keyboard focus ring, per the accessibility note in JT's dev doc. */ body.thl-template .elementor-swiper .swiper-slide a { display: block; transition: transform .15s ease, opacity .15s ease; } body.thl-template .elementor-swiper .swiper-slide a:hover { transform: translateY(-3px); opacity: .85; } body.thl-template .elementor-swiper .swiper-slide a:focus-visible { outline: 2px solid var(--thl-color-primary); outline-offset: 3px; border-radius: 4px; } /* ============ Author / Legally-reviewed band restyle (2026-07-20) ============ Was a sparse white strip — now a warm card: publisher and reviewer as two balanced columns split by a hairline, share row tucked under a rule. */ .thl-authorband { padding: 30px 20px 14px; } .thl-authorband .thl-authorbox { padding: 26px 32px 20px; background: linear-gradient(180deg, #fbfaf7, #f5f1e9); border: 1px solid rgba(144,112,81,.24); box-shadow: 0 10px 26px rgba(2,3,57,.05); } .thl-authorband .thl-authorbox__cols { display: grid; grid-template-columns: 1fr 1px 1fr; column-gap: 44px; align-items: center; } .thl-authorband .thl-authorbox__cols::after { content: ""; grid-column: 2; grid-row: 1; align-self: stretch; width: 1px; background: rgba(144,112,81,.28); } .thl-authorband .thl-authorbox__cols .thl-authorbox__head { grid-row: 1; min-width: 0; } .thl-authorband .thl-authorbox__cols .thl-authorbox__head:first-child { grid-column: 1; } .thl-authorband .thl-authorbox__cols .thl-authorbox__reviewer { grid-column: 3; } .thl-authorband .thl-authorbox__label { color: var(--thl-color-accent); opacity: 1; font-weight: 700; letter-spacing: .1em; font-size: 12px; } .thl-authorband .thl-authorbox__name { font-size: 22px; color: var(--thl-heading-ink, var(--thl-color-dark)); margin-top: 3px; } .thl-authorband .thl-authorbox__name a { color: var(--thl-heading-ink, var(--thl-color-dark)); } .thl-authorband .thl-authorbox__name a:hover { color: var(--thl-color-accent); } .thl-authorband .thl-authorbox__blurb { font-size: 15px; opacity: .8; margin-top: 4px; } .thl-authorband .thl-authorbox__reviewer .thl-authorbox__avatar { width: 66px; height: 66px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(144,112,81,.4); } .thl-authorband .thl-share { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(144,112,81,.18); } @media (max-width: 820px) { .thl-authorband .thl-authorbox__cols { grid-template-columns: 1fr; row-gap: 18px; } .thl-authorband .thl-authorbox__cols::after { content: none; } .thl-authorband .thl-authorbox__cols .thl-authorbox__head:first-child, .thl-authorband .thl-authorbox__cols .thl-authorbox__reviewer { grid-column: 1; } .thl-authorband .thl-authorbox__cols .thl-authorbox__reviewer { grid-row: auto; padding-top: 16px; border-top: 1px solid rgba(144,112,81,.18); } } /* ---- Mobile hero crop (JT doc §13): keep the recognizable artwork ---- The watercolor's dome sits mid-image; cover-cropping at right-center left only a bridge sliver on phones, and the flat wash erased the rest. Frame the dome (58%) and fade the wash vertically: opaque behind the headline, revealing an artwork band across the hero's base. */ @media (max-width: 760px) { body.thl-template .thl-hero--image { background-position: var(--thl-hero-pos-mobile, 58%) 32%; padding-bottom: 116px; } body.thl-template .thl-hero--image::before { background: linear-gradient(180deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.90) 36%, rgba(255,255,255,.94) 56%, rgba(255,255,255,.85) 72%, rgba(255,255,255,.40) 100%); } }