/** * USLS "See more / View more" collapse for the sample-documents sections. * * The collapsible block is the Fusion container generated server-side * INSIDE a fusion-text placeholder, in a section whose id starts with * "documents-" (documents-sample, documents-requested, ...). That * combination exists at most once per page. Two layouts share it, and the * CSS tells them apart by STRUCTURE (via :has), not by page or id — so it * works on every language page and every document page without renaming * anything in Fusion Builder: * * 1. GROUP layout (language pages — "Sample [Language] Documents"): the * generated column wrapper holds alternating pairs of children, one * per country: * ├ .fusion-title "Documents from Argentina" (child 1) * ├ .fusion-content-boxes its sample cards (child 2) * ├ .fusion-title "Documents from Bolivia" (child 3) * └ ... * A country group = 2 consecutive children, so: * show 2 groups -> hide from :nth-child(n + 5) * show 1 group -> hide from :nth-child(n + 3) * * 2. CARD layout (document pages — "Academic Transcript Samples", ...): * ONE flat .fusion-content-boxes block, no .fusion-title children; * the cards (.content-box-column) sit 2 per row, so: * show 8 cards (4 rows) -> hide from :nth-child(n + 9) * show 4 cards (2 rows) -> hide from :nth-child(n + 5) * * Adjust the numbers below to change how much stays visible. * * The rules only apply when has the `js` class (added by WordPress * * Browser note: the layout detection uses :has(), supported by all * browsers since ~2023. On older browsers the rules are simply ignored: * the full section shows and no button appears — the pre-plugin behavior. * * Expanding just adds `usls-expanded` on the generated container; the * :not() stops matching and every element returns to its original display * value, whatever the theme layout is. */ /* ---- 1. GROUP layout (wrapper contains .fusion-title children) ---- */ /* Desktop / tablet: show the first 2 country groups */ html.js [id^="documents-"] .fusion-text>.fusion-fullwidth:not(.usls-expanded) .fusion_builder_column>.fusion-column-wrapper:has(> .fusion-title)>div:nth-child(n + 5) { display: none; } /* Mobile: show only the first country group */ @media (max-width: 767px) { html.js [id^="documents-"] .fusion-text>.fusion-fullwidth:not(.usls-expanded) .fusion_builder_column>.fusion-column-wrapper:has(> .fusion-title)>div:nth-child(n + 3) { display: none; } } /* ---- 2. CARD layout (no .fusion-title children) ---- */ /* Desktop / tablet: show the first 8 cards (4 rows of 2) */ html.js [id^="documents-"] .fusion-text>.fusion-fullwidth:not(.usls-expanded) .fusion_builder_column>.fusion-column-wrapper:not(:has(> .fusion-title)) .fusion-content-boxes>.content-box-column:nth-child(n + 9) { display: none; } /* Mobile: show only the first 4 cards */ @media (max-width: 767px) { html.js [id^="documents-"] .fusion-text>.fusion-fullwidth:not(.usls-expanded) .fusion_builder_column>.fusion-column-wrapper:not(:has(> .fusion-title)) .fusion-content-boxes>.content-box-column:nth-child(n + 5) { display: none; } } /* * Safety net for Avada's scroll-triggered animations: the content boxes * use fadeIn-on-scroll, and boxes that were display:none when Avada * measured the page could otherwise stay invisible after expanding. */ .usls-expanded .fusion-animated { visibility: visible !important; } /* ---- Button ---- */ .usls-see-more-wrap { text-align: center; margin: 20px 0 0; } /* * Floating collapse button: while the section is EXPANDED, the button * sticks near the bottom of the viewport for as long as the section is on * screen, so visitors can collapse it again without scrolling to the last * card. Because the wrap is the last child of the section's fusion-text, * its sticky range is exactly the section's length: scroll past the * section and the button settles back into the flow and leaves the screen. * Collapsed state is untouched — the "See more" button stays in the flow. */ .usls-expanded+.usls-see-more-wrap { position: -webkit-sticky; position: sticky; bottom: 24px; z-index: 10; /* the full-width centering strip must not block clicks on the cards behind it — only the button itself is interactive */ pointer-events: none; } .usls-expanded+.usls-see-more-wrap .usls-see-more-btn { pointer-events: auto; /* the floating button passes over the cards, so it needs an opaque background to stay legible */ background: #fff; color: #000; border-color: #000; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25); } .usls-expanded+.usls-see-more-wrap .usls-see-more-btn:hover, .usls-expanded+.usls-see-more-wrap .usls-see-more-btn:focus-visible { background: #f2f2f2; } .usls-see-more-btn { display: inline-block; padding: 12px 28px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .usls-see-more-btn:hover, .usls-see-more-btn:focus-visible { background: rgba(0, 0, 0, 0.06); }