/* (C) 2019 Endis Ltd. No permission is given to use this code, except on an Endis/ChurchInsight website. ChurchInsight over-ride CSS file for the Creation template. WARNING - do not edit this file unless you know exactly what you are doing. You might consider making a BACKUP COPY before you change anything. If you need advice, contact ChurchInsight Support. */ /* Size of LOGO image */ header .logo-icon img { height: 40px !important; /* <<< mobile logo height */ } @media(min-width:467px){header .logo-icon img { height: 40px !important; /* <<< tablet logo height */ }} @media(min-width:992px){ header .logo-icon img { height: 104px !important; /* <<< desktop logo height */ } header.HeaderSmall section.slice_Header_L .logo-icon img { height:65px !important; /* <<< desktop shrunken logo height */ } } /* Gap between logo and top/bottom of screen */ header div.logo-container { margin-top: 5px !important; /* <<< logo gap from top for mobile/tablet */ } @media(min-width:992px){ header div.logo-container { margin-top: 10px !important; /* <<< logo gap from top for desktop */ } header.HeaderSmall section.slice_Header_L div.logo-container { margin-top:5px !important; /* <<< logo gap from top for shrunken desktop */ } } /* To make more space in the header when menu entries start over-writing the logo, adjust this */ header section.slice_Header_L div.nav-menu {margin-top:17px;} @media (max-width:900px) { header section.slice_Header_L div.nav-menu {margin-top:55px;} } @media (max-width:900px) { header.HeaderSmall section.slice_Header_L div.nav-menu {margin-top:20px;} } header section.slice_Header_L div.nav-menu ul.root_menu > li:last-child > a {padding-right:5px;} .slice_Header_L .nav-menu ul.root_menu > li > a {font-size:20px;font-weight:400;} @media (min-width:1301px){ header ul.root_menu li.MenuSearchOpen a {height:63px !important;} header.HeaderSmall ul.root_menu li.MenuSearchOpen a {height:49px !important;} } @media (max-width:1300px) and (min-width:992px) { header div.logo-container {margin-top:5px !important;} .slice_Header_L .nav-menu ul.root_menu > li > a { font-size:16px;padding-left:12px;padding-right:12px; } header ul.root_menu li.MenuSearchOpen a {height:55px !important;} header.HeaderSmall ul.root_menu li.MenuSearchOpen a {height:43px !important;} } /* Control header indentation on desktop screens */ section.slice_Header_L div.top-link-wrapper { transition:margin-right 300ms linear; } section.slice_Header_L div.logo-container {transition:margin-left 300ms linear;} section.slice_Header_L div.nav-menu {transition:padding-right 300ms linear;} @media (min-width: 1400px) { section.slice_Header_L div.top-link-wrapper { margin-right: 50px; } section.slice_Header_L div.logo-container {margin-left: 50px;} section.slice_Header_L div.nav-menu {padding-right: 50px;} } @media (max-width:1500px) { header.HeaderSmall section.slice_Header_L div.logo-container {margin-left:10px;} header.HeaderSmall section.slice_Header_L div.top-link-wrapper {margin-right:10px;} header.HeaderSmall section.slice_Header_L div.nav-menu {padding-right:10px;} } header .logo-icon img { width: auto !important; transition:width 300ms linear, height 300ms linear; } header div.logo-container {margin-bottom: 0 !important;} section.slice_Header_L div.nav-menu ul.root_menu ul { box-shadow: 0px 10px 10px 2px rgba(0,0,0,.12); } /* 3 Big Button colours */ .slice_content_page .sidebar_buttons a.button1 { background-color: #8EBB95 !important; /* <<< Green/left/top big button */ } .slice_content_page .sidebar_buttons a.button2 { background-color: #482325 !important; /* <<< Red/middle big button */ } .slice_content_page .sidebar_buttons a.button3 { background-color: #4CA524 !important; /* <<< Blue/right/bottom big button */ } /* slide show button and round pager button colour */ section.slice_SlidesFullWidth div.bx-pager a, section.slice_content_page div.main-content div.bx-pager a { background-color: #f5f5f5 !important; /* <<< slide show button background color */ border-color: #f5f5f5 !important; /* <<< slide show button border color */ } section.slice_SlidesFullWidth div.bx-pager a:hover, section.slice_SlidesFullWidth div.bx-pager a.active, section.slice_content_page div.main-content div.bx-pager a:hover, section.slice_content_page div.main-content div.bx-pager a.active { background-color: #4CA524 !important; /* <<< slide show button background color */ border-color: #4CA524 !important; /* <<< slide show button border color */ } .slice_SlidesFullWidth a.slideButton, body.OnSmallAppleDevice section.slice_SlidesFullWidth a.slideButton:hover { background-color: #4CA524 !important; /* <<< slide show button background color */ border-color: #4CA524 !important; /* <<< slide show button border color */ color: white !important; } .slice_SlidesFullWidth a.slideButton:hover { background-color: #5A2123 !important; /* <<< slide show button background color */ border-color: #5A2123 !important; /* <<< slide show button border color */ } section.slice_WhatsOnSlidesEB_L div.bx-pager a, section.slice_WhatsOnSlidesEB_L div.bx-pager a { background-color: #4CA524 !important; /* <<< slide show button background color */ border-color: #4CA524 !important; /* <<< slide show button border color */ } section.slice_WhatsOnSlidesEB_L div.bx-pager a:hover, section.slice_WhatsOnSlidesEB_L div.bx-pager a.active { background-color: #58B999 !important; /* <<< slide show button background color */ border-color: #58B999 !important; /* <<< slide show button border color */ } /* Time and Location logos */ section.slice_ServiceText_L {background-color:white;margin:10px 0 50px;} section.slice_ServiceText_L div.blocks { background-color:#f1f1f1;border:none;border-radius:10px; } section.slice_ServiceText_L div.block2-1, section.slice_ServiceText_L div.block2-2 {color:inherit;} .slice_ServiceText_L .block2-1::after, .slice_ServiceText_L .block2-2::after, .slice_ServiceTextEB_L .block2-1::after, .slice_ServiceTextEB_L .block2-2::after { color: #4CA524 !important; /* <<< Clock and Location icon colour */ } /* Search box */ header div.search-overlay { background-color: #4CA524 !important; /* <<< Search box back-ground colour */ } /* Code to make slide-shows look better on mobile screens */ section.slice_SlidesFullWidth, section.slice_WhatsOnSlidesEB_L {overflow-x:hidden;} /* hide anything that pokes outside */ @media (max-width:767px) { section.slice_SlidesFullWidth div.bannerSlides { width: 200%; /* double the width, which doubles the height, and then translate so we see the middle 50% */ transform: translateX(-25%); overflow-x:hidden; /* hide anything that pokes outside */ } section.slice_WhatsOnSlidesEB_L div.bannerSlides { width: 150%; /* double the width, which doubles the height, and then translate so we see the middle 50% */ transform: translateX(-16.6667%); overflow-x:hidden; /* hide anything that pokes outside */ } /* Adjust the captions back again, so they look normal */ section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper ul.gallery_ul li.gallery_li div.caption { /* div.bx-wrapper has position:relative set, so this is ok */ left: 25%; right: 25%; width: 50%; overflow-x:hidden; /* hide anything that pokes outside */ } section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper ul.gallery_ul li.gallery_li div.caption { /* div.bx-wrapper has position:relative set, so this is ok */ left: 16.6667%; right: 16.6667%; width: 66.6666%; overflow-x:hidden; /* hide anything that pokes outside */ } section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper {margin-bottom:50px;} section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper div.bx-pager a {width:15px;height:15px;} section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper a.bx-prev {left:25%;} section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper a.bx-next {right:25%;} section.slice_WhatsOn3Buttons_L {padding:30px 10px 0;} section.slice_WhatsOn3Buttons_L div.bannerSlides {margin-left:0; margin-right:0;} section.slice_WhatsOnSlidesEB_L {padding-bottom:0;} section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper a.bx-prev {left:16.6667%;} section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper a.bx-next {right:16.6667%;} } section.slice_SlidesFullWidth div.slideTitle {margin:0 20px;} /* Fix various issues */ div.endis-jquery-ui div#divOverlay {font-size:17px;line-height:1.3;} body.ArticleEditor img.module_icon {width:auto !important;} body.OnSmallAppleDevice input {-webkit-appearance: none;} section.slice_Footer_L div.footerbar span:last-child:not([id]), section.slice_Footer_D div.footerbar span:last-child:not([id]) { display: block; padding-top: 25px; } /* prevent text-overwriting when desktop menus wrap around */ section.slice_Header_D ul.root_menu ul, section.slice_Header_L ul.root_menu ul, section.slice_Header_T ul.root_menu ul {z-index:4;} section.slice_Footer_D div.footerbar a#footer_cookies::after, section.slice_Footer_L div.footerbar a#footer_cookies::after { content: "|"; padding: 0 5px; } @media (min-width: 768px) { section.slice_Footer_D div.footerbar a#footer_cookies::after, section.slice_Footer_L div.footerbar a#footer_cookies::after { padding: 0 10px; } } .HideElement {display:none !important;} /* Slide-show bottom buttons */ section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager {bottom:30px;} section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager a.bx-pager-link { width:18px;height:18px;border-radius:9px;border-width:2px;margin:0 6px; } @media (max-width:1200px) { section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager {bottom:10px;} section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager a.bx-pager-link {width:14px;height:14px;border-radius:7px;} } /* Fix system page ul lists */ section.slice_system_page div.system_content ul { list-style-type: disc; padding-left:40px; } section.slice_system_page._media_allmedia_aspx ul.media_recording_links, section.slice_system_page._media_allmedia_aspx ul.media_recording_details { list-style-type: none; padding-left:0; } section.slice_system_page._media_allmedia_aspx a.system_toggle_advanced, section.slice_system_page._publisher_search_aspx a.system_toggle_advanced { margin:0 0 10px;padding:5px 10px; background-color:#58B999; color:white; font-size:18px; line-height:1; border-radius:6px; } section.slice_system_page._media_allmedia_aspx a.system_toggle_advanced:hover, section.slice_system_page._publisher_search_aspx a.system_toggle_advanced:hover { background-color:#ED6EA7; } section.slice_system_page._media_allmedia_aspx div#media_sort, section.slice_system_page._media_allmedia_aspx ul#media_buttons { margin:10px 0 5px; padding-left:0; } section.slice_system_page._media_allmedia_aspx div#media_sort {margin-right:20px;} section.slice_system_page._media_allmedia_aspx div#media_sort select {margin:0;} section.slice_system_page._media_allmedia_aspx ul#media_buttons a {border:none;} section.slice_system_page._media_allmedia_aspx div.media_option_right a {margin:0;} /* Fix the new calendar page pop-up */ div.dialog-content.calendar-event-content > h4, div.dialog-content.calendar-event-content > h4 a.event-location-link { display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center; } /* Extra icon using a square background image */ footer i.icomoon-icon-XXXXXX.ImageSocialMediaIcon::after { /* Replace url below with actual url of square icon image */ background-image: url(/Images/Content/1495/Templates/46170/images/CommissionLogo.png); } section.slice_CommunityText_L > div.container > div.ArticleBody {float:none;margin:0;width:100%;} section.slice_CommunityText_L div.WelcomeWrapper { display:flex;flex-flow:row nowrap;justify-content:center;align-items:flex-start; text-align:left; max-width:1020px; margin:0 auto; } section.slice_CommunityText_L div.WelcomeWrapper h1 { margin:0 0 20px;font-size:40px;line-height:1.1;font-weight:700; } section.slice_CommunityText_L div.WelcomeWrapper img { display:block;margin-right:40px; border-radius:150px;border:6px solid #d7d7d7; background-color:#d7d7d7; } section.slice_CommunityText_L div.WelcomeWrapper a.button, section.slice_CommunityText_L div.WelcomeWrapper a.button2 { font-weight:400;line-height:1.3; font-size:15px; display:inline-block;margin:0; } @media (max-width:1100px) { section.slice_CommunityText_L div.WelcomeWrapper h1 {font-size:26px;} } @media (max-width:767px) { section.slice_CommunityText_L div.WelcomeWrapper { flex-flow:column nowrap;justify-content:flex-start;align-items:center; text-align:center; } section.slice_CommunityText_L div.WelcomeWrapper img {margin:0 0 20px 0;} section.slice_CommunityText_L div.WelcomeWrapper a.button, section.slice_CommunityText_L div.WelcomeWrapper a.button2 { font-size:15px;padding-left:15px;padding-right:15px; } } @media (max-width:467px) { section.slice_CommunityText_L div.WelcomeWrapper a.button, section.slice_CommunityText_L div.WelcomeWrapper a.button2 { font-size:13px;padding-left:10px;padding-right:10px; } } section.EventsAndTalks {background-color:white; padding:60px 10px 50px;} section.EventsAndTalks h1 { color:#4CA524; font-size:30px; line-height:1; margin:0 0 25px; font-weight:600; } section.EventsAndTalks span {display:block;} section.EventsAndTalks a.button { font-weight:600; display:inline-block; margin:20px 0 0; color:#4CA524;border-color: #d7d7d7; background-color: transparent;border-radius:4px; } section.EventsAndTalks a.button:hover { color:#4CA524;border-color: #58B999; opacity: 1; } section.EventsAndTalks div.container { /* make sure the vertical stretch propagates into here */ display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:stretch; } section.EventsAndTalks div.EventFlex {width:65%;padding:0 30px 0 0;} section.EventsAndTalks div.TalkFlex {width:35%;} section.EventsAndTalks div.EventsList > div { line-height:1.3; float:none !important;background-color:#f1f1f1;margin:0 0 3px; padding:15px; } section.EventsAndTalks div.TalksList span.MediaList > div { line-height:1.5; background-color:#f1f1f1;margin:0 0 3px;padding:16px 10px 16px 60px; } section.EventsAndTalks div.mediaListTitle a { font-size:20px;font-weight:600;color:#4CA524;position:relative; } section.EventsAndTalks div.mediaListTitle a:hover {color:#58B999;} section.EventsAndTalks div.mediaListTitle a::before { content:' '; display:block;position:absolute;top:1px;left:-40px; width:26px; height:25px; background-image:url(/Images/Content/2823/Templates/56063/images/IconAudio25h.png); background-repeat:no-repeat; } section.EventsAndTalks div.mediaListSpeaker {font-size:18px;font-weight:600;} section.EventsAndTalks div.MediaListDate {font-size:16px;} section.EventsAndTalks div.EventsList a, section.EventsAndTalks div.EventsList img {display:block;} section.EventsAndTalks div.EventsList img {width:250px;} section.EventsAndTalks div.EventsList img {padding:0 30px 0 0;} section.EventsAndTalks div.eventListTitle a { font-size:24px;font-weight:600;color:#4CA524; } section.EventsAndTalks div.eventListTitle a:hover {color:#58B999;} section.EventsAndTalks div.eventListDate { display:inline-block; border-radius:4px; font-size:17px; line-height:1; background-color:#58B999; color:white; padding:6px 12px 5px; font-weight:600; margin:5px 0 5px; } section.EventsAndTalks div.eventListLocation a { padding:6px 0 0 25px;position:relative;color:#000000; } section.EventsAndTalks div.eventListLocation a::before { content:' '; display:block;position:absolute;top:5px;left:0; width:15px; height:20px; background-image:url(/Images/Content/2823/Templates/56063/images/IconMapPin20h.png); background-repeat:no-repeat; } section.EventsAndTalks div.eventListLocation a:hover {color:#58B999;} section.EventsAndTalks div.eventListLocation a.InActive {cursor:default;} section.EventsAndTalks div.eventListLocation a.InActive:hover {color:#000000;} @media (max-width:991px) { section.EventsAndTalks {padding:30px 10px 20px;} section.EventsAndTalks h1 {margin:0 0 10px; text-align:center;} section.EventsAndTalks a.button {margin:10px 0 0;} section.EventsAndTalks div.container { flex-flow:column nowrap;align-items:center; } section.EventsAndTalks div.EventFlex {width:100%;padding:0;margin:0 auto;max-width:600px;} section.EventsAndTalks div.TalkFlex {width:100%;margin:40px auto;max-width:600px;} } /* on mobiles put image at the top */ @media (max-width:600px) { section.EventsAndTalks div.EventsList tr { display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:flex-start; } section.EventsAndTalks div.EventsList img {padding:0 0 15px;width:100%;} } /* on desktop make sure the heights of the 2 columns match up perfectly */ @media (min-width:992px) { section.EventsAndTalks div.EventFlex, section.EventsAndTalks div.TalkFlex { /* ensure the stretching propagates up */ display:flex;flex-flow:column nowrap;justify-content:stretch;align-items:stretch; } section.EventsAndTalks div.EventFlex div.EventsList, section.EventsAndTalks div.EventFlex div.TalksList { flex:1 1 auto; /* controls the stretching, vertical space goes into the 'space-between' */ display:flex;flex-flow:column nowrap;justify-content:space-between;align-items:stretch; } /* stop the buttons from changing shape */ section.EventsAndTalks a.button {align-self:flex-start;} } /* Sort out article text */ section.slice_content_page div.main-content div.ArticleBody span { font-size:inherit !important; font-family:inherit !important; } section.slice_content_page.WideContent div.main-content { width:100%; float:none; margin-left:0; margin-right:0; padding-left:10px; padding-right:10px; background-color:#f1f1f1; } section.slice_content_page.WideContent div.CenterButton {text-align:center;} section.slice_content_page.WideContent div.CenterButton a.button {margin:0;} section.slice_content_page.WideContent div.CenterButton a.button:hover {text-decoration:none;} /* UML_ML_1: Universal Mini-Layout Media-List 1 Code is for a 3 > 2 > 1 column layout. The media-list module outputs a "span.MediaList" wrapper, around all the card div's. */ section.slice_content_page div.UML_ML_1 span.MediaList { display: flex; flex-flow: row wrap; justify-content: center; align-items:stretch; } section.slice_content_page div.UML_ML_1 span.MediaList > div { background-color: white; width: 100%; margin:15px 0;} /* 1 column */ @media (min-width: 467px) { /* 2 columns */ section.slice_content_page div.UML_ML_1 span.MediaList > div { width: 49%; margin:15px 0; } section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(2n+1) {margin-right:1%;} /* Extra 1% on each */ section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(2n) {margin-left:1%;} } @media (min-width: 992px) { /* 3 columns */ section.slice_content_page div.UML_ML_1 span.MediaList > div { width:32%; margin:15px 0;} section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(3n+1) {margin-left:0;margin-right:0;} section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(3n+2) {margin-left:2%;margin-right:2%;} /* extra 4% on the middle one only */ section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(3n) {margin-left:0;margin-right:0;} } section.slice_content_page div.UML_ML_1 div.MediaListImage img { display: block; width: 100%; } section.slice_content_page div.UML_ML_1 div.MediaListImage a { display: block; margin: 0; } section.slice_content_page div.UML_ML_1 div.MediaListImage a:hover, section.slice_content_page div.UML_ML_1 div.MediaListTitle a:hover { opacity: 0.6;text-decoration:none; } section.slice_content_page div.UML_ML_1 div.MediaListTitle { padding: 10px 10px;} section.slice_content_page div.UML_ML_1 div.MediaListTitle a { font-weight: 700; font-size: larger; text-transform: capitalize;text-align: center;line-height: 1.2; display:block;} section.slice_content_page div.UML_ML_1 div.MediaListSpeaker, section.slice_content_page div.UML_ML_1 div.MediaListDate, section.slice_content_page div.UML_ML_1 div.MediaListBible, section.slice_content_page div.UML_ML_1 div.MediaListLength { padding: 0 10px 10px; font-weight: 400; text-align: center;line-height: 1.3;} section.slice_content_page div.UML_ML_1 div.MediaListLink {flex:1 1 auto;font-size:0;line-height:1;color:transparent;} /* takes up the height slack */ /* Banner Image code */ section.slice_BannerImage { position:relative; background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 200px 10px; } @media(max-width:992px){ section.slice_BannerImage {padding:100px 10px;} } section.slice_BannerImage h1 { position:relative; z-index:0; line-height:1.2; margin:0; text-align:center; color: white; font-size: 60px; text-transform:uppercase; } @media(max-width:992px){ section.slice_BannerImage h1 {font-size: 40px;} } @media(max-width:467px){ section.slice_BannerImage h1 {font-size: 30px;} } section.slice_BannerImage div.BannerImgCustomFields {display:none;} section.slice_BannerImage div.container {text-align:center;} section.slice_BannerImage div.OverlayTint { position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%; background-color:rgba(0,0,0,0.4); } section.slice_content_page.AddTopBorder {border-top:1px solid #dddddd;} /* Media Landing page search box */ section.slice_MediaSearch div.search-overlay {padding:25px 10px 25px 0; background-color: white; } section.slice_MediaSearch div.search-overlay input.button, section.slice_MediaSearch div.search-overlay label { display: none; } section.slice_MediaSearch div.search-overlay div.search-form { position: relative; max-width:600px;} section.slice_MediaSearch div.search-overlay div.search-form span.top-link { position: absolute; top: 0; right:0 ; background-color: #482325; display: inline-block; line-height: 1; padding: 13px; font-size: 15px; transition: color 500ms linear, background-color 500ms linear; cursor:pointer;} section.slice_MediaSearch div.search-overlay div.search-form span.top-link:hover { background-color: #038e63; } section.slice_MediaSearch div.search-overlay div.search-form span.top-link img { display: inline-block; padding: 3px 3px 0; } section.slice_MediaSearch div.search-overlay .search_div { margin: 0 50px 0 0; } section.slice_MediaSearch div.search-overlay .search_div input.text { height: 47px; margin-bottom: 0px; border: none; background-color: #f1f1f1; font-size: 15px; line-height: 1; width: 100%; color: #414141; outline: none; margin-left: 10px; padding-left: 20px; padding-right: 5px; } @media (max-width: 400px) { section.slice_MediaSearch div.search-overlay div.search-form div.search_div input.text { font-size: 16px; letter-spacing: -0.5px; } } @media(max-width:467px){ section.slice_content_page div.main-content {padding-left:10px;padding-right:10px;} } div.slice_Cookies { background-color:#4CA524; color:white; padding:10px; text-align:center; float:none;clear:both; } div.slice_Cookies img { margin:0 0 0 10px; float:right !important;} div.slice_Cookies a {color:white !important; text-decoration:underline;} @media (max-width:500px) { div.slice_Cookies {font-size:13px; line-height:1.2;padding:5px 10px;} } footer div.FooterSafeGuarding { text-align:center; width:100%; margin:0 auto 20px; max-width:870px; line-height:1.4; padding:10px 10px 0 10px; } footer div.FooterSafeGuarding h1 {font-size:22px; line-height:1; margin:0 0 10px; color:#4CA524;} footer div.FooterSafeGuarding.BottomBorder {border-bottom:1px solid #d7d7d7;} /* Footer text links (the Safeguarding / Accessibility "here" links) sit on the dark footer band. They inherit the global a:hover {color:#482325} (plum), which is almost the same value as the #353535 footer background, so on hover the link vanishes. On a dark background the hover should brighten, not darken: go to white and keep the underline for affordance. Scoped to FooterSafeGuarding so the social icons, email/phone and footer bar (own hovers) are untouched. */ footer div.FooterSafeGuarding div.ArticleBody a:hover { color: #ffffff; } /* Supporter logos */ footer div.LogoWrapper { background-color:transparent; /* partner logos are white line-art for the dark footer; the old #F1F1F1 band made them near-invisible */ margin:-20px 1.28866% 20px; } footer div.LogoWrapper ul { list-style-type:none; padding:0;margin:0; display:flex; flex-flow: row wrap; justify-content:center; align-items:center; } footer div.LogoWrapper img {margin:30px 40px 40px 40px;display:block;} @media (max-width:991px) { footer div.LogoWrapper img {margin:20px 30px 20px 30px;display:block;} } /* Code for the Seeker Boxes */ section.SeekerBox { position:fixed;right:20px;bottom:20px;width:275px; border-radius:10px; background-color:white; padding:15px; box-shadow: 0px 0px 20px -5px rgba(0,0,0,.12); line-height:1.2; } section.SeekerBox div.FullSeekerArticle {display:none;} section.SeekerBox div.SmallSeekerArticle a.HeadLink { display:block; background-color:transparent; font-size:0; padding:0; } section.SeekerBox img.Photo { position:absolute; right:10px; top:-60px; width:70px;height:70px;border-radius:50px;border:2px solid #a3b4ba; background-color:#a3b4ba; display:block; } section.SeekerBox img.Close { width:22px;position:absolute; left:21px; bottom:21px; cursor:pointer; } section.SeekerBox.Shrink img.Close { left:10px; bottom:10px; } section.SeekerBox.BigBox img.Close { width:auto; left:initial; bottom:initial; right:5px; top:5px; } section.SeekerBox.BigBox img.Close.Outer {display:none;} section.SeekerBox b, section.SeekerBox strong {font-weight:700;} section.SeekerBox div.SmallSeekerArticle a { display:inline-block;padding:8px 10px 5px 40px;background-color:#4CA524;color:white; border-radius:7px; } section.SeekerBox div.SmallSeekerArticle a:hover {background-color:#5A2123;} body.OnSmallAppleDevice section.SeekerBox div.SmallSeekerArticle a { background-color:#4CA524 !important; } section.SeekerBox div.VerboseText a {margin-top:10px;} section.SeekerBox.Shrink {width:195px;padding:3px;width:auto;right:10px;bottom:10px;} section.SeekerBox.Shrink div.VerboseText, section.SeekerBox div.NonVerboseText {display:none;} section.SeekerBox.Shrink div.NonVerboseText {display:block;} section.SeekerBox.BigBox { left:0;right:0;bottom:0;top:0;width:100%;height:100vh;border-radius:0;padding:0; background-color:rgba(0,0,0,0.6); box-shadow:none; z-index:110; display:flex;flex-flow:row nowrap;justify-content:center;align-items:center; } @media (max-width:900px) { section.SeekerBox.BigBox { align-items:flex-end; } } section.SeekerBox.BigBox div.SmallSeekerArticle {display:none;} section.SeekerBox.BigBox div.FullSeekerArticle { display:block;position:relative;max-width:840px; background-color:white; box-shadow: 0px 0px 20px 5px rgba(0,0,0,.12); } section.SeekerBox.BigBox div.FullSeekerArticle > h2 { background-color:#4CA524;color:white; padding:10px 10px 10px 20px; margin:0; box-shadow: 0 2px 5px 0 rgba(0,0,0,.12), 0 2px 10px 0 rgba(0,0,0,.12); } section.SeekerBox.BigBox div.FullSeekerArticle div.ArticleBody { overflow-y:scroll;max-height:70vh; padding:20px; } @media (max-width:767px) { section.SeekerBox.BigBox div.FullSeekerArticle > h2 {padding:10px 5px 10px 20px;} section.SeekerBox.BigBox div.FullSeekerArticle div.ArticleBody {max-height:80vh;} } /* On a seeker box page, the reCAPTCHA widget has to move */ div.grecaptcha-badge { width:237px !important; height:58px !important; left:-75px; right:initial !important; bottom:0 !important; } section.slice_content_page div.main-content div.grecaptcha-badge, section.SeekerBox div.grecaptcha-badge, section.slice_system_page div.grecaptcha-badge { position:static !important; box-shadow:none !important; border:1px solid #bbbbbb; margin-top:10px; width:256px !important; height:60px !important; } section.slice_system_page div.grecaptcha-badge {margin:10px auto 0;} footer {background-color:#f1f1f1;} @media (max-width:1600px) { footer.WidgetShowing {padding-bottom:30px;} } @media (max-width:1400px) { footer.WidgetShowing {padding-bottom:90px;} } footer div.footer-column-3 div.EmailWrapper { display:inline-block;text-align:right; padding-left:10px; } @media (max-width:767px) { footer div.footer-column-1 {margin-top:10px;} footer div.footer-column-3 div.EmailWrapper {text-align:center; padding-left:0;} } section.slice_content_page aside nav div.group_nav_selected {font-weight:700;} section.slice_content_page aside nav div.group_nav_child {font-weight:400;} div.endis-jquery-ui-dialog div.media-player-audio h3 {margin:5px 0;} div.endis-jquery-ui-dialog div.media-player-audio h4 {margin:5px 0;} /* Fixed Header stuff */ header.HeaderSmall { position:fixed; left:0; right:0; top:0; width:100%; z-index:100; } header.HeaderSmall section.slice_Header_L { border-bottom:1px solid #bbbbbb; } @media (min-width:992px) { header section.slice_Header_L.SystemPage { border-bottom:1px solid #bbbbbb; } } header.HeaderSmall.HasCookieBar section.slice_Header_L { border-bottom:none; } header.HeaderSmall section.slice_Header_L div.logo-container .logo-name a { font-weight:700; font-size:24px; } header section.slice_Header_L div.top-link-wrapper div.search-form, header section.slice_Header_L div.top-link-wrapper div.search_div { font-size:0;line-height:0;display:inline-block; } header section.slice_Header_L div.top-link-wrapper div.search-form {display:none;} header div.top-link-wrapper div.search-form input[type=text] { transition:padding-top 300ms linear, padding-bottom 300ms linear, height 300ms linear; line-height:1;height:44px; } header.HeaderSmall div.top-link-wrapper {position:relative;top:-2px;} header.HeaderSmall div.top-link-wrapper a.top-link { padding-top:5px;padding-bottom:5px; } header.HeaderSmall section.slice_Header_L div.top-link-wrapper div.search-form input[type=text] { padding-top:5px;padding-bottom:4px;height:24px; } header.HeaderSmall section.slice_Header_L div.top-link-wrapper div.search-form i {top:0;} header.HeaderSmall section.slice_Header_L div.nav-menu {margin-top:2px;} header.HeaderSmall section.slice_Header_L div.nav-menu ul.root_menu > li > a { padding-top:10px;padding-bottom:10px; } header div.top-link-wrapper i.journey-icon-search::before {top:1px;} header div.top-link-wrapper i.InFocus {cursor:pointer;} header div.MobileMenuMask { display:none; background-color:rgba(0,0,0,0.6); position:fixed;top:0;left:0;width:100%;height:100vh;z-index:58; } header div.search-overlay.On + div.MobileMenuMask {display:block;z-index:70;} header section.slice_Header_L.SlickNavFullWidth { width:100%;position:absolute; } @media (max-width:991px) { header section.slice_Header_L div.logo-container { position:absolute; top:0; left:0; max-width:calc(100% - 100px); z-index:2; margin-right:0; } } header section.slice_Header_L div.logo-container .logo-name a {line-height:1;} header li.MenuSearchOpen i::before {top:2px;right:7px;} header ul.slicknav_nav li.MenuSearchOpen {display:none !important;} header div.SearchText {color:white;padding:0 10px 10px;} header div.search-overlay h1 {color:white;padding-left:10px;} header div.SearchWrapper {position:relative;padding-right:10px;} header div.search-overlay .search-close {top:3px; right:10px; font-size:30px;} @media (min-width:992px) { header div.search-overlay { padding:25px 10%; } } @media (min-width:360px) { header div.SearchText {font-size:16px;} } section.slice_content_page div.main-content h1 {margin:0;} /* Global Fix for slide-show captions */ section.slice_SlidesFullWidth div.slideTitle, section.slice_SlidesFullWidth div.slideText, section.slice_WhatsOnSlidesEB_L div.slideTitle, section.slice_WhatsOnSlidesEB_L div.slideText { max-width:90%; /* some templates will set this to eg. 1170px */ text-shadow:0 0 2px black; } section.slice_SlidesFullWidth a.bx-prev::after, section.slice_SlidesFullWidth a.bx-next::after, section.slice_WhatsOnSlidesEB_L a.bx-prev::after, section.slice_WhatsOnSlidesEB_L a.bx-next::after, section.slice_image_blocks_3 div.image_block_title_wrapper { text-shadow:0 0 2px black; } section.slice_image_blocks_3 a:hover div.image_block_title_wrapper {text-shadow:none;} /* Caption overlay for the 4-up "Life at our Church" cards (slice_image_blocks_4). Text is injected by a small self-contained snippet (Head Contents), because the base caption JS is wired to the older _3 homepage layout this site no longer uses. Styling kept here so it does not depend on base rules that differ local-vs-live. */ section.slice_image_blocks_4 .image_blocks .gallery_ul .gallery_li a {position:relative; display:block; overflow:hidden;} section.slice_image_blocks_4 .image_block_title_wrapper { position:absolute; inset:0; margin:auto; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; padding:20px; text-align:center; color:#fff; background:rgba(0,0,0,0.28); /* soft scrim so white text stays legible on light photos */ text-shadow:0 1px 4px rgba(0,0,0,0.7); } section.slice_image_blocks_4 .image_block_title {font-size:36px; line-height:1.1; font-weight:600; margin:0;} section.slice_image_blocks_4 .image_block_text {font-size:16px; line-height:1.3; margin-top:8px;} section.slice_image_blocks_4 .image_block_textB { margin-top:16px; padding:9px 15px; font-size:15px; text-transform:uppercase; border:1px solid rgba(255,255,255,0.6); border-radius:4px; } @media (max-width:767px) { section.slice_image_blocks_4 .image_block_title {font-size:28px;} } /* Fix media page display. Needs JS fixes applied. */ section.slice_system_page._media_allmedia_aspx input#btnSearchTemplate { margin:0 0 10px; height:auto; } section.slice_system_page._media_allmedia_aspx div#media_controls, section.slice_system_page._publisher_search_aspx div#media_controls { padding-top:10px; padding-right:40px; position:relative; } section.slice_system_page._media_allmedia_aspx div#media_controls img, section.slice_system_page._publisher_search_aspx div#media_controls img { position:absolute; top:5px; right:5px; cursor:pointer; width:25px; height:25px; background-color:#aaaaaa; border:1px solid #aaaaaa; border-radius:14px; flex:none; flex-basis:0; } section.slice_system_page._media_allmedia_aspx div.media_option_right a {margin-bottom:10px;} section.slice_system_page._media_allmedia_aspx div#media_controls div.Line { width:100%; flex-basis: 100%; border-top:1px solid #bbbbbb; } section.slice_system_page._media_allmedia_aspx div#media_controls div.LineB { width:100%; flex-basis: 100%; } section.slice_system_page._media_allmedia_aspx div#media_controls div.LineB + div {margin-left:0;} section.slice_system_page._media_allmedia_aspx ul#media_buttons {padding-top:4px;} @media(min-width:1200px) { section.slice_system_page._media_allmedia_aspx div#media_controls div.LineB {display:none;} } /* Fix calendar display. Needs JS fixes applied. */ @media(min-width:1200px) { section.slice_system_page._calendar_month_aspx div.calendar_week div.calendar_event_time, section.slice_system_page._calendar_month_aspx div.calendar_week a span {font-size:14px; line-height:1.2;} } section.slice_system_page._calendar_month_aspx select.group-selector {margin:1px 5px 0 10px;} section.slice_system_page._calendar_month_aspx ul#calendar_buttons li.list-view-toggle i::before { font-size:48px; line-height:1; position:relative; top:-7px; } section.slice_system_page._calendar_month_aspx div.Line {display:none;margin-bottom:10px;} section.slice_system_page._calendar_month_aspx span.calendar_children_select label {font-size:16px;} @media(max-width:860px) { section.slice_system_page._calendar_month_aspx div#calendar_title {float:none;} section.slice_system_page._calendar_month_aspx select.group-selector {margin:10px 5px 0 16px;} section.slice_system_page._calendar_month_aspx div#calendar_header {position:relative;} section.slice_system_page._calendar_month_aspx ul#calendar_buttons { position:absolute; top:-1px; right:0;margin:0;padding:0 } section.slice_system_page._calendar_month_aspx div.Line {display:block;} section.slice_system_page._calendar_month_aspx input#chkIncludeCalendarSubgroups { margin-left:16px !important; } } section.slice_content_page.NoGroupNav aside.sidebar nav {display:none !important;} /* Global Fix to ensure certain icons are not bold */ section.slice_content_page aside.sidebar div.sidebar_buttons a.button_1::after, section.slice_content_page aside.sidebar div.sidebar_buttons a.button_2::after, section.slice_content_page aside.sidebar div.sidebar_buttons a.button_3::after, section.slice_content_page aside.sidebar div.sidebar_buttons a.button1::after, section.slice_content_page aside.sidebar div.sidebar_buttons a.button2::after, section.slice_content_page aside.sidebar div.sidebar_buttons a.button3::after {font-weight:400;} /* Social media icons - hide the unused ones */ footer section.slice_FooterTop_L div.footer-column.footer-column-1 a.footer_icon_block[href$="/#"], footer section.slice_FooterTop_L div.footer-column.footer-column-1 a.footer_icon_block[href$="/#/"] {display:none;} /* Base style.css sets a global "a {text-decoration:underline}" for underlined links. These footer social anchors draw their icon via i::after, so that underline leaks out as a stray line under each icon. Remove it for the social icons only. Higher specificity than the bare "a" rule, so no !important needed. */ footer section.slice_FooterTop_L div.footer-column.footer-column-1 a.footer_icon_block {text-decoration:none;} section.Xslice_SlidesFullWidth a.bx-pager-link { box-shadow:0 0 5px 1px #bbbbbb; } section.slice_content_page div.main-content ul { list-style: none; /* Remove default bullets */ } section.slice_content_page div.main-content > div.ArticleBody ul:not([class]) > li::before { content: "\2022" !important; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: #58B999 ; /* Change the color */ font-weight: bold; /* If you want it to be bold */ display: inline; /* Needed to add space between the bullet and the text */ margin-left: -14px; /* Also needed for space (tweak if needed) */ padding:0; } section.slice_content_page div.main-content ol {padding-left:25px;} /* Robin's mobile fixes */ @media (max-width:767px) { section.slice_CommunityText_L div.WelcomeWrapper img {border-width:4px;} section.slice_ServiceText_L {margin:10px 10px 20px;} section.slice_ServiceText_L div.block2-1, section.slice_ServiceText_L div.block2-2 {font-size:15px;} section.slice_ServiceText_L div.block2-1 span, section.slice_ServiceText_L div.block2-2 span {font-size:16px;} section.slice_ServiceText_L div.block2-1 a, section.slice_ServiceText_L div.block2-2 a {font-size:14px;} section.slice_ServiceText_L div.block2-1 {border-width:1px;} section.slice_image_blocks_3 div.image_blocks ul.gallery_ul li.gallery_li a div.image_block_title {font-size:32px;} section.slice_WhatsOn3Buttons_L {background-color:white;} section.slice_WhatsOn3Buttons_L h1 {font-size:28px;} section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper ul.gallery_ul li.gallery_li div.caption div.slideTitle {font-size:22px;} section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper ul.gallery_ul li.gallery_li div.caption div.slideText {font-size:15px;} } @media (max-width:599px) { section.EventsAndTalks {padding:10px 10px 0;} section.EventsAndTalks h1 { text-align:left; font-size:22px; padding-left:15px; } section.EventsAndTalks div.eventListTitle a {font-size:18px;} section.EventsAndTalks div.EventsList td:first-child {display:none;} section.EventsAndTalks div.eventListDate { font-size:13px; font-weight:400; padding-top:9px; padding-bottom:8px; } section.EventsAndTalks div.eventListLocation a {font-size:14px;} section.EventsAndTalks div.EventsList > div {margin:0 0 2px;} section.EventsAndTalks a.button {font-size:12px; padding-bottom:8px; margin-left:15px;} section.EventsAndTalks div.mediaListTitle a {font-size:18px;} section.EventsAndTalks div.mediaListSpeaker {font-size:16px;} section.EventsAndTalks div.MediaListDate {font-size:14px;} section.EventsAndTalks div.TalksList span.MediaList > div {margin:0 0 2px;} div.SermonsAndPDFs div.article_cards > span > div div.articleListTitle a {font-weight:600;} footer div.FooterSafeGuarding h1 {font-size:18px;} } header div.search-overlay div.search_div input.text {margin:0; font-size:16px;} header div.SearchWrapper {padding-left:10px;} div.calendar-event-dialog div.calendar-event-content div.event-link a {text-decoration:underline;} section.slice_system_page._media_allmedia_aspx div.media_recording_file_title, section.slice_system_page._media_allmedia_aspx div.MobileRecorded {display:none;} @media (max-width:767px){ section.slice_system_page._media_allmedia_aspx div.system_row.media_recording { display:block; position:relative; width:100%; } section.slice_system_page._media_allmedia_aspx div.media_recording_main { display:block; width:100%; } section.slice_system_page._media_allmedia_aspx div.media_recording_extra { display:table-cell;width:0;height:0;padding:0;margin:0;border:none; } section.slice_system_page._media_allmedia_aspx ul.media_recording_links, section.slice_system_page._media_allmedia_aspx ul.media_recording_details li {display:none;} section.slice_system_page._media_allmedia_aspx ul.media_recording_details, section.slice_system_page._media_allmedia_aspx ul.media_recording_details li { padding:0;margin:0; } section.slice_system_page._media_allmedia_aspx div.MobileRecorded { display:block; font-size:14px; font-weight:700; } } section.slice_FooterTop_L div.footer-column-2 {margin-right:0;} section.slice_content_page div.main-content div.bx-wrapper div.bx-pager {padding:0; bottom:5px;} section.slice_content_page div.main-content div.bx-pager a {width:15px;height:15px;border-radius:8px;} section.slice_content_page div.main-content div.bx-wrapper a.bx-prev, section.slice_content_page div.main-content div.bx-wrapper a.bx-next { background-image:none; color:transparent; text-indent:0; box-shadow:none; } section.slice_content_page div.main-content div.bx-wrapper a.bx-prev::before { font-family: journey; content:"\e901"; color:white; font-size:30px; } section.slice_content_page div.main-content div.bx-wrapper a.bx-next::before { font-family: journey; content:"\e900"; color:white; font-size:30px; } section.slice_content_page aside div.ContentPageImage {text-align:center;line-height:1;font-size:1px;} section.slice_content_page aside div.ContentPageImage a { display:block; margin:10px auto 0;line-height:1;font-size:1px;} section.slice_content_page aside div.ContentPageImage img { width:100%; max-width:263px; display:block; } @media (max-width:768px) { section.slice_content_page aside div.ContentPageImage a {display:inline-block;} } section.slice_content_page aside div.ContentPageImage:last-child {margin-bottom:30px;} /* above 1200px make the image exactly 263px so it appears crisp */ @media (min-width:1200px) { section.slice_content_page aside div.ContentPageImage img {width:263px;} } /* Code that was in the "New To Church?" article */ section.SeekerBox.BigBox div.FullSeekerArticle table table td:first-child { vertical-align:middle !important; } section.SeekerBox.BigBox div.FullSeekerArticle td.SendButton {padding-left:40.5%;} @media (max-width:500px) { section.SeekerBox.BigBox div.FullSeekerArticle td.SendButton {padding-left:0;} } section.CoronaVirus { padding:10px; background-color:#c0392b; } section.CoronaVirus div.ArticleBody > div { text-align:center; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; } section.CoronaVirus a {display:inline-block; color:white; font-size:24px;line-height:1.3;} section.CoronaVirus a:hover {text-decoration:underline;} section.CoronaVirus img { display:inline-block; margin-right:10px; width:50px; height:auto; } @media (max-width:991px) { section.CoronaVirus a {font-size:18px;} } @media (max-width:359px) { section.CoronaVirus a {font-size:16px;} } section.RedBanner { padding:10px; background-color:red; } section.RedBanner div.ArticleBody, section.RedBanner a { text-align:center;font-size:24px;line-height:1.3;color:white; } section.RedBanner a:hover {text-decoration:underline;} @media (max-width:991px) { section.RedBanner div.ArticleBody, section.RedBanner a {font-size:18px;} } @media (max-width:359px) { section.RedBanner div.ArticleBody, section.RedBanner a {font-size:16px;} } section.slice_SlidesFullWidth li > a {display:block;} body.ArticleEditor span.ServicesLocation { display:block; margin:20px 0; font-weight:700; } body.ArticleEditor a.ServicesLocation { display:block; margin:20px 0; font-size:smaller; } body.ArticleEditor a.footer_icon_block { display:block; margin:20px 10px; width:100%; } body.ArticleEditor a.footer_icon_block i { position:relative; z-index:-1; } body.ArticleEditor div.WelcomeWrapper h1 {margin-top:10px;} /* UML_AL_1: Universal Mini-Layout Article-List 1 */ div.ArticleBody > div.UML_AL_1 { display: flex; flex-flow: row wrap; justify-content: center; align-items:stretch; } div.ArticleBody > div.UML_AL_1 > div { background-color: #f1f1f1; width: 100%; margin:15px 0;} /* 1 column */ @media (min-width: 467px) { /* 2 columns */ div.ArticleBody > div.UML_AL_1 > div { width: 49%; margin:15px 0; } div.ArticleBody > div.UML_AL_1 > div:nth-child(2n+1) {margin-right:1%;} /* Extra 1% on each */ div.ArticleBody > div.UML_AL_1 > div:nth-child(2n) {margin-left:1%;} } @media (min-width: 992px) { /* 3 columns */ div.ArticleBody > div.UML_AL_1 > div { width:32%; margin:15px 0;} div.ArticleBody > div.UML_AL_1 > div:nth-child(3n+1) {margin-left:0;margin-right:0;} div.ArticleBody > div.UML_AL_1 > div:nth-child(3n+2) {margin-left:2%;margin-right:2%;} /* extra 4% on the middle one only */ div.ArticleBody > div.UML_AL_1 > div:nth-child(3n) {margin-left:0;margin-right:0;} } div.ArticleBody > div.UML_AL_1 div.articleListImage img { display: block; width: 100%; margin:0;} div.ArticleBody > div.UML_AL_1 div.articleListImage a { display: block; margin: 0; } div.ArticleBody > div.UML_AL_1 div.articleListImage a:hover, div.ArticleBody > div.UML_AL_1 div.articleListTitle a:hover { opacity: 0.6;text-decoration:none; } div.ArticleBody > div.UML_AL_1 div.articleListTitle { padding: 10px 10px;} div.ArticleBody > div.UML_AL_1 div.articleListTitle a { font-weight: 700; font-size: larger; text-transform: capitalize;text-align: center;line-height: 1.2; display:block; text-decoration:none; } div.ArticleBody > div.UML_AL_1 div.articleListSummary { padding: 0 10px 10px; font-weight: 400; text-align: center;line-height: 1.3;} div.ArticleBody > div.UML_AL_1 div.articleListLink {flex:1 1 auto;font-size:0;line-height:1;color:transparent;} /* takes up the height slack */ section.OurChurches {background-color:white; padding:50px 10px 60px;} section.OurChurches a {text-decoration:underline;} section.slice_VideoWrapper {position:relative;background-color:#4CA524;} section.slice_VideoWrapper video { display:block; object-fit:cover; width:100%; max-height:800px; } section.slice_VideoWrapper div.VideoCaption { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; text-align:center; text-shadow:0 0 2px black; } section.slice_VideoWrapper div.VideoCaption div.title { font-size:72px; font-weight:700; color:white; line-height:1.2; margin:0 10px 20px; } section.slice_VideoWrapper div.VideoCaption div.SubTitle { font-size:48px; font-weight:600; color:white; line-height:1.2; margin:0 10px; } section.slice_VideoWrapper div.VideoCaption a.BlockButton { background-color: transparent; color: white; border: 2px solid white; padding: 15px 40px; font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: 1px; margin:50px 0 0; border-radius:100px; } section.slice_VideoWrapper div.VideoCaption a.BlockButton:hover { background-color: #4CA524;border-color: #4CA524; color: white; text-shadow:none; } @media (max-width:992px) { section.slice_VideoWrapper div.VideoCaption div.title {font-size:40px;} section.slice_VideoWrapper div.VideoCaption div.SubTitle {font-size:32px;} section.slice_VideoWrapper div.VideoCaption a.BlockButton { padding: 10px 20px; font-size: 20px; margin:20px 0 0; border: 1px solid white; } } /* Code to make slide-shows look better on mobile screens */ @media (max-width:600px) { section.slice_VideoWrapper video { width: 200% !important; /* double the width, which doubles the height, and then translate so we see the middle 50% */ transform: translateX(-25%); } section.slice_VideoWrapper { overflow-x:hidden; } } /* ========================================================================= PORTED: Tabernacle "Upcoming Events 2" intro-column carousel (Bisley) ------------------------------------------------------------------------- Lifts the Town Church / Tabernacle events-carousel design onto Bisley's stock Calendar module. Bisley's Calendar emits the same inner card classes (.eventListImage/.eventListDate/.eventListTitle/.eventListLocation) as Tabernacle, so only the wrapper (.UML_EL_1) and the design tokens differ. Structural proportions are kept verbatim from Tabernacle; colours and fonts are re-skinned to Bisley via scoped tokens below. ACTIVATION: add class "ue-carousel" to
and restructure its Body Contents to the intro-column pattern (see the Body Contents snippet supplied with this change). Without the class the section keeps Bisley's default 4-card grid untouched -- every rule here is scoped to .ue-carousel. The carousel-viewport wrapper + prev/next buttons are injected at runtime by the ported JS in script.js (the .ue-carousel IIFE). If that JS doesn't run, the track still scrolls/swipes natively -- graceful fallback. ========================================================================= */ /* --- Scoped skin tokens (Bisley palette; structural scale from Tabernacle). accent = Bisley plum #482325: matches the site's existing link-hover and event date-number colour, and clears WCAG AA on white for the small uppercase month label. Swap --accent to the green #4CA524 if a greener accent is preferred (note: green is borderline for the micro month label's contrast). Fonts inherit Bisley's site face rather than importing Tabernacle's Fraunces/Manrope. --- */ section.EventsCardsFour.ue-carousel { --bg: #ffffff; --bg-rgb: 255, 255, 255; --surface: #ffffff; --ink: #353535; --ink-soft: #6a6a6a; --accent: #482325; --accent-ink: #ffffff; --accent-soft: #f1f1f1; --accent-dark: #2f1618; /* darker brown -- arrow-button hover */ --rule: #d7d7d7; --font-display: inherit; --font-body: inherit; --radius: 4px; --transition: 200ms ease; /* px, not rem: Bisley sets html{font-size:0.625em} (1rem = 10px), so any rem-based token would render ~62%% small here. These are the intended 16px-base sizes in absolute px. 2xl capped near Bisley's ~36px section headings so 'Upcoming Events' sits in the same scale as 'Recent Sermons'. */ --text-xs: clamp(12px, 0.7vw + 9.6px, 13.2px); --text-sm: clamp(14px, 0.8vw + 11.2px, 15.2px); --text-base: clamp(16px, 0.9vw + 12.8px, 18px); --text-lg: clamp(18px, 1.0vw + 14.4px, 22px); --text-xl: clamp(24px, 1.8vw + 16px, 32px); --text-2xl: clamp(26px, 2.5vw + 10px, 36px); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-5: 20px; --space-6: 24px; --space-8: 32px; } /* --- Header on top (centred, matches Bisley's other section headings), full-width rail below, CTA centred under the rail. Moving the heading above the rail (was a left intro column) frees the full container width so ~4 cards show instead of ~3. --- */ section.EventsCardsFour.ue-carousel .ue-carousel__head { text-align: center; margin: 0 auto var(--space-8); max-width: 60ch; } section.EventsCardsFour.ue-carousel .ue-carousel__heading { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0; text-align: center; } section.EventsCardsFour.ue-carousel .ue-carousel__tagline { font-family: var(--font-body); font-size: var(--text-base); color: var(--ink-soft); line-height: 1.5; margin: var(--space-2) 0 0; text-align: center; } section.EventsCardsFour.ue-carousel .ue-carousel__cta { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--ink); text-decoration: none; margin: var(--space-6) auto 0; /* centred block below the rail */ width: fit-content; display: flex; align-items: center; gap: var(--space-2); transition: color var(--transition); } section.EventsCardsFour.ue-carousel .ue-carousel__cta::after { content: "\2192"; /* right arrow, ASCII-escaped */ font-size: 1.1em; transition: transform 200ms ease; } @media (hover: hover) { section.EventsCardsFour.ue-carousel .ue-carousel__cta:hover { color: var(--accent); } section.EventsCardsFour.ue-carousel .ue-carousel__cta:hover::after { transform: translateX(4px); } } /* --- Card track (the .UML_EL_1 the Calendar module renders) becomes a horizontal scroll-snap flex rail. Overrides Bisley's row-wrap grid. --- */ section.EventsCardsFour.ue-carousel div.UML_EL_1 { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; /* hide native bar; nav is via buttons/swipe */ min-width: 0; /* allow overflow instead of expanding column */ padding-bottom: var(--space-1); text-align: left; } section.EventsCardsFour.ue-carousel div.UML_EL_1::-webkit-scrollbar { display: none; } /* --- Each event card --- */ section.EventsCardsFour.ue-carousel div.UML_EL_1 > div { flex: 0 0 270px; /* 4 across the ~1170px container + a peek */ width: auto; /* kill Bisley's 24.25% / 49% grid widths */ margin: 0; /* kill Bisley's nth-child gutters */ background: transparent; /* Tabernacle card has no grey panel */ scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-3); position: relative; /* anchor for the stretched-link overlay */ } /* --- Image --- */ section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListImage { overflow: hidden; border-radius: var(--radius); background: var(--accent-soft); aspect-ratio: 4 / 3; } section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListImage a { display: block; height: 100%; margin: 0; } section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListImage img { width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform 600ms ease; } @media (hover: hover) { section.EventsCardsFour.ue-carousel div.UML_EL_1 > div:hover div.eventListImage img { transform: scale(1.04); } /* undo Bisley's opacity:0.6 image-link hover -- we use the scale instead */ section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListImage a:hover { opacity: 1; } } /* --- Placeholder for events with no poster (injected by JS) --- */ section.EventsCardsFour.ue-carousel div.UML_EL_1 .eventListImage__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--accent); opacity: 0.6; } section.EventsCardsFour.ue-carousel div.UML_EL_1 .eventListImage__placeholder svg { width: 35%; height: auto; max-width: 80px; } /* --- Date -- calendar tear-off badge (spans built by JS structureEventDates). Overrides Bisley's absolute .BoxDate treatment. --- */ section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListDate { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); margin-top: var(--space-1); color: var(--ink-soft); padding: 0; position: static; text-align: left; font-size: var(--text-sm); } section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListDate .day-month { display: flex; flex-direction: column; align-items: center; padding: var(--space-1) var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); min-width: 44px; } section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListDate .day { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink); line-height: 1; letter-spacing: -0.02em; } section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListDate .month { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 2px; line-height: 1; } section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListDate .time { font-size: var(--text-xs); flex: 1; } /* --- Title (also the stretched-link host so the whole card is clickable) --- */ section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListTitle { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.01em; padding: 0; text-align: left; } section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListTitle a { color: var(--ink); font-weight: 500; font-size: inherit; display: inline; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 300ms ease; } section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListTitle a::before { content: ""; position: absolute; inset: 0; z-index: 1; } @media (hover: hover) { section.EventsCardsFour.ue-carousel div.UML_EL_1 > div:hover div.eventListTitle a { background-size: 100% 1px; } /* undo Bisley's opacity:0.6 title-link hover */ section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListTitle a:hover { opacity: 1; } } /* --- Location -- pinned to card bottom, lifted above the stretched link so the Google Maps link stays clickable. Bisley's hotlinked map-pin icon (from the 2155 demo folder) is removed. --- */ section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListLocation { margin-top: auto; flex: 0 0 auto; padding: 0; padding-top: var(--space-1); font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.3; text-align: left; position: relative; z-index: 2; } section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListLocation a { display: inline; padding: 0; font-size: inherit; font-weight: 400; color: var(--ink-soft); text-decoration: none; transition: color var(--transition); } section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListLocation a:hover { color: var(--accent); } section.EventsCardsFour.ue-carousel div.UML_EL_1 div.eventListLocation a::before { display: none; } /* --- Carousel viewport (wraps the track + buttons + edge fades; JS-injected) --- */ section.EventsCardsFour.ue-carousel .carousel-viewport { position: relative; min-width: 0; overflow: hidden; } section.EventsCardsFour.ue-carousel .carousel-viewport::before, section.EventsCardsFour.ue-carousel .carousel-viewport::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 200ms ease; } section.EventsCardsFour.ue-carousel .carousel-viewport::before { left: 0; background: linear-gradient(to right, var(--bg) 0%, rgba(var(--bg-rgb), 0) 100%); } section.EventsCardsFour.ue-carousel .carousel-viewport::after { right: 0; background: linear-gradient(to left, var(--bg) 0%, rgba(var(--bg-rgb), 0) 100%); } section.EventsCardsFour.ue-carousel .carousel-viewport[data-can-scroll-left]::before { opacity: 1; } section.EventsCardsFour.ue-carousel .carousel-viewport[data-can-scroll-right]::after { opacity: 1; } /* --- Prev / next buttons --- */ section.EventsCardsFour.ue-carousel .carousel__prev, section.EventsCardsFour.ue-carousel .carousel__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 48px; height: 48px; border-radius: 50%; border: 0; margin: 0; padding: 0; background: var(--accent); /* dark brown circle -- clearly visible on white */ color: var(--accent-ink); /* white arrow */ cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: background var(--transition), color var(--transition), box-shadow var(--transition), opacity 200ms ease; } section.EventsCardsFour.ue-carousel .carousel__prev { left: var(--space-3); } section.EventsCardsFour.ue-carousel .carousel__next { right: var(--space-3); } section.EventsCardsFour.ue-carousel .carousel__prev:hover, section.EventsCardsFour.ue-carousel .carousel__next:hover { background: var(--accent-dark); color: var(--accent-ink); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20); } section.EventsCardsFour.ue-carousel .carousel__prev:focus-visible, section.EventsCardsFour.ue-carousel .carousel__next:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } section.EventsCardsFour.ue-carousel .carousel__next[disabled] { opacity: 0.3; cursor: not-allowed; pointer-events: none; } section.EventsCardsFour.ue-carousel .carousel-viewport:not([data-can-scroll-left]) .carousel__prev { opacity: 0; visibility: hidden; pointer-events: none; } section.EventsCardsFour.ue-carousel .carousel__prev svg, section.EventsCardsFour.ue-carousel .carousel__next svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* --- Mobile: header on top, full-bleed swipe rail, buttons hidden (swipe is the natural interaction). Matches Bisley's 720px card bp. --- */ @media (max-width: 720px) { section.EventsCardsFour.ue-carousel div.UML_EL_1 > div { flex-basis: 240px; } section.EventsCardsFour.ue-carousel .ue-carousel__heading { font-size: var(--text-xl); } section.EventsCardsFour.ue-carousel .carousel__prev, section.EventsCardsFour.ue-carousel .carousel__next { display: none; } section.EventsCardsFour.ue-carousel .carousel-viewport::before, section.EventsCardsFour.ue-carousel .carousel-viewport::after { width: 40px; } } /* --- Slide dots (below the rail; one per card, built by setupCarousel). Inactive = hairline grey; active = dark brown, matching the arrows. --- */ section.EventsCardsFour.ue-carousel .ue-carousel__dots { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); } section.EventsCardsFour.ue-carousel .ue-carousel__dot { width: 10px; height: 10px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: var(--rule); cursor: pointer; transition: background var(--transition), transform var(--transition); } @media (hover: hover) { section.EventsCardsFour.ue-carousel .ue-carousel__dot:hover { background: var(--ink-soft); } } section.EventsCardsFour.ue-carousel .ue-carousel__dot.is-active { background: var(--accent); transform: scale(1.15); } section.EventsCardsFour.ue-carousel .ue-carousel__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* === End PORTED Upcoming Events 2 carousel === */ /* ========================================================================= Footer address -- now an Article module (was the Site Address module) so it can carry three addresses, one per line. The module's CSS Class is set in Hubb to "footer-column footer-column-2", so it lands in the same footer slot as the old address (44%% wide, left-aligned, white on #353535). These rules just tidy the .ArticleBody the Article module renders inside that slot: drop its default spacing so the three
-separated lines sit tight, and hide the empty module chrome the Article module appends after it. --- */ section.slice_FooterTop_L div.footer-column.footer-column-2 div.ArticleBody { margin: 0; padding: 0; } section.slice_FooterTop_L div.footer-column.footer-column-2 div.ArticleRotaSignupLink { display: none; } /* ========================================================================= Footer bottom row -- three-column layout (matches the Aspire reference): addresses LEFT, email + phone CENTRED, social icons RIGHT. The FooterTop container becomes a grid so the safeguarding note and partner logos keep their own full-width rows on top (unchanged) while the three blocks share one row below. Nothing is removed -- existing blocks are only re-placed. NOTE: the address Article module's CSS Class (set in Hubb) must be "footer-column footer-column-2" so it is picked up as the left column. ------------------------------------------------------------------------- */ section.slice_FooterTop_L div.container { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; column-gap: 20px; align-items: start; } /* The .container clearfix (content:' ') would otherwise add two stray grid items; grid replaces the float layout so the clearfix is not needed. */ section.slice_FooterTop_L div.container::before, section.slice_FooterTop_L div.container::after { content: none; } /* Full-width top rows, unchanged from before. */ section.slice_FooterTop_L div.FooterSafeGuarding { grid-column: 1 / -1; grid-row: 1; } section.slice_FooterTop_L div.LogoWrapper { grid-column: 1 / -1; grid-row: 2; } /* Bottom row -- three columns, one row (explicit grid-row keeps them together regardless of their DOM order: social, address, email). */ section.slice_FooterTop_L div.footer-column.footer-column-2 { /* addresses */ grid-column: 1; grid-row: 3; float: none; width: auto; margin: 0; text-align: left; } section.slice_FooterTop_L div.footer-column.footer-column-3 { /* email + phone */ grid-column: 2; grid-row: 3; float: none; width: auto; margin: 0; text-align: center; } section.slice_FooterTop_L div.footer-column.footer-column-1 { /* social icons */ grid-column: 3; grid-row: 3; float: none; width: auto; margin: 0; text-align: right; } /* Icons align right via the cell's text-align, so cancel the base float:right on their ArticleBody (a floated child won't respond to text-align). */ section.slice_FooterTop_L div.footer-column.footer-column-1 div.ArticleBody { float: none; } /* Mobile: single column, everything stacked and centred (grid-row auto so the three blocks flow into their own rows instead of colliding on row 3). */ @media (max-width: 767px) { section.slice_FooterTop_L div.container { grid-template-columns: 1fr; } section.slice_FooterTop_L div.footer-column.footer-column-1, section.slice_FooterTop_L div.footer-column.footer-column-2, section.slice_FooterTop_L div.footer-column.footer-column-3 { grid-column: 1; grid-row: auto; text-align: center; } } /* ========================================================================= Footer bottom-row alignment refinements ------------------------------------------------------------------------- */ /* Addresses: all three lines flush-left (Parish Office / St John / Holy Trinity share the same left edge). The block already sits in the left column, but the article text was pasted centre-aligned in Hubb's rich-text editor (inline text-align on the content), which staggers the lines. !important overrides that editor-injected inline alignment; the .footer- column-2 (single-class) selector matches whether the module's CSS Class is "footer-column footer-column-2" or just "footer-column-2". */ section.slice_FooterTop_L div.footer-column-2, section.slice_FooterTop_L div.footer-column-2 div.ArticleBody, section.slice_FooterTop_L div.footer-column-2 div.ArticleBody * { text-align: left !important; } /* Email + phone: centre both lines as a block so Tel sits centred beneath Email (matches the Aspire reference). Overrides the desktop right-align and left padding on EmailWrapper. */ section.slice_FooterTop_L div.footer-column.footer-column-3 div.EmailWrapper { text-align: center; padding-left: 0; } /* ========================================================================= Footer address -- target the class-less wrapper directly. ------------------------------------------------------------------------- */ /* The address Article module renders with NO CSS Class (its Class field in Hubb is empty), so its wrapper is a bare
-- it lands in the left column only by grid auto-placement and, having no class, inherits the footer's centre text-align. None of the .footer-column-2 rules above match it. Target the class-less direct child of the footer container (the only one -- safeguarding/logos/social/email all carry classes): pin it to the left column and left-align its lines. Setting the module's CSS Class to "footer-column footer-column-2" in Hubb would also work and is tidier, but this makes it correct as-is. */ section.slice_FooterTop_L div.container > div:not([class]), section.slice_FooterTop_L div.container > div[class=""] { grid-column: 1; grid-row: 3; text-align: left; } section.slice_FooterTop_L div.container > div:not([class]) div.ArticleBody, section.slice_FooterTop_L div.container > div[class=""] div.ArticleBody { text-align: left; margin: 0; padding: 0; } /* Mobile: the footer container runs edge-to-edge and the section has no side padding, so the left-aligned address butts against the screen edge (the other blocks are centred, so they don't show it). Give the address wrapper a side gutter on mobile only -- keeps it left-aligned but off the edge. */ @media (max-width: 767px) { section.slice_FooterTop_L div.container > div:not([class]), section.slice_FooterTop_L div.container > div[class=""] { padding-left: 20px; padding-right: 20px; } } /* Mobile: centre the three addresses (desktop keeps them left-aligned) and add 15px below the address block so it isn't tight against the social icons that stack beneath it on mobile. Appended after the earlier mobile rules so it wins on source order. */ @media (max-width: 767px) { section.slice_FooterTop_L div.container > div:not([class]), section.slice_FooterTop_L div.container > div[class=""] { text-align: center; margin-bottom: 15px; } section.slice_FooterTop_L div.container > div:not([class]) div.ArticleBody, section.slice_FooterTop_L div.container > div[class=""] div.ArticleBody { text-align: center; } } /* ========================================================================= Header social icons (customer request) ------------------------------------------------------------------------- The footer Social Media module (module_id 1412367) has been reused in the header .top-link-wrapper, before the account buttons -- same module, so a single source of truth: edit the icons once and both places update. It renders with the identical wrapper (div.footer-column.footer-column-1 > div.ArticleBody > a.footer_icon_block > i.icomoon-icon-*), but ALL of the footer icon styling is scoped to .slice_FooterTop_L, so none of it reaches the header instance. We give the header its own layout + icon treatment here (footer palette, sized down for the top bar). The whole .top-link-wrapper is display:none below 992px (account links live in the mobile SlickNav menu there), so these icons are desktop-only by design -- on mobile they remain in the footer. Everything is inside the 992px query to match. */ @media (min-width: 992px) { /* Sit the module inline, to the LEFT of the account buttons. It is the first child of the wrapper, so DOM order already places it first in the row. */ .slice_Header_L div.top-link-wrapper div.footer-column.footer-column-1 { display: inline-flex; align-items: center; vertical-align: middle; /* centre against the inline-block account buttons */ margin: 0 14px 0 0; /* gap before My Area; also cancels footer margins */ width: auto; float: none; /* defensive: cancel any inherited footer float/width */ } .slice_Header_L div.top-link-wrapper div.footer-column.footer-column-1 div.ArticleBody { display: inline-flex; align-items: center; float: none; margin: 0; padding: 0; } /* The module also emits an empty Rota-signup div; hide it so it adds no box. */ .slice_Header_L div.top-link-wrapper div.footer-column.footer-column-1 div.ArticleRotaSignupLink { display: none; } /* Each icon anchor. Base style.css sets a global a{text-decoration:underline}; strip it here (same leak we removed in the footer). */ .slice_Header_L div.top-link-wrapper div.footer-column.footer-column-1 a.footer_icon_block { display: inline-flex; align-items: center; line-height: 1; margin: 0 0 0 8px; padding: 0; text-decoration: none; } .slice_Header_L div.top-link-wrapper div.footer-column.footer-column-1 a.footer_icon_block:first-child { margin-left: 0; } /* Glyph + rounded square. icomoon draws the glyph on i::after (proven by the footer, which styles the same pseudo-element); we add the box here. Palette matches the footer (grey square, plum hover); the border doubles as padding around the glyph, same trick as the footer, sized down from ~36px to ~30px to fit the header bar. */ .slice_Header_L div.top-link-wrapper div.footer-column.footer-column-1 a.footer_icon_block i::after { font-size: 20px; color: #353535; background-color: #cacdd5; border: 8px solid #cacdd5; border-radius: 4px; line-height: 1; transition: background-color 300ms linear, border-color 300ms linear, color 300ms linear; } .slice_Header_L div.top-link-wrapper div.footer-column.footer-column-1 a.footer_icon_block:hover i::after { background-color: #482325; border-color: #482325; color: #ffffff; } /* Hide the placeholder icons in the header, mirroring the footer hide list so the header shows the same visible set (any link left as a "/#" placeholder). */ .slice_Header_L div.top-link-wrapper div.footer-column.footer-column-1 a.footer_icon_block[href$="/#"], .slice_Header_L div.top-link-wrapper div.footer-column.footer-column-1 a.footer_icon_block[href$="/#/"] { display: none; } } /* ========================================================================= Service Times block -- Hubb Calendar feed (replaces the old manual script) ------------------------------------------------------------------------- The left card (block2-1) now displays an article whose body embeds a Hubb Calendar module (7-day feed). That module renders nested tables: table.smalltext > td.cal_row / td.cal_altrow > table.cal_mod tr > td.cal_mod_title (colspan 3) -> the date, e.g. "Sunday 12 July" tr[valign=top] > td.cal_mod_datetime (time) + empty spacer + content td content td: event title + span.cal_mod_location ("@ venue") Unstyled it renders as a raw table, and two existing card rules fight it: ".block2-1 span" paints every span dark-red/bold/block (hits cal_mod_location), and "section a" shrinks + underlines every link (hits the event titles). We reset the tables and give the agenda proper rhythm, in the card's palette. Scoped to slice_ServiceText_L .block2-1 so the system Calendar page (also uses cal_row/cal_altrow) is untouched. */ /* Reset the nested calendar tables: full width, no default table chrome. */ section.slice_ServiceText_L div.block2-1 table.smalltext, section.slice_ServiceText_L div.block2-1 table.cal_mod { width: 100%; border: 0; border-collapse: collapse; margin: 0; } /* 20px gap between the "Upcoming Sunday Services" heading and the first date. Outer table only (:not(.cal_mod)) so the per-day inner tables stay tight. */ section.slice_ServiceText_L div.block2-1 table.smalltext:not(.cal_mod) { margin-top: 20px; } /* Separate each day group (cal_row / cal_altrow wrap one day's table). */ section.slice_ServiceText_L div.block2-1 td.cal_row, section.slice_ServiceText_L div.block2-1 td.cal_altrow { padding: 0 0 16px; } /* Date header. */ section.slice_ServiceText_L div.block2-1 td.cal_mod_title { font-weight: 700; font-size: 15px; color: #482325; white-space: nowrap; padding: 0 0 8px; } /* Service rows: even vertical rhythm, top-aligned. Only the service rows carry valign=top, so the date-header row is unaffected. */ section.slice_ServiceText_L div.block2-1 table.cal_mod tr[valign="top"] > td { padding: 5px 0; vertical-align: top; border: 0; } /* Time cell -- keep on one line and emphasise. */ section.slice_ServiceText_L div.block2-1 td.cal_mod_datetime { white-space: nowrap; font-weight: 700; color: #353535; padding-right: 12px; } /* Event title link (direct child of the content cell; the location link is nested inside the span, so "td > a" excludes it). Base "section a" made these smaller + underlined; restore a readable size and drop the underline. */ section.slice_ServiceText_L div.block2-1 table.cal_mod td > a { font-size: 15px; font-weight: 600; color: #353535; text-decoration: none; } section.slice_ServiceText_L div.block2-1 table.cal_mod td > a:hover { color: #482325; text-decoration: underline; } /* Location line -- overrides the ".block2-1 span" dark-red/bold rule and the ">=992px span{font-size:18px}" rule (higher specificity, so no !important). */ section.slice_ServiceText_L div.block2-1 span.cal_mod_location { display: block; font-size: 13px; font-weight: 400; color: #6a6a6a; margin-top: 2px; } section.slice_ServiceText_L div.block2-1 span.cal_mod_location a { font-size: 13px; color: #6a6a6a; text-decoration: none; } section.slice_ServiceText_L div.block2-1 span.cal_mod_location a:hover { text-decoration: underline; } /* Vertically centre the clock / map-pin icons on their headings (Adam's ask). The icons are decorative ::after glyphs positioned near the top of the card. Give each a box the height of the heading's line and flex-centre the glyph in it, so the glyph centre lands on the heading centre regardless of the icon font's own metrics (avoids guessing a pixel offset). Desktop (>=992px) only for now -- the 768px and base breakpoints use different icon sizes/offsets; I'll match them once this is confirmed. */ @media (min-width: 992px) { section.slice_ServiceText_L .block2-1::after, section.slice_ServiceText_L .block2-2::after { top: 0; height: 23px; /* heading line box at >=992: 18px * 1.3 */ display: flex; align-items: center; line-height: 1; } } /* Mobile: block2-1 is full width; nudge the type down a touch to match the card's existing mobile scale. */ @media (max-width: 720px) { section.slice_ServiceText_L div.block2-1 td.cal_mod_title { font-size: 14px; } section.slice_ServiceText_L div.block2-1 table.cal_mod td > a { font-size: 14px; } }