/* mixins */ /* borders et al */ /* forms */ :root { --submenu-item-border: 1px solid rgba(255, 255, 255, 0.2); } /* widths et al */ /* using map.get */ /* used in scssconstants/constants/_sizes.scss: $deskwidth: page-width(tablet-landscape); */ /* end used in scssconstants/constants/_sizes.scss: $deskwidth: page-width(tablet-landscape); */ /* min or max or min and max using sass map */ /* eg */ /* section { @include mq(handheld-plus) { background: pink; } @include mq(handheld, max) { background: skyblue; } @include mq(handheld, large-tablet) { border: dashed 0.5em turquoise; } } */ /* OR */ /* range using lists */ /* eg */ /* main > p { @include mqrange(small) { font-weight: bold; } @include mqrange(large) { text-decoration: darkorchid underline; } @include mqrange(desktop) { font-size: 0.85rem; font-family: sans-serif; text-transform: uppercase; color: hsl(0, 0%, 25%); } } */ /* font layout */ /* line-height */ /* forms */ /* $ffborderradius: $borderradius; // see decorations.scss */ /* 0.25em bottom padding to cater for 1.2 lineheight to allow for text wrap on buttons on mobile */ /* see scss/_mixins/_media-query-width.scss for page-width() function */ /* 1100 / 16 = 68.75 */ /* 69 * 16 = 1104 */ /* 69rem = 1104px */ /* 76rem = 1216px */ /* 77rem = 1232px */ /* 78rem = 1248px */ /* 88rem = 1408px */ /* 94rem = 1504px widest */ :root { --button-spacing: 1.25em; --image-icon-size: 126px; --mobilemaxwidth: 90vw; --deskwidth: 87rem; --pagecontentwidth: 77rem; } @media only screen and (max-width: 83.5rem) { :root { --breakoutwidth: 0; --pagesidemargin: 5vw; /* the properties you put in */ } } @media only screen and (min-width: 83.5625rem) { :root { --breakoutwidth: min(3vw, 3rem); --pagesidemargin: 2vw; /* the properties you put in */ } } body { --banner-height: min(50vmin, 300px); } :root { --header-logo-width-aspect-ratio: 70; --header-logo-height-aspect-ratio: 70; --footer-logo-width-aspect-ratio: 125; --footer-logo-height-aspect-ratio: 125; --header-logo-width: calc(var(--header-logo-width-aspect-ratio) * 1px); --header-logo-height: calc(var(--header-logo-height-aspect-ratio) * 1px); --footer-logo-width: calc(var(--footer-logo-width-aspect-ratio) * 1px); --footer-logo-height: calc(var(--footer-logo-height-aspect-ratio) * 1px); } /* hide / show */ /* for screen reader text */ /* for screen reader text */ /* for mobile menu */ /* for mobile menu */ /* tab into hidden articles */ /* tab into hidden articles and show them */ /* for logo */ /* before content so list items are still recognised by some screen readers */ /* @link https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */ /* for print css */ /* for list items */ /* clean-css ignore:start */ @layer reset-forms-buttons, site-notice; /* clean-css ignore:end */ /* form fields */ /* button base */ /* font mixins */ /* font families */ :root { --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; --serif-antique: Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", "Georgia Pro", Georgia, serif; --sans-serif: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif; --monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, "DejaVu Sans Mono", Consolas, monospace; --cursive: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive; --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } /* 300 */ /* used for wordpress login page */ /* $fontbanner: var(--serif-antique); $fonthead: var(--serif-antique); $fontbutton: var(--monospace); $fontbold: var(--monospace); $fontfam: var(--monospace); $fontnumberbutton: var(--monospace); $fontsystem: var(--monospace); // used for wordpress login page */ /* form fields */ /* form fields & buttons */ /* buttons */ /* form fields */ /* buttons */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode https://codepen.io/thebabydino/pen/dyOvmRY difference exclusion */ /* form fields */ /* buttons */ /* form fields */ /* cater for pseudo element alt text support where there is some */ /* @include content("*", "splat"); */ /* mixins for ::before ::after placement and content */ /* eg */ /* .pseudo-element-absolute { */ /* @include sudoplace(3%, 3%, 3%, 3%, $content: "Hello World", $pos: before) { */ /* background-color: pink; */ /* } */ /* } */ /* buttons */ /* form fields */ /* form fields */ /* for mixin includes */ /* for mixin includes */ /* for @mixin container-padding: */ /* block padding no top padding @include container-padding($pt: null); no bottom padding @include container-padding($pb: null); */ /* layout mixins */ /* truncate text */ /* end truncate text */ /* https://codepen.io/kevinpowell/pres/GRWYNLM */ /* layout mixins */ /* eg .test-even-columns { @include even-columns($size: tight); } */ /* layout mixins */ /* page grid layout */ /* layout mixins */ /* page content grid layout */ /* eg @include page-content-two-column-grid(32, 5); */ /* layout mixins */ /* page content grid layout */ /* layout mixins */ /* page content grid layout */ /* end page grid layout */ /* comments section with avatars layout - eg .comment row */ /* min( 64px - avatar width, 50px - smallest mobile avatar width, 10vw - largest avatar width when text is zoomed - stop zoom from making image take up too much space ) */ /* https://www.youtube.com/watch?v=3yfswsnD2sw&t=1254s */ /*Keyword values scroll-snap-type: none; scroll-snap-type: x; Optional mandatory | proximity scroll-snap-type: y; Optional mandatory | proximity ... scroll-snap-type: block; Optional mandatory | proximity scroll-snap-type: inline; Optional mandatory | proximity ... scroll-snap-type: both;*/ /* mixin */ /* media queries */ /* prefers-reduced-motion: no-preference | reduce */ /* eg @include transition(transform, 250ms, linear) */ /* - scroll-behavior: auto | smooth; */ /* ie @include scroll */ /* form legend and labels */ :root { --fontweight300: 300; --fontweight400: 400; --fontweight500: 500; --fontweight600: 600; --fontweight700: 700; --bannerweight: 700; --headingweight: 400; --bodytextweight: 400; --bodytextbold: 700; --linktextweight: 400; --inputfontweight: 400; --buttontextweight: 400; --cardtextweight: 400; } /* https://simplecss.eu/pxtoems.html */ :root { --fontsize12: 0.75rem; --fontsize13: 0.8125rem; --fontsize14: 0.875rem; --fontsize15: 0.9375rem; --fontsize16: 1rem; --fontsize17base: 1.0625rem; --fontsize39: 2.4375rem; --fontsize44: 2.75rem; --fontsize48: 3rem; --fontsize17: clamp(0.9rem, 1vw + 0.5rem, 1.0625rem); --fontsize17cq: clamp(0.9rem, 5cqw + 0.5rem, 1.0625rem); --fontsize18base: 1.125rem; --fontsize18: clamp(0.9rem, 1vw + 0.5rem, 1.125rem); --fontsize19: clamp(0.9rem, 1vw + 0.5rem, 1.1875rem); --fontsize20: clamp(1rem, 1vw + 0.5rem, 1.25rem); --fontsize20base: 1.25rem; --fontsize22: clamp(1rem, 1vw + 1.375rem, 1.375rem); --fontsize22base: 1.375rem; --fontsize23: clamp(1rem, min(9vw, 1.4375rem), 1.4375rem); --fontsize24: clamp(1rem, min(9vw, 1.5rem), 1.5rem); --fontsize25: clamp(1.25rem, 2vw + 1rem, 1.5625rem); --fontsize25cq: clamp(1.0625rem, min(6cqw, 1.5625rem), 1.5625rem); --fontsize30: clamp(2rem, 2vw + 1rem, 1.875rem); --fontsize35: clamp(2.25rem, 3vw + 1rem, 2.1875rem); --fontsize32: 2rem; --fontsize40: clamp(2.5rem, 3vw + 1rem, 2.5rem); --fontsize45: clamp(1.75rem, 4vw + 1rem, 2.8125rem); --fontsize43: clamp(1.75rem, 4vw + 1rem, 2.6875rem); --fontsize50: clamp(1.5rem, 7vw + 1rem, 3.125rem); --fontsize52: clamp(1.5rem, 7vw + 1rem, 3.25rem); --fontsize26-39: clamp(1.625rem, 4vw + 1rem, 2.4375rem); --fontsize40-90: clamp(2.5rem, 7vw + 1rem, 5.625rem); --fontsize66: clamp(3.125rem, 2vw + 1rem, 4.125rem); --fontsize32-78: clamp(2rem, 2vw + 1rem, 4.875rem); --fontsize70: clamp(1.5rem, 7vw + 1rem, 4.375rem); --fontsizeh1: var(--fontsize45); --fontsizeh2: var(--fontsize32); --fontsizeh3: clamp(1.25rem, 2vw + 1rem, 1.5625rem); --fontsizeh4: var(--fontsize25); --fontsizeh5: var(--fontsize22); --fontsizeh6: var(--fontsize20); --bodytextsize: var(--fontsize16); --fontsizeh2small: var(--fontsize18base); --fontsizefooterh2: var(--fontsize20base); --fontsizefootertext: var(--fontsize20base); --highlighttextsize: var(--fontsize20base); --cardtitlesize: var(--fontsize20base); --cardtextsize: var(--fontsize20base); --featcardtextsizefallback: clamp(0.8rem, min(6vw, 1rem), clamp(0.9rem, 1vw + 0.5rem, 1.0625rem)); --featcardtextsize: clamp(0.8rem, min(6cqw, 1rem), clamp(0.9rem, 1vw + 0.5rem, 1.0625rem)); --label: var(--fontsize20base); --caption: var(--fontsize18base); --fontsmall: var(--fontsize16); --fontsizereq: var(--fontsize16); --buttontextsize: var(--fontsize17base); --inputtextsize: var(--fontsize18base); } @media only screen and (max-width: 48rem) { :root { /* the properties you put in */ } :root .site-content { --font-mobile-calc: 1.3; --bodytextsize: calc(var(--fontsize16) * var(--font-mobile-calc)); --fontsizeh2small: calc(var(--fontsize18base) * var(--font-mobile-calc)); } } /* .prev { @include triangle(2rem, inherit, left); } .next { @include triangle(2rem, inherit, right); } .up { @include triangle(2rem, inherit, up); } .down { @include triangle(2rem, inherit, down); } */ body:has(.headertitle-sitemenu_content-one.nav-state-open) .tbrtheme-site-notice { display: none; } @layer site-notice { .tbrtheme-site-notice { --spacing: min(6vw, 3rem); --text: var(--light); outline: 0.125em solid var(--color-golden); outline-offset: -0.75em; display: grid; align-content: start; grid-template-columns: [fullwidth-start left-edge-start] minmax(min(var(--pagesidemargin), 5rem), 1fr) [page-start right-edge-start] minmax(min(5vw, 5rem), 1fr) [breakout-start] var(--breakoutwidth) [content-start] min(80vw, 77rem) [content-end] var(--breakoutwidth) [breakout-end] minmax(min(5vw, 5rem), 1fr) [page-end left-edge-end] minmax(min(var(--pagesidemargin), 5rem), 1fr) [fullwidth-end right-edge-end]; padding-block: var(--spacing); color: var(--text); background-color: var(--color-call-to-action); } .tbrtheme-site-notice-dismiss[type=button] { --btn-fg: var(--text); --btn-bg: transparent; padding: 0; border-radius: 0; text-decoration: underline; } .tbrtheme-site-notice-dismiss[type=button]:hover, .tbrtheme-site-notice-dismiss[type=button]:active, .tbrtheme-site-notice-dismiss[type=button]:focus-visible { --btn-fg: var(--text); --btn-bg: transparent; text-decoration: none; /* the properties you put in */ } .tbrtheme-site-notice-dismiss[type=button]::before { content: none; } .tbrtheme-site-notice-wrapper { inline-size: 100%; grid-column: content; display: grid; grid-template-columns: 1fr auto; align-items: end; } .tbrtheme-site-notice-content h2 { font-style: normal; font-family: "Sansita Swashed", var(--sans-serif); font-size: var(--fontsizeh1); font-weight: var(--headingweight); line-height: 1.1; } .tbrtheme-site-notice-content a { display: inline !important; } @media only screen and (min-width: 35.5625rem) { .tbrtheme-site-notice:not(.js-hide) + .headertitle-sitemenu-wrapper .site-header { margin-block-start: -0.5rem !important; /* the properties you put in */ } } .tbrtheme-site-notice.tbrtheme-site-notice-content-centered .tbrtheme-site-notice-wrapper { display: grid; grid-template-columns: 1fr; justify-items: center; gap: var(--spacing); } .tbrtheme-site-notice.tbrtheme-site-notice-content-centered .tbrtheme-site-notice-content { text-align: center; } .tbrtheme-site-notice.tbrtheme-site-notice-content-centered .tbrtheme-site-notice-content p { margin-inline: auto; } } /* @forward "image-map"; */ /* @forward "search"; // - search dialogue*/ /* Details Summary mixins */ /* not supported in chrome */ /* @mixin replace-summary-marker($content, $content-open) - not supported in chrome */ /* { */ /* summary */ /* { */ /* &::-webkit-details-marker */ /* { */ /* content: $content; */ /* } */ /* display: list-item; */ /* &::marker */ /* { */ /* content: $content; */ /* } */ /* } */ /* &[open] > summary */ /* { */ /* &::marker */ /* { */ /* content: $content-open; */ /* } */ /* } */ /* } */ /* @mixin change-summary-marker($list-style, $list-style-open) - not supported in chrome */ /* { */ /* summary */ /* { */ /* display: list-item; */ /* list-style-type: $list-style; */ /* } */ /* &[open] > summary */ /* { */ /* list-style-type: $list-style-open; */ /* } */ /* } */ /* end not supported in chrome */ @keyframes slide-up { 0% { opacity: 0; transform: translateY(7vh); } 100% { opacity: 1; transform: translateY(0); } } .tbrtheme-accordion { max-inline-size: 90vw; position: relative; z-index: 1; width: 100%; } .tbrtheme-accordion-wrapper { --accordian-table-padding: 2em; --accordian-table-padding-half: calc(var(--accordian-table-padding) / 2); display: inline-grid; width: 100%; background-color: var(--faq-summary-bg-closed); margin-block-end: min(6vw, 3rem); } @media only screen and (max-width: 83.5rem) { .tbrtheme-accordion-wrapper { /* the properties you put in */ } .tbrtheme-accordion-wrapper .tbrtheme-accordion-content h2:first-of-type { display: none; } .tbrtheme-accordion-wrapper .tbrtheme-accordion-content p:last-of-type { margin-block-end: var(--margin-size, 1.5em); } } @media only screen and (min-width: 83.5625rem) { .tbrtheme-accordion-wrapper { display: grid; align-content: start; --colonewidth: 30rem; --midrulepos: calc(var(--colonewidth) + 3rem); grid-template-columns: var(--colonewidth) 1fr; column-gap: 6rem; min-block-size: var(--accordian-max-content); position: relative; /* the properties you put in */ } .tbrtheme-accordion-wrapper::before { content: " "; position: absolute; inset: 0 auto 0 var(--midrulepos); inline-size: 0.25em; background-color: var(--feature-colour, var(--test)); } .tbrtheme-accordion-wrapper .tbrtheme-accordion { grid-column: 1; } .tbrtheme-accordion-wrapper .tbrtheme-accordion-content { grid-column: 2; position: absolute; padding-block: var(--accordian-table-padding-half); max-block-size: 100%; } .tbrtheme-accordion-wrapper .tbrtheme-accordion-content p { --sentencemaxwidth: 56ch; } } .tbrtheme-accordion-wrapper h2 { font-size: var(--fontsizeh2small); } .tbrtheme-accordion summary { display: flex; justify-content: space-between; padding-block: 2em; margin-block-end: 0.125em; background-color: var(--faq-summary-bg-closed); position: relative; } .tbrtheme-accordion summary::-webkit-details-marker { display: none; } .tbrtheme-accordion summary::after { content: " "; position: absolute; inset: auto 0 0; border-bottom: 1px solid var(--faq-line, var(--test)); } .tbrtheme-accordion summary > * { display: inline-block; } .tbrtheme-accordion summary h2 { transition: color 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); margin: 0; } .tbrtheme-accordion summary > svg { flex: 0 0 auto; margin-block-start: 0.3em; margin-inline-start: auto; margin-inline-end: 0.5em; fill: var(--faq-summary-text-closed); } .tbrtheme-accordion summary:hover, .tbrtheme-accordion summary:active, .tbrtheme-accordion summary:focus-visible { background-color: var(--faq-summary-bg-hover); /* the properties you put in */ } .tbrtheme-accordion summary:hover h2, .tbrtheme-accordion summary:active h2, .tbrtheme-accordion summary:focus-visible h2 { color: var(--faq-summary-text-hover); } .tbrtheme-accordion summary:hover > svg, .tbrtheme-accordion summary:active > svg, .tbrtheme-accordion summary:focus-visible > svg { fill: var(--faq-summary-text-hover); } .tbrtheme-accordion[open] svg.closed { display: none; } @media only screen and (max-width: 83.5rem) { .tbrtheme-accordion[open] svg { /* the properties you put in */ } .tbrtheme-accordion[open] svg.open { transform: rotate(90deg); } } .tbrtheme-accordion[open] summary { background-color: var(--faq-summary-bg-open); } .tbrtheme-accordion[open] summary h2 { color: var(--faq-summary-text-open); } .tbrtheme-accordion[open] summary > svg { fill: var(--faq-summary-text-open); transition: transform 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } @media only screen and (max-width: 83.5rem) { .tbrtheme-accordion[open] summary { /* the properties you put in */ } .tbrtheme-accordion[open] summary::after { content: none; } } .tbrtheme-accordion[open] summary:hover, .tbrtheme-accordion[open] summary:active, .tbrtheme-accordion[open] summary:focus-visible { /* the properties you put in */ } .tbrtheme-accordion[open] summary:hover > svg, .tbrtheme-accordion[open] summary:active > svg, .tbrtheme-accordion[open] summary:focus-visible > svg { transform: translateX(1em); } .tbrtheme-accordion:not([open]) svg.open { display: none; } .tbrtheme-accordion:not([open]) h2 { color: var(--faq-summary-text-closed); } .tbrtheme-accordion-content { /* div following (sibling of) details */ position: relative; } .tbrtheme-accordion-content, .tbrtheme-accordion-content > * { color: var(--txt); background-color: var(--bg); } @media only screen and (max-width: 83.5rem) { details.tbrtheme-accordion[open] + div.tbrtheme-accordion-content { border-bottom: 1px solid var(--faq-line, var(--test)); } /* the properties you put in */ } @keyframes accordion-contents-hide { 0% { clip-path: inset(0 0 0 0); } 99% { clip-path: inset(100% 0 0 0); transition: clip-path var(--transition-timing) cubic-bezier(0.55, 0.09, 0.68, 0.53), max-height var(--transition-timing) cubic-bezier(0.55, 0.09, 0.68, 0.53); } 100% { clip-path: inset(100% 0 0 0); transition: clip-path var(--transition-timing) cubic-bezier(0.55, 0.09, 0.68, 0.53); } } @keyframes accordion-contents-show { 0% { opacity: 0; clip-path: inset(0 0 100% 0); } 1% { display: block; } 100% { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity var(--transition-timing) cubic-bezier(0.55, 0.09, 0.68, 0.53), clip-path var(--transition-timing) cubic-bezier(0.55, 0.09, 0.68, 0.53); } } /* stylelint-disable */ .tbrtheme-accordion-content { --transition-timing: 1000ms; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .tbrtheme-accordion-content { transition: none; } } @media only screen and (min-width: 83.5625rem) { .tbrtheme-accordion-content { overflow-y: auto; padding-inline-end: 3rem; --scrollbar-thumb: var(--feature-colour); } /* the properties you put in */ } /* stylelint-enable */ @media only screen and (max-width: 83.5rem) { .tbrtheme-accordion:not([open]).accordion-initial + .tbrtheme-accordion-content { max-height: 0; /* the properties you put in */ } } .tbrtheme-accordion:not([open]) + .tbrtheme-accordion-content { opacity: 0; } @media only screen and (max-width: 83.5rem) { .tbrtheme-accordion:not([open]) + .tbrtheme-accordion-content { max-height: 0; /* the properties you put in */ } } .tbrtheme-accordion[open] + .tbrtheme-accordion-content { opacity: 0; animation: slide-up cubic-bezier(0, 0, 0.2, 1) var(--transition-timing) forwards; z-index: 10; } /* @forward "fullscreen"; */ /* @forward "hover-reveal"; */ /* @forward "lightbox"; */ /* @forward "spinner"; */ [class^=wp-block-tbrtheme-testimonial] :is(h2, h3) { font-family: "Sansita Swashed", var(--sans-serif); font-weight: var(--headingweight); letter-spacing: var(--heading-letter-spacing); text-wrap: balance; } [class^=wp-block-tbrtheme-testimonial] h2 { font-size: var(--fontsizeh2); margin-block-end: 0.25em; line-height: 1; } [class^=wp-block-tbrtheme-testimonial] h3 { font-size: var(--fontsizeh3); line-height: 1; } [class^=wp-block-tbrtheme-testimonial] .tbrtheme-testimonial-subtitle { color: var(--color-primary-700); } @media (prefers-color-scheme: dark) { [class^=wp-block-tbrtheme-testimonial] .tbrtheme-testimonial-subtitle { color: var(--txt); } } .wp-block-tbrtheme-testimonial-latest { background-color: var(--alt-bg); position: relative; padding-block: min(6vw, 3rem); } .wp-block-tbrtheme-testimonial-latest > * { z-index: 2; position: relative; } .wp-block-tbrtheme-testimonial-latest::before { content: " "; position: absolute; inset: 0 0 0 50%; width: 100vw; transform: translateX(-50vw); background-color: var(--alt-bg); z-index: 1; } @media only screen and (min-width: 52.1875rem) { .wp-block-tbrtheme-testimonial-latest .tbrtheme-testimonial { grid-template-areas: "header header" "image content" ". footer"; /* the properties you put in */ } } .wp-block-tbrtheme-testimonial-all { display: grid; row-gap: min(6vw, 3rem); padding-block-end: min(10vw, 5rem); } @media only screen and (min-width: 52.1875rem) { .wp-block-tbrtheme-testimonial-all .tbrtheme-testimonial { grid-template-areas: "header header" "image content"; /* the properties you put in */ } } .wp-block-tbrtheme-testimonial-all .tbrtheme-testimonial:nth-child(2n+1) { background-color: var(--alt-bg); position: relative; padding-block: min(6vw, 3rem); } .wp-block-tbrtheme-testimonial-all .tbrtheme-testimonial:nth-child(2n+1) > * { z-index: 2; position: relative; } .wp-block-tbrtheme-testimonial-all .tbrtheme-testimonial:nth-child(2n+1)::before { content: " "; position: absolute; inset: 0 0 0 50%; width: 100vw; transform: translateX(-50vw); background-color: var(--alt-bg); z-index: 1; } .wp-block-tbrtheme-diary-dates + .wp-block-tbrtheme-testimonial-latest { --top-space: 1.75rem; margin-block-start: calc(var(--top-space) * -1); padding-block-start: min(14vw, 3rem + var(--top-space)); } @media only screen and (min-width: 52.1875rem) { .tbrtheme-testimonial { display: grid; column-gap: min(6vw, 3rem); grid-template-columns: repeat(2, 1fr); /* the properties you put in */ } } .tbrtheme-testimonial-header { grid-area: header; margin-block-end: var(--margin-size, 1.5em); } .tbrtheme-testimonial-image { grid-area: image; } .tbrtheme-testimonial-content { grid-area: content; } .tbrtheme-testimonial-content b, .tbrtheme-testimonial-content strong { color: var(--color-primary-700); } @media (prefers-color-scheme: dark) { .tbrtheme-testimonial-content b, .tbrtheme-testimonial-content strong { color: var(--color-primary-100); } } .tbrtheme-testimonial-footer { grid-area: footer; } /* browser resets */ /* https://www.youtube.com/watch?v=yYGLEy7CiT0 https://polypane.app/blog/forced-colors-explained-a-practical-guide/ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors CanvasText: Regular text color Canvas: Background color LinkText: Link color ButtonText: Button text color ButtonFace: Button background color HighlightText: Selected text color Highlight: Selected text background color */ @media (forced-colors: active) { .site-nav li { margin: 0.15em; } .site-nav li a { outline-offset: 0; } nav.nav-footer ul.menu-footer li { margin-block-start: 1em; } nav.nav-footer ul.menu-footer li a { padding: 0; } } .footer-logo.forced-light { display: none; } @media (prefers-color-scheme: light) and (forced-colors: active) { .footer-logo.default { display: none; } .footer-logo.forced-light { display: block; } } /* browser resets */ /* colours (and base font size) */ :root { /* https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ */ color-scheme: light dark; /* both supported */ font-size: 16px; color: var(--txt, var(--test)); background-color: var(--bg, var(--test)); } body { /* stylelint-disable-line no-duplicate-selectors */ background-color: var(--bg, var(--test)); font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; text-rendering: geometricprecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; font-weight: var(--bodytextweight); } .tbrtheme-alt-bg { background-color: lightgray; background-color: var(--alt-bg, var(--test)); } .tbrtheme-alt-bg > * { position: relative; } .tbrtheme-alt-bg-three, .tbrtheme-alt-bg-two { color: var(--light); font-weight: var(--fontweight400); padding-block: min(10vw, 5rem); } .tbrtheme-alt-bg-three h2, .tbrtheme-alt-bg-two h2 { color: var(--light); } .tbrtheme-alt-bg-three p, .tbrtheme-alt-bg-two p { max-inline-size: min(58ch, 90vw); } .tbrtheme-alt-bg-two { background-color: var(--color-primary-500); } @media (prefers-color-scheme: dark) { .tbrtheme-alt-bg-two { color: var(--dark); } .tbrtheme-alt-bg-two h2 { color: var(--dark); } } .tbrtheme-alt-bg-three { background-color: var(--color-tertiary); } .tbrtheme-atn-bg { color: var(--light); background-color: var(--color-primary-700); } .tbrtheme-atn-bg h2 { text-transform: none; color: var(--color-primary-500); } @media (prefers-color-scheme: dark) { .wp-block-tbrtheme-testimonials-slider { color: hsl(0, 0%, 98%); } .wp-block-tbrtheme-testimonials-slider h2 { color: hsl(0, 0%, 98%); } } a { color: currentcolor; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; text-underline-offset: 0.125em; /* see /resets/browser/colors_focus-outlines.scss */ overflow-wrap: break-word; -webkit-hyphens: none; hyphens: none; max-width: 90vw; display: inline-block; } a:hover, a:active, a:focus-visible { text-decoration: none; /* the properties you put in */ } li a { display: inline; } a[href^=mailto] { word-break: break-all; } /* incase image doesn't load */ /* img:not([src$="svg"]) {background-color: currentcolor;} */ .entry-header a:not([class*=cta-link]), .entry-text a:not([class*=cta-link]), .entry-footer a:not([class*=cta-link]), [class*=post-category] a:not([class*=cta-link]) { font-weight: var(--linktextweight); /* tame down font weight bold when text is white on dark grey */ } @media (prefers-color-scheme: dark) { .entry-header a:not([class*=cta-link]), .entry-text a:not([class*=cta-link]), .entry-footer a:not([class*=cta-link]), [class*=post-category] a:not([class*=cta-link]) { opacity: 0.9; } } .entry-text :where(h1, h2, h3, h4, h5, h6) { overflow-wrap: inherit; } .entry-text :where(h1, h2, h3, h4, h5, h6) a { font-weight: inherit; } .entry-text ul { list-style-type: var(--marker-type-ul, disc); } .entry-text ul ::marker { color: var(--marker-colour-ul, inherit); content: "⟡ "; } .entry-text ul ul { --marker-type-ul: circle; } .entry-text ol ::marker { color: var(--marker-colour-ol, inherit); } .entry-text a, .entry-footer a { color: inherit; } .entry-text a:hover, .entry-text a:active, .entry-text a:focus-visible, .entry-footer a:hover, .entry-footer a:active, .entry-footer a:focus-visible { text-decoration: none; /* the properties you put in */ } p, li, th, td, dd, div { font-size: var(--bodytextsize); } time { display: inline-block; font-size: var(--fontsmall); } strong, b { font-weight: var(--bodytextbold); color: var(--bold); } .tbrtheme-text-bolder strong, .tbrtheme-text-bolder b { font-weight: var(--headingweight); } /* em, i { */ /* */ /* } */ /* https://codepen.io/kevinpowell/pres/wvJYoEy https://www.toptal.com/designers/htmlarrows/punctuation/ */ mark { background-color: var(--text-mark); } address { font-style: normal; } blockquote, q { margin-inline: 0; padding: 0.5em 0 0.5em min(6vw, 3em); position: relative; } .entry-text > blockquote, .entry-text > q { margin: 3em 0; } blockquote::before, q::before { content: " "; position: absolute; inset: 0 auto 0 0; width: 0.25em; background-color: var(--blockquote, var(--test)); } blockquote p:last-child, q p:last-child { margin-block-end: 0; } ::selection { color: var(--bg, var(--test)); background-color: var(--txt, var(--test)); } :is(.website-subtitle, .wp-block-tbrtheme-diary-dates) ::selection { color: var(--color-primary-900, var(--test)); background-color: var(--light, var(--test)); } .site-footer ::selection { color: var(--footer-bg, var(--test)); background-color: var(--footer-text, var(--test)); } ::placeholder { color: var(--ffplaceholdertext, var(--test)); opacity: 1; font-size: var(--fontsize15); } svg { fill: currentcolor; } .image-bg-darkmode { /* for transparent background .png with dark text */ } .image-bg-darkmode img { background: var(--image-bg-darkmode); border: 1em solid transparent; box-sizing: content-box; } /* browser resets */ /* cursors, focus outlines */ /* more cursor rules in */ /* - /_form-fields-buttons.scss */ a { outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); cursor: pointer; } a:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } /* google maps */ .flxmap-directions-link a { outline: none; } .nav-top a { outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); } .nav-top a:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } .site-footer a { outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); } .site-footer a:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } details summary { cursor: pointer; outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); display: block; /* edge fix */ } details summary:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } /* browser resets */ /* experience */ :is(html, :has(:target)) { /* when js isn't doing it */ } @media (prefers-reduced-motion: no-preference) { :is(html, :has(:target)) { scroll-behavior: smooth; } } html { scroll-padding-block-start: 0; } :has(:target) { scroll-padding-block-start: 3rem; } body { /* smoother scrolling for iphone, goes with overflow-y: scroll; or overflow-y: auto; */ -webkit-overflow-scrolling: touch; } a, button, a.button, p.button a, summary { /* make taps 300ms faster, browser *immediately* responds to taps instead of waiting 300ms for a "potential" 2nd tap when content is zoomed */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action */ touch-action: manipulation; } /* ? when will there be browser support? */ /* ::before, */ /* ::after { */ /* //https://css-tricks.com/almanac/properties/s/speak/ */ /* speak: never; */ /* } */ /* login forms */ /* browser behaviour over-rides */ /* see reset.scss for ::placeholder color */ @layer reset-forms-buttons { input:not(:placeholder-shown):focus { outline: none; } /** * Override default style for invalid elements in firefox. * https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid as you leave */ :not(output):-moz-ui-invalid, :not(output):user-invalid { box-shadow: 0 0 0 0.25em var(--invalidelement, var(--test)); } /* input:-moz-ui-valid, */ /* input:user-valid { */ /* + span::before { */ /* content: '✓'; */ /* color: var(--validelement, var(--test)); */ /* } */ /* } */ /* as you come back */ :not(output):-moz-ui-invalid:-moz-focusring { box-shadow: 0 0 0 0.25em var(--invalidelementlight, var(--test)); } /* form container */ fieldset { padding: 0; border: none; } /* form text */ legend { font-family: "Noto Sans", var(--sans-serif); font-size: var(--label); font-weight: var(--fontweight400); color: var(--formlabel, black); transition: color 100ms linear; cursor: pointer; display: block; margin: 1em 0 0.25em; line-height: 1.3; margin: 0 0 2em; } label { font-family: "Noto Sans", var(--sans-serif); font-size: var(--label); font-weight: var(--fontweight400); color: var(--formlabel, black); transition: color 100ms linear; cursor: pointer; display: block; margin: 1em 0 0.25em; line-height: 1.3; } /* form fields */ /* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */ input[type=date], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week] { min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-block; font-family: inherit; font-size: var(--inputtextsize); font-weight: var(--inputfontweight); color: var(--ffplaceholdertext, var(--test)); background-color: var(--ffbg, var(--test)); transition: border-color 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); border-radius: 1em; border: 0.125em solid; border: 0.125em solid var(--ffborder, var(--test)); transition: 100ms ease-in; padding: 0.5em 1em; outline: 3px solid transparent; outline-offset: 0.25em; line-height: 1.25; /* override mobile style of line-height: 2 */ } .entry-text form input[type=date], .entry-text form input[type=datetime-local], .entry-text form input[type=email], .entry-text form input[type=month], .entry-text form input[type=number], .entry-text form input[type=password], .entry-text form input[type=search], .entry-text form input[type=tel], .entry-text form input[type=text], .entry-text form input[type=time], .entry-text form input[type=url], .entry-text form input[type=week] { padding: 0.5em 1em; } input[type=date]:hover, input[type=date]:active, input[type=date]:focus-visible, input[type=datetime-local]:hover, input[type=datetime-local]:active, input[type=datetime-local]:focus-visible, input[type=email]:hover, input[type=email]:active, input[type=email]:focus-visible, input[type=month]:hover, input[type=month]:active, input[type=month]:focus-visible, input[type=number]:hover, input[type=number]:active, input[type=number]:focus-visible, input[type=password]:hover, input[type=password]:active, input[type=password]:focus-visible, input[type=search]:hover, input[type=search]:active, input[type=search]:focus-visible, input[type=tel]:hover, input[type=tel]:active, input[type=tel]:focus-visible, input[type=text]:hover, input[type=text]:active, input[type=text]:focus-visible, input[type=time]:hover, input[type=time]:active, input[type=time]:focus-visible, input[type=url]:hover, input[type=url]:active, input[type=url]:focus-visible, input[type=week]:hover, input[type=week]:active, input[type=week]:focus-visible { border-color: var(--ffhoverborder, var(--test)); /* the properties you put in */ } input[type=search] { appearance: none; /* looking glass not wanted */ } input[type=date], input[type=datetime-local] { color: var(--ffplaceholdertext, var(--test)); padding-inline-end: 2em; background-image: url("../../icons/theme/calendar-day.svg"); background-repeat: no-repeat; background-position: 95% center; } input[type=date]:not(:placeholder-shown), input[type=datetime-local]:not(:placeholder-shown) { color: var(--txt, var(--test)); } input[type=date i]::-webkit-calendar-picker-indicator { margin-inline-end: -1.5em; opacity: 0; cursor: pointer; } /* input[type="checkbox"] { */ /* @include form-checkbox; */ /* } */ input[type=checkbox] { /* hide from eyes but not from touch */ position: absolute; margin: 0; opacity: 0; } input[type=checkbox] + label { line-height: unset; position: relative; max-inline-size: none !important; /* provide svg check box for eyes */ } input[type=checkbox] + label svg { position: relative; inline-size: 0.9rem; block-size: 0.9rem; margin: 0; border: 1px solid; fill: transparent; outline: 3px solid transparent; transition: border linear 100ms, outline linear 100ms; } input[type=checkbox]:focus + label svg { border-color: var(--ffhoverborder, var(--test)); } input[type=checkbox]:checked + label svg { fill: var(--light); background-color: currentcolor; } @media (prefers-color-scheme: dark) { input[type=checkbox]:checked + label svg { fill: var(--dark); } } input[type=checkbox]:checked:focus + label svg { border-color: currentcolor; outline: none; } select:not([multiple]) { min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-block; font-family: inherit; font-size: var(--inputtextsize); font-weight: var(--inputfontweight); color: var(--ffplaceholdertext, var(--test)); background-color: var(--ffbg, var(--test)); transition: border-color 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); border-radius: 1em; border: 0.125em solid; border: 0.125em solid var(--ffborder, var(--test)); transition: 100ms ease-in; padding: 0.5em 1em; outline: 3px solid transparent; outline-offset: 0.25em; cursor: pointer; line-height: 1.25; appearance: none; /* replace down arrow with svg */ /* background: left 0 / 100% 100% no-repeat inherit; */ background: 98% center/18px 18px no-repeat url("../../icons/theme/form-select/angle-down.svg") var(--ffbg, var(--test)); padding-inline-end: 1.25em; /* required by webkit for allowing room for the angle-down.svg arrow ^ */ text-align: start; max-inline-size: 100%; /* remove nasty glow in chrome */ } .entry-text form select:not([multiple]) { padding: 0.5em 1em; } select:not([multiple]):hover, select:not([multiple]):active, select:not([multiple]):focus-visible { border-color: var(--ffhoverborder, var(--test)); /* the properties you put in */ } select:not([multiple]) option { font-family: inherit; font-size: var(--inputtextsize); font-weight: var(--inputfontweight); color: var(--ffplaceholdertext, var(--test)); background-color: var(--ffbg, var(--test)); transition: border-color 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); cursor: pointer; line-height: 1.25; padding: 0.5em 1em; } textarea { min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-block; font-family: inherit; font-size: var(--inputtextsize); font-weight: var(--inputfontweight); color: var(--ffplaceholdertext, var(--test)); background-color: var(--ffbg, var(--test)); transition: border-color 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); border-radius: 1em; border: 0.125em solid; border: 0.125em solid var(--ffborder, var(--test)); transition: 100ms ease-in; padding: 0.5em 1em; outline: 3px solid transparent; outline-offset: 0.25em; line-height: 1.75; display: block; /* over-ride display:inline-block */ } .entry-text form textarea { padding: 0.5em 1em; } textarea:hover, textarea:active, textarea:focus-visible { border-color: var(--ffhoverborder, var(--test)); /* the properties you put in */ } /* buttons */ input[type=file]::-ms-browse, input[type=file]::-webkit-file-upload-button { /* override wordpress style (I apply box-shadow on focus-visible) */ /* end override wordpress style */ word-break: normal; box-sizing: border-box; min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-flex; align-items: center; border-radius: 1em 0; position: relative; /* cater for ::before ::after position absolute */ isolation: isolate; /* cater for z-index -1 of ::before ::after */ overflow: hidden; font-family: "Noto Sans", var(--sans-serif); font-weight: var(--buttontextweight); font-size: var(--buttontextsize); line-height: 1.4; text-align: center; text-transform: capitalize; white-space: normal; border: 0.1875em solid transparent; cursor: pointer; opacity: 1; padding: 0.75em 1.75em; /* fix button text colours in iOS */ -webkit-text-fill-color: currentcolor; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); /* !important to override gravity forms opinionated bullshit */ color: var(--btn-fg, var(--test)) !important; background-color: inherit !important; outline-offset: 0.125em; outline: 0.125em solid transparent; -webkit-transition: outline-color ease-in 150ms; -ms-transition: outline-color ease-in 150ms; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); --btn-fg: var(--shade-light, var(--test)); --btn-solid-bdr: transparent; border-color: var(--btn-solid-bdr, var(--test)); /* background colour */ background-color: var(--btn-bg) !important; --btn-fg: var(--light); --btn-bg: var(--color-primary-button); border-width: 0; } input[type=file]::-ms-browse:focus, input[type=file]::-webkit-file-upload-button:focus { box-shadow: none; } input[type=file]::-ms-browse[href^=mailto], input[type=file]::-webkit-file-upload-button[href^=mailto] { text-transform: none; } @media (prefers-reduced-motion: no-preference) { input[type=file]::-ms-browse, input[type=file]::-webkit-file-upload-button { -webkit-transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); -ms-transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); will-change: transform; } } input[type=file]::-ms-browse::before, input[type=file]::-webkit-file-upload-button::before { content: " "; position: absolute; z-index: -1; inset: -0.125em; opacity: 0; -webkit-transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); -ms-transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); background-color: var(--btn-fg); } input[type=file]::-ms-browse:hover, input[type=file]::-ms-browse:active, input[type=file]::-ms-browse:focus-visible, input[type=file]::-webkit-file-upload-button:hover, input[type=file]::-webkit-file-upload-button:active, input[type=file]::-webkit-file-upload-button:focus-visible { color: var(--btn-fg, var(--test)); /* the properties you put in */ } input[type=file]::-ms-browse:hover::before, input[type=file]::-ms-browse:active::before, input[type=file]::-ms-browse:focus-visible::before, input[type=file]::-webkit-file-upload-button:hover::before, input[type=file]::-webkit-file-upload-button:active::before, input[type=file]::-webkit-file-upload-button:focus-visible::before { opacity: 1; } input[type=file]::-ms-browse:focus-visible, input[type=file]::-webkit-file-upload-button:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } input[type=file]::-ms-browse:disabled, input[type=file]::-webkit-file-upload-button:disabled { opacity: 0.5 !important; cursor: not-allowed; filter: grayscale(100%); pointer-events: none; } input[type=file]::-ms-browse::before, input[type=file]::-webkit-file-upload-button::before { background-color: var(--color-primary-button-hover); } button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow), input[type=submit] { /* override wordpress style (I apply box-shadow on focus-visible) */ /* end override wordpress style */ word-break: normal; box-sizing: border-box; min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-flex; align-items: center; border-radius: 1em 0; position: relative; /* cater for ::before ::after position absolute */ isolation: isolate; /* cater for z-index -1 of ::before ::after */ overflow: hidden; font-family: "Noto Sans", var(--sans-serif); font-weight: var(--buttontextweight); font-size: var(--buttontextsize); line-height: 1.4; text-align: center; text-transform: capitalize; white-space: normal; border: 0.1875em solid transparent; cursor: pointer; opacity: 1; padding: 0.75em 1.75em; /* fix button text colours in iOS */ -webkit-text-fill-color: currentcolor; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); /* !important to override gravity forms opinionated bullshit */ color: var(--btn-fg, var(--test)) !important; background-color: inherit !important; outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); --btn-fg: var(--shade-light, var(--test)); --btn-solid-bdr: transparent; border-color: var(--btn-solid-bdr, var(--test)); /* background colour */ background-color: var(--btn-bg) !important; --btn-fg: var(--light); --btn-bg: var(--color-primary-button); border-width: 0; } button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):focus, input[type=submit]:focus { box-shadow: none; } button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow)[href^=mailto], input[type=submit][href^=mailto] { text-transform: none; } @media (prefers-reduced-motion: no-preference) { button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow), input[type=submit] { transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); will-change: transform; } } button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow)::before, input[type=submit]::before { content: " "; position: absolute; z-index: -1; inset: -0.125em; opacity: 0; transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); background-color: var(--btn-fg); } button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):hover, button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):active, button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):focus-visible, input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus-visible { color: var(--btn-fg, var(--test)); /* the properties you put in */ } button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):hover::before, button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):active::before, button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):focus-visible::before, input[type=submit]:hover::before, input[type=submit]:active::before, input[type=submit]:focus-visible::before { opacity: 1; } button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):focus-visible, input[type=submit]:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):disabled, input[type=submit]:disabled { opacity: 0.5 !important; cursor: not-allowed; filter: grayscale(100%); pointer-events: none; } button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow)::before, input[type=submit]::before { background-color: var(--color-primary-button-hover); } .flxmap-container button:not(.baguetteBox-button):not(.gm-control-active) { color: inherit !important; background-color: inherit !important; min-width: inherit; } .wp-block-button .wp-block-button__link { /* override wordpress style (I apply box-shadow on focus-visible) */ /* end override wordpress style */ word-break: normal; box-sizing: border-box; min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-flex; align-items: center; border-radius: 1em 0; position: relative; /* cater for ::before ::after position absolute */ isolation: isolate; /* cater for z-index -1 of ::before ::after */ overflow: hidden; font-family: "Noto Sans", var(--sans-serif); font-weight: var(--buttontextweight); font-size: var(--buttontextsize); line-height: 1.4; text-align: center; text-transform: capitalize; white-space: normal; border: 0.1875em solid transparent; cursor: pointer; opacity: 1; padding: 0.75em 1.75em; /* fix button text colours in iOS */ -webkit-text-fill-color: currentcolor; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); /* !important to override gravity forms opinionated bullshit */ color: var(--btn-fg, var(--test)) !important; background-color: inherit !important; outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); --btn-fg: var(--shade-light, var(--test)); --btn-solid-bdr: transparent; border-color: var(--btn-solid-bdr, var(--test)); /* background colour */ background-color: var(--btn-bg) !important; --btn-fg: var(--light); --btn-bg: var(--color-primary-button); border-width: 0; color: var(--btn-fg, var(--test)); text-decoration: none; } .wp-block-button .wp-block-button__link:focus { box-shadow: none; } .wp-block-button .wp-block-button__link[href^=mailto] { text-transform: none; } @media (prefers-reduced-motion: no-preference) { .wp-block-button .wp-block-button__link { transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); will-change: transform; } } .wp-block-button .wp-block-button__link::before { content: " "; position: absolute; z-index: -1; inset: -0.125em; opacity: 0; transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); background-color: var(--btn-fg); } .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:active, .wp-block-button .wp-block-button__link:focus-visible { color: var(--btn-fg, var(--test)); /* the properties you put in */ } .wp-block-button .wp-block-button__link:hover::before, .wp-block-button .wp-block-button__link:active::before, .wp-block-button .wp-block-button__link:focus-visible::before { opacity: 1; } .wp-block-button .wp-block-button__link:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } .wp-block-button .wp-block-button__link:disabled { opacity: 0.5 !important; cursor: not-allowed; filter: grayscale(100%); pointer-events: none; } .wp-block-button .wp-block-button__link::before { background-color: var(--color-primary-button-hover); } a.primary-button__link, .primary-button__link a, a.wp-block-file__button, .wp-block-file a.wp-block-file__button { /* override wordpress style (I apply box-shadow on focus-visible) */ /* end override wordpress style */ word-break: normal; box-sizing: border-box; min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-flex; align-items: center; border-radius: 1em 0; position: relative; /* cater for ::before ::after position absolute */ isolation: isolate; /* cater for z-index -1 of ::before ::after */ overflow: hidden; font-family: "Noto Sans", var(--sans-serif); font-weight: var(--buttontextweight); font-size: var(--buttontextsize); line-height: 1.4; text-align: center; text-transform: capitalize; white-space: normal; border: 0.1875em solid transparent; cursor: pointer; opacity: 1; padding: 0.75em 1.75em; /* fix button text colours in iOS */ -webkit-text-fill-color: currentcolor; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); /* !important to override gravity forms opinionated bullshit */ color: var(--btn-fg, var(--test)) !important; background-color: inherit !important; outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); --btn-fg: var(--shade-light, var(--test)); --btn-solid-bdr: transparent; border-color: var(--btn-solid-bdr, var(--test)); /* background colour */ background-color: var(--btn-bg) !important; --btn-fg: var(--light); --btn-bg: var(--color-primary-button); border-width: 0; color: var(--btn-fg, var(--test)); text-decoration: none; } a.primary-button__link:focus, .primary-button__link a:focus, a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:focus { box-shadow: none; } a.primary-button__link[href^=mailto], .primary-button__link a[href^=mailto], a.wp-block-file__button[href^=mailto], .wp-block-file a.wp-block-file__button[href^=mailto] { text-transform: none; } @media (prefers-reduced-motion: no-preference) { a.primary-button__link, .primary-button__link a, a.wp-block-file__button, .wp-block-file a.wp-block-file__button { transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); will-change: transform; } } a.primary-button__link::before, .primary-button__link a::before, a.wp-block-file__button::before, .wp-block-file a.wp-block-file__button::before { content: " "; position: absolute; z-index: -1; inset: -0.125em; opacity: 0; transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); background-color: var(--btn-fg); } a.primary-button__link:hover, a.primary-button__link:active, a.primary-button__link:focus-visible, .primary-button__link a:hover, .primary-button__link a:active, .primary-button__link a:focus-visible, a.wp-block-file__button:hover, a.wp-block-file__button:active, a.wp-block-file__button:focus-visible, .wp-block-file a.wp-block-file__button:hover, .wp-block-file a.wp-block-file__button:active, .wp-block-file a.wp-block-file__button:focus-visible { color: var(--btn-fg, var(--test)); /* the properties you put in */ } a.primary-button__link:hover::before, a.primary-button__link:active::before, a.primary-button__link:focus-visible::before, .primary-button__link a:hover::before, .primary-button__link a:active::before, .primary-button__link a:focus-visible::before, a.wp-block-file__button:hover::before, a.wp-block-file__button:active::before, a.wp-block-file__button:focus-visible::before, .wp-block-file a.wp-block-file__button:hover::before, .wp-block-file a.wp-block-file__button:active::before, .wp-block-file a.wp-block-file__button:focus-visible::before { opacity: 1; } a.primary-button__link:focus-visible, .primary-button__link a:focus-visible, a.wp-block-file__button:focus-visible, .wp-block-file a.wp-block-file__button:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } a.primary-button__link:disabled, .primary-button__link a:disabled, a.wp-block-file__button:disabled, .wp-block-file a.wp-block-file__button:disabled { opacity: 0.5 !important; cursor: not-allowed; filter: grayscale(100%); pointer-events: none; } a.primary-button__link::before, .primary-button__link a::before, a.wp-block-file__button::before, .wp-block-file a.wp-block-file__button::before { background-color: var(--color-primary-button-hover); } input.button, button.button { /* override wordpress style (I apply box-shadow on focus-visible) */ /* end override wordpress style */ word-break: normal; box-sizing: border-box; min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-flex; align-items: center; border-radius: 1em 0; position: relative; /* cater for ::before ::after position absolute */ isolation: isolate; /* cater for z-index -1 of ::before ::after */ overflow: hidden; font-family: "Noto Sans", var(--sans-serif); font-weight: var(--buttontextweight); font-size: var(--buttontextsize); line-height: 1.4; text-align: center; text-transform: capitalize; white-space: normal; border: 0.1875em solid transparent; cursor: pointer; opacity: 1; padding: 0.75em 1.75em; /* fix button text colours in iOS */ -webkit-text-fill-color: currentcolor; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); /* !important to override gravity forms opinionated bullshit */ color: var(--btn-fg, var(--test)) !important; background-color: inherit !important; outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); --btn-fg: var(--shade-light, var(--test)); --btn-solid-bdr: transparent; border-color: var(--btn-solid-bdr, var(--test)); /* background colour */ background-color: var(--btn-bg) !important; --btn-fg: var(--light); --btn-bg: var(--color-primary-button); border-width: 0; } input.button:focus, button.button:focus { box-shadow: none; } input.button[href^=mailto], button.button[href^=mailto] { text-transform: none; } @media (prefers-reduced-motion: no-preference) { input.button, button.button { transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); will-change: transform; } } input.button::before, button.button::before { content: " "; position: absolute; z-index: -1; inset: -0.125em; opacity: 0; transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); background-color: var(--btn-fg); } input.button:hover, input.button:active, input.button:focus-visible, button.button:hover, button.button:active, button.button:focus-visible { color: var(--btn-fg, var(--test)); /* the properties you put in */ } input.button:hover::before, input.button:active::before, input.button:focus-visible::before, button.button:hover::before, button.button:active::before, button.button:focus-visible::before { opacity: 1; } input.button:focus-visible, button.button:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } input.button:disabled, button.button:disabled { opacity: 0.5 !important; cursor: not-allowed; filter: grayscale(100%); pointer-events: none; } input.button::before, button.button::before { background-color: var(--color-primary-button-hover); } input.button:hover, input.button:active, input.button:focus-visible { --btn-bg: var(--color-primary-button-hover); /* the properties you put in */ } a.button, p.button a, .has-button a, a.button__link, .button__link a { /* override wordpress style (I apply box-shadow on focus-visible) */ /* end override wordpress style */ word-break: normal; box-sizing: border-box; min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-flex; align-items: center; border-radius: 1em 0; position: relative; /* cater for ::before ::after position absolute */ isolation: isolate; /* cater for z-index -1 of ::before ::after */ overflow: hidden; font-family: "Noto Sans", var(--sans-serif); font-weight: var(--buttontextweight); font-size: var(--buttontextsize); line-height: 1.4; text-align: center; text-transform: capitalize; white-space: normal; border: 0.1875em solid transparent; cursor: pointer; opacity: 1; padding: 0.75em 1.75em; /* fix button text colours in iOS */ -webkit-text-fill-color: currentcolor; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); /* !important to override gravity forms opinionated bullshit */ color: var(--btn-fg, var(--test)) !important; background-color: inherit !important; outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); background-color: var(--btn-bg) !important; --btn-fg: currentcolor; --btn-bg: var(--bg, var(--test)); --btn-outline-bdr: currentcolor; border-color: var(--btn-outline-bdr, var(--test)); /* currentcolor */ --btn-fg: var(--txt, var(--test)); --btn-bg: transparent; --btn-outline-bdr: var(--color-cta, var(--test)); text-decoration: none; } a.button:focus, p.button a:focus, .has-button a:focus, a.button__link:focus, .button__link a:focus { box-shadow: none; } a.button[href^=mailto], p.button a[href^=mailto], .has-button a[href^=mailto], a.button__link[href^=mailto], .button__link a[href^=mailto] { text-transform: none; } @media (prefers-reduced-motion: no-preference) { a.button, p.button a, .has-button a, a.button__link, .button__link a { transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); will-change: transform; } } a.button::before, p.button a::before, .has-button a::before, a.button__link::before, .button__link a::before { content: " "; position: absolute; z-index: -1; inset: -0.125em; opacity: 0; transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); background-color: var(--btn-fg); } a.button:hover, a.button:active, a.button:focus-visible, p.button a:hover, p.button a:active, p.button a:focus-visible, .has-button a:hover, .has-button a:active, .has-button a:focus-visible, a.button__link:hover, a.button__link:active, a.button__link:focus-visible, .button__link a:hover, .button__link a:active, .button__link a:focus-visible { color: var(--btn-fg, var(--test)); /* the properties you put in */ } a.button:hover::before, a.button:active::before, a.button:focus-visible::before, p.button a:hover::before, p.button a:active::before, p.button a:focus-visible::before, .has-button a:hover::before, .has-button a:active::before, .has-button a:focus-visible::before, a.button__link:hover::before, a.button__link:active::before, a.button__link:focus-visible::before, .button__link a:hover::before, .button__link a:active::before, .button__link a:focus-visible::before { opacity: 1; } a.button:focus-visible, p.button a:focus-visible, .has-button a:focus-visible, a.button__link:focus-visible, .button__link a:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } a.button:disabled, p.button a:disabled, .has-button a:disabled, a.button__link:disabled, .button__link a:disabled { opacity: 0.5 !important; cursor: not-allowed; filter: grayscale(100%); pointer-events: none; } a.button:hover, a.button:active, a.button:focus-visible, p.button a:hover, p.button a:active, p.button a:focus-visible, .has-button a:hover, .has-button a:active, .has-button a:focus-visible, a.button__link:hover, a.button__link:active, a.button__link:focus-visible, .button__link a:hover, .button__link a:active, .button__link a:focus-visible { --btn-bg: var(--color-cta, var(--test)); /* the properties you put in */ } p.back-button a, a.back-button { --btn-fg: var(--heading-color); --btn-outline-bdr: var(--heading-color); align-items: center; padding-inline-start: 3em; } p.back-button a::before, a.back-button::before { transform: scaleX(0); transform-origin: left; transition: transform 400ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } p.back-button a::after, a.back-button::after { position: absolute; inset: auto auto auto 1em; inline-size: 1em; transition: fill 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); content: url('data:image/svg+xml;utf8,'); } p.back-button a:hover, p.back-button a:active, p.back-button a:focus-visible, a.back-button:hover, a.back-button:active, a.back-button:focus-visible { /* the properties you put in */ } p.back-button a:hover::before, p.back-button a:active::before, p.back-button a:focus-visible::before, a.back-button:hover::before, a.back-button:active::before, a.back-button:focus-visible::before { transform: scaleX(1); transform-origin: right; } p.back-button a:hover::after, p.back-button a:active::after, p.back-button a:focus-visible::after, a.back-button:hover::after, a.back-button:active::after, a.back-button:focus-visible::after { content: url('data:image/svg+xml;utf8,'); } @media (prefers-color-scheme: dark) { p.back-button a:hover::after, p.back-button a:active::after, p.back-button a:focus-visible::after, a.back-button:hover::after, a.back-button:active::after, a.back-button:focus-visible::after { content: url('data:image/svg+xml;utf8,'); } } p.back-button a.tbrtheme-print-button { padding-inline-start: 1.5em; } p.back-button a.tbrtheme-print-button::after { content: none; } p.back-button a.tbrtheme-print-button::before { transform: scaleY(0); transform-origin: bottom; transition: transform 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } p.back-button a.tbrtheme-print-button:hover, p.back-button a.tbrtheme-print-button:active, p.back-button a.tbrtheme-print-button:focus-visible { /* the properties you put in */ } p.back-button a.tbrtheme-print-button:hover::before, p.back-button a.tbrtheme-print-button:active::before, p.back-button a.tbrtheme-print-button:focus-visible::before { transform: scaleY(1); transform-origin: top; } .nav-top button:not(.baguetteBox-button):not(.gm-control-active).search-button { --search-button-size: 1rem; padding: 0.25em; min-inline-size: auto; display: grid; place-content: center; inline-size: 3rem; block-size: 100%; margin-inline-start: 1em; --btn-bg: transparent !important; --btn-fg: var(--light, var(--test)); --btn-bg: var(--color-primary-500, var(--test)); } .nav-top button:not(.baguetteBox-button):not(.gm-control-active).search-button svg { inline-size: 1rem; block-size: 100%; } .nav-top button:not(.baguetteBox-button):not(.gm-control-active).search-button:hover, .nav-top button:not(.baguetteBox-button):not(.gm-control-active).search-button:active, .nav-top button:not(.baguetteBox-button):not(.gm-control-active).search-button:focus-visible { --btn-fg: var(--color-cta, var(--test)); --btn-bg: var(--color-primary-500, var(--test)); /* the properties you put in */ } .search-not-found button:not(.baguetteBox-button):not(.gm-control-active).search-button { --search-button-size: 1rem; padding: 0.25em; min-inline-size: auto; display: grid; place-content: center; inline-size: 3rem; block-size: 100%; --btn-bg: transparent !important; --btn-fg: var(--light, var(--test)); --btn-bg: var(--color-cta, var(--test)); } .search-not-found button:not(.baguetteBox-button):not(.gm-control-active).search-button svg { inline-size: 1rem; block-size: 100%; } .search-not-found button:not(.baguetteBox-button):not(.gm-control-active).search-button:hover, .search-not-found button:not(.baguetteBox-button):not(.gm-control-active).search-button:active, .search-not-found button:not(.baguetteBox-button):not(.gm-control-active).search-button:focus-visible { --btn-fg: var(--light, var(--test)); --btn-bg: var(--color-primary-700, var(--test)); /* the properties you put in */ } /* layout */ /* google maps */ button.gm-ui-hover-effect { min-inline-size: auto; } /* end google maps */ .wp-block-file { margin-block-start: 1em; } form p { line-height: 1.25; margin-block-end: var(--margin-size, 1.5em); } form a { display: inline-block; line-height: 2; } .entry-text .button + .button { margin-inline-start: var(--button-spacing); } p.button { display: flex; flex-wrap: wrap; gap: var(--button-spacing); } @media only screen and (max-width: 48rem) { form a { display: block; } /* the properties you put in */ } } /* /* browser resets */ /* testing */ /* layout including margins */ :root { --figure-float-margin-side: 1.5em; } html { /* support ios */ block-size: -webkit-fill-available; } body { inline-size: 100%; max-inline-size: 100vw; min-block-size: 100vh; min-block-size: 100svh; min-block-size: -webkit-fill-available; /* support ios */ overflow-x: hidden; margin: 0; } a[class], button, input { overflow-wrap: normal; /* don't break words in these elements */ } *, ::before, ::after { box-sizing: border-box; } img { font-style: italic; vertical-align: middle; } figure, img, picture, video, canvas { max-inline-size: min(100%, 90vw); height: auto; } picture, video, canvas { display: block; } svg { display: block; inline-size: 1em; block-size: 1em; } .wp-block-audio audio { width: min(300px, 100%); min-width: auto; } blockquote { margin: 0 0 var(--margin-size, 1.5em); } .wp-block-group > blockquote { margin: 0; } h2, h3, blockquote, p, ul, dl { max-inline-size: min(var(--sentencemaxwidth, 72ch), 90vw); } #wpadminbar h2, #wpadminbar h3, #wpadminbar blockquote, #wpadminbar p, #wpadminbar ul, #wpadminbar dl { max-width: inherit; } blockquote, blockquote p { --sentencemaxwidth: 92ch; } blockquote.tbrtheme-blockquote-fontsize-large, blockquote.tbrtheme-blockquote-fontsize-large p { --sentencemaxwidth: 82ch; } @media only screen and (max-width: 83.5rem) { .has-text-align-center.has-text-align-center-on-mobile { margin-inline: auto; text-align: center; } /* the properties you put in */ } @media only screen and (min-width: 83.5625rem) { .has-text-align-center { margin-inline: auto; text-align: center; } /* the properties you put in */ } .has-text-align-right { text-align: end; } @media only screen and (max-width: 83.5rem) { br { display: none; } br::after { content: " "; } .tbrtheme-card-title br, .tbrtheme-card-label br { display: initial; } .site-footer br { display: initial; } figcaption br { display: initial; } figcaption br::after { content: none; } /* the properties you put in */ } .sentencemaxwidth-666 .entry-text { --sentencemaxwidth: 666px; } .sentencemaxwidth-46 .entry-text { --sentencemaxwidth: 46ch; } .sentencemaxwidth-41 .entry-text { --sentencemaxwidth: 41ch; } .entry-text-maxwidth .entry-text { max-inline-size: min(var(--entrymaxwidth, auto), 90vw); } .entry-text-maxwidth.entry-text-maxwidth-55 .entry-text { --entrymaxwidth: 55ch; } :where(ul, ol) { margin-block-end: var(--margin-size, 1.5em); } :where(ul, ol) :where(ul, ol) { margin-block-start: 1em; } .entry-text :where(ul, ol) { margin-block-end: var(--margin-size, 1.5em); } .entry-text :where(ul, ol) :where(ul, ol) { margin-block-start: 1em; } ul { padding-inline-start: 1.5em; } ol { padding-inline-start: 1.35em; } .list-no-bullets { list-style-type: none; padding-inline-start: 0; } li { margin-block-end: 1em; } p { margin-block-end: var(--margin-size, 1.5em); } nav ul, .entry-text nav ul { padding-inline-start: 0; list-style-type: none; margin-block-end: 0; } nav ul > li::before, .entry-text nav ul > li::before { content: "​"; /* zero-width space */ position: absolute; /* here for accessible readers only */ } nav ul li, .entry-text nav ul li { margin-block-end: 0; } form ul, nav ul { max-inline-size: none; } /* stop pre from overflowing the container on mobile */ pre { white-space: pre-line; } .entry-text *, * { margin-block-start: 0; } .entry-text p:empty { margin: 0 !important; line-height: 0; } .entry-text * + :not(.blocks-gallery-item):last-child, * + :last-child { margin-block-end: 0; } .entry-text > :not(div, iframe):last-child { margin-block-end: min(6vw, 3rem); } .entry-text > blockquote:last-child { margin-block-end: 0; } figure { margin: 0 0 var(--margin-size, 1.5em); } figure.aligncenter { margin: 0 auto var(--margin-size, 1.5em); text-align: center; inline-size: max-content; display: block; } figure.aligncenter img { margin-inline: auto; } figure.tbrtheme-banner-image { margin: 0; } figure[style*=width] { max-inline-size: 100%; } .entry-text figcaption { margin-block-start: 1em; } table { margin: var(--margin-size, 1.5em) 0 min(6vw, 3rem); overflow-wrap: normal; } table:has(+ figcaption) { margin-block-end: 0; } table + figcaption.wp-element-caption { margin-block-end: min(6vw, 3rem) !important; border-block-end: 0.3em solid var(--table-line, var(--test)); } dd { margin-inline-start: 0; } @media only screen and (max-width: 35.5rem) { .flex-layout { margin-block-end: 2.5em; /* the properties you put in */ } } @media only screen and (min-width: 35.5625rem) { .flex-layout { display: flex; align-items: center; gap: 2em; /* the properties you put in */ } .flex-layout img { flex-shrink: 0; } .flex-layout figcaption { margin-block-start: 0; } } /* user selection media query fixes / accommodations */ /* https://css-tricks.com/a-complete-guide-to-css-media-queries/ */ /* "The problem with invested colors is that it’ll also invert the colors of images and videos, making them look like x-ray images. By using a CSS invert filter you can select all images and videos and invert them back." At the time of writing this (Oct 6, 2020) feature is only supported by Safari. */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors */ @media (inverted-colors: inverted) { img, video { filter: invert(100%); } } /* https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ */ @media (prefers-color-scheme: dark) { img, image { filter: brightness(0.8) contrast(1.2); } } /* future css: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors */ /* browser resets */ /* scrollbar style */ /* see colours.scsss */ /* This is only for firefox scrollbars - on any element(*) */ * { /* thumb track */ scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track, var(--test)); /* scrollbar-width: auto; // the default */ } /* This is only for webkit scrollbars - on any element (nothing before the ::) */ /* You can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers: */ /* the entire scrollbar */ /* targets all scrollbars */ ::-webkit-scrollbar { inline-size: 12px; block-size: 12px; } /* the track (progress bar) of the scrollbar */ ::-webkit-scrollbar-track { background-color: var(--scrollbar-track, var(--test)); } /* the draggable scrolling handle */ ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb, var(--test)); border-radius: 100vw; border: 3px solid var(--scrollbar-track, var(--test)); } /* the buttons on the scrollbar (arrows pointing upwards and downwards) */ ::-webkit-scrollbar-button { /* color: var(--scrollbar-track, var(--test)); */ /* background-color: var(--scrollbar-thumb, var(--test)); */ block-size: 0; } /* browser resets */ /* scrollbar style */ /* see colours.scsss */ /* This is only for firefox scrollbars - on any element(*) */ nav.nav-main { /* thumb track */ scrollbar-color: var(--scrollbar-nav-thumb) var(--scrollbar-nav-track, var(--test)); /* scrollbar-width: auto; // the default */ } /* This is only for webkit scrollbars - on any element (nothing before the ::) */ /* You can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers: */ /* the entire scrollbar */ /* targets all scrollbars */ nav.nav-main::-webkit-scrollbar { inline-size: 12px; block-size: 12px; } /* the track (progress bar) of the scrollbar */ nav.nav-main::-webkit-scrollbar-track { background-color: var(--scrollbar-nav-track, var(--test)); } /* the draggable scrolling handle */ nav.nav-main::-webkit-scrollbar-thumb { background-color: var(--scrollbar-nav-thumb, var(--test)); border-radius: 100vw; border: 3px solid var(--scrollbar-nav-track, var(--test)); } /* the buttons on the scrollbar (arrows pointing upwards and downwards) */ nav.nav-main::-webkit-scrollbar-button { /* color: var(--scrollbar-track, var(--test)); */ /* background-color: var(--scrollbar-thumb, var(--test)); */ block-size: 0; } /* page elements */ .tbrtheme-table-wrapper { max-width: 100%; overflow-x: auto; } .entry-text table:not(.site-contact-table) { --accordian-table-padding: 1.25rem; --accordian-table-padding-half: calc(var(--accordian-table-padding) / 2); border-collapse: collapse; border: 0.3em solid var(--table-line, var(--test)); width: 100%; } .entry-text table:not(.site-contact-table) th, .entry-text table:not(.site-contact-table) td { padding: var(--accordian-table-padding-half); text-align: left; vertical-align: top; } .entry-text table:not(.site-contact-table) th { font-weight: var(--bodytextbold); } .entry-text table:not(.site-contact-table) tbody tr:first-child td { padding-block-start: var(--accordian-table-padding-half); } .entry-text table:not(.site-contact-table) tbody tr:last-child td { padding-block-end: var(--accordian-table-padding-half); } .entry-text table:not(.site-contact-table) tbody tr:nth-child(2n) { background-color: var(--table-alt-row-bg); } .entry-text table:not(.site-contact-table) tbody tr:nth-child(1):nth-last-child(1) { background-color: var(--table-alt-row-bg); } .entry-text table:not(.site-contact-table) tbody tr:nth-child(1):nth-last-child(3), .entry-text table:not(.site-contact-table) tbody tr:nth-child(3):nth-last-child(1) { background-color: var(--table-alt-row-bg); } .entry-text table:not(.site-contact-table) tbody tr:nth-child(2):nth-last-child(2) { background-color: transparent; } .entry-text table:not(.site-contact-table) thead { color: var(--table-head-txt); background-color: var(--table-head-bg); } .entry-text table:not(.site-contact-table) th, .entry-text table:not(.site-contact-table) td { font-size: var(--fontsize15); } @media only screen and (min-width: 64.0625rem) { .entry-text table:not(.site-contact-table) { /* the properties you put in */ } .entry-text table:not(.site-contact-table) tbody td { border-bottom: 0.125em solid var(--table-line); } .entry-text table:not(.site-contact-table) tbody tr:last-child td { border-bottom: none; } .entry-text table:not(.site-contact-table) th:first-child, .entry-text table:not(.site-contact-table) td:first-child { padding-inline-start: var(--accordian-table-padding); } .entry-text table:not(.site-contact-table) th:last-child, .entry-text table:not(.site-contact-table) td:last-child { padding-inline-end: var(--accordian-table-padding); } } table.tbrtheme-post-metadata { border-collapse: collapse; border: 0.3em solid var(--table-line, var(--test)); } table.tbrtheme-post-metadata th, table.tbrtheme-post-metadata td { padding: var(--accordian-table-padding-half); text-align: left; vertical-align: top; } table.tbrtheme-post-metadata th { font-weight: var(--bodytextbold); } table.tbrtheme-post-metadata tbody td { border-bottom: 0.125em solid var(--table-line); } table.tbrtheme-post-metadata tbody tr:last-child td { border-bottom: none; } table.tbrtheme-post-metadata th { font-size: var(--fontsizeh6); border-bottom: 0.125em solid #545454; } table.tbrtheme-post-metadata th[scope=row] { color: var(--table-head-txt); background-color: var(--table-head-bg); } table.tbrtheme-post-metadata td { inline-size: 22ch; max-inline-size: 22ch; } /* responsive table layout */ .wp-block-table { overflow-x: auto; max-inline-size: 90vw; } html:has(:modal) { overflow: hidden; padding-inline-end: 16px; } ::backdrop { background-color: hsla(0, 0%, 0%, 0.25); } /* element layout */ .wp-block-buttons { display: flex; flex-wrap: wrap; justify-content: space-evenly; margin: 2em 0; } @media only screen and (max-width: 64rem) { .wp-block-buttons .wp-block-button { margin-block-end: 1em; /* the properties you put in */ } } /* project resets */ /* override wp-block-columns layout */ .wp-block-columns { margin-block-end: 0; display: grid; justify-content: center; column-gap: var(--column-gap, min(6vw, 3rem)); row-gap: var(--row-gap, 3rem); max-width: min(77rem, 90vw); word-break: break-word; } @media only screen and (max-width: 83.5rem) { .wp-block-columns { grid-template-columns: repeat(auto-fit, minmax(min(36rem, 90vw), 1fr)); /* the properties you put in */ } .wp-block-columns.tbrtheme-mobile-stack { grid-template-columns: 1fr; } .wp-block-columns.tbrtheme-mobile-reverse-order .wp-block-column:first-child { order: 1; } .wp-block-columns.columns-mobile-fullwidth { grid-column: fullwidth; max-width: none; width: 100vw; } } @media only screen and (min-width: 83.5625rem) { .wp-block-columns { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* the properties you put in */ } .wp-block-columns.wp-block-columns-uneven { grid-template-columns: var(--wp-block-columns-uneven); } .wp-block-columns.wp-block-columns-fourcols { --column-gap: min(6vw, 3rem); } .wp-block-columns.tbrtheme-col-gap-four { --column-gap: min(6vw, 4rem); } .wp-block-columns.tbrtheme-col-gap-five { --column-gap: min(10vw, 5rem); } .wp-block-columns.tbrtheme-col-gap-six { --column-gap: min(6vw, 6rem); } .wp-block-columns.tbrtheme-col-gap-seven { --column-gap: min(7vw, 7rem); } .wp-block-columns.tbrtheme-col-gap-eight { --column-gap: min(8vw, 8rem); } .wp-block-columns.tbrtheme-col-gap-nine { --column-gap: min(9vw, 9rem); } } .wp-block-columns.wp-block-columns-nocolgap { column-gap: 0; } .wp-block-columns.wp-block-columns-norowgap { row-gap: 0; } body:not(.home) section.entry > .entry-text > :where(.wp-block-group:last-of-type, .wp-block-columns:last-of-type).wp-block-columns-notopspacer { padding-block-start: 0; } body:not(.home) section.entry > .entry-text > :where(.wp-block-group:last-of-type, .wp-block-columns:last-of-type).wp-block-columns-nobottomspacer { padding-block-end: 0; } .entry-text > :where(.wp-block-group, .wp-block-columns, .grid-auto-columns).wp-block-columns-notopspacer { padding-block-start: 0; } .entry-text > :where(.wp-block-group, .wp-block-columns, .grid-auto-columns).wp-block-columns-nobottomspacer { padding-block-end: 0; } .wp-block-columns-notopspacer { padding-block-start: 0; } .wp-block-columns-nobottomspacer { padding-block-end: 0; } .wp-block-column { container-type: inline-size; margin-inline-start: -1px; } .wp-block-column:not(:first-child) { /* margin-inline-start: 0; // when padding used instead of margins */ } @media only screen and (min-width: 80.0625rem) { .wp-block-column:not(:first-child).tbrtheme-column-left-rule { padding-inline-start: 2.5em; border-inline-start: 1px solid var(--grey-rule, var(--test)); /* the properties you put in */ } } .wp-block-column.tbrtheme-column-margin-small:not(:first-child) { margin-inline-start: 2em; } .wp-block-column figure.tbrtheme-to-bottom { margin: auto 0 0; } /* 69rem = 1104px */ .wp-block-columns.columns-grid { --column-count: var(--column-one) + var(--column-two) + var(--column-spacing); --column-gap: 1rem; --column-spacing: 5; --column-one: 5; --column-two: calc(77 - (var(--column-spacing) + var(--column-one))); } @supports (display: grid) { .wp-block-columns.columns-grid .wp-block-column:not(:first-child) { margin-left: 0; --wp--style--block-gap: 0; } } @media only screen and (max-width: 83.5rem) { .wp-block-columns.columns-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: min(6vw, 3rem); /* the properties you put in */ } .wp-block-columns.columns-grid .wp-block-column { flex: 1 1 20rem !important; } } @media only screen and (min-width: 83.5625rem) { .wp-block-columns.columns-grid { display: grid; grid-template-columns: repeat(var(--column-count), minmax(0, 1fr)); column-gap: var(--column-gap); /* the properties you put in */ } } .wp-block-columns.columns-grid .wp-block-column figure { margin: 0; } .wp-block-columns.columns-grid .wp-block-column:nth-child(1) { grid-column: span var(--column-one); } .wp-block-columns.columns-grid .wp-block-column:nth-child(2) { grid-column: calc(var(--column-one) + var(--column-spacing))/span var(--column-two); } .wp-block-columns.columns-grid .wp-block-column:nth-child(2).column-rule { position: relative; } .wp-block-columns.columns-grid .wp-block-column:nth-child(2).column-rule::before { display: block; content: " "; position: absolute; inset: 0 auto 0 calc(var(--column-spacing) / 2 * -1em); width: 1px; border-left: 1px solid; } .wp-block-gallery .blocks-gallery-grid { padding-inline-start: 0; list-style-type: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .wp-block-gallery .blocks-gallery-grid > li::before { content: "​"; /* zero-width space */ position: absolute; /* here for accessible readers only */ } .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item { overflow: hidden; } .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item img { transform: scale(1); transition: transform 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item figcaption { opacity: 1; transform: translateY(0%); transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53), transform 0ms cubic-bezier(0.55, 0.09, 0.68, 0.53) 250ms; } .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item:hover, .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item:active, .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item:focus-visible { z-index: 1; /* the properties you put in */ } .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item:hover img, .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item:active img, .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item:focus-visible img { transform: scale(1.05); } .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item:hover figcaption, .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item:active figcaption, .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item:focus-visible figcaption { opacity: 0; transform: translateY(100%); } .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item figure { position: relative; margin: 0; } .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item figure, .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item picture, .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item img, .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item figure > a { display: block; width: min(100%, 90vw); height: 100%; } .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item img { object-fit: cover; } .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item__caption { z-index: 1; } @supports (display: grid) { .wp-block-gallery .blocks-gallery-grid { gap: 1.5rem; } .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item { margin: 0; width: auto; } } .wp-block-gallery { --wp--style--block-gap: 0.25em; } /* project resets */ /* wordpress */ .screen-reader-text { position: absolute; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); block-size: 1px; margin: -1px; overflow: hidden; padding: 0; inline-size: 1px; word-wrap: normal !important; } .screen-reader-text:active, .screen-reader-text:focus-visible { background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; block-size: auto; inline-size: auto; inset-block-start: 5px; inset-inline-start: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; z-index: 100000; /* Above WP toolbar. */ } .wp-block-columns.wp-block-columns-mobile { padding: 0; } .wp-block-columns.wp-block-columns-mobile + * { margin-block-start: min(6vw, 3rem); } /* stop pre from overflowing the container on mobile */ /* pre */ .wp-block-preformatted { white-space: pre-line; } .wp-block-separator { border: none; inline-size: 100%; block-size: 1px; margin-block: var(--margin-size, 1.5em); } @media only screen and (max-width: 83.5rem) { .wp-block-separator { max-width: 90vw; margin-inline-start: 0; /* the properties you put in */ } } .wp-block-separator.tbrtheme-separator-show { border-top: 1px solid var(--sidebar-hover, var(--hr), var(--test)); margin-block: min(6vw, 3rem); } @media only screen and (max-width: 83.5rem) { .wp-block-separator.tbrtheme-separator-show.tbrtheme-separator-margin-bottom-zero { margin-block-end: 0; /* the properties you put in */ } } .wp-block-separator-spacer { margin-top: var(--margin-size, 1.5em); margin-block-start: var(--margin-size, 1.5em); } @media only screen and (max-width: 83.5rem) { .wp-block-spacer.tbrtheme-spacer-height { height: min(6vw, 3rem) !important; /* the properties you put in */ } } .wp-block-group__inner-container.wp-block-group-overflow-x { /* cater for grid tables and tabbed lists on mobile */ overflow-x: auto; } /* img */ .aligncenter { margin-inline: auto; } figure.tbrtheme-stretch-image { height: 100%; margin-block-end: 0; } figure.tbrtheme-stretch-image img { width: 100%; height: 100%; object-fit: cover; } .gform_wrapper.gravity-theme .gform_fields { gap: 0.5em 1.5em; } @media only screen and (max-width: 640px) { .gform_wrapper.gravity-theme { --mobile-form-spacing: 1rem; --shade-form-bg: transparent; padding: 0; padding-bottom: min(6vw, 1.5rem); /* the properties you put in */ } .gform_wrapper.gravity-theme .ginput_complex span { margin-bottom: 0; } .gform_wrapper.gravity-theme .gform_fields, .gform_wrapper.gravity-theme .ginput_complex { row-gap: var(--mobile-form-spacing, 1rem); } } @media only screen and (min-width: 83.5625rem) { .gform_wrapper.gravity-theme { background-color: var(--shade-form-bg); /* the properties you put in */ } } /* gravity form field styles */ .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), [id^=gform_wrapper].gform_wrapper select[multiple], input[type=text], .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=password], .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=url], .gform_wrapper.gravity-theme input[type=date], .gform_wrapper.gravity-theme input[type=month], .gform_wrapper.gravity-theme input[type=time], .gform_wrapper.gravity-theme input[type=datetime], .gform_wrapper.gravity-theme input[type=datetime-local], .gform_wrapper.gravity-theme input[type=week], .gform_wrapper.gravity-theme input[type=number], .gform_wrapper.gravity-theme input[type=search], .gform_wrapper.gravity-theme input[type=tel], .gform_wrapper.gravity-theme input[type=color] { min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-block; font-family: inherit; font-size: var(--inputtextsize); font-weight: var(--inputfontweight); color: var(--ffplaceholdertext, var(--test)); background-color: var(--ffbg, var(--test)); transition: border-color 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); border-radius: 1em; border: 0.125em solid; border: 0.125em solid var(--ffborder, var(--test)); transition: 100ms ease-in; padding: 0.5em 1em; outline: 3px solid transparent; outline-offset: 0.25em; line-height: 1.25; /* override mobile style of line-height: 2 */ } .entry-text form .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .entry-text form [id^=gform_wrapper].gform_wrapper select[multiple], .entry-text form input[type=text], .entry-text form .gform_wrapper.gravity-theme input[type=text], .entry-text form .gform_wrapper.gravity-theme input[type=password], .entry-text form .gform_wrapper.gravity-theme input[type=email], .entry-text form .gform_wrapper.gravity-theme input[type=url], .entry-text form .gform_wrapper.gravity-theme input[type=date], .entry-text form .gform_wrapper.gravity-theme input[type=month], .entry-text form .gform_wrapper.gravity-theme input[type=time], .entry-text form .gform_wrapper.gravity-theme input[type=datetime], .entry-text form .gform_wrapper.gravity-theme input[type=datetime-local], .entry-text form .gform_wrapper.gravity-theme input[type=week], .entry-text form .gform_wrapper.gravity-theme input[type=number], .entry-text form .gform_wrapper.gravity-theme input[type=search], .entry-text form .gform_wrapper.gravity-theme input[type=tel], .entry-text form .gform_wrapper.gravity-theme input[type=color] { padding: 0.5em 1em; } .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):hover, .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):active, .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus-visible, [id^=gform_wrapper].gform_wrapper select[multiple]:hover, [id^=gform_wrapper].gform_wrapper select[multiple]:active, [id^=gform_wrapper].gform_wrapper select[multiple]:focus-visible, input[type=text]:hover, input[type=text]:active, input[type=text]:focus-visible, .gform_wrapper.gravity-theme input[type=text]:hover, .gform_wrapper.gravity-theme input[type=text]:active, .gform_wrapper.gravity-theme input[type=text]:focus-visible, .gform_wrapper.gravity-theme input[type=password]:hover, .gform_wrapper.gravity-theme input[type=password]:active, .gform_wrapper.gravity-theme input[type=password]:focus-visible, .gform_wrapper.gravity-theme input[type=email]:hover, .gform_wrapper.gravity-theme input[type=email]:active, .gform_wrapper.gravity-theme input[type=email]:focus-visible, .gform_wrapper.gravity-theme input[type=url]:hover, .gform_wrapper.gravity-theme input[type=url]:active, .gform_wrapper.gravity-theme input[type=url]:focus-visible, .gform_wrapper.gravity-theme input[type=date]:hover, .gform_wrapper.gravity-theme input[type=date]:active, .gform_wrapper.gravity-theme input[type=date]:focus-visible, .gform_wrapper.gravity-theme input[type=month]:hover, .gform_wrapper.gravity-theme input[type=month]:active, .gform_wrapper.gravity-theme input[type=month]:focus-visible, .gform_wrapper.gravity-theme input[type=time]:hover, .gform_wrapper.gravity-theme input[type=time]:active, .gform_wrapper.gravity-theme input[type=time]:focus-visible, .gform_wrapper.gravity-theme input[type=datetime]:hover, .gform_wrapper.gravity-theme input[type=datetime]:active, .gform_wrapper.gravity-theme input[type=datetime]:focus-visible, .gform_wrapper.gravity-theme input[type=datetime-local]:hover, .gform_wrapper.gravity-theme input[type=datetime-local]:active, .gform_wrapper.gravity-theme input[type=datetime-local]:focus-visible, .gform_wrapper.gravity-theme input[type=week]:hover, .gform_wrapper.gravity-theme input[type=week]:active, .gform_wrapper.gravity-theme input[type=week]:focus-visible, .gform_wrapper.gravity-theme input[type=number]:hover, .gform_wrapper.gravity-theme input[type=number]:active, .gform_wrapper.gravity-theme input[type=number]:focus-visible, .gform_wrapper.gravity-theme input[type=search]:hover, .gform_wrapper.gravity-theme input[type=search]:active, .gform_wrapper.gravity-theme input[type=search]:focus-visible, .gform_wrapper.gravity-theme input[type=tel]:hover, .gform_wrapper.gravity-theme input[type=tel]:active, .gform_wrapper.gravity-theme input[type=tel]:focus-visible, .gform_wrapper.gravity-theme input[type=color]:hover, .gform_wrapper.gravity-theme input[type=color]:active, .gform_wrapper.gravity-theme input[type=color]:focus-visible { border-color: var(--ffhoverborder, var(--test)); /* the properties you put in */ } [id^=gform_wrapper].gform_wrapper select:not([multiple]), .gform_wrapper.gravity-theme select { min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-block; font-family: inherit; font-size: var(--inputtextsize); font-weight: var(--inputfontweight); color: var(--ffplaceholdertext, var(--test)); background-color: var(--ffbg, var(--test)); transition: border-color 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); border-radius: 1em; border: 0.125em solid; border: 0.125em solid var(--ffborder, var(--test)); transition: 100ms ease-in; padding: 0.5em 1em; outline: 3px solid transparent; outline-offset: 0.25em; cursor: pointer; line-height: 1.25; appearance: none; /* replace down arrow with svg */ /* background: left 0 / 100% 100% no-repeat inherit; */ background: 98% center/18px 18px no-repeat url("../../icons/theme/form-select/angle-down.svg") var(--ffbg, var(--test)); padding-inline-end: 1.25em; /* required by webkit for allowing room for the angle-down.svg arrow ^ */ text-align: start; max-inline-size: 100%; /* remove nasty glow in chrome */ } .entry-text form [id^=gform_wrapper].gform_wrapper select:not([multiple]), .entry-text form .gform_wrapper.gravity-theme select { padding: 0.5em 1em; } [id^=gform_wrapper].gform_wrapper select:not([multiple]):hover, [id^=gform_wrapper].gform_wrapper select:not([multiple]):active, [id^=gform_wrapper].gform_wrapper select:not([multiple]):focus-visible, .gform_wrapper.gravity-theme select:hover, .gform_wrapper.gravity-theme select:active, .gform_wrapper.gravity-theme select:focus-visible { border-color: var(--ffhoverborder, var(--test)); /* the properties you put in */ } .gform_wrapper select:not([multiple]) option { font-family: inherit; font-size: var(--inputtextsize); font-weight: var(--inputfontweight); color: var(--ffplaceholdertext, var(--test)); background-color: var(--ffbg, var(--test)); transition: border-color 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); cursor: pointer; line-height: 1.25; padding: 0.5em 1em; } .gform_wrapper textarea, .gform_wrapper.gravity-theme textarea { min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-block; font-family: inherit; font-size: var(--inputtextsize); font-weight: var(--inputfontweight); color: var(--ffplaceholdertext, var(--test)); background-color: var(--ffbg, var(--test)); transition: border-color 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); border-radius: 1em; border: 0.125em solid; border: 0.125em solid var(--ffborder, var(--test)); transition: 100ms ease-in; padding: 0.5em 1em; outline: 3px solid transparent; outline-offset: 0.25em; line-height: 1.75; display: block; /* over-ride display:inline-block */ } .entry-text form .gform_wrapper textarea, .entry-text form .gform_wrapper.gravity-theme textarea { padding: 0.5em 1em; } .gform_wrapper textarea:hover, .gform_wrapper textarea:active, .gform_wrapper textarea:focus-visible, .gform_wrapper.gravity-theme textarea:hover, .gform_wrapper.gravity-theme textarea:active, .gform_wrapper.gravity-theme textarea:focus-visible { border-color: var(--ffhoverborder, var(--test)); /* the properties you put in */ } .gform_wrapper input[type=radio], .gform_wrapper input[type=checkbox], .gform_wrapper input[type=file] { outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); outline-offset: 0; } .gform_wrapper input[type=radio]:active, .gform_wrapper input[type=radio]:focus-visible, .gform_wrapper input[type=checkbox]:active, .gform_wrapper input[type=checkbox]:focus-visible, .gform_wrapper input[type=file]:active, .gform_wrapper input[type=file]:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } .gform_wrapper input[type=radio]:focus + label, .gform_wrapper input[type=radio]:focus-visible + label, .gform_wrapper input[type=checkbox]:focus + label, .gform_wrapper input[type=checkbox]:focus-visible + label { text-decoration: underline; } /* upload files */ .gform_drop_area { padding: var(--margin-size, 1.5em); border: 1px dashed var(--color-primary-700); text-align: center; margin-bottom: 0.5em; background: var(--color-files-upload-bg); border-radius: 1em; } .gform_wrapper .top_label input.medium[type=file] { inline-size: auto; } .gform_wrapper.gravity-theme .gfield-choice-input { inset-block-start: auto; } .gform_wrapper.gravity-theme .gfield-choice-input + label { cursor: pointer; } /* buttons */ .gform_wrapper.gravity-theme input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]) { line-height: inherit; } .gform_wrapper.gravity-theme .gform_page_footer .button { margin-block: 0; overflow: hidden; } .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button) { /* use either secondary (solid) OR outline */ /* override wordpress style (I apply box-shadow on focus-visible) */ /* end override wordpress style */ word-break: normal; box-sizing: border-box; min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-flex; align-items: center; border-radius: 1em 0; position: relative; /* cater for ::before ::after position absolute */ isolation: isolate; /* cater for z-index -1 of ::before ::after */ overflow: hidden; font-family: "Noto Sans", var(--sans-serif); font-weight: var(--buttontextweight); font-size: var(--buttontextsize); line-height: 1.4; text-align: center; text-transform: capitalize; white-space: normal; border: 0.1875em solid transparent; cursor: pointer; opacity: 1; padding: 0.75em 1.75em; /* fix button text colours in iOS */ -webkit-text-fill-color: currentcolor; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); /* !important to override gravity forms opinionated bullshit */ color: var(--btn-fg, var(--test)) !important; background-color: inherit !important; outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); --btn-fg: var(--shade-light, var(--test)); --btn-solid-bdr: transparent; border-color: var(--btn-solid-bdr, var(--test)); /* background colour */ background-color: var(--btn-bg) !important; --btn-fg: var(--light); --btn-bg: var(--color-secondary-button); border-width: 0; /* end use either secondary (solid) OR outline */ } .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button):focus { box-shadow: none; } .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button)[href^=mailto] { text-transform: none; } @media (prefers-reduced-motion: no-preference) { .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button) { transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); will-change: transform; } } .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button)::before { content: " "; position: absolute; z-index: -1; inset: -0.125em; opacity: 0; transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); background-color: var(--btn-fg); } .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button):hover, .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button):active, .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button):focus-visible { color: var(--btn-fg, var(--test)); /* the properties you put in */ } .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button):hover::before, .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button):active::before, .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button):focus-visible::before { opacity: 1; } .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button):focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button):disabled { opacity: 0.5 !important; cursor: not-allowed; filter: grayscale(100%); pointer-events: none; } .gform_wrapper.gravity-theme :where(.gform_previous_button.button, .secondary-button.button)::before { background-color: var(--color-secondary-button-hover); } .gform_wrapper.gravity-theme .gform_save_link.button { /* override wordpress style (I apply box-shadow on focus-visible) */ /* end override wordpress style */ word-break: normal; box-sizing: border-box; min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-flex; align-items: center; border-radius: 1em 0; position: relative; /* cater for ::before ::after position absolute */ isolation: isolate; /* cater for z-index -1 of ::before ::after */ overflow: hidden; font-family: "Noto Sans", var(--sans-serif); font-weight: var(--buttontextweight); font-size: var(--buttontextsize); line-height: 1.4; text-align: center; text-transform: capitalize; white-space: normal; border: 0.1875em solid transparent; cursor: pointer; opacity: 1; padding: 0.75em 1.75em; /* fix button text colours in iOS */ -webkit-text-fill-color: currentcolor; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); /* !important to override gravity forms opinionated bullshit */ color: var(--btn-fg, var(--test)) !important; background-color: inherit !important; outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); --btn-fg: var(--shade-light, var(--test)); --btn-solid-bdr: transparent; border-color: var(--btn-solid-bdr, var(--test)); /* background colour */ background-color: var(--btn-bg) !important; --btn-fg: var(--light); --btn-bg: var(--color-primary-button); border-width: 0; } .gform_wrapper.gravity-theme .gform_save_link.button:focus { box-shadow: none; } .gform_wrapper.gravity-theme .gform_save_link.button[href^=mailto] { text-transform: none; } @media (prefers-reduced-motion: no-preference) { .gform_wrapper.gravity-theme .gform_save_link.button { transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); will-change: transform; } } .gform_wrapper.gravity-theme .gform_save_link.button::before { content: " "; position: absolute; z-index: -1; inset: -0.125em; opacity: 0; transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); background-color: var(--btn-fg); } .gform_wrapper.gravity-theme .gform_save_link.button:hover, .gform_wrapper.gravity-theme .gform_save_link.button:active, .gform_wrapper.gravity-theme .gform_save_link.button:focus-visible { color: var(--btn-fg, var(--test)); /* the properties you put in */ } .gform_wrapper.gravity-theme .gform_save_link.button:hover::before, .gform_wrapper.gravity-theme .gform_save_link.button:active::before, .gform_wrapper.gravity-theme .gform_save_link.button:focus-visible::before { opacity: 1; } .gform_wrapper.gravity-theme .gform_save_link.button:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } .gform_wrapper.gravity-theme .gform_save_link.button:disabled { opacity: 0.5 !important; cursor: not-allowed; filter: grayscale(100%); pointer-events: none; } .gform_wrapper.gravity-theme .gform_save_link.button::before { background-color: var(--color-primary-button-hover); } .gform_wrapper.gravity-theme .gfield_list_icons { background-color: transparent; --gfield-list-icons-button-size: 1.5rem; --gfield-list-icons-button-gap: 0.25em; width: calc(var(--gfield-list-icons-button-size) * 2 + var(--gfield-list-icons-button-gap)); margin-inline-start: 2%; gap: var(--gfield-list-icons-button-gap); } .gform_wrapper.gravity-theme .gfield_list_icons button { background-repeat: no-repeat; background-size: var(--gfield-list-icons-button-size); margin: 0; width: var(--gfield-list-icons-button-size); height: var(--gfield-list-icons-button-size); flex: 0 0 var(--gfield-list-icons-button-size); } .gform_wrapper.gravity-theme .gfield_list_icons button.delete_list_item { margin: 0; } /* gravity form field text styles */ .gform_wrapper.gravity-theme .gform_fileupload_rules, .gform_wrapper.gravity-theme .gfield_header_item { font-size: var(--label); } .gform_wrapper.gravity-theme .gfield_label, .gform_wrapper.gravity-theme .ginput_complex label, .gform_wrapper.gravity-theme .field_description_below .ginput_complex label { font-family: "Noto Sans", var(--sans-serif); font-size: var(--label); font-weight: var(--fontweight400); color: var(--formlabel, black); transition: color 100ms linear; cursor: pointer; display: block; margin: 1em 0 0.25em; line-height: 1.3; } .gform_wrapper.gravity-theme .gfield_checkbox label, .gform_wrapper.gravity-theme .gfield_radio label { font-family: "Noto Sans", var(--sans-serif); font-size: var(--label); font-weight: var(--fontweight400); color: var(--formlabel, black); transition: color 100ms linear; } /* .gform_wrapper.gravity-theme .gfield_label { */ /* margin-block-start: 2em; */ /* } */ .gform_wrapper.gravity-theme .gfield_required { padding: 0; font-weight: var(--fontweight400); color: var(--formreq, var(--test)); font-size: var(--fontsizereq); line-height: 0.5; font-style: normal; } .gform_wrapper.gravity-theme .gfield_contains_required .ginput_complex label.gform-field-label--type-sub, .gform_wrapper.gravity-theme .gfield_contains_required .gfield_label { font-weight: var(--fontweight400); display: flex; gap: 0.5em; align-items: center; } .gform_wrapper.gravity-theme .gfield_contains_required .ginput_complex label.gform-field-label--type-sub .gfield_required, .gform_wrapper.gravity-theme .gfield_contains_required .gfield_label .gfield_required { font-weight: var(--fontweight400); color: var(--formreq, var(--test)); font-size: var(--fontsizereq); line-height: 0.5; font-style: normal; } .gform_confirmation_wrapper { margin: auto; } .gform_confirmation_message { font-weight: var(--fontweight400); text-align: center; } /* gravity form field messages */ /* p */ /* .gform_required_legend { */ /* @include hide-hide; */ /* } */ .gform_wrapper .gform_validation_errors, .gform_wrapper .gfield_validation_message, .gform_wrapper .gform_wrapper .validation_message { background-color: var(--bg); border-color: var(--formerror, var(--test)); } .gform_wrapper .gfield_error [aria-invalid=true] { border-color: var(--formerror, var(--test)); } .gform_wrapper .gform_validation_errors, .gform_wrapper [aria-invalid=true] + label, .gform_wrapper label + [aria-invalid=true], .gform_wrapper .gfield_error legend, .gform_wrapper .gfield_error .gfield_repeater_cell label, .gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message { color: var(--formerror, var(--test)); } .gform_wrapper .gform_validation_errors { font-size: var(--fontsmall); border-radius: 0; box-shadow: none; margin: 1em 0; /* close icon? what? hide it's padding space */ padding-inline-start: 16px; /* end close icon? what? hide it's padding space */ } .gform_wrapper .gform_validation_errors > h2 { color: inherit; font-size: var(--bodytextsize); font-weight: var(--fontweight400); margin-block-end: 1em; /* close icon? what? hide it. */ /* end close icon? what? hide it. */ } .gform_wrapper .gform_validation_errors > h2 .gform-icon { /* inset-block-start: auto; */ /* height: auto; */ display: none; } .gform_wrapper .gform_validation_errors > ol { padding-inline-start: 0; } .gform_wrapper .gform_validation_errors > ol li { color: inherit; font-size: inherit; list-style-type: none !important; } .gform_wrapper .gform_validation_errors > ol a { color: var(--formerrorlinks, var(--test)); font-size: inherit; text-decoration: underline; text-underline-offset: 0.125em; } .gform_wrapper .gform_validation_errors > ol a:hover, .gform_wrapper .gform_validation_errors > ol a:active, .gform_wrapper .gform_validation_errors > ol a:focus-visible { text-decoration: none; /* the properties you put in */ } /* gravity form field styles */ /* gravity forms */ .gform_wrapper.gravity-theme { max-inline-size: calc(90vw - 2rem); } .gform_wrapper.gravity-theme * { max-inline-size: calc(90vw - 2rem); } .gravity-form-100percent .gform_wrapper.gravity-theme { inline-size: 100%; } @media only screen and (max-width: 83.5rem) { .gform_wrapper.gravity-theme { overflow: hidden; /* the properties you put in */ } } .gform_wrapper.gravity-theme .gfield textarea.large { block-size: 12em; } .gform_wrapper.gravity-theme div.gfield { display: flex; flex-direction: column; height: 100%; /* tbrtheme form 1 applicaton for vendors */ /* end tbrtheme form 1 applicaton */ } .gform_wrapper.gravity-theme div.gfield label.gfield_label { align-self: flex-start; } .gform_wrapper.gravity-theme div.gfield label.gfield_label + div { margin-top: auto; } .gform_wrapper.gravity-theme div.gfield#field_2_25 label.gfield_label + div, .gform_wrapper.gravity-theme div.gfield#field_2_58 label.gfield_label + div, .gform_wrapper.gravity-theme div.gfield#field_2_66 label.gfield_label + div { margin-top: 0; } .gform_wrapper.gravity-theme .gfield_list_group { padding-inline: 0; border: none; } .gform_wrapper.gravity-theme .gchoice { display: flex; align-items: center; margin-block-end: 0.5em; } .gform_wrapper.gravity-theme input[type=checkbox] + label { display: flex; align-items: center; gap: 0.5em; } .gform_wrapper.gravity-theme input[type=radio] { margin: 0 0.5em 0 0; } .gform_wrapper.gravity-theme .gform_footer, .gform_wrapper.gravity-theme .gform_page_footer { padding: 1.5em 0 0; margin: 0; justify-content: flex-end; } .gform_wrapper.gravity-theme .gform_footer input, .gform_wrapper.gravity-theme .gform_footer button, .gform_wrapper.gravity-theme .gform_page_footer input, .gform_wrapper.gravity-theme .gform_page_footer button { margin-bottom: 0; } .gform_page_footer { display: flex; justify-content: flex-end; gap: 0.5em; } .gform_wrapper.gravity-theme input[type=text].ginput_card_security_code { margin-block-end: -4px; } .grecaptcha-badge { z-index: 2; } .hidden_label { margin: 0; } .gform_wrapper.gravity-theme :where(.gform_footer, .gform_page_footer) :where(button + input, input + input, input + button) { margin-inline-start: 0; } .gform_wrapper.gravity-theme .gf_page_steps { display: flex; flex-wrap: wrap; /*! autoprefixer: ignore next */ justify-content: start; gap: 1em; border: none; padding-block-start: min(6vw, 3rem); padding-block-end: min(6vw, 3rem); } @media only screen and (max-width: 80rem) { .gform_wrapper.gravity-theme .gf_page_steps { flex-direction: column; /* the properties you put in */ } } .gform_wrapper.gravity-theme .gf_page_steps .gf_step { margin: 0; display: inline-flex; align-items: center; } .gform_wrapper.gravity-theme .gf_page_steps .gf_step:hover, .gform_wrapper.gravity-theme .gf_page_steps .gf_step:active, .gform_wrapper.gravity-theme .gf_page_steps .gf_step:focus-visible { isolation: isolate; z-index: 10; /* the properties you put in */ } .gform_wrapper.gravity-theme .gf_page_steps .gf_step_number { font-size: var(--bodytextsize); font-weight: var(--fontweight600); color: var(--color-primary-500); border-color: var(--color-primary-500); flex: 0 0 40px; } .gform_wrapper.gravity-theme .gf_page_steps .gf_step_active .gf_step_number { color: var(--light); background-color: var(--color-primary-500); } .gform_wrapper.gravity-theme .gf_page_steps .gf_step_completed .gf_step_number::before { /* overlay with background colour */ background-color: var(--color-primary-700); border-color: var(--color-primary-700); } .gform_wrapper.gravity-theme .gf_page_steps .gf_step_completed .gf_step_number::after { /* tick */ color: var(--light); } .gform_wrapper.gravity-theme .gf_page_steps .gf_step_label { padding-inline: 0.75em; font-size: inherit; line-height: 1.3; } @media only screen and (min-width: 80.0625rem) { .gform_wrapper.gravity-theme .gf_page_steps .gf_step_active .gf_step_label { display: revert; /* the properties you put in */ } } @media only screen and (min-width: 80.0625rem) { .gform_wrapper.gravity-theme .gf_page_steps { /* the properties you put in */ } .gform_wrapper.gravity-theme .gf_page_steps .gf_step:not(.gf_step_active) .gf_step_label { position: absolute; margin-inline-start: 3.25em; transform: scaleX(0); transform-origin: center left; transition: transform 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } .gform_wrapper.gravity-theme .gf_page_steps .gf_step:not(.gf_step_active):hover, .gform_wrapper.gravity-theme .gf_page_steps .gf_step:not(.gf_step_active):active, .gform_wrapper.gravity-theme .gf_page_steps .gf_step:not(.gf_step_active):focus-visible { isolation: isolate; /* the properties you put in */ } } @media only screen and (min-width: 80.0625rem) and (min-width: 80.0625rem) { .gform_wrapper.gravity-theme .gf_page_steps .gf_step:not(.gf_step_active):hover .gf_step_label, .gform_wrapper.gravity-theme .gf_page_steps .gf_step:not(.gf_step_active):active .gf_step_label, .gform_wrapper.gravity-theme .gf_page_steps .gf_step:not(.gf_step_active):focus-visible .gf_step_label { transform: scaleX(1); background-color: var(--bg); padding: 1em; box-shadow: var(--x, 0) var(--y, 0) var(--boxshadowblur, 0.125em) var(--boxshadowspread, 0) rgb(var(--boxshadowrgb, 0 0 0)/var(--boxshadowalpha, 0.3)); /* the properties you put in */ } } /* @forward "gf-multipage"; */ .gform_wrapper.gravity-theme .gf_progressbar { --progressbar-radius: 1em; --layout: 0.35em; border-radius: var(--progressbar-radius); margin-bottom: var(--margin-size, 1.5em); background-color: var(--ffbg, var(--test)); } .gform_wrapper.gravity-theme .gf_progressbar span { font-size: var(--fontsmall); line-height: 1; margin-inline: calc(var(--layout) * 2); padding-block: var(--layout); float: none; } .gform_wrapper.gravity-theme .gf_progressbar_title { color: var(--light-grey-text, var(--test)); font-size: var(--fontsmall); margin-block-end: 0.5em; } .gform_wrapper.gravity-theme .gf_progressbar_percentage { text-align: end; height: auto; border-radius: var(--progressbar-radius); } .gform_wrapper.gravity-theme .gf_progressbar_percentage:not(.percentbar_100) { border-radius: var(--progressbar-radius) 0 0 var(--progressbar-radius); } .gform_wrapper.gravity-theme .gf_progressbar .percentbar_custom { color: var(--light, var(--test)); background-color: var(--color-progress); } /* blocks gallery */ .wp-block-tbrtheme-gallery .tbrtheme-gallery-content { --gallerythumbwidth: 333px; --gallerythumbheight: 300px; --gallerythumbpadding: 0.75em; --gallerythumbbg: var(--color-primary-100); display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--gallerythumbwidth, 150px), 1fr)); grid-auto-rows: var(--gallerythumbheight, 150px); column-gap: min(5vw, 1.5rem); row-gap: min(5vw, 1.5rem); padding-block-start: min(10vw, 5rem); padding-block-end: min(10vw, 5rem); } @media only screen and (max-width: calc(666px + min(var(--pagesidemargin), 5rem) * 2 + min(5vw, 1.5rem))) { .wp-block-tbrtheme-gallery .tbrtheme-gallery-content { --gallerythumbheight: 400px; } } @media only screen and (min-width: calc(666px + min(var(--pagesidemargin), 5rem) * 2 + min(5vw, 1.5rem))) { .wp-block-tbrtheme-gallery .tbrtheme-gallery-content { --gallerythumbheight: 300px; } } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.has-caption { grid-auto-rows: var(--gallerythumbheight, 150px) minmax(1em, min-content); } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.has-caption :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) { grid-row: span 2; } @media only screen and (max-width: calc(666px + min(var(--pagesidemargin), 5rem) * 2 + min(5vw, 1.5rem))) { .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.has-caption :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video):not(.has-caption) { grid-template-rows: none; } } @media only screen and (min-width: calc(666px + min(var(--pagesidemargin), 5rem) * 2 + min(5vw, 1.5rem))) { .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.has-video { --gallerythumbheight: 225px; } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.has-video :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) img, .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.has-video :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) video { aspect-ratio: var(--aspect-ratio, 16/9); } } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.has-lightbox :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) { opacity: 1; transition: opacity var(--transition-timing) linear; } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.has-lightbox :is(figure.wp-block-tbrtheme-image img, figure.wp-block-tbrtheme-video video) { transition: filter var(--transition-timing) ease, scale var(--transition-timing) ease; } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) { display: grid; grid-template-rows: subgrid; row-gap: 0.25em; margin: 0; } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) :is(a, picture, img, video) { width: 100%; height: 100%; } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) :is(img, video) { object-fit: cover; } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) video { height: 101%; max-inline-size: none; } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) figcaption { margin-block-start: 0; } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-centre :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) { background-color: var(--gallerythumbbg, silver); padding: var(--gallerythumbpadding, 0.5em); } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-centre :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) img { object-fit: contain; margin: auto; } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-centre :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) figcaption { text-align: center; margin-block-start: var(--gallerythumbpadding, 0.5em); } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover { grid-auto-rows: var(--gallerythumbheight, 150px); } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) { display: grid; grid-template-areas: "content"; grid-row: span 1; overflow: hidden; } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) img { transform: scale(1); transition: transform 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) figcaption { opacity: 1; transform: translateY(0%); transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53), transform 0ms cubic-bezier(0.55, 0.09, 0.68, 0.53) 250ms; } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video):hover, .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video):active, .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video):focus-visible { z-index: 1; /* the properties you put in */ } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video):hover img, .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video):active img, .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video):focus-visible img { transform: scale(1.05); } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video):hover figcaption, .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video):active figcaption, .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video):focus-visible figcaption { opacity: 0; transform: translateY(100%); } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) .tbrtheme-image-wrapper, .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) video, .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) figcaption { grid-area: content; } .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) figcaption { align-self: end; --opacity: 0.5; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); padding: 0.3em 0.6em; background-color: var(--shade-light-opacity); } @media (prefers-color-scheme: dark) { .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) figcaption { background-color: var(--shade-darker-grey-opacity); } } @media (hover: none) { .wp-block-tbrtheme-gallery .tbrtheme-gallery-content.image-hover.has-video :is(figure.wp-block-tbrtheme-image, figure.wp-block-tbrtheme-video) figcaption { align-self: start; } } .tbrtheme-gallery-content.has-lightbox:has(.wp-block-tbrtheme-image:hover) :is(.wp-block-tbrtheme-image, .wp-block-tbrtheme-video):not(:hover) { opacity: 0.75; } .tbrtheme-gallery-content.has-lightbox:has(.wp-block-tbrtheme-image:hover) :is(.wp-block-tbrtheme-image, .wp-block-tbrtheme-video):not(:hover) img, .tbrtheme-gallery-content.has-lightbox:has(.wp-block-tbrtheme-image:hover) :is(.wp-block-tbrtheme-image, .wp-block-tbrtheme-video):not(:hover) video { scale: 0.98; filter: grayscale(100%); } @supports not selector(:has(a, b)) { .tbrtheme-gallery-content.has-lightbox .wp-block-tbrtheme-image:hover img, .tbrtheme-gallery-content.has-lightbox .wp-block-tbrtheme-image:hover video { scale: 1.025; filter: contrast(125%) brightness(95%); } } /* wordpress classic editor */ .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--gallerythumbwidth, 150px), 1fr)); gap: var(--gallerygap, min(6vw, 3rem)); margin-block-end: 3rem; } .gallery figure.gallery-item { display: grid; grid-template-areas: "content"; margin: 0; overflow: hidden; } .gallery figure.gallery-item img { transform: scale(1); transition: transform 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } .gallery figure.gallery-item figcaption { opacity: 1; transform: translateY(0%); transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53), transform 0ms cubic-bezier(0.55, 0.09, 0.68, 0.53) 250ms; } .gallery figure.gallery-item:hover, .gallery figure.gallery-item:active, .gallery figure.gallery-item:focus-visible { z-index: 1; /* the properties you put in */ } .gallery figure.gallery-item:hover img, .gallery figure.gallery-item:active img, .gallery figure.gallery-item:focus-visible img { transform: scale(1.05); } .gallery figure.gallery-item:hover figcaption, .gallery figure.gallery-item:active figcaption, .gallery figure.gallery-item:focus-visible figcaption { opacity: 0; transform: translateY(100%); } .gallery figure.gallery-item .gallery-icon, .gallery figure.gallery-item figcaption { grid-area: content; } .gallery figure.gallery-item img { width: 100%; height: 100%; object-fit: cover; } .gallery figure.gallery-item figcaption { align-self: end; z-index: 1; } :where(.gallery, .wp-block-gallery) figcaption { font-family: "Noto Sans", var(--sans-serif); font-size: var(--caption); font-weight: var(--fontweight400); text-transform: capitalize; text-align: center; display: block; margin: 0; padding: 3em 0.77em 0.7em; line-height: 1.2; color: var(--figcaption); background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent); pointer-events: none; max-height: none; position: initial; } /* Baquette lightbox */ #baguetteBox-overlay, .baguetteBox-button { background-color: var(--bg) !important; } .baguetteBox-button svg { inline-size: 100%; block-size: 100%; } .baguetteBox-button svg polyline, .baguetteBox-button svg g { stroke: var(--color-primary-500); } .baguetteBox-button:focus, .baguetteBox-button:hover { background-color: var(--bg) !important; } .baguetteBox-button:focus svg polyline, .baguetteBox-button:focus svg g, .baguetteBox-button:hover svg polyline, .baguetteBox-button:hover svg g { stroke: var(--color-primary-700); } #baguetteBox-overlay .full-image { display: inline-flex; justify-content: center; padding-block-start: 1em; } #baguetteBox-overlay .full-image figure { display: flex; justify-content: center; } #baguetteBox-overlay .full-image img { box-shadow: none; object-fit: contain; background-color: var(--light); } #baguetteBox-overlay .full-image figcaption { color: var(--light); background-color: var(--color-footer-bg); font-family: inherit; padding: 0.5em 1em; line-height: 1.3; } @media only screen and (max-width: 83.5rem) { #baguetteBox-overlay .full-image figcaption { text-align: left; /* the properties you put in */ } } @media only screen and (min-width: 83.5625rem) { #baguetteBox-overlay { /* the properties you put in */ } #baguetteBox-overlay .full-image { padding-block-start: 0; } #baguetteBox-overlay figure { align-items: center; } } /*@forward "project";*/ h1.website-title { max-block-size: var(--header-logo-height); z-index: 31; } h1.website-title.mobile-only { display: flex; } h1.website-title a svg .header-fill { transition: fill 300ms; } h1.website-title a:hover, h1.website-title a:active, h1.website-title a:focus-visible { /* the properties you put in */ } h1.website-title a:hover svg .header-fill, h1.website-title a:active svg .header-fill, h1.website-title a:focus-visible svg .header-fill { fill: var(--color-golden); } h1.website-title a:hover svg .header-fill:nth-child(3), h1.website-title a:active svg .header-fill:nth-child(3), h1.website-title a:focus-visible svg .header-fill:nth-child(3) { fill: var(--color-golden); } .header-logo svg { inline-size: var(--header-logo-width, 200px); block-size: 100%; aspect-ratio: calc(var(--header-logo-width-aspect-ratio, 100) / var(--header-logo-height-aspect-ratio, 100)); overflow: visible; } .headertitle-sitemenu_content-one .header-logo svg { color: var(--color-logo); } .footer-logo { inline-size: min(90vw, 87rem, var(--footer-logo-width, 200px)); block-size: 100%; aspect-ratio: calc(var(--footer-logo-width-aspect-ratio, 100) / var(--footer-logo-height-aspect-ratio, 100)); } .footer-logo-container svg { inline-size: min(90vw, 87rem, var(--footer-logo-width, 200px)); block-size: 100%; aspect-ratio: calc(var(--footer-logo-width-aspect-ratio, 100) / var(--footer-logo-height-aspect-ratio, 100)); overflow: visible; } .tbrtheme-contact-form { padding: min(5vw, 1.5rem) min(6vw, 3rem); border-block-start: 1.25rem solid var(--feature-colour, var(--test)); border-block-start: min(3vw, 1.25rem) solid var(--feature-colour, var(--test)); } .tbrtheme-contact-form h2 { margin-block-end: min(6vw, 3rem); } .tbrtheme-contact-form .gform_heading { display: flex; justify-content: space-between; flex-wrap: wrap; } .wp-block-tbrtheme-contact { color: var(--light); background-color: var(--box-background); padding: min(6vw, 3rem); display: grid; height: 100%; } .wp-block-tbrtheme-contact .site-contact-table { width: 100%; border-spacing: 1.25em 0.75em; } .wp-block-tbrtheme-contact .site-contact-table th { font-weight: var(--fontweight400); text-align: end; vertical-align: top; position: relative; } .wp-block-tbrtheme-contact .site-contact-table th::after { content: ":"; position: absolute; inset: 0 -0.5em 0 auto; } .tbrtheme-center-align { align-items: center; } body { display: grid; align-content: start; grid-template-columns: [fullwidth-start left-edge-start] minmax(min(var(--pagesidemargin), 5rem), 1fr) [page-start right-edge-start] minmax(min(5vw, 5rem), 1fr) [breakout-start] var(--breakoutwidth) [content-start] min(80vw, 77rem) [content-end] var(--breakoutwidth) [breakout-end] minmax(min(5vw, 5rem), 1fr) [page-end left-edge-end] minmax(min(var(--pagesidemargin), 5rem), 1fr) [fullwidth-end right-edge-end]; } @media only screen and (max-width: 83.5rem) { body { /* the properties you put in */ } body .nav-top { order: 1; } body .headertitle-sitemenu-wrapper, body > * { position: relative; max-width: 100vw; overflow-x: hidden; } } body.error404 .entry-text > article { grid-column: 2; } body > * { grid-column: fullwidth; } .site-footer { display: grid; align-content: start; grid-template-columns: [fullwidth-start left-edge-start] minmax(min(var(--pagesidemargin), 5rem), 1fr) [page-start right-edge-start] minmax(min(5vw, 5rem), 1fr) [breakout-start] var(--breakoutwidth) [content-start] min(80vw, 77rem) [content-end] var(--breakoutwidth) [breakout-end] minmax(min(5vw, 5rem), 1fr) [page-end left-edge-end] minmax(min(var(--pagesidemargin), 5rem), 1fr) [fullwidth-end right-edge-end]; } @media only screen and (min-width: 83.5625rem) { .site-footer { position: sticky; top: 100vh; /* the properties you put in */ } } :where(.nav-top, .nav-breadcrumbs) { display: grid; align-content: start; grid-template-columns: [fullwidth-start left-edge-start] minmax(min(var(--pagesidemargin), 5rem), 1fr) [page-start right-edge-start] minmax(min(5vw, 5rem), 1fr) [breakout-start] var(--breakoutwidth) [content-start] min(80vw, 77rem) [content-end] var(--breakoutwidth) [breakout-end] minmax(min(5vw, 5rem), 1fr) [page-end left-edge-end] minmax(min(var(--pagesidemargin), 5rem), 1fr) [fullwidth-end right-edge-end]; } :where(.nav-top, .nav-breadcrumbs) > * { grid-column: page; } @media only screen and (max-width: 83.5rem) { .headertitle-sitemenu-wrapper { display: grid; align-content: start; grid-template-columns: [fullwidth-start left-edge-start] minmax(min(var(--pagesidemargin), 5rem), 1fr) [page-start right-edge-start] minmax(min(5vw, 5rem), 1fr) [breakout-start] var(--breakoutwidth) [content-start] min(80vw, 77rem) [content-end] var(--breakoutwidth) [breakout-end] minmax(min(5vw, 5rem), 1fr) [page-end left-edge-end] minmax(min(var(--pagesidemargin), 5rem), 1fr) [fullwidth-end right-edge-end]; } .headertitle-sitemenu-wrapper > * { grid-column: page; } /* the properties you put in */ } @media only screen and (min-width: 83.5625rem) { .headertitle-sitemenu-wrapper { display: grid; align-content: start; grid-template-columns: [fullwidth-start left-edge-start] minmax(min(var(--pagesidemargin), 5rem), 1fr) [page-start right-edge-start] minmax(min(5vw, 5rem), 1fr) [breakout-start] var(--breakoutwidth) [content-start] min(80vw, 77rem) [content-end] var(--breakoutwidth) [breakout-end] minmax(min(5vw, 5rem), 1fr) [page-end left-edge-end] minmax(min(var(--pagesidemargin), 5rem), 1fr) [fullwidth-end right-edge-end]; } .headertitle-sitemenu-wrapper > * { grid-column: content; } /* the properties you put in */ } :where(.site-content) { display: grid; align-content: start; grid-template-columns: [fullwidth-start left-edge-start] minmax(min(var(--pagesidemargin), 5rem), 1fr) [page-start right-edge-start] minmax(min(5vw, 5rem), 1fr) [breakout-start] var(--breakoutwidth) [content-start] min(80vw, 77rem) [content-end] var(--breakoutwidth) [breakout-end] minmax(min(5vw, 5rem), 1fr) [page-end left-edge-end] minmax(min(var(--pagesidemargin), 5rem), 1fr) [fullwidth-end right-edge-end]; } @media only screen and (max-width: 83.5rem) { :where(.site-content) { /* the properties you put in */ } :where(.site-content) > * { inline-size: 100%; grid-column: page; } } @media only screen and (min-width: 83.5625rem) { :where(.site-content) { /* the properties you put in */ } :where(.site-content) > * { inline-size: 100%; grid-column: content; } } .single-post .entry-text { display: block !important; } .entry-text > :where(.wp-block-group, .wp-block-columns) { grid-column: page; } .entry-text > :where(.wp-block-group, .wp-block-columns).tbrtheme-fullwidth-panel { grid-column: fullwidth; display: grid; align-content: start; grid-template-columns: [fullwidth-start left-edge-start] minmax(min(var(--pagesidemargin), 5rem), 1fr) [page-start right-edge-start] minmax(min(5vw, 5rem), 1fr) [breakout-start] var(--breakoutwidth) [content-start] min(80vw, 77rem) [content-end] var(--breakoutwidth) [breakout-end] minmax(min(5vw, 5rem), 1fr) [page-end left-edge-end] minmax(min(var(--pagesidemargin), 5rem), 1fr) [fullwidth-end right-edge-end]; } .entry-text > :where(.wp-block-group, .wp-block-columns).tbrtheme-fullwidth-panel > * { grid-column: page; } .entry-text > :where(.wp-block-group, .wp-block-columns).tbrtheme-panel-no-padding { padding: 0; } @media only screen and (max-width: 80rem) { .entry-text > :where(.wp-block-group, .wp-block-columns) { /* the properties you put in */ } .entry-text > :where(.wp-block-group, .wp-block-columns).tbrtheme-fullwidth-panel-mobile { grid-column: fullwidth; padding-inline: min(6vw, 3rem); } } .entry-text .wp-block-image.tbrtheme-fullwidth-panel { grid-column: fullwidth; } @media only screen and (max-width: 83.5rem) { .page-template-default .entry-text > *:not(div):not(figure):not(article):not(section), .entry-text > :where(.wp-block-group, .wp-block-columns), .error404 .entry-text, .center-content, .center-content_wrapper, .grid-auto-columns, .site-footer-content { inline-size: 100%; grid-column: page; /* the properties you put in */ } } @media only screen and (min-width: 83.5625rem) { .page-template-default .entry-text > *:not(div):not(figure):not(article):not(section), .entry-text > :where(.wp-block-group, .wp-block-columns), .error404 .entry-text, .center-content, .center-content_wrapper, .grid-auto-columns, .site-footer-content { inline-size: 100%; grid-column: content; /* the properties you put in */ } } .entry-text > :where(.wp-block-group, .wp-block-columns, .grid-auto-columns) { padding-block-start: min(6vw, 3rem); padding-block-end: min(6vw, 3rem); } .entry-text > :where(.wp-block-group, .wp-block-columns, .grid-auto-columns).tbrtheme-container-padding-three { padding-block-start: min(6vw, 3rem); padding-block-end: min(6vw, 3rem); } .entry-text > :where(.wp-block-group, .wp-block-columns, .grid-auto-columns).tbrtheme-container-padding-zero { padding-block-start: 0; padding-block-end: 0; } .entry-text > :where(.wp-block-group, .wp-block-columns, .grid-auto-columns).tbrtheme-container-padding-five-zero { padding-block-start: min(10vw, 5rem); padding-block-end: 0; } .entry-text > :where(.wp-block-group, .wp-block-columns, .grid-auto-columns).tbrtheme-container-padding-three-zero { padding-block-start: min(6vw, 3rem); padding-block-end: 0; } .entry-text > :where(.wp-block-group, .wp-block-columns, .grid-auto-columns) + :where(.wp-block-group, .wp-block-columns, .grid-auto-columns) { padding-block-start: 0; } .entry-text > .wp-block-group.tbrtheme-table-wrapper { padding-block-start: min(5vw, 1.5rem); padding-block-end: 0; } .entry-text > .wp-block-group.tbrtheme-table-wrapper:last-of-type { padding-block-end: 0; } .site-title { padding-block-start: min(5vw, 1.5rem); } .tbrtheme-footer-cta .wp-block-reusable { padding-block-start: 0; padding-block-end: min(6vw, 3rem); } .site-footer { /* stylelint-disable-line */ padding-block-start: min(10vw, 5rem); padding-block-end: min(6vw, 4rem); } .entry-text > :where(.wp-block-group, .wp-block-columns):first-child, .single-post article.post { padding-block-start: 0; } .entry-text > h2 + :where(.wp-block-group, .wp-block-columns) { padding-block-start: 0; } .wp-block-columns + .wp-block-columns { padding-block-start: 0; } .wp-block-columns + .wp-block-group:not(.tbrtheme-alt-bg) { padding-block-start: 0; } .wp-block-group + .wp-block-group:not(.tbrtheme-alt-bg) { padding-block-start: 0; } .wp-block-group + .wp-block-columns:not(.tbrtheme-alt-bg) { padding-block-start: 0; } .wp-block-group.tbrtheme-top-padding-no-bottom-padding { padding-block-start: min(10vw, 5rem); padding-block-end: 0; } .gf-multipage_wrapper { padding-block-end: min(10vw, 5rem); } /* default layout for when no layout blocks are being used */ .page-template-default .entry-text > *:last-child:not(div):not(figure):not(article):not(section):not(blockquote) { padding-block-end: min(10vw, 5rem); } /* end default layout for when no layout blocks are being used */ .nav-breadcrumbs { padding-block-end: min(5vw, 1.5rem); } .page .page-title + .site-content { padding-block-start: 0 !important; } body:not(.home) section.entry > .entry-text > :where(.wp-block-group:last-of-type, .wp-block-columns:last-of-type) { padding-block-end: min(6vw, 3rem); } @media only screen and (max-width: 80rem) { .entry-text > .wp-block-columns.tbrtheme-fullwidth-panel { max-inline-size: none; flex-direction: revert; } .entry-text > .wp-block-columns.tbrtheme-alt-bg { max-inline-size: none; overflow-x: hidden; } /* the properties you put in */ } .entry-text p + h1 { margin-block-start: min(6vw, 3rem); } .wp-block-image + h3 { margin-block-start: 1.5rem; } .wp-block-column { display: flex; flex-direction: column; } .wp-block-column.is-vertically-aligned-top { justify-content: start; } .wp-block-column.is-vertically-aligned-center { justify-content: center; } .wp-block-column.is-vertically-aligned-bottom { justify-content: end; } .wp-block-column.is-vertically-aligned-bottom div.wp-block-button-link:last-child { margin-block-end: 0; } .wp-block-column :where(p.tbrtheme-cta:last-child, .content-float-bottom) { margin-block-start: auto; } .wp-block-column.content-float-top p.tbrtheme-cta:last-child { margin-block-start: revert; } .hentry .tbrtheme-cta-link { margin-block: 2em; } /* details / summary navigation animation */ /* details summary nav constants */ /* fade into view - uses pointer-events css */ /* end fade into view */ /* from top */ /* end from top */ /* from side */ /* end from side */ /* from bottom on desktop */ /* end from bottom */ /* eg: main { @include animation($jump) { transform: translateY(-6rem); } } */ /* for some headings */ /* slower for bigger icons */ /* 300ms for smaller icons */ /* 300ms for smaller icons */ /* eg @include animation($reveal) */ /* use these on scss files when calling animations: @use "../navigation/details-summary-nav/animations" as *; @use "../animations/" as *; */ .headertitle-sitemenu-wrapper { z-index: 32; } .headertitle-sitemenu_content-one { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: min(6vw, 3rem); } .headertitle-sitemenu_content-one .site-nav_button { grid-column: 3; align-self: start; } @media only screen and (max-width: 83.5rem) { .headertitle-sitemenu_content-one { padding-block: 0.5em; /* the properties you put in */ } .headertitle-sitemenu_content-one .site-nav .main-menu-styles > li a { padding-block: 0.5em; } } @media only screen and (min-width: 83.5625rem) { .headertitle-sitemenu_content-one { padding-block: 1em; /* the properties you put in */ } .headertitle-sitemenu_content-one .site-nav { grid-column: 2; } } .headertitle-sitemenu_content-one .header-sponsor-image { display: grid; justify-content: center; position: absolute; inset: 0 0 auto auto; z-index: 40; } @media only screen and (max-width: 83.5rem) { .headertitle-sitemenu_content-one .header-sponsor-image { display: none; /* the properties you put in */ } } .headertitle-sitemenu_content-one .header-sponsor-image img { block-size: 102px; object-fit: contain; background-color: white; padding: 0.25rem 0.5rem; } .headertitle-sitemenu_content-two { --banner-padding: min(6vw, 3rem); grid-column: fullwidth; display: grid; margin-block-end: var(--banner-padding); } .headertitle-sitemenu_content-two .site-header { display: grid; align-content: start; grid-template-columns: [fullwidth-start left-edge-start] minmax(min(var(--pagesidemargin), 5rem), 1fr) [page-start right-edge-start] minmax(min(5vw, 5rem), 1fr) [breakout-start] var(--breakoutwidth) [content-start] min(80vw, 77rem) [content-end] var(--breakoutwidth) [breakout-end] minmax(min(5vw, 5rem), 1fr) [page-end left-edge-end] minmax(min(var(--pagesidemargin), 5rem), 1fr) [fullwidth-end right-edge-end]; position: relative; isolation: isolate; } @media only screen and (max-width: 44.875rem) { .headertitle-sitemenu_content-two .site-header { /* the properties you put in */ } .headertitle-sitemenu_content-two .site-header::after { position: absolute; inset: 0 auto 0 0; inline-size: 26rem; content: " "; background-image: linear-gradient(to right, transparent, var(--color-secondary-900), var(--color-secondary-900), transparent); background-position: center; opacity: 0.75; z-index: 0; } } .headertitle-sitemenu_content-two .site-header::before { position: absolute; inset: 0; content: " "; z-index: -1; } @media only screen and (max-width: 44.875rem) { .headertitle-sitemenu_content-two .site-header::before { inset: 0 0 0 -5em; background-image: url("../../images/banner-grapes-vine.jpg"); background-repeat: no-repeat; background-size: cover; background-position-x: right -5em; /* the properties you put in */ } } @media only screen and (min-width: 44.9375rem) { .headertitle-sitemenu_content-two .site-header::before { background-image: linear-gradient(to right, var(--color-secondary-900) 70%, transparent), url("../../images/banner-grapes-vine.jpg"); background-repeat: no-repeat, no-repeat; background-size: 78%, cover; background-position: left, right -5em center; /* the properties you put in */ } } @media only screen and (min-width: 83.5625rem) { .headertitle-sitemenu_content-two .site-header::before { background-size: cover, cover; background-position: -30vw, right -5em center; /* the properties you put in */ } } .headertitle-sitemenu_content-two .site-header-title-wrapper { z-index: 1; } @media only screen and (max-width: 83.5rem) { .headertitle-sitemenu_content-two .site-header-title-wrapper { inline-size: 100%; grid-column: page; /* the properties you put in */ } } @media only screen and (min-width: 83.5625rem) { .headertitle-sitemenu_content-two .site-header-title-wrapper { inline-size: 100%; grid-column: content; /* the properties you put in */ } } @media only screen and (max-width: 64rem) { .headertitle-sitemenu_content-two .site-header { /* the properties you put in */ } .headertitle-sitemenu_content-two .site-header > picture { position: relative; isolation: isolate; } .headertitle-sitemenu_content-two .site-header > picture::after { content: " "; position: absolute; inset: 0; background-image: linear-gradient(to right, hsla(0, 0%, 96%, 0.4) 29ch, transparent); } } .headertitle-sitemenu_content-two .site-header > picture, .headertitle-sitemenu_content-two .site-header > picture img { width: 100%; max-inline-size: 100%; height: 100%; grid-row: 2; grid-column: 1; } @media only screen and (min-width: 83.5625rem) { .headertitle-sitemenu_content-two .site-header > picture, .headertitle-sitemenu_content-two .site-header > picture img { grid-column: content; /* the properties you put in */ } } .headertitle-sitemenu_content-two .site-header > picture img { width: 100%; max-inline-size: 100%; height: 100%; object-fit: cover; } .headertitle-sitemenu_content-two .site-header p.website-grapes { grid-row: 2; grid-column: 1; font-size: var(--fontsize40-90); margin-block-start: 0.6em; margin-block-end: 0.6em; margin-inline-start: 1ch; z-index: 1; opacity: 0.8; display: grid; grid-template-columns: repeat(20, 0.5ch); grid-template-rows: repeat(3, 1lh); place-content: start; } @media only screen and (min-width: 83.5625rem) { .headertitle-sitemenu_content-two .site-header p.website-grapes { grid-column: content; /* the properties you put in */ } } .headertitle-sitemenu_content-two .site-header p.website-grapes span { display: block; } .headertitle-sitemenu_content-two .site-header p.website-grapes span.gsm-font-grenache { grid-row: 1; grid-column: 1/span 12; } .headertitle-sitemenu_content-two .site-header p.website-grapes span.gsm-font-shiraz { grid-row: 2; grid-column: 11/span 9; translate: 0 0.075em; } .headertitle-sitemenu_content-two .site-header p.website-grapes span.gsm-font-mouv { grid-row: 3; grid-column: 2/span 17; translate: 0 0.2em; letter-spacing: -0.02em; } @media only screen and (max-width: 83.5rem) { .header-sponsor-image-mobile { margin-block-end: min(6vw, 3rem); background-color: white; } body:not(.home) .header-sponsor-image-mobile { display: none; } .header-sponsor-image-mobile a { display: block; max-width: none; } .header-sponsor-image-mobile picture { width: 100%; max-inline-size: 100%; height: 100%; } .header-sponsor-image-mobile img { display: block; margin: auto; border-top: 3em solid white; border-bottom: 3em solid white; } /* the properties you put in */ } @media only screen and (max-width: 64rem) { .site-footer-content { /* https://developer.apple.com/videos/play/wwdc2021/10029/ */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/env() */ padding-block-end: calc(1.5em + env(safe-area-inset-bottom)); } /* the properties you put in */ } .site-footer { /* tbrtheme logo */ } .site-footer .footer-logo-container { /* paragraph */ margin: 0; width: min(90vw, 87rem, var(--footer-logo-width, 200px)); aspect-ratio: calc(var(--footer-logo-width-aspect-ratio, 100) / var(--footer-logo-height-aspect-ratio, 100)); display: grid; color: var(--color-primary-300); } .site-footer :where(p, li) { font-size: var(--fontsizefootertext); } .site-footer a { text-decoration: none; } .site-footer a:hover, .site-footer a:active, .site-footer a:focus-visible { text-decoration: underline; text-underline-offset: 0.125em; /* the properties you put in */ } @media (any-pointer: coarse) { .site-footer a { padding-block: 0.6em; } } .site-footer-content { display: grid; align-items: start; } .site-footer-content .footer-logo-container { grid-area: logo; } .site-footer-content .site-contact { grid-area: contact; display: flex; } .site-footer-content .site-contact p { margin: 0; } .site-footer-content .site-contact .site-contact-address { --sentencemaxwidth: 15ch; } .site-footer-content .site-contact .site-contact-contact_name, .site-footer-content .site-contact .site-contact-phone, .site-footer-content .site-contact .site-contact-email, .site-footer-content .site-contact .site-contact-facebook { display: flex; align-items: center; gap: 0.5em; } .site-footer-content .site-contact .site-contact-contact_name svg, .site-footer-content .site-contact .site-contact-phone svg, .site-footer-content .site-contact .site-contact-email svg, .site-footer-content .site-contact .site-contact-facebook svg { inline-size: 18px; block-size: 18px; } .site-footer-content p.footer-copyright { grid-area: copy; max-inline-size: none; margin-block-end: 0; --fontsizefootertext: var(--fontsize15); padding-block-start: 1.5em; border-block-start: 1px solid var(--light); } .site-footer-content .site-contact-links { z-index: 1; } @media only screen and (max-width: 480px) { .site-footer-content .site-contact-links { /* the properties you put in */ } .site-footer-content .site-contact-links p.site-contact-contact_name { margin-block-end: 1em; text-wrap: balance; } .site-footer-content .site-contact-links svg { display: none; } } @media only screen and (max-width: 48rem) { .site-footer-content { row-gap: 1.5em; grid-template-columns: 1fr; grid-template-areas: "logo" "contact" "copy"; /* the properties you put in */ } .site-footer-content .footer-logo-container { margin-block-end: 1em; } .site-footer-content .site-contact { flex-direction: column; gap: 2em; } } @media only screen and (min-width: 48.0625rem) { .site-footer-content { row-gap: 3em; grid-template-columns: var(--footer-logo-width) 1fr auto; grid-template-areas: "logo . contact" "copy copy copy"; /* the properties you put in */ } .site-footer-content .site-contact { translate: 0 0.225rem; align-self: center; } } @media only screen and (max-width: 64rem) { .page-layout-breakout { inline-size: 100%; grid-column: fullwidth; /* the properties you put in */ } } @media only screen and (min-width: 64.0625rem) and (max-width: 83.5rem) { .page-layout-breakout { inline-size: 100%; grid-column: page; /* the properties you put in */ } } @media only screen and (max-width: 83.5rem) { .page-layout-breakout { padding-inline: var(--pagesidemargin); /* the properties you put in */ } } @media only screen and (min-width: 83.5625rem) { .page-layout-breakout { padding-inline: min(3vw, 3rem); inline-size: 100%; grid-column: breakout; /* the properties you put in */ } } .left-edge-align { inline-size: 100%; grid-column: left-edge; } .right-edge-align { inline-size: 100%; grid-column: right-edge; } .entry-text form { inline-size: 100%; max-inline-size: 90vw; } .error404 main > .entry-text { padding-block-start: min(10vw, 5rem); padding-block-end: min(10vw, 5rem); } /* for private posts both excerpts page and single post page */ .tbrtheme-post-private { color: var(--color-primary-700); } .single-post :is(.wp-block-reusable.wp-block-reusable-subscribe-now, .wp-block-reusable.wp-block-reusable-take-the-quiz, .wp-block-reusable.wp-block-reusable-insights-cta) { padding: 1em 2.5em 1em 1em; } :is(.wp-block-reusable.wp-block-reusable-insights-cta) { display: block; } .wp-block-reusable.wp-block-reusable-insights-cta { padding: 1em 2.5em 1em 1em; background-color: var(--theme-grey); margin-block-end: min(6vw, 3rem); } .wp-block-reusable.wp-block-reusable-insights-cta h2 { --sentencemaxwidth: 16ch; } .wp-block-reusable.wp-block-reusable-insights-cta p { --sentencemaxwidth: 33ch; } :is(.wp-block-reusable-subscribe-now, .wp-block-reusable-take-the-quiz) p { font-size: var(--fontsize30); font-weight: var(--fontweight400); } :is(.wp-block-reusable-subscribe-now, .wp-block-reusable-take-the-quiz) a { font-size: var(--bodytextsize); } .single-post :is(.wp-block-reusable-subscribe-now, .wp-block-reusable-take-the-quiz) p { font-size: var(--fontsize25); } .single-post :is(.wp-block-reusable-subscribe-now, .wp-block-reusable-take-the-quiz) a { font-size: var(--bodytextsize); } @media only screen and (min-width: 83.5625rem) { .wp-block-reusable-take-the-quiz { --quiz-width: 55ch; position: absolute; transform: translateY(-100%); transition: inset 500ms linear; inset: calc(var(--banner-height) + var(--header-logo-height) - 1.3rem) max(50vw - var(--mobilemaxwidth) / 2, 50vw - var(--pagecontentwidth) / 2) auto auto; max-width: var(--quiz-width); width: var(--quiz-width); /* the properties you put in */ } } .wp-block-reusable-take-the-quiz h2 { font-size: var(--fontsize30); font-weight: 700; --sentencemaxwidth: 18ch; margin-block-end: 0.5em; line-height: 1.4; } .wp-block-reusable-take-the-quiz p { font-size: var(--fontsize17); font-weight: 400; --sentencemaxwidth: 44ch; } .wp-block-reusable-take-the-quiz .tbrtheme-cta-link { margin-block-start: 2em; } .entry-text form.search-form { display: grid; grid-template-columns: 1fr 3rem; } .entry-text form.search-form input.search-field { grid-column: fullwidth; grid-row: 1; padding: 0.25em 0.5em; border-width: 1px; border-radius: 100vw; --ffbg: var(--light); --ffborder: var(--dark); } .entry-text form.search-form button.search-button { grid-column: 2; grid-row: 1; block-size: 100%; padding: 0 !important; border-width: 0 !important; display: grid !important; place-content: center; --btn-bg: transparent !important; } .entry-text form.search-form button.search-button::before { content: none !important; } .entry-text form.search-form button.search-button svg { fill: var(--dark); } .entry-text form.search-form button.search-button:hover, .entry-text form.search-form button.search-button:active, .entry-text form.search-form button.search-button:focus-visible { --btn-bg: transparent; /* the properties you put in */ } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper { --shade-ff-bg: var(--shade-light); inline-size: 100%; grid-column: page; display: grid; column-gap: min(3vw, 1.5em); align-items: stretch; margin-block-end: min(6vw, 3rem); } @media only screen and (max-width: 23.4375rem) { :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper { row-gap: min(3vw, 1.5em); /* the properties you put in */ } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper > h2 { grid-row: auto !important; } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form select, :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form input[type=search] { inline-size: 100%; } } @media only screen and (min-width: 23.5rem) { :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper { grid-template-columns: repeat(3, max-content); grid-template-rows: repeat(2, auto); /* the properties you put in */ } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper > h2 { grid-column: fullwidth; grid-row: 1; } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form { grid-row: 2; } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form select, :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form input[type=search] { inline-size: min(28vw, 13rem); } } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form { --ffborder: currentColor; --shade-form-bg: transparent; inline-size: auto; max-inline-size: none; padding: 0; } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form select, :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form input[type=search] { border-width: 1px; border-radius: 100vw; } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form select:not([multiple]), :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form input[type=search] { padding: 0.25em 0.5em; } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form button.search-button { block-size: 100%; padding: 0; border-width: 0; display: grid; place-content: center; --btn-bg: transparent; } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form button.search-button::before { content: none; } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form button.search-button svg { fill: var(--dark); } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form button.search-button:hover, :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form button.search-button:active, :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper form button.search-button:focus-visible { --btn-bg: transparent; /* the properties you put in */ } :where(.search, .archive, .blog) .site-content { /* inline padding */ padding-block-start: min(6vw, 3rem); padding-block-end: min(10vw, 5rem); } @media only screen and (max-width: 83.5rem) { :where(.search, .archive, .blog) .site-content { inline-size: 100%; grid-column: fullwidth; /* the properties you put in */ } } @media only screen and (min-width: 83.5625rem) { :where(.search, .archive, .blog) .site-content { inline-size: 100%; grid-column: content; /* defaults to be overridden */ /* 69-5=64 */ /* 64/2=32 */ /* 64/4=16 */ --column-count-base: 77; --column-spacing: 5; /* gap of 5, + 1 for line positioning */ /* 50 50 = 32 32 */ --column-one: 19; --column-two: calc(var(--column-count-base) - (var(--column-one) + var(--column-spacing))); display: grid; grid-template-columns: repeat(var(--column-count-base), minmax(0.75rem, 1rem)); margin-inline: auto; max-width: min(77rem, 100%); /* the properties you put in */ } :where(.search, .archive, .blog) .site-content > :nth-child(1) { grid-column: span var(--column-one); } :where(.search, .archive, .blog) .site-content > :nth-child(2) { grid-column: calc(var(--column-one) + var(--column-spacing) + 1)/span var(--column-two); } :where(.search, .archive, .blog) .site-content.column-rule > *:not(:nth-child(1)) { position: relative; } :where(.search, .archive, .blog) .site-content.column-rule > *:not(:nth-child(1))::before { display: block; content: " "; position: absolute; inset: 0 auto 0 calc(var(--column-spacing) / 2 * -1em); width: 1px; border-left: 1px solid; } :where(.search, .archive, .blog) .site-content .tbrtheme-post-sidebar-wrapper { grid-column: 1/span var(--column-one); } :where(.search, .archive, .blog) .site-content > .entry-text, :where(.search, .archive, .blog) .site-content .pagination-block { grid-column: calc(var(--column-one) + var(--column-spacing) + 1)/span var(--column-two); } :where(.search, .archive, .blog) .site-content .wp-block-reusable-subscribe-now { position: absolute; transform: translateY(-100%); transition: inset 500ms linear; inset: calc(var(--banner-height) + var(--header-logo-height) + 1.425rem) max(50vw - var(--mobilemaxwidth) / 2, 50vw - var(--pagecontentwidth) / 2) auto auto; max-width: 52ch; } :where(.search, .archive, .blog) .site-content .wp-block-reusable-subscribe-now .tbrtheme-form-subscribe_wrapper.gform_wrapper.gravity-theme .gform_fields { column-gap: 0.5em; } } :where(.search, .archive, .blog) main > .entry-text { /* end fallback */ /* defaults to $breakpoint: tablet-landscape min */ display: block; } :where(.search, .archive, .blog) main > .entry-text article { /* a link */ } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser { display: grid; gap: min(10vw, 5rem); position: relative; background-color: var(--shade-pale-grey); padding: min(6vw, 3rem); } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser::before, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser::after { content: " "; position: absolute; inset: auto min(6vw, 3rem) 0 min(6vw, 3rem); block-size: 1px; background-color: var(--txt); } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser::before { content: none; inset: 0 min(6vw, 3rem) auto min(6vw, 3rem); } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser:first-of-type::before { content: none; } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser:last-of-type::after { content: none; } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser > .entry { padding-block: min(6vw, 3rem); } @media only screen and (max-width: 48rem) { :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser { /* the properties you put in */ } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser .tbrtheme-featured-image { grid-row: 1; } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser .tbrtheme-featured-image img { inline-size: 100%; aspect-ratio: 35/15; object-fit: cover; } } @media only screen and (min-width: 48.0625rem) { :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser { align-items: center; /* the properties you put in */ } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser .tbrtheme-featured-image, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser .tbrtheme-featured-image picture { height: 100%; } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser .tbrtheme-featured-image img { width: 100%; height: 100%; object-fit: cover; } } @media only screen and (min-width: 48.0625rem) and (max-width: 83.5rem) { :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser { grid-template-columns: 47fr 28fr; /* the properties you put in */ } } @media only screen and (max-width: 83.5rem) { :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser { padding-inline: calc((100vw - min(90vw, 87rem)) / 2); box-sizing: content-box; /* the properties you put in */ } } @media only screen and (min-width: 83.5625rem) { :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser { grid-template-columns: 47fr 28fr; /* the properties you put in */ } } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser h1.tbrtheme-post-title { font-size: var(--bodytextsize); margin-block-start: 0; } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser h1.tbrtheme-post-title a { text-decoration: none; font-weight: inherit; color: inherit; transition: color 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser h1.tbrtheme-post-title a:hover, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser h1.tbrtheme-post-title a:active, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser h1.tbrtheme-post-title a:focus-visible { color: var(--color-hover); /* the properties you put in */ } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a figure, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a section { transform-origin: top; transform: translateY(0) scale(1); transition: transform 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:hover, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:active, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:focus-visible { z-index: 1; /* the properties you put in */ } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:hover::before, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:active::before, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:focus-visible::before { opacity: 1; } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:hover figure, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:active figure, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:focus-visible figure { transform: translateY(-0.25em) scale(1.05); } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:hover section, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:active section, :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:focus-visible section { transform: translateY(1em) scale(1.05); } :where(.search, .archive, .blog) main > .entry-text article.tbrtheme-teaser a:focus-visible::before { box-shadow: 0 0 0 0.5em var(--color-primary-500); } :where(.search, .archive, .blog) main > .entry-text article .tbrtheme-post-image { margin-block-end: 2em; } :where(.search, .archive, .blog) main > .entry-text article .tbrtheme-post-image figure { margin: 0; } :where(.search, .archive, .blog) main > .entry-text article .tbrtheme-post-image img { inline-size: 100%; block-size: 215px; object-fit: cover; } :where(.search, .archive, .blog) main > .entry-text article.status-private { border-color: var(--color-primary-500); } :where(.search, .archive, .blog) main > .entry-text article.status-private .tbrtheme-post-more { display: flex; justify-content: space-between; align-items: center; } @media only screen and (min-width: 83.5625rem) { .search .entry-text { grid-column: calc(var(--column-one) + var(--column-spacing) + 1)/span var(--column-two); /* the properties you put in */ } } .search.search-no-results .entry-text form.search-form { max-inline-size: 32ch; } @media only screen and (max-width: 83.5rem) { .site-content, :where(.search, .archive, .blog) main > .entry-text { display: grid; align-content: start; grid-template-columns: [fullwidth-start left-edge-start] minmax(min(var(--pagesidemargin), 5rem), 1fr) [page-start right-edge-start] minmax(min(5vw, 5rem), 1fr) [breakout-start] var(--breakoutwidth) [content-start] min(80vw, 77rem) [content-end] var(--breakoutwidth) [breakout-end] minmax(min(5vw, 5rem), 1fr) [page-end left-edge-end] minmax(min(var(--pagesidemargin), 5rem), 1fr) [fullwidth-end right-edge-end]; } :where(.search, .archive, .blog) .tbrtheme-posts-search-wrapper > h2 { grid-row: 3; margin-block-start: min(6vw, 3rem); } .tbrtheme-posts-search-wrapper { margin-block-end: 0; } :is(.wp-block-reusable.wp-block-reusable-subscribe-now, .wp-block-reusable.wp-block-reusable-take-the-quiz) { grid-column: 2; margin-block-end: min(6vw, 3rem); place-self: start; } .tbrtheme-post-sidebar-wrapper { grid-row: 3; margin-block-start: min(6vw, 3rem); } .tbrtheme-post-sidebar-wrapper, .pagination-block, .tbrtheme-posts-search-wrapper { inline-size: 100%; grid-column: content; } :where(.search, .archive, .blog) main > .entry-text, .tbrtheme-teaser { grid-column: fullwidth; } /* the properties you put in */ } .tbrtheme-post-popular { container-type: inline-size; --feature-colour: var(--color-hover); padding-block-start: min(5vw, 2rem); border-block-start: 0.25rem solid var(--feature-colour, var(--test)); margin-block-end: min(5vw, 2rem); } @supports (container-type: inline-size) { .tbrtheme-post-popular { border-block-start: min(3cqw, 0.5rem) solid var(--feature-colour, var(--test)); } } .tbrtheme-post-popular h1.tbrtheme-post-title { font-size: var(--bodytextsize); } .tbrtheme-post-popular h1.tbrtheme-post-title a { text-decoration: none; font-weight: inherit; color: inherit; transition: color 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } .tbrtheme-post-popular h1.tbrtheme-post-title a:hover, .tbrtheme-post-popular h1.tbrtheme-post-title a:active, .tbrtheme-post-popular h1.tbrtheme-post-title a:focus-visible { color: var(--feature-colour, var(--color-hover)); /* the properties you put in */ } .blog .entry-text .nav-breadcrumbs { display: block; padding-block: 0 min(6vw, 3rem); } .single-post article .nav-breadcrumbs { display: block; padding-block: min(6vw, 3rem); } .single-post .tbrtheme-post-sidebar-wrapper { margin-block-start: min(6vw, 3rem); display: grid; gap: min(6vw, 3rem); } .single-post .entry-text p:first-of-type { margin-block-end: min(6vw, 3rem); } .single-post .entry-text p:first-of-type + figure { margin-block-end: min(6vw, 3rem); } .single-post .site-content { padding-block-end: min(10vw, 5rem); align-items: start; } @media only screen and (max-width: 83.5rem) { .single-post .site-content { row-gap: min(10vw, 5rem); /* the properties you put in */ } .single-post .site-content > * { grid-column: page; } } @media only screen and (min-width: 83.5625rem) { .single-post .site-content { /* defaults to be overridden */ /* 69-5=64 */ /* 64/2=32 */ /* 64/4=16 */ --column-count-base: 77; --column-spacing: 10; /* gap of 5, + 1 for line positioning */ /* 50 50 = 32 32 */ --column-one: 19; --column-two: calc(var(--column-count-base) - (var(--column-one) + var(--column-spacing))); display: grid; grid-template-columns: repeat(var(--column-count-base), minmax(0.75rem, 1rem)); margin-inline: auto; max-width: min(77rem, 100%); grid-template-rows: max-content auto min-content; /* the properties you put in */ } .single-post .site-content > :nth-child(1) { grid-column: span var(--column-one); } .single-post .site-content > :nth-child(2) { grid-column: calc(var(--column-one) + var(--column-spacing) + 1)/span var(--column-two); } .single-post .site-content.column-rule > *:not(:nth-child(1)) { position: relative; } .single-post .site-content.column-rule > *:not(:nth-child(1))::before { display: block; content: " "; position: absolute; inset: 0 auto 0 calc(var(--column-spacing) / 2 * -1em); width: 1px; border-left: 1px solid; } .single-post .site-content article { grid-row: 1/span 2; max-inline-size: 51rem; } } .single-post .tbrtheme-post-metadata p { margin-block-end: 0.5em; } .single-post .tbrtheme-post-metadata .tbrtheme-post-author, .single-post .tbrtheme-post-metadata .tbrtheme-post-category { color: var(--light-grey-text, var(--test)); font-size: var(--fontsmall); } .single-post .tbrtheme-post-metadata .tbrtheme-post-nav { margin: 3em 0 1em; } @media only screen and (max-width: 83.5rem) { .single-post .tbrtheme-post-sidebar-wrapper { margin: 0; gap: 0; grid-row: 2; } .single-post :is(.wp-block-reusable.wp-block-reusable-subscribe-now, .wp-block-reusable.wp-block-reusable-take-the-quiz) { grid-column: 1; } /* the properties you put in */ } @media only screen and (min-width: 83.5625rem) { .single-post .site-content > .nav-recent-posts, .single-post .site-content > .nav-blog { grid-column: 1/span var(--column-one); } /* the properties you put in */ } @media only screen and (min-width: 83.5625rem) and (min-width: 83.5625rem) { .single-post .site-content > article.hentry, .single-post .site-content > nav.nav-nextprev { grid-column: calc(var(--column-one) + var(--column-spacing) + 1)/span var(--column-two); /* the properties you put in */ } } .flxmap-container { display: block; inline-size: 100%; block-size: var(--banner-height) !important; } .tbrtheme-grid-fullwidth, .wp-block-reusable { padding-block-start: min(10vw, 5rem); padding-block-end: min(10vw, 5rem); display: grid; align-content: start; grid-template-columns: [fullwidth-start left-edge-start] minmax(min(var(--pagesidemargin), 5rem), 1fr) [page-start right-edge-start] minmax(min(5vw, 5rem), 1fr) [breakout-start] var(--breakoutwidth) [content-start] min(80vw, 77rem) [content-end] var(--breakoutwidth) [breakout-end] minmax(min(5vw, 5rem), 1fr) [page-end left-edge-end] minmax(min(var(--pagesidemargin), 5rem), 1fr) [fullwidth-end right-edge-end]; margin: 0; } .tbrtheme-grid-fullwidth > *, .wp-block-reusable > * { grid-column: page; } .wp-block-reusable.wp-block-reusable-common-footer { padding-block-end: min(6vw, 3rem); } .home .wp-block-reusable.wp-block-reusable-common-footer { padding-block-start: 0; } /* details / summary as no js menu */ /* see gap-home-loans for slide in from side positioning animations */ /* nav.site-nav navigation mixins */ /* end for nav */ /* styles */ summary { outline: none; } summary::-webkit-details-marker { display: none; } summary::marker { content: ""; } summary::-moz-focus-inner { border: 0; } @media only screen and (max-width: 83.5rem) { .site-nav { flex-direction: column; position: fixed; inset: 0 0 auto; padding: min(6em, 12vw) max(1em, max((100vw - 87rem) / 2), 5vw); --navwidth: 100vw; inline-size: var(--navwidth); max-inline-size: 100vw; min-block-size: 100vh; min-block-size: -webkit-fill-available; /* support ios */ will-change: transform; overflow-y: auto; overscroll-behavior: contain; --transition-timing: 350ms; transform: translateX(100vw); opacity: 0; transition: transform var(--transition-timing) linear var(--transition-timing), opacity var(--transition-timing) linear; } /* the properties you put in */ } @media only screen and (max-width: 83.5rem) and (min-width: 83.5625rem) { .site-nav { inset: 46.5px 0 auto; /* the properties you put in */ } } @media only screen and (max-width: 83.5rem) and (prefers-reduced-motion: reduce) { .site-nav { transition: none; } } @media only screen and (max-width: 83.5rem) { .site-nav .menu-main { transform: translateX(100vw); transition: transform var(--transition-timing) linear var(--transition-timing); } .site-nav:focus-within { transform: translateX(0); opacity: 1; transition: transform var(--transition-timing) linear, opacity var(--transition-timing) linear var(--transition-timing); } .site-nav:focus-within .menu-main { transform: translateX(-0.75em); transition: transform 0 linear var(--transition-timing); } .nav-state-open .site-nav { transform: translateX(0); opacity: 1; transition: transform var(--transition-timing) linear, opacity var(--transition-timing) linear var(--transition-timing); } } @media only screen and (max-width: 83.5rem) and (prefers-reduced-motion: reduce) { .nav-state-open .site-nav { transition: none; } } @media only screen and (max-width: 83.5rem) { .nav-state-open .site-nav .menu-main { transform: translateX(-0.75em); transition: transform 0 linear var(--transition-timing); } .site-nav .menu-expando-title { display: flex; justify-content: space-between; align-items: center; } .site-nav .menu-expando-title a { flex-grow: 1; } .site-nav button.menu-expando-control { padding-block: 0 !important; block-size: auto !important; transform: none !important; } .site-nav button.menu-expando-control svg { block-size: 100% !important; inline-size: 1.5em !important; flex-basis: auto !important; } .site-nav .main-menu-styles ul.sub-menu.menu-expando-children { overflow: hidden; --transition-timing: 200ms; transition: height var(--transition-timing) linear; } } @media only screen and (max-width: 83.5rem) and (prefers-reduced-motion: reduce) { .site-nav .main-menu-styles ul.sub-menu.menu-expando-children { transition: none; } } @media only screen and (max-width: 83.5rem) { .site-nav .main-menu-styles ul.sub-menu.menu-expando-children:focus-within { height: var(--mobile-submenu-height, auto); margin-block-end: var(--margin-size, 1.5em); } .site-nav .main-menu-styles ul.sub-menu.menu-expando-children.menu-expando-closed { height: 0; margin: 0; } .site-nav .main-menu-styles ul.sub-menu.menu-expando-children.menu-expando-open { margin-block-end: var(--margin-size, 1.5em); } } @media only screen and (max-width: 83.5rem) and (prefers-reduced-motion: reduce) { .site-nav .main-menu-styles ul.sub-menu.menu-expando-children.menu-expando-open { transition: none; } } @media only screen and (max-width: 83.5rem) { .site-nav .main-menu-styles ul.sub-menu.menu-expando-children .sub-menu { margin: 0; } .site-nav .main-menu-styles ul.sub-menu.menu-expando-children .sub-menu li.menu-item a { border: 0; } .site-nav .main-menu-styles ul.sub-menu.menu-expando-children a { border: none; font-weight: 500; padding: 0.5em 0.5em 0.5em 0; } .site-nav .main-menu-styles ul.sub-menu.menu-expando-children a svg[class*=submenu-item-arrow] { display: none; } } button.site-nav_button { /* override wordpress style (I apply box-shadow on focus-visible) */ /* end override wordpress style */ word-break: normal; box-sizing: border-box; min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-flex; align-items: center; border-radius: 1em 0; position: relative; /* cater for ::before ::after position absolute */ isolation: isolate; /* cater for z-index -1 of ::before ::after */ overflow: hidden; font-family: "Noto Sans", var(--sans-serif); font-weight: var(--buttontextweight); font-size: var(--buttontextsize); line-height: 1.4; text-align: center; text-transform: capitalize; white-space: normal; border: 0.1875em solid transparent; cursor: pointer; opacity: 1; padding: 0.75em 1.75em; /* fix button text colours in iOS */ -webkit-text-fill-color: currentcolor; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); /* !important to override gravity forms opinionated bullshit */ color: var(--btn-fg, var(--test)) !important; background-color: inherit !important; outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); --btn-fg: var(--shade-light, var(--test)); --btn-solid-bdr: transparent; border-color: var(--btn-solid-bdr, var(--test)); /* background colour */ padding: 0.5em 0.25em; box-sizing: content-box; --btn-fg: var(--color-logo, var(--test)); --btn-bg: transparent; align-items: center; justify-content: center; inline-size: min-content; line-height: 1; z-index: 40; overflow: visible; block-size: 3em; --buttontextsize: 1.25rem; transition: none; /* > mobile-fontsize */ } button.site-nav_button:focus { box-shadow: none; } button.site-nav_button[href^=mailto] { text-transform: none; } @media (prefers-reduced-motion: no-preference) { button.site-nav_button { transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); will-change: transform; } } button.site-nav_button::before { content: " "; position: absolute; z-index: -1; inset: -0.125em; opacity: 0; transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); background-color: var(--btn-fg); } button.site-nav_button:hover, button.site-nav_button:active, button.site-nav_button:focus-visible { color: var(--btn-fg, var(--test)); /* the properties you put in */ } button.site-nav_button:hover::before, button.site-nav_button:active::before, button.site-nav_button:focus-visible::before { opacity: 1; } button.site-nav_button:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } button.site-nav_button:disabled { opacity: 0.5 !important; cursor: not-allowed; filter: grayscale(100%); pointer-events: none; } button.site-nav_button::before { content: none; } button.site-nav_button::before { content: none; } button.site-nav_button svg { display: block; fill: currentcolor; overflow: hidden; } button.site-nav_button svg.opened { display: none; } button.site-nav_button span { margin: auto 0.5em auto 0; } button.site-nav_button:hover, button.site-nav_button:active { stroke: none; transition: none; } @media only screen and (max-width: 35.5rem) { button.site-nav_button { padding: 0.6em 0.25em !important; box-sizing: content-box !important; min-inline-size: auto !important; inline-size: min(5vh, 2em); block-size: min(5vh, 2em); /* the properties you put in */ } button.site-nav_button span { position: absolute; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); block-size: 1px; margin: -1px; overflow: hidden; padding: 0; inline-size: 1px; word-wrap: normal !important; } button.site-nav_button svg { inline-size: 100%; block-size: 100%; } } @media only screen and (min-width: 83.5625rem) { button.site-nav_button { inline-size: 0; block-size: 0; display: none; visibility: hidden; /* the properties you put in */ } } .nav-state-open button.site-nav_button { --btn-fg: var(--light); --btn-bg: transparent; } .nav-state-open button.site-nav_button svg.closed { display: none; } .nav-state-open button.site-nav_button svg.opened { display: inherit; } /* nav */ .site-nav { /* stylelint-disable-line no-duplicate-selectors */ color: var(--main-menu-button-text); background-color: var(--main-menu-button-bg); /* cater for wordpress gutenberg block z-indexes and for sticky header */ z-index: 33; } @media only screen and (min-width: 83.5625rem) { .site-nav { display: grid; grid-template-rows: 1fr auto 1fr; z-index: 31; /* the properties you put in */ } .site-nav .menu-main { grid-row: 2; } } :is(nav.nav-footer, nav.nav-links) { font-family: "Noto Sans", var(--sans-serif); } :is(nav.nav-footer, nav.nav-links) :is(ul.menu-footer, ul.menu-links) li { line-height: 1.25; } :is(nav.nav-footer, nav.nav-links) :is(ul.menu-footer, ul.menu-links) li a { display: inline-block; padding: 0.25em 1em; font-weight: var(--buttontextweight); white-space: nowrap; } @media only screen and (max-width: 83.5rem) { :is(nav.nav-footer, nav.nav-links) :is(ul.menu-footer, ul.menu-links) li a { padding: 0.25em 0.5em; /* the properties you put in */ } } @media (any-pointer: coarse) { :is(nav.nav-footer, nav.nav-links) :is(ul.menu-footer, ul.menu-links) li a { padding-block: 0.6em; } } :is(nav.nav-footer, nav.nav-links) :is(ul.menu-footer, ul.menu-links) li.current-menu-item > a { cursor: default; pointer-events: none; text-decoration: underline; } :is(nav.nav-footer, nav.nav-links) :is(ul.menu-footer, ul.menu-links) ul.sub-menu { margin-block-start: 0.5em; } .nav-terms ul.menu-footer li.current-menu-item > a { cursor: default; pointer-events: none; text-decoration: underline; } /* colours for menus */ .site-navigation a:not(.nav-toggle), nav a:not(.nav-toggle) { color: currentcolor; } .site-navigation a:not(.nav-toggle):focus-visible, nav a:not(.nav-toggle):focus-visible { z-index: 1; } /* reset */ /* main menu */ @media only screen and (max-width: 83.5rem) { .menu-main { inline-size: auto; /* the properties you put in */ } } @media only screen and (min-width: 83.5625rem) { .menu-main { margin: 0; gap: 0.5em; display: flex; align-items: center; /* the properties you put in */ } } .main-menu-styles ul.sub-menu { margin-block-start: 0; margin-block-end: var(--margin-size, 1.5em); } .main-menu-styles a { overflow-wrap: normal; } @media only screen and (max-width: 83.5rem) { nav.site-nav ul.main-menu-styles .menu-item ul.sub-menu { max-inline-size: 90vw; } nav.site-nav ul.main-menu-styles .menu-item ul.sub-menu::before { content: none; } /* the properties you put in */ } /* > mobile-fontsize */ @media only screen and (min-width: 83.5625rem) { /* ul */ .main-menu-styles > li.menu-item { flex: 0 0 auto; } .main-menu-styles > li.menu-item > a { white-space: nowrap; } .main-menu-styles > li.menu-item > .sub-menu { z-index: 1; position: absolute; background-color: var(--main-menu-submenu-bg); border-block-start: 0.125em solid var(--bg); opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity 300ms cubic-bezier(0.55, 0.09, 0.68, 0.53), clip-path 300ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } .main-menu-styles > li.menu-item > .sub-menu::before { position: absolute; inset: 0; margin-inline-start: var(--submenu-left); /* set in front.js on page load */ margin-inline-end: var(--submenu-right); /* set in front.js on page load */ background-color: var(--main-menu-submenu-bg); min-block-size: calc(var(--banner-height) + 0.25em); display: block; box-sizing: content-box; box-shadow: var(--x, 0) var(--y, 0) var(--boxshadowblur, 0.125em) var(--boxshadowspread, 0) rgb(var(--boxshadowrgb, 0 0 0)/var(--boxshadowalpha, 0.3)); --y: 1px; --boxshadowalpha: 0.2; } /* the properties you put in */ } @media only screen and (min-width: 83.5625rem) and (min-width: 83.5625rem) { .main-menu-styles > li.menu-item > .sub-menu::before { content: " "; /* the properties you put in */ } } @media only screen and (min-width: 83.5625rem) { .main-menu-styles .menu-item:hover .sub-menu, .main-menu-styles .menu-item:focus .sub-menu, .main-menu-styles .menu-item:focus-visible .sub-menu, .main-menu-styles .menu-item:focus-within .sub-menu { opacity: 1; clip-path: none; } } /* main menu */ .site-nav input[type=search] { --inputtextsize: var(--buttontextsize); } .main-menu-styles { /* ul */ font-weight: var(--fontweight400); } .main-menu-styles > li { margin-block-end: 0; } .main-menu-styles > li:not(.current-menu-item) a:active { position: relative; z-index: 1; --btn-fg: var(--current-menu-item, var(--test)); /* --btn-bg: var(--current-menu-item-bg, var(--test)); */ } .main-menu-styles > li:not(.current-menu-item) a:active::after { background-color: var(--color-primary-500); } .main-menu-styles > li:not(.current-menu-item) a:focus-visible { outline-color: var(--current-menu-item, var(--test)); } .main-menu-styles > li a { /* override wordpress style (I apply box-shadow on focus-visible) */ /* end override wordpress style */ word-break: normal; box-sizing: border-box; min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-flex; align-items: center; border-radius: 1em 0; position: relative; /* cater for ::before ::after position absolute */ isolation: isolate; /* cater for z-index -1 of ::before ::after */ overflow: hidden; font-family: "Noto Sans", var(--sans-serif); font-weight: var(--buttontextweight); font-size: var(--buttontextsize); line-height: 1.4; text-align: center; text-transform: capitalize; white-space: normal; border: 0.1875em solid transparent; cursor: pointer; opacity: 1; padding: 0.75em 1.75em; /* fix button text colours in iOS */ -webkit-text-fill-color: currentcolor; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); /* !important to override gravity forms opinionated bullshit */ color: var(--btn-fg, var(--test)) !important; background-color: inherit !important; outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); --btn-fg: var(--shade-light, var(--test)); --btn-solid-bdr: transparent; border-color: var(--btn-solid-bdr, var(--test)); /* background colour */ padding: 0.25em 0.75em; font-weight: var(--fontweight400); font-size: clamp(0.9rem, 1vw + 1rem, var(--fontsize20base)); text-transform: none; --btn-fg: var(--main-menu-button-text, var(--test)); --btn-bg: var(--main-menu-button-bg); border: none; outline-color: transparent; border-radius: 0; /* @include hover { */ /* --btn-fg: var(--color-primary-500, var(--test)); */ /* --btn-bg: var(--main-menu-button-bg); */ /* } */ text-decoration: none; } .main-menu-styles > li a:focus { box-shadow: none; } .main-menu-styles > li a[href^=mailto] { text-transform: none; } @media (prefers-reduced-motion: no-preference) { .main-menu-styles > li a { transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); will-change: transform; } } .main-menu-styles > li a::before { content: " "; position: absolute; z-index: -1; inset: -0.125em; opacity: 0; transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); background-color: var(--btn-fg); } .main-menu-styles > li a:hover, .main-menu-styles > li a:active, .main-menu-styles > li a:focus-visible { color: var(--btn-fg, var(--test)); /* the properties you put in */ } .main-menu-styles > li a:hover::before, .main-menu-styles > li a:active::before, .main-menu-styles > li a:focus-visible::before { opacity: 1; } .main-menu-styles > li a:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } .main-menu-styles > li a:disabled { opacity: 0.5 !important; cursor: not-allowed; filter: grayscale(100%); pointer-events: none; } @media only screen and (max-width: 83.5rem) { .main-menu-styles > li a { text-align: start; /* the properties you put in */ } } .main-menu-styles > li a::before { content: none; } .main-menu-styles > li a:hover, .main-menu-styles > li a:active, .main-menu-styles > li a:focus-visible { --btn-fg: var(--main-menu-button-fg-hover, var(--test)); background-image: none; border-color: currentColor; /* the properties you put in */ } .main-menu-styles > li.current-page-ancestor:hover, .main-menu-styles > li.current-page-ancestor:active, .main-menu-styles > li.current-page-ancestor:focus-visible, .main-menu-styles > li.current-menu-ancestor:hover, .main-menu-styles > li.current-menu-ancestor:active, .main-menu-styles > li.current-menu-ancestor:focus-visible { /* the properties you put in */ } .main-menu-styles > li.current-page-ancestor:hover > a, .main-menu-styles > li.current-page-ancestor:active > a, .main-menu-styles > li.current-page-ancestor:focus-visible > a, .main-menu-styles > li.current-menu-ancestor:hover > a, .main-menu-styles > li.current-menu-ancestor:active > a, .main-menu-styles > li.current-menu-ancestor:focus-visible > a { text-decoration: none; } .main-menu-styles > li.current-menu-item:not(.current-menu-parent) > a { cursor: default; pointer-events: none; font-weight: var(--fontweight600); --btn-fg: var(--current-menu-item, var(--test)); /* --btn-bg: var(--current-menu-item-bg, var(--test)); */ } .main-menu-styles > li .sub-menu a { /* override wordpress style (I apply box-shadow on focus-visible) */ /* end override wordpress style */ word-break: normal; box-sizing: border-box; min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-flex; align-items: center; border-radius: 1em 0; position: relative; /* cater for ::before ::after position absolute */ isolation: isolate; /* cater for z-index -1 of ::before ::after */ overflow: hidden; font-family: "Noto Sans", var(--sans-serif); font-weight: var(--buttontextweight); font-size: var(--buttontextsize); line-height: 1.4; text-align: center; text-transform: capitalize; white-space: normal; border: 0.1875em solid transparent; cursor: pointer; opacity: 1; padding: 0.75em 1.75em; /* fix button text colours in iOS */ -webkit-text-fill-color: currentcolor; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); /* !important to override gravity forms opinionated bullshit */ color: var(--btn-fg, var(--test)) !important; background-color: inherit !important; outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); --btn-fg: var(--shade-light, var(--test)); --btn-solid-bdr: transparent; border-color: var(--btn-solid-bdr, var(--test)); /* background colour */ border-radius: 0; display: flex; inline-size: auto; padding: 0.75em; --buttontextsize: var(--fontsize17base); font-weight: var(--fontweight400); text-transform: none; text-align: start; --btn-fg: var(--main-menu-submenu-text); --btn-bg: var(--main-menu-submenu-bg); border: none; outline-color: transparent; background-color: var(--btn-bg) !important; } .main-menu-styles > li .sub-menu a:focus { box-shadow: none; } .main-menu-styles > li .sub-menu a[href^=mailto] { text-transform: none; } @media (prefers-reduced-motion: no-preference) { .main-menu-styles > li .sub-menu a { transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); will-change: transform; } } .main-menu-styles > li .sub-menu a::before { content: " "; position: absolute; z-index: -1; inset: -0.125em; opacity: 0; transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); background-color: var(--btn-fg); } .main-menu-styles > li .sub-menu a:hover, .main-menu-styles > li .sub-menu a:active, .main-menu-styles > li .sub-menu a:focus-visible { color: var(--btn-fg, var(--test)); /* the properties you put in */ } .main-menu-styles > li .sub-menu a:hover::before, .main-menu-styles > li .sub-menu a:active::before, .main-menu-styles > li .sub-menu a:focus-visible::before { opacity: 1; } .main-menu-styles > li .sub-menu a:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } .main-menu-styles > li .sub-menu a:disabled { opacity: 0.5 !important; cursor: not-allowed; filter: grayscale(100%); pointer-events: none; } .main-menu-styles > li .sub-menu a::before { content: none; } .main-menu-styles > li .sub-menu a:hover, .main-menu-styles > li .sub-menu a:active, .main-menu-styles > li .sub-menu a:focus-visible { --btn-fg: var(--main-menu-submenu-text-hover, var(--test)); --btn-bg: var(--main-menu-submenu-bg-hover, var(--test)); /* --btn-bg: var(--bg); */ /* the properties you put in */ } .main-menu-styles > li .sub-menu li.current-menu-item > a { cursor: default; pointer-events: none; --btn-fg: var(--current-sub-menu-item, var(--test)); /* --btn-bg: var(--current-sub-menu-item-bg, var(--test)); */ } nav ul.main-menu-styles li.menu-item ul.sub-menu { /* en dash */ color: var(--light); } nav ul.main-menu-styles li.menu-item ul.sub-menu a { inline-size: 100%; display: block; transform: none; max-inline-size: none; } /* @forward "menu-share"; */ /* @forward "menu-sitemap"; */ /* social menu */ .menu-social { /* look */ transform: translateY(-0.6em); } .menu-social svg { transform: scale(1); transition: transform 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } .menu-social .tbrtheme-icon { --animation-delay: 1000ms; /* layout */ } .menu-social .tbrtheme-icon a { /* override wordpress style (I apply box-shadow on focus-visible) */ /* end override wordpress style */ word-break: normal; box-sizing: border-box; min-inline-size: 3rem; max-inline-size: 90vw; border-radius: 1em; display: inline-flex; align-items: center; border-radius: 1em 0; position: relative; /* cater for ::before ::after position absolute */ isolation: isolate; /* cater for z-index -1 of ::before ::after */ overflow: hidden; font-family: "Noto Sans", var(--sans-serif); font-weight: var(--buttontextweight); font-size: var(--buttontextsize); line-height: 1.4; text-align: center; text-transform: capitalize; white-space: normal; border: 0.1875em solid transparent; cursor: pointer; opacity: 1; padding: 0.75em 1.75em; /* fix button text colours in iOS */ -webkit-text-fill-color: currentcolor; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); /* !important to override gravity forms opinionated bullshit */ color: var(--btn-fg, var(--test)) !important; background-color: inherit !important; outline-offset: 0.125em; outline: 0.125em solid transparent; transition: outline-color ease-in 150ms; /* for browsers that don't seem to support outline: */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ -webkit-tap-highlight-color: var(--tap-highlight-color); --btn-fg: var(--shade-light, var(--test)); --btn-solid-bdr: transparent; border-color: var(--btn-solid-bdr, var(--test)); /* background colour */ --btn-fg: var(--social-icon-fg); --btn-bg: var(--social-icon-bg); background-image: none; padding: 0.6em; transform: translateY(0.2em); min-inline-size: auto; inline-size: 100%; block-size: 100%; display: flex; gap: 0.5em; place-items: center; text-align: center; text-decoration: none; border-radius: 50%; --icon-size: 1.5rem; } .menu-social .tbrtheme-icon a:focus { box-shadow: none; } .menu-social .tbrtheme-icon a[href^=mailto] { text-transform: none; } @media (prefers-reduced-motion: no-preference) { .menu-social .tbrtheme-icon a { transition: all 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); will-change: transform; } } .menu-social .tbrtheme-icon a::before { content: " "; position: absolute; z-index: -1; inset: -0.125em; opacity: 0; transition: opacity 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); background-color: var(--btn-fg); } .menu-social .tbrtheme-icon a:hover, .menu-social .tbrtheme-icon a:active, .menu-social .tbrtheme-icon a:focus-visible { color: var(--btn-fg, var(--test)); /* the properties you put in */ } .menu-social .tbrtheme-icon a:hover::before, .menu-social .tbrtheme-icon a:active::before, .menu-social .tbrtheme-icon a:focus-visible::before { opacity: 1; } .menu-social .tbrtheme-icon a:focus-visible { outline-color: var(--focus-outline, currentColor); /* Prevent outline overlapping, by creating a new stacking context with the transform property you can fix the outline overlapping - rotate(0) is just an example https://equinusocio.dev/blog/hot-tips-css/#prevent-outline-overlapping */ transform: rotate(0); } .menu-social .tbrtheme-icon a:disabled { opacity: 0.5 !important; cursor: not-allowed; filter: grayscale(100%); pointer-events: none; } .menu-social .tbrtheme-icon a svg { inline-size: var(--icon-size); block-size: var(--icon-size); } @media only screen and (max-width: 83.5rem) { .menu-social .tbrtheme-icon a svg { inline-size: 1.35rem; block-size: 1.35rem; /* the properties you put in */ } } .menu-social .tbrtheme-icon a::before { border-radius: 50%; background-color: var(--social-icon-fg); inline-size: calc(var(--icon-size) + 0.25em); block-size: calc(var(--icon-size) + 0.25em); inset: auto auto auto 0.5em; } .menu-social .tbrtheme-icon a span { color: var(--social-icon-fg); } .menu-social .tbrtheme-icon a:hover, .menu-social .tbrtheme-icon a:active, .menu-social .tbrtheme-icon a:focus-visible { --btn-fg: var(--social-icon-bg); background-image: none; /* the properties you put in */ } .menu-social .tbrtheme-icon a:hover span, .menu-social .tbrtheme-icon a:active span, .menu-social .tbrtheme-icon a:focus-visible span { color: var(--social-icon-fg); } .menu-social li.tbrtheme-icon + li { margin-block-start: -0.6em; } .nav-footer .menu-social .tbrtheme-icon.tbrtheme-not-in-footer { position: absolute; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); block-size: 1px; margin: -1px; overflow: hidden; padding: 0; inline-size: 1px; word-wrap: normal !important; } /* top bar */ .nav-top { color: var(--nav-top-fg, var(--test)); background-color: var(--nav-top-bg, var(--test)); position: relative; padding-block: 0.5em; grid-column: fullwidth; } @media only screen and (max-width: 83.5rem) { .nav-top { padding-block: 1em; /* the properties you put in */ } } .nav-top_content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5em; } .nav-top_content * { margin-block: 0; } .nav-top ul.tbrtheme-top-contact { padding-inline-start: 0; list-style-type: none; max-width: none; display: flex; gap: 1em; font-weight: var(--buttontextweight); } .nav-top ul.tbrtheme-top-contact > li::before { content: "​"; /* zero-width space */ position: absolute; /* here for accessible readers only */ } @media only screen and (max-width: 83.5rem) { .nav-top ul.tbrtheme-top-contact { flex-wrap: wrap; /* the properties you put in */ } } @media only screen and (min-width: 83.5625rem) { .nav-top ul.tbrtheme-top-contact { align-items: center; /* the properties you put in */ } } .nav-top ul.tbrtheme-top-contact li { display: flex; gap: 0.5em; align-items: center; } .nav-top ul.tbrtheme-top-contact svg { inline-size: 1.75em; block-size: 1.75em; } @media only screen and (min-width: 26.8125rem) { .nav-top ul.tbrtheme-top-contact { /* the properties you put in */ } .nav-top ul.tbrtheme-top-contact a, .nav-top ul.tbrtheme-top-contact span { white-space: nowrap; } } .nav-top .search-form { position: relative; display: flex; align-items: center; font-weight: var(--buttontextweight); } .nav-top .search-form::before { content: " "; position: absolute; background-color: var(--light); inset: auto 40px 0 0; block-size: 1px; } .nav-top .search-form:has(input.search-field:focus) .search-form::before { content: none; } .nav-top .search-field { inline-size: 10em; padding: 0.25em 0.5em 0.25em 0; border-radius: 0; text-align: start; color: var(--light); background-color: transparent; border: none; } .nav-top .search-field:hover, .nav-top .search-field:active, .nav-top .search-field:focus-visible { outline: none; /* the properties you put in */ } .nav-top .search-field::placeholder { color: rgb(255, 255, 255); } .nav-top button.search-button { border: none !important; } .nav-top button.search-button::before { content: none !important; } .nav-top button.search-button:hover, .nav-top button.search-button:active, .nav-top button.search-button:focus-visible { --btn-fg: var(--color-primary-500) !important; /* the properties you put in */ } .nav-top .menu-top { display: flex; align-items: center; gap: 1.5em; } .nav-top .menu-top a { font-size: var(--fontsize15); text-decoration: none; } .nav-top .menu-top a:hover, .nav-top .menu-top a:active, .nav-top .menu-top a:focus-visible { text-decoration: underline; /* the properties you put in */ } .nav-top .menu-top .tbrtheme-icon a { display: flex; align-items: center; gap: 0.25em; } /* nav top page */ #scroll-to-top .totoplink svg, #scroll-to-top .totoplink, #scroll-to-top p, #scroll-to-top { inline-size: 3rem; block-size: 3rem; } .scroll-widget-hide { opacity: 0; visibility: hidden; /* "Fade and Go Away" https://codersblock.com/blog/the-surprising-things-that-css-can-animate/ */ } /* a link up button */ /* up button */ #scroll-to-top { position: fixed; z-index: 10001; inset-block-start: calc(100vh - 7.25rem); /* at - 7.25em (don't put - $columngap) this works on android and iphone */ inset-inline-start: calc(100% - 4rem); /* to work on iphone */ } #scroll-to-top p { margin: 0; } #scroll-to-top .totoplink { /* a link with font awesome caret */ position: relative; z-index: 2; display: block; text-align: center; text-decoration: none; color: var(--svg-top-link, var(--test)); border-block-end-width: 0; outline: none; padding: 0; inline-size: unset; block-size: unset; display: unset; visibility: unset; } #scroll-to-top .totoplink svg { border: 2px solid var(--svg-top-link, var(--test)); border-radius: 50%; opacity: 0.5; transition: opacity 250ms linear 0s, scale 250ms linear 0s; scale: 1; } #scroll-to-top .totoplink:hover, #scroll-to-top .totoplink:active, #scroll-to-top .totoplink:focus-visible { border-block-end-width: 0; outline: none; /* the properties you put in */ } #scroll-to-top .totoplink:hover svg, #scroll-to-top .totoplink:active svg, #scroll-to-top .totoplink:focus-visible svg { opacity: 1; } #scroll-to-top .totoplink:focus-visible svg { scale: 1.25; } /* position on desktop */ @media only screen and (min-width: 87rem) { #scroll-to-top { inset-block-start: calc(100vh - 9.25rem); inset-inline-start: 94.5%; } } /* news posts navigation */ /* post lists pages nav */ .pagination-block { display: block; position: sticky; top: 100vh; width: 100%; margin: min(6vw, 3rem) 0; grid-column: fullwidth; /* for when not in a grid */ text-align: end; } ul.pagination { list-style-type: none; --padding: 0.25em 0.5em; display: flex; justify-content: center; gap: 1em; flex-wrap: wrap; margin-inline: 0.75em; } ul.pagination > li::before { content: "​"; /* zero-width space */ position: absolute; /* here for accessible readers only */ } @media only screen and (max-width: 83.5em) { ul.pagination { --padding: 0.5em 1em; } } ul.pagination li { font-size: var(--pagination-font-size, 0.875rem); color: var(--pagination-text, var(--test)); margin: 0.05em; /* a and span */ } @media only screen and (max-width: 83.5em) { ul.pagination li { margin: 0.5em; } } ul.pagination li .dots { padding: var(--padding, var(--test)); } ul.pagination li .page-number, ul.pagination li.btn a, ul.pagination li.btn button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow) { font-weight: 300; text-decoration: none; color: var(--pagination-link, var(--test)); padding: var(--padding, 1em); display: inline-flex; align-items: center; block-size: 100%; } ul.pagination li .page-number.current, ul.pagination li.btn a.current, ul.pagination li.btn button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow).current { font-weight: 600; color: var(--pagination-text-current, var(--test)); } ul.pagination li .page-number:hover, ul.pagination li .page-number:active, ul.pagination li .page-number:focus-visible, ul.pagination li.btn a:hover, ul.pagination li.btn a:active, ul.pagination li.btn a:focus-visible, ul.pagination li.btn button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):hover, ul.pagination li.btn button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):active, ul.pagination li.btn button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):focus-visible { font-weight: 600; color: var(--pagination-link-hover, var(--test)); /* the properties you put in */ } ul.pagination li.btn.prev a, ul.pagination li.btn.prev button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow), ul.pagination li.btn.next a, ul.pagination li.btn.next button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow) { font-size: inherit; font-weight: 600; color: var(--pagination-link, var(--test)); transform: translateX(0); transition: transform 150ms linear; } ul.pagination li.btn.prev a:hover, ul.pagination li.btn.prev a:active, ul.pagination li.btn.prev a:focus-visible, ul.pagination li.btn.prev button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):hover, ul.pagination li.btn.prev button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):active, ul.pagination li.btn.prev button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):focus-visible, ul.pagination li.btn.next a:hover, ul.pagination li.btn.next a:active, ul.pagination li.btn.next a:focus-visible, ul.pagination li.btn.next button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):hover, ul.pagination li.btn.next button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):active, ul.pagination li.btn.next button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):focus-visible { color: var(--pagination-link-hover, var(--test)); /* the properties you put in */ } ul.pagination li.btn.prev a:hover, ul.pagination li.btn.prev a:active, ul.pagination li.btn.prev a:focus-visible, ul.pagination li.btn.prev button:hover, ul.pagination li.btn.prev button:active, ul.pagination li.btn.prev button:focus-visible { transform: translateX(-0.125em); /* the properties you put in */ } ul.pagination li.btn.next a:hover, ul.pagination li.btn.next a:active, ul.pagination li.btn.next a:focus-visible, ul.pagination li.btn.next button:hover, ul.pagination li.btn.next button:active, ul.pagination li.btn.next button:focus-visible { transform: translateX(0.125em); /* the properties you put in */ } ul.pagination li.btn.disabled a, ul.pagination li.btn.disabled button[disabled]:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow) { color: var(--pagination-text-disabled, var(--test)); --btn-bg: var(--pagination-bg-disabled, var(--test)); border: 0; display: grid; place-content: center; place-items: center; opacity: 1 !important; } ul.pagination li.btn.disabled a:hover, ul.pagination li.btn.disabled a:active, ul.pagination li.btn.disabled a:focus-visible, ul.pagination li.btn.disabled button[disabled]:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):hover, ul.pagination li.btn.disabled button[disabled]:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):active, ul.pagination li.btn.disabled button[disabled]:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow):focus-visible { color: var(--pagination-text-disabled, var(--test)); /* the properties you put in */ } ul.pagination li.btn button:not(.baguetteBox-button):not(.gm-control-active):not(.glide__bullet):not(.glide__arrow) { min-inline-size: auto; block-size: 100%; padding: var(--padding, 1em); } /* single posts next previous nav */ nav.nav-nextprev { margin-block: min(6vw, 3rem); } .nav-nextprev-list { display: inline-flex; } @media (hover: none) { .nav-nextprev-list { display: flex; justify-content: space-around; } } .nav-nextprev-list .nav-prev, .nav-nextprev-list .nav-next { display: inline-flex; align-items: flex-start; } .nav-nextprev-list .nav-prev a, .nav-nextprev-list .nav-next a { color: var(--color-primary-500, var(--test)); } .nav-nextprev-list .nav-prev a:hover, .nav-nextprev-list .nav-prev a:active, .nav-nextprev-list .nav-prev a:focus-visible, .nav-nextprev-list .nav-next a:hover, .nav-nextprev-list .nav-next a:active, .nav-nextprev-list .nav-next a:focus-visible { color: var(--color-primary-500, var(--test)); /* the properties you put in */ } .nav-nextprev-list .nav-prev svg, .nav-nextprev-list .nav-next svg { width: 1.5em; height: 1.5em; } .nav-nextprev-list .nav-prev:hover, .nav-nextprev-list .nav-prev:active, .nav-nextprev-list .nav-prev:focus-visible, .nav-nextprev-list .nav-next:hover, .nav-nextprev-list .nav-next:active, .nav-nextprev-list .nav-next:focus-visible { /* the properties you put in */ } .nav-nextprev-list .nav-prev:hover svg, .nav-nextprev-list .nav-prev:active svg, .nav-nextprev-list .nav-prev:focus-visible svg, .nav-nextprev-list .nav-next:hover svg, .nav-nextprev-list .nav-next:active svg, .nav-nextprev-list .nav-next:focus-visible svg { transition: transform 250ms cubic-bezier(0.55, 0.09, 0.68, 0.53); } .nav-nextprev-list .nav-prev { justify-self: start; } .nav-nextprev-list .nav-prev:hover, .nav-nextprev-list .nav-prev:active, .nav-nextprev-list .nav-prev:focus-visible { /* the properties you put in */ } .nav-nextprev-list .nav-prev:hover svg, .nav-nextprev-list .nav-prev:active svg, .nav-nextprev-list .nav-prev:focus-visible svg { transform: translateX(-0.3em); } .nav-nextprev-list .nav-next { justify-self: end; text-align: end; } .nav-nextprev-list .nav-next:hover, .nav-nextprev-list .nav-next:active, .nav-nextprev-list .nav-next:focus-visible { /* the properties you put in */ } .nav-nextprev-list .nav-next:hover svg, .nav-nextprev-list .nav-next:active svg, .nav-nextprev-list .nav-next:focus-visible svg { transform: translateX(0.3em); } /* shiraz challenge entries page navigation */ .site-content { isolation: isolate; } nav.nav-toc { --toc-width: 32ch; background-color: var(--bg); z-index: 2; } @media only screen and (max-width: 83.5rem) { nav.nav-toc { margin-block-end: var(--margin-size, 1.5em); /* the properties you put in */ } } @media only screen and (min-width: 83.5625rem) { nav.nav-toc { padding: 1em 0.5em 0.5em 0.75em; position: sticky; inset: 0 0 auto auto; grid-column: fullwidth-start/content-start; grid-row: 2/span 3; align-self: start; display: grid; grid-template-columns: minmax(var(--toc-width), 1fr) min-content; transform: translateX(calc(var(--toc-width) * -1)); transition: transform 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); /* the properties you put in */ } nav.nav-toc .nav-toc-heading { grid-row: 1; grid-column: 2; writing-mode: vertical-rl; rotate: 180deg; align-self: start; } nav.nav-toc .nav-toc { grid-row: 1; grid-column: 1; } nav.nav-toc:hover, nav.nav-toc:active, nav.nav-toc:focus-within { z-index: 1; transform: translateX(0); /* the properties you put in */ } nav.nav-toc > * { z-index: 4; } nav.nav-toc::before { content: " "; position: absolute; inset: 0 auto 0 0; inline-size: calc(var(--toc-width) + 4.75rem); background-color: var(--bg); z-index: 3; } } nav.nav-toc .nav-toc { padding-inline-start: 2em; } nav.nav-toc .nav-toc li { font-size: var(--fontsize16); color: var(--color-silver-lm); font-weight: 900; letter-spacing: 0.0625em; line-height: 1.3; margin-block-end: 0.75em; } @media (prefers-color-scheme: dark) { nav.nav-toc .nav-toc li { color: var(--color-silver-dm); } } @media (hover: none) { nav.nav-toc .nav-toc li { font-size: var(--fontsize20base); } } nav.nav-toc .nav-toc li a { font-size: var(--fontsize14); font-weight: 400; text-decoration: none; color: #444; display: block; } @media (hover: none) { nav.nav-toc .nav-toc li a { font-size: var(--fontsize17base); } } @media (prefers-color-scheme: dark) { nav.nav-toc .nav-toc li a { color: #bbb; } } nav.nav-toc .nav-toc li a:hover, nav.nav-toc .nav-toc li a:active, nav.nav-toc .nav-toc li a:focus-visible { text-decoration: underline; /* the properties you put in */ } .nav-toc-heading { font-size: var(--fontsizeh5); color: var(--shade-placeholder-text); } @media (prefers-color-scheme: dark) { .nav-toc-heading { color: var(--shade-light-grey); } } .page-template-toc-enter :not(#contact-details, #page):target { display: grid; gap: 0.125em; /*! autoprefixer: ignore next */ align-items: start; transform: translateX(calc((1em + 0.125em) * -1)); grid-template-columns: 1em 1fr; } .page-template-toc-enter :not(#contact-details, #page):target::before { content: " "; inline-size: 1em; block-size: 0.5em; margin-block-start: 0.25em; transition: background-color 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53); /* https://bennettfeely.com/clippy/ https://css-tricks.com/almanac/properties/c/clip-path/*/ clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); background-color: var(--color-golden); } /* pagination-gallery used in /scss/basics/resets/gallery/index.scss */ .tbrtheme-group-columns { columns: 50ch; gap: 3em; orphans: 3; } .tbrtheme-group-columns h1, .tbrtheme-group-columns h2, .tbrtheme-group-columns .tbrtheme-span-all-columns, .tbrtheme-group-columns blockquote { column-span: all; } .tbrtheme-group-columns figure, .tbrtheme-group-columns img { break-inside: avoid; } @media only screen and (max-width: 64rem) { .tbrtheme-even-columns { display: grid; row-gap: min(6vw, 3rem); /* the properties you put in */ } } @media only screen and (min-width: 64.0625rem) { .tbrtheme-even-columns { /* defaults to be overridden */ /* 69-5=64 */ /* 64/2=32 */ /* 64/4=16 */ --column-count-base: 77; --column-spacing: 5; /* gap of 5, + 1 for line positioning */ /* 50 50 = 32 32 */ --column-one: 32; --column-two: calc(var(--column-count-base) - (var(--column-one) + var(--column-spacing))); display: grid; grid-template-columns: repeat(var(--column-count-base), minmax(0.75rem, 1rem)); margin-inline: auto; max-width: min(77rem, 100%); /* the properties you put in */ } .tbrtheme-even-columns > :nth-child(1) { grid-column: span var(--column-one); } .tbrtheme-even-columns > :nth-child(2) { grid-column: calc(var(--column-one) + var(--column-spacing) + 1)/span var(--column-two); } .tbrtheme-even-columns.column-rule > *:not(:nth-child(1)) { position: relative; } .tbrtheme-even-columns.column-rule > *:not(:nth-child(1))::before { display: block; content: " "; position: absolute; inset: 0 auto 0 calc(var(--column-spacing) / 2 * -1em); width: 1px; border-left: 1px solid; } } .tbrtheme-even-columns .wp-block-column:not(:first-child) { --wp--style--block-gap: 0; } @keyframes text-slide-up-fade-in { 0% { opacity: 0; transform: translateY(var(--animation-translate)); } 100% { opacity: 1; transform: translateY(0); } } .tbrtheme-watch-visible { --transition-bezier: cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-duration: 400ms; --transition-delay: 400ms; --animation-translate: 1rem; } @media (prefers-reduced-motion: no-preference) { .tbrtheme-watch-visible { opacity: 0; transform: translateY(var(--animation-translate)); } } @media (prefers-reduced-motion: no-preference) { .tbrtheme-watch-visible.tbrtheme-in-view { animation: text-slide-up-fade-in var(--transition-bezier) var(--transition-duration) forwards var(--transition-delay); } } .wp-block-tbrtheme-front-cta::before { --transition-bezier: cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-duration: 400ms; --transition-delay: 400ms; --animation-translate: 1rem; } @media (prefers-reduced-motion: no-preference) { .wp-block-tbrtheme-front-cta::before { opacity: 0; transform: translateY(var(--animation-translate)); animation: text-slide-up-fade-in var(--transition-bezier) var(--transition-duration) forwards var(--transition-delay); } } :where(.wp-block-tbrtheme-image-card.image-card-align-right .tbrtheme-card-content).tbrtheme-watch-visible { --animation-translate: 2rem; --transition-delay: calc(400ms * 1.5); } :where(.wp-block-tbrtheme-image-card.image-card-align-right .tbrtheme-card-image).tbrtheme-watch-visible { --transition-delay: calc(400ms * 2); } :where(.wp-block-tbrtheme-info-card, .home .wp-block-quote, .tbrtheme-contact-form, .tbrtheme-card-image, h2#services).tbrtheme-watch-visible { --transition-duration: calc(400ms * 2); --animation-translate: 2rem; } :is(.wp-block-tbrtheme-info-card:nth-child(3), .wp-block-tbrtheme-info-card:nth-child(4)).tbrtheme-watch-visible { --transition-delay: calc(400ms * 2); } .gform_required_legend { position: absolute; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); block-size: 1px; margin: -1px; overflow: hidden; padding: 0; inline-size: 1px; word-wrap: normal !important; } @media only screen and (max-width: 64rem) { .tbrtheme-contact-form { margin-inline: 1rem; } /* the properties you put in */ } @media only screen and (min-width: 64.0625rem) { .wp-block-tbrtheme-image-card, .tbrtheme-infocards-group, .tbrtheme-contact-form, .entry-text > .wp-block-quote { inline-size: 100%; grid-column: content; } /* the properties you put in */ } .home .wp-block-quote { color: var(--bg); background-color: var(--color-primary-700); border-radius: 1rem; padding: min(10vw, 5rem) min(6vw, 3rem); text-align: center; margin-block: min(10vw, 5rem) 0; } .home .wp-block-quote p { font-family: "Sansita Swashed", var(--sans-serif); font-size: var(--fontsize40); letter-spacing: var(--heading-letter-spacing); line-height: 1.315; --sentencemaxwidth: 27ch; margin-inline: auto; } .home .wp-block-quote::before { content: none; } .wp-block-group.tbrtheme-contact-form { padding-block-start: 0; } .wp-block-group.tbrtheme-contact-form h2.wp-block-heading { margin-block: 2em 1em; } :has(.wp-block-tbrtheme-diary-dates:target) { scroll-padding-block-start: 0; } body.home:has(div.entry-text div.wp-block-tbrtheme-diary-dates:last-child) .site-content { z-index: 1; } body.home:has(div.entry-text div.wp-block-tbrtheme-diary-dates:last-child) .site-footer::before { content: " "; position: absolute; inset: calc(min(10vw, 5rem) * -1) 0 auto 0; block-size: min(10vw, 5rem); background-color: var(--alt-bg); z-index: -1; } .wp-block-tbrtheme-diary-dates { color: var(--light); --heading-color: var(--light); background-color: var(--color-primary-900); padding: min(6vw, 3rem); position: relative; isolation: isolate; display: grid; gap: min(6vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr)); z-index: 2; } .wp-block-tbrtheme-diary-dates:last-child { margin-block-end: min(6vw, 3rem) !important; } .wp-block-tbrtheme-diary-dates .tbrtheme-diary-dates-title { font-family: "Sansita Swashed", var(--sans-serif); font-size: var(--fontsize43); font-weight: 300; letter-spacing: -0.05em; line-height: 1.1; text-wrap: balance; margin-block-end: 1rem; color: var(--color-primary-90); } .wp-block-tbrtheme-diary-dates .tbrtheme-diary-dates-content { --sentencemaxwidth: auto; } .wp-block-tbrtheme-diary-dates .tbrtheme-diary-dates-content h3 { margin-block-end: 0.25em; } .wp-block-tbrtheme-diary-dates .tbrtheme-diary-dates-content h3 + p { --margin-size: 2.5em; } .wp-block-tbrtheme-diary-dates .tbrtheme-diary-dates-content a { display: inline; } .wp-block-tbrtheme-diary-dates .tbrtheme-diary-dates-image :is(picture, img) { width: 100%; height: 100%; } .wp-block-tbrtheme-diary-dates .tbrtheme-diary-dates-image img { object-fit: cover; } .wp-block-tbrtheme-diary-dates > * { z-index: 3; } .wp-block-tbrtheme-diary-dates::before, .wp-block-tbrtheme-diary-dates::after { content: " "; position: absolute; } .wp-block-tbrtheme-diary-dates::before { background-color: var(--color-primary-500); inset: 1em 0 1em 50%; width: 100vw; transform: translate(-50vw, 0.5em); rotate: 0.5deg; z-index: 1; } .wp-block-tbrtheme-diary-dates::after { background-color: var(--color-primary-900); inset: 0; z-index: 2; } .wp-block-tbrtheme-show-results { padding-block-end: min(10vw, 5rem); display: grid; row-gap: min(6vw, 3rem); } .tbrtheme-show-results-forms { display: flex; flex-direction: column; gap: min(5vw, 1.5rem); } @media only screen and (min-width: 80.0625rem) { .tbrtheme-show-results-forms { flex-direction: row; /* the properties you put in */ } } .tbrtheme-show-results-forms form { inline-size: auto; } .tbrtheme-show-results-forms form select, .tbrtheme-show-results-forms form input { margin-block-end: 0.25em; } .tbrtheme-show-results-content h2 { margin-block-end: 0.5em; } @media only screen and (max-width: 83.5rem) { .tbrtheme-show-results-content { /* the properties you put in */ } .tbrtheme-show-results-content figure.aligncenter { inline-size: var(--sentencemaxwidth, 72ch) !important; max-inline-size: var(--sentencemaxwidth, 72ch); margin: 0 0 var(--margin-size, 1.5em); } .tbrtheme-show-results-content figure.aligncenter img { margin: var(--margin-size, 1.5em) auto 0; } } @media only screen and (min-width: 64.0625rem) and (max-width: 83.5rem) { .tbrtheme-show-results-content { /* the properties you put in */ } .tbrtheme-show-results-content figure.alignright { float: right; clear: both; margin: 0 0 var(--margin-size, 1.5em) min(6vw, 3rem); } } @media only screen and (min-width: 83.5625rem) { .tbrtheme-show-results-content { display: grid; grid-template-columns: 1fr auto; /* the properties you put in */ } .tbrtheme-show-results-content h2 { grid-column: 1/span 2; grid-row: 1; } .tbrtheme-show-results-content > * { grid-column: 1; } .tbrtheme-show-results-content-text { grid-column: 1; grid-row: 2/span 12; } .tbrtheme-show-results-content figure.alignright { grid-column: 2; margin: 0 0 var(--margin-size, 1.5em) min(6vw, 3rem); } .tbrtheme-show-results-content figure.aligncenter { margin: var(--margin-size, 1.5em) auto; } .tbrtheme-show-results-content figure.alignleft { margin: var(--margin-size, 1.5em) 0; } } .tbrtheme-show-results-content:not(:has(figure)) { display: initial; columns: 52ch 2; gap: 3em; orphans: 3; } .tbrtheme-show-results-content:not(:has(figure)) h1, .tbrtheme-show-results-content:not(:has(figure)) h2, .tbrtheme-show-results-content:not(:has(figure)) .tbrtheme-span-all-columns, .tbrtheme-show-results-content:not(:has(figure)) blockquote { column-span: all; } .tbrtheme-show-results-content:not(:has(figure)) figure, .tbrtheme-show-results-content:not(:has(figure)) img { break-inside: avoid; } .tbrtheme-show-results-content:not(:has(figure)) p:has(a[href$=pdf]) { column-span: all; } .tbrtheme-show-results-data { overflow-x: auto; max-width: 90vw; } .tbrtheme-show-results-table:has(tbody:empty) thead { display: none; } .tbrtheme-show-results-table caption { text-align: start; font-size: var(--fontsize18base); margin-block-end: 1em; } @media only screen and (min-width: 83.5625rem) { .tbrtheme-show-results-table { /* the properties you put in */ } .tbrtheme-show-results-table thead tr th:first-child, .tbrtheme-show-results-table tbody tr td:first-child { --accordian-table-padding: 4rem; } .tbrtheme-show-results-table tbody { counter-reset: result; } .tbrtheme-show-results-table tbody tr td:first-child { position: relative; } .tbrtheme-show-results-table tbody tr td:first-child::before { counter-increment: result; content: counter(result, decimal-leading-zero) ". "; position: absolute; inset: auto auto auto 0.5rem; } } .main-sponsor-panel { --main-sponsor-panel-color: #2e1b11; background-color: var(--main-sponsor-panel-color); padding: 0 !important; margin-block-end: min(6vw, 3rem); position: relative; isolation: isolate; } .main-sponsor-panel::before { content: " "; position: absolute; inset: 0 0 0 50%; transform: translateX(-50vw); inline-size: 100vw; background-color: var(--main-sponsor-panel-color); z-index: -1; } .wp-block-tbrtheme-sponsors-details .tbrtheme-sponsor-gallery { display: grid; padding-block-start: var(--margin-size, 1.5em); padding-block-end: min(10vw, 5rem); } .wp-block-tbrtheme-sponsors-details .tbrtheme-sponsor { padding-block: min(6vw, 3rem); position: relative; isolation: isolate; } @media only screen and (min-width: 52.1875rem) { .wp-block-tbrtheme-sponsors-details .tbrtheme-sponsor { display: grid; column-gap: min(6vw, 3rem); grid-template-columns: repeat(2, 1fr); /* the properties you put in */ } .wp-block-tbrtheme-sponsors-details .tbrtheme-sponsor .screen-reader-text { position: absolute; } } .wp-block-tbrtheme-sponsors-details .tbrtheme-sponsor:nth-child(2n+1) { background-color: var(--alt-bg); } .wp-block-tbrtheme-sponsors-details .tbrtheme-sponsor:nth-child(2n+1) .screen-reader-text { position: absolute; } .wp-block-tbrtheme-sponsors-details .tbrtheme-sponsor:nth-child(2n+1)::before { content: " "; position: absolute; inset: 0 0 0 50%; width: 100vw; transform: translateX(-50vw); background-color: var(--alt-bg); z-index: -1; } .wp-block-tbrtheme-sponsors-footer { padding-block-start: min(10vw, 5rem); padding-block-end: min(10vw, 5rem); position: relative; isolation: isolate; } .wp-block-tbrtheme-sponsors-footer::before { content: " "; position: absolute; inset: 0 0 0 50%; width: 100vw; transform: translateX(-50vw); background-color: var(--color-primary-10); z-index: -1; } .wp-block-tbrtheme-sponsors-footer h2 { font-family: "Sansita Swashed", var(--sans-serif); font-weight: var(--headingweight); letter-spacing: var(--heading-letter-spacing); text-wrap: balance; font-size: var(--fontsizeh2); margin-block-end: 0.25em; line-height: 1; } .wp-block-tbrtheme-sponsors-footer .tbrtheme-sponsor-gallery { list-style-type: none; padding: 0; --sentencemaxwidth: none; display: grid; gap: min(6vw, 3rem); grid-template-columns: repeat(2, 1fr); } @media only screen and (min-width: 35.5625rem) { .wp-block-tbrtheme-sponsors-footer .tbrtheme-sponsor-gallery { grid-template-columns: repeat(4, 1fr); /* the properties you put in */ } } .wp-block-tbrtheme-sponsors-footer .tbrtheme-sponsor-image { margin: 0; background-color: #fff; border-block: 0.5em solid transparent; } @media (prefers-color-scheme: dark) { .wp-block-tbrtheme-sponsors-footer .tbrtheme-sponsor-image { background-color: #dbdbdb; } } .wp-block-tbrtheme-sponsors-footer .tbrtheme-sponsor-image img { transform: scale(1); transition: transform 250ms ease; } .wp-block-tbrtheme-sponsors-footer .tbrtheme-sponsor-image a { display: grid; place-content: center; height: 100%; } .wp-block-tbrtheme-sponsors-footer .tbrtheme-sponsor-image a:hover, .wp-block-tbrtheme-sponsors-footer .tbrtheme-sponsor-image a:active, .wp-block-tbrtheme-sponsors-footer .tbrtheme-sponsor-image a:focus-visible { /* the properties you put in */ } .wp-block-tbrtheme-sponsors-footer .tbrtheme-sponsor-image a:hover img, .wp-block-tbrtheme-sponsors-footer .tbrtheme-sponsor-image a:active img, .wp-block-tbrtheme-sponsors-footer .tbrtheme-sponsor-image a:focus-visible img { transform: scale(0.95); } #contact-details:target { outline: 0.125em solid var(--color-primary-100); outline-offset: 1rem; border-radius: 1rem; padding-block-end: 0; border-bottom: none; } #pojo-a11y-toolbar { --pojo-a11y-top: min(20vw, 8rem); } .sticky-pojo-a11y #pojo-a11y-toolbar { --pojo-a11y-top: initial; } body { --feature-colour: var(--color-primary-500); } @media (prefers-color-scheme: dark) { body { --feature-colour: var(--color-primary-500); } } img[src*="placeholder.png"] { background-color: var(--placeholder-image-bg); } .printonly { inline-size: 0; block-size: 0; display: none; visibility: hidden; } .no-js .nojs-hide { display: none; } .js .js-hide { display: none; } /* the following is used for managing menu content on mobile/desktop on some websites */ @media only screen and (max-width: 83.5rem) { .desktop-only { inline-size: 0; block-size: 0; display: none; visibility: hidden; } /* the properties you put in */ } @media only screen and (min-width: 83.5625rem) { .mobile-only { inline-size: 0; block-size: 0; display: none; visibility: hidden; } /* the properties you put in */ } @media only screen and (min-width: 83.5625rem) { .menu-mobile-only { inline-size: 0; block-size: 0; display: none; visibility: hidden; } /* the properties you put in */ } @media only screen and (max-width: 83.5rem) { .menu-desktop-only { inline-size: 0; block-size: 0; display: none; visibility: hidden; } /* the properties you put in */ } /*# sourceMappingURL=screen.css.map */