.wf-loading * { /* first things first, we need to hide everything, but bear in mind that this will only take effect once the loading script has taken effect. here we're hiding all content within the once it has the class "wf-loading" */ opacity: 0; } .wf-active *, .wf-inactive * { -webkit-transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out; transition: opacity .5s ease-out; } html { scroll-behavior: smooth; } /* resets */ *{ color:unset; background-color:unset; border-radius:0; padding:0; margin:0; border:unset; text-decoration: none; list-style: none; } *, ::after, ::before { box-sizing: border-box; } *:focus{ outline: unset!important; } body { background: var(--white); font-size: 18px; font-family: Montserrat, sans-serif; color: var(--primary-font); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-ligatures: none; letter-spacing: .5px; } .body.locked{ position: fixed; } img{ width:100%; height:auto; } /* Text styles */ h1,h2,h3,h4,h5,h6{ margin:0; /* color: var(--primary); */ font-weight: var(--bold-text); } h1{ font-size:2.5rem; font-weight: var(--bold-text); margin-bottom: 1rem; } h2{ font-size:1.5rem; margin-bottom:1.5rem; line-height: 2rem; font-weight: var(--bold-text); } h2.large{ font-size:2.25rem; letter-spacing:1.5px; color:var(--white); } h3{ font-size:1.5rem; margin-bottom:1.25rem; } h4{ font-size:1.25rem; margin-bottom:1rem; } h5{ font-size:1.1rem; margin-bottom:1rem; } p{ line-height: 1.5rem; margin-bottom:2rem; } p.small, p.small a{ font-size:0.8rem; } p.large{ font-size:1.5rem; line-height:2.5rem; letter-spacing:1.5px; color:var(--primary-font); } b, strong { font-weight: var(--bold-text); } ul{ margin-bottom:1rem; list-style-type: disc; list-style-position: inside; padding-left:20px; } li{ display: list-item; text-align: -webkit-match-parent; margin-bottom:0.5rem; line-height:1.5rem; } a{ text-decoration: none; color:var(--primary-font); font-size: 1rem; cursor: pointer; } .text-link{ background:linear-gradient(to bottom, var(--secondary) 0%,var(--secondary) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 4px 4px; color: var(--primary-font); text-decoration: none; transition: background-size .2s; } .text-link:hover{ background-size: 4px 50px; color:var(--secondary-font); } .inline-link { font-size: inherit; border-bottom: 2px solid; } /* custom links with colour slide in from left */ .link { color: var(--secondary-font); font-weight: var(--bold-text); font-size: 16px; padding-bottom: 10px; letter-spacing: 1px; position: relative; width: fit-content; display: table; border-bottom:1px solid var(--primary); } .link:before { position: absolute; content: ''; height: 3px; left: 0; right: 0; bottom: 0; background: var(--secondary); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease-out; } .link:hover:before { transform: scaleX(1); } .link:focus span, .link:hover span { width: 25px; } .link span { top: 8px; left: calc(100% + 10px); position: absolute; width: 18px; height: 2px; transition: width .25s ease .225s; background:var(--secondary); } .link span:before { background: var(--secondary); width: 100%; height: 2px; left: 0; top: 3px; } .link span:after { right: 0; width: 4px; height: 10px; bottom: 0; content:""; color: var(--secondary-font); } .link span:after, .link span:before { display: block; position: absolute; z-index: 1; } /* general link */ links{ font-size: 1.5rem; color: var(--primary-font); -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .links svg{ position: relative; margin-left: 10px; height: 20px; width: 20px; -webkit-transition: .3s transform ease-in-out; transition: .3s transform ease-in-out; fill: var(--primary); } .links:hover svg{ transform: translateX(10px); } /* buttons */ .button{ border-radius: var(--radius); padding: var(--narrow-padding); } .button.primary { background: var(--primary-colour); color: var(--primary-text-colour); } .button.secondary { background: var(--secondary-colour); color: var(--secondary-text-colour); } /* containers */ .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto } @media (min-width:576px) { .container { max-width: 575px } } @media (min-width:768px) { .container { max-width: 767px } } @media (min-width:992px) { .container { max-width: 991px } } @media (min-width:1300px) { .container { max-width: 1299px } } code{ background: var(--primary); line-height: 2.5rem; padding: 10px; background: var(--primary); word-wrap: break-word; box-decoration-break: clone; padding: .1rem .3rem .2rem; border-radius: .2rem; } .full-width{ width:100%; padding:0; } /* grid css */ .grid{ display: grid; position: relative; } .grid-margin{ margin-right: -15px; margin-left: -15px; } .grid-gap{ grid-gap:5%; } .grid-one, .grid-two-one, .grid-three-one, .grid-four-one{ grid-template-columns: 1fr; } .grid-eight-one{ grid-template-columns: 1fr; } .grid-col-span-1 { grid-column: auto/span 1; grid-row: auto/span 1; min-width: 0; min-height: 0; } .grid-col-span-2 { grid-column: auto/span 2; grid-row: auto/span 1; min-width: 0; min-height: 0; } .grid-col-span-2-1 { grid-column: auto/span 1; grid-row: auto/span 1; min-width: 0; min-height: 0; } .grid-col-span-3 { grid-column: auto/span 3; grid-row: auto/span 1; min-width: 0; min-height: 0; } .grid-indent{ grid-column-end: -1; grid-column-start: 2; } @media (min-width:768px){ .grid-col-span-2-1 { grid-column: auto/span 2; grid-row: auto/span 1; min-width: 0; min-height: 0; } .grid-two-one, .grid-four-one{ grid-template-columns: repeat(2, 1fr); } } @media (min-width:992px){ .grid-four-one{ grid-template-columns: repeat(4, 1fr); } .grid-three-one{ grid-template-columns: repeat(3, 1fr); } .grid-eight-one{ grid-template-columns: repeat(8, 1fr); } } @media (min-width:1300px){ .grid-three-one{ grid-gap:50px; } } /* Flex css */ .flex{ display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-column{ flex-direction: column; } .flex-two-one, .flex-three-one{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } @media (min-width:992px){ .flex-two-one{ -ms-flex: 0 0 49%; flex: 0 0 49%; max-width: 49%; } .flex-three-one{ -ms-flex: 0 0 32%; flex: 0 0 32%; max-width: 32%; } } /* Alignment */ .centered{ justify-content: center; align-items: center; align-self: center; justify-self: center; } .space-between{ justify-content: space-between; } /* spacing */ .padding-small{ padding:50px 0; } .l-r-padding-small{ padding:0 20px; } .l-r-margin{ margin-left:10px; margin-right:10px; } .hide-mobile{ display:none !important; } @media only screen and (min-width:768px) { .hide-mobile{ display:flex !important; } } .show-mobile{ display:block !important; } @media only screen and (min-width:768px) { .show-mobile{ display:none !important; } } .blog-header-grid { display: grid; gap: 1.5rem; width: 100%; margin: 0 auto; } /* Featured Card - Mobile First */ .featured-card { min-height: 66vh; width: 100%; position: relative; text-decoration: none; color: inherit; } .featured-card .card { height: 100%; width: 100%; position: relative; overflow: hidden; } .featured-card .card-image { width: 100%; height: 100%; object-fit: cover; position: absolute; } .featured-card .content-surround { position: relative; height: 100%; padding: 1.5rem; /* background: linear-gradient( to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100% ); */ color: var(--primary-text); display: flex; flex-direction: column; justify-content: flex-end; } /* Secondary Posts - Mobile First */ .secondary-posts { display: grid; gap: 1rem; } .secondary-post-item { padding: 1.5rem; background: var(--primary-colour); text-decoration: none; color: inherit; transition: transform 0.2s ease; border:var(--border); } /* Hover state for secondary posts */ @media (hover: hover) { .secondary-post-item:hover { transform: translateY(-4px); } } /* Regular Posts Grid - Mobile First */ .blog-posts-grid { margin-top: 2rem; display: grid; gap: 1.5rem; padding: 0 1rem; } .blog-post-card { background: var(--primary-colour); overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease; } /* Common Elements */ .category { margin-bottom: 1rem; } .pill { display: inline-block; padding: 0.25rem 0.75rem; margin-right: 0.5rem; margin-bottom: 0.5rem; background: rgba(255, 255, 255, 0.2); font-size: 0.875rem; color: inherit; text-decoration: none; } .card-title { font-size: 1.25rem; margin-bottom: 0.75rem; line-height: 1.4; } .featured-card .card-title{ flex:none; } /* Tablet Breakpoint */ @media (min-width: 768px) { .blog-posts-grid { grid-template-columns: repeat(2, 1fr); padding: 0 2rem; } } /* Desktop Breakpoint */ @media (min-width: 1024px) { /* Featured Section Layout */ .blog-header-grid { grid-template-columns: 66% 1fr; min-height: 80vh; } .featured-card { height: 100%; } .secondary-posts { height: 100%; grid-template-rows: repeat(3, 1fr); } /* Regular Posts Grid */ .blog-posts-grid { grid-template-columns: repeat(3, 1fr); padding: 0 3rem; } /* Typography Adjustments */ .featured-card .card-title { font-size: 2rem; } } /* Hover States */ @media (hover: hover) { .blog-post-card:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } } /* Spacing Adjustments */ .blog-header + .blog-posts-grid { margin-top: 4rem; margin-bottom: 4rem; } /* headers */ /* full height header */ header.full-height{ height:100vh; display: grid; align-items:center; justify-items: center; background:var(--header-colour); color:var(--header-text-colour); width: 100%; } .header-content { display: flex; flex-direction: column; }