/* ============================================ SCHLACKMAN IP LAW - CUSTOM THEME CSS Brand colors: Navy #1B2A4A, Gold #C9952D v3.1.3: rewrite against the ACTUAL Divi Theme Builder markup. This site builds its header and footer via Theme Builder templates, NOT classic Divi. So #main-header, #main-footer, #footer-widgets, #footer-bottom, #top-menu DO NOT EXIST in the DOM — they were dead selectors in v3.0.x through v3.1.2. All Theme Builder header/footer rules use .et-l--header / .et-l--footer and the generated _tb_header / _tb_footer class suffixes. ============================================ */ /* ---- CLS FIXES ---- */ .et_pb_section.hero-section .et_pb_image, .et_pb_image_wrap img { aspect-ratio: auto; height: auto; width: 100%; } .et_pb_team_member_image { aspect-ratio: 1 / 1; width: 100%; height: auto; } .et_pb_text_inner marquee, [class*="marquee"], [class*="scroll-text"] { will-change: transform; contain: layout style; overflow: hidden; } /* ---- ACCESSIBILITY ---- */ .skip-to-content { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); background: #1B2A4A; color: #fff; padding: 12px 24px; z-index: 100000; font-size: 14px; text-decoration: none; border-radius: 0 0 4px 4px; transition: top 0.2s ease; } .skip-to-content:focus { top: 0; outline: 2px solid #C9952D; outline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid #C9952D !important; outline-offset: 2px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- SECTION DIVIDERS (hr only — #main-header was a dead selector) ---- */ hr, .section-divider { border-color: #1B2A4A; } /* ---- SPACING / READABILITY ---- */ /* Services page hero blank-space fix (still valid — targets body class) */ .page-id-services .et_pb_section:first-of-type, body[class*="our-services"] .et_pb_section:first-of-type { padding-top: 20px !important; } /* Justified services tab content → left-align */ .et_pb_tab .et_pb_tab_content { text-align: left !important; } /* ---- RESPONSIVE (global, non-nav) ---- */ @media (max-width: 980px) { .et_pb_column_1_3 { width: 100% !important; margin-bottom: 30px; } .page-id-contact .et_pb_column_1_2:first-child .et_pb_image { max-width: 250px !important; margin: 0 auto 30px; } } /* v3.1.9 FIX 1: Desktop menu wrap — keep on one line until Divi's hamburger kicks in */ @media (min-width: 981px) { #et-top-navigation nav ul { flex-wrap: nowrap; } #et-top-navigation nav ul li a { white-space: nowrap; } } /* v3.1.9 FIX 2: Hamburger header padding — Divi adds padding-bottom: 20px and margin-top: 30px on the generated TB-header row/section when hamburger activates. */ @media (max-width: 767px) { .et_pb_row_0_tb_header.et_pb_row { padding-top: 10px !important; padding-bottom: 10px !important; margin-top: 0 !important; } .et_pb_section_0_tb_header.et_pb_section { margin-top: 0 !important; } } /* v3.1.13: slick now initializes synchronously in (via functions.php wp_add_inline_script), so the slider container snaps to its final layout before first paint. contain:layout isolates internal layout work so any residual shift inside the container doesn't escape to the rest of the page. */ #lum-home-slider-container { min-height: calc(80vh - 80px); contain: layout; } @media (max-width: 767px) { #lum-home-slider-container { min-height: 400px; contain: layout; } } /* v3.1.11 FIX 2: Mobile hero illustration (wp-image-100415) was clipped by max-height/overflow on its wrapper. Release both. */ @media (max-width: 767px) { .et_pb_image_wrap:has(img.wp-image-100415), .et_pb_image_wrap:has(img.wp-image-100415) img { max-height: none !important; overflow: visible !important; height: auto !important; } } /* v3.1.11 FIX 3: Kill the gray border/shadow that appeared below the hero section on mobile. */ @media (max-width: 767px) { #lum-home-slider-container, #lum-home-slider-container .et_pb_section { border-bottom: none !important; box-shadow: none !important; } } /* v3.1.9 FIX 4: Override Divi's ETmodules @font-face to add font-display: swap. Divi's core emits font-display: block which blocks text render for up to 3s. Re-declaring @font-face with the same family+weight later in source wins. */ @font-face { font-family: ETmodules; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/themes/Divi/core/admin/fonts/modules/all/modules.woff2') format('woff2'), url('/wp-content/themes/Divi/core/admin/fonts/modules/all/modules.woff') format('woff'), url('/wp-content/themes/Divi/core/admin/fonts/modules/all/modules.ttf') format('truetype'); } @media (max-width: 480px) { .home .et_pb_text_inner h1, .hero-heading { font-size: 28px !important; } } /* ============================================ PRIOR LUMEN CUSTOMIZER CSS (preserved verbatim) Original tweaks Steve had in Lumen's Customizer → Additional CSS. Preserved as-is including original quirks so existing layouts match. ============================================ */ .slick-arrow { display: none !important; } .slick-dots { display: none !important; } @media (max-width: 767px) { .lum-home-slide .et_pb_column { margin-top: 0px; } } /* v3.1.8 cleanup: removed empty @media (max-width: 980px) {} and its orphan .et_pb_column .et_pb_row_inner, .et_pb_row { padding: 0px 0; } rule which was unintentionally global (outside the closed media block). */ #lum-home-slider-container { padding-top: 0 !important; } .lum-home-slide { padding-top: 20px !important; } .lum-subtitle-dot:before { display: none } .lum-slide-text::before { margin-left: 50px; } /* v3.1.8 cleanup: removed duplicate .lum-slide-text::before, broken t_pb_button_wrapper (missing leading dot — never matched), and broken et_pb_cta_0.et_pb_promo (missing leading dot). */ .et_pb_promo_description { margin-left: 105px; margin-top: -30px; width: 105%; } .et_pb_button_wrapper { margin-left: 105px; width: 80%; margin-top: -35px; } @media (min-width: 767px) { .lum-home-slide .et_pb_column { min-height: calc(80vh - 80px); } } h1.et_pb_contact_main_title { display: none; } span.et_pb_contact_field_radio { font-weight: 400; } /* ============================================ v3.1.3 DESIGN PASS — Divi Theme Builder selectors only. Ships the full brand-color system (navy + gold) against the actual header and footer markup the site uses. Every selector here was verified from live DOM inspection in the v3.1.3-fixes instructions doc. ============================================ */ /* ---- FIX 3 (v3.1.5): Hero promo button white text — match Lumen's specificity chain ---- */ /* Lumen uses: html body #page-container .et_pb_section .lum-btn.et_pb_promo .et_pb_promo_button.et_pb_button { color: ... } We match the exact chain to win on later-in-source + !important. */ html body #page-container .et_pb_section .lum-btn.et_pb_promo .et_pb_promo_button.et_pb_button, html body #page-container .et_pb_section .lum-btn.et_pb_promo .et_pb_promo_button.et_pb_button:hover { color: #FFFFFF !important; } /* Broader fallback for promo buttons outside Lumen's .lum-btn wrapper */ .et_pb_promo .et_pb_promo_button, .et_pb_promo .et_pb_button, a.et_pb_promo_button, .et_pb_promo_button.et_pb_promo_button, .et_pb_promo .et_pb_promo_button:hover, .et_pb_promo_button.et_pb_promo_button:hover { color: #FFFFFF !important; } /* ---- FIX 4 (v3.1.5): Hide the :after circle on buttons — Lumen-specificity chain ---- */ /* Lumen's :after uses: html body #page-container .et_pb_section .lum-btn.et_pb_promo .et_pb_promo_button.et_pb_button:after — match to win on specificity. */ html body #page-container .et_pb_section .lum-btn.et_pb_promo .et_pb_promo_button.et_pb_button:after, html body #page-container .et_pb_section .lum-btn.et_pb_promo .et_pb_promo_button.et_pb_button:before { display: none !important; content: none !important; } /* Site-wide fallback — covers the mid-page "Request a Trademark or Patent Evaluation" button and any other button Divi renders with the bullet pseudo. */ .et_pb_button::after, .et_pb_button::before, .et_pb_promo_button::after, .et_pb_promo_button::before, a.et_pb_button::after, a.et_pb_button::before { display: none !important; content: none !important; } /* ---- FIX 2 (v3.1.5): Theme Builder header bottom border — gold accent ---- */ /* v3.1.3 missed this — when the dead #main-header selector was scrubbed, no Theme Builder replacement was added. The dark border currently visible is whatever Divi's default is; we overwrite with gold. */ html body header.et-l.et-l--header { border-bottom: 1px solid #C9952D !important; } /* ---- FIX 3: Theme Builder nav menu — 16px navy, gold hover + active ---- */ .et_pb_menu_0_tb_header .et_pb_menu__menu > nav > ul > li > a { font-size: 16px !important; color: #1B2A4A !important; letter-spacing: 0.5px !important; transition: color 0.2s ease; } .et_pb_menu_0_tb_header .et_pb_menu__menu > nav > ul > li > a:hover { color: #C9952D !important; } .et_pb_menu_0_tb_header .et_pb_menu__menu > nav > ul > li.current-menu-item > a, .et_pb_menu_0_tb_header .et_pb_menu__menu > nav > ul > li.current_page_item > a { color: #C9952D !important; } /* ---- FIX 4: Homepage section headings (.lum-title h4) — 40px desktop / 28px mobile ---- */ /* "what we do" and "our team" are

