/* ========================================================================== Custom Ginzburglaw Plugin — site-wide CSS overrides Add new sections below as needed. Keep one clearly labeled block per feature. ========================================================================== */ /* -------------------------------------------------------------------------- Practice Areas accordion — custom collapsed/expanded icon per item -------------------------------------------------------------------------- Setup needed in the Elementor editor (per item, one-time): For EACH accordion item -> Advanced tab (on that item) -> CSS ID -> set to one of: banking-litigation / civil-litigation / commercial-law / inheritance-disputes / insolvency-crisis / real-estate / tort-claims / capital-markets / hedge-funds No widget-level CSS class needed — targeted directly by each item's unique ID. !important is required on background-image: Elementor's icon system (nested accordion / atomic widgets) applies its own !important reset on this property for icon elements, which silently beats any normal-priority rule — confirmed by testing directly in the live DOM. -------------------------------------------------------------------------- */ :root { --practice-area-icon-size: 45px; /* <-- change this to resize all 9 icons */ /* Set to true to switch all 9 icons to the dark (#1A1A1A) set below. CSS can't branch on a variable by itself, so accordion-dark-mode.js reads this value on page load and toggles a class on that the dark rules at the bottom of this file key off. */ --is-accordion-dark-mode: true; } .e-n-accordion-item[id] .e-n-accordion-item-title-icon .e-opened, .e-n-accordion-item[id] .e-n-accordion-item-title-icon .e-closed { width: var(--practice-area-icon-size); height: var(--practice-area-icon-size); background-repeat: no-repeat; background-position: center; background-size: contain; } /* Hide the default Elementor icon glyph (font icon or svg) since we're replacing it with a background-image per item below. */ .e-n-accordion-item[id] .e-n-accordion-item-title-icon .e-opened i, .e-n-accordion-item[id] .e-n-accordion-item-title-icon .e-opened svg, .e-n-accordion-item[id] .e-n-accordion-item-title-icon .e-closed i, .e-n-accordion-item[id] .e-n-accordion-item-title-icon .e-closed svg { display: none !important; } /* Banking Litigation */ .e-n-accordion-item#banking-litigation .e-closed { background-image: url('../img/practice-areas/icon-banking-litigation-collapsed.svg') !important; } .e-n-accordion-item#banking-litigation .e-opened { background-image: url('../img/practice-areas/icon-banking-litigation-expanded.svg') !important; } /* Commercial Law */ .e-n-accordion-item#commercial-law .e-closed { background-image: url('../img/practice-areas/icon-commercial-law-collapsed.svg') !important; } .e-n-accordion-item#commercial-law .e-opened { background-image: url('../img/practice-areas/icon-commercial-law-expanded.svg') !important; } /* Inheritance Disputes */ .e-n-accordion-item#inheritance-disputes .e-closed { background-image: url('../img/practice-areas/icon-inheritance-disputes-collapsed.svg') !important; } .e-n-accordion-item#inheritance-disputes .e-opened { background-image: url('../img/practice-areas/icon-inheritance-disputes-expanded.svg') !important; } /* Real Estate */ .e-n-accordion-item#real-estate .e-closed { background-image: url('../img/practice-areas/icon-real-estate-collapsed.svg') !important; } .e-n-accordion-item#real-estate .e-opened { background-image: url('../img/practice-areas/icon-real-estate-expanded.svg') !important; } /* Civil Litigation */ .e-n-accordion-item#civil-litigation .e-closed { background-image: url('../img/practice-areas/icon-civil-litigation-collapsed.svg') !important; } .e-n-accordion-item#civil-litigation .e-opened { background-image: url('../img/practice-areas/icon-civil-litigation-expanded.svg') !important; } /* Insolvency & Crisis */ .e-n-accordion-item#insolvency-crisis .e-closed { background-image: url('../img/practice-areas/icon-insolvency-crisis-collapsed.svg') !important; } .e-n-accordion-item#insolvency-crisis .e-opened { background-image: url('../img/practice-areas/icon-insolvency-crisis-expanded.svg') !important; } /* Tort Claims */ .e-n-accordion-item#tort-claims .e-closed { background-image: url('../img/practice-areas/icon-tort-claims-collapsed.svg') !important; } .e-n-accordion-item#tort-claims .e-opened { background-image: url('../img/practice-areas/icon-tort-claims-expanded.svg') !important; } /* Capital Markets */ .e-n-accordion-item#capital-markets .e-closed { background-image: url('../img/practice-areas/icon-capital-markets-collapsed.svg') !important; } .e-n-accordion-item#capital-markets .e-opened { background-image: url('../img/practice-areas/icon-capital-markets-expanded.svg') !important; } /* Hedge Funds */ .e-n-accordion-item#hedge-funds .e-closed { background-image: url('../img/practice-areas/icon-hedge-funds-collapsed.svg') !important; } .e-n-accordion-item#hedge-funds .e-opened { background-image: url('../img/practice-areas/icon-hedge-funds-expanded.svg') !important; } /* -------------------------------------------------------------------------- Practice Areas accordion — DARK icon set -------------------------------------------------------------------------- Active only when has class "accordion-dark-mode", which accordion-dark-mode.js adds automatically when --is-accordion-dark-mode (above) is "true". Same 9 items, same states, just pointed at assets/img/practice-areas-dark/ instead. Higher specificity than the light rules above (extra body class), so these win whenever active. -------------------------------------------------------------------------- */ body.accordion-dark-mode .e-n-accordion-item#banking-litigation .e-closed { background-image: url('../img/practice-areas-dark/icon-banking-litigation-collapsed.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#banking-litigation .e-opened { background-image: url('../img/practice-areas-dark/icon-banking-litigation-expanded.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#commercial-law .e-closed { background-image: url('../img/practice-areas-dark/icon-commercial-law-collapsed.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#commercial-law .e-opened { background-image: url('../img/practice-areas-dark/icon-commercial-law-expanded.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#inheritance-disputes .e-closed { background-image: url('../img/practice-areas-dark/icon-inheritance-disputes-collapsed.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#inheritance-disputes .e-opened { background-image: url('../img/practice-areas-dark/icon-inheritance-disputes-expanded.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#real-estate .e-closed { background-image: url('../img/practice-areas-dark/icon-real-estate-collapsed.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#real-estate .e-opened { background-image: url('../img/practice-areas-dark/icon-real-estate-expanded.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#civil-litigation .e-closed { background-image: url('../img/practice-areas-dark/icon-civil-litigation-collapsed.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#civil-litigation .e-opened { background-image: url('../img/practice-areas-dark/icon-civil-litigation-expanded.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#insolvency-crisis .e-closed { background-image: url('../img/practice-areas-dark/icon-insolvency-crisis-collapsed.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#insolvency-crisis .e-opened { background-image: url('../img/practice-areas-dark/icon-insolvency-crisis-expanded.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#tort-claims .e-closed { background-image: url('../img/practice-areas-dark/icon-tort-claims-collapsed.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#tort-claims .e-opened { background-image: url('../img/practice-areas-dark/icon-tort-claims-expanded.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#capital-markets .e-closed { background-image: url('../img/practice-areas-dark/icon-capital-markets-collapsed.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#capital-markets .e-opened { background-image: url('../img/practice-areas-dark/icon-capital-markets-expanded.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#hedge-funds .e-closed { background-image: url('../img/practice-areas-dark/icon-hedge-funds-collapsed.svg') !important; } body.accordion-dark-mode .e-n-accordion-item#hedge-funds .e-opened { background-image: url('../img/practice-areas-dark/icon-hedge-funds-expanded.svg') !important; } /* -------------------------------------------------------------------------- Practice Areas accordion — divider between items -------------------------------------------------------------------------- Short centered separator line under each item's title. Scoped to the 9 practice-area item IDs only, so it won't affect other accordions on the site. --practice-area-divider-enabled: "block" to show, "none" to hide. --practice-area-divider-color: line color. --practice-area-divider-width: flat line length (px), used only when the percent variable below is `initial`. --practice-area-divider-width-percent: line length as a % of the item's own title text width while CLOSED. Set to `initial` to disable and fall back to the flat width above. --practice-area-divider-width-percent-open: line length as a % of the title text width while OPEN. --practice-area-divider-offset: vertical gap pushing the line down from the text baseline. Anchored to the title text itself, which Elementor already sizes to fit its content — so % widths here resolve against the real text width, no JS measurement needed. Open state read from the native
[open] attribute Elementor itself uses for the widget's own active styling. If Elementor's own item border is on for this widget (Style tab -> Accordion -> Border), turn it off first or you'll get both lines stacked. -------------------------------------------------------------------------- */ :root { --practice-area-divider-enabled: block; --practice-area-divider-color: #B17030; --practice-area-divider-width: 60px; /*The divider percentage parm overrides the width parm.*/ --practice-area-divider-width-percent: 40%; --practice-area-divider-width-percent-open: 100%; --practice-area-divider-offset: 14px; } .e-n-accordion-item:is(#banking-litigation, #commercial-law, #inheritance-disputes, #real-estate, #civil-litigation, #insolvency-crisis, #tort-claims, #capital-markets, #hedge-funds) .e-n-accordion-item-title-header { position: relative; } .e-n-accordion-item:is(#banking-litigation, #commercial-law, #inheritance-disputes, #real-estate, #civil-litigation, #insolvency-crisis, #tort-claims, #capital-markets, #hedge-funds) .e-n-accordion-item-title-header::after { content: ""; display: var(--practice-area-divider-enabled); position: absolute; top: 77.5%; inset-inline-start: 0; width: var(--practice-area-divider-width-percent, var(--practice-area-divider-width)); height: 1px; background-color: var(--practice-area-divider-color); transform: translateY(var(--practice-area-divider-offset)); } .e-n-accordion-item[open]:is(#banking-litigation, #commercial-law, #inheritance-disputes, #real-estate, #civil-litigation, #insolvency-crisis, #tort-claims, #capital-markets, #hedge-funds) .e-n-accordion-item-title-header::after { width: var(--practice-area-divider-width-percent-open, 100%); } /* -------------------------------------------------------------------------- Single post — Related Posts heading chevron -------------------------------------------------------------------------- OceanWP prefixes any ".theme-heading .text" with a Font Awesome chevron (content: "\f105"). That base selector is used theme-wide, so this override is scoped to #related-posts only — it won't touch other headings on the site. -------------------------------------------------------------------------- */ .gbl-latest-posts__archive-link { } #related-posts .related-posts-title .text::before, #related-posts .related-posts-title .text::after { content: none; } /* -------------------------------------------------------------------------- Footer widgets — sitemap bullets, contact color, title accent, centering, copyright alignment -------------------------------------------------------------------------- Requested Aug 2026: remove the Font Awesome bullet Ocean Extra puts before each Sitemap link, match the Address text color to the Phone/Email links, recolor the widget-title accent bar, center all four footer columns, and right-align the copyright line. Scoped to #footer-widgets / #footer-bottom so nothing outside the footer is affected. !important is required on two of these rules — confirmed by testing directly in the live DOM: - .widget-title border-color: OceanWP's Footer Widgets styles set this at higher specificity, so a normal-priority rule here is silently overridden. - #footer-bottom-inner #copyright text-align: OceanWP's own "#footer-bottom.no-footer-nav #copyright" rule (this site has no footer nav, so that modifier class is active) outranks a plain two-ID selector on specificity. -------------------------------------------------------------------------- */ #footer-widgets { margin-left: auto; margin-right: auto; } #footer-widgets .oceanwp-custom-links li a::before { display: none; } #footer .contact-info-widget .oceanwp-contact-title{ color: #c59d55 !important; } #footer-widgets .widget-title { border-color: #DDDDDD !important; } #footer .contact-info-widget i { border: none; font-size: 25px; color: #c59d55 !important; } #ocean_social-1 li a{ border: none; font-size: 30px; color: #c59d55 !important; margin-top: -12px } #ocean_social-1 li a:hover{ color: #DDDDDD !important; } #footer-bottom-inner #copyright { text-align: right !important; } #block-7 { transform: translateY(20px); } #block-7 img { width: 187px; margin-right: 0; } #footer-bottom { border-top: 1px solid rgb(221 221 221 / 0.04); } /* -------------------------------------------------------------------------- Footer widgets — center the column group -------------------------------------------------------------------------- Follow-up to the block above: Footer 1 (first of the 4 configured Footer Columns) has no widget in it since the About Us placeholder was removed. OceanWP's column grid uses same-direction floats, and a genuinely empty float collapses to 0 height and stops reserving its slot — so the 3 real columns (sitemap / contact / social+logo) all shift toward one edge instead of filling the row, leaving a visible gap on the other side instead of even side margins. Switching the row to flexbox with centered content fixes this regardless of which column ends up empty, and re-centers automatically if a widget is ever added back to Footer 1 (nothing left to hide at that point). -------------------------------------------------------------------------- */ #footer-widgets .footer-widgets-inner { display: flex; flex-wrap: wrap; justify-content: space-evenly; } #footer-widgets .footer-widgets-inner .col:not(:has(*)) { display: none; } #footer-widgets .col-3 { margin-right: -70px !important; } #footer-widgets .footer-widgets-inner { column-gap: 30px; } /* -------------------------------------------------------------------------- Homepage — Latest Posts section -------------------------------------------------------------------------- Renders the [ginzburglaw_latest_posts] shortcode (see plugin PHP file). Drop a Shortcode widget anywhere on the homepage in Elementor and paste [ginzburglaw_latest_posts] into it. 3-column card grid, stacks to 1 column under 768px. -------------------------------------------------------------------------- */ .gbl-latest-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: max(20px, 10%); } @media (max-width: 768px) { .gbl-latest-posts__grid { grid-template-columns: 1fr; } } .gbl-latest-posts__box { border: 1px solid #DDDDDD; border-radius: 4px; overflow: hidden; background: #fff; transition: box-shadow 0.2s ease; } .gbl-latest-posts__box:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } .gbl-latest-posts__thumb { display: block; line-height: 0; } /* Uniform thumbnail size across the cards. NOTE: a fixed `height` here does NOT work — OceanWP's style.min.css has `img[class*="attachment-"] { height: auto }`, the same specificity (0,1,1) as this selector, and the theme stylesheet loads after this plugin's, so it wins the tie and the images fall back to their natural ratio. `aspect-ratio` sidesteps the conflict entirely (nothing else on the page sets it) and keeps the crop proportional when the grid stacks to 1 column under 768px. */ .gbl-latest-posts__thumb img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; } .gbl-latest-posts__title { margin: 16px 20px 8px; font-size: 18px; line-height: 1.4; } .gbl-latest-posts__title a { color: inherit; text-decoration: none; } .gbl-latest-posts__title a:hover { color: #c59d55; } .gbl-latest-posts__excerpt { margin: 0 20px 20px; font-size: 14px; line-height: 1.6; color: #666666; } .gbl-latest-posts__archive-link { display: inline-block; margin-top: 10px; color: #c59d55; font-weight: 600; text-decoration: none; border-bottom: 1px solid #c59d55; } .gbl-latest-posts__archive-link:hover { color: #B17030; border-color: #B17030; } /* -------------------------------------------------------------------------- Blog Archive — hide post date, comment count, and infinite-scroll "end of content" message -------------------------------------------------------------------------- Requested Aug 2026: no per-element Content Builder toggle exists for these on OceanWP's List blog style (that granular toggle UI is only available for Grid/Large Image styles). The Infinite Scroll "Error Text" Customizer field is empty by default (front-end shows OceanWP's own translated fallback, "סוף התוכן") — blanking an already-empty field wouldn't remove it, so a CSS hide is the only way. .blog-entry-bottom is the archive-listing wrapper around just the date + comment-count link (the category label above the title is a separate sibling element, left untouched). .scroller-status is the infinite-scroll.js library's status/message box, only present when Blog Archives Pagination Style = Infinite Scroll. Both classes are specific to archive-listing markup, so single-post pages are unaffected. !important is required on both — confirmed by testing directly in the live DOM: - .blog-entry-bottom: OceanWP's own style.min.css sets this via the more specific ".blog-entry.thumbnail-entry .blog-entry-bottom { display: block }" (two ancestor classes beats our one), which wins on specificity regardless of stylesheet load order. - .scroller-status: the infinite-scroll.js library toggles this element's visibility via an inline style attribute when it reaches the last page, and inline styles beat any non-!important stylesheet rule outright. -------------------------------------------------------------------------- */ .blog-entry-bottom { display: none !important; } .scroller-status { display: none !important; } /* -------------------------------------------------------------------------- Contact form (homepage) — inline labels + styled acceptance checkbox -------------------------------------------------------------------------- Requested Aug 2026. Scoped under .gbl-contact-form, a CSS Class added manually on the Form widget itself (Advanced tab) — matches the same pattern already used for the Practice Areas accordion (targeted ID/class instead of a global selector), so this never affects any other Elementor form that might get added to the site later. Verified against the installed Elementor Pro 4.2.1 source before writing this (modules/forms/classes/form-base.php + fields/acceptance.php + fields/tel.php): - Elementor DOES have a native "Label Position: Inline" setting (label_position, values above/inline) but it's registered as Controls_Manager::HIDDEN — present in code, no UI switcher to use it. Hence doing it with CSS instead. - Every text-like field (text/email/tel) renders as a flat
— no extra wrapper div, so a simple flex row on .elementor-field-group works directly. - The textarea ("הודעה") field uses the same structure/classes (elementor-field-textual is shared by input AND textarea). - The submit button also carries elementor-field-group, but has no .elementor-field-label/.elementor-field-textual child, so it's unaffected by the flex/width rules below (single flex child, same as before). - Acceptance field: field heading is item['field_label'] as