/* FAQs (page-id-12): Weebly banner + "accordion--material" FAQ element, matched to the live site. Live accordion facts (measured): title Poppins 20px/40px (line-height unitless 2), opacity .75 + hover 1, every nested in a title is opacity .5 (so double-wrapped titles read .25), "+" / en dash is Poppins 700 25px/50px at top:10 right:20 opacity .5 in BOTH states, active item gets box-shadow 0 0 20px rgba(0,0,0,.15) + z-index 3, the content block animates max-height 0 -> scrollHeight+20 over .5s ease, closing animates max-height back to 0 but the item is switched off after 250ms (content pops, title colours fade from 250ms). */ /* Weebly sets -webkit-font-smoothing:antialiased on the body (grayscale text on macOS Chrome); the staged body inherits 'auto' */ body.page-id-12{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* ---------- banner ---------- */ body.page-id-12 .wp-block-post-content>.wp-block-cover h2.wp-block-heading{margin:0} /* Live paints this photo as a CSS background (background-position 50% 61.14%, cover). A staged is resampled differently by Chrome (3.5% speckle across the whole banner at 1440); painting the same file as the cover's own background gives 0.09%. The stays in the DOM, only hidden. */ body.page-id-12 .wp-block-post-content>.wp-block-cover{background:url("/wp-content/uploads/prefab-source/uploads/9/3/0/4/93044552/background-images/326564528.jpg") 50% 61.14%/cover no-repeat} body.page-id-12 .wp-block-cover__image-background{visibility:hidden} /* Weebly .banner box has min-height:50px (content box) */ body.page-id-12 .wp-block-post-content>.wp-block-cover .wp-block-cover__inner-container{min-height:50px} /* Weebly's phone banner layout runs up to and including 767px (height follows the content, .banner padding is 5vw) */ @media(min-width:768px){ body.page-id-12 .wp-block-post-content>.wp-block-cover{min-height:500px!important} } @media(max-width:767px){ body.page-id-12 .wp-block-post-content>.wp-block-cover{min-height:0!important} body.page-id-12 .wp-block-post-content>.wp-block-cover .wp-block-cover__inner-container{padding:5vw} } /* Weebly .container: 50px side padding above 1024px (20px at or below it) */ @media(min-width:1025px){ body.page-id-12 .wp-block-post-content>.wp-block-group.alignfull{padding-left:50px;padding-right:50px} } /* ---------- accordion item ---------- */ body.page-id-12 .wp-block-post-content .wp-block-details{ position:relative;z-index:1;margin:0 0 1px;padding:0;background:#fff;border:0;box-shadow:none; interpolate-size:allow-keywords;transition:box-shadow .5s ease .25s,z-index .5s ease .25s} body.page-id-12 .wp-block-post-content .wp-block-details:first-of-type{margin-top:20px} body.page-id-12 .wp-block-post-content .wp-block-details:last-of-type{margin-bottom:21px} body.page-id-12 .wp-block-post-content .wp-block-details[open]{z-index:3;padding:0;background:#fff;box-shadow:0 0 20px rgba(0,0,0,.15);transition:box-shadow .5s ease,z-index .5s ease} @media(hover:hover){body.page-id-12 .wp-block-post-content .wp-block-details:hover{z-index:3}} /* ---------- title bar ---------- */ body.page-id-12 .wp-block-details>summary{ position:relative;display:block;box-sizing:border-box;list-style:none;cursor:pointer;min-height:45px;margin:0; padding:10px 20px;background:#d5d5d5;opacity:.75;color:#717170; font-family:"Open Sans",sans-serif;font-size:16px;font-weight:700;line-height:26px;text-transform:uppercase; transition:background-color .25s ease .25s,opacity .25s ease} body.page-id-12 .wp-block-details[open]>summary{background:#5cbce0;opacity:1;margin:0;color:#717170;transition:background-color .25s ease,opacity .25s ease} @media(hover:hover){body.page-id-12 .wp-block-details>summary:hover{opacity:1}} body.page-id-12 .wp-block-details>summary::-webkit-details-marker{display:none} /* Weebly: .accordion__title span{opacity:.5} hits EVERY nested span. Bold titles are wrapped twice (outer span + inner bold span) so they read .25; the one regular-weight title (no here) has a single span and reads .5. Hover/open switch every span to 1 (no transition on the spans). */ body.page-id-12 .wp-block-details>summary>*{opacity:.5;transition:none} body.page-id-12 .wp-block-details>summary:has(strong)>*{opacity:.25} body.page-id-12 .wp-block-details[open]>summary>*{opacity:1} @media(hover:hover){body.page-id-12 .wp-block-details>summary:hover>*{opacity:1}} body.page-id-12 .wp-block-details>summary strong{font-weight:700} body.page-id-12 .wp-block-details>summary::after{ content:"+";position:absolute;top:10px;right:20px; font-family:Poppins,sans-serif;font-size:25px;font-weight:700;line-height:50px;color:#8c8c8c;opacity:.5} body.page-id-12 .wp-block-details[open]>summary::after{content:"\2013";color:#4f7f91;opacity:.5} /* ---------- content block ---------- */ body.page-id-12 .wp-block-details>:not(summary){margin:0!important;padding:10px 20px 20px;background:#5cbce0;font-size:16px;line-height:26px} /* Weebly animates max-height 0 -> scrollHeight+20 (.5s ease); on close the max-height runs back to 0 but .active is dropped after 250ms, so the block pops out at 250ms. calc-size()+::details-content reproduce that exactly; without them the theme's height 0->auto animation (style.css) stays in force. */ @supports (max-height:calc-size(fit-content,size)){ body.page-id-12 .wp-block-details::details-content{ display:flow-root;overflow:clip;height:auto;max-height:0;background:#5cbce0; transition:max-height .5s ease,content-visibility .25s allow-discrete} body.page-id-12 .wp-block-details[open]::details-content{max-height:calc-size(fit-content,size + 20px)} } /* ---------- phones (Weebly <= 766) ---------- */ @media(max-width:766px){ body.page-id-12 .wp-block-details>summary{font-size:20px;line-height:40px;padding:10px 20px} body.page-id-12 .wp-block-details>summary::after{top:10px;line-height:50px} body.page-id-12 .wp-block-details>:not(summary){line-height:2} } /* touch devices: Weebly drops its hover state on touch, and the 250ms "switch off" delay also applies to the span/title opacity */ @media(hover:none){ body.page-id-12 .wp-block-details>summary{transition:background-color .25s ease .25s,opacity .25s ease .25s} body.page-id-12 .wp-block-details[open]>summary{transition:background-color .25s ease,opacity .25s ease} body.page-id-12 .wp-block-details>summary>*{transition:opacity .001s linear .25s} body.page-id-12 .wp-block-details[open]>summary>*{transition:none} }