/* * Warranty Pillar Template Draft — "Gap / Mechanism / Business Impact" table * Override styles to match Figma design (node 232:299) * Page: /warranty-pillar-template-draft/ (page-id-19889) * * Local reference copy only. The live copy is injected via the page's * `_auhfc` postmeta (Enfold's "Head & Footer Code" field, head slot) — not * loaded from this file directly. Re-run the wp eval sync step after editing * this file to push changes to postmeta. * * Columns are scoped via custom classes (avia-col-gap / avia-col-mechanism / * avia-highlight-col) set on each [av_cell] through its col_style shortcode * attribute, and rows via row_style='avia-heading-row' — not nth-child * position, so reordering or adding columns/rows doesn't break the styling. */ #top.warranty-page-template .avia-data-table-wrap { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; overflow: hidden; } #top.warranty-page-template .avia-data-table { margin-bottom: 0; table-layout: fixed; font-family: 'Inter', sans-serif; } #top.warranty-page-template .avia-data-table * { border: none; padding: 22px 26px; font-size: 1.125rem; line-height: 1.5; color: #ffffff; } /* Header row */ #top.warranty-page-template .avia-data-table tr.avia-heading-row { text-align: left; background: linear-gradient(180deg, #131b5e 0%, #0c002f 100%); } #top.warranty-page-template .avia-data-table tr.avia-heading-row th { font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.9rem; padding-top: 21px; padding-bottom: 21px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* Body rows */ #top.warranty-page-template .avia-data-table tr:not(.avia-heading-row) td { background: #0c002f; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } #top.warranty-page-template .avia-data-table tr:not(.avia-heading-row):last-child td { border-bottom: none; } /* "Gap" column is bold */ #top.warranty-page-template .avia-data-table tr:not(.avia-heading-row) td.avia-col-gap { font-weight: 700; } /* Highlighted "Business Impact" column * Needs to out-specificity the "tr:not(.avia-heading-row) td" body-row rule * above, which otherwise wins on specificity and flattens this column to the * same opaque #0c002f as the rest of the row. */ #top.warranty-page-template .avia-data-table th.avia-highlight-col, #top.warranty-page-template .avia-data-table tr:not(.avia-heading-row) td.avia-highlight-col { background: rgba(19, 27, 94, 0.5); } /* Column widths: Gap 22% / Mechanism 36% / Business Impact 42% */ #top.warranty-page-template .avia-data-table th.avia-col-gap, #top.warranty-page-template .avia-data-table td.avia-col-gap { width: 22%; } #top.warranty-page-template .avia-data-table th.avia-col-mechanism, #top.warranty-page-template .avia-data-table td.avia-col-mechanism { width: 36%; } #top.warranty-page-template .avia-data-table th.avia-highlight-col, #top.warranty-page-template .avia-data-table td.avia-highlight-col { width: 42%; } /* Disable Enfold's mobile "label:" prefix, keep table as a card on small screens */ #top.warranty-page-template .avia-data-table td:before { display: none; } /* * Mobile: Enfold has no working responsive/stacked mode for this table (no * such CSS exists anywhere in the parent theme — confirmed by grepping * css/layout.css and css/shortcodes.css for "avia-table"/"avia_responsive_table", * both zero matches). Left as a fixed 3-column table, the "Business Impact" * column gets clipped by .avia-data-table-wrap's overflow:hidden below ~375px * (see ClickUp #86bb9w6eu). Restyle as a stacked card list instead of trying * to shrink 3 columns into a narrow viewport — also emphasizes Business * Impact per design intent, rather than just fixing the cutoff. */ @media only screen and (max-width: 767px) { #top.warranty-page-template .avia-data-table-wrap { overflow: visible; } #top.warranty-page-template .avia-data-table, #top.warranty-page-template .avia-data-table tbody, #top.warranty-page-template .avia-data-table tr, #top.warranty-page-template .avia-data-table th, #top.warranty-page-template .avia-data-table td { display: block; width: auto; } /* Desktop's 22%/36%/42% column-width rules have a class selector, so they * out-specificity the generic reset above and still shrink these columns * on mobile — reset them explicitly here. */ #top.warranty-page-template .avia-data-table td.avia-col-gap, #top.warranty-page-template .avia-data-table td.avia-col-mechanism, #top.warranty-page-template .avia-data-table td.avia-highlight-col { width: 100%; } /* Column headers are replaced by per-card labels below; hide the header row */ #top.warranty-page-template .avia-data-table tr.avia-heading-row { display: none; } #top.warranty-page-template .avia-data-table tr:not(.avia-heading-row) { padding: 20px; border-radius: 12px; background: #0c002f; border: 1px solid rgba(255, 255, 255, 0.1); } #top.warranty-page-template .avia-data-table tr:not(.avia-heading-row) + tr:not(.avia-heading-row) { margin-top: 16px; } #top.warranty-page-template .avia-data-table td { padding: 0 !important; border: none !important; background: none !important; font-size: 1rem; } #top.warranty-page-template .avia-data-table td.avia-col-gap { font-size: 1.1rem; margin-bottom: 8px; } #top.warranty-page-template .avia-data-table td.avia-col-mechanism { font-size: 0.95rem; color: rgba(255, 255, 255, 0.75); margin-bottom: 16px; } /* Business Impact: promoted to a highlighted callout, not just another row */ #top.warranty-page-template .avia-data-table td.avia-highlight-col { background: rgba(19, 27, 94, 0.5) !important; border-radius: 10px; padding: 14px 16px !important; font-weight: 600; } #top.warranty-page-template .avia-data-table td.avia-highlight-col:before { content: 'Business Impact'; display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: #ED9237; margin-bottom: 6px; } } /* * Warranty Pillar Template Draft — Jabra / Tumi customer quote cards * Override styles to match Figma "returns-management-module" component * (nodes 232:903 Jabra, 232:914 Tumi) and its nested "Testimonial_Card" * (nodes 232:907, 232:915). * Page: /warranty-pillar-template-draft/ (page-id-19889) * * Local reference copy only. The live copy is injected via the page's * `_auhfc` postmeta (Enfold's "Head & Footer Code" field, head slot) — not * loaded from this file directly. Re-run the wp eval sync step after editing * this file to push changes to postmeta. * * Per Figma, each row (Jabra, Tumi) is its own rounded "lighter blue" * gradient wrapper box (returns-management-module) containing two * sub-boxes: the summary column (no box of its own, just white text) and * the Testimonial_Card (its own darker navy gradient card). * * Selectors are scoped via custom Element IDs (rl-jabra-row / rl-tumi-row, * set on each row's first column through the Advanced Layout Builder's * "Element ID" field) and custom classes (rl-quote-card / rl-quote-summary, * added directly in the raw HTML each av_textblock already contains) — * not Enfold's autoassigned flex-column-table-N classes, #av_section_9, * or a :has(blockquote) content-structure guess. * * Enfold applies the Element ID to the .flex_column div, not the * auto-generated .flex_column_table row wrapper, so :has() is still needed * to reach that ancestor — but now anchored to a stable, author-assigned id * instead of incidental markup structure. */ /* Outer wrapper box, one per row * Figma's Container (232:902) caps each row at 1250px, centered, with a * 52px gap between the two stacked rows. */ #top.warranty-page-template .flex_column_table:has(#rl-jabra-row), #top.warranty-page-template .flex_column_table:has(#rl-tumi-row) { background: linear-gradient(117.67deg, rgb(19, 34, 109) 16.375%, rgb(90, 166, 191) 97.011%); border-radius: 16px; padding: 56px 64px; overflow: hidden; max-width: 1250px; margin-left: auto; margin-right: auto; } #top.warranty-page-template .flex_column_table:has(#rl-tumi-row) { margin-top: 52px; } #top.warranty-page-template .rl-quote-card { background: linear-gradient(180deg, #10104e 0%, #0c063b 100%); border-radius: 12px; box-shadow: 0 16px 16px rgba(3, 6, 26, 0.4); padding: 32px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: 36px; max-width: 90%; } /* Both columns in each row carry Enfold's author-set "av-align-bottom" * column-vertical-alignment class (flex_column_table_cell is display: * table-cell, so that class controls the CSS `vertical-align` property). * Figma centers the shorter column against the taller one instead. */ #top.warranty-page-template .flex_column_table:has(#rl-jabra-row) .av-align-bottom, #top.warranty-page-template .flex_column_table:has(#rl-tumi-row) .av-align-bottom { vertical-align: middle; } #top.warranty-page-template .rl-quote-card blockquote { margin: 0; } #top.warranty-page-template .rl-quote-card blockquote p { margin: 0; font-size: 16px !important; line-height: 1.55; font-weight: 400; color: #ffffff; } #top.warranty-page-template .rl-quote-card blockquote p span { font-size: inherit !important; } #top.warranty-page-template .rl-quote-card > p { margin: 0; font-size: 14px; line-height: normal; font-weight: 700; color: #ffffff; } /* * Warranty Pillar Template Draft — "Explore integrations by category" * tab slider (ep_tab_slider / Enfold Plus). * Override styles to match Figma "NEW - DESIGN CONCEPT" frame under the * "Integrations" section (node 266:259, file * 5HH9J1thZWfewrDyPP1cqu "Warranty Management - Page"). * Page: /warranty-pillar-template-draft/ (page-id-19889) * * Local reference copy only. The live copy is injected via the page's * `_auhfc` postmeta (Enfold's "Head & Footer Code" field, head slot) — not * loaded from this file directly. Re-run the wp eval sync step after editing * this file to push changes to postmeta. * * The plugin's own ep_tab_slider.css only ships structural/flex layout * rules (no color, spacing, or typography), so everything visual here is * new. Figma specs Poppins for the tab labels, but the site doesn't load * Poppins anywhere (Inter is the only webfont enqueued) — using Inter with * matching weights instead of pulling in a second font family for one * component. * * ep-flickity-slide / is-selected are the theme's existing Flickity * conventions (see #top .flickity-page-dots .dot.is-selected in body.css) * so the active-tab selector below follows that established pattern. */ #top.warranty-page-template .ep-tab-slider-controls-wrapper .ep-tab-slider-controls { display: flex; flex-wrap: wrap; gap: 24px; } /* The plugin's own CSS makes .flickity-slider (inside .flickity-viewport, * generated by Flickity JS) the actual flex row that lays out the tab * controls -- the gap above on .ep-tab-slider-controls has no visual effect * since that element isn't the flex parent of the individual tabs. Same * reasoning applies to flex-wrap: the shortcode instance on this page has * layout/breakpoint/responsive_behavior all unset, so none of the plugin's * own responsive/mobile CSS (gated behind ep-controls-*, ep-breakpoint-*, * ep-mobile-behavior-* classes) is active, and .flickity-viewport is forced * `overflow: visible !important` with no width constraint -- without wrap * here the tab pills keep their intrinsic (nowrap-text) widths in one row * and bleed past the container's right edge on narrow viewports instead of * scaling down. */ #top.warranty-page-template .ep-tab-slider-controls-wrapper .ep-tab-slider-controls .flickity-viewport .flickity-slider { flex-wrap: wrap; gap: 24px; } /* CU-86bba37fr: hairline divider under the tabs row removed per bug report * ("remove underlines ... one under tabs") -- keep the vertical rhythm * (padding/margin) the border used to help create, drop only the rule. */ #top.warranty-page-template .ep-tab-slider-controls-wrapper { padding-bottom: 24px; margin-bottom: 24px; } /* CU-86bba37fr: "Explore integrations by category:" heading has no * defined spacing before the tab row in the ALB markup (just default * heading margin) -- pin it to the 32px the bug report calls for. */ #top.warranty-page-template .av-special-heading + .ep-tab-slider { margin-top: 32px; } #top.warranty-page-template .ep-tab-control { background: rgba(19, 24, 90, 0.2); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 10px; padding: 14px 28px; } #top.warranty-page-template .ep-tab-control .ep-tab-control-inner { margin: 0; font-family: "Inter", sans-serif; font-weight: 500; font-size: 16px; line-height: normal; color: rgba(255, 255, 255, 0.8); white-space: nowrap; } #top.warranty-page-template .ep-tab-control.is-selected { background: #1a3982; border: 1.5px solid #6fa6ff; } #top.warranty-page-template .ep-tab-control.is-selected .ep-tab-control-inner { font-weight: 600; color: #ffffff; } /* Content panel — bordered box wrapping the active category's list. */ #top.warranty-page-template .ep-tab-slider-contents-wrapper { border: 1px solid #dcdcdc; border-radius: 10px; padding: 40px; } /* The plugin repeats the tab's own title inside its content panel * ("ERPs" etc.) — Figma doesn't show that repeated label since the * selected pill already communicates it, so hide it here. */ #top.warranty-page-template .ep-tab-content .ep-tab-title { display: none; } #top.warranty-page-template .ep-tab-content-content-inner { display: flex; flex-wrap: wrap; align-items: center; } /* Integration list: column-first 3-up grid with a hairline under each * row, matching the Figma "partners-grid" layout. */ #top.warranty-page-template .ep-tab-content-content-inner ul { flex: 0 0 100%; margin: 0 0 24px; padding: 0; list-style: none; columns: 3; column-gap: 24px; } /* CU-86bba37fr: dropped the hairline row divider (border-bottom) per the * bug report, and switched the bullet from a fixed `top: 22px` absolute * offset -- which only "happened" to sit near the first line for * single-line names -- to a flex layout so the dot aligns with the top of * the text for any name, including ones that wrap to two lines (e.g. * "Microsoft Dynamics 365 F&O"). */ #top.warranty-page-template .ep-tab-content-content-inner ul li { display: flex; align-items: flex-start; gap: 16px; break-inside: avoid; font-family: "Inter", sans-serif; font-weight: 500; font-size: 18px; color: #ffffff; } #top.warranty-page-template .ep-tab-content-content-inner ul li::before { content: ""; flex: 0 0 10px; width: 10px; height: 10px; margin-top: 1px; border-radius: 50%; background: #4fd1ff; } /* "Custom and API-based integrations" heading + paragraph. The plugin * renders both as one

