/* Theme Name: v1.18 - Through the Roof 2025 Description: HTML5 CSS3 Responsive Author: Pollyana Miranda de Jesus Author URI: accessbydesign.uk Version: 1.18 */ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 1em; line-height: 1.8em; } body, button, input, select, textarea { font-family: poppins, sans-Arial; color: #414042; } a { color: #6C2A67; outline:none; font-weight: 500;} a:hover, a:focus,a:active{color: #3A8700; outline: 0; } a:focus-visible{ outline: 2px solid #000; border: 2px solid #fff;} abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr {float:left; width:100%; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } label { cursor: pointer; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box;width:30px;height:21px; } textarea { overflow: auto; vertical-align: top; resize: vertical; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } h1,h2,h3,h4,h5{font-family:Poppins; font-weight:400; color:#1d2650;} h1{font-size:2.6em; line-height:1.5em; margin:0 0 30px; padding:0; font-weight:700; color: #6C2A67} h2{font-size:2em;color:#6C2A67 ;padding:0 0 0; line-height:1.2em;margin:0 0 30px;} h3{font-size:1.8em;color:#000;line-height:1.2em;} h4{font-size:1.4em;color:##6C2A67;margin:10px 0 7px;} h4 a{text-decoration:none;} h5{font-size:1.2em;font-weight:normal;color:#545454} h1.blogtitles{ text-align:center;} .text-primary{ color: #6C2A67!important; } h1.maincontenth1{ margin-top: 50px; margin-bottom: 40px; } h1.singleh1{ width: 80%; margin-right: 20%; } .headerimagetext h1{ font-size: 1.5em; color: #fff; } .text-secondary{ color: #3a8700!important; } .bg-primary{ background-color: #6C2A67!important; } .bg-secondary{ background-color: #3a8700!important; } .bg-pink{ background: #d90275; } .bg-blue{ background: #007aa3; } #out{ float: left; width:100%; margin:0 auto 0; padding:0; overflow-x: hidden; } .headingdevider{ background:#cf9b5a; height:2px; width:120px; display:block; clear:both; margin:10px 0 20px; } .btn-primary, .btn-primary:active, .btn-primary:visited { background-color: #6c2a67 !important; border-radius:40px!important; padding:15px 40px; display:block; clear:both; width:300px; max-width:100%; /* 1.2 FIX: fixed px width with no fallback overflowed the viewport on very narrow phones (under ~330px); this keeps the designed 300px on everything wider and only shrinks below that. */ margin:30px 0; border:none; text-transform:none; box-sizing:border-box; } .btn-secondary, .btn-secondary:active, .btn-secondary:visited { background-color: #6C2A67 !important; } /*********** Search ***********/ #searchmain{ float:left; width:auto; margin: 0 10px 0; position:relative; } #searchtriger{ float:left; margin:0 0 0 0 ; width:44px; height:44px; border:none; cursor:pointer; background:none; color: #fff; } #searchtriger i{ position: relative; top: -11px; } #searchtriger:focus-visible{ outline: 2px solid #000; border: 2px solid #fff; } .searchform_main{ float:left; width:auto; padding:20px; margin:0; position:absolute; background:rgba(255,255,255,0.7); left:0; display: none; top:30px; z-index:999999; } .searchform_main:focus-within, .searchform_main.searchformselected, .searchform_main.searchformselected:focus-within{ left:0; display: block; } #searchform{ float:left; width:310px; padding:4px 5px; font-size:1.1em; color:#333; margin: 0; border-radius:4px; background:#E5E5E7; height:auto; font-family:Open Sans; } #searchform label{ position: absolute; left:-999999999px; } #searchsubmit { border:medium none; color:#fff; background:#666; font-size:0.9em; float:right; text-decoration:none; text-align:left; padding:3px 10px; height:auto; width:auto; border-radius:3px; cursor:pointer; position:relative; } #searchsubmit, #send, #top #submit { cursor:pointer; } #searchsubmit, #send, #top #submit { cursor:pointer; } #search { color:#333; float:left; font-size:1em; height:15px; width:200px; border:0; line-height:1.6em; background:none; font-style:italic; padding:5px 3px 3px 5px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } /*********** Slideshow ***********/ #slideshow_main{ height:890px; width:100%; margin-bottom:50px; } #slideshow_main .slider_image_wrapper{ float: left; position: relative; height: 890px; width: 100%; margin: 0 auto; padding: 0; background: #6C2A67; } #carouselslideshow{ height:890px; width:100%; position: relative; } /* 1.5 FIX: replaces the old width:auto/min-height:100vh rule (and the min-width:1300px override that used to sit further down this file - removed, see below). That combination silently distorted every hero photo above 768px wide: this is a flex child of .d-flex, whose default align-items:stretch (align-items:normal computes to stretch for a flex item) forces its height to the container's own fixed 890px/100vh box regardless of "height:auto", while width was pinned to 100% independently - two independently-fixed dimensions on a plain , whose default object-fit is "fill", so the picture stretched instead of cropped. Confirmed live: before this fix, the active slide measured a rendered aspect ratio of 0.822 against its real 1.910 (i.e. visibly squashed). object-fit:cover fills the same fixed-height box without distorting the image - it crops instead, the same effect accessbydesign.uk's own header image gets a different way (a fixed width/height pair matching its own pre-cropped ratio, inside an overflow-hidden wrapper). This one rule now covers every width from mobile up, so the old 1300px (nee 768px) breakpoint override is gone too - confirmed live afterwards at 375, 1200 and 1366px that the image fills its box cleanly with no stretching at any of them. */ #carouselslideshow .d-flex img{ width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; } #carouselslideshow .carousel-inner{ height:890px; } .carousel-caption.carouselwithbg { background: rgba(108, 42, 103, 0.8) !important; /* #6C2A67 at 80% */ color: #ffffff; text-align: left !important; position: absolute; left: calc(5% + 40px) !important; right: auto !important; margin-left: 0 !important; margin-right: auto !important; width: auto; max-width: 650px !important; padding: 24px 32px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .carousel-caption.carouselwithbg * { color: #ffffff; text-align: left !important; text-shadow: none; } @media (max-width: 768px) { .carousel-caption.carouselwithbg { left: 16px !important; right: 16px !important; max-width: none !important; padding: 16px 20px; } } /* 1.2 FIX: .carousel-item/.d-flex had no height of their own, so they stretched to match the slide 's min-height:100vh - i.e. to the browser window's height, not to the 890px visible/clipped area above. .carousel-caption's "bottom:16%" is a percentage of that taller, partly-invisible box, so on any window taller than ~890px (an ordinary large monitor, not just a toolbar-enlarged view) the caption text is pushed down past the 890px cut-off and clipped - worse still under the accessibility toolbar's Large/Extra Large Text, where the caption itself also grows taller. Pinning these to the same fixed 890px the visible area actually uses fixes the percentage's baseline. */ #carouselslideshow .d-flex, #carouselslideshow .carousel-item{ height:890px; } .containdertestimonials{ min-height: 530px; background-size: cover; margin-top: 60px!important; background: #000; color: #fff!important; } .containdertestimonials::after { background: rgba(0,0,0,0.7); content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .containdertestimonials .gutentor-block-header{ margin-top: 100px; } .containdertestimonials .gutentor-title{ margin: 0 0 0 0; color: #fff; font-family: 'Poppins',sans-serif; font-size: 18px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; } /* 1.5 FIX (revised 1.7): line-height:0.5 on a 45px heading - less than half the height its own text needs - is the same self-overlapping- heading bug already fixed elsewhere in this file (see the shared- heading-class fix further down) for a *different* selector; this one (.containdertestimonials h2.gutentor-single-item-title, the "How we're making a difference" stats heading) was never covered by that fix. 1.15 (the value used successfully elsewhere in this file) reduced the overlap but didn't fully remove it here: measured live with Range.getClientRects() on the actual text (not just the computed line-height number, which can't show whether two line boxes touch) - at 45px/weight 600 in this font, each line's rendered glyph box is 63px tall, but 1.15 only spaces consecutive lines 51.75px apart, an 11px genuine overlap whenever this heading wraps to 2+ lines (which it only does below a certain container width - that's why this wasn't visible at every width). 1.4 is the exact break-even point (0px gap); used 1.45 for a small safety margin. Confirmed live at 375px (3 lines) and 832px (2 lines): a clean 2.25px gap between every line, no overlap. */ .containdertestimonials h2.gutentor-single-item-title{ color: #fff; font-family: 'Poppins',sans-serif; text-align: center; font-size: 45px; margin: 25px 0 20px 0; padding: 0 0 60px 0; font-weight: 600; line-height: 1.45; } .containdertestimonials .container{ position: relative; /* 1.13 FIX: was 9999 - tied with the fixed
, and being later in the page it won the tie, so the stats section drew over the open mobile menu when scrolled to. Only needs to clear its own dark ::after overlay. */ z-index: 2; } #gmac2d64f .gutentor-element-counter .gutentor-counter-number { color: #fff; font-family: 'poppis',sans-serif; font-size: 45px; font-weight: 900; } #gmac2d64f .gutentor-element-counter .gutentor-counter-number { color: #fff; font-family: 'poppis',sans-serif; font-size: 45px; font-weight: 900; } #section-1d1ce8d7-0905-4c0c-b5d5-fa3e7c4d79f7{ background: none; } .testimonialcontent{ background: url("images/quote.png") no-repeat top left; font-size: 1.6em; line-height: 1.6em; font-weight: 300; font-family: poppins; padding: 0 0 0 80px; margin: 160px 0 0 0; } #carouseltestimonials .carousel-inner, #carouseltestimonials .carousel-item{ height:400px; } .carousel-indicators { text-align: left; float: left; left:0 !important; right: inherit; margin-left: 80px; margin-top: 80px; } #carouselslideshow .carousel-inner::after{ content: ""; width: 100%; height: 100%; position: absolute; background-image: linear-gradient(rgba(0, 0, 0, 0.8) 5%, transparent 30%, rgba(255, 255, 255, 0) 100%); top: 0; left: 0; } #carouselslideshow::after{ content: ""; width: 100%; height: 100%; position: absolute; background: linear-gradient(0deg,rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 90%); top: 0; left: 0; } .carousel-control-next, .carousel-control-prev{ width:50px; height: 50px; top: 45%; background: rgba(109,41,103,0.7); border-radius: 5px; } .carousel-control-next{ right: 2%; } .carousel-control-prev{ left: 2%; } #carouselslideshow .carousel-caption{ display: block; left: 0; right: 0; bottom: 16%; text-align: left; /* 1.13 FIX: was 99999 - higher than the fixed
's 9999, so the caption drew on top of the expanded mobile menu. 10 keeps it above the photo and prev/next arrows (z-index 1) and below the pause button (15) and the header. */ z-index: 10; } #carouselslideshow .carousel-caption .btn-primary{ background: #6C2A67!important; } #carouselslideshow .carousel-caption h2{ font-size: 3.5em; color: #fff; margin-bottom: 30px; line-height: 1.1em; } #carouselslideshow .carousel-caption p{ float: left; border-radius: 3px; font-size: 1.4em; line-height: 1.8em; clear: both; padding: 7px 0; margin-bottom: 25px; } #carouselslideshow .carousel-caption a{ margin-top: 30px; } /* 1.3 FIX: pause/stop control for the auto-advancing carousel (WCAG 2.2.2) - see includes/elements/sub.slideshow.php and includes/js/script.js */ .carousel-control-pause{ position: absolute; z-index: 15; bottom: 16px; right: 2%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(109,41,103,0.7); border: none; border-radius: 5px; color: #fff; font-size: 1.3em; opacity: 1; } .carousel-control-pause:hover, .carousel-control-pause:focus{ background: rgba(109,41,103,0.95); } .carousel-control-pause:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; } /* 1.16 FIX: from 768px up the hero caption is a Bootstrap .container, so just above each container breakpoint (768, 992, 1200, 1400px) its left edge sits closer to the window edge than the prev/next arrows' inner edge (2% + 50px), and the heading ran under the arrows. Padding needed on each side = arrow edge + 12px gap - the container's own offset: 62px + container/2 - 0.48 x width (padding % is of the slide's width). max() keeps the normal 12px once the container has moved clear, so wide desktop screens are unchanged. The .carouselwithbg caption variant has its own positioning (already clear of the arrows) and is left alone. */ @media only all and (min-width: 768px){ #carouselslideshow .carousel-caption:not(.carouselwithbg){ padding-left: max(12px, calc(422px - 48%)); padding-right: max(12px, calc(422px - 48%)); } } @media only all and (min-width: 992px){ #carouselslideshow .carousel-caption:not(.carouselwithbg){ padding-left: max(12px, calc(542px - 48%)); padding-right: max(12px, calc(542px - 48%)); } } @media only all and (min-width: 1200px){ #carouselslideshow .carousel-caption:not(.carouselwithbg){ padding-left: max(12px, calc(632px - 48%)); padding-right: max(12px, calc(632px - 48%)); } } @media only all and (min-width: 1400px){ #carouselslideshow .carousel-caption:not(.carouselwithbg){ padding-left: max(12px, calc(722px - 48%)); padding-right: max(12px, calc(722px - 48%)); } } @media only all and (max-width: 767px){ .carousel-control-pause{ bottom: 10px; right: 4%; width: 38px; height: 38px; font-size: 1.1em; } /* 1.15 FIX: on phones the hero heading (3.5em = 56px) wrapped to four lines and rose up under the header icons and Donate button, and the paragraph ran underneath the prev/next arrows (which sit at 45% down the slide). Smaller caption text keeps it clear of the header, and the arrows move into a row with the pause button at the bottom right, same 38px size. */ #carouselslideshow .carousel-caption h2{ font-size: 2.2em; margin-bottom: 15px; } #carouselslideshow .carousel-caption p{ font-size: 1.1em; } .carousel-control-prev, .carousel-control-next{ top: auto; bottom: 10px; left: auto; width: 38px; height: 38px; } .carousel-control-next{ right: calc(4% + 46px); } .carousel-control-prev{ right: calc(4% + 92px); } } .logoslideshow{ position: absolute; bottom: -220px; right: 10%; z-index: 999; } /************ Colouredareas ***************/ .colouredareas .col-sm-4{ padding: 0; margin: 0 2% 0; color: #000; width:32%; position: relative; overflow: hidden; min-height: 320px; } .colouredareas .mb-3{ margin-bottom: 2%!important; } .colouredareas .col-sm-4:first-child{ margin: 0; } .colouredareas .col-sm-4:last-child{ margin: 0; } .colouredareas .col-sm-4 h2{ color: #6C2A67; font-size: 1.6em; font-weight: 500; margin-bottom: 10px; } .colouredareas p{ font-size: 19px; line-height: 1.5em; color: #545454; } .child-main-text-wrapper{ position: relative; font-size: 1.1em; color: #000; z-index: 999; } .colouredareas .col-sm-4 .btn-image .child-main-text-wrapper h3{ font-size: 2.2em; line-height: 1em; color: #fff; margin-bottom: 10px; } .btn-border{ border: 1px solid #fff; color: #fff; background: none; padding: 7px 30px; position: relative; font-size: 1em; text-transform: uppercase; } /************giuterberg block fixes***/ .gutentor-image-thumb img, .gtf-image img{ max-width:100%; height:auto; } .gutentor-title{ font-family:Poppins; font-weight:700; color:#1d2650; } .gutentor-section-title.enable-title-design.text-center .gutentor-title::before{ background:#bf8941!important; } .section-ge2dad1 .gutentor-block-button:focus, .gutentor-block-button:focus{ background: #6C2A67!important; } .section-ge2dad1 .gutentor-block-button:focus-visible, .gutentor-block-button:focus-visible{ outline: 2px solid #000!important; border: 2px solid #fff; } @media (min-width: 1350px) { .grid-container { max-width: 1320px!important; } } .gutentor-single-item-desc{ line-height: 1.8em; } .wp-block-heading{ margin-top: 15px; } #section-g3222c1 h3.gutentor-text, #section-g-a2gsn2y h3.gutentor-text, #section-g-tnky8n4 h3.gutentor-text{ color: #2d2d43; font-family: 'Poppins',sans-serif; font-size: 20px; font-weight: 600; margin-top: 20px; } .section-g0aa916.gutentor-element-advanced-text .gutentor-text { margin: 0 0 20px 0; font-size: 16px; } .section-g-s4wz16z.gutentor-element-advanced-text .gutentor-text { margin: 0 0 50px 0; font-size: 16px; color: #2d2d43; font-family: 'Poppins',sans-serif; } .teamsection .gutentor-image-thumb img{ border-radius: 100%; } .teamsection .gutentor-single-item{ padding: 15px!important; } .teamsection.gutentor-team .gutentor-single-item-desc{ background: rgba(80,26,104,0.8); color: #FFFFFF; padding: 30px; position: absolute; top: -5%; height: 105%; width: 100%; opacity: 0; text-align: left; } .gutentor-template-wrapper{ position: relative; } .teamsection.gutentor-team .gutentor-template-wrapper:hover .gutentor-single-item-desc, .teamsection.gutentor-team .gutentor-template-wrapper:focus .gutentor-single-item-desc{ opacity:1; } .nopadding .grid-container{ padding-right: 0!important; padding-left: 0!important; } .nopadding .grid-container .grid-row{ margin-right: 0!important; margin-left: 0!important; } .nopadding .grid-container .grid-row .gutentor-grid-column{ padding-left:.0!important; } .videoat100 iframe{ width: 100%!important; height: 400px !important; } .section-gp191d6c.gutentor-enabled-width.gutentor-post-module-p6 .gutentor-post:not(.gutentor-post-featured):not(.gutentor-post-no-thumb) .gutentor-post-image-box{ width: auto!important; } .wp-block-gutentor-call-to-action.has-gutentor-overlay{ background-color: #000; } .gutentor-element-advanced-text .gutentor-text a{ color: #6C2A67!important; } /****** Header *******/ header{ width:100%; float:left; margin: 0 auto ; position:fixed; z-index:9999; background:none; } header .logo { float:left; z-index:999999; position:relative; text-align: left; margin:0 0; text-indent: -999999em; } .header-top{ float: left; width: 100%; position: relative; z-index: 99999; padding: 25px 0 0; background:#000000; background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.0001)); } .header-right{ float: right; width: auto; position: relative; padding-left: 60px; } .header-top .tel{ font-size: 1em; float: left; padding: 0 0 0; margin: 0 0 0 0; margin-left: 30px; } .header-top .tel i{ font-size: 0.8em; margin-right: 2px; position: relative; top: -4px; } .header-top .tel a { text-decoration: none; color: #fff; } .header-top .tel a:hover,.header-top .tel a:focus { text-decoration: none; color: #ccc; } .header-top .tel a:focus-visible { outline: 2px solid #000; border: 2px solid #fff; } .headerbutton1{ float:right; min-width:70px; background:#006C67; text-align:center; color:#fff; padding:10px 15px; margin-left:20px; text-decoration:none; font-family:'arial'; font-size:1em; border:none; border-radius: 5px; } .cart-customlocation, .myaccountlink{ width: auto; float: left; margin-left: 25px; } /* 1.4 FIX: below Max Mega Menu's own 768px mobile breakpoint (the same 768px this theme's other mobile rules already use), .header-right's floated icon row runs out of horizontal room and .headerbutton1 (the "Donate Here" button) wraps onto its own line - but the plugin's own mobile toggle (.mega-menu-toggle, positioned by its own generated CSS, not this stylesheet) sits right where that wrapped line lands. Measured live with getBoundingClientRect() at both 767px and 760px: the toggle occupies y:40-80px, the wrapped button lands at y:69-107px - an 11px genuine overlap confirmed both before and after this fix (not just a visual guess). Pushing the wrapped button down clears the toggle with room to spare at both widths, confirmed live. */ @media only all and (max-width: 767px){ .headerbutton1{ clear: both; /* 1.15: was 40px, which was only needed to drop the button below the menu toggle. The icon row now reserves the toggle's width itself (.header-right padding-right below), so 12px is enough; nowrap stops "Thank You!" wrapping onto a second line at 375px. */ margin-top: 12px; white-space: nowrap; } /* 1.15 FIX: on phones the icon row wrapped straight underneath Max Mega Menu's toggle - at 375px the basket icon sat entirely under it (elementFromPoint at its centre hit the toggle, so it couldn't be tapped at all). Reserve the toggle's width on the right. */ .header-right{ padding-right: 62px; } /* 1.15 FIX: once scrolled, the white .navbar.scrolled bar is only 70px tall, but the wrapped icon row is ~170px on phones, so the account icon (white on white) and the Donate button hung below the bar over page text - and the invisible header box intercepted taps on links underneath it. Desktop already loses this row under the white bar on scroll; this does the same on mobile. display:none (not visibility) so the header box collapses and stops blocking taps. Class is set in footer.php next to the existing .scrolled toggle. */ header.header-scrolled .header-top{ display: none; } } /*********Nav *********/ .navbar { position: absolute; top: 0px; width: 100%; padding-top: 25px; } .navbar-nav{ float:right; background: #652681; padding: 10px; border-radius: 5px; } .navbar.scrolled { background-color: rgba(255,255,255,0.9)!important; transition: background-color 200ms linear; z-index: 999999; padding-top: 0; } .navbar-toggler{ border:none; /* 1.2 FIX: this is Bootstrap's own navbar-collapse hamburger button, but its target (#navbarNav) doesn't exist anywhere in the theme - the Max Mega Menu plugin's own toggle (.mega-menu-toggle) handles the real mobile menu instead. Because this button's visibility follows Bootstrap's default navbar-expand-lg breakpoint (992px) while the plugin switches to its mobile menu at 768px, this dead, non-clickable button was appearing on its own in the header between roughly 769-991px wide (confirmed live). Hidden outright since nothing currently wires it up to anything. */ display:none!important; } /* 1.3 FIX: Max Mega Menu's own mobile toggle (.mega-menu-toggle, the button that actually opens the off-canvas menu) was completely unclickable at every narrow width tested (375px and 767px) - confirmed live with elementFromPoint() across its whole hit area: every point resolved to .header-right (part of .header-top) instead, because .header-top is position:relative with z-index:99999 while the toggle only has z-index:1, so header-top's stacking context sits above the toggle everywhere they overlap, even though header-top has no visible background there. A direct .click() call opened the menu fine, proving the plugin's own click handler works - it's purely a stacking-order problem blocking real mouse/touch clicks from ever reaching the button. Raised the toggle above header-top so it can receive clicks; verified live afterwards with both elementFromPoint() and an actual simulated click, which now opens the menu correctly. */ .mega-menu-toggle{ z-index:100000!important; } .navbar-expand-lg .navbar-nav .nav-link{ color:#fff; padding:10px 15px; font-family:Poppins; font-size: 1.1em; } .navbar.scrolled .navbar-nav .nav-link{ color:#1d2650!important; } .navbar-expand-md .navbar-nav .active .nav-link{ border-bottom:2px solid #bf8941 } .navbar.scrolled .navbar-brand img{ height:52px; } /********** homepage**************/ .container-full{ float: left; width: 100%; padding: 0; margin: 0; position: relative; } .imagerighthome{ bottom:-50px; position:relative; left:-15.5%; } .content_image{ float:right; width:auto; margin:0 0 20px 15px; padding:0; border-radius: 0; } .imagelefthome{ float: right; position:relative; top:-31px; left:-11%; } .threecolunsimg{ max-width:100%; height:auto; margin-bottom:20px; } .container-xxl.containerhome{ margin-top:40px; margin-bottom:60px; --bs-gutter-x: 0; } .maintext{ width:100%; padding:60px 30px 55px 0; margin:30px 0 0; z-index:99; position:relative; float:left; } .containerdonatehone{ min-height: 570px; background-size: cover; margin: 100px 0 60px; } .maintext h2{ font-size:3.3em; color: #6c2a67; font-weight: 700; } .preheading{ color:#000; font-size:1.2em; letter-spacing: 0.1em; margin-bottom: 30px; font-weight: 600; } .container-xxl.containerhome .maintext{ padding:50px 30px 40px 30px; top:10px; font-size:110%; } .container-fluid.bg-light .maintext{ font-size:110%; } .maintextright{ left:-15%; position:relative; top:10px; padding:50px 0 80px 30px; } .maintext p{ font-family:Poppins; font-size:1.2em; line-height:1.5em; color:#545454; } .col-sm-4 img{ max-width:100%; height:auto; border-radius: 20px; } .main_content,#maincontent{ float: left; width: 100%; } .main_content p{ font-family:Poppins; font-size:1.2em; line-height:1.5em; color:#545454; } .bg-img{ background-size: cover; background-repeat:no-repeat; background-position:center; } /********** tribe events*************/ .tribe-events header.tribe-events-header, .tribe-events header.tribe-events-calendar-month__header{ position: relative!important; float: none!important; width: auto!important; } .tribe-events-event-image img { max-width: 100%; height: auto; } /********** portfolio page ************/ .content-style{ font-family: Poppins; font-size: 1.1em; line-height: 1.5em; color: #545454; padding-top: 45px; } .content-left{ padding-right: 3%; padding-left: 4%; } .content-right{ padding-left: 2%; padding-right: 5%; } .content-center{ padding-right: 5%; padding-left: 5%; } .bottomimg{ padding-top: 20px; } .portf{ margin-top: 50px; margin-bottom: 50px; } .portf2{ margin-top: 20px; margin-bottom: 20px; } .portf div{ overlay:hidden; } .portf h2, .reviewport h2{ font-size:2.4em; } .reviewport{ padding-left: 15%; padding-right: 15%; padding-bottom: 80px; font-family: Poppins; font-size: 1.2em; line-height: 1.5em; color: #545454; padding-top: 45px; } .reviewport h2{ font-size:3.4em; font-weight: bold; } .portfimg{ min-width: 100%; float: left; } .portf.bg-light{ padding-bottom: 40px!important; padding-top: 40px!important; } .portfimgleft{ padding-right: 2%; overflow: hidden; } .portfimgright{ padding-left: 2%; overflow: hidden; } .contentportf{ padding: 50px 0 80px; font-family: Poppins; font-size: 1.3em; line-height: 1.5em; color: #545454; } .fullproftimg{ float: left; width: 100%; position: relative; } .fullproftimg::after { position: absolute; height: 100%; width: 100%; background-color: rgba(20, 29, 71, .5); top: 0; left: 0; display: block; content: ""; } .textoverproft{ position: absolute; padding: 150px 0; font-family: Playfair Display; font-size: 3em; line-height: 1.5em; color: #fff; text-align: center; width: 100%; } /******** social Icons *****************/ .ul_social { float:right; list-style:none; margin:5px 20px 0 0 ; padding:0 0 0 40px; width:auto; } footer .ul_social{ float:left; width:100%; margin:5px 0 10px 0; } .ul_social li{ float:left; height:32px; width: auto; margin-right: 15px; } .ul_social li a{ display: block; float: left; height: 32px; text-align:left; width: 100%; } .ul_social li a span{ text-indent:-99999em; display: block; float: left; text-align:left; } .ul_social li a i{ font-size: 1.6em; } .ul_social li.facebook a i{ font-size: 1.5em; } .ul_social li a:hover, .ul_social li a:focus{ /* 1.3 FIX: was a bright green (#99CC00) that didn't match anything else in the palette - changed to a light grey per Clive's request, still well clear of AA contrast against the purple footer/header backgrounds these icons sit on. */ color: #cccccc; } .ul_social li a:focus-visible{ outline: 2px solid #99CC00!important; border: 2px solid #fff; padding:0; } /****************** contact ***********/ .contactushomemainwrapper{ float:left; width:100%; position:relative; z-index: 999; padding:80px 0; margin:30px 0 0; text-align:center; background:#1FB2E7; } .contactushomemain{ display:block; width:1100px; margin:0 auto; } .contactushome{ float:left; width:35%; padding:0; margin:0 5% 0 0; text-align:left; } .contactushomemain h3{ color:#fff; float:left; width:100%; font-size:4.5em; font-weight:800; line-height:1.4em; text-align:center; } .bluewriting{ color:#1FB2E7; } .contactushome p{ font-family:'Poppins', Arial; font-weight:300; text-transform:uppercase; font-size:1.6em; line-height:1.3em; color:#fff; margin-bottom:40px; } .contactushome-textunder{ float:left; width:100%; font-family:'Poppins', Arial; font-weight:400; font-size:1.3em; text-align:left; color:#fff; } .contactushomeright{ float:right; width:55%; } .contactleft{ float:left; width:38%; margin-right:2%; } .contactright{ float:right; width:60%; } /******* child ************/ .child_pages{ float:left; width:100%; text-align:left; } .child_pages h3{ font-size:1.5em; } .formwhite{ color:#fff!important; } .gtranslate_wrapper{ float:right; margin-top:5px } .gtranslate_wrapper .gt_switcher a img{ top:-3px; position:relative; } /*********************/ .header_image_wrapper, .header_image_wrapper_events{ float:left; position:relative; height:550px; width:100%; margin:0 auto; padding:0; background: #6C2A67; clip-path: polygon(0px 0px, 100% 0px, 100% 90%, 0px 100%); } .header_image_wrapper_main{ float:left; position:relative; height:550px; width:100%; } /*.header_image_wrapper_main::after{ content: ""; width: 100%; height: 100%; position: absolute; background: url("images/slide-bg.png") no-repeat top left; top: -50px; left: 0; }*/ .header_image_wrapper_events{ height: 550px; } .header_image_wrapper2{ float:left; position:relative; height:550px; width:100%; margin:0 auto; padding:0; } .header_image_wrapper_events .header_image_wrapper2{ height:500px; } /* 1.11 FIX: inner-page header image not filling its banner. The banner box (.header_image_wrapper/2) is a fixed 550px tall with a purple background, but the image inside it had no sizing of its own below 1500px (so it sat at its raw 1700x550, cropped from the left) and only width:100% at 1500px+ (so its height tracked the window width: at e.g. 1536px it is only ~497px tall, leaving ~53px of the purple background showing as a slanted band under the photo - the exact gap in Clive's About-page screenshot). Same fix as the homepage hero in 1.5: fill the box and crop with object-fit, so the photo always covers the whole banner at every width, cropped from the centre. Deliberately a plain .header_image selector (same specificity as the existing 767px rule's height:250px) so that later mobile rule still wins - a more specific selector here would silently override it (playbook Section 15, in reverse). */ .header_image{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .header_image_wrapper2::after, .header_image_wrapper3::after{ content: ""; width: 100%; height: 100%; position: absolute; background-image: linear-gradient(rgba(0, 0, 0, 0.70) 15%, transparent 50%, rgba(255, 255, 255, 0) 100%); top: 0; left: 0; } .headerimagetext{ position:absolute; z-index:9999;; bottom:15%; left:0; width:100%; text-align:left; color:#fff; font-size:2.2em; font-family: "Poppins"; font-weight:600; line-height:1.2em; } #crumb{ float:left; width:100%; text-align:left; margin:0 auto 5px; z-index:100; font-size:0.9em; height: auto; padding: 5px 0; } #crumb a{ color:#40472E; } #crumb a:focus-visible{ outline:2px solid #000999; border: 2px solid #fff; } /********** More info text ************/ #moreinfoprod{ float:left; width:100%; text-transform:uppercase; color:#545454; line-height:1.1em; font-size:1.1em; padding:10px 0 10px 0; cursor:pointer; text-decoration:none; font-weight:bold; } #moreinfoprod#infohide{ background:none; } #infoshow{ display:block; font-size:1.1em; color:#769aa2; font-family:"Poppins"; cursor:pointer; } #infohide{ display:none; font-size:1.1em; color:#769aa2; font-family:"Poppins"; cursor:pointer; } #moreinfoprodtext{display:none;margin-top:15px} #moreinfoprodtext.selected{display:block} /***************** logos footer************/ .containerlogos{ padding: 130px 0; } .containerlogos h2{ font-size: 2.5em; margin-bottom: 60px; font-weight:500; } .containerlogos .col-3{ padding: 0 4%; vertical-align: middle; min-height: 115px; } .containerlogos img{ max-width: 100%; height: auto; } /****** footer ********/ footer{ float:left; width:100%; color:#fff; bottom:0; height:auto; background: #6C2A67; position:relative; font-size:0.95em; } .footlogo{ float:left; clear:both; width:100%; margin:0 0 15px; padding-left: 40px; } .footermsg{ padding-left: 40px; margin-bottom: 30px; } footer a{ color:#fff; } footer a:hover{ color:#ccc; } footer .tel, footer .email, footer .address{ float:left; width:90%; padding:0 0 0 ; margin:5px 0; } footer .tel i, footer .email i, footer .address i{ margin-right: 8px; font-size: 1.2em; } footer .tel a, footer .email a{ text-decoration:none; } /* 1.5 FIX: an email address is one unbroken "word" (no spaces), and this link had no overflow-wrap/word-break of its own, so at column widths around 768-850px (col-md-3 is narrowest right at 768px, before it widens again as the viewport grows) it simply overflowed its column's padded content box instead of wrapping - confirmed live at 768px: the link measured 190px wide against a ~156px usable column width, encroaching into the next column's padding. Same failure pattern as Section 18 of the playbook ("a long word doesn't fit its column"), just on a footer link instead of a heading. */ footer .email a{ overflow-wrap: break-word; word-break: break-word; } footer .tel a:hover,footer .tel a:focus, footer .email a:hover,footer .email a:focus, footer a:focus{ text-decoration:none; color: #99CC00; } footer .tel a:focus-visible, footer .email a:focus-visible, footer a:focus-visible{ outline: 2px solid #99CC00; border: 2px solid #fff; } footer .address span{ padding-left: 28px; float: left; } footer h3 { color: #fff; font-family:'Poppins', Arial; margin-top:0; font-size:1.2em; font-weight:600; } footer h3 a{ text-decoration:none; color: #fff; } ul.legal{ float:left; width:auto; padding:0 0 0 0; margin:0; list-style:none; } ul.legal li{ float:right; width:100%; margin:0; padding:6px 0 6px; list-style:none; line-height:1.2em; font-size:1em; font-family:"Poppins"; } ul.legal li a{ padding:0; text-decoration:none; color: #fff; } ul.legal li a:hover,ul.legal li a:focus{ color:#99CC00; text-decoration: underline } ul.legal li a:focus-visible{ outline: 2px solid #99CC00; border: 2px solid #fff; } /*************** main-intro *******************/ .main-intro{ display:block; margin:0 auto; width:1230px; padding: 0; } .main-intro h2{ float:left; width:100%; text-align:center; color: #1573b4; font-family: "Poppins",Arial; font-size: 2em; font-weight:normal; margin: 0 0 10px 0; } .main-intro p{ text-align:center; font-size:1.4em; padding:10px 0 10px; font-family: "Poppins",Arial; } .largercatblocks .grid-container{ width:1230px!important; max-width: 1230px!important; } /*********** child **********/ .child-row{ width:100%; float:right; padding:10px 0; margin:0; border-bottom:1px solid #ccc; border-top:1px solid #ccc; border:none; padding:0; } .childhomefull{ width:100%; float:left; margin:0 0 10px; padding:0 0 10px; } .childhomefullintro{ width:100%; float:left; margin:0 0 5px; padding:0 0 0; background:#DADBDF; } .child-row-home{ float:left; width:100%; padding:50px 0 20px; margin:0 auto 20px; position:relative; border-bottom:1px solid #ccc; } .child-row-home #prev{ position:absolute; background:url(images/arrow-left.png) no-repeat 0 0; left:-40px; top:40%; width:29px; height:37px; } .child-row-home #next{ position:absolute; background:url(images/arrow-right.png) no-repeat 0 0; right:-40px; top:40%; width:29px; height:37px; } .child{ float: left; height: auto; margin: 0 0 10px; padding:0 0; position: relative; width: 100%; min-height:150px; height:auto; } #childrow-2 .child{ width:48%; margin-left:2%; } #childrow-2 .child:first-child{ margin-left:0; } #childmainwrapper, #childmainwrapper2{ float:left; width:100%; margin:0; padding:0; height:400px; overflow:hidden; } #child-homewrapper{ float:left; width:100%; margin:20px 0 0; padding:0 0 0; } .child-homewrapper{ display:block; margin:0 auto; width:1230px; } #child-homewrapper .intro{ font-size:1.3em; text-align:center; line-height:1.7em; margin:0 0 15px; } .child-home{ float: left; height: auto; position: relative; overflow:hidden; } .child_image_home{ overflow:hidden!important; float: left!important; width:100%!important; } .child-home h3{ float: left; width: 80%; color:#fff; padding: 15px 0; margin: 3px 10% 5px; font-weight: bold; font-size: 1.2em; text-transform: uppercase; text-align: center; position: absolute; z-index: 2; bottom: 10%; left: 0; transform: translateY(-50%); border-top: 2px solid #fff; border-bottom: 2px solid #fff; } .child-home a{ text-decoration:none; } .child-home a h3 { text-align:center; text-decoration:none; } .child-home:first-child{ padding-left:0; } .child-home:last-child{ padding-right:0; } .child_image_home{ float: left; margin: 0 0 0 0; padding: 0; width: 100%; height: auto; text-align: center; overflow:hidden; } .child_image_home::before{ display: block; position: absolute; height: 350px; width: 100%; content: ''; background: rgba(0, 0, 0, 0.4) ; } .child_image_home img{ float:left; width:100%; } .child h4{ width:100%; padding:0; margin:0 0 5px; font-weight:normal; color:#fff; font-size:1.5em; text-align:left; font-family:'Ubuntu'; } .child h4{ width:100%; padding:0; margin:0 0 5px; font-weight:normal; color:#fff; font-size:1.5em; text-align:left; font-family:'Poppins'; } #child_wrapper{ float:left; width:100%; margin: 15px 0 0; } .child-main{ float: left; margin:15px 1% 0 0; position: relative; width: 49.5%; height:595px; color:#fff; line-height:1.4em; text-align:left; overflow:hidden; } #child-main-row4, #child-main-row5{ margin-right:0; height:290px; } #child-main-row1{ height:400px; } #child-main-row2{ margin-right:0; height:400px; } .child-main a{ color:#fff; z-index:999; padding: 0 0; float:left; width:100%; height:100%; position:relative; text-decoration:none; } .child-main-text{ color:#fff; float:left; width:90%; padding:0 5%; left:0; bottom:20px; position:absolute; text-align:left; font-family:'Poppins'; } #child-main-row2 .child-main-text-wrapper, #child-main-row3 .child-main-text-wrapper, #child-main-row4 .child-main-text-wrapper, #child-main-row5 .child-main-text-wrapper{ background-image: linear-gradient(to bottom, rgba(255,0,0,0) 15%, rgba(0,0,0,0.7)); } .child-main h3{ float:left; width:100%; padding:0 0 0 ; margin:0 0 10px 0; font-size:1.9em; text-align:left; line-height:1em; font-weight:700; font-family:'Poppins'; color:#fff; } .child-main h3 a{ color:#fff; text-decoration:none; } .child-main img{ position:relative; z-index:999; } .child-main p{ font-size: 1.3em; line-height: 1.3em; } .child-mainlink { color: #000; float:left; padding: 12px 35px; font-size: 1.1em; font-weight: bold; margin: 0 auto 15px; border-radius:25px; text-align:center; text-transform: uppercase; text-decoration: none; background:#f1efef; } .child-mainlink span { background: #f5db4c; float: left; height: 10px; margin-top: 8px; margin-right: 15px; width: 50px; } /************** Gallery **************/ .gallery_wrapper{ padding:15px 0 0; } .gallery_wrapper h3{ font-size:1.4em; color:#671a1c; } .ngg-gallery-thumbnail img { margin: 4px 0 4px 5px; } .ngg-singlepic { background-color: transparent!important; padding:0!important; } .ngg-slideshow.slick-slider { margin: 10px auto 10px !important; overflow: visible; } #skiplinks a{ position:absolute; left:-10000px; color:#000; top:auto; width:1px; height:1px; overflow:hidden; z-index:9999999; } #skiplinks a:focus{ position:static; width:auto; height:auto; /* 1.3 FIX: this link sits directly over the hero photo (or whatever's behind it elsewhere) with no background of its own, and its text is #000 - confirmed live that a focused skip link is close to invisible against the dark hero image, only becoming readable once a contrast mode (which recolours the whole page) is switched on. Giving it a solid background makes it readable regardless of what's underneath. */ background:#fff; color:#000; padding:8px 16px; display:inline-block; } #skiplinks a:focus-visible{ outline: 2px solid #000; border: 2px solid #fff; } /*********** Category ***************/ #list_wrapper{ float:left; width:100%; margin: 35px 0 0; padding:0 ; } .list_items{ float:left; width:100%; position:relative; padding:0 !important; } .list_items_team{ float:left; width:84%; padding:0 8%!important; } .contentteam h1{ text-align:center; } #lists{ float:left; width:100%; padding-bottom:35px; } .item{ margin-bottom: 50px; } .item h2 { color: #6C2A67; float:left; width:100%; margin:10px 0; text-align: left; font-size: 1.3em; font-family: Poppins; font-weight: 400; } .item h2 a{ color:#6C2A67; text-decoration:none } .item h2 a:hover,.item h2 a:focus{ color:#000; } .item h2 a:focus-visible{ outline: 2px solid #000; border: 2px solid #fff; } .item-title{ left:0; width:100%; text-align:left; margin:5px 0 5px; } .item-title a{ color:#000; font-size:1.1em; } .item_content h2{ margin:0; padding:0; } .item2 .item-title{ position:relative; top:0; } .item_image { float: left; margin: 0 15px 10px 0; position: relative; } .item_image img{ border:0; } .meta_date{ text-transform:uppercase; font-family:arial; color:#666; font-size:0.9em; margin-bottom: 20px; float: left; width: 100%; } .more, .item .more, .child-home .more, .child .more { width:100%; text-align:right; right:10px; bottom:10px; margin:0 0 0; } .more a, .item .more a, .child-home .more a, .child .more a{ text-decoration:none; color:#4c881b; } .more a:hover, .item .more a:hover, .child-home .more a:hover, .child .more a:hover{ text-decoration:none; color:#545454; } figure.news article .more{ width:auto; display:inline; } /*********** products page ******************/ #tabs{ float:left; width:100%; margin:20px 0 10px } #tabs ul#tabsul{ list-style:none; float:left; width:100%; padding:0; margin:0; height:32px; border-bottom:1px solid #ccc; } #tabs ul#tabsul li{ list-style:none; float:left; width:auto; padding:5px 10px; margin: 0 5px 0 0 ; border-left:1px solid #ccc; border-top:1px solid #ccc; border-right:1px solid #ccc; border-radius:4px 4px 0 0 ; } #tabs ul#tabsul li a { text-decoration:none; color:#666; } #tabs ul#tabsul li.ui-tabs-active{ background:#fff; height:22px; z-index:99999; } #tabsprodul li img{ border:none; } #tabs .ui-tabs-panel{ float:left; width:95.9%; padding:10px 2%; border-left:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc; border-radius:0 0 4px 4px ; } #tabsprodul{ float:left; width:500px; margin:5px 0 30px; padding:0; list-style:none; } #tabsprodul li{ float:left; width:117.5px; margin:0 0 0 10px; list-style:none; } #tabsprodul li.tabsprod-1, #tabsprodul li.tabsprod-5, #tabsprodul li.tabsprod-9{ margin:0; } #tabs ul#tabsul li a.tabprices{ color:#ee6321; } a#moreinfoprod{ width:100px; margin-bottom:10px; color:#EE6600; line-height:1.1em; font-size:1.1em; padding-right:25px; cursor:pointer; font-family:'Oxygen',serif; text-decoration:none; font-weight:bold; background:url(images/plus-minus.png) 85px 4px no-repeat; } a#moreinfoprod.selected{ background:url(images/plus-minus.png) 85px -13px no-repeat; } #moreinfoprodtext{ display:none; margin-top:15px; } #moreinfoprodtext.selected{ display: block; } .list_items_products{ float:left; width:100%; } .list_items_products .item{ float:left; width:100%; border-top:1px solid #ccc; text-align:left; } .list_items_products .item:first-child{ margin-left:0; } .list_items_products .item h4{ margin-top:0; } .list_items_products .item h4 a{ color:#006DBD; line-height:1em; } .home_products{ float:left; width:22%; text-align:center; margin:10px 1.5%; } .home_products h4{ width:100%; text-align:center; font-family:'Oxygen',serif; color:#545454; font-size:1em; } .home_products h4 a{ color:#545454; } .home_products_image{ float:left; text-align:center; min-height:125px; width:100%; } .home_products_image img{ margin:0 auto; border:none; } /************ images ***********************/ #images_main { float:left; width:500px; height:auto; min-height:400px; position:relative; margin:0 10px 0 0; } #image-main { width:500px; height:300px; min-width:510px; display:table; background:#fff; text-align:center; vertical-align:middle; } #images{ height: 300px; margin:0 auto; padding:0 0; position:relative; max-width:510px; width:350px; text-align: center; vertical-align: middle; } #images img{ background:#fff; max-height:350px; max-width:500px; border-radius:4px; box-shadow: 0 0 5px #CCCCCC; } #navi2 { float:left; width:390px; height: auto; position:absolute; left:-5px; top:250px; list-style:none; margin:5px 0; padding:0; } #navi2 li, #navi3 li { width:109px; height:75px; display:table; float: left; margin: 0 5.5px 5px; list-style: none; } #navi2 a, #navi3 a { background:#fff; height: 75px; margin:0 auto; padding:0 0 0; border-radius:4px; max-width:90px; text-align: center; vertical-align: middle; } #navi2 a:focus, #navi3 a:focus { outline: none; } #navi2 img, #navi3 img{ border: none; height:75px; width:109px; box-shadow: 0 0 5px #CCCCCC; border-radius:4px; } #navi2 li.activeSlide a, #navi3 li.activeSlide a { } #navi2 li.activeSlide a img, #navi3 li.activeSlide a img{ opacity:1; } ul.details{ list-style:square; font-size:1.2em; color:#666; margin:0; padding:10px 0 0 10px; } ul.details li{ margin:9px; font-family: 'Arial'; color:#36857E; } /******** page numbers *******/ /******** page numbers *******/ .list_navi{ float:left; width:100%; text-align:center; } .wp-pagenavi{ border:none; margin-right:15px; text-decoration:none; color:#545454; text-shadow:none; padding:15px 0 10px 0; } .wp-pagenavi a, .wp-pagenavi span.extend, .wp-pagenavi span.current { color:#545454; text-decoration:none; height:25px!important; width:25px!important; display:inline-block; padding:0; } .wp-pagenavi a.page, .wp-pagenavi span.current, .previouspostslink, .nextpostslink, .wp-pagenavi a.first, .wp-pagenavi a.last, .wp-pagenavi span.extend, .wp-pagenavi a.nextpostslink, .wp-pagenavi span.pages { margin-right:10px; border:1px solid #ccc; text-align:center; padding: 2px; border-radius:20px; } .wp-pagenavi a.last{ width:auto!important; padding:2px 10px; } .wp-pagenavi span.pages{ margin-right:10px; height:25px!important; width:auto!important; padding:6px 10px; } .wp-pagenavi a:hover, .wp-pagenavi span.current { border-color: #bc9250!important; color:#bc9250; } /**** hometopfeatured *************/ #hometopfeaturedmain{ float:left; width:100%; background:#016d9c; z-index:99999; } #hometopfeatured{ display:block; width:1230px; margin:0 auto; padding:20px 0; font-size:1.2em; color:#fff; z-index:99999; } #hometopfeatured h2{ color:#fff; line-height:0.8em; } #hometopfeatured p{ margin-bottom:0; } /**************hover effect *************/ #project_list{ float:left; width:100%; margin:20px 0 30px; padding:30px 0 0; border-top:1px solid #ccc; } #project_list h3{ font-size:2.5em; color:#016D9C; text-align:center; margin-bottom:15px; } .project_list { list-style: none; width: 100%; height: auto; position: relative; margin: 25px auto; padding: 0; } .project_list li.itemteam{ float: left; width:27.3%; margin:10px 3%; height:auto; overflow:hidden; padding: 0; min-height:200px; position: relative; border:none; } .itemteam img{ width:100%; height:auto; } .itemteam h4{ font-size:1.4em; text-transform:uppercase; text-align:center; } .itemteam h5{ font-size:1.1em; text-transform:uppercase; text-align:center; color:#999; } .project_list li div { position: absolute; background: rgba(0,118,169,0.95); width: 100%; height: 100%; } .project_list li div span { display: block; padding: 10px 0; margin: 10px 20px; font-weight: normal; color: #fff; } .project_list li p{ color:#fff; font-family:Arial; font-weight:normal; text-transform:none; text-align:left; padding:0; margin:0 0 5px;} .project_list li a{ color:#fff; } .project_list li div span .titleteam{ font-size:1.3em; text-transform:uppercase; color:#fff; } /************** containersupport *****************/ .containersupport{ float: left; margin: 100px 0 50px; } .colouredareasmain{ margin: 100px auto 100px; } .colouredareasmain .gutentor-single-item-desc{ padding-bottom: 40px; font-size: 18px!important; } .containersupport .gutentor-section-title .gutentor-title, .colouredareasmain .gutentor-section-title .gutentor-title{ margin: 0 0 0 0; color: #66666; font-family: 'Open Sans',sans-serif; font-size: 18px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; } .containersupport .gutentor-single-item .gutentor-single-item-title, .colouredareasmain .gutentor-single-item .gutentor-single-item-title{ color: #6C2A67; font-family: 'Poppins',sans-serif; text-align: center; font-size: 45px; margin: 25px 0 20px 0; padding: 0 0 60px 0; font-weight: 600; /* 1.3 FIX: line-height:0.5 is less than one line of 45px text, so a heading that wraps to more than one line (eg. "We'd love you to join the journey..." on the homepage Get Involved block, at mobile widths) renders each wrapped line almost on top of the last one - confirmed live at 375px wide. Single-line headings using this same class still look fine at 1.15; only wrapped ones were actually broken. */ line-height: 1.15; } .containersupport .gutentor-single-item h3.gutentor-single-item-title{ font-size: 25px!important; margin-bottom: 0; } .containersupport .gutentor-single-item-icon-box { font-size: 40px; margin-bottom: 20px; color: #6C2A67; } .containersupport #section-1d1ce8d7-0905-4c0c-b5d5-fa3e7c4d79f7 .gutentor-single-item-desc{ padding: 0 20%; } .containersupport .gutentor-element-advanced-text#section-g67fc5d h3.gutentor-text{ width: 70%; } .containersupport .gutentor-single-item .gutentor-single-item-desc{ font-size: 18px; color: #666666; } .containersupport .gutentor-element-icon .gutentor-element-icon-box{ color: #6C2A67; font-size: 45px; } .containersupport .gutentor-element-advanced-text .gutentor-text{ font-size: 15.5px; color: #666666; } .containersupport .gutentor-button, .colouredareas .gutentor-button{ color: #fff; background-color: #6C2A67; background-image: none; padding: 12px 25px 12px 25px; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; } /************** featuredsection *****************/ .featuredsection{ float:left; width:100%; margin:20px 0 0; font-size:1.3em; line-height:1.6em; font-family:Poppins; } .featuredsection h2{ margin-top:15px; margin-bottom:0; color:#016d9c; } .featuredsection h3{ margin-bottom:25px; } .featuredsection_image{ float:right; width:620px; height:300px; position:relative; margin:0 0 0 15px; overflow:hidden; } .featuredsection_image img{ border:none; } .featuredsection p{ width:43%; } /*********** Read more Blocks************/ .blocktitle{ float:left; width:96%; background:#eee; padding: 10px 2%; margin:10px 0 0; } #firstblocktitleshow, #secondblocktitleshow, #thirdblocktitleshow, #fourthblocktitleshow, #fifthblocktitleshow, #sixthblocktitleshow, #firstblocktitlehide, #secondblocktitlehide, #thirdblocktitlehide, #fourthblocktitlehide, #fifthblocktitlehide, #sixthblocktitlehide{ width:auto; text-transform:uppercase; color:#315572; display:block; float:left; line-height:1.1em; font-size:1.3em; padding-right:35px; cursor:pointer; font-family:"Poppins",Arial; text-decoration:none; font-weight:bold; } #firstblocktitleshow, #secondblocktitleshow, #thirdblocktitleshow, #fourthblocktitleshow, #fifthblocktitleshow, #sixthblocktitleshow{ background:url(images/plus-minus.png) right 4px no-repeat; } #firstblocktitlehide, #secondblocktitlehide, #thirdblocktitlehide, #fourthblocktitlehide, #fifthblocktitlehide, #sixthblocktitlehide{ display:none; cursor:pointer; background:url(images/plus-minus.png) right -14px no-repeat; } #firstblocktext, #secondblocktext, #thirdblocktext, #fourthblocktext, #fifthblocktext, #sixthblocktext{ display:none; float:left; padding:15px 2%; background:#eee; width:96%; } #firstblocktext.selected, #secondblocktext.selected, #thirdblocktext.selected, #fourthblocktext.selected, #fifthblocktext.selected, #sixthblocktext.selected{ display: block; } /******** viewing buttons *******/ #accessibilitytringer{ float:left; width:auto; border:none; font-size: 1em; font-weight: 400; padding:0 0 ; margin:0 0 0; position: relative; color:#fff; background: none; } #accessibilitytringer .bi-universal-access{ font-size: 1em; position: relative; top: -4px; } #accessibilitytringer:hover, #accessibilitytringer:focus{ color:#ccc; } #accessibilitytringer:focus-visible{ outline: 2px solid #000!important; border: 2px solid #fff; } #viewing{ float:left; width:auto; position:absolute; right:0; top:45px; margin: 5px 0 0 0; z-index: 999999; display: none; } #viewing ul{ list-style:none; float:left; width:auto; margin:2px 0 3px; padding:20px; background:#fff; position:relative; } #viewing ul li{ margin-right:5px; padding:2px; float:left; width:auto; height:auto; position:relative; } #viewing ul li #contrast{ font-size:150%; } #viewing ul li #resetcontrast{ font-size:150%; background:#fff; border: 1px solid #000; } #viewing ul li button{ float:left; width:44px; height:44px; padding:0; color:#000; font-weight:600; text-decoration:none; text-align:center; line-height:0.9em; font-size: 1.6em; background:none; border:none; } #viewing ul li.resetcontrast button{ width:20px; height:20px; } #viewing ul li button:focus{ opacity: 0.7; } #viewing ul li button:focus-visible{ outline: 2px solid #000!important; border: 2px solid #fff; } #viewing ul li #default{ border: 1px solid #000; font-size:1.1em; } #viewing ul li #large{ font-size:1.4em; border: 1px solid #000; } #viewing ul li #xlarge{ border: 1px solid #000; font-size:2em; margin-top:0; } #viewing ul li #off{ margin-left:0; color: #000; font-size: 1.6em; border: 1px solid #000; } #viewing ul li button:hover, #viewing ul li button:focus{ opacity:0.7; border:2px solid #000; padding:0; } /**************** shop***********/ .subnav-main{ float:left; width:100%; background:#eee; margin:0 0 10px; z-index:999; } .subnav{ display:block; width:1230px; margin:0 auto; } .subnav ul{ float:left; width:100%; list-style: none; /*to remove bullets*/ text-align: center; margin: 25px auto; padding: 0; } .subnav ul li{ list-style: none; float: left; margin:0 15px; min-width: 50px; font-size: 1.2em; font-family: Poppins; text-transform:uppercase; font-weight:700; } .subnav ul li a{ color: #666; text-decoration:none; } a.cart-customlocation{ float:left; color:#fff; text-decoration:none; font-size:1.1em; position:relative; font-family: "Poppins", Arial, Helvetica; margin:0 10px; width:28px; height:20px; } .myaccountlink{ float:left; color:#fff; text-decoration:none; font-size:1.1em; position:relative; font-family: "Poppins", Arial, Helvetica; width:20px; height:20px; margin:0 10px; } .nunberitemsoverlay{ position: absolute; top: 0; right: 0; color: #fff; font-size: 0.8em; font-weight: 700; background: #FF6300; height: 18px; width: 18px; border-radius: 18px; line-height: 1.4em; text-align: center; } /****************** form ***************/ .wpcf7, .wpcf7-form{ float:left; width:100%; } .wpcf7-form label{ float:left; width:100%; color:#666; } .wpcf7-form input.wpcf7-text, .wpcf7-form input.wpcf7-quiz{ float:left; width:99%; border:1px solid #ccc; padding:8px 4px; border-radius:7px; margin:3px 0 5px 0; } .wpcf7-form textarea{ float:left; width:99%; border:1px solid #ccc; padding:2px 3px; margin:3px 0 5px 0; } input.wpcf7-form-control.wpcf7-submit, .cf7mls_next.action-button, .cf7mls_back.action-button{ float:right; width:auto; padding:10px 45px!important; background:#3A8700; color:#fff; border:none; font-weight: 500!important; font-size:1.4em!important; border-radius:30px!important; } .cf7mls_next.action-button{ background:#3A8700!important; } .cf7mls_back.action-button{ float:left!important; background:#3A8700!important; } .wpcf7-list-item{ float:left; width:30%; padding:5px 0; } .wpcf7-form-control-wrap{ float:left; width:100%; margin:0 0 20px; } #wpcf7-f35421-p17781-o1 .wpcf7-form input.wpcf7-submit{ background: #3A8700; padding:10px 60px; float:left; margin-top:30px; margin-bottom:50px; min-height:40px; } #wpcf7-f35421-p17781-o1 .wpcf7-form textarea{ background:rgba(255,255,255,0.8); border-radius:5px; height:100px; border:none; } #wpcf7-f35421-p17781-o1 .wpcf7-form label{ margin-top:7px; float:left; font-size:1.2em; } #wpcf7-f35421-p17781-o1 .wpcf7-form input{ background:rgba(255,255,255,0.8); border-radius:5px; height:30px; border:none; } #wpcf7-f35421-p17781-o1 .wpcf7-form input.wpcf7-file{ background:none; } .wpcf7-form-control-wrap.message{ border:none!important; background:none!important; } span.wpcf7-not-valid-tip{ float:left; width:100%; } .slick-slide img { max-width: 100%!important; } #section-65e4cb4d-29e0-4d5e-ac54-bddf5d9de229{ padding-bottom:10px!important; } /************** map frame****************/ .map_frame{ float:left; width:100%; margin-top:15px; } .map_frame iframe{ width:100%; height:300px; } .pum-theme-13867 .pum-content, .pum-theme-lightbox .pum-content{ float:left!important; width:100%!important; } /************* newsletter *******************/ .newsletter img{ margin-top: 100px; position: relative; left: -50px; } .newsletter h2{ float: left; width: 100%; color: #fff; margin-bottom: 15px; font-size: 2.5em; font-weight: 500; margin-top: 80px; } .newsletter p.newsintro{ font-size: 1.1em; } .mc4wp-form-fields{ float:left; width:100%; margin-top:15px; margin-bottom: 80px; } .mc4wp-form-fields legend{ font-size: 1.1em; } .mc4wp-form-fields .row label{ position: absolute; left: -999999999px; } .mc4wp-form-fields input{ float:left; width:100%; padding:8px 2%; background:#fff; margin:0 15px 10px 0; color:#333; border: none; border-radius:3px; } .mc4wp-form-fields a{ color: #fff; } .mc4wp-form-fields input[type='checkbox'] { background-color: #fff; margin: 0; font: inherit; width: 1.15em; height: 1.15em; border-radius: 0.15em; } .mc4wp-form-fields .checklabels{ position: relative; top: -5px; margin: 0 30px 0 10px; } .mc4wp-form-fields #mc-embedded-subscribe{ text-transform: uppercase; font-size: 1.5em; margin: 0 auto 0; margin-bottom: 0px; padding: 10px 15px; text-align: center; border: none; text-decoration: none; background:#1FB2E7; font-weight: 600; width:30%; color:#fff; font-family: "Poppins",Arial; border-radius:30px; float:left; } /***********map ********/ #contact-page{ float:left; width:985px; padding:0 15px; border:1px solid #ccc } #contact-page .row{ float:left; width:100%; padding:15px 0; border-top:1px solid #ccc; } #contact-page .row:first-child{ border-top:none; } .map-wrapper { width:80%; height:auto; float:right; padding:0 0 0 15px; margin:0 0 0 15px; border-left:1px solid #ccc; } /***************** no display messages *************/ .welcomemsg{ width:100%; padding:1px 2%; position: relative; z-index: 99999; background:#fff; } .welcomemsg a{ color:#028073; } .welcomemsg a:hover,.welcomemsg a:active,.welcomemsg a:focus{ color:#E48545; } .temporary-notice { background-color: #fdfd8a; color: #1a1a1a; width: 100%; padding: 4px 16px; text-align: center; box-sizing: border-box; } .temporary-notice__text { margin: 0; font-size: 15px; line-height: 1.4; } @media (max-width: 600px) { .temporary-notice__text { font-size: 14px; } } /*********************** tables **************/ .easy-table{ font-size:1.1em; } .easy-table th{ background:#eee; font-family:'Poppins',serif; font-size:1.2em; } .wp-block-image img { max-width: 100% !important; height: auto !important; } #section-9a49a465-b633-421e-9c53-6e69cba377e1 .gutentor-single-item .gutentor-single-item-desc{ line-height: 1.8em!important; } .btn:focus-visible, .btn-primary:focus-visible, #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link:focus-visible{ outline: 2px solid #000; border: 2px solid #fff; } /***************** Graphs ***********************/ #tabs svg{ width:100% !important; } #tabs svg rect{ width:100% !important; } .grecaptcha-badge, .grecaptcha-logo{ display:none!important; } .age-gate-form{border:10px solid #fff;} .age-gate-form, .age-gate-form label, .age-gate-form h1, .age-gate-form h2, .age-gate-form p{font-Family:'Poppins', Arial; width:100%; text-align:center;} .age-gate-subheading{ font-size:1.8em; margin:15px 0;} .age-gate-form p{ font-size:1.4em; margin:0 0 10px;} .age-gate-submit-yes,.age-gate-submit-no{background: #fff;cursor:pointer;margin: 10px 20px;padding: 10px;min-width: 100px;font-size: 1.5em;font-family: Arial;text-transform: uppercase;border: none;color: #4bcfd3;} .age-gate-heading.age-gate-logo img{ display:block;margin:0 auto 20px;} .age-gate-form .age-gate-error-message{ color:#000;} /******************** ie8 ***********************/ .ie8 .slider_text{ height:150px;} .ie8 .slider_text_main{ position:absolute; left:0;} .ie8 .project_list li div{ background:#0076A9;} /******************** ie7 ***********************/ .ie7 #nav{ width:820px; z-index:99999;} .ie7 #header_main,.ie7 #header{z-index:99999;} .ie7.header_image_wrapper,.ie7 .header_image_wrapper2,.ie7 .header_image{ z-index:99; position:relative;} .ie7 nav ul#menu-fish ul { margin-left:-115px; z-index:999999; } .ie7 nav ul#menu-fish ul ul, .ie7 nav ul#menu-fish ul ul ul, .ie7 nav ul#menu-fish ul ul ul ul { margin:0 0 0 0; } .ie7 .project_list li div{ background:#0076A9;} .ie7 .child-home{ float:left;} .ie7 .child-texthome2{ float:left; width:880px;} .ie7 .child-home h4,.ie7 .child-home p{ float:left; width:280px; padding:0; margin-top:0;} .ie7 .slide-text2 .firsttitle{ line-height:2em;} .ie7 .slide-text2 .secondtitle{ line-height:1.2em;} .ie7 .slider img { bottom: 0; left: 0; right: 0; top: 0;} /***************************** Responsive design *******************/ /***************************** Larger Screens *******************/ /* 1.4's fix lowered this rule's threshold from 1300px to 768px to close a gap where the hero image overflowed uncropped between those two widths. 1.5 replaces the whole approach (see the object-fit:cover rule earlier in this file) with one that works at every width without a breakpoint at all, so this override is removed rather than adjusted again - confirmed live at 375/768/1200/1366px that nothing here is still needed. */ @media only all and (min-width: 1500px){ .header_image{ width:100%;} } @media only all and (max-width: 1220px) and (min-width: 1024px){ footer_bg, #footer_section { width: 98%; padding: 10px 1%;} } @media only all and (max-width: 1023px) and (min-width: 768px){ footer_bg, #footer_section { width: 98%; padding: 10px 1%;} #footer section.contact-info{width: 35%;} #footer section{ width: 30%;} #footer section.page-foot{width: 35%;margin-bottom: 50px;} #footer section.page-foot img{ width: 100%;} #footer_section{margin: 0px auto;} .contactsection .col-sm-6{width: 90%;} .maintext h2{font-size: 2.6em;} .slick-slide{height: 550px;} .contactsection{ width: 94%; padding: 0 3%;} .gutentor-section.gutentor-image-slider .gutentor-single-item-image-box{height: 500px;} } @media only all and (max-width: 767px){ .maintext,.maintextright{ width:100%;margin:0 auto 0; left:0;padding:0} .imagerighthome{ bottom:0; left:0; width:100%;} .imagelefthome{ display:none;} .col-sm-4{ margin-top:20px;} /* 1.15 FIX: the three feature cards (International Mission / Become a Roofbreaker / Fellowship Together) had width:32% at every size, which overrode Bootstrap's own stacking, so on phones they stayed three ~120px columns with clipped headings. Full width below 768px. The :first-child/:last-child selectors are repeated so this beats the base margin:0 rules for those two (same specificity, later). Kept in this end-of-file block deliberately: it must come after the base width:32% rule to win. */ .colouredareas .col-sm-4, .colouredareas .col-sm-4:first-child, .colouredareas .col-sm-4:last-child{ width: 100%; margin: 0 0 30px; } .maintext h2 {font-size: 1.6em;} .container-xxl.containerhome .maintext{padding: 50px 3% 40px;} .contactsection .maintext{padding: 30px 10px 30px; top:0;} .col-sm-6 img{ max-width:100%;} .navbar-nav{width: 100%;} .navbar.scrolled .navbar-toggler{ border:none;} .navbar.scrolled .navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(29,38,80)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");} .navbar-brand img{ height:60px;} .navbar.scrolled #navbarNav,#navbarNav.navbar-collapse{ background-color: rgba(255,255,255,0.9)!important;} #navbarNav.navbar-collapse .nav-link{color:#1d2650!important;} .navbar-expand-md .navbar-nav .active .nav-link{border-bottom: none;} /* 1.12 FIX: the outer banner section (.header_image_wrapper_main) was never included here, so on mobile it stayed 550px tall around a 250px banner - a 300px white gap under the photo, before the breadcrumb. Present since before 1.11 (confirmed in 1.10 too). */ .header_image_wrapper_main,.header_image_wrapper,.header_image {height: 250px;} .header_image_wrapper3,.portfimg { height: 300px; } .btn-primary{width: 320px !important; max-width:100% !important;} /* 1.2 FIX: same fixed-width overflow risk as the base rule above */ .main_content h3.has-x-large-font-size{font-size: 1.7em!important;} .section-gm8ddb63f{ padding:5% 0!important;} #section-d48ec263-a88c-44e9-8c81-8b7578c26149{padding: 0 3% 0!important;} #section-43862f46-9977-401b-aaaf-98c59b6e2e7e{ margin-top:0!important;} .contentportf h1{ font-size: 2em; line-height: 1.2em;} .portfimgright { margin-top: 10px;} .mobilenodisplay{ display: none;} .content-style{ padding: 0 7%; } .portf h2, .reviewport h2 {font-size: 2em;} .portf .text-left{ text-align: center;} .portf {margin-top: 0;margin-bottom: 0;} .fullportimg2{ margin-top: 20px;} .fullproftimg img{ height: 250px;} .textoverproft{font-size: 1.6em; padding: 0 10%;} /*footer*/ footer_bg, #footer_section { width: 98%; padding: 10px 1%;} #footer2{ width:100%;} footer .right{ width:100%; font-size:0.95em; padding:5px 0 30px; text-align:left} #viewing{ position:absolute; bottom:0;} #viewing ul li{ margin-left:0; margin-right:0;} #footer section.legal-info{ width:49%; maring:0 2% 0 0;} #footer section.contact-info{ width:49%; margin-top:0;} footer .left{ width:100%;} #footer h4{ font-size:1em;} #footer .email{font-size: 0.8em;padding: 0 0 0 30px;} #footer .tel,#footer .address{padding: 0 0 0 30px;} #footer section.page-foot{ width:100%; margin-top:20px; text-align:center;min-height: 40px; margin-bottom:20px;} } /* 1.16 FIX: footer on phones - the first three columns are col-6 (two across), which squeezed the address into a ~150px column and broke the email address mid-word. One column below 480px. */ @media only all and (max-width: 479px){ footer .row > .col-6{ width: 100%; } } @media only all and (max-width: 400px){ #footer section{padding: 0 2% 20px;min-height: 120px;} #footer section.legal-info{ width:100%; maring:00; text-align: left;} #footer section.contact-info{ width:100%; margin-top:0; text-align: left;} ul.legal li{ font-size: 0.95em; width: 50%; float: left;} #footer h3{ text-align: left;} #footer .email{font-size: 0.9em;padding: 0 0 0 23px;float: left; width: auto; margin:5px 0 5px 15px} #footer .tel{ float: left; width: auto; padding: 0 0 0 23px;} .navbar-brand img{ height: 50px;} } /* 1.17 FIX: WooCommerce category tiles on the Shop page, matched to the manually added Gutentor category block (measured live: 3 across with 30px gutters, image full width + 20px below, title Open Sans 24px/700 black, count Open Sans 16px/600 purple, 15px above/below each tile; one per row below 768px). Scoped to li.product-category so product grids are untouched; #content raises specificity above WooCommerce's own columns-4 / smallscreen rules. See functions.php (1.17). */ #content .woocommerce ul.products li.product.product-category{ float: left; clear: none; width: calc((100% - 60px) / 3); margin: 0 30px 0 0; padding: 15px 0; text-align: center; } #content .woocommerce ul.products li.product.product-category:nth-of-type(3n){ margin-right: 0; } #content .woocommerce ul.products li.product.product-category:nth-of-type(3n+1){ clear: left; } #content .woocommerce ul.products li.product.product-category a{ display: block; text-decoration: none; color: inherit; } #content .woocommerce ul.products li.product.product-category a img{ display: block; width: 100%; height: auto; margin: 0 0 20px; box-shadow: none; } #content .woocommerce ul.products li.product.product-category .woocommerce-loop-category__title{ font-family: "Open Sans", Poppins, sans-serif; font-size: 24px; font-weight: 700; line-height: 28.8px; color: #000; margin: 0 0 5px; padding: 0; text-align: center; } #content .woocommerce ul.products li.product.product-category .roof-cat-count{ display: block; font-family: "Open Sans", Poppins, sans-serif; font-size: 16px; font-weight: 600; line-height: 28.8px; color: #6C2A67; text-align: center; } #content .woocommerce ul.products li.product.product-category a:hover .woocommerce-loop-category__title{ text-decoration: underline; } #content .woocommerce ul.products li.product.product-category a:focus-visible{ outline: 3px solid #6C2A67; outline-offset: 4px; } @media only all and (max-width: 767px){ #content .woocommerce ul.products li.product.product-category{ float: none; width: 100%; margin: 0; } } @media print { * { background: transparent !important; color: #444 !important; text-shadow: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } a.item_image:after,.item h4 a:after,#navi2 a:after, #navi3 a:after,#tabsprodul li a:after, .child a:after{ content:""; } abbr:after { content: " (" attr(title) ")"; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } .content_image{ width:400px!important;} #out,#container,#content,#wrapper{ width:auto !important;} #images_main,#images,#navi2,.home_center,.home_left,.main-intro,#tabs .ui-tabs-panel{ width:100% !important;} .main-intro h2,.main-intro p{ text-align:left;} .home_tabs .more,.more,.mapframe, .child .more, header, footer, nav, aside, #featured, .contact, #cformsform, #crumb, #slideshow_main, #navi-header, .header_image, .child-row-home,#footer, .pre_header_main,.cform,.header_image_wrapper,.home_right,.preheadermain,#slideshowpages, #tabsprodul .ui-state-active,#tabsul,.tablepress caption, a.enquiry-button, a#main{ display:none!important;} .main-intro{ text-align:left!important; padding:0 !important; border:none !important;} .main-intro p,.main-intro h1{text-align:left!important;} .home_right,.home_center{ padding:0 !important; border:none !important;} #content h1{ border:none !important;} .item_image img{ width:250px !important;} .child_image{ width:250px!important; margin-right:15px!important;} .project_details{ width:100%!important;} .project_details p{ width:50%!important; float:left} script{ display:none;} } /* 1.8 FIX: Gutentor's Slick-based "Image Slider" block (e.g. the Church Partners slider on join-the-journey/become-a-church-partner/) ships with its arrows/dots outline suppressed by Slick's own bundled CSS - confirmed live: outline-style computed to "none" on both, which combined with the arrows never being keyboard-reachable before (see script.js) meant no one had ever actually seen these focused. Restored a high-contrast focus ring (a light outline plus a dark halo, so it stays visible over both light and dark slide photos) and styled the new pause/play button script.js adds next to these sliders. Scoped generically to every Slick slider on the site, not just this one page. */ /* 1.10 FIX: Clive found the v1.8/v1.9 focus ring on the prev/next arrows hard to make out - a 3px white outline sitting right against the arrow's own dark (rgba(0,0,0,0.55)-ish) background and a busy photo behind it didn't stand out enough. Confirmed live with a real keyboard Tab press (not a scripted .focus(), which doesn't reliably trigger :focus-visible - had to use an actual keypress to see what Clive was actually seeing): a thicker outline, pushed further out, with only a thin dark separation ring instead of a heavy 6px halo, plus a light fill behind the arrow itself, is dramatically more visible against both the dark button and light/dark photos alike. Left the dots' own focus ring as it was - Clive only flagged the arrows. */ .slick-prev:focus-visible, .slick-next:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.5); background-color: rgba(255,255,255,0.3); } .slick-dots li button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(0,0,0,0.6); } .gutentor-slider-pause-toggle{ position: absolute; right: 20px; bottom: 20px; z-index: 20; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } .gutentor-slider-pause-toggle:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(0,0,0,0.6); }