/* Theme Name: Wildes Description: Wildes (bootScore Child Theme) Author: Siruss Author URI: https://siruss.co.uk Template: bootscore-main Version: 5.3.0.28 Text Domain: bootscore */ /* ////////////////////////////////////////////////////////////// */ /* region HTML */ /* ====================================================== */ /* region HTML: Variables */ :root, [data-bs-theme="dark"], [data-bs-theme="light"] { --bs--border-radius: calc(var(--shr, 1rem) * 1); } :root, body { /* heading variables */ --h1--color: var(--heading--color); --h2--color: var(--heading--color); --h3--color: var(--heading--color); --h4--color: var(--heading--color); --h5--color: var(--heading--color); --h6--color: var(--heading--color); --heading--color: var(--silo--color--primary, var(--wp--preset--color--body-text, #232323)); --h1--line-height: var(--heading--line-height); --h2--line-height: var(--heading--line-height); --h3--line-height: var(--heading--line-height); --h4--line-height: var(--heading--line-height); --h5--line-height: var(--heading--line-height); --h6--line-height: var(--heading--line-height); --heading--line-height: 1.2; --h1--text-decoration: var(--heading--text-decoration); --h2--text-decoration: var(--heading--text-decoration); --h3--text-decoration: var(--heading--text-decoration); --h4--text-decoration: var(--heading--text-decoration); --h5--text-decoration: var(--heading--text-decoration); --h6--text-decoration: var(--heading--text-decoration); --heading--text-decoration: none; --h1--text-transform: var(--heading--text-transform); --h2--text-transform: var(--heading--text-transform); --h3--text-transform: var(--heading--text-transform); --h4--text-transform: var(--heading--text-transform); --h5--text-transform: var(--heading--text-transform); --h6--text-transform: var(--heading--text-transform); --heading--text-transform: normal; --h1--letter-spacing: var(--heading--letter-spacing); --h2--letter-spacing: var(--heading--letter-spacing); --h3--letter-spacing: var(--heading--letter-spacing); --h4--letter-spacing: var(--heading--letter-spacing); --h5--letter-spacing: var(--heading--letter-spacing); --h6--letter-spacing: var(--heading--letter-spacing); --heading--letter-spacing: normal; --h1--font-family: var(--wp--preset--font-family--headings); --h2--font-family: var(--wp--preset--font-family--headings); --h3--font-family: var(--wp--preset--font-family--headings); --h4--font-family: var(--wp--preset--font-family--headings); --h5--font-family: var(--wp--preset--font-family--headings); --h6--font-family: var(--wp--preset--font-family--headings); --h1--font-size: var(--wp--preset--font-size--huge); --h2--font-size: var(--wp--preset--font-size--heading-2); --h3--font-size: var(--wp--preset--font-size--heading-3); --h4--font-size: var(--wp--preset--font-size--heading-4); --h5--font-size: var(--wp--preset--font-size--heading-5); --h6--font-size: var(--wp--preset--font-size--heading-6); --h1--font-style: var(--heading--font-style); --h2--font-style: var(--heading--font-style); --h3--font-style: var(--heading--font-style); --h4--font-style: var(--heading--font-style); --h5--font-style: var(--heading--font-style); --h6--font-style: var(--heading--font-style); --heading--font-style: normal; --h1--font-weight: var(--heading--font-weight); --h2--font-weight: var(--heading--font-weight); --h3--font-weight: var(--heading--font-weight); --h4--font-weight: var(--heading--font-weight); --h5--font-weight: var(--heading--font-weight); --h6--font-weight: var(--heading--font-weight); --heading--font-weight: 600; } :root, body { /* body variables */ --body--line-height: 1.6; --body--letter-spacing: unset; --body--font-weight: 400; } :root, body { /* button variables */ /*--button--border-radius: 0.3rem;*/ /*--button--text-transform: uppercase;*/ /*--button--font-family: var(--wp--preset--font-family--headings);*/ /*--button--large--font-family: var(--wp--preset--font-family--body);*/ /*--button--font-size: var(--wp--preset--font-size--large);*/ /*--button--font-style: italic;*/ --button--font-weight: 700; /*--button--large--font-weight: 700;*/ } :root, body { /* Form variables */ --form--color--danger: #ff0000; --form--color--error: #ff0000; --form--color--info: #00a0d2; --form--color--success: #46b450; --form--color--warning: #ffb900; } :root, body { --bs--breadcrumb-divider: "→"; } :root, body { /* Fallback values for deprecated variables */ /*@formatter:off*/ --wp--preset--color--charcoal: var(--wp--preset--color--brand-5); --wp--preset--color--dandelion: var(--wp--preset--color--brand-2); --wp--preset--color--firebrick: var(--wp--preset--color--brand-1); --wp--preset--color--light-gray: var(--wp--preset--color--brand-4); --wp--preset--color--medium-gray: var(--wp--preset--color--grey); --wp--preset--color--royal-blue: var(--wp--preset--color--brand-3); & :where(.has-firebrick-background-color) { background-color: var(--wp--preset--color--brand-1); } & :where(.has-dandelion-background-color) { background-color: var(--wp--preset--color--brand-2); } & :where(.has-royal-blue-background-color) { background-color: var(--wp--preset--color--brand-3); } & :where(.has-light-gray-background-color) { background-color: var(--wp--preset--color--brand-4); } & :where(.has-charcoal-background-color) { background-color: var(--wp--preset--color--brand-5); } & :where(.has-medium-gray-background-color) { background-color: var(--wp--preset--color--grey); } & :where(.has-firebrick-color) { color: var(--wp--preset--color--brand-1); } & :where(.has-dandelion-color) { color: var(--wp--preset--color--brand-2); } & :where(.has-royal-blue-color) { color: var(--wp--preset--color--brand-3); } & :where(.has-light-gray-color) { color: var(--wp--preset--color--brand-4); } & :where(.has-charcoal-color) { color: var(--wp--preset--color--brand-5); } & :where(.has-medium-gray-color) { color: var(--wp--preset--color--grey); } /*@formatter:on*/ } :root, body { --bs--border-color: var(--wp--preset--color--brand-1); } /* endregion */ /* ====================================================== */ /* region HTML: Additional Reset */ *, *::before, *::after { box-sizing: border-box; grid-auto-columns: minmax(0, auto); grid-auto-rows: minmax(0, auto); } html { font-size: 16px !important; /* do not change this value below 16px. */ } ::selection { /* fix bootstrap's poor contrast for text selection */ background-color: var(--wp--preset--color--brand-2-500, #3345cc) !important; color: var(--wp--preset--color--brand-1-inv, #fefefe) !important; } /* Remove empty paragraphs and headings from the document flow */ h1, h2, h3, h4, h5, h6, p { &:empty { display: none; } } /* ---------------------------------------------- */ /* region Ensure that theme.json overrides Bootstrap: */ #tinymce, body { /* ensure that theme.json overrides Bootstrap: */ background-color: var(--wp--preset--color--body-background) /* !! do not change this value - adjust the colour in theme.json !! */; color: var(--wp--preset--color--body-text) /* !! do not change this value - adjust the colour in theme.json !! */; line-height: var(--body--line-height, 1.6) /* !! do not change this value - change --body--line-height in the CSS vars section */; letter-spacing: var(--body--letter-spacing, unset) /* !! do not change this value - change --body--letter-spacing in the CSS vars section */; font-family: var(--wp--preset--font-family--body), sans-serif /* !! do not change this value - adjust the font in theme.json !! */; font-size: var(--wp--preset--font-size--normal); /* !! do not change this value - adjust the font-size in theme.json !! */; font-weight: var(--body--font-weight, 400); /* !! do not change this value - change --body--font-weight in the CSS vars section */; } #tinymce, .site, .page { & h1, & .h1 { /* ensure that theme.json overrides Bootstrap: */ line-height: var(--h1--line-height, var(--heading--line-height)); text-decoration: var(--h1--text-decoration, var(--heading--text-decoration)); text-transform: var(--h1--text-transform, var(--heading--text-transform)); letter-spacing: var(--h1--letter-spacing, var(--heading--letter-spacing)); font-family: var(--h1--font-family, var(--wp--preset--font-family--headings)), sans-serif; font-size: var(--h1--font-size, unset); font-style: var(--h1--font-style, var(--heading--font-style, normal)); font-weight: var(--h1--font-weight, var(--heading--font-weight)); } & h2, & .h2 { /* ensure that theme.json overrides Bootstrap: */ line-height: var(--h2--line-height, var(--heading--line-height)); text-decoration: var(--h2--text-decoration, var(--heading--text-decoration)); text-transform: var(--h2--text-transform, var(--heading--text-transform)); letter-spacing: var(--h2--letter-spacing, var(--heading--letter-spacing)); font-family: var(--h2--font-family, var(--wp--preset--font-family--headings)), sans-serif; font-size: var(--h2--font-size, unset); font-style: var(--h2--font-style, var(--heading--font-style, normal)); font-weight: var(--h2--font-weight, var(--heading--font-weight)); } & h3, & .h3 { /* ensure that theme.json overrides Bootstrap: */ line-height: var(--h3--line-height, var(--heading--line-height)); text-decoration: var(--h3--text-decoration, var(--heading--text-decoration)); text-transform: var(--h3--text-transform, var(--heading--text-transform)); letter-spacing: var(--h3--letter-spacing, var(--heading--letter-spacing)); font-family: var(--h3--font-family, var(--wp--preset--font-family--headings)), sans-serif; font-size: var(--h3--font-size, unset); font-style: var(--h3--font-style, var(--heading--font-style, normal)); font-weight: var(--h3--font-weight, var(--heading--font-weight)); } & h4, & .h4 { /* ensure that theme.json overrides Bootstrap: */ line-height: var(--h4--line-height, var(--heading--line-height)); text-decoration: var(--h4--text-decoration, var(--heading--text-decoration)); text-transform: var(--h4--text-transform, var(--heading--text-transform)); letter-spacing: var(--h4--letter-spacing, var(--heading--letter-spacing)); font-family: var(--h4--font-family, var(--wp--preset--font-family--headings)), sans-serif; font-size: var(--h4--font-size, unset); font-style: var(--h4--font-style, var(--heading--font-style, normal)); font-weight: var(--h4--font-weight, var(--heading--font-weight)); } & h5, & .h5 { /* ensure that theme.json overrides Bootstrap: */ line-height: var(--h5--line-height, var(--heading--line-height)); text-decoration: var(--h5--text-decoration, var(--heading--text-decoration)); text-transform: var(--h5--text-transform, var(--heading--text-transform)); letter-spacing: var(--h5--letter-spacing, var(--heading--letter-spacing)); font-family: var(--h5--font-family, var(--wp--preset--font-family--headings)), sans-serif; font-size: var(--h5--font-size, unset); font-style: var(--h5--font-style, var(--heading--font-style, normal)); font-weight: var(--h5--font-weight, var(--heading--font-weight)); } & h6, & .h6 { /* ensure that theme.json overrides Bootstrap: */ line-height: var(--h6--line-height, var(--heading--line-height)); text-decoration: var(--h6--text-decoration, var(--heading--text-decoration)); text-transform: var(--h6--text-transform, var(--heading--text-transform)); letter-spacing: var(--h6--letter-spacing, var(--heading--letter-spacing)); font-family: var(--h6--font-family, var(--wp--preset--font-family--headings)), sans-serif; font-size: var(--h6--font-size, unset); font-style: var(--h6--font-style, var(--heading--font-style, normal)); font-weight: var(--h6--font-weight, var(--heading--font-weight)); } } :where(h1) { /* 0 specificity for default colour */ --bs--heading-color: var(--h1--color, var(--heading--color, #242424)); color: var(--h1--color, var(--heading--color, #242424)); } :where(h2) { /* 0 specificity for default colour */ --bs--heading-color: var(--h2--color, var(--heading--color, #242424)); color: var(--h2--color, var(--heading--color, #242424)); } :where(h3) { /* 0 specificity for default colour */ --bs--heading-color: var(--h3--color, var(--heading--color, #242424)); color: var(--h3--color, var(--heading--color, #242424)); } :where(h4) { /* 0 specificity for default colour */ --bs--heading-color: var(--h4--color, var(--heading--color, #242424)); color: var(--h4--color, var(--heading--color, #242424)); } :where(h5) { /* 0 specificity for default colour */ --bs--heading-color: var(--h5--color, var(--heading--color, #242424)); color: var(--h5--color, var(--heading--color, #242424)); } :where(h6) { /* 0 specificity for default colour */ --bs--heading-color: var(--h6--color, var(--heading--color, #242424)); color: var(--h6--color, var(--heading--color, #242424)); } /* endregion theme.json primacy */ /* ---------------------------------------------- */ /* region Heading spacing fix */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { #tinymce &, .page & { /* clear floating images in content */ clear: both; } & + &, :is(p) + & { /* heading immediately after another heading or a paragraph tag */ margin-top: max(1rem, 1em); margin-bottom: max(1rem, 0.625em); } } /* endregion Heading spacing fix */ small { font-size: var(--wp--preset--font-size--small, 0.875rem); } /* endregion HTML: Additional Reset */ /* ====================================================== */ /* region HTML: Heading Tags */ .page-header, .wp-block-group, .entry-content { /* text-color highlight for heading tags */ & > h1, & > .h1, & > h2, & > .h2, & > h3, & > .h3, & > h4, & > .h4, & > h5, & > .h5, & > h6, & > .h6, & .wp-block-heading__inner { & > em, & > span:not(.wp-block-heading__inner) { color: var(--wp--preset--color--brand-1, #010101); } } } /* endregion HTML: Heading Tags */ body { background-image: url(img/dots-background.svg); background-size: auto; } /* endregion HTML */ /* ////////////////////////////////////////////////////////////// */ /* ////////////////////////////////////////////////////////////// */ /* region Accessibility */ /*noinspection CssUnresolvedCustomProperty*/ .screen-reader-response, .visually-hidden { /* For hiding things visually, but keeping them in the document flow for accessibility, screen-readers and such */ position: var(--sr--position, absolute) !important; top: var(--sr--top, unset); overflow: var(--sr--overflow, hidden); width: var(--sr--width, 1px); height: var(--sr--height, 1px); clip: var(--sr--clip, rect(1px, 1px, 1px, 1px)); -webkit-clip-path: var(--sr---webkit-clip-path, inset(50%)); clip-path: var(--sr--clip-path, inset(50%)); margin: var(--sr--margin, -1px); padding: var(--sr--padding, 0); border: var(--sr--border, 0); word-wrap: var(--sr--word-wrap, normal) !important; word-break: var(--sr--word-break, normal); } /*noinspection CssUnresolvedCustomProperty*/ .visually-hidden-focusable, .skip-link, .screen-reader-text, .screen-reader-shortcut, #wpadminbar .screen-reader-shortcut { /* These elements should have a focus style for accessible / keyboard navigation */ /* .skip-link is the skip to main content link */ /* ID selector needed for specificity */ position: var(--sr--position, absolute) !important; top: var(--sr--top, unset); overflow: var(--sr--overflow, hidden); width: var(--sr--width, 1px); height: var(--sr--height, 1px); clip: var(--sr--clip, rect(1px, 1px, 1px, 1px)); -webkit-clip-path: var(--sr---webkit-clip-path, inset(50%)); clip-path: var(--sr--clip-path, inset(50%)); margin: var(--sr--margin, -1px); padding: var(--sr--padding, 0); border: var(--sr--border, 0); background-color: var(--color--background, #ffffff); color: var(--color--link, #3377cc); word-wrap: var(--sr--word-wrap, normal) !important; word-break: var(--sr--word-break, normal); &:active, &:focus-visible, &:focus { position: static !important; overflow: visible; width: auto; height: auto; clip: auto; -webkit-clip-path: unset; clip-path: unset; margin: 0; } } @media screen and (prefers-reduced-motion: reduce), (update: slow) { /* Support operating system level animation preferences: (https://css-tricks.com/revisiting-prefers-reduced-motion/) (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) `prefers-reduced-motion: reduce` - user-agent specifies to disable animations: either for technical reasons (such as a remote desktop), or because the end-user has a vestibular disorder and has animations disabled. `update: slow` - devices that are incapable of proper animation support. - Set a very short animation-duration and transition-duration, thereby still firing JS animation events. - Disable CSS smooth scrolling. - Set a negative animation-delay and transition-delay to even out the duration. Browsers that ignore negative delays get a single imperceptibly fast animation / transition as a fallback. - End animations after one iteration to prevent infinite repeats. - Override background-attachment to help prevent parallax and fixed scrolling. */ *, *::before, *::after { background-attachment: initial !important; transition-delay: -0.01ms !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: -0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .slick-slider .slick-list { /* Slick sliders need infinite iterations to stay navigable */ animation-iteration-count: infinite !important; } } @media screen and (prefers-reduced-motion: reduce), (update: slow) { /** * Ensure that animations don't break accessibility: */ .animated, .wp-block-ab-animate { opacity: 1 !important; animation-fill-mode: both; &.ab-is-hidden, &[data-scroll-class^=fadeIn], &[data-scroll-class^=bounceIn], &[data-scroll-class^=flipIn], &[data-scroll-class^=slideIn], &[data-scroll-class^=zoomIn], &[data-scroll-class=rollIn], &[data-scroll-class=jackInTheBox], &.ab-is-hidden.ab-animation-end { opacity: 1 !important; } } } input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="reset"], input[type="tel"], select, textarea { /* Enforce a 16px minimum font-size to prevent Android and iOS devices zooming in on focus: */ font-size: max(var(--wp--preset--font-size--normal), 16px); } table, tr, th, td { /* Tabular numbers for table elements to increase number legibility across columns */ font-variant-numeric: tabular-nums; } /* endregion */ /* ////////////////////////////////////////////////////////////// */ /* ////////////////////////////////////////////////////////////// */ /* region Containers / Block Alignment */ .container { & .container { /* prevent double application of padding on nested containers */ padding-right: 0; padding-left: 0; } & .alignfull .container { /* ensure containers in full-width aligned blocks have appropriate padding */ padding-right: calc(var(--bs--gutter-x) * 0.5); padding-left: calc(var(--bs--gutter-x) * 0.5); } } .section--wp-block { &.alignfull { max-width: 100vw; /* fallback */ max-width: 100svw; margin-right: calc((-100vw / 2) + (100% / 2)); /* fallback */ margin-right: calc((-100svw / 2) + (100% / 2)); margin-left: calc((-100vw / 2) + (100% / 2)); /* fallback */ margin-left: calc((-100svw / 2) + (100% / 2)); .editor-styles-wrapper & { /* prevents align-full elements from overflowing in the editor: */ max-width: initial; margin-right: initial; margin-left: initial; } } } /* endregion Block Alignment*/ /* ////////////////////////////////////////////////////////////// */ /* ////////////////////////////////////////////////////////////// */ /* region Page Regions */ /* ====================================================== */ /* region Page Regions: Header */ :root { --header-sticky--height: 6.25rem; --nav-link--font-size: var(--wp--preset--font-size--medium, 1rem); @media (min-width: 75rem) { /* media query required despite this being a flexible font size, as the menu is *just* too wide under 75rem to avoid linebreaks */ --nav-link--font-size: var(--wp--preset--font-size--medium, var(--wp--preset--font-size--normal, 1rem)); } @media (min-width: 90rem) { --header-sticky--height: 9rem; } } .site-header { /* additional selector needed for specificity, to overwrite Bootstrap */ & .site-header__navbar { --bs--navbar-padding-y: 0; --bs--navbar-padding-x: 0; --bs--navbar-active-color: var(--wp--preset--color--brand-1-inv); --bs--navbar-color: var(--wp--preset--color--brand-1-inv); --bs--navbar-disabled-color: var(--wp--preset--color--brand-1-inv); --bs--navbar-hover-color: var(--wp--preset--color--brand-1-inv); } & .site-header__navbar { --bs--navbar-brand-padding-y: 0.5rem; --bs--navbar-brand-color: var(--bs--navbar-color); --bs--navbar-brand-hover-color: var(--bs--navbar-hover-color); --bs--navbar-brand-font-size: 1.25rem; --bs--navbar-brand-margin-end: 1rem; } & .site-header__navbar { --bs--navbar-toggler-focus-width: 0.25rem; --bs--navbar-nav-link-padding-y: 0.5rem; --bs--navbar-toggler-padding-y: 0.25rem; --bs--navbar-nav-link-padding-x: 0.875rem; --bs--navbar-toggler-padding-x: 0.75rem; --bs--navbar-toggler-border-color: var(--wp--preset--color--brand-1-inv); --bs--navbar-toggler-border-radius: var(--bs--border-radius); --bs--navbar-toggler-font-size: 1.5rem; --bs--navbar-toggler-transition: all 0.15s ease-in-out; } & .navbar-nav { --bs--nav-link-padding-y: 1.5rem; --bs--nav-link-padding-x: 0.5rem; } & .nav-link { /*noinspection CssUnresolvedCustomProperty*/ background: var(--bs--nav-link-bg, var(--bs--nav-link-bg, none)); text-transform: uppercase; font-size: var(--nav-link--font-size, 1rem); @media (min-width: 62rem) { /* calc() will position the text centrally *and* allow the upper whitespace to change colour for the active state */ padding-top: calc(var(--header-sticky--height, 5rem) / 2 - var(--nav-link--font-size, 1rem)); padding-bottom: calc(var(--header-sticky--height, 5rem) / 2 - var(--nav-link--font-size, 1rem)); } /* link colours */ &, .navbar-nav &.active, .navbar-nav &.show { --bs--nav-link-active-color: var(--wp--preset--color--brand-2-600); --bs--nav-link-color: var(--wp--preset--color--brand-1); --bs--nav-link-hover-color: var(--wp--preset--color--brand-2-600); --bs--navbar-active-color: var(--wp--preset--color--brand-2-600); @media (min-width: 62rem) { --bs--nav-link-active-color: var(--wp--preset--color--brand-1-inv); --bs--nav-link-color: var(--wp--preset--color--brand-1-inv); --bs--nav-link-hover-color: var(--wp--preset--color--brand-1-inv); } .menu-item & { &:focus-visible, &:focus, &:hover { --bs--nav-link-active-color: var(--wp--preset--color--brand-2-600); --bs--nav-link-color: var(--wp--preset--color--brand-2-600); --bs--nav-link-hover-color: var(--wp--preset--color--brand-2-600); --bs--navbar-active-color: var(--wp--preset--color--brand-2-600); text-decoration: none; text-decoration-color: transparent; } } } .navbar-nav &.active, .navbar-nav &.show { --bs--btn-active-border-color: var(--bs--btn-border-color); --bs--nav-link-active-color: var(--wp--preset--color--brand-2-600); --bs--nav-link-color: var(--wp--preset--color--brand-2-600); --bs--nav-link-hover-color: var(--wp--preset--color--brand-2-600); --bs--navbar-active-color: var(--wp--preset--color--brand-2-600); } } & .site-header__logo-sm, & .site-header__logo, & .site-header__logo-lg { max-width: 100%; max-height: 3.063rem; padding: 0; font-size: 0; object-fit: contain; object-position: left center; } & .site-header__navbar-toggle { --bs--btn-padding-y: 0.313rem; --bs--btn-padding-x: 0.5rem; --bs--btn-active-border-color: var(--bs--btn-border-color); --bs--btn-border-color: var(--bs--btn-color); --bs--btn-hover-border-color: var(--bs--btn-border-color); --bs--btn-border-radius: var(--bs--navbar-toggler-font-size, 1.5rem); --bs--btn-active-bg: transparent; --bs--btn-hover-bg: transparent; --bs--btn-active-color: var(--bs--btn-color); --bs--btn-color: var(--wp--preset--color--grey-100, #010101ff); --bs--btn-hover-color: var(--wp--preset--color--grey-100, #010101ff); border: 0; border-radius: var(--bs--btn-border-radius); background: transparent; box-shadow: none; color: var(--wp--preset--color--grey-100, #010101ff); font-size: 0; } } /* endregion Page Regions: Header */ /* ====================================================== */ /* region Page Regions: Content */ .site-content, .site-content__primary-container { margin-top: var(--header-sticky--height, 5rem) !important; } .page-title.site-content__entry-title { color: var(--wp--preset--color--brand-3-600); } /* note(rl): Fix inconsistent spacing between sidebar and page header. */ :root { --archive--title--margin-block-start: var(--wp--preset--spacing--40); --archive--title--margin-block-end: var(--wp--preset--spacing--30); --archive--title--padding-block-start: var(--wp--preset--spacing--30); @media (min-width: 48rem) { --archive--title--margin-block-start: var(--wp--preset--spacing--50); --archive--title--margin-block-end: var(--wp--preset--spacing--40); --archive--title--padding-block-start: 0rem; /* MUST have unit */ } } .site-content__entry-title { margin-block-start: var(--archive--title--margin-block-start); margin-block-end: var(--archive--title--margin-block-end); padding-block-start: var(--archive--title--padding-block-start); } aside.widget-area { margin-block-start: calc( var(--archive--title--margin-block-start) + var(--archive--title--margin-block-end) + var(--archive--title--padding-block-start) + (var(--h1--font-size) * var(--h1--line-height)) ); } /* endregion Page Regions: Content */ /* ====================================================== */ /* region Page Regions: Footer */ .site-footer, .site-footer__wrapper { --h1--color: var(--wp--preset--color--brand-1-inv); --h2--color: var(--wp--preset--color--brand-1-inv); --h3--color: var(--wp--preset--color--brand-1-inv); --h4--color: var(--wp--preset--color--brand-1-inv); --h5--color: var(--wp--preset--color--brand-1-inv); --h6--color: var(--wp--preset--color--brand-1-inv); --headings--color: var(--wp--preset--color--brand-1-inv); background-color: var(--wp--preset--color--body-text); color: var(--wp--preset--color--brand-1-inv); font-size: var(--wp--preset--font-size--normal); & a { color: var(--wp--preset--color--brand-1-inv); &:hover, &:focus, &:focus-visible { color: var(--wp--preset--color--brand-1-100); } } } .site-footer__information-wrapper { position: relative; } .site-footer__information-wrapper:before { content: ''; display: block; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background: #000000; opacity: 1; } .site-footer__information-container { position: relative; z-index: 1; } /* endregion Page Regions: Footer */ /* endregion Page Regions */ /* ////////////////////////////////////////////////////////////// */ /* ////////////////////////////////////////////////////////////// */ /* region Blocks */ :where(.wp-block-group) { /* :where() is used to apply 0 specificity to allow easy overrides */ padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--40); @media (min-width: 62rem) { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); } & :where(.wp-block-group) { padding-top: 0; padding-bottom: 0; @media (min-width: 62rem) { padding-top: 0; padding-bottom: 0; } } } .wp-block-group:has(> .wp-block-group.row > .section-columns-action-call-grid ~ .section-columns-action-call-grid ), .row:has(> .section-columns-action-call-grid__item) { /* Fix mismatched spacing values: */ --bs--gutter-x: 2.5rem; & > .section-columns-action-call-grid__item { @media (min-width: 62rem) { padding-right: calc(var(--bs--gutter-x) * .5) !important; padding-left: calc(var(--bs--gutter-x) * .5) !important; } } } .wp-block-group { /* fix rows within containers and the action call grid */ &:has(> .wp-block-group.row) { --bs--gutter-x: 2rem; --bs--gutter-y: 0; width: 100%; max-width: var(--wp--style--global--content-size); margin-right: auto !important; margin-left: auto !important; padding-inline: calc(var(--bs--gutter-x) * 0.5); & > .wp-block-group:has( > .section-columns-action-call-grid ~ .section-columns-action-call-grid ) { display: flex; flex-wrap: wrap; margin-right: calc(-0.5 * var(--bs--gutter-x)) !important; margin-left: calc(-0.5 * var(--bs--gutter-x)) !important; & .section-columns-action-call-grid, & .section-columns-action-call-grid__section-content, & .section-columns-action-call-grid__section-content--items, & .section-columns-action-call-grid__section-content-container { display: contents; } & .section-columns-action-call-grid .section-content-top { order: -10; flex: 0 0 100%; } & > :not( .section-columns-action-call-grid) { order: 10; flex: 0 0 100%; } } } } .card:has(> .row) { /* Spacing fix when a .row is immediately inside a .card - prevents .row negative margin incorrectly placing text */ /* margin-inline: calc(var(--bs--gutter-x) / -2); */ padding-inline: calc(var(--bs--gutter-x) / 2); } /* endregion Blocks */ /* ////////////////////////////////////////////////////////////// */ /* ////////////////////////////////////////////////////////////// */ /* region Forms */ /* ====================================================== */ /* region Forms: Contact Form 7 */ .wpcf7-form .row { --bs--gutter-y: var(--wp--preset--spacing--40); } .cf7-field { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); align-items: stretch; align-self: stretch; & > label { flex: 0 0 100%; max-width: 100%; color: var(--wp--preset--color--grey-500, var(--headings--color, #353535)); line-height: var(--h6--line-height, var(--heading--line-height)); text-decoration: var(--h6--text-decoration, var(--heading--text-decoration)); text-transform: var(--h6--text-transform, var(--heading--text-transform)); letter-spacing: var(--h6--letter-spacing, var(--heading--letter-spacing)); font-family: var(--h6--font-family, var(--wp--preset--font-family--headings)), sans-serif; font-size: var(--wp--preset--font-size--large); font-style: italic; font-weight: 600; } & .wpcf7-form-control-wrap, & .wpcf7-form-control, & .wpcf7-list-item { &, & label { display: flex; flex-wrap: wrap; flex: 0 0 100%; max-width: 100%; } } & .wpcf7-list-item-label { display: block; align-self: center; } & input:not([type="submit"]), & select { height: calc(1em + var(--wp--preset--spacing--40) + var(--wp--preset--spacing--40)); margin-top: auto; /* pushes the item to the end of the flex-container */ } & input:not([type="submit"]), & select, & textarea { align-self: stretch; flex: 0 0 100%; max-width: 100%; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border-width: 0.125rem; border-style: solid; border-color: var(--wp--preset--color--brand-1-500); border-radius: var(--bs--border-radius-xl, 1rem); background-color: var(--wp--preset--color--brand-1-100); opacity: 0.9; transition: all 0.1s ease-in-out; &:hover, &:focus, &:focus-visible { outline-offset: 0.125rem; border-color: var(--wp--preset--color--brand-1-600); background-color: var(--wp--preset--color--body-background); opacity: 1; } &:focus, &:focus-visible { outline: solid var(--bs--focus-ring-width) var(--bs--focus-ring-color); outline-offset: 0; } } & input[type="checkbox"], & input[type="radio"] { flex: 0 0 auto; margin-right: var(--wp--preset--spacing--40); } & textarea { --line-height: var(--body--line-height, 1.5); overflow: hidden; min-height: calc(var(--line-height) * 3rem); line-height: var(--line-height); } & input[type="submit"] { --button--border-color: var(--wp--preset--color--body-background); --button--hover--border-color: var(--wp--preset--color--brand-2-400); --button--background-color: var(--wp--preset--color--brand-1); --button--hover--background-color: var(--wp--preset--color--brand-1); --button--color: var(--wp--preset--color--brand-2-inv); --button--hover--color: var(--wp--preset--color--brand-2-inv); flex: unset; } & [title="Required"] { border: none; color: var(--wp--preset--color--vivid-red, #cc0000); text-decoration: none; } } .wpcf7 { & .screen-reader-response { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); margin: -1px; padding: 0; border: 0; word-wrap: normal !important; } & form.init .wpcf7-response-output, & form.resetting .wpcf7-response-output, & form.submitting .wpcf7-response-output { display: none; } & form .wpcf7-response-output { margin: 1rem 0 0; .popup-content & { margin: 0; } } & .wpcf7-not-valid-tip, & form .wpcf7-response-output { --form--validation-tip--background-color: var(--form--color--info, #00a0d2); --bg-color: hsl(from var(--form--validation-tip--background-color) h s 85%); padding: 0.25rem; border: 0.25rem solid hsl(from var(--form--validation-tip--background-color) h s l); background-color: var(--bg-color); /*@formatter:off*/ color: rgb(from var(--bg-color) clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255) clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255) clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255) ) !important; /*@formatter:on*/ } & form.sent .wpcf7-response-output { --form--validation-tip--background-color: var(--form--color--success, #46b450); } & form.failed .wpcf7-response-output, & form.aborted .wpcf7-response-output { --form--validation-tip--background-color: var(--form--color--danger, #dc3232); } & form.spam .wpcf7-response-output { --form--validation-tip--background-color: var(--form--color--error, #f56e28); } & form.invalid .wpcf7-response-output, & form.unaccepted .wpcf7-response-output, & form.payment-required .wpcf7-response-output { --form--validation-tip--background-color: var(--form--color--warning, #ffb900); } & .wpcf7-not-valid-tip { --form--validation-tip--background-color: var(--form--color--danger, #dc3232); display: block; padding: 0.5rem; color: var(--form--color--danger, #dc3232); font-size: 1rem; font-weight: normal; } & .wpcf7-form-control-wrap { position: relative; } & .use-floating-validation-tip .wpcf7-not-valid-tip { position: relative; z-index: 100; top: -2ex; left: 1rem; width: 24rem; padding: 0.25rem 0.875rem; border: 1px solid var(--form--color--danger, #dc3232); background: #ffffff; } } .wpcf7-form { .has-silo-primary-background-color &, & .has-silo-primary-background-color { & input[type="checkbox"] + .wpcf7-list-item-label::before { /* fix invisible element caused by identical background colour */ border-color: var(--silo--color--primary-inv); border-radius: 0; } } .popup-content & { /* fix missing layout styling on modal form */ display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40, 0.5rem); align-items: stretch; justify-content: start; & .wpcf7-spinner:empty, & .hidden-fields-container { display: contents; } & h3 { margin: 0; } & .form-control { /* nothing yet */ } & input[type="text"], & input[type="number"], & input[type="email"], & input[type="url"], & input[type="password"], & input[type="search"], & input[type="reset"], & input[type="tel"], & select, & textarea { width: 100%; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); } & label:has([type="checkbox"]) { display: flex; gap: var(--wp--preset--spacing--30); align-items: start; & [type="checkbox"] { margin-block: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--30); } } & .wpcf7-textarea { min-height: calc(var(--body--line-height, 1.6) * 2rem); max-height: calc(var(--body--line-height, 1.6) * 5rem); } } } /* endregion Forms - Contact Form 7 */ /* endregion Forms */ /* ////////////////////////////////////////////////////////////// */ /* ////////////////////////////////////////////////////////////// */ /* region Classes */ .read-more, .btn--arrow { /*noinspection CssUnresolvedCustomProperty*/ &::after { content: "→"; display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; margin-left: 0.5em; padding: 0.25em; border: var(--button--arrow--border-width, 1px) var(--button--arrow--border-style, solid) var(--button--arrow--color, var(--button--color, var(--wp--preset--color--body-background, #fefefe))); border-radius: 50rem; color: var(--button--color, var(--wp--preset--color--body-background, #fefefe)); font-size: 66.6666%; } } /* ====================================================== */ /* region Classes: Colours */ .has-silo-primary-background-color { /* fix unreadable text caused by using the same colour as background */ & a:where(:not(.wp-element-button)):hover, & a:where(:not(.wp-element-button)):focus { color: var(--silo--color--primary-inv); } } /* region Classes: Colours */ /* ====================================================== */ /* region Classes: Image Utilities */ /* @formatter:off */ .filter-invert-light { filter: grayscale(1) invert(1) brightness(2) !important; } .filter-invert-dark { filter: grayscale(1) invert(1) brightness(0) !important; } .filter-reset { filter: unset !important; } .filter-inherit { filter: initial !important; } .filter-initial { filter: initial !important; } /* @formatter:on */ @media (min-width: 36rem) { /* @formatter:off */ .filter-sm-invert-light { filter: grayscale(1) invert(1) brightness(2) !important; } .filter-sm-invert-dark { filter: grayscale(1) invert(1) brightness(0) !important; } .filter-sm-reset { filter: unset !important; } .filter-sm-inherit { filter: initial !important; } .filter-sm-initial { filter: initial !important; } /* @formatter:on */ } @media (min-width: 48rem) { /* @formatter:off */ .filter-md-invert-light { filter: grayscale(1) invert(1) brightness(2) !important; } .filter-md-invert-dark { filter: grayscale(1) invert(1) brightness(0) !important; } .filter-md-reset { filter: unset !important; } .filter-md-inherit { filter: initial !important; } .filter-md-initial { filter: initial !important; } /* @formatter:on */ } @media (min-width: 62rem) { /* @formatter:off */ .filter-lg-invert-light { filter: grayscale(1) invert(1) brightness(2) !important; } .filter-lg-invert-dark { filter: grayscale(1) invert(1) brightness(0) !important; } .filter-lg-reset { filter: unset !important; } .filter-lg-inherit { filter: initial !important; } .filter-lg-initial { filter: initial !important; } /* @formatter:on */ } @media (min-width: 75rem) { /* @formatter:off */ .filter-xl-invert-light { filter: grayscale(1) invert(1) brightness(2) !important; } .filter-xl-invert-dark { filter: grayscale(1) invert(1) brightness(0) !important; } .filter-xl-reset { filter: unset !important; } .filter-xl-inherit { filter: initial !important; } .filter-xl-initial { filter: initial !important; } /* @formatter:on */ } @media (min-width: 88rem) { /* @formatter:off */ .filter-xxl-invert-light { filter: grayscale(1) invert(1) brightness(2) !important; } .filter-xxl-invert-dark { filter: grayscale(1) invert(1) brightness(0) !important; } .filter-xxl-reset { filter: unset !important; } .filter-xxl-inherit { filter: initial !important; } .filter-xxl-initial { filter: initial !important; } /* @formatter:on */ } .size-240x32 { min-width: 15rem; min-height: 2rem; } /* endregion Classes: Image Utilities */ /* ====================================================== */ /* region Classes: Borders */ .border-solid { border-style: solid !important; } .border-1 { border-width: 1px; border-style: solid; } .border-2 { border-width: 2px; border-style: solid; } .border-3 { border-width: 3px; border-style: solid; } .border-4 { border-width: 4px; border-style: solid; } .border-5 { border-width: 5px; border-style: solid; } /* endregion Classes: Borders */ /* ====================================================== */ /* region Classes: Font Weight */ /* @formatter:off */ .has-reset-font-weight { font-weight: unset !important; } .has-initial-font-weight { font-weight: initial !important; } .has-inherit-font-weight { font-weight: inherit !important; } .has-100-font-weight { font-weight: 100 !important; } .has-200-font-weight { font-weight: 200 !important; } .has-300-font-weight { font-weight: 300 !important; } .has-400-font-weight { font-weight: 400 !important; } .has-500-font-weight { font-weight: 500 !important; } .has-600-font-weight { font-weight: 600 !important; } .has-700-font-weight { font-weight: 700 !important; } .has-800-font-weight { font-weight: 800 !important; } .has-900-font-weight { font-weight: 900 !important; } /* @formatter:on */ /* endregion Classes: Font Weight */ .uppercase { text-transform: uppercase !important; } /* endregion Classes */ /* ////////////////////////////////////////////////////////////// */ /* ////////////////////////////////////////////////////////////// */ /* region Accordion / Complianz Cookie Details */ .accordion, details.cmplz-category, .cmplz-dropdown { --bs--accordion-border-width: var(--bs--border-width); --bs--accordion-btn-icon-width: 1.25rem; --bs--accordion-body-padding-y: 1rem; --bs--accordion-btn-padding-y: 0.5rem; --bs--accordion-body-padding-x: 1.25rem; --bs--accordion-btn-padding-x: var(--bs--accordion-body-padding-x); --bs--accordion-border-color: var(--bs--border-color); --bs--accordion-btn-focus-border-color: hsl(from var(--wp--preset--color--brand-1) h s l / 100%); --bs--accordion-border-radius: var(--bs--border-radius); --bs--accordion-inner-border-radius: calc( var(--bs--border-radius) - (var(--bs--border-width)) ); --bs--accordion-active-bg: color-mix(in srgb, var(--bs--accordion-bg), var(--wp--preset--color--brand-1) 5%); --bs--accordion-bg: hsl(from var(--wp--preset--color--grey-100) h s calc(l + 7)); /* transparent; */ --bs--accordion-btn-bg: var(--bs--accordion-bg); --bs--accordion-btn-focus-box-shadow: 0 0 0 2px hsl(from var(--bs--accordion-btn-focus-border-color) h s l / 75%); --bs--accordion-active-color: var(--bs--primary-text-emphasis); --bs--accordion-btn-color: var(--bs--heading-color); --bs--accordion-color: var(--bs--body-color); --bs--accordion-btn-icon-transition: transform 0.2s ease-in-out; --bs--accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; --bs--accordion-btn-icon-transform: rotate(-180deg); --bs--accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23921f15'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs--accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232f2f2fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .accordion, #cmplz-manage-consent-container, #cmplz-cookies-overview, #cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode { & .accordion-button, & summary, & summary:has(.cmplz-category-header), & .cmplz-service-header:is(summary) { display: flex; position: relative; align-items: center; width: 100%; padding: var(--bs--accordion-btn-padding-y) var(--bs--accordion-btn-padding-x); border: 0; background-color: var(--bs--accordion-btn-bg); color: var(--bs--accordion-btn-color); text-align: left; font-size: 1rem; overflow-anchor: none; [open] > & { background-color: var(--bs--accordion-active-bg); box-shadow: inset 0 calc(-1 * var(--bs--accordion-border-width)) 0 var(--bs--accordion-border-color); color: var(--bs--accordion-active-color); &::after { background-image: var(--bs--accordion-btn-active-icon); transform: var(--bs--accordion-btn-icon-transform); } } &::after { content: ""; flex-shrink: 0; width: var(--bs--accordion-btn-icon-width); height: var(--bs--accordion-btn-icon-width); margin-left: auto; background-image: var(--bs--accordion-btn-icon); background-repeat: no-repeat; background-size: var(--bs--accordion-btn-icon-width); } &:hover, &:focus { z-index: 2; border-color: var(--bs--accordion-btn-focus-border-color); background: var(--bs--accordion-active-bg); } &:focus { z-index: 3; outline: 0; border-color: var(--bs--accordion-btn-focus-border-color); box-shadow: var(--bs--accordion-btn-focus-box-shadow); } & summary .cmplz-category-title, & summary:has(.cmplz-category-header), &:where(.cmplz-service-header:is(summary)) h3 { margin-bottom: 0; } } & .accordion-item, & details.cmplz-category, &.cmplz-manage-consent-container .cmplz-categories details.cmplz-category.cmplz-category:not(:last-child), & .cmplz-dropdown { margin-block-end: var(--bs--accordion-body-padding-y, var(--bs--gutter-y)); background-color: var(--bs--accordion-bg); color: var(--bs--accordion-color); border-block-start: 0px solid transparent; border-inline-end: 0px solid transparent; border-start: 0px solid transparent; border-block-end: var(--bs--accordion-border-width) solid var(--bs--accordion-border-color); /* &:not(:first-of-type) { border-top: 0; } */ } &:not(.accordion), /* should not apply to the base class, only compianz */ & .accordion-body, & details.cmplz-category, & .cmplz-dropdown { & .cmplz-description, & .cmplz-service-description, & .cmplz-sharing-data { margin: 0 var(--bs--accordion-body-padding-x); padding-block-start: var(--bs--accordion-body-padding-y); padding-inline: var(--bs--accordion-body-padding-x); &, & p:last-child { margin-block-end: 0; padding-block-end: 0; } } & .cookies-per-purpose { margin: var(--bs--accordion-body-padding-y) var(--bs--accordion-body-padding-x); } & .cmplz-service-description, & .cmplz-sharing-data { width: calc(50% - var(--bs--accordion-body-padding-y)); } & .cmplz-description { width: calc(100% - var(--bs--accordion-body-padding-y)); } } } /* endregion Accordion / Complianz Cookie Details */ /* ////////////////////////////////////////////////////////////// */ /* ////////////////////////////////////////////////////////////// */ /* region Block Styles */ :not(.wp-block-list > li) > ol.wp-block-list.is-legal-style { &, .editor-styles-wrapper & { padding-left: 0; &, & ol, & ul { display: flex; flex-direction: column; align-items: stretch; } & li::marker { color: var(--wp--preset--color--brand-1-500); } & > li { margin-top: var(--wp--preset--spacing--50); color: var(--h2--color); line-height: var(--h2--line-height); text-decoration: var(--h2--text-decoration); text-transform: var(--h2--text-transform); letter-spacing: var(--h2--letter-spacing); list-style-position: inside; font-family: var(--h2--font-family), sans-serif; font-size: var(--h2--font-size); font-style: var(--h2--font-style); font-weight: var(--h2--font-weight); & > .block-editor-rich-text__editable { margin-top: calc(var(--h2--line-height) * var(--h2--font-size) * -1 - 2px); padding-left: 1em; } /* all sub-lists and list items */ & ul { &, & li { /* this selector will apply a 1rem gap between