/* * Visual language matched from ncclcatholic.org/accompaniment and * /accompaniment/teaching: Amaranth headings, Lato body, dark navy * headings, gray body text, a solid maroon square-cornered button, and * NO card boxes/borders/shadows around content blocks - just spacing. * Scoped to .accompaniment-template so it never touches the rest of the site. */ /* * Full-bleed row BACKGROUND ONLY, regardless of how many padded/nested * ancestor containers sit above it (td-container, tdc-content-wrap, etc). * * IMPORTANT: this does not resize the row itself (that was the earlier, * broken version - it stretched the row's actual content/columns to * 100vw right along with the background, overflowing td-container). This * version leaves the row and its content completely untouched in normal * flow, and instead paints a decorative ::before layer, positioned behind * the content (z-index: -1), that bleeds to the viewport on its own. The * row just needs "position: relative" so that layer has something to * measure its top/bottom against. * * "isolation: isolate" is required, not optional: .td-container-wrap has * its own solid background-color (#fff). Without isolation, this row's * z-index: -1 layer gets compared against that ancestor's stacking * context instead of just this row's, and paints BEHIND the ancestor's * white background - i.e. it "works" but is completely invisible. * isolation: isolate scopes the negative z-index to just this row. * * Add "acc-full-bleed" (plus a acc-band-* color below) to a Visual * Composer row's own "Extra class name" field. * * Assumes the site is running in tagDiv's "stretched" layout, not "Boxed * Layout" - if Boxed Layout is on (check for a "td-boxed-layout" class on * ), 100vw bleeds past the boxed container's edges instead of * lining up with it, and this needs to be re-anchored to * .td-container-wrap's width instead of the viewport. */ .accompaniment-template .acc-full-bleed { position: relative; isolation: isolate; } .accompaniment-template .acc-full-bleed::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; background-color: inherit; z-index: -1; } .accompaniment-template .acc-band-cream { background-color: #fdf5e4; } .accompaniment-template .acc-band-white { background-color: #fff; } .accompaniment-template { font-family: 'Lato', sans-serif; color: #595959; } .accompaniment-template h1, .accompaniment-template h2, .accompaniment-template h3, .accompaniment-template h4, .accompaniment-template h5, .accompaniment-template h6 { font-family: 'Amaranth', sans-serif; color: #006d70; font-weight: 400; } /* shared button look - used by acc-btn (Guide Card / Series Topic Card links) and overridden onto native Visual Composer buttons so any button a content manager drops into these templates matches automatically */ .accompaniment-template .acc-btn, .accompaniment-template .vc_btn3, .accompaniment-template a.vc_btn3, .accompaniment-template .wpb_button { display: inline-block; background: #9a3324 !important; border: 2px solid #9a3324 !important; border-radius: 0 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); color: #fff !important; font-family: 'Lato', sans-serif; font-weight: 700; letter-spacing: 0.25px; padding: 9.5px 30px; text-decoration: none; text-align: center; } .accompaniment-template .acc-btn:hover, .accompaniment-template .vc_btn3:hover, .accompaniment-template .wpb_button:hover { background: #7d2a1d !important; border-color: #7d2a1d !important; color: #fff !important; } /* Guide Card */ .acc-guide-card { padding-block: 2rem; scroll-margin-top: 100px; /* keeps "Jump to" anchor targets clear of the sticky header */ } .acc-guide-card-title { margin: 0 0 4px; } .acc-guide-card-presenter { font-style: italic; margin: 0 0 12px; } /* video (~60%) sits next to the thumbnail+button (~fixed width), matching the reference page - not stacked full-width */ .acc-guide-card-media { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; } .acc-guide-card-video-wrap { flex: 1 1 320px; max-width: 60%; } @media only screen and (max-width: 768px) { .acc-guide-card-video-wrap { max-width: 100%; } } /* 16:9 responsive box - the oEmbed iframe otherwise renders at its native pixel size (e.g. 1920x1080), which is what made the video "too big" */ .acc-guide-card-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .acc-guide-card-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .acc-guide-card-resource { flex: 0 1 250px; max-width: 250px; text-align: center; } .acc-guide-card-thumb { display: block; max-width: 100%; height: auto; margin: 0 auto 12px; } @media only screen and (max-width: 768px) { .acc-guide-card-resource { margin-inline: auto; } } /* Series Topic Card (hub page) */ .acc-topic-card { padding-block: 2rem; } .acc-topic-card-title { margin: 0 0 4px; } .acc-topic-card-featuring { font-style: italic; margin: 0 0 8px; } /* fills the first column top-to-bottom before starting a second column, matching the reference page's topic lists (e.g. 8 items -> 4 + 4) */ .acc-topic-card-topics { margin: 0 0 16px; padding-left: 20px; column-count: 2; column-gap: 40px; } .acc-topic-card-topics li { break-inside: avoid; } .accompaniment-template .td-page-title { color: #07121c; margin-block: 2rem; } /* Panelist */ .acc-panelist { display: flex; gap: 20px; margin-bottom: 32px; align-items: center; } .acc-panelist-photo { flex: 0 0 250px; overflow: hidden; border-radius: 20px; } .acc-panelist-photo img { width: 100%; height: auto; } .acc-panelist-body { /* fills the remaining row width and can shrink/wrap its own text without affecting the photo's now-fixed width */ flex: 1 1 auto; min-width: 0; } .acc-panelist-name { margin: 0 0 8px; } .acc-panelist-website { display: inline-block; margin-top: 8px; color: #9a3324; } .acc-topic-card.acc-full-bleed:nth-child(2n+1), .acc-guide-card.acc-full-bleed:nth-child(2n+1) { background-color: #fdf5e4; } .acc-topic-card.acc-full-bleed:nth-child(2n), .acc-guide-card.acc-full-bleed:nth-child(2n) { background-color: #faf7f0; } @media only screen and (max-width: 768px) { .acc-panelist { flex-wrap: wrap; } } /* Masthead (parts/accompaniment-masthead.php) - 3-band header matched from ncclcatholic.org/accompaniment: dark title bar, gold logo band, teal divider */ .acc-masthead-title-bar { background-color: rgba(7, 18, 28, 0.9); padding: 19px 20px; text-align: center; } .acc-masthead-title-bar h2 { margin: 0; color: #fff; font-size: 42px; } .acc-masthead-logo-band { background-color: #f0b323; padding: 35px 20px; display: flex; justify-content: center; } .acc-masthead-logo-card { position: relative; z-index: 1; background: #fff; border-radius: 20px; padding: 24px 40px; max-width: 700px; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 180px; } .acc-masthead-logo { max-width: 100%; height: auto; display: block; } .acc-masthead-logo-mobile { display: none; max-width: 400px; width: 100%; } .acc-masthead-logo-placeholder { margin: 0; color: #9a9a9a; font-style: italic; text-align: center; } .acc-masthead-divider { background-color: #006d70; padding-block: 1rem; } .acc-masthead-divider .td-crumb-container { padding: 0; margin-inline: auto; margin-block: 0; min-height: unset; width: 1068px; } .acc-masthead-divider .td-crumb-container *{ color: #fff; } @media only screen and (max-width: 768px) { .acc-masthead-logo { display: none; } .acc-masthead-logo-mobile { display: block; } .acc-masthead-logo-card { padding: 20px; } }