/** * Attorney page, layout v2 (dev). * * The tab strip is WPBakery's own [vc_tta_tabs] in the trim the service pages * use, so the styling comes from theGem/WPBakery — nothing is restyled here. * What this file does is lay the page out: the strip runs the full content * width under the breadcrumbs, and below it the active panel and the * credentials sidebar sit side by side, with the sidebar always visible. * * [vc_tta_tabs] is one element containing its own panels, so the strip cannot * be a separate row. Instead the wrapper is a grid and the tta is set to * display:contents, which promotes its own two children — the strip and the * panel container — to grid items in their own right. * * Everything is scoped to .attv2 / .attv2-body, so this loads site-wide but * cannot reach the existing attorney pages. */ .attv2-body > .vc_column-inner > .wpb_wrapper { display: grid; grid-template-columns: minmax(0, 1fr) 32%; grid-template-areas: "tabs tabs" "panel side"; column-gap: 40px; align-items: start; } /* WPBakery wraps the tta in a .vc_tta-container as well, so BOTH wrappers have to go transparent or the nav stays trapped in the panel column. */ .attv2-body .vc_tta-container, .attv2-tta { display: contents; } .attv2-tta > .vc_tta-tabs-container { grid-area: tabs; } .attv2-tta > .vc_tta-panels-container { grid-area: panel; min-width: 0; } /* The credentials column, whichever way it was built: .attv2-side is what the builder emits, #sidebarright is the row hand-arranged in the page builder. */ .attv2-body .attv2-side, .attv2-body > .vc_column-inner > .wpb_wrapper > #sidebarright { grid-area: side; margin: 0; width: auto; } /* The strip is styled entirely by the existing #datapane rules in style.css — the same ones the service pages use. Nothing is restyled here. The one exception: .single-tshowcase carries three !important overrides aimed at an older tab layout, which shrink the tabs to 14px, drop the uppercase and strip the padding. Put those back at ID specificity so #datapane wins. */ .single-tshowcase #datapane .vc_tta-tab > a { font-size: 16px !important; padding: 12px 25px !important; /* No text-transform here on purpose: the section titles are already written in title case, so letting style.css's `.single-tshowcase … {text-transform: none}` win shows them exactly as authored — "Honors & Awards", not "HONORS & AWARDS" and not `capitalize`, which would also touch words like "of" in any future title. */ /* The shared rules add the 4px underline only on hover/active, so it appears out of nothing, grows the tab and shoves the whole inline-block line — the bounce. Reserve the 4px on every tab and only change its colour. */ border-bottom: 4px solid transparent !important; vertical-align: bottom; } /* style.css centres the strip for the service pages (`text-align:center !important` on #datapane .vc_tta-tabs-list); this template wants it left. */ .single-tshowcase #datapane .vc_tta-tabs-list { text-align: left !important; } /* Left-aligning the strip is not enough: each tab carries 25px of side padding, so the first TITLE still starts 25px in from the content edge and reads as indented against the panel heading below it. Drop the padding on the first tab only, so the text is flush and the rhythm between tabs is unchanged. */ .single-tshowcase #datapane .vc_tta-tab:first-child > a { padding-left: 0 !important; } .single-tshowcase #datapane .vc_tta-tab > a:hover, .single-tshowcase #datapane .vc_tta-tab.vc_active > a { border-bottom-color: #2988CC !important; } .single-tshowcase #datapane .vc_tta-tab { vertical-align: bottom; } /* ---- page header: headshot sunk 30px so it overlaps the row below --------- */ /* position:relative keeps the photo out of the flow, so it sinks without pushing anything down. The header row is overflow:hidden though and would cut it off at the row edge — overflow-x:clip with overflow-y:visible lets it bleed downward while still preventing a sideways scrollbar. (overflow-x: hidden with overflow-y:visible silently computes to auto and gives you one.) Scoped with :has(#datapane) so it only applies to the v2 template, never to the 90 live attorney pages. */ body.zheader-v2 .vc_row:has(.attprofileimage) { overflow-x: clip; overflow-y: visible; } /* The headshot sits on top of everything. */ body.zheader-v2 .attprofileimage { position: relative; top: 51px; /* lands the photo's bottom edge on the breadcrumb rule */ z-index: 1002; } /* The header's background art continues down behind the breadcrumb band: grow the header row's painted area by the height of that band, then pull the following content back up by the same amount so nothing actually moves. */ /* Two rows contain the headshot — an outer stretched row that carries the background art and an inner row that holds the columns. The extension has to go on the OUTER one (:not(.vc_inner)), and needs !important because VC writes that row's own padding as `padding-bottom: 0 !important` in its generated vc_custom_ class. Putting it on the inner row grows nothing visible. */ body.zheader-v2 .vc_row:not(.vc_inner):has(.attprofileimage) { padding-bottom: 52px !important; margin-bottom: -52px !important; /* Do NOT raise this row: its background art would then paint over the breadcrumb row that follows and wipe the breadcrumbs out. Only the photo itself gets lifted, below. */ } /* Breadcrumb row keeps no background of its own, so the header art shows through it. It is still raised above that art so the links stay clickable and legible — but below the photo, which owns the top layer. */ body.zheader-v2 .vc_row:has(.breadcrumb) { /* Translucent white rather than `opacity`: opacity would fade the breadcrumb links along with the fill. A background alpha lets the header art ghost through while the text stays fully solid. */ background-color: rgba(255, 255, 255, 0.4); /* WPBakery Design Options hung a 1px rule on this row's top and bottom via .vc_custom_1787592749981. Between 992px and 1199px the breadcrumb column carries vc_hidden-md, so the row empties out and those two borders are the only thing left of it - a 2px hairline ruled straight across the header art. Dropping them lets the empty row collapse to zero height and disappear, while the band still fills normally at the widths where the breadcrumb is actually shown. */ border-top: 0 !important; border-bottom: 0 !important; /* Solid white, full width — the row is a stretch_row so it already spans the viewport; only the fill was missing. Deliberately NO z-index. As a later sibling it already paints above the art row's background, and giving it a stacking level put it above the photo as well — which drew the row's 1px rule straight across the headshot. Leaving it at auto lets the photo's own z-index win, so the headshot still sits over this white band rather than being cut off. */ } /* The sidebar blocks keep the grey cards they already had; only the gap between them needs setting now that they are stacked rather than sitting in a row. */ .attv2-side .wpb_text_column { margin-bottom: 0; } .attv2-side h4 { margin-top: 0; } @media (max-width: 991px) { .attv2-body > .vc_column-inner > .wpb_wrapper { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "panel" "side"; column-gap: 0; } .attv2-body .attv2-side, .attv2-body > .vc_column-inner > .wpb_wrapper > #sidebarright { margin-top: 30px; } } /* ---- header contact icons ------------------------------------------------- */ /* attorney-v2.js turns the phone and email into icon-only links and moves them into the LinkedIn / print / vCard row, so all five sit on one line. Only the spacing is set here — the glyphs are Font Awesome 5, already loaded. */ body.zheader-v2 .tshowcase-box-social { display: flex; /* Never wrap. The whole Team Showcase column shrink-wraps to its content, which leaves this box about 215px wide, while five 30-35px icons plus four 14px gaps need roughly 217px. Two pixels short is enough to drop the vCard onto a second line, so the box is sized to its contents rather than to whatever the column happens to allow. */ flex-wrap: nowrap; min-width: max-content; align-items: center; gap: 6px; } /* Without flex:0 0 auto the icons would squash instead of widening the box. */ body.zheader-v2 .tshowcase-box-social > a { display: inline-flex; margin: 0; flex: 0 0 auto; } /* Team Showcase ships these at fa-lg (1.33em ~ 26.7px), which reads heavy at this size. Pin them instead of relying on the inherited em. */ body.zheader-v2 .tshowcase-box-social i { font-size: 20px; line-height: 1; } /* The contact column stretches the full height of the header row but its content sat at the top, leaving ~128px of dead space underneath. Push the block down so it finishes level with the bottom of the row (and with the headshot beside it). */ body.zheader-v2 .vc_row.vc_inner .wpb_column:has(.tshowcase-box-info) > .vc_column-inner { display: flex; flex-direction: column; justify-content: flex-end; } /* Bottom-aligning the wrapper is not enough on its own. The [show-team] output sits in a bare
carrying min-height:200px while its content is only 92px tall, so 108px of dead space held the block up off the row edge. */ body.zheader-v2 .vc_row.vc_inner .wpb_wrapper > div:has(> .tshowcase) { min-height: 0 !important; } /* ---- section headings inside the data boxes ------------------------------- */ /* These come through at 28px/36px, the same as the big lead statement, which is far too heavy now that they sit inside the grey cards. Listed explicitly rather than matching [class*="data"] so the lead line — also an

— and any generated thegem-custom-* class are left alone. */ body:has(#datapane) .practiceareasdata h4, body:has(#datapane) .educationdata h4, body:has(#datapane) .baradmissionsdata h4, body:has(#datapane) .professionalgroupsdata h4, body:has(#datapane) .publicationsdata h4, body:has(#datapane) .puiblicationsdata h4, body:has(#datapane) .presentationsdata h4, body:has(#datapane) .inthecommunitydata h4, body:has(#datapane) .honorsandawardsdata h4 { font-size: 20px; line-height: 28px; } /* ---- right sidebar body text ---------------------------------------------- */ /* The list items came through at 20px/26px — the same size as the headings once those were reduced, so the two read as one flat block. Dropping the body text to 16px restores the hierarchy. The headings are untouched: their own rule above is more specific, so it still wins for

. */ body:has(#datapane) .attv2-side, body:has(#datapane) .attv2-side p, body:has(#datapane) .attv2-side li, body:has(#datapane) .attv2-side li a, body:has(#datapane) .attv2-side span { font-size: 16px; line-height: 21px; } /* Line-height alone barely moved these: each item is padded 13px top and bottom by theGem's list styling, so a 21px line sat in a 47px box. The padding is where the air actually was. */ body:has(#datapane) .attv2-side li { padding-top: 5px; padding-bottom: 5px; } /* ---- sidebar card spacing -------------------------------------------------- */ /* Each card carried a different generated vc_custom_ padding — Practice Areas 20px, Education 37px, Bar Admissions 50px — set back when the heading lived OUTSIDE the box. Now that it sits inside, that reads as three different gaps above three identical headings. Normalise all of them. !important because VC writes those generated rules that way. */ body:has(#datapane) .attv2-side .practiceareasdata, body:has(#datapane) .attv2-side .educationdata, body:has(#datapane) .attv2-side .baradmissionsdata { padding-top: 22px !important; padding-bottom: 22px !important; } /* And a consistent gap under the heading. theGem hangs the first list item on a -30px top margin, which pulled the list up under the heading in the two