/* Theme Name: WPT 2025 Author: Darren Goodall Version: 1.0 */ /*----------------------------------------------------------------------------------- = Table of Contents 1. = Fonts 2. = Body, Typography and some main Elements 4. = Header styling 5. = Navigation styling 6. = Footer styling 7. = Sidebar styling 8. = Home Page styling 9. = Works Page styling 10.= Schools Page styling 11.= News Page and News Detail page styling 12.= Diary Page styling 13.= Library Page styling 14.= Network Page styling 15.= Contact Page styling 16.= Meal Page styling /*-----------------------------------------------------------------------------------*/ /* 1. = Fonts /*-----------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------*/ /* 1. = variables /*-----------------------------------------------------------------------------------*/ :root { --green: #8ECF0C; --dark: #333333; --grey: #828282 } /*-----------------------------------------------------------------------------------*/ /* 2. = Body, Typography and some main Elements /*-----------------------------------------------------------------------------------*/ html {font-size:62.5%;} body {font-family:"filson soft", sans-serif; font-weight: 400; font-size:1.8em; line-height:1.6; font-style:normal; background-color:#fff; color:var(--grey); -webkit-font-smoothing: antialiased;} h1, h2, h3, h4, h5, h6 { margin-top:0rem; margin-bottom: 3rem; font-weight: 500; position: relative; color:var(--dark); } h1 { font-size: 3.5rem; line-height: 5.5rem; font-weight:400; } h2 { font-size: 2.8rem; line-height: 3.6rem; } h3 { font-size: 2.4rem; line-height: 3.1rem; } h4 { font-size: 1.8rem; line-height: 2.35rem; } h5 { font-size: 1.6rem; line-height: 1.5rem; } h6 { font-size: 1.6rem; line-height: 1.8rem; margin-bottom: 1rem; } h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {color:#EF003B;} p { margin-top: 0; font-size:1.6rem; line-height: 1.8;} ul {list-style:"> "; margin-bottom: 3rem;} li {font-size:1.6rem; margin-bottom: 10px;} /* Larger than phablet */ @media (min-width: 550px) { } /* Larger than tablet */ @media (min-width: 1000px) { } /* Larger than Desktop HD */ @media (min-width: 1200px) { p { margin-top: 0; font-size:2rem } li {font-size:1.8rem; margin-bottom: 10px;} h1 { font-size: 6.4rem; line-height: 5.8rem; } h2 { font-size: 4.8rem; line-height: 5.2rem; } h3 { font-size: 2.5rem; line-height: 3.1rem; } h4 { font-size: 2rem; line-height: 2.35rem; } h5 { font-size: 1.8rem; line-height: 1.5rem; } h6 { font-size: 1.6rem; line-height: 1.8rem; margin-bottom: 1rem; } } /* Larger than Desktop HD */ @media (min-width: 1400px) { } /*-----------------------------------------------------------------------------------*/ /* 2. = Styles /*-----------------------------------------------------------------------------------*/ .wp-block-group {width:94%;} .container {position: relative; max-width:1400px; width:94%; margin-left: auto; margin-right: auto; box-sizing: border-box; } .alignwide {max-width:1400px; width:94%; margin-left: auto; margin-right:auto;} .alignfull {max-width:unset;} .wp-block-group.has-background {padding:3rem; margin: 3rem auto;} main {margin-top:164px} .blocklink {position:absolute; top:0; left:0; width:100%; height:100%; z-index:9999; border: none;} .blocklink:hover {border:0;} .blockimage {background-size:cover; background-position: center; position:absolute; top:0; left:0; width:100%; height:100%; z-index: 999;} .rounded {border-radius:15px; overflow: hidden;} .shadow {box-shadow:0 3px 10px 0 rgba(0,0,0,0.15);} .narrow {width:94%; margin-left: auto; margin-right: auto;} .content-wrapper {padding:5%;} .flex {display: flex; flex-flow: row wrap; align-items:stretch; justify-content:left; gap:2%;} .alignfull {max-width:none; width:100%;} /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) { } /* Larger than tablet */ @media (min-width: 750px) { } /* Larger than desktop */ @media (min-width: 1000px) { .narrow {width:70%;} } /* Larger than Desktop HD */ @media (min-width: 1200px) { } /* Larger than Desktop HD */ @media (min-width: 1400px) { .container {width:100%;} } /*-----------------------------------------------------------------------------------*/ /* 3. = Header /*-----------------------------------------------------------------------------------*/ header#site-header {height:130px; position:fixed; top:0; left:0; width:100%; background-color:#fff; z-index: 9;} .site-menu-wrapper {justify-content: space-between; align-items: center; align-content: center; padding:0 20px; height:100%;} .site-menu-wrapper .brand {flex:0 0; height:110px;} .site-menu-wrapper .brand img {height:100%; width:auto;} .site-menu-wrapper .menu {flex:1 1; text-align: right;} .hero-notes {min-height: 400px; background-image: url("assets/images/interface/notes-bg.jpg"); background-position:right bottom; background-size:70%; background-repeat:no-repeat;} .hero-notes .wp-block-columns {min-height: 400px;} /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) {} /* Larger than tablet */ @media (min-width: 750px) { .hero-notes {background-position:right center; background-size:contain;} } /* Larger than desktop */ @media (min-width: 1000px) { #site-header .tel-numbers {display:flex;} } /* Larger than Desktop HD */ @media (min-width: 1200px) { } /* Larger than Desktop HD */ @media (min-width: 1500px) { } /*-----------------------------------------------------------------------------------*/ /* 4. = Footer /*-----------------------------------------------------------------------------------*/ .flex .six {flex:1 0;} .txt-lrg {font-size:} footer .cta {padding: 3vh 0;} footer .main-footer {border-top:1px solid #707070; padding: 1vh 0;} /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) {} /* Larger than tablet */ @media (min-width: 750px) { } /* Larger than desktop */ @media (min-width: 1000px) { } /* Larger than Desktop HD */ @media (min-width: 1200px) { } /*-----------------------------------------------------------------------------------*/ /* 4. = Blocks /*-----------------------------------------------------------------------------------*/ .wp-block-group {margin:3rem auto; position:relative;} .wp-block-group.has-background, .wp-block-group.has-background h2 {color:#fff;} .wp-block-group .wp-block-group {margin:0 auto;} .wp-block-columns.reverse {flex-flow:column-reverse;} .has-background {padding: 3rem;} .no-gap {gap:0;} .wp-block-column.has-background .wp-block-group {margin: 5rem auto;} .wp-block-cover, .wp-block-cover-image {height:100%; padding: 0;} .wp-block-cover-image.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container, .wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {width:100%;} .wp-block-image {width:100%;} blockquote.wp-block-quote {border:none; padding: 0 0 0px 0; margin: 0 0 1rem 0;} blockquote, blockquote p {position:relative; font-size: 1.6rem; border:none; margin: 2rem auto;} blockquote p:last-child, blockquote.wp-block-quote p:last-child {margin:0; padding: 0;} blockquote.wp-block-quote::after {content:""; display:block; width:231px; height:56px; position:absolute; bottom:-80px; left:50%; transform: translateX(-50%); background-image: url("assets/images/interface/post-quote.png"); background-size:contain; background-position: center;} .wp-block-separator {border-bottom:none; border-right:1px solid var(--gold); height:70px; width: 0px !important;} /* Custom block classes */ .work-tiles {display:flex; justify-content: space-between; flex-flow:row wrap; align-items: flex-start; align-content: flex-start;} .work-tile {flex:0 0 49%; margin-bottom: 2%;} .breadcrumbs {text-transform: uppercase; font-size: 1.4rem; font-weight:200;} .breadcrumbs a {color:var(--purple); } .wp-block-columns.logos-block {margin:0; gap:2%; flex-flow:row wrap !important; align-items: center; align-content: center;} .wp-block-columns.logos-block .wp-block-column {flex-basis: 48% !important;} .logos-block img {max-height: 150px; height: auto; width:auto;} .logos-block figure {margin:0;} .wp-block-image img {width:100%;} .wp-block-columns.logos-footer {flex-flow:row wrap !important; gap:3%;} .wp-block-columns.logos-footer .wp-block-column {flex:0 0 27%; margin-bottom: 20px; } .logos-footer img {max-height: 120px; height: auto; width:auto;} blockquote.wp-block-quote.logos-testimonial {border-left: 2px solid var(--purple); padding:0 0 0 1.5rem; text-align: left; margin: 0;} blockquote.wp-block-quote.logos-testimonial p {font-size: 2rem; text-align: left; margin: 0 0 10px 0;} blockquote.wp-block-quote.logos-testimonial cite {font-size: 1.5rem; text-align: left;} .wp-block-group.watermark {position:absolute; top:0; left:0; width:100%; height:100%; background-color:#efefef; background-image:url("assets/images/interface/jm-water-marque.svg"); background-repeat: no-repeat; background-position:right; } .wp-block-group.testimonial-block {padding:10rem 0; background-image:url("assets/images/interface/jm-watermark.png"); background-position:100%; background-repeat: no-repeat;} .social-logos .wp-block-image {display: inline-block; width:auto; max-width: 70px;} .wp-block-image.no-image-margin figure {margin: 0 auto;} .talk-to-us {background-color:#ededed; padding: 6rem;} .how-we-can-help {background-color:var(--purple); color:#fff; padding: 6rem;} .wp-block-column h2::before {content:""; display:block; width:100px; height:3px; background-color:var(--purple); margin:0 0 20px 0;} .wp-block-column h2.has-text-align-center::before {position:relative; left:50%; transform:translateX(-50%); } :where(.wp-block-columns.is-layout-flex) {gap:7rem;} .wp-block-embed {margin: 3rem 0;} .wp-block-embed.wp-embed-aspect-16-9 {position:relative;} .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {position:relative; aspect-ratio: 16 / 9;} .wp-block-embed.wp-embed-aspect-16-9 iframe {width:100%; height:100%;} .wp-block-cover.fix-height {height:40%; margin-bottom: 2rem;} /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) {} /* Larger than tablet */ @media (min-width: 750px) { .wp-block-columns.reverse {flex-flow:row;} .wp-block-group {margin:6rem auto;} .has-background {padding: 6rem;} .wp-block-image figure, .wp-block-image .alignright { text-align: right;} .wp-block-image figure, .wp-block-image .alignleft { text-align: left;} .wp-block-group.testimonial-block {padding:10rem 0; background-size:60%; background-position:-30%;} .social-logos {text-align:right;} .wp-block-columns.logos-block .wp-block-column {flex-basis: 23% !important;} blockquote.wp-block-quote {margin: 0 20% 3rem 20%;} blockquote, blockquote p { font-size: 2rem;} } /* Larger than desktop */ @media (min-width: 1000px) { .work-tile {flex:0 0 32%;} .wp-block-columns.logos-footer {flex-flow:row nowrap !important; gap:2%;} .wp-block-columns.logos-footer .wp-block-column {flex:1 1 auto !important; margin-bottom: 20px; } } /* Larger than Desktop HD */ @media (min-width: 1200px) { blockquote, blockquote p {font-size:2.4rem;} .wp-block-group.testimonial-block {padding:10vh 0;} .wp-block-embed {margin: 6rem 0;} } /*-----------------------------------------------------------------------------------*/ /* 4. = Events /*-----------------------------------------------------------------------------------*/ .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-banner .wpem-event-banner-img {height:380px;} .wpem-event-listings-header .wpem-event-listing-header-title .wpem-heading-text {display:none;} /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) {} /* Larger than tablet */ @media (min-width: 750px) { } /* Larger than desktop */ @media (min-width: 1000px) { } /* Larger than Desktop HD */ @media (min-width: 1200px) { } /*-----------------------------------------------------------------------------------*/ /* 4. = Forms /*-----------------------------------------------------------------------------------*/ /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .button, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-button > a.mega-menu-link, .wp-block-button a, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; background-color:var(--green);; border: 2px solid var(--green); height: 44px; padding: 0 25px; color: #fff; text-align: center; font-size:18px; font-weight: 400; line-height: 40px; text-transform: none; text-decoration: none; white-space: nowrap; border-radius: 5px; cursor: pointer; box-sizing: border-box; } .button:hover, .mega-button a:hover, .wp-block-button a:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: var(--green); border-color: var(--green); background-color:#fff; outline: 0; } .wp-block-button.is-style-outline a {border-color:#fff; background:none;} .wp-block-button.is-style-outline a:hover {border-color:#fff; background:#fff;;} /* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */ form.on-page-form {width:80%; margin: 0 auto;} form.on-page-form p {flex:1 1 100%;} input[type="email"],input[type="date"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea, select { position:relative; color:#222; font-size:1.6rem; font-weight:400; padding: 15px 20px; /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff !important; border:2px solid var(--yellow); width:100%;; border-radius: 5px; box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1); box-sizing: border-box; margin: 0 0 20px 0; } select { padding: 11px 15px;} textarea {border-radius:0;} input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }/* Removes awkward default styles on some inputs for iOS */ textarea { min-height: 65px; padding-top: 6px; padding-bottom: 6px; } input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus { outline: 0; } label,legend { display: block; margin-bottom: 1rem; font-weight: 400; text-transform: uppercase; font-size:1.6rem;} fieldset { padding: 0; border-width: 0; } input[type="checkbox"], input[type="radio"] { display: inline; } label > .label-body { display: inline-block; margin-left: .5rem; font-weight: 200; } select{-webkit-appearance: none; -moz-appearence: none; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #ccc; } ::-moz-placeholder { /* Firefox 19+ */ color: #ccc; } :-ms-input-placeholder { /* IE 10+ */ color: #ccc; } :-moz-placeholder { /* Firefox 18- */ color: #ccc; } .feature-form {} .swpm-login-widget-form {text-align: center;} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) { } /* Larger than tablet */ @media (min-width: 750px) { form.on-page-form { width:100%;} form.on-page-form p {flex:1 1 30%;} input[type="email"],input[type="date"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea, select {font-size: 1.8rem;} } /* Larger than desktop */ @media (min-width: 1000px) { input[type="email"],input[type="date"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea, select {font-size: 2rem;} } /* Larger than Desktop HD */ @media (min-width: 1200px) { } /* Larger than Desktop HD */ @media (min-width: 1500px) { } /*-----------------------------------------------------------------------------------*/ /* 4. = Content Page /*-----------------------------------------------------------------------------------*/ /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) { } /* Larger than tablet */ @media (min-width: 750px) { } /* Larger than desktop */ @media (min-width: 1000px) { } /* Larger than Desktop HD */ @media (min-width: 1200px) { } /* Larger than Desktop HD */ @media (min-width: 1500px) { } /*-----------------------------------------------------------------------------------*/ /* 4. = Home Page /*-----------------------------------------------------------------------------------*/ /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) { } /* Larger than tablet */ @media (min-width: 750px) { } /* Larger than desktop */ @media (min-width: 1000px) { } /* Larger than Desktop HD */ @media (min-width: 1400px) { } /*-----------------------------------------------------------------------------------*/ /* 4. = Profile single /*-----------------------------------------------------------------------------------*/ /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) { } /* Larger than tablet */ @media (min-width: 750px) { } /* Larger than desktop */ @media (min-width: 1000px) { } /* Larger than Desktop HD */ @media (min-width: 1500px) { } /*-----------------------------------------------------------------------------------*/ /* 4. = News /*-----------------------------------------------------------------------------------*/ /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) { } /* Larger than tablet */ @media (min-width: 750px) { } /* Larger than desktop */ @media (min-width: 1000px) { } /* Larger than Desktop HD */ @media (min-width: 1200px) { } /*-----------------------------------------------------------------------------------*/ /* 4. = location pages /*-----------------------------------------------------------------------------------*/