/*!
Theme Name: GOC23
Theme URI: http://underscores.me/
Author: KCSweb
Author URI: http://kcsweb.co.uk
Description: GOC 2023 Refresh
Version: 202610251540
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: goc23
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
GOC23 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
- Normalize
- Box sizing
# Base
- Typography
- Elements
- Links
- Forms
## Layouts
# Components
- Navigation
- Posts and pages
- Comments
- Widgets
- Media
- Captions
- Galleries
# plugins
- Jetpack infinite scroll
# Utilities
- Accessibility
- Alignments
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
:root {
--colour-red: #EA2226;
--colour-orange: #F48A2B;
--colour-yellow: #F9EC39;
--colour-green: #1D7F3E;
--colour-blue: #2E61AB;
--colour-purple: #6E2B8A;
--colour-white: #fff;
--colour-off-white: #F5F5F5;
--colour-light-grey: #909090;
--colour-dark-grey: #404142;
--colour-font: var(--colour-dark-grey);
--colour-font-light: var(--colour-light-grey);
--icon-rainbow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAANCAYAAADfedYNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACeSURBVHgB7dYxDgFhFIXRN5OZgoJFSMQy2IpGb1sWobcFhYZEtFrxs4iXad45S7i5xde9VutHkGZ+GIM8434RTOd4HuN0HYIcy+cuZu9NkGN7uQV5+gAAyhEAAFCQAACAggQAABQkAACgIAEAAAUJAAAoSAAAQEECAAAKEgAAUJAAAICChtbiHqT5tiCVQaf0+c/dmTxP6104UTNmqh9vMBb7cJx38wAAAABJRU5ErkJggg==');
--icon-hamburger: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAYAAABXuSs3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEBSURBVHgB7dcxisJAGAXglwRDjrHlstu4N3CPsDew3GbBbVwWGzvBKpDGTo+QG+gNTKFi5xwhlWgiGUchakQsRPFX3leEvL8ahh8eAxAREd2BdTz4fm29QKDO9F8d5sLBf97bfTOoQCANDIJx/TPPu4PX3trlzMIQgtk6/fAnjWj7v5u6JWW+CnIpuKnKQ2FVamWz34lTgUTuPPSjZgwioptg5d+athAGo/pXnveVb246c5wZBDtd+Z63aSUFuc5XfpbYVQijLTtOS6uwExX3nIjoeh6i8r3FMvZV8fVzXPldM6hCIA3tB+O/3zw/TeVLfow+XuVvJG7WY+UTERFdag2Z5GLxzQ7FdQAAAABJRU5ErkJggg==');
--icon-user: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAPTSURBVHgB7Zm/bxNJFMe/b9bO6TpfcfX5OhTuhFNQ40j0hL8A0iGUgCkAAUWcKkooMCRCdJi/gNAj4bQ0GIlfHZuaxhUg2zuPN1bWmUR24l3PWBTzqWZG4x1/9817894sEAgEAoFAIBAIBAITQJgRK2c2qopoCUpdkG7JjDEQk9bvNfPuzpd7LcwA74KNUIqiNVmoetI8Ed/qJcnysy/3YngkgkdW/nu4JlZtitjyaXPNnEip2vm/L+Ltt9d78IQ3Cw/EMtePDDL2mGg3UhSDuZMwKgS+iWMvhHX/1vbn+w14wIvggb9G0RtrKBZLLzc+3G6Nmr86v3WVCI9w4NuGPvcWnn560IZjFDyglHpudeNuMVkcJ9aw/elOUxWTBWl20rGIio/g47/BMSv/by6BqJz2jdhn7dMDUUPmMHg97ZsgZ3YKHONcsOpjKW1L5G1OIjZl++Nd47f7w2cpWoJj3G9pRefSJmt+hawwdq1eGY7x4cN/pY0C9WNkRP6QFajUOTjGS9BK+alVB78ZXgUXSFWQEQ1Yv+F9OMaDYG4NH05cRWb4ktX+/c9hTao57JC6cu3MRnnS367Ob1y1jzSleReO8ZJp3Ti79RWHEbatit8XG+36if5ckxejlXpjCY6ffLzzLxzjxYcZZFumort/vjvJ0ibB0FH0zrYuOHkBDzi18PX5rUokOfG4UpAZTSDZY414sHhkghpdGls6MtpdnVx2WTI6E7x6drNGoKP5L1FHVJYwHR2teXnn810n/uxkS5tS8LhYk1Z2C/0FseqydOMJHmMqqkUpIsRv2d7OJUkxX67Mb67BAVNbeETdO7IUHJSAkDybBufsPwfD+9DcUpFqjpx/rGR0USdPJXjENo4nrY4moVaRyN0b1NXldGzaOjm34MExYiLroQWcih2uc1w0c6zmfiycdsyNI7cPS4JRRypWgpMPsQZTJ2txkeGAHF26+0cNOcklWPy2KnnjlbTPrNd9iE3ZMf5NeDwcoOhmrVLPFf1zCSaGHTHjg8LdK6pQrOPwCqiU18qZBRvflZvGatqXY2cdM6DRvtWRN33EyshBZsGJOpIVxeYCDjNCFebsnVTKc+eVWTAhsu+sWpghxsqSp7fSfp47r+w+TMOkId+d1dRoe80yMjJVakk5FpwW0vaNCGWO1AVkhcSqTINFSdGaFO2dtPrxjvnySNZxCGoiI5kFm8Chez0TIc3bLRFFz8nrJ7mxxL25pIWMZN7SJnD0GYvAjKw6mtxpbP5c2uS4XZLDP/vN5BR0oLitCj8aeXPpQCAQCAQCgUAgEJiIX2escPoUmoSEAAAAAElFTkSuQmCC');
--icon-cross: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFWSURBVHgBvdiNbcIwEAVgZwNGyAiMkFE6AhuUDTpCu0FHoBvQDY4NYIPHBWxkRUD8c++eZCHA1n2KlOTsEDQAJh0H3CM6vnRsglO01kdW/zh/z/+c8DxHD6TW+HxRf5cmHPA6VOQb3JzzrTbWQ0Gu4FKmEKWuyELcA7gvnGyCrMBJWrCJxenIGpyOMV9IRzbjPJDdOCbSDMdAmuMskTScBZKO60G64RqRJW8lO1wj0hdnjBQKzggpVFwnUlxwC6RUALfBMyh/lKS4bB9acX7IDhwfaYDjIQ1x9kjUvVu3cNo+tODGuMZnj4OOroSOhEHLREPCsJ8zR4LQbJohQeyEu5FwaNObkbgfHlJxjcjftKhkgcCon6tEjiXngwLjZrMCOa2dsApInXAh8nYFd964QuR3PnHvjVsgfxb1/xDv4iGfqB/z3uEyDMN/cE68IPM4af1T+v0KMx1iEkZWNVEAAAAASUVORK5CYII=');
--icon-link: url('data:image/svg+xml,');
--icon-instagram: url('data:image/svg+xml,');
--icon-facebook: url('data:image/svg+xml,');
--icon-twitter: url('data:image/svg+xml,');
--icon-mastodon: url('data:image/svg+xml,');
--icon-scroll: url('data:image/svg+xml,');
--icon-cancel: url('data:image/svg+xml,');
--icon-edit: url('data:image/svg+xml,');
--icon-location: url('data:image/svg+xml,');
--icon-search: url('data:image/svg+xml,');
--icon-print: url('data:image/svg+xml, ');
--icon-cart: url('data:image/svg+xml, ');
--group-icon: var(--icon-link);
--font-size-1: 1rem;
/* reduced sizes following feedback */
--font-size-125: clamp(0.84rem, 0.80791rem + 0.151vw, 0.94rem);
--font-size-15625: clamp(1.03rem, 0.985rem + 0.211vw, 1.17rem);
--font-size-1625: clamp(1.07rem, 1.022rem + 0.226vw, 1.22rem);
--font-size-21875: clamp(1.14rem, 0.98rem + 0.755vw, 1.64rem);
--font-size-heading: clamp(1.31rem, 0.903em + 1.971vw, 2.58rem);
--font-size-button: clamp(0.94rem, 0.821rem + 0.558vw, 1.31rem);
--font-small: var(--font-size-125);
--font-standard: var(--font-size-15625);
--font-medium: var(--font-size-1625);
--font-large: var(--font-size-21875);
--border-radius: 1.56rem;
--ls-regular: 1.2em;
--ls-large: 2em;
}
*::before, *::after {
box-sizing: border-box;
}
html {
font-family: Inter, sans-serif;
font-weight: 400;
line-height: 1.15;
color: var(--colour-font-light);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: #fff;
}
main {
display: block;
}
h1 {
font-size: var(--font-size-heading);
font-weight: 700;
margin: 0.67em 0;
color: var(--colour-font);
}
hr {
overflow: visible;
box-sizing: content-box;
height: 1px;
margin-bottom: 1.5em;
border: 0;
background-color: #ccc;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: "Courier 10 Pitch", courier, monospace;
font-size: 1em;
line-height: 1.6;
overflow: auto;
max-width: 100%;
margin-bottom: 1.6em;
padding: 1.6em;
background: #eee;
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
&:any-link {
word-wrap: anywhere;
color: inherit;
}
&:focus {
outline: thin dotted;
}
&:hover,
&:active {
outline: 0;
}
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
text-decoration: none;
border-bottom: none;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
display: table;
box-sizing: border-box;
max-width: 100%;
padding: 0;
white-space: normal;
color: inherit;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
outline-offset: -2px;
-webkit-appearance: textfield;
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
&::-webkit-search-decoration {
-webkit-appearance: none;
}
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
.acf-required {
color: var(--colour-red);
}
.show-if-value {
display: none;
}
.hide-if-value {
display: block;
}
.has-value {
.show-if-value {
display: block;
}
.hide-if-value {
display: none;
}
}
.acf-fields.-border {
border: inherit;
background: inherit;
}
.acf-label label {
font-size: var(--font-size-21875);
font-weight: 700;
line-height: 2.8125rem;
color: var(--colour-dark-grey);
}
p.form-row label,
.acf-label p {
font-size: var(--font-size-125);
line-height: 1.25em;
color: var(--colour-font);
}
.acf-checkbox-list {
& ul {
list-style: none;
}
& li {
font-size: 1.375rem;
line-height: var(--font-size-21875);
color: var(--colour-green);
}
}
.subscription .info,
p.form-row,
.acf-field:not(.acf-field-message, .acf-field-acfe-button) {
margin: 0.5rem;
padding: 0.5rem 1.12rem;
border-radius: 0.9375rem;
background: var(--colour-off-white);
}
p.form-row {
display: flex;
flex-flow: column;
margin: 0;
}
.acf-input-prepend {
border: none;
}
.acf-field-textarea {
flex: 1 1 auto;
& textarea {
height: 4em;
}
}
.acf-field-text {
.acf-input {
position: unset;
display: flex;
}
.acf-input-wrap {
flex: 1 1 auto;
}
}
.acf-fields > .acf-field {
border: none;
}
.acf-field-image .acf-input,
.acf-field-gallery .acf-input {
min-height: 19.6rem;
background: var(--colour-off-white);
}
p.form-row, .acf-field .acf-label {
& label {
font-size: 1rem;
font-weight: 500;
line-height: 1.625em;
margin: 0;
padding: 0;
text-transform: uppercase;
color: var(--colour-dark-grey);
}
}
p.form-row, .acf-field {
input:not([type=checkbox]),
select,
.select2-selection--single,
textarea,
.select2-search__field,
.select2-selection--single,
.select2-selection--multiple {
font-size: var(--font-size-125);
width: 100%;
height: 100%;
color: var(--colour-dark-grey);
border: none;
background: var(--colour-white);
}
}
.acf-field-edit-event-title {
flex: 1 1 auto;
}
.acf-field-group > .acf-fields {
display: flex;
flex-flow: row wrap;
}
.acf-switch {
display: flex;
gap: 1rem;
}
.acf-switch-slider {
display: none;
}
.acf-switch-input {
display: none;
+ .acf-switch {
width: max-content;
height: unset;
padding: 0.5rem;
border: 1px solid var(--colour-light-grey);
border-radius: 0.2rem;
background: unset;
& span {
font-size: 1.375rem;
line-height: 1.289em;
min-width: 5rem;
padding: 0 0.5rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-align: center;
color: var(--colour-white);
background-color: var(--colour-light-grey);
}
}
&:not(:checked) + .acf-switch .acf-switch-off {
background-color: var(--colour-red);
}
&:checked + .acf-switch .acf-switch-on {
background-color: var(--colour-green);
}
}
.acf-notice {
&.-error {
border: 1px solid var(--colour-red);
background-color: transparent;
& p {
font-size: 0.9rem;
font-weight: 700;
color: var(--colour-red);
}
}
}
form {
> .acf-notice {
position: relative;
margin-top: 1rem;
padding: 2rem;
border: 1px solid var(--colour-red);
border-radius: 0.918rem;
}
&.login {
display: flex;
flex-flow: column;
max-width: 52.12rem;
margin: auto;
padding: 3rem;
border: 1px solid var(--colour-light-grey);
border-radius: 1.5625rem;
box-shadow: 1px 4px 10px 1px var(--colour-light-grey);
gap: 1.4rem;
.form-row {
display: flex;
flex-flow: column;
width: 100%;
margin: 0;
padding: 0.5rem 1.12rem;
border-radius: 0.54rem;
background: var(--colour-off-white);
}
.submit, .remember {
margin: 0;
text-align: center;
background: none;
}
& label {
font-size: 1rem;
font-weight: 500;
line-height: 1.625em;
text-transform: uppercase;
color: var(--colour-dark-grey);
}
& input[type="text"], & input[type="password"] {
border: none;
background: transparent;
}
& h1 {
color: var(--colour-purple);
}
.remember label {
font-size: var(--font-size-125);
text-transform: capitalize;
color: var(--colour-font);
}
#wfls-prompt-overlay {
display: grid;
border-radius: inherit;
place-content: center;
}
#wfls-prompt-wrapper {
display: grid;
align-content: center;
& p {
margin: 0;
}
& input[type=text] {
width: 100%;
padding: 0.5rem 0.2rem;
background-color: var(--colour-off-white);
}
}
}
}
.acf-gallery {
position: relative;
display: flex;
border: none;
background-color: transparent;
}
.acf-gallery-side {
overflow: hidden;
width: 0;
}
.acf-gallery-main {
display: flex;
flex: 1 1 auto;
flex-flow: column;
}
.acf-gallery-toolbar ul {
display: flex;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 1rem 0;
list-style: none;
}
.acf-gallery-attachments {
display: flex;
flex-flow: row wrap;
gap: 1rem;
&.ui-sortable {
flex: 1 1 auto;
}
}
.acf-gallery-attachment img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.image-wrap,
.acf-google-map .title {
position: relative;
}
.acf-field-google-map {
.canvas {
min-height: 32rem;
}
.acf-input {
height: 100%;
}
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.5;
color: var(--colour-font);
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
}
h2 {
font-size: var(--font-size-21875);
}
p {
font-size: var(--font-size-1625);
line-height: 1.346em;
margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
code,
kbd,
tt,
var {
font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr,
acronym {
cursor: help;
}
mark,
ins {
text-decoration: none;
background: #fff9c0;
}
big {
font-size: 125%;
}
/* Elements
--------------------------------------------- */
ul,
ol {
margin: 0 0 1.5em 3em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li {
> ul,
> ol {
margin-bottom: 0;
margin-left: 1.5em;
}
}
dt {
font-weight: 700;
}
dd {
margin: 0 1.5em 1.5em;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
max-width: 100%;
}
img {
max-width: 100%;
height: auto;
}
figure {
margin: 1em 0;
}
table {
width: 100%;
margin: 0 0 1.5em;
}
/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
font-weight: 700;
line-height: 1;
padding: 0.8rem 1.5rem;
cursor: pointer;
text-transform: uppercase;
color: var(--colour-dark-grey);
border: none;
border-color: #ccc #ccc #bbb;
border-radius: 1rem;
background: var(--colour-yellow);
&:hover {
border-color: #ccc #bbb #aaa;
}
&:active,
&:focus {
border-color: #aaa #bbb #bbb;
}
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
padding: 3px;
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
&:focus {
color: #111;
}
}
.select select {
font-family: inherit;
font-size: inherit;
line-height: inherit;
width: 100%;
margin: 0;
padding: 0 1em 0 0;
cursor: inherit;
border: none;
outline: none;
background-color: transparent;
appearance: none;
}
textarea {
width: 100%;
}
/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Navigation
--------------------------------------------- */
.main-navigation {
display: block;
& ul {
display: none;
margin: 0;
padding-left: 0;
list-style: none;
& ul {
position: absolute;
z-index: 99999;
top: 100%;
left: -999em;
float: left;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
& ul {
top: 0;
left: -999em;
}
& li {
&:hover, &.focus {
> ul {
left: auto;
display: block;
}
}
}
& a {
width: 200px;
}
}
& li {
&:hover, &.focus {
> ul {
left: auto;
}
}
}
}
& li {
position: relative;
}
}
/* Small menu. */
.account-navigation,
.main-navigation {
&.toggled {
& ul {
position: absolute;
z-index: 10;
top: 0;
right: 0;
display: block;
width: min(25rem, 100vw);
height: 100vh;
padding-top: 3.9rem;
color: var(--colour-white);
background: var(--colour-purple);
}
& li {
font-size: 1.2rem;
font-weight: 500;
padding: 0.2em;
text-align: center;
}
}
& .menu-toggle {
line-height: 2rem;
position: absolute;
z-index: 9;
top: 1rem;
right: 1rem;
overflow: hidden;
width: 1.5rem;
cursor: pointer;
transition: top 1s ease;
text-indent: 2rem;
border: none;
background-color: var(--colour-purple);
-webkit-mask-image: var(--icon-hamburger);
mask-image: var(--icon-hamburger);
-webkit-mask-size: 1.5rem auto;
mask-size: 1.5rem auto;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
aspect-ratio: 1 / 1;
}
& a {
display: block;
text-decoration: none;
}
}
.account-navigation {
&.toggled {
& ul {
background: var(--colour-blue);
}
}
}
header {
& .social-navigation {
position: absolute;
z-index: 10;
bottom: 2em;
display: none;
margin: auto;
}
}
.toggled {
+ .social-navigation,
+ nav + .social-navigation {
position: fixed;
z-index: 11;
right: 0;
bottom: 1rem;
display: block;
width: min(25rem, 100vw);
}
& .menu-toggle {
z-index: 11;
background-color: var(--colour-white);
mask-image: var(--icon-cross);
}
}
.social-navigation {
& ul {
display: flex;
justify-content: center;
list-style: none;
gap: 0.5rem;
}
& a {
line-height: 2rem;
display: block;
overflow: hidden;
width: 1.5rem;
text-indent: 110%;
background-color: var(--colour-white);
aspect-ratio: 1 / 1;
-webkit-mask-image: var(--icon-link);
mask-image: var(--icon-link);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
&[href^='https://twitter.com'] {
-webkit-mask-image: var(--icon-twitter);
mask-image: var(--icon-twitter);
}
&[href^='https://instagram.com'] {
-webkit-mask-image: var(--icon-instagram);
mask-image: var(--icon-instagram);
}
&[href^='https://facebook.com'] {
-webkit-mask-image: var(--icon-facebook);
mask-image: var(--icon-facebook);
}
}
}
& .site-main {
padding: 0 5%;
& ul, & ol {
margin: 0;
padding-block: 1rem;
padding-inline: 1.5rem;
}
& .comment-navigation,
& .posts-navigation,
& .post-navigation {
font-size: var(--font-size-15625);
margin: 0 0 0.96em;
padding: 0 1.28em;
}
}
.comment-navigation,
.posts-navigation,
.post-navigation {
& .nav-links {
display: flex;
}
& .nav-previous {
flex: 1 0 50%;
}
& .nav-next {
flex: 1 0 50%;
text-align: end;
}
}
.site-info {
font-size: 0.94rem;
line-height: 1.56rem;
text-align: center;
color: var(--colour-purple);
}
/* Posts and pages
--------------------------------------------- */
.sticky {
display: block;
}
.post,
.page {
max-width: 110rem;
margin: 0 auto 1.5em;
}
.updated:not(.published) {
display: none;
}
.page-content,
.entry-content,
.entry-summary {
margin: 1.5em 0 0;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
}
/* Comments
--------------------------------------------- */
.comment-content {
& a {
word-wrap: break-word;
}
}
.bypostauthor {
display: block;
}
/* Widgets
--------------------------------------------- */
.widget {
margin: 0 0 1.5em;
& select {
max-width: 100%;
}
}
/* Media
--------------------------------------------- */
.page-content,
.entry-content,
.comment-content {
& .wp-smiley {
margin-top: 0;
margin-bottom: 0;
padding: 0;
border: none;
}
}
/* Make sure logo link wraps around logo image. */
.custom-logo-link {
display: inline-block;
}
/* Captions
--------------------------------------------- */
.wp-caption {
max-width: 100%;
margin-bottom: 1.5em;
& img[class*="wp-image-"] {
display: block;
margin-right: auto;
margin-left: auto;
}
& .wp-caption-text {
margin: 0.8075em 0;
}
}
.wp-caption-text {
text-align: center;
}
/* Galleries
--------------------------------------------- */
.gallery {
display: flex;
flex-flow: row;
justify-content: space-evenly;
margin-bottom: 1.5em;
gap: 0.5em;
& .gallery-item {
flex: 1 1 33%;
max-width: 50%;
text-align: center;
}
}
.gallery-item {
& img {
width: 100%;
aspect-ratio: 1 / 1;
}
}
.gallery-caption {
display: block;
}
/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/
/* Jetpack infinite scroll
--------------------------------------------- */
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll {
& .posts-navigation,
&.neverending .site-footer {
display: none;
}
}
/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end {
&.neverending {
& .site-footer {
display: block;
}
}
}
/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
position: absolute !important;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
word-wrap: normal !important;
border: 0;
clip-path: inset(50%);
&:focus {
font-size: 0.875rem;
font-weight: 700;
line-height: normal;
z-index: 100000;
top: 5px;
left: 5px;
display: block;
clip: auto !important;
width: auto;
height: auto;
padding: 15px 23px 14px;
text-decoration: none;
color: #21759b;
border-radius: 3px;
background-color: #f1f1f1;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip-path: none;
}
}
/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
outline: 0;
}
/* Alignments
--------------------------------------------- */
.alignleft {
/*rtl:ignore*/
float: left;
/*rtl:ignore*/
margin-right: 1.5em;
margin-bottom: 1.5em;
}
.alignright {
/*rtl:ignore*/
float: right;
/*rtl:ignore*/
margin-bottom: 1.5em;
margin-left: 1.5em;
}
.aligncenter {
display: block;
clear: both;
margin-right: auto;
margin-bottom: 1.5em;
margin-left: auto;
}
.alignfull, .alignwide {
width: 100vw;
margin-left: calc(50% - 50vw);
& .inner {
max-width: min(90%, 86rem);
margin: auto;
padding-block: 0.2rem;
}
}
.actions {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: max-content;
max-width: 90%;
margin: 2em auto auto;
color: var(--colour-white);
gap: 0.5rem;
& .button {
margin: 0;
}
}
.button:any-link {
display: inline-block;
margin: 0.5rem;
padding: 0.5rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: var(--colour-white);
border-radius: 1.5rem;
background: var(--colour-purple);
}
/**
Site Menus
*/
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.account-navigation {
& .menu-toggle {
right: 3.5rem;
-webkit-mask-image: var(--icon-user);
mask-image: var(--icon-user);
}
& .button {
display: none;
}
& ul {
display: none;
}
}
.footer-navigation {
& ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
list-style: none;
text-align: center;
color: var(--colour-purple);
gap: 1em;
}
& a {
text-decoration: none;
}
& .button {
font-size: 1.125rem;
font-weight: 700;
padding: 0 1rem;
text-transform: uppercase;
border-radius: 1.56rem;
}
& .submenu {
font-size: 1.125rem;
}
}
/**
Site headings
*/
.site-header, .site-main, .site-footer {
max-width: 86rem;
margin: auto;
}
.site-header {
position: sticky;
z-index: 10;
top: -1px;
min-height: 6.25rem;
transition: 1s ease;
background-color: var(--colour-white);
& .site-branding {
display: inline-block;
transition: 1s ease;
& img {
height: 3.6rem;
margin: 1.8rem;
transition: all ease 0.2s;
}
}
}
.site-footer {
& .footer-links {
font-size: var(--font-size-125);
line-height: 2.25em;
position: relative;
display: flex;
align-items: center;
flex-flow: column;
justify-content: space-between;
width: 100%;
padding: 2rem;
gap: 1em;
&::before {
position: absolute;
z-index: -1;
top: 0;
left: calc(50% - 50vw);
display: block;
width: 100vw;
height: 100%;
content: '';
background-color: var(--colour-off-white);
}
}
& .site-branding {
display: none;
}
& .social-navigation a {
background-color: var(--colour-purple);
}
}
.site-branding img {
height: 100%;
object-fit: contain;
}
.footer-links .footer-navigation {
flex: 1 1 auto;
text-align: center;
}
/**
Block Colours
*/
.has-purple-color {
color: var(--colour-purple) !important;
}
.has-purple-background-color {
background-color: var(--colour-purple) !important;
}
.has-blue-color {
color: var(--colour-blue) !important;
}
.has-blue-background-color {
background-color: var(--colour-blue) !important;
}
.has-green-color {
color: var(--colour-green) !important;
}
.has-green-background-color {
background-color: var(--colour-green) !important;
}
.has-yellow-color {
color: var(--colour-yellow) !important;
}
.has-yellow-background-color {
background-color: var(--colour-yellow) !important;
}
.has-orange-color {
color: var(--colour-orange) !important;
}
.has-orange-background-color {
background-color: var(--colour-orange) !important;
}
.has-red-color {
color: var(--colour-red) !important;
}
.has-red-background-color {
background-color: var(--colour-red) !important;
}
.has-white-color {
color: var(--colour-white) !important;
}
.has-white-background-color {
background-color: var(--colour-white) !important;
}
.has-light-grey-color {
color: var(--colour-light-grey) !important;
}
.has-light-grey-background-color {
background-color: var(--colour-light-grey) !important;
}
.has-dark-grey-color {
color: var(--colour-dark-grey) !important;
}
.has-dark-grey-background-color {
background-color: var(--colour-dark-grey) !important;
}
.wp-block-cover {
font-size: var(--font-size-1625);
line-height: 1.346em;
position: relative;
min-height: 20rem;
text-align: center;
& .has-gradient-purple-clear-gradient-background {
opacity: 1;
background-image: linear-gradient(90deg, rgb(110, 43, 138), rgb(110, 43, 138) 55%, rgba(110, 43, 138, 0));
}
& .has-gradient-clear-yellow-gradient-background {
opacity: 1;
background-image: linear-gradient(90deg, rgba(249, 236, 57, 0), rgb(249, 236, 57) 55%, rgb(249, 236, 57));
}
&.fullcover {
& .wp-block-cover__inner-container {
position: absolute;
display: GRID;
align-content: center;
align-items: center;
align-self: center;
width: calc(100% - 2em);
height: calc(100% - 2em);
min-height: 6rem;
margin: 0;
padding: 0;
color: var(--colour-purple);
background: #ffffffbb;
}
& .has-background {
background: transparent;
&::after {
position: absolute;
z-index: -1;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
display: block;
width: auto;
height: auto;
content: "";
opacity: 0.8;
background: var(--colour-white);
}
}
}
&.events {
color: var(--colour-dark-grey);
}
& .has-gradient-purple-clear-gradient-background + .wp-block-cover__image-background {
left: unset;
width: 50%;
}
}
.wp-block-cover,
.login {
& h1 {
font-size: var(--font-size-heading);
line-height: 1.09em;
margin-top: 0;
padding-top: 1rem;
text-align: left;
text-transform: uppercase;
&::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1rem;
content: '';
background-image: var(--icon-rainbow);
background-repeat: no-repeat;
background-position: top left;
background-size: 100%;
}
}
}
.wp-block-button a {
font-size: var(--font-size-button);
font-weight: 700;
padding: 1.19rem 1.56rem;
text-transform: uppercase;
color: var(--colour-dark-grey);
background-color: var(--colour-yellow);
}
.wp-block-meta {
font-size: var(--font-size-15625);
font-weight: 700;
line-height: 1.8em;
margin: 0;
padding: 0;
list-style: none;
& .user {
& goc-member {
display: grid;
align-items: center;
width: max-content;
margin: auto;
text-align: left;
grid-auto-flow: column;
gap: 1em;
}
& goc-member::part(image-wrapper) {
width: clamp(6rem, 5.0918rem + 3.824vw, 8.4375rem);
}
& goc-member::part(name) {
align-items: flex-start;
flex-direction: column;
}
& goc-member::part(name)::before {
font-size: 0.9em;
font-weight: normal;
line-height: 1em;
display: block;
margin: 0;
padding: 0 0 0.5em 0;
content: "Posted by:";
color: var(--colour-white);
}
& goc-member::part(link) {
color: var(--colour-white);
}
}
}
.entry-meta {
width: max-content;
margin: 0 5%;
& div {
font-size: var(--font-size-125);
font-weight: 700;
padding: 1.56rem 2.37rem;
background: var(--colour-white);
}
}
goc-news-card {
--font-size: var(--font-size-125);
}
goc-member {
--bar-thickness: calc(5% + 0.5vw);
--bar-position: center;
}
.goc-shop {
margin-top: 1em;
}
#groups_map {
display: none;
}
.group-select {
font-size: var(--font-size-21875);
font-weight: 700;
position: relative;
margin-bottom: 1rem;
color: var(--colour-dark-grey);
& select {
color: inherit;
}
& option {
font-size: 1rem;
}
&::before {
font-size: var(--font-size-125);
position: absolute;
z-index: -1;
top: 0;
right: 0;
padding-right: 2rem;
content: 'Change Region';
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxNiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEuNzk5MTEgMTIuNDk3OEMxLjQwMTYyIDEyLjA4MDQgMC43NDExNjUgMTIuMDY0MyAwLjMyMzkxMyAxMi40NjE4Qy0wLjA5MzQ3NzggMTIuODU5MyAtMC4xMDk2MTYgMTMuNTE5NyAwLjI4Nzg3OCAxMy45MzdMMS43OTkxMSAxMi40OTc4Wk03LjI0NDM5IDIxLjI0MTNDNy42NDE4OSAyMS42NTg3IDguMzAyMzQgMjEuNjc0OCA4LjcxOTU5IDIxLjI3NzNDOS4xMzY5OCAyMC44Nzk4IDkuMTUzMTIgMjAuMjE5NCA4Ljc1NTYyIDE5LjgwMjFMNy4yNDQzOSAyMS4yNDEzWk03LjI0NDM5IDE5LjgwMjFDNi44NDY5IDIwLjIxOTQgNi44NjMwMyAyMC44Nzk4IDcuMjgwNDMgMjEuMjc3M0M3LjY5NzY4IDIxLjY3NDggOC4zNTgxMyAyMS42NTg3IDguNzU1NjIgMjEuMjQxM0w3LjI0NDM5IDE5LjgwMjFaTTE1LjcxMjEgMTMuOTM3QzE2LjEwOTYgMTMuNTE5NyAxNi4wOTM1IDEyLjg1OTMgMTUuNjc2MiAxMi40NjE4QzE1LjI1ODggMTIuMDY0MyAxNC41OTgzIDEyLjA4MDQgMTQuMjAwOSAxMi40OTc4TDE1LjcxMjEgMTMuOTM3Wk02Ljk1NjUzIDIwLjUyMTdDNi45NTY1MyAyMS4wOTggNy40MjM3MyAyMS41NjUyIDguMDAwMDEgMjEuNTY1MkM4LjU3NjI4IDIxLjU2NTIgOS4wNDM0OCAyMS4wOTggOS4wNDM0OCAyMC41MjE3TDYuOTU2NTMgMjAuNTIxN1pNOS4wNDM0OSAxLjA0MzQ4QzkuMDQzNDkgMC40NjcxODUgOC41NzYyOSAtMy4yNDUwMWUtMDcgOC4wMDAwMSAtMy40OTY5MWUtMDdDNy40MjM3MyAtMy43NDg4MWUtMDcgNi45NTY1MyAwLjQ2NzE4NSA2Ljk1NjUzIDEuMDQzNDhMOS4wNDM0OSAxLjA0MzQ4Wk0wLjI4Nzg3OCAxMy45MzdMNy4yNDQzOSAyMS4yNDEzTDguNzU1NjIgMTkuODAyMUwxLjc5OTExIDEyLjQ5NzhMMC4yODc4NzggMTMuOTM3Wk04Ljc1NTYyIDIxLjI0MTNMMTUuNzEyMSAxMy45MzdMMTQuMjAwOSAxMi40OTc4TDcuMjQ0MzkgMTkuODAyMUw4Ljc1NTYyIDIxLjI0MTNaTTkuMDQzNDggMjAuNTIxN0w5LjA0MzQ5IDEuMDQzNDhMNi45NTY1MyAxLjA0MzQ4TDYuOTU2NTMgMjAuNTIxN0w5LjA0MzQ4IDIwLjUyMTdaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K');
background-repeat: no-repeat;
background-position: bottom right;
background-size: 1rem;
}
}
.scroll-container {
position: relative;
z-index: 1;
overflow: hidden;
margin-bottom: 3rem;
padding-bottom: 3.5rem;
}
.scroll-more {
position: absolute;
z-index: 200;
bottom: 0;
display: none;
overflow: hidden;
width: 3rem;
height: 3rem;
cursor: pointer;
transition: opacity 0.5s ease;
text-indent: 4rem;
opacity: 0;
border-radius: 100%;
background: var(--colour-white) var(--icon-scroll) no-repeat center;
background-color: color-mix(in srgb, var(--colour-white) 50%, #fff0);
aspect-ratio: 1 / 1;
}
.scroll-forward .forward {
right: 2rem;
display: block;
opacity: 1;
}
.scroll-back .back {
left: 2rem;
display: block;
opacity: 1;
rotate: 180deg;
}
.expand {
&.expanded,
&.scroll-forward,
&.scroll-back {
.expand {
top: 0;
right: 2rem;
display: block;
width: 2rem;
height: 2rem;
opacity: 1;
background-size: 50%;
rotate: 90deg;
}
}
&.expanded {
.expand {
rotate: 270deg;
}
.scroller {
align-items: flex-start;
grid-auto-flow: initial;
grid-template-columns: repeat(auto-fill, minmax(var(--min-column), 1fr));
}
}
}
.scroller,
.grid {
position: relative;
display: grid;
width: 100%;
gap: 1em;
.post-thumbnail {
position: absolute;
z-index: 0;
top: 0;
width: 100%;
height: 100%;
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.entry-title,
.meta,
.category {
z-index: 1;
padding: 5%;
}
.entry-title {
font-size: var(--font-size-125);
line-height: 1.5em;
margin: 5%;
color: var(--colour-blue);
background-color: var(--colour-white);
}
.meta,
.category {
font-size: var(--font-size-125);
font-weight: 400;
z-index: 2;
width: 56%;
margin: 0 5%;
list-style: none;
pointer-events: none;
}
.meta {
line-height: 1.375rem;
order: 2;
color: var(--colour-dark-grey);
background-color: var(--colour-white);
}
.category {
line-height: normal;
display: inline-block;
order: 4;
color: var(--colour-white);
background-color: var(--colour-blue);
& li:first-child {
font-weight: 700;
display: block;
}
}
.location, .distance {
font-size: 0.875rem;
line-height: normal;
}
.location {
font-weight: 700;
}
& a:any-link {
text-decoration: none;
}
.entry-content, .entry-footer {
display: none;
}
}
.scroller {
overflow-x: scroll;
flex-flow: row;
--min-column: 16rem;
scrollbar-width: none;
scroll-snap-type: x mandatory;
grid-auto-flow: column;
grid-auto-columns: clamp(var(--min-column), 22vw, 20rem);
&::-webkit-scrollbar {
display: none;
}
& article.goc_group {
display: grid;
aspect-ratio: unset;
grid-template-rows: subgrid;
grid-row: span 2;
gap: 0;
.post-thumbnail {
position: relative;
display: block;
width: 100%;
object-fit: cover;
grid-row: 1;
aspect-ratio: 0.8 / 1;
}
}
> * {
scroll-snap-align: start;
}
}
.grid {
display: grid;
margin: 1rem 0;
--min-column: 15rem;
grid-template-columns: repeat(auto-fill, minmax(min(var(--min-column), 90vw), 1fr));
}
.scroller > *,
.grid > article {
position: relative;
z-index: 1;
display: flex;
flex: 1 0 auto;
flex-flow: column-reverse;
width: 100%;
aspect-ratio: 0.8 / 1;
}
.scroller .entry-header,
.scroller > div,
.grid .entry-header,
.grid div {
z-index: 1;
}
.goc_group {
.entry-header {
flex: 1 1 auto;
}
.entry-title {
font-size: 1.562rem;
line-height: 1.4em;
width: 100%;
height: 100%;
margin: 0;
padding: 1em 1.4em 1.08em 0.8em;
color: var(--colour-white);
background-color: var(--colour-orange);
}
}
.filter {
font-size: var(--font-size-15625);
font-weight: 400;
line-height: 1.8em;
padding-top: 3.04em;
padding-bottom: 2.5em;
color: var(--colour-light-grey);
& span {
cursor: pointer;
}
.selected {
font-weight: 700;
color: var(--colour-dark-grey);
}
}
.goc-specialist-groups {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
gap: 1rem;
& li {
font-size: var(--font-size-15625);
font-weight: 700;
line-height: 1em;
flex: 1 1 10.8em;
min-height: 8.1em;
color: var(--colour-dark-grey);
border-radius: 1.88rem;
background-color: var(--colour-light-grey);
&:hover {
color: var(--colour-white);
background-color: var(--colour-green);
}
}
& a {
display: block;
width: 100%;
height: 100%;
padding: 3.3rem 0.5rem 1rem;
text-decoration: none;
&::before {
display: block;
width: 3.75rem;
height: 3.75rem;
margin: auto;
content: '';
background-color: var(--colour-dark-grey);
-webkit-mask: var(--group-icon);
mask: var(--group-icon);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
}
& li:hover a::before {
background-color: var(--colour-white);
}
}
/**
* WooCommerce My Account section
*/
.woocommerce-MyAccount-navigation {
position: absolute;
z-index: 2;
bottom: 0.5rem;
width: 100%;
padding: 0;
& ul {
font-size: var(--font-size-15625);
line-height: 2em;
display: flex;
flex-flow: row wrap;
justify-content: center;
width: min(70rem, 90%);
margin: auto;
list-style: none;
gap: 0.4rem;
padding-block: 0.4rem;
}
& li {
display: none;
& a {
font-weight: 700;
padding: 0.2rem 0.8rem;
text-decoration: none;
color: var(--colour-dark-grey);
border-radius: var(--border-radius);
background-color: var(--colour-yellow);
}
&.current-menu-item {
& a {
color: var(--colour-white);
background-color: var(--colour-blue);
}
}
&.feature {
display: block;
}
}
}
.woocommerce .subscription {
display: flex;
align-items: center;
flex-flow: row wrap;
gap: 1rem;
}
.subscription {
.info {
flex: 1 1 auto;
& p {
font-size: 1rem;
margin: 0;
}
}
& em {
font-weight: bold;
font-style: normal;
}
.manage {
display: flex;
}
.print {
overflow: hidden;
width: 1.5rem;
cursor: pointer;
background-color: var(--colour-purple);
aspect-ratio: 1 / 1;
-webkit-mask-image: var(--icon-print);
mask-image: var(--icon-print);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
}
.gift-card-total {
font-size: var(--font-size-1625);
font-weight: 500;
line-height: 1em;
margin: 1rem auto;
color: var(--colour-font);
}
.woocommerce-MyAccount-Giftcards-form button {
flex: 0 0 max-content;
margin: 0.5rem;
color: var(--colour-white);
background-color: var(--colour-purple);
}
.woocommerce-Giftcards .form-row {
flex-grow: 1;
}
.woocommerce-giftcards-activity-table td,
.woocommerce-giftcards-table td {
padding: 1.12rem 1rem;
border-radius: 0.92rem;
background: var(--colour-off-white);
}
.woocommerce-address-fields {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
gap: 1rem;
.button {
color: var(--colour-white);
background: var(--colour-purple);
}
.full {
grid-column: 1 / -1;
}
.woocommerce-address-fields__field-wrapper {
display: contents;
}
}
.woocommerce-error {
margin: 3rem;
padding: 1rem;
list-style: none;
color: var(--colour-white);
border-radius: 0.95rem;
background: var(--colour-red);
}
.loadmore {
display: block;
clear: both;
width: max-content;
margin: auto;
padding: 2rem;
color: var(--colour-white);
}
.eo-venue-map {
width: 100%;
aspect-ratio: 1 / 1;
}
.event-tag-cancelled,
.event-tag-changed-date,
.event-tag-change-date,
.event-tag-new-location,
.event-tag-provisional,
.event-tag-pending {
position: relative;
&::after {
font-size: var(--font-size-21875);
font-weight: 700;
position: absolute;
z-index: 100;
top: 0;
display: grid;
align-content: center;
justify-content: center;
width: 100%;
color: var(--colour-white);
}
}
.event-tag-cancelled::after {
content: "CANCELLED";
background: var(--colour-red);
}
.event-tag-changed-date::after,
.event-tag-change-date::after {
content: "New Date";
background: var(--colour-blue);
}
.event-tag-new-location::after {
content: "New Location";
background: var(--colour-purple);
}
.event-tag-provisional::after {
content: "Provisional";
background: var(--colour-green);
}
.event-tag-pending::after {
content: "Pending";
background: var(--colour-green);
}
.events {
&.booking {
grid-column: 1 / -1;
&.cancelled::after {
display: inline-block;
margin-left: 2em;
padding: 0.1em 2em;
content: 'cancelled';
text-transform: uppercase;
color: var(--colour-white);
border-radius: 0.9rem;
background: var(--colour-red);
}
&.pending::after {
display: inline-block;
margin-left: 2em;
padding: 0.1em 2em;
content: 'Pending Payment';
text-transform: uppercase;
color: var(--colour-white);
border-radius: 0.9rem;
background: var(--colour-green);
}
}
}
.login {
.lost_password,
.join {
text-align: center;
color: var(--colour-purple);
}
}
.remember input[type=checkbox] {
display: inline-block;
width: 2.5rem;
height: 2.5rem;
vertical-align: middle;
background: var(--colour-font);
}
.keypoints {
.scroll-container {
padding: 7vw;
}
.discs {
> div {
display: grid;
align-content: center;
width: 100%;
color: var(--colour-dark-grey);
border-radius: 100%;
background: var(--colour-white);
aspect-ratio: 1 / 1;
}
}
}
.entry-restricted {
position: relative;
display: grid;
padding: 5.4rem 0;
> h1 {
margin-top: 0;
}
& h3 {
font-size: 1rem;
line-height: 1.625em;
margin: 0;
text-transform: uppercase;
color: var(--colour-dark-grey);
}
&::after {
position: absolute;
z-index: -1;
display: block;
width: 100vw;
height: 100%;
margin-left: calc(50% - 50vw);
content: '';
opacity: 0.1;
background-color: var(--colour-green);
}
}
#userListContainer, #bookingform {
width: 100%;
}
.userlist {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
--min-column: 10rem;
grid-auto-columns: var(--min-column);
grid-auto-flow: column;
& a:any-link {
font-size: var(--font-size-1625);
font-weight: 700;
line-height: 1.731em;
display: contents;
color: var(--colour-green);
}
> li {
display: grid;
max-width: 12rem;
grid-template-rows: subgrid;
grid-row-end: span 2;
aspect-ratio: unset;
}
.private,
& img {
display: block;
width: 10rem;
margin: 0.62rem auto;
border-radius: 100%;
aspect-ratio: 1 / 1;
}
.private {
font-size: var(--font-size-21875);
display: flex;
align-items: center;
justify-content: center;
color: var(--colour-white);
background-color: var(--colour-green);
}
}
.groupinfo {
display: flex;
align-items: center;
gap: 0.5em;
.wp-block-button__link {
font-weight: bold;
text-transform: uppercase;
}
}
.wp-block-group {
&.contact-form {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(90vw, 40rem), 1fr));
gap: 1rem;
.wp-block-group__inner-container {
display: contents;
}
.button {
color: var(--colour-white);
background: var(--colour-purple);
}
.updated {
display: block;
max-width: 40rem;
margin: auto;
padding: 0.5rem;
border: 1px solid var(--colour-green);
border-radius: var(--border-radius);
+ form {
display: none;
}
}
}
& form {
display: grid;
max-width: 40rem;
margin: auto;
gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
.acf-fields {
display: contents;
grid-column: 1 / -1;
}
.acf-field-textarea {
grid-column: 1 / -1;
}
}
}
@media all and (max-width: 81em) {
.scroll {
.menu-toggle {
top: 0.5rem;
}
.site-branding {
& img {
height: 1.8rem;
margin: calc(1px + 0.9rem) 0.9rem 0.9rem;
}
}
}
.site-header {
&.scroll {
min-height: 3rem;
}
}
}
.hide {
display: none !important;
}
.small {
font-size: 1rem;
line-height: 1.625em;
margin: 0;
text-transform: uppercase;
color: var(--colour-dark-grey);
}
.loading {
cursor: wait !important;
}
.inactive {
cursor: not-allowed !important;
}
.shop_table {
font-size: 1.2rem;
.button {
font-size: var(--font-size-button);
display: inline-block;
margin: 0.2rem;
padding: 0.1rem 1.5rem;
border-radius: 0.5rem;
}
& th {
text-align: left;
}
}
.wc-item-meta {
font-size: 0.8em;
margin: 0;
list-style: none;
& li {
display: flex;
gap: 1em;
}
& p {
font-size: 1em;
margin: 0;
padding: 0;
}
}
.variation {
display: flex;
flex-flow: row wrap;
& p {
font-size: 1em;
margin: 0;
padding: 0;
}
}
.dialog-header {
.cancel {
position: absolute;
top: 0.5rem;
right: 0.5rem;
overflow: hidden;
width: 1rem;
text-indent: 2rem;
background: transparent;
aspect-ratio: 1 / 1;
&::after {
position: absolute;
top: 0;
display: block;
width: 100%;
content: '';
background-color: var(--colour-red);
inset: 0;
mask-image: var(--icon-cancel);
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
aspect-ratio: 1 / 1;
}
}
}
dialog {
&.loading {
.dialog-body {
position: relative;
&::after {
position: absolute;
display: grid;
align-items: center;
content: 'Loading';
color: var(--colour-white);
background-color: color(from var(--colour-dark-grey) a98-rgb r g b / 0.85);
inset: 0;
justify-items: center;
}
}
}
&.search {
border: none;
border-radius: 0.96rem;
background: var(--colour-font);
box-shadow: 0.2rem 0.2rem 0.2rem var(--colour-dark-grey);
& form {
display: flex;
align-items: center;
flex-flow: row wrap;
gap: 0.2rem;
}
& p {
width: 100%;
}
}
}
goc-confirm {
--border-radius: 0.2rem;
}
.screen-small {
display: block;
}
.screen-large {
display: none;
}
.contact {
.inner {
position: relative;
.updated {
z-index: 1;
display: grid;
padding: 0.2rem;
border: 1px solid var(--colour-green);
border-radius: 0.5rem;
inset: 0;
place-content: center;
+ .acf-form {
display: none;
}
}
}
}
.comment-list {
margin: 0;
padding: 0;
& li {
padding: 1rem;
border-radius: 0.9em;
background: var(--colour-off-white);
}
}
.comment-form {
[type="checkbox"] {
display: inline-block;
width: 1em;
height: 1em;
margin-left: 1em;
}
}
.comment-form-send-email {
padding: 1em;
color: var(--colour-white);
border-radius: 0.9rem;
background: var(--colour-blue);
}
.demo_store {
color: var(--colour-white);
background: var(--colour-green);
}
.links {
display: flex;
margin: auto;
gap: var(--font-size-125);
& a {
font-size: var(--font-size-button);
font-weight: 600;
display: block;
flex: 0 0 max-content;
padding: var(--font-size-125);
text-decoration: none;
border-radius: var(--font-size-1625);
background: var(--colour-yellow);
}
}
.inline {
font-size: var(--font-size-1625);
display: flex;
align-items: center;
flex-flow: row;
padding: 0.5rem;
gap: 1rem;
.actions {
flex-flow: row;
margin: 0 0 0 auto;
}
&:nth-child(2n) {
background: var(--colour-off-white);
}
}
.my-waiting-list,
.my-tickets {
display: grid;
width: 100%;
grid-template-areas: "for cost" "item item" "date view";
grid-template-columns: 1fr 1fr;
@media screen and (min-width: 45rem) {
grid-template-areas: "for item cost date view";
grid-template-columns: max-content 1fr max-content max-content max-content;
}
gap: 1rem;
& header {
font-weight: bold;
color: var(--colour-white);
background: var(--colour-blue);
}
.ticket {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
grid-auto-flow: dense;
}
.booking-for {
grid-column: for;
}
.booking-item {
grid-column: item;
}
.booking-date {
grid-column: date;
}
.leave-waiting-list,
.booking-view {
margin: 0;
padding: 0.2rem;
grid-column: view;
}
.booking-cost {
grid-column: cost;
}
& h2 {
grid-column: 1 / -1;
}
}
.notice {
align-self: center;
margin: 0.5rem;
padding: 0.5rem 1rem;
color: var(--colour);
border: 0.2rem solid var(--colour);
border-radius: 0.5rem;
background: rgba(from var(--colour) r g b / 0.1);
--colour: var(--colour-blue);
& h3 {
font-weight: bold;
margin: 0.1rem;
text-align: left;
color: var(--colour);
border-radius: 0.4rem;
}
& p {
margin: 0.5rem 0;
}
&.success {
--colour: var(--colour-green);
}
&.error {
--colour: var(--colour-red);
}
& dl, & dd, & dt {
margin: 0;
padding: 0;
}
}
section {
&.admin-links {
font-size: 0.8rem;
padding: 0.5rem;
border: 0.2rem solid var(--colour-purple);
border-radius: 0.5rem;
& ul {
display: flex;
flex-flow: row wrap;
margin: 0;
padding: 0;
list-style: none;
gap: 1rem;
}
& li {
border-radius: 0.5rem;
background: rgb(from var(--colour-purple) r g b / 0.85);
&:hover {
background: rgb(from var(--colour-purple) r g b / 1);
}
& a:any-link {
font-weight: bold;
display: block;
padding: 0.5rem 1rem;
text-decoration: none;
color: var(--colour-white);
}
}
& h2 {
font-size: 0.8rem;
margin: 0 0 0.5rem;
}
}
}
@keyframes bgr {
0% {
width: 0;
}
50% {
width: 1em;
}
100% {
width: 0;
}
}