`. That wrapper becomes the sticky
* header's containing block, and it is only as tall as the top bar plus the
* header itself - so the header has nowhere to stick and scrolls away with
* the rest of the page. Collapsing the wrapper's box hands the containing
* block back to `.wp-site-blocks`, which spans the whole document.
*/
.wp-site-blocks > .wp-block-template-part:has(> .wp-block-jcore-nav-header) {
display: contents;
}
.wp-block-jcore-nav-header {
position: sticky;
top: var(--wp-admin--admin-bar--height, 0);
z-index: 10;
background-color: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
/*
* The scrolled treatment sits on a pseudo-element rather than on the
* header itself.
*
* An element with a backdrop-filter becomes the backdrop root for
* everything inside it, and the dropdown panel is inside the header - so
* blurring the header directly leaves the panel sampling the header's own
* empty box rather than the page, and the panel's glass silently does
* nothing. A child can carry the same effect without being in the panel's
* ancestry, which lets both blur against the page independently.
*
* `z-index: -1` keeps it behind the bar's own contents but still inside
* the header's stacking context, so it never reaches the page below.
*/
}
.wp-block-jcore-nav-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-color: transparent;
transition: background-color 250ms ease, backdrop-filter 250ms ease;
}
.wp-block-jcore-nav-header.scrollActive:not(.scrollTop)::before {
background-color: color-mix(in srgb, var(--wp--preset--color--dark) 72%, transparent);
backdrop-filter: blur(16px);
}
.wp-block-jcore-nav-header {
/* jcore-utils sets this for the first 100ms, before the scroll classes
settle - without it the panel fades in on every page load. */
}
.wp-block-jcore-nav-header.jcoreLoading::before {
transition: none;
}
/* Mobile navigation styles. */
@media (width < 992px) {
#jcore-nav {
/*
* The drawer fills the whole viewport below the bar. It is fixed
* rather than hung off the header, because the header's distance from
* the top of the viewport changes while the top bar scrolls away -
* mobileDrawerInit() measures where the bar ends as the drawer opens
* and hands that over as --nav-drawer-top. The page behind is locked
* in place meanwhile (`html.nav-open` below), so a long menu scrolls
* inside the drawer and nowhere else.
*
* The links sit in a column that grows to fill the drawer, with the
* right hand menu pushed to its foot, so the CTA lands under the
* thumb.
*/
}
#jcore-nav .nav-panel {
display: flex;
flex-direction: column;
position: fixed;
inset: var(--nav-drawer-top, var(--jutils-height)) 0 0;
box-sizing: border-box;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.5rem 1.5rem max(1.5rem, env(safe-area-inset-bottom));
background-color: var(--wp--preset--color--dark);
/*
* Faded rather than slid in: the bar stays where it is, and
* `visibility` keeps the closed drawer's links out of the tab
* order, on the same delayed switch as the accordion below.
*/
opacity: 0;
visibility: hidden;
transition: opacity var(--megamenu-duration) var(--megamenu-ease), visibility 0s linear var(--megamenu-duration);
}
#jcore-nav .nav-panel > * {
flex-shrink: 0;
translate: 0 -0.5rem;
transition: translate var(--megamenu-duration) var(--megamenu-ease);
}
#jcore-nav .nav-panel:has(#jcore-menu.mobile-open) {
opacity: 1;
visibility: visible;
transition: opacity var(--megamenu-duration) var(--megamenu-ease), visibility 0s linear 0s;
}
#jcore-nav .nav-panel:has(#jcore-menu.mobile-open) > * {
translate: none;
}
#jcore-nav {
/* A flat list: one row per link, hairlines between rows. */
}
#jcore-nav #jcore-menu > .menu-item,
#jcore-nav .menu-right .menu-0 > .menu-item:not(.btn-primary) {
margin-bottom: 0;
border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 7%, transparent);
}
#jcore-nav .menu-link-0 {
display: block;
padding: 1rem 0.125rem;
color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
font-size: 1.125rem;
}
#jcore-nav .has-megamenu > .menu-link-0 {
flex: 1;
}
#jcore-nav #jcore-menu {
margin-right: 0;
}
#jcore-nav #jcore-menu,
#jcore-nav .menu-right .menu-0 {
height: auto;
flex-direction: column;
align-items: flex-start;
}
#jcore-nav .menu-right {
display: flex;
flex-direction: column;
align-items: stretch;
margin-top: auto;
padding-top: 1.5rem;
}
#jcore-nav .menu-right .menu-item {
width: 100%;
}
#jcore-nav .menu-right {
/*
* In the drawer the CTA spans the column instead of hugging its
* label, so it reads as the panel's one action. The right padding
* stands in for the gutter `.nav-panel` only has on its left.
*/
}
#jcore-nav .menu-right .menu-item.btn-primary {
margin-top: 0.875rem;
margin-bottom: 0;
}
#jcore-nav .menu-right .menu-item.btn-primary > .menu-link {
justify-content: center;
width: 100%;
box-sizing: border-box;
}
#jcore-nav {
/*
* There is no pointer to hover with and no room for a floating card,
* so the panel becomes an accordion: same markup, none of the chrome.
* The 0fr/1fr grid row is what makes the height animatable without
* having to measure the content.
*/
}
#jcore-nav .has-megamenu {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
#jcore-nav .megamenu {
display: grid;
grid-template-rows: 0fr;
width: 100%;
overflow: hidden;
/*
* A collapsed row still leaves its links in the tab order, so the
* panel is taken out of it as well. `visibility` is not
* interpolated, so it is held back until the row has finished
* shrinking and applied at once when it starts growing.
*/
visibility: hidden;
transition: grid-template-rows var(--megamenu-duration) var(--megamenu-ease), visibility 0s linear var(--megamenu-duration);
}
#jcore-nav .megamenu.open {
grid-template-rows: 1fr;
visibility: visible;
transition: grid-template-rows var(--megamenu-duration) var(--megamenu-ease), visibility 0s linear 0s;
}
#jcore-nav .megamenu__inner {
flex-direction: column;
min-height: 0;
overflow: hidden;
padding-left: 0.5rem;
}
#jcore-nav .megamenu__section {
padding: 0.5rem 0;
}
#jcore-nav .megamenu__heading {
height: auto;
padding-block: 0.5rem;
font-size: 1rem;
}
#jcore-nav .megamenu__link {
padding: 0.75rem;
font-size: 1rem;
}
#jcore-nav .menu-link__chevron {
display: none;
}
/* Stop header from hiding with open menu. */
.scrollActive.navigation-header:has(.mobile-open) {
margin-top: 0;
}
/* The bar goes solid with the drawer under it, so the two read as one. */
.wp-block-jcore-nav-header:has(#jcore-menu.mobile-open)::before {
background-color: var(--wp--preset--color--dark);
transition: none;
}
/*
* Set by mobileDrawerInit() while the drawer is open. On the root only:
* the root's overflow is handed to the viewport, but a hidden overflow on
* the body as well would make the body a scroll container of its own, and
* the sticky header would stick to that - dropping back to the top of the
* page, out of sight, whenever the drawer is opened further down.
*/
html.nav-open {
overflow: hidden;
}
/*
* The jQuest launchers float over everything at the maximum z-index, and
* over the drawer they would cover its links and the CTA at its foot.
*/
html.nav-open .jquest-launcher {
visibility: hidden;
}
}
@media (prefers-reduced-motion: reduce) {
#jcore-nav {
--megamenu-duration: 1ms;
--megamenu-duration-fast: 1ms;
}
}
/* jscroll is active on the element. */
.scrollActive {
transition: margin-top 300ms;
}
.scrollActive.scrollTop, .scrollActive.scrollUp {
margin-top: 0;
}
.scrollActive.sticky.scrollDown {
margin-top: calc(var(--jutils-height) * -1);
}
.sticky {
position: fixed;
top: var(--wp-admin--admin-bar--height, 0);
left: 0;
right: 0;
z-index: 10;
}
/* WP Fix */
body.admin-bar {
/* Fix for WP admin-bar */
}
body.admin-bar .navbar.scrollActive,
body.admin-bar .navbar.sticky,
body.admin-bar .skip-to-content a {
top: 46px;
}
@media screen and (min-width: 781px) {
body.admin-bar .navbar.scrollActive,
body.admin-bar .navbar.sticky,
body.admin-bar .skip-to-content a {
top: 32px;
}
}
.top-bar {
background: linear-gradient(100deg, rgb(34, 211, 238) 0%, rgb(59, 130, 246) 100%);
}
.top-bar p,
.top-bar a {
padding: 13px 0;
color: var(--wp--preset--color--white);
font-weight: 700;
}
.top-bar p:hover,
.top-bar a:hover {
color: var(--wp--preset--color--white);
}
/*
* Decorative backdrop for the lohko/hero-front and lohko/hero-showcase blocks,
* and for a group with the theme's "Hero" style (a split hero built from core
* blocks): two soft blue glows and a masked dot grid at the top of the page,
* plus a second, cooler glow behind the closing sections - the design's
* `#global-ambient-glow` shining through the sections it leaves transparent.
*
* It lives on the page rather than inside the block because it has to sit
* behind the top bar and the navigation header too, which are siblings of
* . The `:has()` guard keeps it to pages that actually open with a hero,
* so other pages are free to bring their own accent.
*
* The design blurs two positioned circles. Soft-stopped radial gradients land
* in the same place without a full-viewport `filter: blur()` to repaint - the
* near-flat first two stops stand in for the blurred disc's solid core, and
* the radii are the design's (circle radius + blur radius) over its 1440x960
* frame. Note these are radii, not diameters. The alphas run a little above
* the design's, because the glows spend part of their cycle dimmed by the
* breathe animation below.
*
* A gradient is clipped at its layer's edge, so a layer that ends anywhere on
* screen shows a hard seam there. Both glow layers therefore overhang the
* viewport by 20% on every side they can, and the drift below stays well
* inside that overhang - every edge, the layer's own and the gradients', is
* off screen at all times. That overhang is what `overflow-x: clip` further
* down absorbs. Percentages are consequently stated against a box 1.4x the
* viewport: a design coordinate p maps to `(p + 20) / 1.4`, and a radius r to
* `r / 1.4`, which is why the top glows read 28.5%/50% and 18.5%/71.5% here.
*/
/*
* Drift: a slow diagonal wander with a good deal of swell. `alternate` eases
* back along the same path instead of snapping at the loop point.
*/
@keyframes sq-glow-drift {
from {
transform: translate3d(-6%, -2%, 0) scale(1);
}
to {
transform: translate3d(6%, 2%, 0) scale(1.18);
}
}
/* The lower glow runs the opposite way, so the two never track each other. */
@keyframes sq-glow-drift-alt {
from {
transform: translate3d(5.5%, 2%, 0) scale(1.15);
}
to {
transform: translate3d(-6%, -2%, 0) scale(1);
}
}
/*
* Breathe: the "glows a little differently" part. Its period is deliberately
* out of step with the drift, so a swell rarely lands on the same spot twice.
*/
@keyframes sq-glow-breathe {
from {
opacity: 0.42;
}
to {
opacity: 1;
}
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) {
/*
* The glow layers overhang the viewport, so the page must not scroll
* sideways to reach them. With `html` at the default `visible`, this
* propagates to the viewport and body itself stays unclipped - `clip`
* rather than `hidden` so no scroll container appears and the sticky
* header keeps resolving against the viewport.
*/
overflow-x: clip;
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks {
position: relative;
/* Absolute, so the pseudo-elements stay out of the flex column. */
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks::before, body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks {
/* Glows: one centred behind the headline, one offset to the right. */
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks::before {
--hero-glow-1: var(--wp--preset--color--blue);
--hero-glow-2: var(--wp--preset--color--lightblue);
inset-block-start: -20dvh;
inset-inline: -20%;
height: 140dvh;
background-image: radial-gradient(ellipse 28.5% 32% at 50% 23.5%, color-mix(in srgb, var(--hero-glow-1) 34%, transparent) 0%, color-mix(in srgb, var(--hero-glow-1) 31%, transparent) 40%, color-mix(in srgb, var(--hero-glow-1) 10%, transparent) 72%, transparent 100%), radial-gradient(ellipse 18.5% 23.5% at 71.5% 33%, color-mix(in srgb, var(--hero-glow-2) 26%, transparent) 0%, color-mix(in srgb, var(--hero-glow-2) 23%, transparent) 38%, color-mix(in srgb, var(--hero-glow-2) 7%, transparent) 74%, transparent 100%);
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks {
/* Dot grid, faded out towards the edges. It repeats, so it has no edge
* to give away and can stay pinned to the viewport. */
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks::after {
inset-block-start: 0;
inset-inline: 0;
height: 100dvh;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
background-size: 30px 30px;
opacity: 0.6;
mask-image: radial-gradient(ellipse 900px 600px at 50% 20%, #000 0%, transparent 75%);
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) {
/*
* Closing glow, anchored to the bottom of so it lands behind the
* last sections rather than the footer. `main` already carries `z-index: 1`
* as a flex item, so it is its own stacking context: the layer sits behind
* everything in but still above the page background, and any section
* that brings its own background (the blackblue ones) covers it, exactly as
* the opaque sections do in the design.
*
* These are the design's ambient colours - royalblue and cyan - rather than
* the hero's, which is what the transparent sections reveal there. Both
* gradients fade out well inside the layer vertically, with room left for
* the swell, since the layer's bottom edge sits at the footer seam where an
* overhang would show.
*/
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) main {
position: relative;
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) main::before {
--lower-glow-1: var(--wp--preset--color--royalblue);
--lower-glow-2: var(--wp--preset--color--cyan);
content: "";
position: absolute;
inset-block-end: 0;
inset-inline: -20%;
height: 110dvh;
max-height: 100%;
z-index: -1;
pointer-events: none;
background-image: radial-gradient(ellipse 27.5% 30% at 40% 60%, color-mix(in srgb, var(--lower-glow-1) 28%, transparent) 0%, color-mix(in srgb, var(--lower-glow-1) 24%, transparent) 40%, color-mix(in srgb, var(--lower-glow-1) 9%, transparent) 72%, transparent 100%), radial-gradient(ellipse 19% 18% at 67% 72%, color-mix(in srgb, var(--lower-glow-2) 20%, transparent) 0%, color-mix(in srgb, var(--lower-glow-2) 17%, transparent) 38%, color-mix(in srgb, var(--lower-glow-2) 6%, transparent) 74%, transparent 100%);
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) {
/*
* Motion is opt-in: only transform and opacity animate, so both layers stay
* on the compositor and nothing repaints per frame.
*/
}
@media (prefers-reduced-motion: no-preference) {
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks::before {
animation: sq-glow-drift 16s ease-in-out infinite alternate, sq-glow-breathe 9s ease-in-out infinite alternate;
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) main::before {
animation: sq-glow-drift-alt 20s ease-in-out infinite alternate, sq-glow-breathe 11s ease-in-out infinite alternate;
}
}
/*
* Scroll reveal: the page's sections fade and rise into place as they
* scroll into view, as in the design.
*
* Opt-in from src/js/jcore.ts, which only marks sections it is going to
* watch - so without JavaScript, or with reduced motion asked for, nothing
* here ever hides anything.
*
* `translate` rather than `transform`, and `none` once shown: a transformed
* ancestor becomes the containing block for everything inside it, which
* would stop a sticky bar inside a section from sticking.
*/
.sq-reveal {
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), translate 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sq-reveal:not(.is-visible) {
opacity: 0;
translate: 0 28px;
}
.sq-reveal.is-visible {
translate: none;
}
.archive-posts,
.wp-block-jcore-dynamic-archive-posts__inner {
display: grid;
gap: 2rem;
grid-template-columns: 1fr;
}
@media (min-width: 360px) {
.archive-posts.columns-2,
.wp-block-jcore-dynamic-archive-posts__inner.columns-2 {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 768px) {
.archive-posts.columns-3,
.wp-block-jcore-dynamic-archive-posts__inner.columns-3 {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 992px) {
.archive-posts.columns-3,
.wp-block-jcore-dynamic-archive-posts__inner.columns-3 {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (min-width: 360px) {
.archive-posts.columns-4,
.wp-block-jcore-dynamic-archive-posts__inner.columns-4 {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 992px) {
.archive-posts.columns-4,
.wp-block-jcore-dynamic-archive-posts__inner.columns-4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
/* JCORE DYNAMIC ARCHIVE */
.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters {
margin-bottom: 3rem;
}
.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type h3 {
font-weight: 400;
text-transform: uppercase;
}
.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type select {
background-color: var(--wp--preset--color--light);
border-radius: none;
border: 1px solid black;
shadow: none;
padding: 1rem;
max-width: 360px;
min-width: 280px;
text-transform: uppercase;
}
.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type label.wp-block-jcore-dynamic-archive-filters__radio {
width: max-content;
padding: 4px 16px;
text-transform: uppercase;
font-size: 16px;
font-weight: 600;
display: inline-block;
margin-bottom: 1rem;
}
.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type input.wp-block-jcore-dynamic-archive-filters__radio__input {
visibility: hidden;
}
.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type.taxonomy-type-category__children {
margin-top: 1.5rem;
}
/* JCORE Dynamic Archive Pagination */
.wp-block-jcore-dynamic-archive-posts__pagination nav {
display: flex;
flex-flow: row;
justify-content: center;
align-items: baseline;
gap: 0.25rem;
margin: 4rem 0.25rem 3rem;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav a {
font-size: 1rem;
margin: 0rem;
color: var(--wp--preset--color--dark);
background: var(--wp--preset--color--light);
font-weight: 400;
padding: 0.75rem 1.25rem;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav a.current {
background: var(--wp--preset--color--success);
}
.wp-block-jcore-dynamic-archive-posts__pagination nav a:hover {
text-decoration: none;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav {
/*Pagination first */
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-first {
background: var(--wp--preset--color--brand);
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-first .wp-block-jcore-dynamic-archive__pagination__link__icon::after {
content: "\f323";
font-family: "Font Awesome 6 Sharp";
font-weight: 400;
display: inline-block;
font-size: 12px;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-first .wp-block-jcore-dynamic-archive__pagination__link__text {
display: none;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav {
/*Pagination previous */
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-previous {
background: var(--wp--preset--color--brand);
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-previous .wp-block-jcore-dynamic-archive__pagination__link__icon::after {
content: "\f053";
font-family: "Font Awesome 6 Sharp";
font-weight: 400;
display: inline-block;
font-size: 12px;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-previous .wp-block-jcore-dynamic-archive__pagination__link__text {
display: none;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav {
/*Pagination next */
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-next {
background: var(--wp--preset--color--brand);
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-next .wp-block-jcore-dynamic-archive__pagination__link__icon::after {
content: "\f054";
font-family: "Font Awesome 6 Sharp";
font-weight: 400;
display: inline-block;
font-size: 12px;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-next .wp-block-jcore-dynamic-archive__pagination__link__text {
display: none;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav {
/*Pagination last */
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-last {
background: var(--wp--preset--color--brand);
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-last .wp-block-jcore-dynamic-archive__pagination__link__icon::after {
content: "\f324";
font-family: "Font Awesome 6 Sharp";
font-weight: 400;
display: inline-block;
font-size: 12px;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-last .wp-block-jcore-dynamic-archive__pagination__link__text {
display: none;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav {
/* Current link item */
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link.is-current {
background: var(--wp--preset--color--brand);
}
/* JCORE Dynamic Archive load more button */
.wp-block-jcore-dynamic-archive-posts__pagination {
display: flex;
justify-content: center;
}
.wp-block-jcore-dynamic-archive-posts__pagination a.wp-block-jcore-dynamic-archive-posts__load_more {
background-color: var(--wp--preset--color--brand);
color: var(--wp--preset--color--white);
width: max-content;
padding: 0.45rem 2rem;
margin-top: 3rem;
font-size: var(--wp--preset--font-size--mini);
line-height: var(--wp--custom--line-height--sm);
}
.wp-block-jcore-latest-posts__inner {
grid-template-columns: repeat(1, 1fr);
display: grid;
gap: 20px;
}
@media (min-width: 360px) {
.wp-block-jcore-latest-posts__inner.columns-2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.wp-block-jcore-latest-posts__inner.columns-3 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 360px) {
.wp-block-jcore-latest-posts__inner.columns-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.wp-block-jcore-latest-posts__inner.columns-4 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 768px) {
.wp-block-jcore-latest-posts__inner.columns-5 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.wp-block-jcore-latest-posts__inner.columns-5 {
grid-template-columns: repeat(5, 1fr);
}
}
.posts-highlight {
display: grid;
grid-gap: 2rem;
grid-template-columns: 1fr;
}
.posts-highlight.columns-2 {
grid-template-columns: 1fr 1fr;
}
.posts-highlight.columns-3 {
grid-template-columns: 1fr 1fr 1fr;
}
.posts-highlight.columns-4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.single-post .wp-block-post-author-name + .wp-block-post-date::before {
content: "|";
margin-right: 0.5em;
color: var(--wp--preset--color--greyblue);
}
.single-post p {
line-height: 1.6;
}
/*
* A post tease as an article card, the same tile as the lohko/knowledge-card
* block: a byline with a round portrait, then the title, a summary and a
* read-more link pinned to the bottom so cards side by side line up.
*/
.tease {
--tease-accent: var(--wp--preset--color--royalblue);
--tease-muted: var(--wp--preset--color--greyblue);
--tease-faint: var(--wp--preset--color--slateblue);
--tease-avatar-size: 46px;
position: relative;
display: flex;
height: 100%;
box-sizing: border-box;
flex-direction: column;
gap: 14px;
padding: 26px;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 9%, transparent);
border-radius: 16px;
background: color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent);
color: var(--wp--preset--color--white);
text-align: left;
transition: border-color 0.12s ease, transform 0.12s ease;
}
.tease:hover, .tease:focus-within {
border-color: color-mix(in srgb, var(--wp--preset--color--white) 22%, transparent);
transform: translateY(-2px);
}
.tease .tease-byline {
display: flex;
align-items: center;
gap: 10px;
}
.tease .tease-avatar {
width: var(--tease-avatar-size);
height: var(--tease-avatar-size);
flex: none;
border-radius: 50%;
object-fit: cover;
}
.tease .tease-identity {
display: flex;
min-width: 0;
flex-direction: column;
gap: 2px;
}
.tease .post-author {
font-size: 0.78125rem;
font-weight: 700;
line-height: 1.3;
}
.tease .tease-meta {
color: var(--tease-faint);
font-size: 0.6875rem;
line-height: 1.3;
}
.tease .post-term {
color: var(--tease-accent);
font-weight: 600;
}
.tease .post-date + .post-term::before {
margin: 0 0.35em;
color: var(--tease-faint);
content: "·";
font-weight: 400;
}
.tease .tease-content {
display: flex;
flex: 1;
flex-direction: column;
gap: 14px;
}
.tease .post-title {
margin: 0;
font-size: var(--wp--preset--font-size--heading-4, 1.1875rem);
font-weight: 700;
line-height: 1.35;
}
.tease .preview {
display: -webkit-box;
overflow: hidden;
margin: 0;
-webkit-box-orient: vertical;
color: var(--tease-muted);
font-size: 0.8125rem;
-webkit-line-clamp: 4;
line-clamp: 4;
line-height: 1.6;
}
.tease .tease-link {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: auto;
padding-top: 6px;
color: var(--tease-accent);
font-size: 0.84375rem;
font-weight: 700;
gap: 6px;
text-decoration: none;
}
.tease .tease-link-icon {
transition: transform 0.12s ease;
}
.tease:hover .tease-link-icon {
transform: translateX(3px);
}
.tease .tease-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
@media (prefers-reduced-motion: reduce) {
.tease,
.tease .tease-link-icon {
transition: none;
}
.tease:hover,
.tease:focus-within,
.tease:hover .tease-link-icon {
transform: none;
}
}
.tease .image-container {
position: relative;
width: 100%;
margin-bottom: 1rem;
}
.tease .image-container::after {
content: "";
display: block;
padding-bottom: 100%;
}
.tease .image-container img {
position: absolute;
-o-object-fit: cover;
object-fit: cover;
height: 100%;
width: 100%;
font-family: "object-fit: cover;";
}
.tease .image-container.postcard::after {
padding-bottom: 66%;
}
.block-post_grid .posts-highlight {
display: grid;
grid-gap: 2rem;
grid-template-columns: 1fr;
}
@media (min-width: 360px) {
.block-post_grid.columns-2 .posts-highlight {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 768px) {
.block-post_grid.columns-3 .posts-highlight {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (min-width: 360px) {
.block-post_grid.columns-4 .posts-highlight {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 992px) {
.block-post_grid.columns-4 .posts-highlight {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
.masonry-grid {
display: grid;
grid-row-gap: 2rem !important;
grid-template-columns: 1fr;
grid-auto-rows: 20px;
}
.masonry-grid > * {
width: auto !important;
grid-row-end: span 20; /* Somewhat sane default. */
}
@media (min-width: 768px) {
.masonry-grid {
grid-row-gap: 3rem !important;
}
.masonry-grid.columns-2, .masonry-grid.columns-3, .masonry-grid.columns-4 {
grid-template-columns: 1fr 1fr;
}
.masonry-grid .tease-nr-2 .image-container {
margin-top: 6rem;
margin-bottom: 2rem;
}
}
@media (min-width: 992px) {
.masonry-grid.columns-3 {
grid-template-columns: 1fr 1fr 1fr;
}
.masonry-grid.columns-4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
.error404 h1 {
font-size: var(--wp--preset--font-size--heading-1);
margin-top: 3rem;
}
.error404 .home-link {
max-width: var(--wp--style--global--content-size);
margin-top: 2rem;
text-transform: uppercase;
padding-bottom: 2rem;
margin-bottom: 5rem;
}
.block-social_share {
background: var(--wp--preset--color--white);
border-radius: 10px;
padding: 1.5rem;
}
@media (min-width: 768px) {
.block-social_share {
display: grid;
grid-template-columns: auto 180px;
grid-gap: 0.5rem;
justify-content: end;
justify-items: end;
align-items: center;
}
}
.block-social_share p.share-heading {
font-family: var(--jcore-heading-font-family);
text-transform: uppercase;
}
@media (min-width: 768px) {
.block-social_share p.share-heading {
margin-bottom: 0;
}
}
.block-social_share .social-media-share a {
text-decoration: none;
}
.block-social_share .social-media-share a i {
margin-right: 0.5rem;
}
/*
* Yoast FAQ block as an accordion, styled like lohko's jcore/accordions:
* hairlines between the rows, the question in bold with a cyan chevron at
* the far end, and the answer sliding open and fading in under it. There is
* no badge in front of the question.
*
* js/yoast-faq.ts builds the markup: the question becomes a button in an
* h3, and the answer is wrapped in a content region, a clip and a body. The
* slide is the grid-row trick from lohko's accordion-item/style.scss: the
* content is a one-row grid whose row goes from 0fr to 1fr, the clip hides
* what does not fit yet (and turns invisible once closed, so its links drop
* out of the tab order), and the body carries the padding.
*/
.schema-faq {
border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
}
.schema-faq-section {
border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
}
.schema-faq-section .schema-faq-header {
margin: 0;
font-size: inherit;
line-height: inherit;
}
.schema-faq-section .schema-faq-question {
display: flex;
width: 100%;
box-sizing: border-box;
align-items: center;
gap: 1rem;
margin: 0;
padding: 1.25rem 1.25rem 1.25rem 0;
border: 0;
background: none;
color: var(--wp--preset--color--white);
font-family: var(--jcore-heading-font-family, inherit);
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
text-align: left;
cursor: pointer;
}
.schema-faq-section .schema-faq-question:focus-visible {
outline: 2px solid var(--wp--preset--color--cyan);
outline-offset: 2px;
}
.schema-faq-section .schema-faq-toggle {
display: flex;
flex: none;
align-items: center;
justify-content: center;
margin-left: auto;
color: var(--wp--preset--color--cyan);
}
.schema-faq-section .schema-faq-toggle-icon::before {
display: block;
font-family: "Font Awesome 6 Sharp";
font-size: 0.875rem;
font-weight: 900;
content: "\f078";
transition: transform 0.2s ease;
}
.schema-faq-section .schema-faq-content {
display: grid;
grid-template-rows: 0fr;
color: var(--wp--preset--color--greyblue);
transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.schema-faq-section .schema-faq-clip {
min-height: 0;
overflow: hidden;
visibility: hidden;
/* Visibility waits for the slide to finish before hiding. */
transition: visibility 0s linear 0.3s;
}
.schema-faq-section .schema-faq-body {
padding: 0.25rem 0 1.75rem;
}
.schema-faq-section .schema-faq-body > * {
opacity: 0;
transition: opacity 0.3s ease;
}
.schema-faq-section .schema-faq-answer {
margin: 0;
}
.schema-faq-section.active .schema-faq-toggle-icon::before {
transform: rotate(180deg);
}
.schema-faq-section.active .schema-faq-content {
grid-template-rows: 1fr;
}
.schema-faq-section.active .schema-faq-clip {
visibility: visible;
transition: visibility 0s;
}
.schema-faq-section.active .schema-faq-body > * {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.schema-faq-section .schema-faq-toggle-icon::before,
.schema-faq-section .schema-faq-content,
.schema-faq-section .schema-faq-clip, .schema-faq-section.active .schema-faq-clip,
.schema-faq-section .schema-faq-body > * {
transition: none;
}
}
/**
* Gravity Forms minimalistics if using default base theme in GF settings.
* The theme framework uses root settings, if nothing else defined.
* Add more gernral settings to root by inspecting the element styling you want to change.
* The button styling is set from Ilme root button styles found in blocks/buttons.css
*/
/**
* Gravity Forms minimalistics if using default base theme in GF settings.
* The theme framework uses root settings, if nothing else defined.
* Add more gernral settings to root by inspecting the element styling you want to change.
* The button styling is set from Ilme root button styles found in blocks/buttons.css.
* For style changes to take effect: MAKE BUILD!!!
*/
:root .gform-theme--framework {
--gf-color-primary: var(--wp--preset--color--brand);
--gf-color-primary-darker: var(--wp--preset--color--orange);
--gf-ctrl-bg-color: var(--wp--preset--color--white);
--gf-color-out-ctrl-light-darker: var(--wp--preset--color--lightgrey);
--gf-ctrl-border-color: var(--wp--preset--color--lightgrey);
--gf-ctrl-border-color-hover: var(--wp--preset--color--lightgrey);
--gf-ctrl-radius: 12px;
--gf-ctrl-textarea-radius: 12px;
--gf-ctrl-border-width: 1px;
--gf-ctrl-border-style: solid;
--gf-ctrl-color: var(--wp--preset--color--black);
--gf-ctrl-outline-color: var(--wp--preset--color--lightblue);
--gf-ctrl-outline-color-focus: var(--wp--preset--color--lightblue);
--gf-ctrl-border-color-focus: var(--wp--preset--color--brand);
--gf-ctrl-accent-color: var(--wp--preset--color--brand);
--gf-ctrl-btn-bg-color-ctrl: var(--jcore-button-bg-color);
--gf-ctrl-btn-color-primary: var(--jcore-button-text-color);
--gf-ctrl-btn-color-hover-primary: var(--jcore-button-hover-text-color);
--gf-ctrl-btn-color-hover-ctrl: var(--jcore-button-hover-text-color);
--gf-ctrl-btn-bg-color-primary: var(--jcore-button-bg-color);
--gf-ctrl-btn-bg-color-hover-primary: var(--jcore-button-hover-bg-color);
--gf-ctrl-btn-bg-color-hover-ctrl: var(--jcore-button-hover-bg-color);
--gf-ctrl-btn-radius: var(--jcore-button-radius);
--gf-ctrl-btn-font-weight: var(--jcore-button-font-weight);
--gf-ctrl-btn-text-transform: none;
--gf-ctrl-btn-font-size: var(--jcore-button-font-size);
--gf-ctrl-btn-font-style: normal;
--gf-ctrl-btn-font-family: var(--jcore-heading-font-family);
--gf-ctrl-btn-font-size-md: var(--wp--preset--font-size--paragraph);
--gf-ctrl-btn-padding-y: 1rem;
--gf-ctrl-btn-padding-x-md: 2rem;
--gf-ctrl-choice-check-color: var(--wp--preset--color--brand);
--gf-field-pg-prog-bar-bg-color-blue: var(--wp--preset--color--brand);
--gf-field-pg-prog-bar-bg-color-orange: var(--wp--preset--color--brand);
--gf-ctrl-label-font-size-primary: var(--wp--preset--font-size--paragraph);
--gf-ctrl-label-font-size-tertiary: var(--wp--preset--font-size--mini);
--gf-color-in-ctrl-primary: var(--wp--preset--color--brand);
--gf-color-in-ctrl-primary-darker: var(--wp--preset--color--brand);
--gf-ctrl-file-zone-icon-color: var(--wp--preset--color--brand);
--gf-form-footer-margin-y-start: 2.5rem;
--gf-field-prod-quant-width: 65px;
}
body .gform_wrapper .gform_fields {
gap: 1.5rem;
}
@media (min-width: 360px) {
body .gform_wrapper .gform-footer {
display: flex;
justify-content: flex-end;
}
}
body .gform-theme--framework.prodlist_wrapper .prod {
max-width: 500px;
}
body .gform-theme--framework .gfield--type-product .ginput_quantity {
margin-block-end: var(--gf-field-prod-quant-margin-y-end);
order: 3;
flex-basis: 10%;
}
body .gform-theme--framework .gfield--type-product .ginput_container_singleproduct {
display: flex;
flex-direction: row;
align-content: center;
}
body .gform-theme--framework .ginput_quantity_label.gform-field-label {
order: 4;
flex-basis: 10%;
font-size: 18px;
margin-left: 1rem;
align-self: center;
}
body .gform-theme--framework .gform-field-label.gform-field-label--type-sub-large.ginput_product_price_label {
display: none;
}
body .gform-theme--framework .gform-field-label.gform-field-label--type-sub-large.ginput_product_price {
font-size: 20px;
font-weight: 500;
color: var(--wp--preset--color--brand);
}
body .gform-theme--framework .ginput_product_price_wrapper {
flex-basis: 70%;
}
.search-items {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(2, 1fr);
}
.search-items article {
background-color: var(--wp--preset--color--light);
border-radius: 1rem;
padding: 1rem;
}
.pagination-block {
--jcore-button-bg-color: transparent; /* because a-tag is styles here as btn, and .btn is one level up */
--jcore-button-hover-bg-color: transparent;
padding: 2rem;
display: flex;
justify-content: space-evenly;
}
.pagination-block > section {
display: flex;
align-items: center;
}
.pagination-block div {
padding: 0;
}
.pagination-block div a {
color: var(--wp--preset--color--black);
background-color: var(--wp--preset--color--brand);
border-radius: 0.5rem;
padding: 0.75rem;
margin: 1rem;
}
.pagination-block div a:hover {
text-decoration: none;
background-color: var(--wp--preset--color--light);
}
.pagination-block div.current a {
background-color: var(--wp--preset--color--light);
color: var(--jcore-button-active-txt-color);
}
/*
* The site footer, rendered from parts/footer.html.
*
* Three rows split by hairlines - brand beside the newsletter signup, four
* link columns, then the bottom bar - over the same near-black the rest of
* the page sits on. The only thing separating it from the section above is
* its top border and a blue glow bleeding in from the lower left.
*
* The link columns and the legal row are `jco/simple-menu` blocks reading WP
* menu locations (footer_col_1..4 and footer_bottom, registered in
* functions.php), so their markup belongs to that block - everything here
* hangs off `.wp-block-jco-simple-menu` rather than off classes the template
* part controls. Same for the social icons, which are a core social-links
* block.
*/
.site-footer {
/* Design colours mapped onto the palette: the headings' #F5F7FA onto
white and the muted labels' #6B7686 onto slateblue. The links' #8D9AB2
sits between greyblue and slateblue - greyblue alone reads noticeably
brighter than the design - so it is mixed from the two. */
--site-footer-heading: var(--wp--preset--color--white);
--site-footer-muted: color-mix(in srgb, var(--wp--preset--color--greyblue) 55%, var(--wp--preset--color--slateblue));
--site-footer-faint: var(--wp--preset--color--slateblue);
--site-footer-rule: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
/* Widens with the viewport; see the breakpoints at the end. */
--site-footer-column-gap: 36px;
position: relative;
/* Contains the glow below, which overhangs on three sides. */
overflow: hidden;
border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 7%, transparent);
padding-top: var(--wp--custom--spacing-sizes--xlarge);
padding-bottom: var(--wp--custom--spacing-sizes--medium);
color: var(--site-footer-muted);
/*
* The design blurs a translucent circle at the bottom left. A radial
* gradient with soft stops lands in the same place without a
* `filter: blur()` layer for the browser to repaint - the same trade the
* hero backdrop makes. The gradient's radii are the design's circle radii
* plus its 120px blur, so the box is 800x620 rather than 560x380, and it
* is offset by that difference to keep the glow centred where it was.
*/
}
.site-footer::before {
content: "";
position: absolute;
z-index: 0;
bottom: -310px;
left: calc(8% - 120px);
width: 800px;
height: 620px;
background: radial-gradient(closest-side, color-mix(in srgb, var(--wp--preset--color--royalblue) 9%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--royalblue) 8%, transparent) 30%, transparent 100%);
pointer-events: none;
}
.site-footer {
/* Every row sits above the glow. */
}
.site-footer > * {
position: relative;
z-index: 1;
}
.site-footer {
/* theme.json gives every group a fluid margin and padding, and every
paragraph a bottom margin. The footer's rows set their own spacing
below, so clear the defaults once here rather than per block. */
}
.site-footer .wp-block-group {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
.site-footer p {
margin: 0;
}
.site-footer {
/* The design eases every colour change in the footer. */
}
.site-footer a,
.site-footer button {
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
.site-footer a,
.site-footer button {
transition: none;
}
}
.site-footer {
/*
* Brand + newsletter.
*/
}
.site-footer .site-footer__top {
gap: var(--wp--custom--spacing-sizes--large);
padding-bottom: var(--wp--custom--spacing-sizes--large);
border-bottom: 1px solid var(--site-footer-rule);
}
.site-footer .site-footer__brand {
gap: 14px;
}
.site-footer .site-footer__tagline {
font-size: var(--wp--preset--font-size--mini);
line-height: var(--wp--custom--line-height--lg);
}
.site-footer {
/* The CTA is the theme's default gradient button; it only needs the
margins theme.json adds for buttons in running text taken back off. */
}
.site-footer .wp-block-buttons {
margin: 0;
}
.site-footer {
/* A size down from the theme's page-level CTA: the footer's button is a
quiet repeat of the one in the header, not the page's main action. */
}
.site-footer .wp-block-button__link {
margin: 0;
padding: 12px 22px;
font-size: var(--wp--preset--font-size--mini);
}
.site-footer .site-footer__newsletter {
gap: 12px;
}
.site-footer .site-footer__heading {
margin: 0;
font-size: 15px;
font-weight: 700;
line-height: var(--wp--custom--line-height--md);
color: var(--site-footer-heading);
}
.site-footer .site-footer__signup {
display: flex;
gap: 10px;
}
.site-footer .site-footer__signup-field {
/* `min-width: 0` so the field can shrink below its default intrinsic
width instead of pushing the button out of the column. */
flex: 1 1 auto;
min-width: 0;
padding: 12px 16px;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent);
color: var(--site-footer-heading);
font-family: inherit;
font-size: var(--wp--preset--font-size--mini);
}
.site-footer .site-footer__signup-field::placeholder {
color: var(--site-footer-faint);
}
.site-footer .site-footer__signup-field:focus-visible {
outline: 2px solid var(--wp--preset--color--royalblue);
outline-offset: 2px;
}
.site-footer .site-footer__signup-submit {
padding: 12px 20px;
border: 0;
border-radius: 10px;
background: var(--wp--preset--gradient--royalblue-to-cyan);
color: var(--wp--preset--color--dark);
font-family: inherit;
font-size: var(--wp--preset--font-size--mini);
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.site-footer .site-footer__signup-submit:hover {
opacity: 0.92;
}
.site-footer .site-footer__fineprint {
font-size: 12px;
color: var(--site-footer-faint);
}
.site-footer {
/*
* Link columns.
*/
}
.site-footer .site-footer__columns {
/* The flex layout centres items by default, which drops shorter
columns below the longest one; top-align so the titles line up. */
align-items: flex-start;
gap: var(--site-footer-column-gap);
padding-top: var(--wp--custom--spacing-sizes--medium);
padding-bottom: var(--wp--custom--spacing-sizes--medium);
}
.site-footer .site-footer__column {
/* One under the other until there is room for two, then four. */
flex: 1 1 100%;
gap: 14px;
}
.site-footer .site-footer__column-title {
margin: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: var(--wp--custom--line-height--md);
text-transform: uppercase;
color: var(--site-footer-faint);
}
.site-footer {
/*
* Menus. The block ships the list reset and the row/column direction; the
* footer only sets spacing and the link colours, which have to out-specify
* theme.json's blue underlined default for `a`.
*/
}
.site-footer .wp-block-jco-simple-menu {
gap: 14px;
}
.site-footer .wp-block-jco-simple-menu li {
margin: 0;
}
.site-footer .wp-block-jco-simple-menu a {
font-size: var(--wp--preset--font-size--mini);
font-weight: 400;
text-decoration: none;
color: var(--site-footer-muted);
}
.site-footer .wp-block-jco-simple-menu a:hover {
text-decoration: none;
color: var(--site-footer-heading);
}
.site-footer {
/*
* Bottom bar: copyright, legal links, social icons.
*/
}
.site-footer .site-footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: var(--wp--custom--spacing-sizes--medium);
padding-top: 24px;
border-top: 1px solid var(--site-footer-rule);
}
.site-footer .site-footer__copyright p {
font-size: 13px;
color: var(--site-footer-faint);
}
.site-footer .site-footer__legal {
flex-wrap: wrap;
gap: 16px;
}
.site-footer .site-footer__legal a {
font-size: 13px;
}
.site-footer {
/*
* Social icons: outlined circles rather than the block's filled chips, so
* `is-style-logos-only` in the template part drops the background and this
* draws the ring back on.
*/
}
.site-footer .site-footer__social {
gap: 10px;
}
.site-footer .site-footer__social .wp-social-link {
width: 34px;
height: 34px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
border-radius: 50%;
color: var(--site-footer-muted);
}
.site-footer .site-footer__social .wp-social-link a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
padding: 0;
}
.site-footer .site-footer__social .wp-social-link svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.site-footer .site-footer__social .wp-social-link:hover {
border-color: color-mix(in srgb, var(--wp--preset--color--white) 30%, transparent);
background: color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
}
.site-footer {
/*
* The design's layout is the widest one: brand beside the newsletter, four
* link columns in a row, and the bottom bar's three groups spread across
* one line. Narrower viewports walk that back a step at a time - the rules
* above are the fully stacked end of it.
*/
}
@media (min-width: 768px) {
.site-footer .site-footer__brand {
max-width: 340px;
}
.site-footer .site-footer__newsletter {
max-width: 360px;
}
.site-footer .site-footer__column {
flex-basis: calc(50% - var(--site-footer-column-gap) / 2);
}
.site-footer .site-footer__bottom {
flex-direction: row;
align-items: center;
}
.site-footer .site-footer__legal {
gap: 28px;
}
}
@media (min-width: 992px) {
.site-footer {
--site-footer-column-gap: 60px;
}
.site-footer .site-footer__column {
/* Equal shares of the row, but never so narrow that a link like
"Web & technical teams" has to break mid-word. */
flex: 1 1 160px;
}
}
/* Buttons, all non-hover styling comes from theme.json (in theme.json they get overridden by Gberg own btn clases..*/
.wp-block-buttons .wp-block-button {
/* Primary CTA look: the default style and is-style-cta-arrow.
Gradient, radius and colors come from theme.json, motion lives here. */
}
.wp-block-buttons .wp-block-button:not(.is-style-outline,
.is-style-arrow,
.is-style-arrow-white,
.is-style-solid,
.is-style-monica) .wp-block-button__link {
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
/* Light that sweeps across the gradient on hover */
}
.wp-block-buttons .wp-block-button:not(.is-style-outline,
.is-style-arrow,
.is-style-arrow-white,
.is-style-solid,
.is-style-monica) .wp-block-button__link::before {
position: absolute;
z-index: -1;
inset: 0;
content: "";
background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
transform: translateX(-130%);
transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.wp-block-buttons .wp-block-button:not(.is-style-outline,
.is-style-arrow,
.is-style-arrow-white,
.is-style-solid,
.is-style-monica) .wp-block-button__link:focus-visible {
outline: 2px solid var(--wp--preset--color--cyan);
outline-offset: 3px;
}
.wp-block-buttons .wp-block-button:not(.is-style-outline,
.is-style-arrow,
.is-style-arrow-white,
.is-style-solid,
.is-style-monica):hover .wp-block-button__link {
color: var(--wp--preset--color--dark);
box-shadow: 0 18px 38px color-mix(in srgb, var(--wp--preset--color--cyan) 42%, transparent);
transform: translateY(-2px);
}
.wp-block-buttons .wp-block-button:not(.is-style-outline,
.is-style-arrow,
.is-style-arrow-white,
.is-style-solid,
.is-style-monica):hover .wp-block-button__link::before {
transform: translateX(130%);
}
.wp-block-buttons .wp-block-button:not(.is-style-outline,
.is-style-arrow,
.is-style-arrow-white,
.is-style-solid,
.is-style-monica) .wp-block-button__link:active {
box-shadow: 0 6px 16px color-mix(in srgb, var(--wp--preset--color--royalblue) 32%, transparent);
transform: translateY(0);
}
.wp-block-buttons .wp-block-button {
/* CTA with a trailing arrow that nudges right on hover */
}
.wp-block-buttons .wp-block-button.is-style-cta-arrow .wp-block-button__link::after {
display: inline-block;
margin-left: 0.5rem;
font-family: "Font Awesome 6 Sharp";
font-weight: 900;
content: "\f061";
transition: transform 0.2s ease;
}
.wp-block-buttons .wp-block-button.is-style-cta-arrow:hover .wp-block-button__link::after {
transform: translateX(0.25rem);
}
.wp-block-buttons .wp-block-button {
/* Solid blue, the previous default style */
}
.wp-block-buttons .wp-block-button.is-style-solid:hover .wp-block-button__link {
color: var(--wp--preset--color--blue);
background: var(--wp--preset--color--black);
border-color: var(--wp--preset--color--blue);
}
.wp-block-buttons .wp-block-button.is-style-outline:hover .wp-element-button {
color: var(--wp--preset--color--black);
background: var(--wp--preset--color--light);
border-color: var(--wp--preset--color--light);
}
.wp-block-buttons .wp-block-button {
/* Outline with Monica's portrait in front of the label, in an amber
ring. Padding (room for the portrait on the left), border and
radius come from the theme.json `monica` variation, which takes the
border off the default style's padding so the two sit side by side
at the same height. The portrait is positioned rather than laid
out, so the link stays an inline-block like the default style;
`overflow: hidden` matches that style's too, which moves an inline
block's baseline to its bottom edge - without it the two wrappers
differ in height and the row centres them a few pixels apart. */
}
.wp-block-buttons .wp-block-button.is-style-monica .wp-block-button__link {
position: relative;
overflow: hidden;
/* The variation only clears the colour; the default style's
gradient would still show through. */
background: transparent;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.wp-block-buttons .wp-block-button.is-style-monica .wp-block-button__link::before {
position: absolute;
top: 50%;
left: 0.75rem;
width: 1.875rem;
height: 1.875rem;
border-radius: 50%;
background: url("../../assets/images/monica-avatar.jpg") center/112% no-repeat;
box-shadow: 0 0 0 2px var(--wp--preset--color--amber);
content: "";
transform: translateY(-50%);
}
.wp-block-buttons .wp-block-button.is-style-monica .wp-block-button__link:focus-visible {
outline: 2px solid var(--wp--preset--color--cyan);
outline-offset: 3px;
}
.wp-block-buttons .wp-block-button.is-style-monica:hover .wp-block-button__link {
border-color: var(--wp--preset--color--lilyblue);
background: color-mix(in srgb, var(--wp--preset--color--white) 7%, transparent);
}
.wp-block-buttons .wp-block-button {
/* Bare text link with a trailing arrow - no background, no padding.
Colour, size and weight come from the theme.json `arrow` and
`arrow-white` variations; `arrow-white` is the same link in white,
for the rows where cyan would read as a second accent.
The arrow is a pseudo-element on the link, so it takes the link's
own colour - which the Colour > Text control sets, but the inline
text-colour format does not (that one only paints the letters). */
}
.wp-block-buttons .wp-block-button.is-style-arrow .wp-block-button__link, .wp-block-buttons .wp-block-button.is-style-arrow-white .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
text-align: left;
text-decoration: none;
transition: color 0.2s ease;
background: transparent;
}
.wp-block-buttons .wp-block-button.is-style-arrow .wp-block-button__link::after, .wp-block-buttons .wp-block-button.is-style-arrow-white .wp-block-button__link::after {
color: inherit;
font-family: "Font Awesome 6 Sharp";
font-weight: 900;
content: "\f061";
transition: transform 0.2s ease;
}
.wp-block-buttons .wp-block-button.is-style-arrow .wp-block-button__link:focus-visible, .wp-block-buttons .wp-block-button.is-style-arrow-white .wp-block-button__link:focus-visible {
outline: 2px solid var(--wp--preset--color--cyan);
outline-offset: 3px;
}
.wp-block-buttons .wp-block-button.is-style-arrow, .wp-block-buttons .wp-block-button.is-style-arrow-white {
/* The hover tint is skipped once a colour has been picked in the
sidebar, so the arrow and its label do not both jump back to
the theme's blue halfway through the interaction. */
}
.wp-block-buttons .wp-block-button.is-style-arrow:hover .wp-element-button, .wp-block-buttons .wp-block-button.is-style-arrow-white:hover .wp-element-button {
background: var(--wp--preset--color--transparent);
border-color: var(--wp--preset--color--transparent);
}
.wp-block-buttons .wp-block-button.is-style-arrow:hover .wp-element-button::after, .wp-block-buttons .wp-block-button.is-style-arrow-white:hover .wp-element-button::after {
transform: translateX(0.25rem);
}
.wp-block-buttons .wp-block-button.is-style-arrow:hover .wp-element-button:not(.has-text-color), .wp-block-buttons .wp-block-button.is-style-arrow-white:hover .wp-element-button:not(.has-text-color) {
color: var(--wp--preset--color--lightblue);
}
.wp-block-buttons .wp-block-button {
/* White stays white on hover - lightblue would read as the cyan
variation the style exists to avoid. */
}
.wp-block-buttons .wp-block-button.is-style-arrow-white:hover .wp-element-button:not(.has-text-color) {
color: var(--wp--preset--color--light);
}
@media (prefers-reduced-motion: reduce) {
.wp-block-buttons .wp-block-button .wp-block-button__link,
.wp-block-buttons .wp-block-button .wp-block-button__link::before,
.wp-block-buttons .wp-block-button .wp-block-button__link::after {
transition: none;
}
.wp-block-buttons .wp-block-button:hover .wp-block-button__link {
transform: none;
}
.wp-block-buttons .wp-block-button:hover .wp-block-button__link::before {
transform: translateX(-130%);
}
}
/**
* Set buttons colors and font variables for use elsewhere in theme where not G-berg,for example btn-class for form submit or tease-link or pagination?
*/
:root {
--jcore-button-bg-color: var(--wp--preset--color--blue);
--jcore-button-border-color: var(--wp--preset--color--blue);
--jcore-button-text-color: var(--wp--preset--color--black);
--jcore-button-active-bg-color: var(--wp--preset--color--blue);
--jcore-button-active-txt-color: var(--wp--preset--color--black);
--jcore-button-hover-bg-color: var(--wp--preset--color--black);
--jcore-button-hover-text-color: var(--wp--preset--color--blue);
--jcore-button-hover-border-color: var(--wp--preset--color--blue);
--jcore-button-font-size: var(--wp--preset--font-size--paragraph);
--jcore-button-padding: 1rem 1.75rem;
--jcore-button-radius: 6px;
}
.btn {
background-color: var(--jcore-button-bg-color);
color: var(--jcore-button-text-color);
border-color: var(--jcore-button-border-color);
padding: var(--jcore-button-padding);
font-size: var(--jcore-button-font-size);
border-radius: var(--jcore-button-radius);
}
.btn:hover {
background-color: var(--jcore-button-hover-bg-color);
color: var(--jcore-button-hover-text-color);
border-color: var(--jcore-button-hover-border-color);
}
/**
* Gradient pill CTA for markup that never passes through a `wp-block-button`
* - the nav's "Book a demo" menu item today, a form submit or a tease link
* tomorrow. Same gradient, text colour and shadow as the block button's
* default style in theme.json, only rounded all the way.
*
* The second selector is that nav menu item: the class lands on the ``,
* which is all the WP menu editor can set, but the pill has to be the ``
* inside it so the whole link is the tap target. It carries `#jcore-nav`
* because `#jcore-nav .menu-link` sets the link colour, and no number of
* classes outranks an id.
*/
:root {
--jcore-button-primary-bg: var(--wp--preset--gradient--royalblue-to-cyan);
--jcore-button-primary-text-color: var(--wp--preset--color--dark);
--jcore-button-primary-font-size: 0.9375rem;
--jcore-button-primary-padding: 0.9375rem 1.75rem;
--jcore-button-primary-radius: 999px;
--jcore-button-primary-shadow: 0 12px 28px
color-mix(in srgb, var(--wp--preset--color--royalblue) 32%, transparent);
--jcore-button-primary-shadow-hover: 0 14px 32px
color-mix(in srgb, var(--wp--preset--color--royalblue) 45%, transparent);
}
.btn-primary:not(.menu-item),
#jcore-nav .menu-right .menu-item.btn-primary > .menu-link {
display: inline-flex;
align-items: center;
align-self: center;
gap: 0.5rem;
/* The nav's own `.menu-link-0` is the full height of the bar, which on a
999px radius turns the button into a lozenge - the pill sizes itself
from its padding instead. */
height: auto;
padding: var(--jcore-button-primary-padding);
border: 0;
border-radius: var(--jcore-button-primary-radius);
background: var(--jcore-button-primary-bg);
box-shadow: var(--jcore-button-primary-shadow);
color: var(--jcore-button-primary-text-color);
font-size: var(--jcore-button-primary-font-size);
font-weight: 700;
line-height: 1.2;
text-decoration: none;
text-wrap: nowrap;
cursor: pointer;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.btn-primary:not(.menu-item):hover,
#jcore-nav .menu-right .menu-item.btn-primary > .menu-link:hover {
color: var(--jcore-button-primary-text-color);
box-shadow: var(--jcore-button-primary-shadow-hover);
transform: translateY(-2px);
}
.btn-primary:not(.menu-item):active,
#jcore-nav .menu-right .menu-item.btn-primary > .menu-link:active {
transform: translateY(0);
}
.btn-primary:not(.menu-item):focus-visible,
#jcore-nav .menu-right .menu-item.btn-primary > .menu-link:focus-visible {
outline: 2px solid var(--wp--preset--color--cyan);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.btn-primary,
#jcore-nav .menu-right .menu-item.btn-primary > .menu-link {
transition: none;
}
.btn-primary:hover,
#jcore-nav .menu-right .menu-item.btn-primary > .menu-link:hover {
transform: none;
}
}
/*
* "Snippet" code style: one short line of code - an embed tag, say - set
* in a small dark chip with a code mark in front, rather than as a full
* code listing. Wraps rather than scrolls, as a chip has no room for a
* scrollbar.
*/
.wp-block-code.is-style-snippet {
display: flex;
width: fit-content;
max-width: 100%;
box-sizing: border-box;
align-items: center;
gap: 0.625rem;
margin-block: 0;
padding: 0.625rem 0.875rem;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 11%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--wp--preset--color--dark) 70%, transparent);
color: var(--wp--preset--color--lightblue);
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 0.75rem;
line-height: 1.5;
}
.wp-block-code.is-style-snippet::before {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
background: var(--wp--preset--color--teal);
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18l6-6-6-6M8 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wp-block-code.is-style-snippet code {
font: inherit;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/*
* "Card" group style: the faint glass panel the marketing sections set their
* content on - an icon badge, a heading and a few paragraphs or a list.
*
* The children are stacked with one gap instead of their own margins, so the
* theme's heading and paragraph spacing does not open up a card built from
* plain core blocks. A card in a jcore/grid stretches to the row's height, so
* the panels in a row line up whatever their text does.
*/
.wp-block-group.is-style-card {
display: flex;
box-sizing: border-box;
height: 100%;
flex-direction: column;
gap: 0.875rem;
margin-block: 0;
padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.125rem, 2.5vw, 1.625rem);
border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
border-radius: 16px;
/* A background picked in the sidebar arrives as a `has-…-background-color`
class, which would lose to this rule - so only tint when none is set. */
}
.wp-block-group.is-style-card:not(.has-background) {
background: color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent);
}
.wp-block-group.is-style-card > * {
margin-block: 0;
}
.wp-block-group.is-style-card {
/* The icon badge sits at its own size, not stretched across the card. */
}
.wp-block-group.is-style-card > .wp-block-font-awesome-icon {
align-self: flex-start;
}
.wp-block-group.is-style-card.has-text-align-center > .wp-block-font-awesome-icon {
align-self: center;
}
.wp-block-group.is-style-card > .wp-block-heading:not(.has-text-color) {
color: var(--wp--preset--color--white);
}
.wp-block-group.is-style-card > h3 {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.3;
}
.wp-block-group.is-style-card > h4,
.wp-block-group.is-style-card > h5,
.wp-block-group.is-style-card > h6 {
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
.wp-block-group.is-style-card > p {
font-size: var(--wp--preset--font-size--mini);
line-height: 1.65;
}
.wp-block-group.is-style-card > p:not(.has-text-color) {
color: var(--wp--preset--color--greyblue);
}
.wp-block-group.is-style-card > .wp-block-list {
display: flex;
flex-direction: column;
gap: 0.5625rem;
color: var(--wp--preset--color--white);
font-size: var(--wp--preset--font-size--mini);
}
.wp-block-group.is-style-card > .wp-block-list li {
margin-bottom: 0;
}
.wp-block-group.is-style-card > .wp-block-table {
margin: 0;
}
/*
* "Stacked screenshots" group style: two image blocks overlapping on a
* fixed-height stage - the first at the top left, the second lifted over its
* lower right corner with a blue edge, so it reads as the detail. Below the
* "sm" breakpoint they simply stack.
*/
.wp-block-group.is-style-stacked-shots {
position: relative;
width: 100%;
max-width: 520px;
height: 430px;
margin-inline: auto;
}
.wp-block-group.is-style-stacked-shots > .wp-block-image {
position: absolute;
margin: 0;
}
.wp-block-group.is-style-stacked-shots > .wp-block-image img {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
border-radius: 14px;
box-shadow: 0 30px 60px color-mix(in srgb, var(--wp--preset--color--black) 45%, transparent);
object-fit: cover;
}
.wp-block-group.is-style-stacked-shots > .wp-block-image:first-child {
top: 0;
left: 0;
width: 73%;
height: 60%;
}
.wp-block-group.is-style-stacked-shots > .wp-block-image:nth-child(2) {
right: 0;
bottom: 0;
width: 62%;
height: 51%;
}
.wp-block-group.is-style-stacked-shots > .wp-block-image:nth-child(2) img {
border-color: var(--wp--preset--color--royalblue);
}
@media (max-width: 575px) {
.wp-block-group.is-style-stacked-shots {
display: flex;
height: auto;
flex-direction: column;
gap: 12px;
}
.wp-block-group.is-style-stacked-shots > .wp-block-image {
position: static;
width: auto !important;
height: auto !important;
}
}
/*
* "Screenshot with detail" group style: a wide screenshot at its natural
* size, with a second, smaller one lifted over its right edge - the detail
* that goes with it - on a soft blue glow. Below the "lg" breakpoint the
* detail is left out and the main shot stands alone.
*/
.wp-block-group.is-style-shot-detail {
position: relative;
isolation: isolate;
}
.wp-block-group.is-style-shot-detail::before {
position: absolute;
z-index: -1;
inset: -40px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--wp--preset--color--royalblue) 28%, transparent), color-mix(in srgb, var(--wp--preset--color--cyan) 8%, transparent) 45%, transparent 70%);
content: "";
filter: blur(30px);
pointer-events: none;
}
.wp-block-group.is-style-shot-detail > .wp-block-image {
margin: 0;
}
.wp-block-group.is-style-shot-detail > .wp-block-image img {
display: block;
width: 100%;
height: auto;
box-sizing: border-box;
border-radius: 16px;
box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--wp--preset--color--black) 85%, transparent), 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
}
.wp-block-group.is-style-shot-detail > .wp-block-image:nth-child(2) {
position: absolute;
z-index: 2;
top: 52%;
right: -24px;
width: 34%;
}
.wp-block-group.is-style-shot-detail > .wp-block-image:nth-child(2) img {
border-radius: 18px;
}
@media (max-width: 1023px) {
.wp-block-group.is-style-shot-detail > .wp-block-image:nth-child(2) {
display: none;
}
}
/*
* A hairline between full-width sections: where one full-width section
* follows another, the second is drawn with a faint line along its top, so
* sections on the same dark background still read as separate. A section
* given the "Joined" style carries on from the one above without it. Only
* sections count - a `div` group between two of them (holding a faded
* separator, say) breaks the pair, so neither side gets a line.
*/
:is(section.wp-block-group, section.wp-block-cover).alignfull + section.wp-block-group.alignfull:not(.is-style-joined) {
border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 7%, transparent);
}
/* "Chip" paragraph style: a short label in a pill, sized to its text. The
fill and the text share one colour - purple unless one is picked in the
sidebar - so the chip recolours from the paragraph's own colour control. */
p.is-style-chip {
display: inline-block;
align-self: flex-start;
margin-block: 0;
padding: 5px 10px;
border-radius: 999px;
background: color-mix(in srgb, currentColor 16%, transparent);
font-size: 0.6875rem;
font-weight: 700;
line-height: 1.4;
}
p.is-style-chip:not(.has-text-color) {
color: var(--wp--preset--color--purple);
}
/* "Badge" paragraph style: the eyebrow over a hero headline, in an outlined
pill behind a small royal-blue dot. The text colour control recolours the
label; the dot stays blue. */
p.is-style-badge {
display: inline-flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
align-self: flex-start;
gap: 9px;
padding: 8px 18px;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent);
font-size: 0.71875rem;
font-weight: 600;
letter-spacing: 0.12em;
line-height: 1.4;
text-transform: uppercase;
}
p.is-style-badge:not(.has-text-color) {
color: var(--wp--preset--color--greyblue);
}
p.is-style-badge::before {
width: 6px;
height: 6px;
flex-shrink: 0;
border-radius: 50%;
background: var(--wp--preset--color--royalblue);
content: "";
}
/**
*
*Search in nav that opens search-field
*AND
*styles the Gutenberg search-block like Ilme search field.
*
*/
.toggle-search .fa-search {
color: var(--wp--preset--color--white);
}
.searchbar-container {
display: none;
}
.searchbar-container.toggle {
display: block;
background-color: var(--wp--preset--color--dark);
}
.searchform, .wp-block-search {
margin-bottom: 6px;
margin-top: 6px;
}
.searchform input, .wp-block-search input {
appearance: none;
border: 1px solid var(--jcore-button-bg-color);
flex-grow: 1;
margin-left: 0;
margin-right: 0;
min-width: 3rem;
padding: 0.45rem 1rem;
text-decoration: unset !important;
font-size: var(--jcore-button-font-size);
margin-bottom: 8px;
margin-right: 6px;
}
.searchform .wp-block-search__button, .searchform .btn[type=submit], .wp-block-search .wp-block-search__button, .wp-block-search .btn[type=submit] {
padding: calc(0.45rem + 1px) calc(1rem + 1px);
font-size: var(--jcore-button-font-size);
margin-left: 0;
margin-bottom: 8px;
background-color: var(--jcore-button-bg-color);
color: var(--jcore-button-text-color);
}
.searchform .wp-block-search__inside-wrapper, .wp-block-search .wp-block-search__inside-wrapper {
margin-top: 6px;
display: flex;
}
/*
* Gutenberg block Details styling as accordion
*
*
*/
/* PDF and CAD special styles, then basics */
details.wp-block-details.pdf summary::marker {
content: "\f1c1 ";
font-family: "Font Awesome 6 Sharp";
font-weight: 300;
color: var(--wp--preset--color--brand);
}
details.wp-block-details.cad summary::marker {
content: "\e672 ";
font-family: "Font Awesome 6 Sharp";
font-weight: 300;
color: var(--wp--preset--color--brand);
}
/*
*
* General Details styles Background-color, color, border-radius and shadow can be set in theme.jason, but chose to put it all here instead.
*
*/
details.wp-block-details {
margin-bottom: 1rem;
border-radius: 0;
}
details.wp-block-details summary {
box-sizing: border-box;
padding: 1rem 2rem 1rem 1rem;
font-family: var(--jcore-heading-font-family);
font-size: var(--wp--preset--font-size--heading-5);
background-color: var(--wp--preset--color--dark);
font-weight: 400;
position: relative;
border-bottom: 1px solid var(--wp--preset--color--light);
}
details.wp-block-details summary + * {
margin-top: 1rem;
}
details.wp-block-details summary::marker {
content: none;
}
/* Add a custom transition when opening/closing. -It only "takes" on the padding- */
.wp-block-details {
transition: all 0.5s ease-in-out;
}
/* Add horizontal margin to nested blocks/elements. */
.wp-block-details > :where(:not(summary)) {
margin-left: 1rem;
margin-right: 1rem;
}
/* If open, add some bottom padding to avoid content butting against the bottom. */
.wp-block-details[open] {
padding-bottom: 1rem;
}
/* Change the background of the `summary` element based on state. */
.wp-block-details[open] summary,
.wp-block-details summary:hover,
.wp-block-details summary:focus {
background: var(--wp--preset--color--dark);
}
.wp-block-details summary::after {
content: "\f078 ";
position: absolute;
font-family: "Font Awesome 6 Sharp";
top: 50%;
right: 0;
width: 44px;
height: 44px;
background: var(--wp--preset--color--dark);
border-radius: 999px;
text-align: center;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--wp--preset--font-size--mini);
}
.wp-block-details[open] summary::after {
content: "\f077 ";
}
/* Wrapper to show videos embedded with Gutenberg responsively Works out of the box for YouTube videos. Add videowrapper class to work with any embedded iframe */
.wp-block-embed-youtube .wp-block-embed__wrapper,
.videowrapper .wp-block-embed__wrapper {
aspect-ratio: 16/9;
}
.wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.videowrapper .wp-block-embed__wrapper iframe {
width: 100%;
height: 100%;
}
/*FILE block*/
.wp-block-file {
position: relative;
}
.wp-block-file a:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.wp-block-file a.wp-block-file__button {
border-radius: 0;
background-color: var(--wp--preset--color--brand);
font-size: var(--wp--preset--font-size--mini);
text-transform: uppercase;
position: relative;
padding: 0.45rem 2rem 0.45rem 2.5rem;
color: var(--wp--preset--color--white);
margin-left: 0;
width: -moz-max-content;
width: max-content;
}
.wp-block-file a.wp-block-file__button:hover {
opacity: 1;
}
.wp-block-file a.wp-block-file__button:before {
content: "\f019";
font-family: "Font Awesome 6 Sharp";
font-weight: 600;
position: absolute;
left: 8px;
font-size: 16px;
color: var(--wp--preset--color--white);
top: 5px;
}
/* Media and images */
.wp-block-image.alignleft {
float: left;
}
.wp-block-image.alignright {
float: right;
}
.wp-block-image.aligncenter {
margin-left: auto;
margin-right: auto;
}
.wp-block-image {
border-radius: 0;
}
.wp-block-image img {
border-radius: 0;
}
.wp-block-image img.no-radius {
border-radius: 0;
}
.wp-block-cover:not(.no-radius) .wp-block-cover__image-background {
border-radius: 0;
}
/*Lightbox enabled, but no icon on the image on hover.*/
figure button.lightbox-trigger {
display: none;
}
/*
* A class for zooming images on hover *
*/
.img-hover-zoom {
overflow: hidden;
}
.img-hover-zoom img {
transition: transform 0.5s ease;
filter: brightness(90%);
}
.img-hover-zoom:hover img {
transform: scale(1.1);
filter: brightness(100%);
}
/*
* A class for zooming images on hover with brightness reversed compared to normal image-zoom *
*/
.img-hover-zoom-reverse {
overflow: hidden;
}
.img-hover-zoom-reverse img {
transition: transform 0.5s ease;
filter: brightness(100%);
}
.img-hover-zoom-reverse:hover img {
transform: scale(1.1);
filter: brightness(85%);
}
/* Gallery */
.blocks-gallery-grid figure.wp-block-image figcaption,
.wp-block-gallery figure.wp-block-image figcaption {
padding: 1em 0.7em 0.77em;
font-weight: 300;
font-size: 16px !important;
}
/*
* "Screenshot" image style: a product screenshot lifted off the dark page - a
* rounded frame, a hairline edge and a long soft shadow under it.
*/
.wp-block-image.is-style-screenshot img {
box-sizing: border-box;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
border-radius: 18px;
box-shadow: 0 40px 90px color-mix(in srgb, var(--wp--preset--color--black) 35%, transparent);
}
.wp-block-image.is-style-screenshot figcaption {
color: var(--wp--preset--color--slateblue);
font-size: 0.8125rem;
text-align: center;
}
/* Gutenberg media and text block */
.wp-block-media-text .wp-block-media-text__content {
/* remove the default 7% horizontal padding */
padding: 0;
}
/* Gutenberg pullquote and blockquote -nothing set int theme.json*/
blockquote.wp-block-quote {
margin-bottom: 2rem;
}
/* Pullquote */
.wp-block-pullquote {
margin-bottom: 2rem;
padding: 0;
}
.wp-block-pullquote blockquote {
border: none;
margin-left: 5rem;
}
.wp-block-pullquote blockquote p {
font-family: var(--jcore-heading-font-family);
font-size: var(--wp--preset--font-size--heading-3);
font-style: normal;
text-align: left;
font-weight: 300;
margin-bottom: 2rem;
line-height: 1.3;
}
.wp-block-pullquote blockquote p:first-of-type:before {
color: var(--wp--preset--color--brand);
content: url("../../assets/images/quote-icon.svg");
position: absolute;
left: -4.5rem;
top: 0.25rem;
}
.wp-block-pullquote blockquote p:last-of-type:after {
content: "";
}
.wp-block-pullquote blockquote cite {
font-family: var(--jcore-heading-font-family);
font-style: normal !important;
font-size: var(--wp--preset--font-size--mini);
color: var(--wp--preset--color--green);
text-align: left;
}
.wp-block-pullquote blockquote > * {
position: relative;
}
/* RSS Feed block */
ul.wp-block-rss {
list-style: none;
}
.wp-block-rss .wp-block-rss__item {
background-color: var(--wp--preset--color--light);
margin-bottom: 0;
min-height: 150px;
padding: 1rem;
}
.wp-block-rss .wp-block-rss__item a {
color: var(--wp--preset--color--brand);
font-size: var(--wp--preset--font-size--heading-4);
margin-bottom: 0.75rem;
text-decoration: none;
}
.wp-block-rss .wp-block-rss__item a::after {
content: " \f09e";
font-family: "Font Awesome 6 Sharp";
font-weight: 400;
}
.wp-block-rss .wp-block-rss__item a:hover {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: from-font;
}
.wp-block-rss .wp-block-rss__item .wp-block-rss__item-publish-date {
font-weight: bold;
margin: 0.75rem 0;
font-size: var(--wp--preset--font-size--mini);
}
.wp-block-rss .wp-block-rss__item:nth-of-type(2n + 1) {
background-color: var(--wp--preset--color--light);
}
/*WP Block Table, style-variation: stripes */
.wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) {
background-color: var(--wp--preset--color--white);
}
.wp-block-table.is-style-stripes tbody tr {
background-color: var(--wp--preset--color--light);
}
.wp-block-table thead {
border-bottom: none;
}
/*
* "Matrix" table style: a quiet two- or three-column reference table on the
* dark sections - a small uppercase header row, a bold white first column
* naming the thing, muted text explaining it, and hairlines between rows.
* Meant to sit in a "Card" group, which draws the panel around it.
*
* Column alignment and links are the table block's own: right-align a
* column from the toolbar, and a link in any cell picks up the accent.
*
* Below 640px the header row is dropped and each row becomes a stacked
* entry, so a long explanation never forces the page to scroll sideways.
*/
.wp-block-table.is-style-matrix {
margin: 0;
color: var(--wp--preset--color--greyblue);
}
.wp-block-table.is-style-matrix table {
width: 100%;
border-collapse: collapse;
/* New tables default to a fixed layout, which splits the columns
evenly - the name column wants only what it needs. */
table-layout: auto;
}
.wp-block-table.is-style-matrix thead {
border-bottom: 0;
}
.wp-block-table.is-style-matrix th,
.wp-block-table.is-style-matrix td {
border: 0;
vertical-align: top;
}
.wp-block-table.is-style-matrix th {
padding: 0 1rem 0.75rem;
border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
background: none;
color: var(--wp--preset--color--slateblue);
font-size: 0.71875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-align: left;
text-transform: uppercase;
}
.wp-block-table.is-style-matrix td {
padding: 0.875rem 1rem;
border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
font-size: 0.84375rem;
line-height: 1.55;
}
.wp-block-table.is-style-matrix td:first-child {
width: 28%;
color: var(--wp--preset--color--white);
font-size: var(--wp--preset--font-size--mini);
font-weight: 700;
line-height: 1.4;
}
.wp-block-table.is-style-matrix tbody tr:last-child td {
border-bottom: 0;
}
.wp-block-table.is-style-matrix td a {
color: var(--wp--preset--color--cyan);
font-weight: 700;
text-decoration: none;
}
.wp-block-table.is-style-matrix td a:hover {
color: var(--wp--preset--color--lightblue);
}
.wp-block-table.is-style-matrix {
/* The table block's alignment classes go on the cells; the header row
follows the column rather than staying left. */
}
.wp-block-table.is-style-matrix th.has-text-align-right {
text-align: right;
}
.wp-block-table.is-style-matrix th.has-text-align-center {
text-align: center;
}
.wp-block-table.is-style-matrix figcaption {
margin-top: 0.75rem;
color: var(--wp--preset--color--slateblue);
font-size: 0.75rem;
}
@media (max-width: 640px) {
.wp-block-table.is-style-matrix thead {
display: none;
}
.wp-block-table.is-style-matrix tr {
display: block;
padding: 0.75rem 0;
border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
}
.wp-block-table.is-style-matrix tbody tr:last-child {
border-bottom: 0;
}
.wp-block-table.is-style-matrix td,
.wp-block-table.is-style-matrix td:first-child {
display: block;
width: 100%;
padding: 0.125rem 0;
border-bottom: 0;
text-align: left;
}
.wp-block-table.is-style-matrix td:first-child {
padding-bottom: 0.25rem;
}
}
/*
* YOAST Breadcrumbs block styling on differnet backgrounds
*
*/
.wave .yoast-breadcrumbs {
color: var(--wp--preset--color--white);
}
.wave .yoast-breadcrumbs span {
font-size: 12px;
text-transform: uppercase;
}
.wave .yoast-breadcrumbs a {
color: var(--wp--preset--color--white);
}
.yoast-breadcrumbs span {
font-size: 12px;
text-transform: uppercase;
}
.yoast-breadcrumbs .breadcrumb_last {
color: var(--wp--preset--color--light);
}
.yoast-breadcrumbs a {
color: var(--wp--preset--color--black);
}
ul.wp-block-list,
ol.wp-block-list {
padding-left: 1.5rem;
margin-bottom: 2rem;
}
ul.wp-block-list li,
ol.wp-block-list li {
padding-left: 0.25rem;
margin-bottom: 0.75rem;
}
ul.wp-block-list li > ul,
ul.wp-block-list li > ol,
ol.wp-block-list li > ul,
ol.wp-block-list li > ol {
margin-bottom: 0 !important;
}
ul.wp-block-list li::marker,
ol.wp-block-list li::marker {
color: var(--wp--preset--color--white);
}
ul.wp-block-list:not(.wp-block-rss, .arrow-list, .is-style-check-list, .is-style-pills, .is-style-chain) li {
padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
list-style-type: none;
position: relative;
}
ul.wp-block-list:not(.wp-block-rss, .arrow-list, .is-style-check-list, .is-style-pills, .is-style-chain) li:before {
content: "";
position: absolute;
left: -20px;
top: 8px;
background-color: var(--wp--preset--color--white);
width: 5px;
height: 5px;
border-radius: 50%;
}
ul.wp-block-list:not(.wp-block-rss, .arrow-list, .is-style-check-list, .is-style-pills, .is-style-chain) li::marker {
display: none;
}
/* Arrow-list with orange arrows instead of bullets */
ul.wp-block-list.arrow-list {
padding-left: 0;
}
ul.wp-block-list.arrow-list li {
position: relative;
list-style-type: none;
padding-left: 2rem !important;
}
ul.wp-block-list.arrow-list li:before {
content: "\f178";
font-family: "Font Awesome 6 Sharp";
font-weight: 300;
position: absolute;
left: 0;
font-size: 16px;
color: var(--wp--preset--color--orange);
}
ul.wp-block-list.arrow-list li:hover {
text-decoration: none;
}
ul.wp-block-list.arrow-list li:hover:before {
transform: rotate(-45deg);
}
ul.wp-block-list.arrow-list li::marker {
display: none !important;
}
/* Check-list: cyan checkmarks with bold near-white text, used for the short
"what you get" lists in the marketing sections. Registered as a core/list
block style, so it is picked per list in the editor. */
ul.wp-block-list.is-style-check-list {
padding-left: 0;
}
ul.wp-block-list.is-style-check-list li {
position: relative;
list-style-type: none;
padding-left: 1.625rem !important;
margin-bottom: 0.625rem;
color: var(--wp--preset--color--white);
font-size: var(--wp--preset--font-size--mini);
font-weight: 600;
}
ul.wp-block-list.is-style-check-list li:before {
content: "\f00c";
font-family: "Font Awesome 6 Sharp";
font-weight: 900;
position: absolute;
left: 0;
/* Optically centres the glyph against the first text line rather than
sitting on its baseline, which reads low next to bold copy. */
top: 0.1em;
font-size: 0.875rem;
color: var(--wp--preset--color--cyan);
}
ul.wp-block-list.is-style-check-list li::marker {
display: none !important;
}
ul.wp-block-list.is-style-check-list li:last-child {
margin-bottom: 0;
}
/* Pills: each entry a small rounded chip with a dot, wrapping onto as many
rows as it needs - the event and action tags in the automation flow.
The accent tints the chip's fill, hairline and dot together. It follows
`--pill-accent`, so a container such as lohko/flow-step can re-tint every
list inside it without the editor having to pick a colour per list. */
ul.wp-block-list.is-style-pills {
--pill-accent: var(--wp--preset--color--cyan);
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding-left: 0;
}
ul.wp-block-list.is-style-pills li {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin: 0;
padding: 0.4375rem 0.8125rem !important;
border: 1px solid color-mix(in srgb, var(--pill-accent) 24%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--pill-accent) 8%, transparent);
color: var(--wp--preset--color--white);
font-size: 0.78125rem;
line-height: 1.3;
list-style-type: none;
}
ul.wp-block-list.is-style-pills li::before {
content: "";
width: 5px;
height: 5px;
flex-shrink: 0;
border-radius: 50%;
background: var(--pill-accent);
}
ul.wp-block-list.is-style-pills li::marker {
display: none;
}
/* The current pill: an entry whose text is bold - the page's own experience
type in a "one platform" list of them - is lit in blue, so it reads as
"you are here". Bolding is the only mark a list item can carry, as
core/list-item takes no class of its own. */
ul.wp-block-list.is-style-pills li:has(> strong) {
--pill-accent: var(--wp--preset--color--royalblue);
border-color: var(--pill-accent);
background: color-mix(in srgb, var(--pill-accent) 18%, transparent);
}
/* A pill that is not needed: an entry whose text is struck through - the
embed code and plugin a standalone page does without - is greyed back,
with the line and the dot in coral. Striking through is the editor's own
inline format, so no class is needed, as with the bold pill above. */
ul.wp-block-list.is-style-pills li:has(> s) {
--pill-accent: var(--wp--preset--color--coral);
border-color: color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
background: transparent;
color: var(--wp--preset--color--greyblue);
}
ul.wp-block-list.is-style-pills li:has(> s) s {
text-decoration-color: var(--wp--preset--color--coral);
}
/* Pills in a group whose flex layout centres its content: the list itself is
that group's one flex item, so the rows inside it have to be centred too,
or a row that wraps falls back to the left edge. */
.is-content-justification-center > ul.wp-block-list.is-style-pills {
justify-content: center;
}
/* Chain: the entries as a row of small panels with an arrow between each -
the modules one experience is built from, read left to right. The last
entry, or any entry set in bold, is lit in blue as where the chain ends
up. Wraps onto as many rows as it needs; each arrow sits in the gap in
front of its entry, so it travels with it. */
ul.wp-block-list.is-style-chain {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.625rem 2.25rem;
margin: 0;
padding-left: 0;
}
ul.wp-block-list.is-style-chain li {
position: relative;
margin: 0;
padding: 0.625rem 0.875rem !important;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent);
color: var(--wp--preset--color--white);
font-size: var(--wp--preset--font-size--mini);
font-weight: 600;
line-height: 1.3;
list-style-type: none;
}
ul.wp-block-list.is-style-chain li::marker {
display: none;
}
ul.wp-block-list.is-style-chain li + li::before {
content: "→";
position: absolute;
top: 50%;
right: calc(100% + 0.625rem);
color: var(--wp--preset--color--royalblue);
font-weight: 400;
translate: 0 -50%;
}
ul.wp-block-list.is-style-chain li:last-child,
ul.wp-block-list.is-style-chain li:has(> strong) {
border-color: var(--wp--preset--color--royalblue);
background: color-mix(in srgb, var(--wp--preset--color--royalblue) 16%, transparent);
}
/* Spacer Block XL set to 16px or max mobile height in Gutenberg editor, has css style xl */
.wp-block-spacer.is-style-xl {
padding-top: var(--wp--custom--spacing-sizes--xlarge);
}
/* Spacer Block LG -set to 16px or max mobile height in Gutenberg editor, has css style lg */
.wp-block-spacer.is-style-lg {
padding-top: var(--wp--custom--spacing-sizes--large);
}
/* Spacer Block MD -set to 16px or max mobile height in Gutenberg editor, has css style md */
.wp-block-spacer.is-style-md {
padding-top: var(--wp--custom--spacing-sizes--medium);
}
/* Spacer Block SM -set to 16px or max mobile height in Gutenberg editor, has css style sm */
.wp-block-spacer.is-style-sm {
padding-top: var(--wp--custom--spacing-sizes--small);
}
#ez-toc-container {
width: var(--wp--style--global--content-size);
padding: 2rem;
}
#ez-toc-container.ez-toc-counter nav ul li a::before {
color: var(--wp--preset--color--white) !important;
}
/*# sourceMappingURL=theme.css.map */