separated by a manual
, so the heading * treatment is applied via ::first-line rather than a separate element. */ #top.warranty-page-template .ep-tab-content-content-inner > p:first-of-type { flex: 1 1 560px; margin: 0; font-family: "Inter", sans-serif; font-weight: 600; font-size: 18px; line-height: 1.56; color: #f4f4f4; } #top.warranty-page-template .ep-tab-content-content-inner > p:first-of-type::first-line { font-weight: 700; font-size: 38px; line-height: 1.34; } /* CTA button — orange gradient "View All Our Integrations" link. */ #top.warranty-page-template .ep-tab-content-content-inner > p:last-of-type { flex: 0 0 auto; margin: 24px 0 0 auto; } #top.warranty-page-template .ep-tab-content-content-inner > p:last-of-type a { display: inline-block; background: linear-gradient(90deg, #ed3023 0%, #f9ad32 100%); color: #ffffff; font-family: "Inter", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 1.37px; text-transform: uppercase; text-decoration: none; border-radius: 10px; padding: 23px 39px; white-space: nowrap; } /* Flickity's default prev/next arrows and page-dots aren't present in the * Figma design for this content pane — the tab pills above are the only * navigation control shown. Without this, Flickity's default * `top: 50%; transform: translateY(-50%)` centers the prev/next buttons on * the pane's full height, which now lands them on top of the heading text * since the pane is much taller than the plugin's unstyled default. */ #top.warranty-page-template .ep-tab-slider-contents-wrapper .flickity-prev-next-button, #top.warranty-page-template .ep-tab-slider-contents-wrapper .flickity-page-dots { display: none; } @media only screen and (max-width: 767px) { #top.warranty-page-template .ep-tab-content-content-inner ul { columns: 1; } #top.warranty-page-template .ep-tab-content-content-inner > p:last-of-type { margin-left: 0; } } /* * Warranty Pillar Template Draft — "THE GAP" numbered list * Page: /warranty-pillar-template-draft/ (local page-id-19889, staging page-id-19889) * * Local reference copy only. The live copy is injected via the page's * `_auhfc` postmeta (Enfold's "Head & Footer Code" field, head slot) — not * loaded from this file directly. Re-run the wp eval sync step after editing * this file to push changes to postmeta. * * Scoped via a custom_class='itemgrid--counted-gap' added to the specific * [ep_item_grid] shortcode (av_uid='av-wpt9002') that renders the numbered * list directly under the "THE GAP" heading — NOT the shared/global * .itemgrid--counted class (assets/scss/shortcodes/_itemgrid--counted.scss), * which is also used elsewhere on this page (the "four failure patterns" * list, av_uid='av-wpt0028') and sitewide. Scoping this way keeps the * orange/larger number styling limited to just the Gap box. * * No page-id-NNNNN prefix here on purpose: itemgrid--counted-gap only ever * prints on this one shortcode instance, so the class alone is already a * unique-enough selector across environments (local page-id-19889, staging * page-id-19889) — no per-environment ID rewrite needed. * * #top IS required, though, and both .itemgrid--counted and * .itemgrid--counted-gap must be chained onto the same compound selector * (they land on the same shortcode wrapper element — ep_style and * custom_class both apply to [ep_item_grid av-wpt9002]) — otherwise this * rule's `content` declaration loses the cascade to the shared base rule in * _itemgrid--counted.scss (compiled as * "#top .itemgrid--counted .ep-item-grid .ep-item-grid-item * .ep-item-grid-item-inner::before", 1 ID + 4 classes), which is MORE * specific than a bare ".itemgrid--counted-gap ...::before" (0 ID + 2 * classes) regardless of load order. color/font-size/font-weight aren't * touched by the base rule so those appeared to "work"; only `content` kept * reverting to the base rule's counter(section)".". */ #top .itemgrid--counted.itemgrid--counted-gap .ep-item-grid .ep-item-grid-item .ep-item-grid-item-inner::before { content: counter(section, decimal-leading-zero); color: #E2521B; font-size: 24px; font-weight: 700; line-height: normal; } /* * Warranty Pillar Template Draft — "Measurable outcomes across deployments" stat row * Override styles to match Figma design (node 232:936, "Stats Row") * Page: /warranty-pillar-template-draft/ (local page-id-19889, staging page-id-19889) * * ClickUp #86bb9zf0u: the live page rendered generic dashboard icon-font glyphs * above each stat number. The Figma design has no icons at all — each number * sits centered inside a colored circular "ring" graphic instead. Fix: hide the * icon-font glyph and turn the number's own wrapper into the ring, using the * exact ring SVGs exported from Figma (committed under assets/img/svg/, not * linked to Figma's temporary asset URLs). * * Local reference copy only. The live copy is injected via the page's * `_auhfc` postmeta (Enfold's "Head & Footer Code" field, head slot) — not * loaded from this file directly. Re-run the wp eval sync step after editing * this file to push changes to postmeta. * * Scoped via #top.warranty-page-template .itemgrid--stats-ring — itemgrid--blue-gradient * itself is a shared/global class (assets/scss/shortcodes/_itemgrid.scss), reused * elsewhere on the site, so the page-id prefix keeps this change limited to just * this page's instance of it. Per-card targeting uses the grid's own numbered * .ep-item-N classes (already present on each [ep_item_grid] item, no shortcode * edits needed) rather than nth-child, matching this repo's stable-selector * convention (see ENFOLD-LAYOUT-BUILDER-NOTES.md). */ /* No icons in the design — hide the icon-font glyph entirely */ #top.warranty-page-template .itemgrid--stats-ring .ep-item-grid-item-media { display: none; } /* Turn the number's wrapper into the ring container: fixed square, ring as a * centered background image, number centered inside it. */ #top.warranty-page-template .itemgrid--stats-ring .ep-item-title-wrapper { display: flex; align-items: center; justify-content: center; width: 172px; height: 172px; margin: 0 auto 24px; background-repeat: no-repeat; background-position: center; background-size: contain; } #top.warranty-page-template .itemgrid--stats-ring .ep-item-title { font-family: 'Inter', sans-serif; font-weight: 800; text-align: center; line-height: normal; } /* Card 1 — $25M+ (orange ring + text) */ #top.warranty-page-template .itemgrid--stats-ring .ep-item-1 .ep-item-title-wrapper { background-image: url('https://reverselogistg.wpenginepowered.com/wp-content/themes/reverselogix/assets/img/svg/warranty-pillar-stat-ring-1-orange.svg'); } #top.warranty-page-template .itemgrid--stats-ring .ep-item-1 .ep-item-title { color: #ff8c00; font-size: 36px; } /* Card 2 — 50-60% (cyan ring + text) */ #top.warranty-page-template .itemgrid--stats-ring .ep-item-2 .ep-item-title-wrapper { background-image: url('https://reverselogistg.wpenginepowered.com/wp-content/themes/reverselogix/assets/img/svg/warranty-pillar-stat-ring-2-cyan.svg'); } #top.warranty-page-template .itemgrid--stats-ring .ep-item-2 .ep-item-title { color: #00ced1; font-size: 30px; } /* Card 3 — 25% (cyan text, but the ring itself is a subtle dark-on-dark * gradient per the design — intentionally near-invisible, not a bug) */ #top.warranty-page-template .itemgrid--stats-ring .ep-item-3 .ep-item-title-wrapper { background-image: url('https://reverselogistg.wpenginepowered.com/wp-content/themes/reverselogix/assets/img/svg/warranty-pillar-stat-ring-3-cyan-subtle.svg'); } #top.warranty-page-template .itemgrid--stats-ring .ep-item-3 .ep-item-title { color: #00ced1; font-size: 30px; } /* Card 4 — 4-6 wks (light blue text, ring is a flat, equally subtle dark navy) */ #top.warranty-page-template .itemgrid--stats-ring .ep-item-4 .ep-item-title-wrapper { background-image: url('https://reverselogistg.wpenginepowered.com/wp-content/themes/reverselogix/assets/img/svg/warranty-pillar-stat-ring-4-blue-subtle.svg'); } #top.warranty-page-template .itemgrid--stats-ring .ep-item-4 .ep-item-title { color: #8ab4f8; font-size: 28px; } /* * Warranty Pillar Template Draft — "Why your ERP and returns portal leave a * warranty gap" section: horizontal divider lines in both boxes ("THE GAP" * and "FRAMED FOR FINANCE"). * Page: /warranty-pillar-template-draft/ (local page-id-19889, staging page-id-19889) * * Local reference copy only. The live copy is injected via the page's * `_auhfc` postmeta (Enfold's "Head & Footer Code" field, head slot) — not * loaded from this file directly. Re-run the wp eval sync step after editing * this file to push changes to postmeta. * * Two separate bugs found here, both scoped by stable per-instance hooks * rather than nth-child/shared classes (per project convention): * * 1) The two existing dividers ([av_hr class='full' ... ep_style='hr--border'] * at av_uid='av-wpt9006' and av_uid='av-wpt9010') were rendering, but * invisible in practice: Enfold's hr.php shortcode only applies * custom_border_color/custom_width/custom_margin_* when class='custom' — * for class='full' those attributes are silently ignored, so the * intended `rgba(255,255,255,0.2)` border color never made it into the * markup. The only thing actually drawing the line is the sitewide * `.hr--border .hr-inner { background:#8FCDDD; opacity:.3; }` rule * (assets/scss/_helpers.scss) — and that light-cyan color at 30% opacity * has almost no contrast against this box's own light-cyan-to-navy * gradient background (column-blue-gradient.css), so it visually * disappears. Rather than edit the shared `.hr--border` rule (used on * many other published pages — see grep on post_content for * 'hr--border'), each divider was given its own custom_class * ('hr--warranty-gap-divider' / 'hr--warranty-finance-divider') so the * higher-contrast override below only ever affects these two instances. * * 2) The Figma design also has a third divider between item 1 ("ERP repair * modules") and item 2 ("Ecommerce returns portals") inside THE GAP's * numbered list — that one was simply never built. Adding it as a real * [av_hr] shortcode between the two [ep_item_grid_inner] children risked * corrupting ep_item_grid's child parsing (see ENFOLD-LAYOUT-BUILDER * structural-desync warnings), so it's done as a border-bottom via CSS * instead, on the existing `.itemgrid--counted-gap` hook (already used * by warranty-pillar-gap-list-19886.css for the 01/02 number styling), * matching the sitewide ":not(:last-child)" divider convention already * used by .itemgrid--pills. */ #top .hr--warranty-gap-divider .hr-inner, #top .hr--warranty-finance-divider .hr-inner { background: rgba(255, 255, 255, 0.35) !important; } #top .itemgrid--counted.itemgrid--counted-gap .ep-item-grid-item:not(:last-child) .ep-item-grid-item-inner { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } /* Homepage CSS */ #top.homepage-august2026 .ep-hero-flex__button{ padding: 21px 40px; } #top.homepage-august2026 .entry-content-wrapper ul.blablablocks-tabs-buttons li:not(.ep-iconlist-item):not(.ep-social-bookmarks):not(.av-share-link):not(.menu-item)::before { background-color: transparent; } #top.homepage-august2026 .entry-content-wrapper ul.blablablocks-tabs-buttons li:not(.ep-iconlist-item):not(.ep-social-bookmarks):not(.av-share-link):not(.menu-item){ border-radius: 10px; border: 1.5px solid #E0603A; background: #EC3024; padding: 14px 28px; } #top.homepage-august2026 .entry-content-wrapper .blablablock-tab-btn[aria-selected="false"] { background: none !important; } /* CU-86bbg70za: no more reserved height here — each tab's title now just * takes whatever height its own text needs, so the tab panel (image, quote, * badge) can shift by a line or two when switching tabs. That shift is * softened into a transition below rather than removed, since only one tab * panel is ever in the DOM's layout at a time (the tabs plugin toggles the * native `hidden` attribute), so there's no sibling here to flex/grid-stretch * against in the first place. */ /* Attempts to smooth the panel-height shift above into a transition instead * of an instant jump. Plain `transition: height` can't animate to/from the * browser's own `auto` value, which is what this panel is sized with — so * this opts into `interpolate-size`, which is meant to teach the browser how * to tween between two `auto`-computed heights. * * Tested in Chrome 151 (full CSS.supports() coverage for interpolate-size, * calc-size(), and transition-behavior) and the height still jumped * instantly rather than animating — likely because the actual DOM change * driving this is the tabs plugin toggling the `hidden` attribute on a * sibling `.blablablocks-tab-content` panel, not a style change on this * element itself, so the browser may not be treating it as "this element's * height changed" for transition purposes. Left in anyway as a harmless, * zero-cost attempt: `@supports`-gated, so unsupported browsers (and, right * now, this one) just keep the instant jump — an accepted tradeoff here, not * a regression — and it'll start working for free if/when browsers extend * interpolate-size to cover this case. Revisit if a real transition is * wanted: would need a JS-measured height (or a shared-grid-cell layout so * all three panels stay in flow) rather than relying on `auto` interpolation * across a `hidden`-attribute swap. */ @supports (interpolate-size: allow-keywords) { #top.homepage-august2026 .blablablocks-tabs-content { interpolate-size: allow-keywords; transition: height 0.3s ease; } } /* CU-86bbg6v27: match the quote's own (centered) alignment at every width. * This used to right-align unconditionally, which was assumed to read as * deliberate on desktop — QA flagged that it doesn't; the name should align * with the quote text there too, not just on mobile. */ #top.homepage-august2026 .wp-block-pullquote cite{ text-align:center; }