/** * Layout-critical CSS for the /tenant-screening/ page (post 2947) that * Elementor's own container width/content_width controls do not reliably * generate CSS for on this install. Same pattern as the other page-specific * stylesheets (pricing, property-management hub, multi-family). */ .tsc-feature-list { margin: 0; padding: 0; list-style: none; text-align: left; } .tsc-feature-list li { position: relative; padding-left: 18px; line-height: 1.9; } .tsc-feature-list li::before { content: "\2022"; position: absolute; left: 0; color: #4A6FA0; } /* * Pricing page's two cards (Full Management / Lease-Only) -- stretch makes * both cards match the taller sibling's height, but the card itself is a * column of header/body/footer bands with no flex-grow, so without this the * extra height just becomes blank space after the footer instead of the * footer band sitting flush at the bottom. Growing the body (the middle, * variable-content section) absorbs that extra height instead. */ .pr-card-body { flex: 1 1 auto !important; } /* Same accordion icon-size / title-alignment fix used on the pricing page — Elementor's default +/- glyph has no built-in size control, so it must be set directly here to stay visually consistent across pages. */ .elementor-accordion .elementor-accordion-icon { font-size: 14px; } .elementor-accordion .elementor-tab-title { display: flex !important; align-items: flex-start !important; gap: 10px; } .elementor-accordion .elementor-accordion-icon.elementor-accordion-icon-left { float: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; margin-top: 0.15em; } /* BEFORE/AFTER pill overlaid on a before/after photo (Turnover page). Same technique as .tsc-card-link-overlay: the widget's own wrapper is already position:relative with zero height by default, so making that wrapper itself position:absolute lets it anchor to the photo container one level up (which must set position:relative) instead of collapsing against itself. Unlike the link overlay, this only needs a corner offset, not inset:0, so width/height stay auto (shrink to the pill's own content). */ .elementor-element.tsc-photo-badge { position: absolute !important; top: 10px; left: 10px; z-index: 2; } /* * The FontAwesome checkmark glyph is bounding-box-centered by Elementor's * own icon alignment (verified via pixel measurement), but its diagonal * stroke concentrates more visual "ink" toward the upper-right, so a * mathematically-centered checkmark still reads as slightly off-center to * the eye (measured centroid ~0.7px right / ~0.9px up of true center). This * is a one-time optical correction on the glyph itself -- scoped to the * FontAwesome check icon specifically (not the badge class), so it applies * everywhere this checkmark is used without touching any other icon. */ svg.e-fas-check { transform: translate(-0.7px, 0.9px); } /* * At mobile widths the checkmark glyph reads as pushed toward the bottom of * its badge square. Root cause: ".elementor-icon-wrapper" inherits a * line-height of ~1.6x its 16px font-size (25.6px) from elsewhere on the * page, and neither it nor ".elementor-icon" (a 13px inline-block child) * has an explicit height -- so the wrapper's rendered height is just * whatever that inherited line-height computes to, with the small icon * sitting near its baseline rather than centered in it. vertical-align * alone didn't fix it (the icon is still positioned within the same * oversized line box). Overriding the actual height/line-height on both * wrapper elements to match the icon's own size removes the extra space * these fixes were trying to center within, in the first place. */ .tsc-badge-icon .elementor-icon-wrapper, .tsc-badge-icon-lg .elementor-icon-wrapper, .tsc-badge-icon .elementor-icon, .tsc-badge-icon-lg .elementor-icon { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } .tsc-check-item > .e-con-inner > .elementor-widget-heading .elementor-heading-title { white-space: normal !important; overflow-wrap: break-word !important; } /* * Common-Area Maintenance (post 2589) is a multi_family_service custom post * type, so WordPress adds the ".single" body class -- and * platinum-single-post-buttons.css forces every button's text to white * (!important) on any ".single" template, which made the white-background * CTA-band button's orange text invisible (white-on-white) and silently * flipped the hero button's intended navy text to white. That sitewide rule * is correct for whatever CPT template it was written for, so it isn't * touched here -- this just re-overrides the two specific buttons on this * one page with a selector specific + !important enough to win regardless * of stylesheet load order. */ .postid-2589 .elementor-element-ca76.elementor-widget-button .elementor-button .elementor-button-text { color: #FFFFFF !important; } .postid-2589 .elementor-element-ca773.elementor-widget-button .elementor-button .elementor-button-text { color: #FF3A00 !important; } /* Same multi_family_service CPT ".single" button-text conflict as post 2589, on Utility Billing (RUBS) */ .postid-2590 .elementor-element-ub86.elementor-widget-button .elementor-button .elementor-button-text { color: #FFFFFF !important; } .postid-2590 .elementor-element-ub873.elementor-widget-button .elementor-button .elementor-button-text { color: #FF3A00 !important; } /* Same multi_family_service CPT ".single" button-text conflict, on Leasing at Scale and Per-Unit Reporting (both gradient buttons only, no white-bg button on these two) */ .postid-2591 .elementor-element-las7.elementor-widget-button .elementor-button .elementor-button-text, .postid-2591 .elementor-element-las204.elementor-widget-button .elementor-button .elementor-button-text { color: #001A3D !important; } .postid-2592 .elementor-element-pur7.elementor-widget-button .elementor-button .elementor-button-text, .postid-2592 .elementor-element-pur189.elementor-widget-button .elementor-button .elementor-button-text { color: #001A3D !important; } /* * PM Hub "Everything You Need Under One Roof" cards -- make the whole card * clickable via the "Learn more" link each card already has, WITHOUT * changing the card's layout: an earlier attempt set the container's own * html_tag to "a" so the whole element became a link, but that broke the * row's flex-grid (Elementor rendered it as 2-per-row with blank cards * instead of 3). This reuses the existing anchor's own ::after pseudo- * element as a "stretched link" overlay instead -- the container stays a * plain
with its original settings untouched, only the invisible * click target grows to fill the card. The visible "Learn more ->" text * keeps its normal position; nothing about the grid, spacing, or card * sizing changes. */ .postid-388 .tsc-icon-card { position: relative; } .postid-388 .tsc-icon-card .elementor-heading-title a::after { content: ""; position: absolute; inset: 0; } /* * PM Hub "Properties We Manage" photo cards (Wausau/Schofield/Weston/Stevens * Point) -- full-card click overlay via an HTML widget containing a bare * , same technique as tsc-icon-card above but the target here is a photo * card, not a "Learn more" link, so there's no existing anchor to piggyback * on with ::after. Elementor gives every widget's own wrapper * position:relative by default with zero height (shrink-wrapped to its * empty-looking content), so an inset:0 anchor INSIDE that wrapper collapses * to 0x0 -- the wrapper itself has to be the thing positioned absolutely, * so its containing block becomes the actual card (which has a real height) * one level up, not itself. */ .elementor-element.tsc-card-link-overlay { position: absolute !important; inset: 0 !important; z-index: 2; } /* * The hero's text column and empty second column (PM service pages) are now * each set to a real 50%/100% responsive width via Elementor's own * "_element_custom_width" control directly in the JSON, so no CSS override * class is needed here any more. */ /* * ============================================================================ * Site-wide card / button hover animations. * * Targets the shared structural classes already used across every rebuilt * page rather than a class added to each card individually, so this applies * consistently everywhere without touching any page's Elementor content: * - .tsc-icon-card -- service cards, "who we serve" cards * - .tsc-row-3 / .tsc-row-4 -- 3- and 4-column card grids (recent-work * photo cards, before/after project cards, * numbered step cards) -- their direct * children are the card boxes themselves. * - .elementor-button -- every native Elementor CTA button. * - .elementor-widget-heading a -- the "Learn more ->" arrow-links, which * are always rendered as a plain heading * widget wrapping an (no other heading * helper in the shared build scripts embeds * a link), so this selector reaches them * without needing a dedicated class. * * Only transform/box-shadow/filter are animated -- properties that don't * affect layout -- so nothing shifts position, wraps, or reflows on hover. * prefers-reduced-motion turns the animation off for users who've asked for * it, per standard accessibility practice. * ============================================================================ */ .elementor-element.tsc-icon-card, .tsc-row-3 > .e-con-inner > .elementor-element, .tsc-row-4 > .e-con-inner > .elementor-element { transition: transform 0.3s ease, box-shadow 0.3s ease; will-change: transform; } .elementor-element.tsc-icon-card:hover, .tsc-row-3 > .e-con-inner > .elementor-element:hover, .tsc-row-4 > .e-con-inner > .elementor-element:hover { /* transform is now native (Advanced > Transform > Hover on each container) -- this rule now only supplies the box-shadow, which Elementor's native box_shadow_hover group isn't rendering on this install for containers (unresolved; works fine on legacy Column). */ box-shadow: 0 14px 28px rgba(0, 26, 61, 0.14); z-index: 3; } .elementor-button { transition: filter 0.25s ease; } .elementor-button:hover { /* transform and box-shadow are now native (Advanced > Transform > Hover, and the Button widget's own Hover > Box Shadow) -- only the brightness filter has no native Elementor control and stays here. */ filter: brightness(1.03); } .elementor-widget-heading a { display: inline-block; transition: transform 0.25s ease, opacity 0.25s ease; } .elementor-widget-heading a:hover { transform: scale(1.05); opacity: 0.85; } @media (prefers-reduced-motion: reduce) { .elementor-element.tsc-icon-card, .tsc-row-3 > .e-con-inner > .elementor-element, .tsc-row-4 > .e-con-inner > .elementor-element, .elementor-button, .elementor-widget-heading a { transition: none !important; } .elementor-element.tsc-icon-card:hover, .tsc-row-3 > .e-con-inner > .elementor-element:hover, .tsc-row-4 > .e-con-inner > .elementor-element:hover, .elementor-button:hover, .elementor-widget-heading a:hover { transform: none !important; } } /* * PM Hub "Onboarding -> Rental Analysis -> Marketing -> ..." step strip * (pm299 + pm2120, both tsc-row-4). The sitewide tsc-row-4 mobile rule * above (flex-direction: column) stacks every 4-up grid to full-width * rows on small screens -- correct everywhere else, but this particular * strip is meant to read as a left-to-right sequence of steps, so on * mobile it stays a horizontally scrollable row instead of stacking. * Scoped to just these two containers so no other tsc-row-4 grid site- * wide is affected. */ @media (max-width: 600px) { body.page-id-388 .elementor-element-pm299 > .e-con-inner, body.page-id-388 .elementor-element-pm2120 > .e-con-inner { flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } body.page-id-388 .elementor-element-pm299 > .e-con-inner > .elementor-element, body.page-id-388 .elementor-element-pm2120 > .e-con-inner > .elementor-element { flex: 0 0 220px !important; width: 220px !important; min-width: 220px !important; } }