inside .lum-title modules. Narrow scope so non-homepage h4s aren't affected. */ body.home .lum-title h4 { font-size: 40px !important; line-height: 1.2 !important; } @media (max-width: 767px) { body.home .lum-title h4 { font-size: 28px !important; line-height: 1.2 !important; } } /* ---- FIX 5: Section subtitles inside .lum-title — 20px navy @ 60% alpha ---- */ body.home .lum-title .et_pb_text_inner > span { font-size: 20px !important; color: rgba(27, 42, 74, 0.6) !important; letter-spacing: 1px !important; } @media (max-width: 767px) { body.home .lum-title .et_pb_text_inner > span { font-size: 16px !important; } } /* ---- FIX 1 (v3.1.5): Theme Builder FOOTER — navy bg, white text, gold headings ---- */ /* v3.1.3 selectors were correct but too specific on section numbers (_0_tb_footer). v3.1.5 uses [class*="tb_footer"] wildcards and html body prefix to beat whatever inline background Divi is emitting. */ html body footer.et-l.et-l--footer, html body footer.et-l.et-l--footer .et_pb_section, html body footer.et-l.et-l--footer [class*="tb_footer"], html body footer.et-l.et-l--footer .et_pb_row, html body .et_pb_section_0_tb_footer, html body [class*="_tb_footer"] { background-color: #1B2A4A !important; } /* Body text + list items → white */ html body footer.et-l.et-l--footer, html body footer.et-l.et-l--footer p, html body footer.et-l.et-l--footer li, html body footer.et-l.et-l--footer span, html body footer.et-l.et-l--footer .et_pb_text_inner, html body footer.et-l.et-l--footer .et_pb_text_inner p { color: #FFFFFF !important; } /* Headings → gold (declared after body text so it wins) */ html body footer.et-l.et-l--footer h1, html body footer.et-l.et-l--footer h2, html body footer.et-l.et-l--footer h3, html body footer.et-l.et-l--footer h4, html body footer.et-l.et-l--footer h5, html body footer.et-l.et-l--footer h6, html body footer.et-l.et-l--footer .et_pb_module_header, html body footer.et-l.et-l--footer .et_pb_widget_title, html body footer.et-l.et-l--footer .widgettitle { color: #C9952D !important; } /* Links → white / gold hover */ html body footer.et-l.et-l--footer a { color: #FFFFFF !important; transition: color 0.2s ease; } html body footer.et-l.et-l--footer a:hover { color: #C9952D !important; } /* Mailto: white + gold underline, gold on hover */ html body footer.et-l.et-l--footer a[href^="mailto:"] { color: #FFFFFF !important; text-decoration: underline; text-decoration-color: #C9952D; text-underline-offset: 3px; } html body footer.et-l.et-l--footer a[href^="mailto:"]:hover { color: #C9952D !important; } /* Divider / row border → gold */ html body footer.et-l.et-l--footer hr, html body footer.et-l.et-l--footer .et_pb_divider_internal, html body footer.et-l.et-l--footer .et_pb_row { border-color: #C9952D !important; } /* ---- FIX 7: Collapse dead slider / blank space at very top of homepage ---- */ /* Section 0 is a Slick slider container that was stopped but still reserves 919px of vertical space. Collapse empty/inactive slides and remove the container's min-height so it sizes to content (zero). */ body.home .et_pb_section_0 .et_pb_slide:empty, body.home .et_pb_section_0 .slick-slide:not(.slick-active) { display: none !important; } body.home .et_pb_section_0 .et_pb_slider, body.home .et_pb_section_0 .slick-list, body.home .et_pb_section_0 .slick-track { min-height: 0 !important; } /* ---- FIX 8 (MOBILE): hero subtitle, team spacing, marquee ---- */ @media (max-width: 767px) { /* 8A (v3.1.6 upgraded): hero subtitle "Trademarks • Patents • Copyrights" — don't overlap the illustration. Also push above illustration via z-index. */ body.home .et_pb_section_0 .hero-heading + p, body.home .et_pb_section_0 h1 + p, body.home .et_pb_section_0 h4 + p, body.home .et_pb_section_0 .et_pb_text p, body.home .lum-home-slide .et_pb_text p { font-size: 18px !important; line-height: 1.3 !important; position: relative; z-index: 10; margin-bottom: 30px !important; } /* FIX 5 (v3.1.6): section padding so tagline has room before illustration */ body.home .et_pb_section_0, body.home .lum-home-slide { padding-bottom: 40px !important; } /* 8B: Team member cards — collapse the excessive gap between members */ .et_pb_team_member { margin-bottom: 20px !important; } .et_pb_team_member + .et_pb_team_member { margin-top: 0 !important; } /* FIX 4 (v3.1.7): "let's talk" marquee is actually a Slick slider in .et_pb_section_7, not a marquee element. v3.1.6 selectors missed entirely. */ .et_pb_section_7 { overflow-x: hidden !important; } .et_pb_section_7 .et_pb_column { overflow: hidden !important; } .et_pb_section_7 .slick-track, .et_pb_section_7 .slick-slide, .et_pb_section_7 .et_pb_text_inner, .et_pb_section_7 .et_pb_text_inner p { white-space: nowrap !important; } .et_pb_section_7 .et_pb_text_inner p { font-size: 32px !important; } /* FIX 4 (v3.1.6): hero headline — shrink to avoid "it" orphan. Current mobile is ~70-75px; 52px lands the full phrase with better wrap. */ body.home .et_pb_section_0 h1, body.home .et_pb_section_0 h2, body.home .et_pb_section_0 .hero-heading, body.home .lum-home-slide h1, body.home .lum-home-slide h2, body.home .lum-home-slide .hero-heading, body.home .et_pb_section_0 .et_pb_text_inner h1, body.home .et_pb_section_0 .et_pb_text_inner h2 { font-size: 52px !important; line-height: 1.1 !important; } } @media (max-width: 480px) { /* FIX 2 (v3.1.8 final): hero at 28px. 32px still orphaned "it" at 400px viewport due to Lumen's width:fit-content on .et_pb_text_inner (now released in the 767px block above). 28px is a defensive floor. */ body.home .et_pb_section_0 h1, body.home .et_pb_section_0 h2, body.home .et_pb_section_0 .hero-heading, body.home .lum-home-slide h1, body.home .lum-home-slide h2, body.home .lum-home-slide .hero-heading, body.home .et_pb_section_0 .et_pb_text_inner h1, body.home .et_pb_section_0 .et_pb_text_inner h2 { font-size: 28px !important; line-height: 1.1 !important; } /* FIX 4 (v3.1.7): marquee at very narrow widths — correct slider selector */ .et_pb_section_7 .et_pb_text_inner p { font-size: 24px !important; } } /* ---- FIX 1 (v3.1.7): Section 2 evaluation button — verified DOM selector ---- */ /* Button: a.et_pb_button.et_pb_button_0.lum-btn.et_pb_bg_layout_light Section: .et_pb_section_2 */ .et_pb_section_2 .et_pb_button_0.lum-btn, .et_pb_section_2 .et_pb_button_0.et_pb_bg_layout_light { background-color: #C9952D !important; color: #FFFFFF !important; border-color: #C9952D !important; opacity: 1 !important; visibility: visible !important; } .et_pb_section_2 .et_pb_button_0.lum-btn:hover, .et_pb_section_2 .et_pb_button_0.et_pb_bg_layout_light:hover { background-color: #1B2A4A !important; color: #FFFFFF !important; border-color: #1B2A4A !important; } .et_pb_section_2 .et_pb_button_0::after, .et_pb_section_2 .et_pb_button_0::before { display: none !important; content: none !important; } /* ---- FIX 2 (v3.1.7): Section 6 "ready to protect your work" button — verified ---- */ /* Button: a.et_pb_button.et_pb_button_2.et_pb_bg_layout_light Section: .et_pb_section_6 */ .et_pb_section_6 .et_pb_button_2, .et_pb_section_6 .et_pb_button_2.et_pb_bg_layout_light { background-color: #C9952D !important; color: #FFFFFF !important; border-color: #C9952D !important; opacity: 1 !important; visibility: visible !important; } .et_pb_section_6 .et_pb_button_2:hover, .et_pb_section_6 .et_pb_button_2.et_pb_bg_layout_light:hover { background-color: #1B2A4A !important; color: #FFFFFF !important; border-color: #1B2A4A !important; } .et_pb_section_6 .et_pb_button_2::after, .et_pb_section_6 .et_pb_button_2::before { display: none !important; content: none !important; } /* ---- FIX 1 (v3.1.8): Section 6 mobile gradient overlay ---- */ /* Replaces v3.1.7's dual white-card approach. A single gradient fading from 85% white on the left to transparent on the right keeps text readable while letting the illustration show on the right half. */ @media (max-width: 767px) { .et_pb_section_6 { position: relative; } .et_pb_section_6::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0.85) 60%, transparent 100%); z-index: 0; pointer-events: none; } .et_pb_section_6 .et_pb_row { position: relative; z-index: 1; } /* Kill the v3.1.7 white cards — text container stays transparent, rides gradient */ .et_pb_section_6 .et_pb_text, .et_pb_section_6 .et_pb_promo_description, .et_pb_section_6 .et_pb_text_inner { background-color: transparent !important; border-radius: 0 !important; padding: 0 !important; } } /* ---- FIX 3 (v3.1.8, DOM-verified): Hero section mobile spacing ---- */ /* Three confirmed root causes, three targeted overrides: (a) Divi generates .et_pb_row_0.et_pb_row with padding-top: 75px and no mobile override. (b) Lumen's style.css forces min-height: 400px on the column at mobile. (c) Lumen's style.css absolutely-positions .lum-slider-img at top/left 50%, floating it in the column instead of stacking below the text. */ @media (max-width: 767px) { .et_pb_row_0.et_pb_row { padding-top: 20px !important; } .lum-home-slide .et_pb_column { min-height: auto !important; } body:not(.et-fb) .lum-slider-img { position: relative !important; top: auto !important; left: auto !important; transform: none !important; margin: 20px auto 0 !important; } /* FIX 2 (v3.1.8): release Lumen's width: fit-content constraint on .et_pb_text_inner so headings can wrap freely instead of being shrink-wrapped to the longest word. */ body.home .et_pb_section_0 .et_pb_text_inner, body.home .lum-home-slide .et_pb_text_inner { width: 100% !important; } } /* ---- FIX 9: "ready to protect your work" CTA button visibility on mobile ---- */ /* Ensure the button stands on its own z-index and reaches full opacity over the background illustration. */ .et_pb_promo .et_pb_promo_button { background-color: #C9952D !important; opacity: 1 !important; position: relative; z-index: 2; } .et_pb_promo .et_pb_promo_description { position: relative; z-index: 2; } /* ---- CARRYOVER FROM v3.1.x: body-wide design defaults ---- */ /* Default CTA button style outside promo modules (button text handled by FIX 1 for promo; this covers plain .et_pb_button elements across the site). Divi per-button bg customizations still win because no !important on bg. */ body .et_pb_button, body a.et_pb_button { background: #C9952D; border: 2px solid #C9952D; color: #FFFFFF !important; border-radius: 30px; padding: 12px 28px; font-weight: 600; text-transform: none; letter-spacing: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } body .et_pb_button:hover, body a.et_pb_button:hover { background: #1B2A4A; border-color: #1B2A4A; color: #FFFFFF !important; padding: 12px 28px; } /* Headings (body content): navy. Divi per-module heading colors still win. */ body h1, body h2, body h3, body .et_pb_module_header, body .et_pb_slide_title, body .et_pb_promo_header { color: #1B2A4A; } /* Body text links inside content modules: gold → navy on hover */ body .et_pb_text_inner a, body .et_pb_post_content a { color: #C9952D; transition: color 0.2s ease; } body .et_pb_text_inner a:hover, body .et_pb_post_content a:hover { color: #1B2A4A; } /* Form fields — gray border, gold focus */ body .et_pb_contact_field input[type="text"], body .et_pb_contact_field input[type="email"], body .et_pb_contact_field input[type="tel"], body .et_pb_contact_field input[type="url"], body .et_pb_contact_field textarea, body .et_pb_contact_field select, body input.sf-input, body textarea.sf-input, body .sureforms-input, body .sureforms-textarea, body .sureforms-select { border: 1px solid #CCCCCC; border-radius: 4px; padding: 10px 12px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body .et_pb_contact_field input:focus, body .et_pb_contact_field textarea:focus, body .et_pb_contact_field select:focus, body input.sf-input:focus, body textarea.sf-input:focus, body .sureforms-input:focus, body .sureforms-textarea:focus, body .sureforms-select:focus { border-color: #C9952D; box-shadow: 0 0 0 3px rgba(201, 149, 45, 0.15); outline: none; } body button[type="submit"], body input[type="submit"] { background: #C9952D; border: 2px solid #C9952D; color: #FFFFFF; border-radius: 30px; padding: 12px 28px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } body button[type="submit"]:hover, body input[type="submit"]:hover { background: #1B2A4A; border-color: #1B2A4A; } /* Alternating homepage section backgrounds (v3.1.2 with !important) */ body.home .et_pb_section.et_pb_section:nth-of-type(even) { background-color: #F8F7F5 !important; }