/* ============================================================================= * Cosmos Club ACF blocks - ported from cosmos-club Sage theme (prod) to neve-child. * Hand-converted from assets/styles/blocks/_*.scss with SCSS variables resolved * and Bootstrap breakpoint mixins expanded to plain @media queries. * * Vars resolved: * $vintage:#edeae3 $legaldye:#2c2218 $maroon:#600 $pomonagreen:#35533d * $goldenyellow:#f7f3ce $grullo:#8f8f80 $grullolight:#cfcec8 $cream:#f5f3ef * $gray:#999 $white:#fff * Breakpoints (Bootstrap 5 defaults): * sm: 575.98px / md: 767.98px / lg: 991.98px * ========================================================================== */ /* ---------- Background-color helper classes referenced by hero/picture ---- */ .vintage-bg{background-color:#edeae3} .legaldye-bg{background-color:#2c2218} .maroon-bg{background-color:#7b1113} .pomonagreen-bg{background-color:#35533d} .goldenyellow-bg{background-color:#f7f3ce} .grullo-bg{background-color:#8f8f80} .grullolight-bg{background-color:#cfcec8} .cream-bg{background-color:#f5f3ef} .white-bg{background-color:#fff} /* Dark-background rows need light text. The custom-bootstrap-row blocks on the * wining-dining page get these helper classes applied to their outer container; * force readable text colour on the row + every text-bearing descendant. */ .wp-block-custom-bootstrap-row.legaldye-bg, .wp-block-custom-bootstrap-row.maroon-bg, .wp-block-custom-bootstrap-row.pomonagreen-bg, .wp-block-custom-bootstrap-row.smokegreen-bg, .legaldye-bg.custom-row, .maroon-bg.custom-row, .pomonagreen-bg.custom-row, .smokegreen-bg.custom-row, .legaldye-bg, .maroon-bg, .pomonagreen-bg, .smokegreen-bg{color:#edeae3} .legaldye-bg p,.legaldye-bg li,.legaldye-bg h1,.legaldye-bg h2,.legaldye-bg h3,.legaldye-bg h4,.legaldye-bg h5,.legaldye-bg h6,.legaldye-bg span,.legaldye-bg strong,.legaldye-bg em, .maroon-bg p,.maroon-bg li,.maroon-bg h1,.maroon-bg h2,.maroon-bg h3,.maroon-bg h4,.maroon-bg h5,.maroon-bg h6,.maroon-bg span,.maroon-bg strong,.maroon-bg em, .pomonagreen-bg p,.pomonagreen-bg li,.pomonagreen-bg h1,.pomonagreen-bg h2,.pomonagreen-bg h3,.pomonagreen-bg h4,.pomonagreen-bg h5,.pomonagreen-bg h6,.pomonagreen-bg span,.pomonagreen-bg strong,.pomonagreen-bg em, .smokegreen-bg p,.smokegreen-bg li,.smokegreen-bg h1,.smokegreen-bg h2,.smokegreen-bg h3,.smokegreen-bg h4,.smokegreen-bg h5,.smokegreen-bg h6,.smokegreen-bg span,.smokegreen-bg strong,.smokegreen-bg em{color:#edeae3 !important} /* Headings/text inside dark sections also need to override .custom-heading's legaldye */ .legaldye-bg .custom-heading,.maroon-bg .custom-heading,.pomonagreen-bg .custom-heading,.smokegreen-bg .custom-heading{color:#edeae3 !important} .legaldye-bg .custom-heading.small-line::after, .maroon-bg .custom-heading.small-line::after, .pomonagreen-bg .custom-heading.small-line::after, .smokegreen-bg .custom-heading.small-line::after{background-color:#edeae3} /* ---------- Full-bleed bg-tinted sections (Kadence-aware) ----------------- * On this page, every bg-colour band is a .wp-block-custom-bootstrap-row * nested inside one or two Kadence wrappers: * *
*
*
*
*
... * * The Kadence wrappers cap maxWidth at 1223px, so a 100vw breakout on the * inner bootstrap-row gets clipped. Use :has() to push the breakout up to * the outermost Kadence row that contains a bg-tinted bootstrap-row, then * neutralise every constraint between it and the bg. * -------------------------------------------------------------------------- */ /* Variables: list of bg classes that should trigger full-bleed */ :root{--cc-bgs:".cream-bg, .goldenyellow-bg, .vintage-bg, .legaldye-bg, .pomonagreen-bg, .maroon-bg, .smokegreen-bg, .grullolight-bg, .white-bg"} /* 1. The bg-row itself loses its own max-width container effect - bg paints full width of its parent. */ .wp-block-custom-bootstrap-row.cream-bg, .wp-block-custom-bootstrap-row.goldenyellow-bg, .wp-block-custom-bootstrap-row.vintage-bg, .wp-block-custom-bootstrap-row.legaldye-bg, .wp-block-custom-bootstrap-row.pomonagreen-bg, .wp-block-custom-bootstrap-row.maroon-bg, .wp-block-custom-bootstrap-row.smokegreen-bg, .wp-block-custom-bootstrap-row.grullolight-bg, .wp-block-custom-bootstrap-row.white-bg{ width:100%; margin:0; padding-top:48px; padding-bottom:48px; } /* 2. Inner container re-anchors to site content column for text readability. */ .wp-block-custom-bootstrap-row.cream-bg > .custom-row-container, .wp-block-custom-bootstrap-row.goldenyellow-bg > .custom-row-container, .wp-block-custom-bootstrap-row.vintage-bg > .custom-row-container, .wp-block-custom-bootstrap-row.legaldye-bg > .custom-row-container, .wp-block-custom-bootstrap-row.pomonagreen-bg > .custom-row-container, .wp-block-custom-bootstrap-row.maroon-bg > .custom-row-container, .wp-block-custom-bootstrap-row.smokegreen-bg > .custom-row-container, .wp-block-custom-bootstrap-row.grullolight-bg > .custom-row-container, .wp-block-custom-bootstrap-row.white-bg > .custom-row-container{ max-width:1140px;margin-left:auto;margin-right:auto; padding-left:24px;padding-right:24px;box-sizing:border-box; } /* 3. Kadence wrappers that contain a bg-tinted row must release all constraints. */ .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.cream-bg), .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.goldenyellow-bg), .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.vintage-bg), .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.legaldye-bg), .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.pomonagreen-bg), .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.maroon-bg), .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.smokegreen-bg), .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.grullolight-bg), .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.white-bg){ max-width:none !important; width:100vw !important; position:relative; left:50%; right:50%; margin-left:-50vw !important; margin-right:-50vw !important; padding-left:0 !important; padding-right:0 !important; } /* Inner Kadence sublayers must not re-constrain the bg-row. */ .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.cream-bg) .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.goldenyellow-bg) .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.vintage-bg) .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.legaldye-bg) .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.pomonagreen-bg) .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.maroon-bg) .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.smokegreen-bg) .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.grullolight-bg) .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.wp-block-custom-bootstrap-row.white-bg) .kt-row-column-wrap, .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.cream-bg), .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.goldenyellow-bg), .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.vintage-bg), .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.legaldye-bg), .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.pomonagreen-bg), .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.maroon-bg), .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.smokegreen-bg), .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.grullolight-bg), .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.white-bg), .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.cream-bg) > .kt-inside-inner-col, .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.goldenyellow-bg) > .kt-inside-inner-col, .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.vintage-bg) > .kt-inside-inner-col, .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.legaldye-bg) > .kt-inside-inner-col, .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.pomonagreen-bg) > .kt-inside-inner-col, .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.maroon-bg) > .kt-inside-inner-col, .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.smokegreen-bg) > .kt-inside-inner-col, .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.grullolight-bg) > .kt-inside-inner-col, .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-custom-bootstrap-row.white-bg) > .kt-inside-inner-col{ max-width:none !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; flex:1 1 100% !important; } /* 4. Fallback for browsers that don't grok :has() - apply a near-equivalent * breakout directly on the bg-row. Browsers WITH :has() will hit the rules * above first; this is layered defensively. */ @supports not selector(:has(*)) { .wp-block-custom-bootstrap-row.cream-bg, .wp-block-custom-bootstrap-row.goldenyellow-bg, .wp-block-custom-bootstrap-row.vintage-bg, .wp-block-custom-bootstrap-row.legaldye-bg, .wp-block-custom-bootstrap-row.pomonagreen-bg, .wp-block-custom-bootstrap-row.maroon-bg, .wp-block-custom-bootstrap-row.smokegreen-bg, .wp-block-custom-bootstrap-row.grullolight-bg, .wp-block-custom-bootstrap-row.white-bg{ position:relative;width:100vw;left:50%;right:50%; margin-left:-50vw;margin-right:-50vw; } } /* 5. Avoid horizontal page scroll from the 100vw breakout (scoped page only). */ html,body{overflow-x:hidden} /* ---------- Full-bleed for ACF hero + picture-content blocks -------------- * Same approach as the bootstrap-row sections: break the block out to 100vw * with negative margin, then re-anchor inner text/image content to the page * content column. Hero and picture-content can appear: * (a) at top-level inside Neve's .nv-content-wrap, OR * (b) nested inside a Kadence column wrapper. * Both paths are covered. */ /* 1. The block itself breaks out to viewport width when at top level. */ .nv-content-wrap > .custom-hero, .nv-content-wrap > .picture, .entry-content > .custom-hero, .entry-content > .picture{ position:relative; width:100vw; left:50%;right:50%; margin-left:-50vw !important; margin-right:-50vw !important; max-width:none !important; } /* 2. Kadence wrapper around hero or picture-content → release constraints * so the block can itself perform the 100vw breakout from there. */ .wp-block-kadence-rowlayout:has(.custom-hero), .wp-block-kadence-rowlayout:has(.picture){ max-width:none !important; width:100vw !important; position:relative; left:50%;right:50%; margin-left:-50vw !important; margin-right:-50vw !important; padding-left:0 !important; padding-right:0 !important; } .wp-block-kadence-rowlayout:has(.custom-hero) .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.picture) .kt-row-column-wrap, .wp-block-kadence-column:has(> .kt-inside-inner-col > .custom-hero), .wp-block-kadence-column:has(> .kt-inside-inner-col > .picture), .wp-block-kadence-column:has(> .kt-inside-inner-col > .custom-hero) > .kt-inside-inner-col, .wp-block-kadence-column:has(> .kt-inside-inner-col > .picture) > .kt-inside-inner-col{ max-width:none !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; flex:1 1 100% !important; } /* 3. Inside the hero, anchor the readable content (text column) to the * 1140px page content width so it doesn't sit hard against the viewport edge. * The bg image still spans the full viewport. */ .custom-hero{overflow:hidden} .custom-hero > .custom-hero-container{max-width:1140px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;box-sizing:border-box;position:relative;z-index:1} /* Bg image: in the full-bleed layout, send the bg image to the right half of the viewport. */ .custom-hero > .custom-hero-bg-container{width:50vw;left:auto;right:0} /* 4. Picture-content full-bleed variants - the .picture container is 100vw. * For text-bearing variants, re-anchor the .picture-content-container. */ .picture{overflow:hidden} .picture.full-width-pic .picture-image-container, .picture.full-width .picture-image-container, .picture.full-width-half .picture-image-container{width:100%} .picture.full-width > .picture-content-container, .picture.full-width-half > .picture-content-container{max-width:1140px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;box-sizing:border-box} /* For the .grid-four variant: image is absolutely positioned on the right * half (50%); pull the picture-content-container to anchor on the left half * of the viewport while the image fills the right half. */ .picture.grid-four > .picture-image-container{right:0;width:50vw} .picture.grid-four > .picture-content-container{width:50vw;max-width:50vw} .picture.grid-four > .picture-content-container > .picture-content{max-width:570px;margin-left:auto;padding-left:24px;padding-right:48px;box-sizing:border-box} @media (max-width:767.98px){ .picture.grid-four > .picture-image-container{width:100vw;position:relative;height:240px} .picture.grid-four > .picture-content-container{width:100vw;max-width:100vw} .picture.grid-four > .picture-content-container > .picture-content{margin-left:0;padding:32px 24px} } /* The .half-half variant (the pair of supporting images under .grid-four) * also needs to span the viewport so the image pair aligns under the main. */ .picture.half-half{width:100vw} .picture.half-half .picture-image-container{width:50%;height:auto} @media (max-width:767.98px){ .picture.half-half{flex-direction:column} .picture.half-half .picture-image-container{width:100%} } /* ---------- Hero ---------------------------------------------------------- */ .custom-hero{position:relative;overflow:hidden} .custom-hero .custom-hero-bg-container{position:absolute;width:50%;height:100%;top:0;right:0} .custom-hero .custom-hero-bg-container .custom-hero-bg-image{object-fit:cover;width:100%;height:100%} .custom-hero .custom-hero-bg-placeholder{display:none} .custom-hero > .custom-hero-container > .row{min-height:320px} .custom-hero .custom-hero-content{position:relative;padding:40px 40px 40px 0;width:50%;align-items:flex-start !important;color:#edeae3} .custom-hero .custom-hero-content .custom-hero-tagline{margin-bottom:0} .custom-hero .custom-hero-content .custom-hero-heading, .custom-hero .custom-hero-content .custom-hero-subhead, .custom-hero .custom-hero-content .custom-hero-body{margin-bottom:1.5rem} .custom-hero .custom-hero-content .custom-hero-heading{line-height:1.1;font-family:'Sorts Mill Goudy',serif;font-size:2.75rem;margin-top:.25rem;margin-bottom:2.25rem;position:relative} .custom-hero .custom-hero-content .custom-hero-heading::after{content:"";display:block;width:40px;height:1px;background-color:#2c2218;margin-top:18px} .custom-hero .custom-hero-content .custom-hero-cta-button{margin-bottom:2rem} .custom-hero.vintage-bg .custom-hero-content, .custom-hero.goldenyellow-bg .custom-hero-content{color:#2c2218} .custom-hero.vintage-bg .custom-hero-content .custom-hero-tagline, .custom-hero.goldenyellow-bg .custom-hero-content .custom-hero-tagline{color:#2c2218} .custom-hero.vintage-bg .custom-hero-content .custom-hero-heading::after, .custom-hero.goldenyellow-bg .custom-hero-content .custom-hero-heading::after{background-color:#2c2218} .custom-hero .custom-hero-text{line-height:inherit} @media (max-width: 991.98px){ .custom-hero .custom-hero-content{padding:40px} } @media (max-width: 767.98px){ .custom-hero .custom-hero-content{padding:40px 20px} } @media (min-width: 576px) and (max-width: 767.98px){ .custom-hero > .custom-hero-container > .row{min-height:200px} } @media (max-width: 575.98px){ .custom-hero .custom-hero-bg-container{height:200px;width:100%;position:relative} .custom-hero .custom-hero-content{width:100%} .custom-hero .custom-hero-content .custom-hero-heading{line-height:32px} .custom-hero .button.hero{width:100%;text-align:center} } /* ---------- Heading ------------------------------------------------------- */ .custom-heading-placeholder{display:none} .custom-heading-tagline{margin-bottom:4px;font-family:'Quattrocento Sans',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;color:#2c2218} .custom-heading{font-family:'Sorts Mill Goudy',serif;color:#2c2218} .custom-heading.small-line{margin-bottom:2.5rem} .custom-heading.small-line::after{content:"";display:block;width:40px;height:1px;background-color:#2c2218;position:relative;top:20px} .custom-heading.label{font-family:'Quattrocento Sans',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:1rem;font-weight:700} /* ---------- Picture-content ---------------------------------------------- */ .picture{position:relative;overflow:hidden;display:flex;flex-direction:column} .picture .picture-image-container{width:100%;height:496px;position:relative} .picture .picture-image-container .picture-bg-image{object-fit:cover;width:100%;height:100%} .picture .picture-bg-placeholder{display:none} .picture .picture-content{position:relative;padding:40px 40px 40px 0;width:100%;align-items:flex-start;color:#edeae3;float:right} .picture .picture-content .picture-tagline{margin-bottom:0} .picture .picture-content .picture-heading, .picture .picture-content .picture-subhead{margin-bottom:2.5rem} .picture .picture-content .picture-heading{line-height:1.15;font-family:'Sorts Mill Goudy',serif;font-size:2rem;margin-bottom:1.75rem} .picture .picture-content .picture-heading::after{content:"";display:block;width:40px;height:1px;background-color:#edeae3;margin-top:14px} .picture .picture-content .picture-cta-button{margin-bottom:2rem} .picture.vintage-bg .picture-content, .picture.goldenyellow-bg .picture-content, .picture.white-bg .picture-content{color:#2c2218} .picture.vintage-bg .picture-content .picture-tagline, .picture.goldenyellow-bg .picture-content .picture-tagline, .picture.white-bg .picture-content .picture-tagline{color:#2c2218} .picture.vintage-bg .picture-content .picture-heading::after, .picture.goldenyellow-bg .picture-content .picture-heading::after, .picture.white-bg .picture-content .picture-heading::after{background-color:#2c2218} .picture .picture-text{line-height:inherit} @media (max-width: 991.98px){ .picture .picture-content{padding:40px} } @media (max-width: 767.98px){ .picture .picture-content{padding:40px 20px} } @media (max-width: 575.98px){ .picture.main{flex-direction:column-reverse} .picture .picture-image-container{height:200px} .picture .picture-content{width:100%} .picture .picture-content .picture-heading{line-height:32px} .picture .button{width:100%;text-align:center} } .picture.full-width-half .picture-content-container{display:flex;flex-direction:row} .picture.full-width-half .picture-content{width:50%;float:none;padding:40px 170px 60px 0} .picture.full-width-half .picture-content.second-half{padding:40px 0 60px} .picture.full-width-half .picture-content.second-half h1, .picture.full-width-half .picture-content.second-half h2, .picture.full-width-half .picture-content.second-half h3, .picture.full-width-half .picture-content.second-half h4, .picture.full-width-half .picture-content.second-half h5, .picture.full-width-half .picture-content.second-half h6{margin-bottom:20px} @media (max-width: 991.98px){ .picture.full-width-half .picture-content{padding:40px} } @media (max-width: 767.98px){ .picture.full-width-half .picture-content{padding:40px 20px} .picture.full-width-half .picture-content.second-half{padding:40px 20px} } @media (max-width: 575.98px){ .picture.full-width-half .picture-content-container{flex-direction:column} .picture.full-width-half .picture-content{padding:40px 20px 0;width:100%} .picture.full-width-half .picture-content.second-half{padding:0 20px 20px} } .picture.grid-four .picture-image-container{position:absolute;width:50%;height:100%;top:0;right:0} .picture.grid-four .picture-content-container{width:50%} .picture.grid-four .picture-content{position:relative;padding:40px 170px 40px 0;width:480px;align-items:flex-start;color:#edeae3;float:right} @media (max-width: 991.98px){ .picture.grid-four .picture-content{width:100%;padding:40px} } @media (max-width: 767.98px){ .picture.grid-four .picture-content{padding:40px 20px} } @media (max-width: 575.98px){ .picture.grid-four .picture-image-container{height:200px;width:100%;position:relative} .picture.grid-four .picture-content-container{width:100%} .picture.grid-four .picture-content .picture-subhead{margin-bottom:6px} } .picture.half-half{flex-direction:row} .picture.half-half .picture-image-container{position:relative;width:50%} .picture.half-half .picture-image-container .picture-bg-image{width:101%} @media (max-width: 575.98px){ .picture.half-half{flex-direction:column} .picture.half-half .picture-image-container{width:100%} } /* ---------- Links-content (PDF/link list with bookmark-style title) ------ */ .cc-links-block{background-color:#f5f3ef;border:solid 1px #cfcec8;padding:20px 0;position:relative} .cc-links-block .links-title{margin-bottom:2.5rem;position:relative;padding:0 20px 0;font-family:'Sorts Mill Goudy',serif} .cc-links-block .links-title::after{content:"";display:block;width:40px;height:1px;background-color:#2c2218;position:relative;top:20px} .cc-links-block .link-item-container{border-bottom:solid 1px #edeae3;position:relative} .cc-links-block .link-item-container a{color:#600;text-decoration:none;opacity:1} .cc-links-block .link-item-container a:hover{color:#8f8f80} .cc-links-block .link-item-container a:visited, .cc-links-block .link-item-container a.active{color:#600} .cc-links-block .link-item-container a:visited:hover, .cc-links-block .link-item-container a.active:hover{color:#8f8f80} .cc-links-block .link-item-container .link-item{padding:10px 20px;position:relative;line-height:20px} .cc-links-block .link-item-container .link-item .link-heading{padding-right:32px;text-decoration:underline;font-family:'Quattrocento Sans',sans-serif;position:relative} .cc-links-block .link-item-container .link-item .link-heading.link-arrow::after, .cc-links-block .link-item-container .link-item .link-heading.link-new-tab::after{ content:"";position:absolute;top:50%;right:0;width:14px;height:14px;margin-top:-7px; background-repeat:no-repeat;background-position:center;background-size:contain; } .cc-links-block .link-item-container .link-item .link-heading.link-arrow::after{ background-image:url("data:image/svg+xml;utf8,"); } .cc-links-block .link-item-container .link-item .link-heading.link-new-tab::after{ background-image:url("data:image/svg+xml;utf8,"); } .cc-links-block .link-item-container .link-item .link-subhead{font-family:'Quattrocento',serif;font-size:14px;line-height:28px;color:#2c2218} .cc-links-block.news-communication .link-item-container a, .cc-links-block.news-communication .link-item-container a:hover, .cc-links-block.news-communication .link-item-container a:visited, .cc-links-block.news-communication .link-item-container a.active{color:#2c2218} .cc-links-block.news-communication .link-item-container .link-item:hover{background-color:#edeae3} .cc-links-block.news-communication .link-item-container .link-item .link-heading{font-weight:bold;font-family:'Quattrocento',serif;text-decoration:none;font-size:18px} /* ---------- Accordion ---------------------------------------------------- */ .accordion-block .custom-accordion-container{padding-top:20px;padding-bottom:20px} .accordion-item-block{margin-bottom:0} .accordion-item-block .accordion-header .accordion-button{ font-size:inherit;font-weight:inherit;color:#2c2218;width:100%;padding:16px 0; position:relative;border:0;border-bottom:solid 1px #2c2218;border-radius:0 !important; background-color:transparent;text-align:left;display:flex;align-items:center;justify-content:space-between; } .accordion-item-block .accordion-header .accordion-button .accordion-label{box-shadow:none;font-family:'Sorts Mill Goudy',serif;font-size:1.25rem} .accordion-item-block .accordion-header .accordion-button::after{ content:"Show +";display:inline-block;width:auto;height:1.5rem; font-family:'Quattrocento Sans',sans-serif;font-size:14px;line-height:22px;font-weight:normal;color:#2c2218; background-image:none; } .accordion-item-block .accordion-header .accordion-button:not(.collapsed){border-bottom:solid 0 #2c2218} .accordion-item-block .accordion-header .accordion-button:not(.collapsed)::after{content:"Hide −"} .accordion-item-block .accordion-header .accordion-button:hover, .accordion-item-block .accordion-header .accordion-button:focus-visible{background-color:transparent;color:#2c2218;opacity:1} .accordion-item-block .accordion-header .accordion-button:focus-visible{outline:none} .accordion-item-block .accordion-body{border-bottom:solid 1px #2c2218;padding:16px 0} .accordion-item-block .accordion-body .content-separator{display:none} /* Collapse behaviour fallback (without Bootstrap JS): rely on .collapse / .show toggling. * Bootstrap's Collapse JS is bundled on prod; if missing on preview, the small JS shim in * cosmos-acf-blocks/loader.php attaches click handlers to .accordion-button. */ .accordion-collapse.collapse:not(.show){display:none} /* ---------- Buttons (light/dark + tertiary + hero) ---------------------- */ .custom-button.button-margin-top{margin-top:2.25rem} .custom-button.button-margin-bottom{margin-bottom:2.25rem} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button{appearance:none;-webkit-appearance:none;color:#999;border-radius:0;font-size:1rem;line-height:1.25rem;border:0} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light, :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark{text-decoration:none;padding:.5rem 1rem;display:inline-block;position:relative;font-family:'Quattrocento Sans',sans-serif} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light:hover,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light:focus,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light:visited, :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark:hover,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark:focus,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark:visited{text-decoration:none;cursor:pointer;opacity:1} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light.disabled,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark.disabled{pointer-events:none;cursor:default;text-decoration:none;color:#8f8f80;background-color:#cfcec8;border:2px solid #cfcec8} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark:link,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark:visited{background-color:#2c2218 !important;color:#fff !important;text-decoration:none !important} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark:hover,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark:focus{color:#fff !important;background-color:#3d3022 !important;text-decoration:none !important} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark.secondary{outline:solid 1px #2c2218;background-color:transparent;color:#2c2218} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark.secondary:hover,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark.secondary:focus{outline:solid 2px #2c2218;color:#2c2218;background-color:rgba(44,34,24,.05)} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark.tertiary{background-color:transparent;color:#2c2218;outline:none} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark.tertiary:hover,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-dark.tertiary:focus{color:#2c2218;text-decoration:underline;background-color:transparent} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light{background-color:#edeae3;color:#2c2218} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light:hover,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light:focus{color:#2c2218;font-weight:bold;background-color:#dcd6c8} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light:visited{color:#2c2218} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light.secondary{outline:solid 1px #edeae3;background-color:transparent;color:#edeae3} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light.secondary:hover,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light.secondary:focus{outline:solid 2px #edeae3;color:#edeae3;background-color:rgba(237,234,227,.1)} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light.tertiary{background-color:transparent;color:#edeae3;outline:none} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light.tertiary:hover,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button-light.tertiary:focus{outline:none;text-decoration:underline;background-color:transparent} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button.hero{font-family:'Quattrocento Sans',sans-serif;padding:.85rem 1rem;font-size:1.5rem;line-height:1.2} @media (max-width: 575.98px){ :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button.hero{font-size:1.5rem;width:100%;text-align:center} } :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button.tertiary{font-size:1.125rem;font-weight:bold} /* ---------- Primary CTAs (button_appearance="primary") align to design-system maroon ---- */ :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button.primary{background-color:#7b1113 !important;color:#fff !important;font-family:'Quattrocento Sans',sans-serif !important} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button.primary:link,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button.primary:visited{color:#fff !important} :is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button.primary:hover,:is(.custom-hero,.custom-button,.picture,.accordion-item-block,.tile-content) .button.primary:focus{background-color:#5a0c0e !important;color:#fff !important;text-decoration:none} /* ===== BEGIN Library page (707) redesign additions - 2026-08-20 ===== * The ACF block suite now also serves /members/resources/library/. * All values from the approved palette (feedback_design_system). */ /* Dark hero bands need a light heading rule; the default #2c2218 vanishes. */ .custom-hero.maroon-bg .custom-hero-content .custom-hero-heading::after, .custom-hero.pomonagreen-bg .custom-hero-content .custom-hero-heading::after{background-color:#edeae3} /* Paired CTAs rendered from the hero body field (template supports one CTA). */ .custom-hero .custom-hero-body .cc-hero-cta-row{display:flex;gap:16px;flex-wrap:wrap;margin:0} @media (max-width:575.98px){ .custom-hero .custom-hero-body .cc-hero-cta-row{flex-direction:column} .custom-hero .custom-hero-body .cc-hero-cta-row .button.hero{width:100%;text-align:center} } .cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} /* Accordion hygiene: neutralise bootstrap row/col gutters, clear floated * images inside bodies, and give keyboard users a visible focus ring. */ .accordion-block .custom-accordion-container .row{margin:0;display:block} .accordion-block .custom-accordion-container .col{padding:0} .accordion-item-block .accordion-header{margin:0} .accordion-item-block .accordion-body::after{content:"";display:table;clear:both} .accordion-item-block .accordion-header .accordion-button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(123,17,19,.35)} /* ===== END Library page (707) redesign additions ===== */ /* === cc-hero-centered: centered ornamented band variant (Bulletin 703) === Reproduces the retired .cc-bul-hero look on the acf/hero template: maroon radial+135deg gradient, gold-flanked cipher ornament (composited background on ::before - the template has no ornament slot), centered gold eyebrow, white Sorts Mill title, italic white sub. Font SIZES are enforced by the matching locks in dist/css/ada-typography.css (the .entry-content h1/p !important floors own sizing); sizes here are the design spec. */ .custom-hero.cc-hero-centered{ text-align:center; background: radial-gradient(circle at 14% 32%, rgba(255,255,255,0.08), transparent 24%), linear-gradient(135deg, #7b1113 0%, #5a0c0e 100%); box-shadow:0 16px 34px rgba(60,32,18,0.14); padding:64px 24px 56px; } .custom-hero.cc-hero-centered .custom-hero-bg-container{display:none} .custom-hero.cc-hero-centered > .custom-hero-container > .row{min-height:0;justify-content:center} .custom-hero.cc-hero-centered .custom-hero-content{ width:100%; max-width:none; flex:0 0 100%; padding:0; justify-content:center; color:#fff; } .custom-hero.cc-hero-centered .custom-hero-content > div{width:100%} /* Ornament: cipher + flanking 2px gold rules as one composited background. Rule width = 50% - half the 64px cipher - the 20px gap. */ .custom-hero.cc-hero-centered .custom-hero-content > div::before{ content:""; display:block; height:71px; max-width:520px; margin:0 auto 18px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25)); background: url(/wp-content/uploads/2026/05/Final_GoldWhiteCC_Logo_transparent.png) center / 64px 71px no-repeat, linear-gradient(90deg, transparent, rgba(215,180,106,0.65) 35%, #d7b46a) left center / calc(50% - 52px) 2px no-repeat, linear-gradient(90deg, #d7b46a, rgba(215,180,106,0.65) 65%, transparent) right center / calc(50% - 52px) 2px no-repeat; } /* !important on colors: .maroon-bg h1/p/... paints #edeae3 !important; these are later + higher specificity so they win. cc-bul-hero used pure white. */ .custom-hero.cc-hero-centered .custom-hero-content .custom-hero-tagline{ color:#d7b46a !important; font-family:inherit; font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; margin:0 0 6px; } .custom-hero.cc-hero-centered .custom-hero-content .custom-hero-heading{ font-family:'Sorts Mill Goudy', Georgia, serif; font-weight:500; color:#fff !important; font-size:clamp(38px, 5vw, 56px); line-height:1.15; margin:0 0 12px; } .custom-hero.cc-hero-centered .custom-hero-content .custom-hero-heading::after{display:none} .custom-hero.cc-hero-centered .custom-hero-content .custom-hero-subhead{ color:#fff !important; font-style:italic; font-size:17px; line-height:1.55; max-width:720px; margin:0 auto; } @media (max-width: 781px){ .custom-hero.cc-hero-centered{padding:48px 18px 44px} .custom-hero.cc-hero-centered .custom-hero-content > div::before{ max-width:320px; background: url(/wp-content/uploads/2026/05/Final_GoldWhiteCC_Logo_transparent.png) center / 64px 71px no-repeat, linear-gradient(90deg, transparent, rgba(215,180,106,0.65) 35%, #d7b46a) left center / calc(50% - 46px) 2px no-repeat, linear-gradient(90deg, #d7b46a, rgba(215,180,106,0.65) 65%, transparent) right center / calc(50% - 46px) 2px no-repeat; } } /* === END cc-hero-centered: centered ornamented band variant === */ /* === cc tile-content (acf/tile-content) - Featured Events cards === White cards per the design system (border #E8E2DC, radius 12, lift shadow), Sorts Mill headings, maroon uppercase date label, suite button-dark CTAs. Sizes are enforced by the tile locks in dist/css/ada-typography.css. */ .tile-content{padding:8px 0} .tile-content > .tile-content-container{max-width:1140px;margin:0 auto;padding:0 24px;box-sizing:border-box} .tile-content .tile_block-heading{font-family:'Sorts Mill Goudy',Georgia,serif;font-weight:400;color:#2c2218;text-align:center;font-size:28px;margin:0 0 22px} .tile-content .tile-content-row{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch} .tile-content .tile-item-container{flex:1 1 280px;min-width:0;display:flex} .tile-content .tile-item{background:#fff;border:1px solid #E8E2DC;border-radius:12px;box-shadow:0 10px 30px rgba(44,34,24,.08);overflow:hidden;display:flex;flex-direction:column;width:100%} .tile-content .tile-image-container{margin:0} .tile-content .tile-image{width:100%;height:190px;object-fit:cover;display:block} .tile-content .tile-content-text{padding:24px;display:flex;flex-direction:column;flex:1;text-align:left} .tile-content .tile-heading{font-family:'Sorts Mill Goudy',Georgia,serif;font-weight:400;font-size:22px;color:#2c2218;margin:0 0 6px} .tile-content .tile-subhead{font-family:inherit;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#7b1113;margin:0 0 12px} .tile-content .tile-description{font-size:15px;line-height:1.6;color:#4a4038;margin:0 0 18px} .tile-content .tile-cta{margin-top:auto} /* the generic .button-dark rules are !important; re-assert the outlined secondary look for tiles (suite-approved dark-outline pair) */ .tile-content .tile-cta .button-dark.secondary, .tile-content .tile-cta .button-dark.secondary:link, .tile-content .tile-cta .button-dark.secondary:visited{background-color:transparent !important;color:#2c2218 !important;outline:solid 1px #2c2218} .tile-content .tile-cta .button-dark.secondary:hover, .tile-content .tile-cta .button-dark.secondary:focus{background-color:rgba(44,34,24,.05) !important;color:#2c2218 !important;outline:solid 2px #2c2218} .tile-content .tile-cta .button:focus-visible{box-shadow:0 0 0 3px rgba(123,17,19,.35)} @media (max-width: 781px){ .tile-content .tile-item-container{flex-basis:100%} } /* === END cc tile-content (acf/tile-content) === */