.practice{ color: #000; } .practice:hover p,.practice:hover h1,.practice:hover h2,.practice:hover h3,.practice:hover h4,.practice:hover h5,.practice:hover h6,.practice:hover a { color: #ffffff; } .text-height{ height: 143px; } /* * Practice-area card alignment (added with the Poppins typeface change). * * A card is / / <"More on…" a>, laid out as * plain blocks. In Times New Roman every title fitted on ONE line, so the three * parts happened to line up across a row. In Poppins "Child Custody Law" wraps * to two lines, pushing that card's body AND its arrow down relative to its * neighbours, and the row stops reading as a grid. * * Fixed structurally rather than by shrinking type until the longest title * happens to fit — that would silently break again the first time anyone adds a * longer service name. Reserve two lines for every title, then let flexbox * distribute the rest: * title reserves 2 lines -> every body starts on the same line * body absorbs the slack -> every arrow sits on the same line * Cards already stretch to equal height (min-height:310px + height:100%). * * Cost: cards get ~1 line taller, which is the intended trade. * Covers all 30 .practice cards across the 8 pages that use them. */ .practice { display: flex; flex-direction: column; } /* 2.6em = 2 lines x 1.3 line-height, relative to the title's own 25px. */ .practice h3.gb-headline { line-height: 1.3; min-height: 2.6em; margin-top: 0; margin-bottom: 0; } /* Body keeps its 143px basis but may grow, so the link lands on the baseline. */ .practice > p.gb-headline { flex: 1 1 auto; } /* Belt and braces: pin the arrow down even if a body is unusually short. */ .practice > a.gb-button { margin-top: auto; align-self: flex-start; } /* * Hero eyebrow — keep it on ONE line (added with the Poppins typeface change). * * "Divorce Lawyer Rockford | Family Lawyer Rockford IL | Criminal Lawyer * Rockford" is 78 characters in a column that is 60% of a 1200px container. * Allowing for the grid's negative-margin gutter (wrapper margin-left:-20px + * column padding-left:20px) the real content width is 712px, not 720px. * * Measured from the shipped font file rather than estimated: Poppins averages * 0.5008em per character here, so the string is 39.06em wide. * Times New Roman (~0.44em/char) at 20px = ~686px -> fitted in 712px * Poppins at 20px = 781px -> wraps * The largest size that still fits is 18.43px; 17.5px leaves 4% slack, which * absorbs kerning and sub-pixel rounding. * * Fluid below 1200px because the container stops being capped there and the * available width shrinks with the viewport. Deliberately NOT white-space:nowrap * — if any of this is a pixel off it should wrap, not overflow into the * html{overflow-x:hidden} clip. * * Scoped to >=1024px. Under that the line already wrapped with Times New Roman * too (at 900px only ~532px is available), so nothing regresses, and the * existing max-width:767px rule keeps its own 16px centred treatment. */ @media (min-width: 1024px) { h1.gb-headline-9b595a46 { font-size: clamp(15px, 1.45vw, 17.5px); } } .frm_style_formidable-style.with_frm_style .frm_compact .frm_dropzone.dz-clickable .dz-message, .frm_style_formidable-style.with_frm_style input[type=submit], .frm_style_formidable-style.with_frm_style .frm_submit input[type=button], .frm_style_formidable-style.with_frm_style .frm_submit button, .frm_form_submit_style, .frm_style_formidable-style.with_frm_style .frm-edit-page-btn { display: inline-flex; padding: 15px 20px; border-radius: 2px; background-color: var(--main-purple); color: #ffffff; text-decoration: none; border: none; box-shadow: 3px 3px 0 0 var(--primary-calour); transition: all 0.5s ease; } .frm_style_formidable-style.with_frm_style .frm_compact .frm_dropzone.dz-clickable .dz-message:hover,.frm_style_formidable-style.with_frm_style input[type=submit]:hover,.frm_style_formidable-style.with_frm_style .frm_submit input[type=button]:hover,.frm_style_formidable-style.with_frm_style .frm_submit button:hover,.frm_form_submit_style:hover,.frm_style_formidable-style.with_frm_style .frm-edit-page-btn:hover { background-color: var(--main-purple); color: #ffffff; color: #ffffff; /* Optional: Ensure text color remains readable */ box-shadow: none; /* Optional: Adjust shadow to match hover color */ transition: all 0.5s ease; /* Ensure smooth hover transition */} .contactmenu { background-color: #5F4AF3; border-radius: 2px; box-shadow: 3px 3px 0 0 var(--primary-color); /* Corrected color variable */ transition: all 0.5s ease; height: 54px; color: #fff !important; /* Corrected spelling of !important */ display: none; /* Hide on desktop and tablet */} @media (max-width: 768px) { .contactmenu { display: block; /* Show on mobile */ background-color: transparent; /* Removes background color on mobile */ } } .sticky-enabled .main-navigation.is_stuck .contactmenu { display: block; color: white !important; /* Corrected spelling of !important */} .contactmenu:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Darker shadow on hover */} .contactmenu .main-navigation.navigation-stick .main-nav ul li a { color: #fff; /* Text color */ text-decoration: none; /* Removes underline */ padding: 10px 15px; /* Adds padding for better spacing */ display: block; /* Ensures the anchor fills the li element */ transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transitions */} .contactmenu .main-navigation.navigation-stick .main-nav ul li a:hover { color: #5F4AF3; /* Change text color on hover */ background-color: rgba(255, 255, 255, 0.1); /* Adds a subtle background on hover */} @media(min-width: 1240px) { .nav-float-right #site-navigation { padding-right: 0px; } } .displayoff_Contact { display: block; * Hide on desktop and tablet */ positions: fixed; } @media (max-width: 768px) { .displayoff_Contact { display: none; /* Show on mobile */ } } /* Default for desktop (and larger screens) */.displayoff_mobile { display: none; } /* Override for mobile screens (max-width 768px) */@media (max-width: 768px) { .displayoff_mobile { display: block; margin-top: 4%; } } #mobile-header .inside-navigation { align-items: center; } .gb-container.gb-container-e94ee0a5 { padding-top: 0% !important; margin-left: 0% !important; } @media (max-width: 768px) { a.gb-button-29870962 { display: inline-flex; padding: 7px 11px; } } .sticky-container { position: sticky; position: -webkit-sticky; top: 0px; /* Offset from top of container */ -webkit-backdrop-filter: saturate(180%) blur(5px); backdrop-filter: saturate(180%) blur(5px); background-color: rgba(255, 255, 255, 0.72); z-index: 1; } :where(.is-layout-flex) { gap: 1.5em; } form.fluent_form_3 .wpf_has_custom_css.ff-btn-submit { /* min-width: 50%; */ padding: 15px 43px; border-radius: 2px; background-color: var(--main-purple) !important; color: #ffffff; text-decoration: none; border: none; box-shadow: 3px 3px 0 0 var(--primary-calour) !important; transition: all 0.5s ease; } form.fluent_form_3 .wpf_has_custom_css.ff-btn-submit:hover { background-color: var(--main-purple) !important; box-shadow: 0px 0px 0 0 var(--primary-calour) !important; }