/* VARS ----------------------------------------------- */ :root { /* colours */ --colour-black: #000; --colour-white: #fff; --colour-dark-grey: #0d0c0e; --colour-dark-blue: #223173; /* fonts, add font face css in next section */ --body-font: 'Open Sans', sans-serif; --headline-font: 'Open Sans', sans-serif; --fontawesome: fontawesome, "Font Awesome 6 Free"; --fontSize: 1.8rem; /* default font size for P */ /* sizes */ --theWidth: 1360px; /* width of widest content, also edit responsive section */ --gridGap: 0.5vw; /* for grid gaps */ --marginVert: 2vw; /* for top/bot padding */ --marginHoriz: 2vw; /* for left/right padding */ --marginVertHalf: calc(var(--marginVert) / 2); --marginHorizHalf: calc(var(--marginHoriz) / 2); --marginVertXL: calc(var(--marginVert) * 2); --marginHorizXL: calc(var(--marginHoriz) * 2); } /* FONTS FOR THIS SITE -------------------------------- */ @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('../fonts/open-sans/open-sans-v35-latin-300.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/open-sans/open-sans-v35-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 500; src: url('../fonts/open-sans/open-sans-v35-latin-500.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../fonts/open-sans/open-sans-v35-latin-600.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../fonts/open-sans/open-sans-v35-latin-700.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('../fonts/open-sans/open-sans-v35-latin-800.woff2') format('woff2'); } /* COLOURS -------------------------------------------- */ .c-black { color: var(--colour-black); } .c-white {color: var(--colour-white); } .c-dark-grey {color: var(--colour-dark-grey); } .c-dark-blue {color: var(--colour-dark-blue); } .bg-black, .bull-black li:before { background-color: var(--colour-black); } .bg-white, .bull-white li:before {background-color: var(--colour-white); } .bg-dark-grey {background-color: var(--colour-dark-grey); } .bg-dark-blue {background-color: var(--colour-dark-blue); } } /* FIXES ---------------------------------------------- */ header, .wide-block:after, .clearfix:after { content: ""; display: table; clear: both; } /* Correct 'block' display not defined in IE Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /* Correct 'inline-block' display not defined in IE Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /* BASIC --------------------------------------------- */ html, body { height: 100%; } body { min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; -webkit-text-size-adjust: none; } html { font-size: 62.5%; color: var(--colour-black); } * { margin: 0px; padding: 0px; } /* Default Body Font and Text Colour */ html, select, input { font-weight: 400; font-family: var(--body-font); } body, select, input { font-size: var(--fontSize); } a img { border: none; } a { outline: none; } img { display: block; } body { padding: var(--marginVertHalf); box-sizing: border-box; color: var(--colour-dark-grey); background-color: var(--colour-white); display: flex; flex-flow: column; height: 100vh; width: 100vw; overflow: hidden; } /* HEADER --------------------------------------------- */ header { flex: 0 0 auto; margin: 0 0 var(--marginVertHalf); display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } header img { width: 100px; height: auto; margin-right: var(--marginVertXL); } /* MAIN MENU ------------------------------------------ */ /* FOOTER --------------------------------------------- */ footer { flex: 0 0 auto; display: flex; justify-content: center; margin: var(--marginVertHalf) 0 0; } /* TEXT + LINKS ---------------------------------------- */ /* headings on single pages: h1 - main headline on each page (home h1 is the masthead heading) h2 - main sub headings h3 - secondary sub-headings h4 - smaller sub headings like P but bigger */ h1, h2, h3, h4, h5, h6 { font-family: var(--headline-font); font-weight: 700; line-height: 120%; -webkit-text-size-adjust: none; color: var(--default-heading-colour); } h1 { font-size: 2.0vw; margin: 0; letter-spacing: 0.05vw; } p, li, th, td, label, address, cite, select { line-height: 150%; margin-bottom: calc(var(--marginVert) * 0.75); } strong { font-weight: 600; } b { font-weight: 600; } p.bullet { padding-left: 22px; margin-left: 8px; position: relative; } .not-mobile { } .not-desktop { display: none; } /* links*/ a { color: var(--colour-link); text-decoration: none; } main a:not(.button) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25rem; font-weight: 600; } a:hover { color: var(--colour-link-hover); } a img { border: none; } .group-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* JS will set the parent to position relative with class .pos-rel This also makes the hover text to accent-colour */ /* LISTS --------------------------------------- */ ul { list-style-type: disc; } ul, ol { padding-bottom: var(--marginVert); } li { padding-left: 5px; margin-left: 25px; margin-bottom: 3px; } ul li:last-child{ margin-bottom: 0; } ul ul { padding-top: 0; } ul.bullet { list-style: none; } .bullet li { list-style: none; padding-left: 22px; margin-left: 0; position: relative; } .bullet li:before, p.bullet:before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; display: block; background: var(--colour-highlight-dk); } ul li ul { padding-bottom: 0; } /* IMAGES AND BACKGROUNDS ----------------------------- */ /* CONTAINERS + SPACING ------------------------------- */ main { width: 100%; flex: 1 0 auto; } /* CAROUSELS ----------------------------------------- */ .swiper { margin: 0 auto 0; position: relative; overflow: hidden; padding: 0; z-index: 1; width: 100%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } .notice { position: absolute; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; visibility: hidden; } .swiper-initialized .swiper-wrapper { visibility: visible; } .swiper-slide { width: 33%; height: auto; position: relative; flex-shrink: 0; justify-content: center; display: flex; flex-flow: row wrap; } .swiper-slide a { position: absolute; bottom: 0; right: 0; width: 50vw; height: 100px; } .swiper-slide img { width: 100%; height: 100%; margin: 0; max-height: calc(100vh - (var(--marginVert)*2) - 81px); object-fit: contain; } .swiper-slide img.actual-size { width:auto; height: auto; } .swiper-buttons { display: flex; flex-flow: row nowrap; gap: 20px; justify-content: center; margin: 20px 0 0; } .swiper-buttons div { width: 33px; height: 33px; cursor: pointer; background-size: cover; } .arrow { width: 20px; height: 30px; cursor: pointer; } .arrow.hidden { opacity: 0.25; } #swiper-pagination { margin: 0 var(--marginHoriz); } .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: var(--gridGap); max-height: calc(100vh - (var(--marginVert)*2) - 81px); aspect-ratio: 16 / 9; overflow: hidden; } .grid > img { background: #aaa; object-fit: cover; aspect-ratio: 16 / 9; }