.mixin-page-frontpage-section-header{margin-bottom:2rem}.mixin-page-frontpage-title{color:#4a4a4a;color:#cf2f2f;font-size:2.4rem;font-weight:700;line-height:3.6rem;margin:0;text-transform:uppercase}.mixin-page-frontpage-section-fullrow-header{border-bottom:1px solid rgba(0,0,0,.07);margin-bottom:3rem;overflow:auto}@media screen and (max-width:599px){.mixin-page-frontpage-section-fullrow-header{border-bottom:none}}.mixin-page-frontpage-section-fullrow-header-title{float:left}.mixin-page-frontpage-section-fullrow-header-content{float:right}.mixin-page-frontpage-section-fullrow-header-link{line-height:3.6rem}.mixin-page-frontpage-section-fullrow-header-link-text{color:#3c3c3c;font-size:1.8rem;font-weight:600;display:inline-block;margin-right:.25rem;letter-spacing:-.05rem;word-spacing:.1rem}.mixin-page-frontpage-section-fullrow-header-link-icon{font-size:1.6rem}#ly-MainContent{margin-top:0}#ly-HomepageRow-Media{border-top:1px solid #888;background-color:#f8f8f8}#ly-HomepageRow-Ads{border-top:1px solid #ddd}#ly-HomepageRow-Projects{border-bottom:2px solid #eee;border-top:2px solid #eee;background-color:#eee}#ly-HomepageRow-Media{border-bottom:2px solid #eee;border-top:2px solid #eee;background-color:#eee}#ly-HomepageRow-Main{padding-bottom:3rem}@media screen and (min-width:992px){#ly-HomepageRow-Main{padding-top:0rem}}#ly-HomepageRow-Ads{padding-top:2.5rem;padding-bottom:2.5rem}#ly-HomepageRow-Projects{padding-top:4rem;padding-bottom:6rem}#ly-HomepageRow-Publications{padding-top:6rem;padding-bottom:4rem}#ly-HomepageRow-Media{padding-top:6rem;padding-bottom:6rem}#ly-Footer{margin-top:0}.md-Ad-FlickrBadge_Header,.md-BlogEntries-LatestPastEvents_Header,.md-FeatureItemsBootstrap-KeyProjects_Header,.md-FeaturedVideos_Header,.md-Slider-GalleryPosts-CARECPublications_Header{margin-bottom:2rem}.md-Ad-FlickrBadge_Title,.md-BlogEntries-LatestPastEvents_Title,.md-FeatureItemsBootstrap-KeyProjects_Title,.md-FeaturedVideos_Title,.md-Slider-GalleryPosts-CARECPublications_Title{color:#4a4a4a;color:#cf2f2f;font-size:2.4rem;font-weight:700;line-height:3.6rem;margin:0;text-transform:uppercase}.md-Ad-FlickrBadge_Header,.md-FeatureItemsBootstrap-KeyProjects_Header,.md-FeaturedVideos_Header,.md-Slider-GalleryPosts-CARECPublications_Header{border-bottom:1px solid rgba(0,0,0,.07);margin-bottom:3rem;overflow:auto}@media screen and (max-width:599px){.md-Ad-FlickrBadge_Header,.md-FeatureItemsBootstrap-KeyProjects_Header,.md-FeaturedVideos_Header,.md-Slider-GalleryPosts-CARECPublications_Header{border-bottom:none}}.md-FeatureItemsBootstrap-KeyProjects_Header_Content,.md-FeaturedVideos_Header_Content,.md-Slider-GalleryPosts-CARECPublications_Header_Content{float:right}@media screen and (max-width:599px){.md-FeatureItemsBootstrap-KeyProjects_Header_Content,.md-FeaturedVideos_Header_Content,.md-Slider-GalleryPosts-CARECPublications_Header_Content{float:left;clear:left}}.md-HomepageSection_TitleLink_URL:hover>.md-HomepageSection_TitleLink_Icon,.md-HomepageSection_TitleLink_URL:hover>.md-HomepageSection_TitleLink_Text{color:#cf2f2f}.md-FeatureItemsBootstrap-KeyProjects_Title,.md-FeaturedVideos_Title,.md-Slider-GalleryPosts-CARECPublications_Title{float:left}.md-HomepageSection_TitleLink_URL{line-height:3.6rem}.md-BlogEntries-LatestPastEvents_Footer .md-HomepageSection_TitleLink_URL:first-of-type{margin-right:2.5rem}.md-HomepageSection_TitleLink_Text{color:#3c3c3c;font-size:1.8rem;font-weight:600;display:inline-block;margin-right:.25rem;letter-spacing:-.05rem;word-spacing:.1rem}.md-HomepageSection_TitleLink_Icon{font-size:1.6rem}.md-Slider-FeatureItems{margin-bottom:3rem}@media screen and (min-width:992px){.md-BlogEntries-LatestPastEvents:before{content:"";border-top:.3rem solid rgba(51,51,51,.8);display:block;margin:0 auto}.md-BlogEntries-LatestPastEvents>section{border-right:1px solid #ddd}}.md-BlogEntry_Wrapper{padding-left:0}.md-BlogEntries-LatestPastEvents_Header{margin:3rem 0 1rem}.md-BlogEntries-LatestPastEvents_Title{smargin-bottom:1rem}.md-BlogEntries-LatestPastEvents_Content>.md-BlogEntry{border:none;border-bottom:1px solid transparent;border-top:1px solid #ddd;padding-left:0;padding-right:0}.md-BlogEntries-LatestPastEvents_Content>.md-BlogEntry:hover{background-color:transparent;border-top:1px solid #ddd;border-bottom:1px solid transparent;box-shadow:none}.md-BlogEntries-LatestPastEvents_Content>.md-BlogEntry:last-of-type,.md-BlogEntries-LatestPastEvents_Content>.md-BlogEntry:last-of-type:hover{sborder-bottom:1px solid #ddd}.md-BlogEntries-LatestPastEvents_Footer_Content{text-align:right}@media screen and (min-width:992px){.md-BlogEntries-LatestPastEvents_Content,.md-BlogEntries-LatestPastEvents_Footer_Content{padding-right:2.25rem}}@media screen and (max-width:991px){.md-PageHighlights{margin-top:2.25rem!important}}@media screen and (max-width:991px){#ly-HomepageRow-Main .md-SidebarAd{margin-left:auto;margin-right:auto}}.pg-Home-AdSection_Ad{text-align:center}.pg-Home-AdSection_Ad:first-of-type{margin-bottom:1rem}.md-FeatureItemsBootstrap-KeyProjects_Header{border-bottom-color:rgba(0,0,0,.045);margin-bottom:4rem}.md-FeatureItemsBootstrap-KeyProjects_Content .md-FeatureItems_Header_Content{margin-bottom:.5rem}.md-FeatureItemsBootstrap-KeyProjects_Content .md-FeatureItems_Header_Content>a{display:inline-block;font-size:1.2rem;color:rgba(35,31,32,.7);text-transform:uppercase;font-weight:600}.md-FeatureItemsBootstrap-KeyProjects_Content .md-FeatureItems_Header_Content>a:before{display:none}.md-FeatureItemsBootstrap-KeyProjects_Content .md-FeatureItems_Header_Content>a:hover{color:#cf2f2f}.md-FeatureItemsBootstrap-KeyProjects_Content .md-FeatureItems_Header_Content>a::after{content:"\f054";font-family:FontAwesome;font-size:1rem;margin-left:5px;display:inline-block;position:absolute;top:3px;color:rgba(35,31,32,.5)}.md-FeatureItemsBootstrap-KeyProjects_Content .md-FeatureItems_Header_Content>a+a{margin-left:3rem}.md-FeatureItems-Publications .OwlCarousel_Nav{color:#000}.pg-FrontPage .md-GalleryItem-Publication_Content>.md-GalleryItem-Publication_Thumbnail{height:204.4778051px}@media screen and (min-width:992px){.md-Ad-FlickrBadge,.md-Ad-FlickrBadge_Content_Link{padding-left:3rem;padding-right:0}}.md-Ad-FlickrBadge{overflow:auto}.flickr_badge_image{display:block;float:left;box-sizing:border-box;padding:2px}@media screen and (min-width:992px){.flickr_badge_image{width:33%}}@media screen and (min-width:600px) and (max-width:991px){.flickr_badge_image{width:150px}}@media screen and (max-width:599px){.flickr_badge_image{width:100px}}.flickr_badge_image>a{display:block}.flickr_badge_image>a>img{display:block;width:100%;height:auto}.md-Ad-FlickrBadge_Content_Link>.md-HomepageSection_TitleLink_URL>.md-HomepageSection_TitleLink_Text{margin-left:2.5px;margin-top:.9rem}.flickrimg{width:100%}.md-FeaturedVideos_Content .md-FeatureItems{margin-bottom:3rem}@media screen and (max-width:991px){.md-FeatureItem_Header{margin-top:0}} /* * --------------------------------------------------------------------------- * HOMEPAGE HERO SLIDER — HEIGHT TINKERING GUIDE * --------------------------------------------------------------------------- * All vertical size for the Owl carousel band comes from ONE variable below: * --carec-hero-h * It is used on .owl-stage-outer, .owl-item, wrappers, etc. Change it here only. * * Current formula: * clamp( MIN , IDEAL , MAX ) * * MIN = 300px * Smallest height on narrow phones. Raise (e.g. 340px) if the strip feels * too short; lower only if you need more content above the fold. * * IDEAL = min(56.25vw, 72vh) * 56.25vw = height if the slide were a 16:9 rectangle as wide as the viewport. * 72vh = never let that ideal exceed 72% of viewport height. * - Taller hero: increase 72vh → 75vh or 80vh (also raises MAX interaction). * - Wider/shorter band vs width: change 56.25vw (50vw = shorter, 62.5vw = taller). * * MAX = min(80vh, 1100px) * Hard ceiling so the hero does not grow forever on huge monitors. * - Taller cap on big screens: raise 1100px → 1200px, or raise 80vh → 85vh. * - Shorter / less dominant hero: lower 80vh → 70vh and/or 1100px → 900px. * * Avoid a small fixed MAX alone (e.g. 720px): on tall screens the hero looks like a * thin strip (~half the viewport). Prefer vh or min(vh, px) as above. * * Examples (replace the whole clamp(...) with one of these if you want a simple preset): * Shorter: clamp(280px, min(50vw, 60vh), min(70vh, 800px)); * Taller: clamp(320px, min(56.25vw, 78vh), min(85vh, 1200px)); * Fixed-ish: clamp(360px, 520px, 640px); (narrow range, less responsive) * * Spacing under the slider (not the image height): see .md-Slider-FeatureItems * margin-bottom in the hero rules block below. * * Slider height / Owl chain: #ly-HomepageRow-Main_Hero only. Deploy * app/views/content/template.content.home.php so that id exists; otherwise those rules * do not apply on production. * * Title overlay (centered glass box): also keyed under * #ly-HomepageRow-Main .md-Slider-FeatureItems so it works with the current live * markup (#ly-HomepageRow-Main_Wrapper) until the template is deployed. * * After CSS edits: bump cv3_css_version in inc/carecv0302_pre_initialize_theme_settings.php * so production/cache loads the new page-home.css. * --------------------------------------------------------------------------- */ #ly-HomepageRow-Main_Hero { --carec-hero-h: clamp(300px, min(56.25vw, 72vh), min(80vh, 1100px)); padding-left: 0; padding-right: 0; max-width: none; } #ly-HomepageRow-Main_Hero .md-Slider-FeatureItems { margin-bottom: 1.5rem; } #ly-HomepageRow-Main_Hero .md-Widget_Container.tg-Ratio-FeatureItems:before, #ly-HomepageRow-Main_Hero .md-Widget_Container.tg-Ratio-FeatureItems:after { display: none; content: none; padding: 0; float: none; clear: none; } #ly-HomepageRow-Main_Hero .md-Widget_Content.md-Slider-FeatureItems_Content { overflow: hidden; } #ly-HomepageRow-Main_Hero .OwlCarousel_WrapperInner { position: relative; height: var(--carec-hero-h); max-height: var(--carec-hero-h); overflow: hidden; } #ly-HomepageRow-Main_Hero .owl-carousel.OwlCarousel { position: relative; height: var(--carec-hero-h); max-height: var(--carec-hero-h); } #ly-HomepageRow-Main_Hero .owl-stage-outer { border: none; background-color: #1a1a1a; height: var(--carec-hero-h) !important; max-height: var(--carec-hero-h) !important; } #ly-HomepageRow-Main_Hero .owl-stage { height: var(--carec-hero-h) !important; max-height: var(--carec-hero-h) !important; } #ly-HomepageRow-Main_Hero .owl-item, #ly-HomepageRow-Main_Hero .OwlCarousel_Slide { height: var(--carec-hero-h) !important; max-height: var(--carec-hero-h) !important; overflow: hidden; } /* Inline was letting intrinsic image height win; stretch to the fixed band */ #ly-HomepageRow-Main_Hero .OwlCarousel_Slide > a { display: block; height: 100%; max-height: 100%; overflow: hidden; text-decoration: none; } #ly-HomepageRow-Main_Hero .owl-carousel .owl-dots { position: absolute; left: 0; right: 0; bottom: 1.2rem; margin-top: 0; z-index: 4; } #ly-HomepageRow-Main_Hero .md-Slide-FeatureItem { position: relative; overflow: hidden; background-color: #1a1a1a; width: 100%; height: 100%; max-height: 100%; min-height: 0; box-sizing: border-box; } #ly-HomepageRow-Main_Hero .md-Slide-FeatureItem:before, #ly-HomepageRow-Main_Hero .md-Slide-FeatureItem:after { display: none; content: none; } #ly-HomepageRow-Main_Hero .md-Slide-FeatureItem_Thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border: none; max-height: none; } #ly-HomepageRow-Main_Hero .md-Slide-FeatureItem .fa-play, #ly-HomepageRow-Main .md-Slider-FeatureItems .md-Slide-FeatureItem .fa-play { z-index: 4; } /* * Hero title: anchored to bottom of slide, horizontally centered; box shrink-wraps to text * (max 80%). Extra padding-bottom keeps the card above owl dots. */ #ly-HomepageRow-Main_Hero .md-Slide-FeatureItem_Text-Bottom, #ly-HomepageRow-Main .md-Slider-FeatureItems .md-Slide-FeatureItem_Text-Bottom { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100% !important; min-height: 0; display: flex; align-items: flex-end; justify-content: center; padding: 2.5rem 1.75rem 3.75rem; box-sizing: border-box; z-index: 2; overflow-y: auto; background: radial-gradient( ellipse 110% 75% at 50% 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0) 72% ); } #ly-HomepageRow-Main_Hero .md-Slide-FeatureItem_Text-Bottom .md-Slide-FeatureItem_Text-Bottom_Wrapper, #ly-HomepageRow-Main .md-Slider-FeatureItems .md-Slide-FeatureItem_Text-Bottom .md-Slide-FeatureItem_Text-Bottom_Wrapper { position: relative; width: fit-content; width: -webkit-fit-content; max-width: 80%; min-width: 0; min-height: 0 !important; height: auto; margin: 0; padding: 1.85rem 2.1rem 2.1rem; box-sizing: border-box; z-index: 5; text-align: center; background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(255, 255, 255, 0.18); border-bottom: 4px solid #ef9700; border-radius: 0.5rem; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } #ly-HomepageRow-Main_Hero .md-Slide-FeatureItem_Text-Bottom .md-Slide-FeatureItem_Text-Bottom_Wrapper header, #ly-HomepageRow-Main .md-Slider-FeatureItems .md-Slide-FeatureItem_Text-Bottom .md-Slide-FeatureItem_Text-Bottom_Wrapper header { margin: 0; padding: 0; } #ly-HomepageRow-Main_Hero .md-Slide-FeatureItem_Title-Bottom, #ly-HomepageRow-Main .md-Slider-FeatureItems .md-Slide-FeatureItem_Title-Bottom { color: #fff !important; font-size: clamp(1.75rem, 2.8vw + 1.1rem, 4.25rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.03em; margin: 0; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.8); overflow-wrap: break-word; word-wrap: break-word; } @media screen and (max-width: 599px) { #ly-HomepageRow-Main_Hero .md-Slide-FeatureItem_Text-Bottom, #ly-HomepageRow-Main .md-Slider-FeatureItems .md-Slide-FeatureItem_Text-Bottom { padding: 1.5rem 1rem 3.25rem; align-items: flex-end; } #ly-HomepageRow-Main_Hero .md-Slide-FeatureItem_Text-Bottom .md-Slide-FeatureItem_Text-Bottom_Wrapper, #ly-HomepageRow-Main .md-Slider-FeatureItems .md-Slide-FeatureItem_Text-Bottom .md-Slide-FeatureItem_Text-Bottom_Wrapper { width: fit-content; width: -webkit-fit-content; max-width: 80%; padding: 1.15rem 1.15rem 1.25rem; } /* Mobile-only scale: ~17–21px, not the same vw curve as tablet/desktop */ #ly-HomepageRow-Main_Hero .md-Slide-FeatureItem_Title-Bottom, #ly-HomepageRow-Main .md-Slider-FeatureItems .md-Slide-FeatureItem_Title-Bottom { font-size: clamp(1.0625rem, 2.75vw + 0.8125rem, 1.3125rem); line-height: 1.32; letter-spacing: -0.02em; } } /*# sourceMappingURL=page-home.css.map */