/* Theme Name: Solevo Theme URI: https://solevo.com.au Author: CrossLink DGTL Author URI: https://crosslinkasia.com Description: Custom block theme for Solevo Physio & Studio, Brookvale. A replica of the original solevo.com.au design, editable in the WordPress editor. Booking links, contact details and tracking live in Settings > Solevo. Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 8.0 Version: 1.4.22 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: solevo */ /* ========================================================= Type scale (1.3.22). The only font sizes in the theme. Every font-size in this file uses one of these; a GitHub check rejects any other value. Fluid between 375px and 1440px. ========================================================= */ :root { --fs-h1: clamp(2.5rem, 1.972rem + 2.254vw, 4rem); /* 40 to 64: page title */ --fs-h2: clamp(2rem, 1.736rem + 1.127vw, 2.75rem); /* 32 to 44: section headings */ --fs-h3: clamp(1.375rem, 1.287rem + 0.3756vw, 1.625rem); /* 22 to 26: block headings */ --fs-card: clamp(1.25rem, 1.206rem + 0.1878vw, 1.375rem); /* 20 to 22: card titles */ --fs-lead: clamp(1.09375rem, 1.061rem + 0.1408vw, 1.1875rem);/* 17.5 to 19: hero and section intros */ --fs-body: clamp(1rem, 0.978rem + 0.0939vw, 1.0625rem); /* 16 to 17: all body text */ --fs-small: clamp(0.90625rem, 0.8952rem + 0.04695vw, 0.9375rem); /* 14.5 to 15: chips, subtitles, links, footer */ --fs-caption: .8125rem; /* 13: breadcrumbs, captions, notes */ --fs-button: .9375rem; /* 15: buttons and arrow links (uppercase) */ --fs-label: .78125rem; /* 12.5: eyebrows and card tags (uppercase) */ } /* Seniors pages: the same scale, one step larger */ .solevo-large-text { --fs-lead: 1.3125rem; --fs-body: 1.1875rem; --fs-small: 1.0625rem; --fs-caption: .9375rem; --fs-button: 1.0625rem; --fs-label: .875rem; --fs-card: 1.5rem; } /* ========================================================= Tokens (sampled from the original site) ========================================================= */ :root { --s-olive: #5F6B52; --s-olive-hover: #4E5943; --s-olive-deep: #414A36; --s-ink: #2C2C2C; --s-text: #333230; --s-muted: #5A6250; --s-line: #E7E0D2; --s-line-soft: #EFEAE0; --s-paper: #FDFBF8; --s-cream: #F4F0E9; --s-linen: #FAF7F3; --s-linen-dark: #F0EBE4; --s-num: #D2CABA; --s-on-dark: #FAF7F3; --s-header-h: 76px; --s-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif; --s-sans: Jost, "Futura", system-ui, sans-serif; --s-section-y: clamp(3rem, 5.5vw, 4.5rem); --s-wave-h: clamp(48px, 6vw, 90px); } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--s-header-h) + 8px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { height: auto; } ::selection { background: var(--s-olive); color: #fff; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--s-olive); outline-offset: 3px; } /* Fine grain over the whole page, as on the original */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Type helpers */ .wp-block-heading em, h1 em, h2 em { font-style: italic; color: var(--s-olive); font-weight: 600; } .solevo-eyebrow, .is-style-eyebrow { font-family: var(--s-sans); font-size: var(--fs-label) !important; font-weight: 400; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--s-olive); opacity: .9; margin-bottom: 1rem !important; } .solevo-center { text-align: center; } .solevo-left { text-align: left !important; } .solevo-small { font-size: var(--fs-small); color: var(--s-text); } .solevo-sub { font-weight: 300; font-size: var(--fs-lead); color: var(--s-text); } .solevo-lead { font-size: var(--fs-lead); line-height: 1.6; font-weight: 300; color: var(--s-text); max-width: 46ch; } .solevo-note, .solevo-footer__italic { font-style: italic; font-weight: 300; } /* ========================================================= Header ========================================================= */ header.wp-block-template-part { position: sticky; top: 0; z-index: 60; } .admin-bar header.wp-block-template-part { top: 32px; } @media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } } .solevo-header { background: var(--s-paper); transition: background-color .3s ease, box-shadow .3s ease; box-shadow: 0 1px 0 rgba(44,44,44,.06), 0 6px 16px -10px rgba(44,44,44,.18); } .home .solevo-header:not(.is-scrolled) { background: transparent; box-shadow: none; } .solevo-header__bar { min-height: var(--s-header-h); gap: 1.5rem; } .solevo-header__right { gap: clamp(1.5rem, 4vw, 4.5rem); } .solevo-logo img { display: block; width: 140px; height: auto; } .solevo-primary-nav .wp-block-navigation__container { gap: clamp(1.25rem, 2.9vw, 2.75rem); } .solevo-primary-nav .wp-block-navigation-item__content { color: var(--s-text); text-decoration: none; padding: .25rem 0; } .solevo-primary-nav .wp-block-navigation-item__content:hover { color: var(--s-olive); } .solevo-primary-nav .wp-block-navigation__submenu-container { border: 1px solid var(--s-line) !important; padding: .5rem !important; min-width: 240px !important; background: var(--s-paper) !important; box-shadow: 0 10px 30px -15px rgba(0,0,0,.25); } .solevo-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem .75rem; letter-spacing: .08em; } .wp-block-navigation__responsive-container.is-menu-open { background: var(--s-paper) !important; padding: 2rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: var(--fs-lead); } .solevo-header__ctas .wp-block-button__link { padding: .7rem 2.1rem; white-space: nowrap; } @media (max-width: 600px) { .solevo-header__ctas .wp-block-button__link { padding: .6rem 1rem; } .solevo-logo img { width: 112px; } } /* ========================================================= Sections + wave dividers ========================================================= */ .wp-block-post-content > .alignfull, .wp-block-post-content > .solevo-section { margin-block-start: 0 !important; } .solevo-section { position: relative; padding-top: var(--s-section-y); padding-bottom: var(--s-section-y); } .solevo-head { text-align: center; margin-bottom: clamp(2.25rem, 4.5vw, 4rem); } .solevo-head .solevo-eyebrow { text-align: center; } .solevo-head h2 { margin-top: 0; } h2.wp-block-heading { font-size: var(--fs-h2); font-weight: 500; line-height: 1.15; } .solevo-h2-xl { font-size: var(--fs-h2) !important; line-height: 1.22 !important; } .solevo-h2-sm { font-size: var(--fs-h2) !important; } .solevo-h2-light { font-size: var(--fs-h3) !important; font-weight: 400 !important; } .solevo-h2-light em { font-weight: 400; color: var(--s-muted); } .solevo-wave::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--s-wave-h); background: var(--wave) center bottom / 100% 100% no-repeat; pointer-events: none; z-index: 1; } .solevo-wave--paper { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 62C260 40 560 44 860 48S1300 34 1440 8V90H0Z' fill='%23FDFBF8'/%3E%3C/svg%3E"); } .solevo-wave--linen { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 40C300 70 650 62 980 54S1340 66 1440 72V90H0Z' fill='%23FDFBF8'/%3E%3Cpath d='M0 64C340 52 640 48 900 56S1300 74 1440 60V90H0Z' fill='%23F4F0E9'/%3E%3C/svg%3E"); } .solevo-wave--olive { --s-wave-h: clamp(70px, 9vw, 140px); --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 72C220 52 520 50 820 56S1300 40 1440 14V140H0Z' fill='%23C8C4B4'/%3E%3Cpath d='M0 96C260 70 560 70 860 74S1310 54 1440 34V140H0Z' fill='%23999A86'/%3E%3Cpath d='M0 120C300 90 620 92 920 96S1330 72 1440 58V140H0Z' fill='%235F6B52'/%3E%3C/svg%3E"); } .solevo-wave--olive-band { --s-wave-h: clamp(60px, 7vw, 110px); --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 66C240 40 560 46 860 44S1300 24 1440 0V110H0Z' fill='%23B2B4A2'/%3E%3Cpath d='M0 92C280 56 600 60 900 62S1320 44 1440 36V110H0Z' fill='%23878B76'/%3E%3Cpath d='M0 110C300 74 640 76 960 76S1340 66 1440 62V110H0Z' fill='%235F6B52'/%3E%3C/svg%3E"); } .solevo-wave--after-olive { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V20C1300 34 980 40 720 36S220 20 0 30Z' fill='%23CBCDBE'/%3E%3Cpath d='M0 0H1440V8C1300 22 980 30 720 26S220 8 0 18Z' fill='%235F6B52'/%3E%3C/svg%3E"); } .solevo-wave--after-olive::before { bottom: auto; top: 0; background-position: center top; } /* ========================================================= Hero ========================================================= */ .solevo-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--s-header-h) + 4rem) 1.25rem 7rem; text-align: center; background: radial-gradient(ellipse 34% 42% at 47% 74%, rgba(222,200,186,.95), rgba(222,200,186,0) 70%), radial-gradient(ellipse 26% 48% at 94% 42%, rgba(193,196,178,.95), rgba(193,196,178,0) 72%), radial-gradient(ellipse 30% 40% at 6% 20%, rgba(246,243,239,.95), rgba(246,243,239,0) 70%), linear-gradient(180deg, #ECE6DF 0%, #E6DFD6 60%, #E9E2D9 100%); } .home .solevo-hero { margin-top: calc(-1 * var(--s-header-h)) !important; } .solevo-hero > * { margin-left: auto !important; margin-right: auto !important; } .solevo-hero .solevo-eyebrow { color: var(--s-text); margin-bottom: 2.5rem !important; } .solevo-hero__title { font-size: var(--fs-h1) !important; font-weight: 600 !important; line-height: 1.04 !important; letter-spacing: -.005em; margin: 0 auto !important; text-align: center; } .solevo-hero__title em { font-weight: 700; } .solevo-hero__lead { font-weight: 300; font-size: var(--fs-lead); color: var(--s-text); margin-top: 3rem !important; text-align: center; } .solevo-hero__cta { margin-top: 3.25rem !important; } .solevo-btn-lg .wp-block-button__link { padding: 1.3rem 3.3rem; font-size: var(--fs-button); letter-spacing: .12em; } .solevo-hero::after { content: ""; position: absolute; left: 50%; bottom: 1.5rem; width: 1px; height: 46px; transform: translateX(-50%); background: linear-gradient(rgba(74,74,74,0), rgba(74,74,74,.35)); } /* ========================================================= About ========================================================= */ .solevo-about { background: linear-gradient(180deg, var(--s-paper) 0, var(--s-paper) 40px, #F7F4F0 120px, #F7F4F0 100%); padding-top: calc(var(--s-section-y) - 1rem); } .solevo-dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--s-olive); margin-bottom: clamp(2rem, 4vw, 3.5rem); } .solevo-about h2 { margin: 0 0 clamp(2.5rem, 5vw, 4.5rem); } .solevo-about__cols { gap: clamp(2rem, 6vw, 6rem) !important; } .solevo-about__offer .solevo-eyebrow { margin-top: .25rem; margin-bottom: 1.75rem !important; } .solevo-dots { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.6rem; } .solevo-dots li { position: relative; padding-left: 2rem; font-size: var(--fs-body); font-weight: 300; color: var(--s-ink); line-height: 1.4; } .solevo-dots li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--s-olive); } .solevo-wide-photo { margin: clamp(3rem, 6vw, 5rem) 0 0 !important; } .solevo-wide-photo img { width: 100%; aspect-ratio: 2.35 / 1; object-fit: cover; border-radius: 10px; display: block; } /* ========================================================= Team ========================================================= */ .solevo-team-section { background: var(--s-linen-dark); padding-top: calc(var(--s-section-y) - 1rem); } .solevo-team-section .solevo-head + .solevo-member { margin-top: 0 !important; } .solevo-member { gap: clamp(2rem, 6vw, 5rem) !important; margin-top: clamp(3rem, 7vw, 6rem) !important; align-items: flex-start !important; } .solevo-member__photo { flex-grow: 0 !important; } .solevo-framed { position: relative; margin: 0 !important; isolation: isolate; } .solevo-framed::after { content: ""; position: absolute; inset: 0; transform: translate(16px, 16px); z-index: -1; border: 1.5px solid #D9D3C7; border-radius: 16px; box-shadow: 0 10px 20px -18px rgba(0,0,0,.4); } .solevo-framed img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 30px -24px rgba(0,0,0,.45); } .solevo-member__name { font-size: var(--fs-h3) !important; font-weight: 400 !important; margin: 0 0 .5rem; color: var(--s-ink); } .solevo-member__role { letter-spacing: .14em !important; margin-bottom: 1.75rem !important; opacity: 1 !important; } .solevo-member__text > p:not([class]) { font-size: var(--fs-body); } .solevo-member__label { margin-top: 2.25rem !important; font-size: var(--fs-label) !important; letter-spacing: .2em!important; } .solevo-boxtags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .75rem; } .solevo-boxtags li { background: var(--s-paper); border: 1px solid var(--s-line); padding: .55rem 1.1rem; font-size: var(--fs-small); font-weight: 400; color: var(--s-ink); line-height: 1.4; } .solevo-note { margin-top: 2.25rem !important; color: var(--s-text); } /* ========================================================= Services ========================================================= */ .solevo-services-section { background: var(--s-linen-dark); padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: calc(var(--s-section-y) + 2rem); } .solevo-service { gap: 2rem !important; padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; border-bottom: 1px solid var(--s-line); margin: 0 !important; } .solevo-service:last-child { border-bottom: 0; } .solevo-service h3 { font-size: var(--fs-h3) !important; font-weight: 500 !important; margin: 0 0 1rem; color: var(--s-ink); } .solevo-plaintags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem 1.4rem; } .solevo-plaintags li { font-size: var(--fs-small); font-weight: 500; color: #525251; letter-spacing: .02em; } .solevo-service__desc { font-size: var(--fs-body); font-weight: 400; color: var(--s-ink); line-height: 1.7; margin: 0 0 1.25rem; } .solevo-textlink { margin: 0; } .solevo-textlink a { font-size: var(--fs-button); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--s-olive); } .solevo-textlink a:hover { color: var(--s-ink); } /* ========================================================= Conditions ========================================================= */ .solevo-conditions-section { background: linear-gradient(180deg, var(--s-paper) 0, #F9F7F6 140px); padding-bottom: calc(var(--s-section-y) + 3rem); } .solevo-conditions-section .solevo-sub { margin-top: 1.5rem; text-align: center; } .solevo-condtags { list-style: none; padding: 0; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem .8rem; max-width: 1100px; } .solevo-condtags li a { display: block; padding: .55rem 1.25rem; background: var(--s-cream); border: 1px solid var(--s-line); font-size: var(--fs-small); font-weight: 300; color: var(--s-text); text-decoration: none; transition: background .2s, color .2s, border-color .2s; } .solevo-condtags li a:hover { background: var(--s-olive); border-color: var(--s-olive); color: #fff; } /* ========================================================= Olive sections (technology, booking band) ========================================================= */ .solevo-olive { background: var(--s-olive); color: var(--s-on-dark); } .solevo-olive .wp-block-heading { color: var(--s-on-dark); } .solevo-olive .wp-block-heading em { color: var(--s-on-dark); font-weight: 600; } .solevo-olive .solevo-eyebrow { color: rgba(250,247,243,.62); letter-spacing: .38em; } .solevo-olive .solevo-sub { color: rgba(250,247,243,.72); } .solevo-olive .solevo-dots li { color: rgba(250,247,243,.88); font-size: var(--fs-body); } .solevo-olive .solevo-dots li::before { background: rgba(250,247,243,.45); width: 6px; height: 6px; } .solevo-tech__cols { gap: clamp(2rem, 6vw, 6rem) !important; align-items: flex-start !important; } .solevo-tech__cols h2 { margin: .5rem 0 2.25rem; } .solevo-tech__cols .solevo-dots { gap: 1.4rem; padding-top: .5rem; } .solevo-video { position: relative; margin-top: clamp(3rem, 6vw, 5rem) !important; border-radius: 10px; overflow: hidden; } .solevo-video .solevo-wide-photo { margin: 0 !important; } .solevo-video .solevo-wide-photo img { border-radius: 10px; filter: saturate(.85); } .solevo-video::after { content: ""; position: absolute; inset: 0; background: rgba(28,28,28,.18); pointer-events: none; } .solevo-video__play { position: absolute; inset: 0; margin: 0 !important; display: flex; align-items: center; justify-content: center; z-index: 2; } .solevo-video__play a { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; padding-top: 4.5rem; color: rgba(250,247,243,.72); text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-button); } .solevo-video__play a::before { content: ""; width: 92px; height: 92px; border-radius: 50%; border: 2px solid rgba(250,247,243,.4); background: rgba(60,60,60,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='%23F4F0E9'/%3E%3C/svg%3E") 54% 50% / 30px no-repeat; transition: transform .2s ease, border-color .2s ease; } .solevo-video__play a:hover::before { transform: scale(1.05); border-color: rgba(250,247,243,.7); } .solevo-video__play a:hover { color: var(--s-on-dark); } /* ========================================================= Why ========================================================= */ .solevo-why-section { background: linear-gradient(180deg, var(--s-cream) 0, var(--s-cream) 70px, #EFECE4 170px); padding-top: calc(var(--s-section-y) + 2.5rem); } .solevo-reasons { gap: 2rem !important; } .solevo-reason { text-align: center; } .solevo-num { font-family: var(--s-serif); font-weight: 300; font-size: var(--fs-h1); line-height: 1; color: var(--s-num); margin: 0 0 1.75rem; } .solevo-reason h3 { font-size: var(--fs-card) !important; font-weight: 500 !important; color: var(--s-ink); margin: 0; } .solevo-reason h3::after { content: ""; display: block; width: 32px; height: 1px; background: #C2C3B7; margin: 1.25rem auto; } .solevo-reason p:not(.solevo-num) { font-weight: 400; color: var(--s-ink); font-size: var(--fs-body); line-height: 1.65; max-width: 17.5rem; margin: 0 auto; } .solevo-why__photos { gap: 1.5rem !important; margin-top: clamp(3.5rem, 7vw, 6rem) !important; } .solevo-photo { margin: 0 !important; } .solevo-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; } .solevo-photo.solevo-portrait img { aspect-ratio: 3 / 4; } /* ========================================================= Studio ========================================================= */ .solevo-studio-section { background: linear-gradient(180deg, #EFECE4 0, #F7F4F1 160px, var(--s-linen) 260px); } .solevo-studio__intro { gap: clamp(2rem, 6vw, 6rem) !important; } .solevo-studio__intro p:not([class]) { font-size: var(--fs-body); } .solevo-studio__note { margin-top: 2.5rem !important; letter-spacing: .26em !important; } .solevo-cat { gap: 1.5rem !important; margin-top: clamp(4rem, 7vw, 6.5rem) !important; margin-bottom: 2.25rem !important; } .solevo-cat h3 { font-size: var(--fs-h3) !important; font-weight: 400 !important; margin: 0; white-space: nowrap; color: var(--s-ink); } .solevo-cat__rule { flex: 1 1 auto; border: 0 !important; height: 1px !important; background: var(--s-line) !important; margin: 0 !important; opacity: 1 !important; min-width: 2rem; } .solevo-cat__places { margin: 0 !important; white-space: nowrap; letter-spacing: .2em!important; font-size: var(--fs-label) !important; } .solevo-class { background: var(--s-cream); border: 1px solid var(--s-line); padding: clamp(1.75rem, 3.6vw, 3.4rem) clamp(1.5rem, 3vw, 2.6rem); gap: 2rem !important; margin: 0 auto 1.25rem !important; } .solevo-class h4 { font-size: var(--fs-card) !important; font-weight: 400 !important; margin: 0; color: var(--s-ink); } .solevo-class__tag { font-style: italic; font-weight: 300; color: var(--s-olive); margin: .6rem 0 0; font-size: var(--fs-small); } .solevo-class p:not([class]) { margin-top: 0; font-size: var(--fs-body); line-height: 1.75; } .solevo-class__best { font-size: var(--fs-label); letter-spacing: .2em; color: var(--s-muted); margin: 1rem 0 0; } .solevo-class__best strong { font-weight: 400; text-transform: uppercase; letter-spacing: .2em; } .solevo-events-note { margin-top: 3.75rem !important; font-size: var(--fs-body); max-width: 44rem; margin-left: auto !important; margin-right: auto !important; } .solevo-events-note a { color: var(--s-text); text-underline-offset: 3px; } /* ========================================================= Pricing + founders + timetable ========================================================= */ .solevo-pricing-section, .solevo-timetable-section, .solevo-instagram { background: var(--s-linen); } .solevo-pricing-section { padding-top: 2rem; } .solevo-prices { gap: 2rem !important; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)) !important; } .solevo-price-card { background: var(--s-paper); border: 1px solid var(--s-line); border-radius: 8px; padding: clamp(1.75rem, 3.5vw, 2.9rem) clamp(1.5rem, 2.9vw, 2.6rem) clamp(1.75rem, 3vw, 2.4rem); } .solevo-price-card h3 { font-size: var(--fs-card) !important; font-weight: 500 !important; margin: 0; color: var(--s-ink); } .solevo-price-card__meta { margin: .6rem 0 0 !important; font-size: var(--fs-label) !important; color: var(--s-text) !important; letter-spacing: .2em!important; } .solevo-price-rows { margin-top: 1.25rem !important; } .solevo-price-row { gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--s-line-soft); margin: 0 !important; } .solevo-price-row:last-child { border-bottom: 0; } .solevo-price-row p { margin: 0; font-size: var(--fs-body); font-weight: 400; color: var(--s-ink); line-height: 1.45; } .solevo-price-row p span { font-size: var(--fs-caption); font-weight: 300; color: var(--s-text); } .solevo-price { font-family: var(--s-serif); font-size: var(--fs-card) !important; font-weight: 500 !important; white-space: nowrap; line-height: 1.1 !important; } .solevo-expiry { gap: 1rem 2.25rem !important; margin-top: 3.5rem !important; align-items: center !important; } .solevo-expiry__label { font-family: var(--s-serif); font-size: var(--fs-card); font-weight: 500; color: var(--s-ink); margin: 0; } .solevo-expiry__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 2.25rem; } .solevo-expiry__list li { font-weight: 400; font-size: var(--fs-small); color: var(--s-text); position: relative; padding-left: 1.1rem; } .solevo-expiry__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: #C0BBB1; } .solevo-founders { margin-top: clamp(4rem, 7vw, 6rem) !important; background: var(--s-paper); border: 2px solid #CED0C6; border-radius: 8px; padding: clamp(2.5rem, 4.5vw, 3.6rem) 1.5rem; text-align: center; } .solevo-founders .solevo-eyebrow { color: var(--s-text); margin-bottom: 1rem !important; font-size: var(--fs-label) !important; } .solevo-founders h3 { font-size: var(--fs-h3) !important; font-weight: 500 !important; margin: 0; color: var(--s-ink); } .solevo-founders__what { font-size: var(--fs-body); font-weight: 400; color: var(--s-ink); margin: .5rem 0 0; } .solevo-founders__price { font-family: var(--s-serif); font-size: var(--fs-h2); font-weight: 500; line-height: 1; color: var(--s-olive); margin: 2rem 0 .25rem; } .solevo-founders__per { font-weight: 400; font-size: var(--fs-caption); color: var(--s-ink); margin: 0 0 2rem; } .solevo-founders .solevo-eyebrow:last-child { margin: 0 !important; letter-spacing: .24em; } .solevo-timetable-section { padding-top: 1rem; } .solevo-timetable-section .solevo-head { margin-bottom: 2.5rem; } .solevo-timetable-box { background: var(--s-cream); border: 1px solid var(--s-line); padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 12vw, 13rem); } .solevo-timetable--fallback { text-align: center; } .solevo-timetable--fallback .wp-block-buttons { justify-content: center; } .solevo-instagram { padding-top: 0; } .solevo-instagram:not(:has(.solevo-feed)) { padding: 0; } .solevo-feed--instagram { background: #fff; } /* ========================================================= Booking band ========================================================= */ .solevo-band { min-height: clamp(30rem, 48vw, 44rem); display: flex; flex-direction: column; justify-content: center; text-align: center; margin-top: var(--s-wave-h) !important; } .solevo-band__title { font-size: var(--fs-h2) !important; font-weight: 500 !important; line-height: 1.25 !important; margin: 0 auto 2.5rem !important; max-width: none !important; } .solevo-band__ctas { gap: 0 !important; justify-content: center; } .solevo-band__cta { padding: 0 1.5rem; } .solevo-band__cta--second { border-left: 1px solid rgba(250,247,243,.22); } .solevo-btn-light .wp-block-button__link { background: var(--s-cream); color: var(--s-olive); padding: 1.15rem 2.95rem; letter-spacing: .12em; font-size: var(--fs-button); } .solevo-btn-light .wp-block-button__link:hover { background: #fff; color: var(--s-olive-deep); } .solevo-btn-ghost .wp-block-button__link { background: transparent; color: var(--s-cream); border: 1px solid rgba(244,240,233,.55); padding: calc(1.15rem - 1px) 2.95rem; letter-spacing: .12em; font-size: var(--fs-button); } .solevo-btn-ghost .wp-block-button__link:hover { background: var(--s-cream); color: var(--s-olive); } .solevo-band__caption { font-size: var(--fs-caption); font-weight: 300; color: #B2B7A8; margin: 1rem 0 0; } @media (max-width: 640px) { .solevo-band__ctas { flex-direction: column; gap: 2rem !important; } .solevo-band__cta--second { border-left: 0; } .solevo-btn-light .wp-block-button__link, .solevo-btn-ghost .wp-block-button__link { padding-left: 2.5rem; padding-right: 2.5rem; } } /* ========================================================= Footer ========================================================= */ .solevo-footer { position: relative; background: var(--s-ink); color: #BCBAB7; padding-top: clamp(7rem, 12vw, 11rem); padding-bottom: 4.5rem; } .solevo-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(40px, 5vw, 80px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V80C1100 64 600 58 0 44Z' fill='%23414A36'/%3E%3Cpath d='M0 0H1440V36C1080 30 600 26 0 14Z' fill='%235F6B52'/%3E%3C/svg%3E") center top / 100% 100% no-repeat; } .solevo-footer a { color: inherit; text-decoration: none; } .solevo-footer a:hover { color: var(--s-on-dark); } .solevo-footer .solevo-eyebrow { color: #7D8B6D; opacity: 1; letter-spacing: .2em; font-size: var(--fs-label) !important; margin: 1.9rem 0 .6rem !important; } .solevo-footer__grid { gap: 2rem !important; } .solevo-footer__logo { margin: 0 0 .5rem !important; } .solevo-footer__logo img { width: 160px; display: block; } .solevo-footer__brand p:not([class]) { margin: 0; font-weight: 300; font-size: var(--fs-small); color: #BCBAB7; } .solevo-footer__italic { color: #93928F; margin-top: 2rem !important; font-size: var(--fs-small); } .solevo-footer__grid > .wp-block-column:not(:first-child) .solevo-eyebrow { margin-top: .5rem !important; margin-bottom: 1.75rem !important; } .solevo-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; } .solevo-footer__links li { color: #A8A6A4; font-weight: 400; font-size: var(--fs-lead); } .solevo-footer__find { margin-top: clamp(3.5rem, 7vw, 6rem) !important; } .solevo-footer__find .solevo-map { aspect-ratio: auto; height: clamp(240px, 22vw, 320px); border-radius: 8px; margin-top: 1.5rem; background: #3A3A3A; } .solevo-footer__find .solevo-nap { color: #93928F; font-weight: 300; font-size: var(--fs-small); margin-top: 1.5rem; } .solevo-footer__mark { gap: 1.5rem !important; margin-top: clamp(3rem, 6vw, 5rem) !important; align-items: center !important; } .solevo-footer__rule { flex: 1 1 auto; border: 0 !important; height: 1px !important; background: #414040 !important; opacity: 1 !important; margin: 0 !important; } .solevo-footer__wordmark { font-family: var(--s-serif); font-style: italic; color: #555554; margin: 0; font-size: var(--fs-lead); } .solevo-footer__base { margin-top: 3rem !important; gap: 1rem !important; } .solevo-copyright { color: #7E7D7B; font-size: var(--fs-caption); font-weight: 300; margin: 0; } /* div only: the social-icons shortcode. The seniors "solevo-social" section shares the class name (1.3.26) */ div.solevo-social { display: flex; align-items: center; gap: 1.5rem; color: #93928F; font-size: var(--fs-small); } div.solevo-social a { color: #93928F; display: flex; } /* ========================================================= Shared components (inner pages and shortcodes) ========================================================= */ .solevo-nap { font-style: normal; line-height: 1.8; } .solevo-nap a { color: inherit; text-underline-offset: 3px; } .solevo-hours { list-style: none; padding: 0; font-size: var(--fs-small); } .solevo-map { border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--s-cream); } .solevo-map iframe { width: 100%; height: 100%; border: 0; display: block; } .solevo-find { background: var(--s-linen); } .solevo-admin-hint { border: 1.5px dashed var(--s-olive); padding: 1rem 1.25rem; background: rgba(95,107,82,.06); font-size: var(--fs-caption); color: var(--s-ink); text-align: left; } .solevo-feed--placeholder { max-width: 760px; margin: 0 auto; } .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--s-olive); border: 1px solid var(--s-olive); padding-top: calc(.75rem - 1px); padding-bottom: calc(.75rem - 1px); } .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--s-olive); color: #fff; } .solevo-olive .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--s-cream); border-color: rgba(244,240,233,.55); } .wp-block-button__link { transition: background .2s ease, color .2s ease, border-color .2s ease; } .solevo-crumbs-wrap { padding-top: 1.5rem; } .solevo-breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; font-size: var(--fs-caption); letter-spacing: .08em; color: var(--s-muted); } .solevo-breadcrumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; } .solevo-breadcrumbs a { color: inherit; text-decoration: none; } .solevo-breadcrumbs a:hover { color: var(--s-olive); } .solevo-main { background: var(--s-linen); } .solevo-narrow > * { max-width: 760px; } .solevo-page-hero { padding-top: clamp(2.5rem, 5vw, 4rem) !important; } .solevo-page-hero h1 { font-size: var(--fs-h1); font-weight: 500; margin-top: 0; } .solevo-page-hero .solevo-nap { margin-top: 1.25rem; font-size: var(--fs-small); color: var(--s-text); } .solevo-page-hero .wp-block-buttons { margin-top: 2rem; } .page-service .solevo-section, .page-condition .solevo-section { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); } .page-service .solevo-section:not(.has-background):not(.solevo-wave):not(.solevo-c) + .solevo-section:not(.has-background):not(.solevo-wave):not(.solevo-c), .page-condition .solevo-section:not(.has-background):not(.solevo-wave):not(.solevo-c) + .solevo-section:not(.has-background):not(.solevo-wave):not(.solevo-c) { padding-top: 0; } .is-style-pills { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .is-style-pills li { font-size: var(--fs-small); padding: .5rem 1rem; background: var(--s-cream); border: 1px solid var(--s-line); } .is-style-pills li a { color: var(--s-text); text-decoration: none; } .is-style-ticks { list-style: none; padding: 0; display: grid; gap: .8rem; } .is-style-ticks li { position: relative; padding-left: 1.75rem; color: var(--s-ink); } .is-style-ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--s-olive); } .is-style-card { background: var(--s-paper); border: 1px solid var(--s-line); border-radius: 8px; padding: clamp(1.5rem, 3vw, 2.5rem); } .is-style-rounded img { border-radius: 10px; } .solevo-portrait img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; } .solevo-person__role { font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--s-olive); margin-top: 0; } .solevo-split { gap: clamp(2rem, 6vw, 5rem) !important; align-items: center !important; } .solevo-practitioner > .wp-block-column:first-child { flex: 0 0 min(320px, 100%) !important; } .solevo-steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 1rem; } .solevo-steps li { counter-increment: step; position: relative; padding: 1.2rem 1.4rem 1.2rem 4.25rem; background: var(--s-paper); border: 1px solid var(--s-line); } .solevo-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 1.4rem; top: .9rem; font-family: var(--s-serif); font-size: var(--fs-h3); color: var(--s-num); line-height: 1; } .solevo-redflags > .wp-block-group { background: var(--s-cream); border-left: 3px solid var(--s-olive); padding: 1.5rem 1.75rem; } .solevo-redflags h3 { margin-top: 0; } .solevo-redflags ul { padding-left: 1.2rem; } .solevo-reviewed { font-size: var(--fs-caption); color: var(--s-muted); border-top: 1px solid var(--s-line); padding-top: 1rem; } .solevo-reviewed-wrap { padding-top: 0 !important; } .wp-block-details { border-bottom: 1px solid var(--s-line); padding: 1rem 0; } .wp-block-details summary { cursor: pointer; font-weight: 400; color: var(--s-ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .wp-block-details summary::-webkit-details-marker { display: none; } .wp-block-details summary::after { content: "+"; font-size: 1.25em; line-height: 1; color: var(--s-olive); } .wp-block-details[open] summary::after { content: "–"; } .solevo-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; } .solevo-card a { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.75rem; background: var(--s-paper); border: 1px solid var(--s-line); text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease; } .solevo-card a:hover { border-color: var(--s-olive); transform: translateY(-2px); } .solevo-card__title { font-family: var(--s-serif); font-size: var(--fs-card); line-height: 1.15; color: var(--s-ink); font-weight: 500; } .solevo-card__text { color: var(--s-text); font-size: var(--fs-body); } .solevo-card__more { margin-top: auto; padding-top: .5rem; font-size: var(--fs-button); letter-spacing: .12em; text-transform: uppercase; color: var(--s-olive); } .solevo-arrow-link a { font-size: var(--fs-button); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; } .solevo-404, .solevo-default { padding-top: var(--s-section-y); padding-bottom: var(--s-section-y); } /* ========================================================= Responsive ========================================================= */ @media (max-width: 781px) { .solevo-member__photo { flex-basis: 100% !important; max-width: 320px; } .solevo-framed::after { transform: translate(10px, 10px); } .solevo-cat { flex-wrap: wrap !important; } .solevo-cat h3 { white-space: normal; } .solevo-cat__rule { display: none; } .solevo-hero { min-height: 88svh; } .solevo-hero .solevo-eyebrow { margin-bottom: 1.5rem !important; } .solevo-video__play a { padding-top: 2.75rem; gap: .75rem; font-size: var(--fs-button); } .solevo-video__play a::before { width: 64px; height: 64px; background-size: 22px; } .solevo-wide-photo img { aspect-ratio: 16 / 9; } .solevo-reason { margin-bottom: 1rem; } .solevo-price-row p { font-size: var(--fs-body); } } .wp-site-blocks > * + * { margin-block-start: 0; } /* ========================================================= DESIGN SYSTEM (v1.2) - inner page templates (.solevo-ds) Service, Condition, Studio and General templates. The homepage adopts it in phase 5. Body 17px mobile / 18px desktop, charcoal text, AA contrast on every text and button colour pair. ========================================================= */ :root { --ds-ink: #262626; /* headings 14.2:1 on linen */ --ds-text: #333230; /* body 12.0:1 */ --ds-soft: #57534C; /* secondary text 7.2:1 */ --ds-olive: #5F6B52; /* buttons, accents 5.3:1 (white on olive 5.7:1) */ --ds-olive-text: #4C573F; /* small olive text 7.2:1 */ --ds-line: #E3DCCD; --ds-card: #FFFDF9; --ds-radius: 12px; --ds-radius-lg: 18px; --ds-y: clamp(3rem, 5.5vw, 4.5rem); --ds-gap: clamp(1rem, 2vw, 1.5rem); --ds-body: var(--fs-body); --ds-shadow: 0 1px 2px rgba(38,38,38,.04), 0 12px 28px -18px rgba(38,38,38,.28); } /* ---- Typography ---- */ .solevo-ds { color: var(--ds-text); font-size: var(--fs-body); line-height: 1.65; font-variant-numeric: lining-nums; } /* Grid and card children: no flow-layout top margins */ .solevo-qgrid > *, .solevo-scards > *, .solevo-path__grid > *, .solevo-first__grid > *, .solevo-why4 > *, .solevo-feesfaq > *, .solevo-assess > *, .solevo-person2 > *, .solevo-hero2__grid > *, .solevo-assess__media > * { margin-block: 0 !important; } .solevo-ds p, .solevo-ds li { font-weight: 400; } .solevo-ds h1, .solevo-ds h2, .solevo-ds h3 { color: var(--ds-ink); font-family: var(--s-serif); text-wrap: balance; } .solevo-ds h1.wp-block-heading { font-size: var(--fs-h1); font-weight: 600; line-height: 1.06; letter-spacing: -.01em; margin: 0 0 1.25rem; } .solevo-ds h2.wp-block-heading { font-size: var(--fs-h2); font-weight: 600; line-height: 1.12; margin-bottom: .75rem; } .solevo-ds h3.wp-block-heading { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; margin-bottom: .5rem; } .solevo-ds :is(p, ul, ol, .wp-block-buttons) + h3.wp-block-heading { margin-top: 2rem; } .solevo-ds .is-style-eyebrow, .solevo-ds .solevo-eyebrow { font-size: var(--fs-label) !important; letter-spacing: .2em; font-weight: 500; color: var(--ds-olive-text); opacity: 1; margin: 0 0 .85rem !important; } .solevo-ds a { color: var(--ds-olive-text); text-underline-offset: 3px; text-decoration-thickness: 1px; } .solevo-ds a:hover { color: var(--ds-ink); } .solevo-ds .solevo-intro { font-size: var(--fs-lead); color: var(--ds-soft); max-width: 62ch; margin: 0; } .solevo-ds strong { font-weight: 600; color: var(--ds-ink); } /* ---- Sections ---- */ .solevo-ds .solevo-section.solevo-c { padding-top: var(--ds-y); padding-bottom: var(--ds-y); } .solevo-ds .solevo-section.has-surface-background-color { border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); } .solevo-ds .solevo-sh { max-width: 760px; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem) !important; } .solevo-ds .solevo-crumbs-wrap { padding-top: 1rem; padding-bottom: 0; } .solevo-ds .solevo-breadcrumbs ol { color: var(--ds-soft); font-size: var(--fs-caption); letter-spacing: .04em; } .solevo-ds .solevo-crumbs-wrap + .wp-block-post-content > .solevo-hero2:first-child { margin-top: -2.75rem !important; padding-top: 4.25rem; } /* ---- Buttons: one primary, one outline, one text link ---- */ .solevo-ds .wp-block-button__link { font-size: var(--fs-button); font-weight: 500; letter-spacing: .12em; padding: .95rem 1.9rem; border-radius: 0; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } .solevo-ds .wp-block-button:not(.is-style-outline):not(.solevo-btn-light):not(.solevo-btn-ghost) > .wp-block-button__link { background: var(--ds-olive); color: #fff; } .solevo-ds .wp-block-button:not(.is-style-outline):not(.solevo-btn-light):not(.solevo-btn-ghost) > .wp-block-button__link:hover { background: var(--s-olive-deep); color: #fff; } .solevo-ds .wp-block-button.is-style-outline > .wp-block-button__link { border: 1.5px solid var(--ds-olive); color: var(--ds-olive-text); background: transparent; padding-top: calc(.95rem - 1.5px); padding-bottom: calc(.95rem - 1.5px); } .solevo-ds .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--ds-olive); color: #fff; } .solevo-ds .wp-block-buttons { gap: .75rem; } .solevo-more { margin: auto 0 0 !important; padding-top: .75rem; } .solevo-more a { font-size: var(--fs-button); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ds-olive-text); } .solevo-more a:hover { color: var(--ds-ink); text-decoration: underline; } /* ---- 1. Hero ---- */ .solevo-hero2 { background: radial-gradient(ellipse 40% 60% at 92% 30%, rgba(193,196,178,.55), rgba(193,196,178,0) 70%), radial-gradient(ellipse 35% 50% at 10% 90%, rgba(222,200,186,.45), rgba(222,200,186,0) 70%), linear-gradient(180deg, #F1ECE5 0%, #EEE8DF 100%); padding-bottom: clamp(3rem, 6vw, 4.5rem) !important; } /* 1.3.23: wider text column so page titles sit on two lines, not three */ .solevo-hero2__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .solevo-hero2__title { max-width: none; } .solevo-hero2__lead { font-size: var(--fs-lead); color: var(--ds-text); max-width: 54ch; margin: 0 0 1.75rem; } .solevo-hero2 .wp-block-buttons { margin-bottom: 1.5rem; } .solevo-hero2__media { margin: 0 !important; position: relative; isolation: isolate; } .solevo-hero2__media img { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; object-position: center 20%; border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow); } .solevo-hero2__media::after { content: ""; position: absolute; inset: 0; transform: translate(14px, 14px); border: 1.5px solid #D3CCBE; border-radius: var(--ds-radius-lg); z-index: -1; } .solevo-chips { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .6rem; } .solevo-chips a { display: flex; flex-direction: column; gap: .1rem; padding: .6rem 1rem .6rem 2.4rem; background: rgba(255,253,249,.8); border: 1px solid var(--ds-line); border-radius: 10px; text-decoration: none; position: relative; transition: border-color .2s; } .solevo-chips a:hover { border-color: var(--ds-olive); } .solevo-chips a::before { content: ""; position: absolute; left: .9rem; top: .85rem; width: 16px; height: 16px; background: var(--ds-olive); -webkit-mask: var(--icon-pin) center / contain no-repeat; mask: var(--icon-pin) center / contain no-repeat; } .solevo-chip__area { font-weight: 600; color: var(--ds-ink); font-size: var(--fs-small); line-height: 1.3; } .solevo-chip__detail { font-size: var(--fs-small); color: var(--ds-soft); line-height: 1.3; } .solevo-trustline { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; } .solevo-trustline li { position: relative; padding-left: 1.4rem; font-size: var(--fs-small); color: var(--ds-soft); } .solevo-trustline li::before, .solevo-ticks li::before, .solevo-trust li::before { content: ""; position: absolute; left: 0; top: .32em; width: 15px; height: 15px; background: var(--ds-olive); -webkit-mask: var(--icon-tick) center / contain no-repeat; mask: var(--icon-tick) center / contain no-repeat; } /* ---- 2. Question boxes (core/details) ---- */ .solevo-qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--ds-gap); align-items: start; } .solevo-ds .solevo-qbox { background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 0; margin: 0 !important; transition: border-color .2s, box-shadow .2s; } .solevo-ds .solevo-qbox:hover { border-color: #C9C2B2; box-shadow: var(--ds-shadow); } .solevo-ds .solevo-qbox[open] { border-color: var(--ds-olive); box-shadow: var(--ds-shadow); } .solevo-ds .solevo-qbox summary { display: block; position: relative; padding: 4.1rem 3rem 1.25rem 1.35rem; font-family: var(--s-serif); font-size: var(--fs-card); font-weight: 600; line-height: 1.15; color: var(--ds-ink); } .solevo-ds .solevo-qbox summary em { display: block; font-family: var(--s-sans); font-style: normal; font-size: var(--fs-small); font-weight: 400; line-height: 1.4; color: var(--ds-soft); margin-top: .4rem; } .solevo-ds .solevo-qbox summary::before { content: ""; position: absolute; left: 1.35rem; top: 1.3rem; width: 34px; height: 34px; border-radius: 50%; background: #E9ECE3; } .solevo-ds .solevo-qbox summary::after { content: ""; position: absolute; right: 1.1rem; top: 1.2rem; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ds-line); background: var(--icon-plus) center / 12px no-repeat; transition: transform .2s; } .solevo-ds .solevo-qbox[open] summary::after { transform: rotate(45deg); background-color: var(--ds-olive); border-color: var(--ds-olive); background-image: var(--icon-plus-w); } .solevo-ds .solevo-qbox > :not(summary) { margin-left: 1.35rem; margin-right: 1.35rem; } .solevo-ds .solevo-qbox:not([open]) summary { min-height: 7.9rem; } .solevo-ds .solevo-qbox > :not(summary) { margin-top: 0 !important; margin-bottom: .75rem; } .solevo-ds .solevo-qbox > p:not(.solevo-more) { font-size: var(--fs-body); } .solevo-ds .solevo-qbox > :last-child { padding-bottom: 1.35rem; } .solevo-qbox__links, .solevo-scard__links { list-style: none; padding: 0; margin: .25rem 0 .25rem; display: flex; flex-wrap: wrap; gap: .4rem; } .solevo-qbox__links a, .solevo-scard__links a { display: inline-block; font-size: var(--fs-small); padding: .35rem .7rem; background: #F3F0E8; border: 1px solid var(--ds-line); border-radius: 6px; text-decoration: none; color: var(--ds-ink); } .solevo-qbox__links a:hover, .solevo-scard__links a:hover { border-color: var(--ds-olive); color: var(--ds-olive-text); } .solevo-help__after { margin-top: 1.75rem !important; color: var(--ds-soft); } .solevo-qbox { --i: var(--icon-plus); } .solevo-icon--back { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M8.5 5.5h7M8 9.5h8M8.5 13.5h7M9 17.5h6'/%3E%3C/svg%3E"); } .solevo-icon--shoulder { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='6' r='3.2'/%3E%3Cpath d='M4 21v-2.5a6.5 6.5 0 0 1 6.5-6.5h3a6.5 6.5 0 0 1 6.5 6.5V21'/%3E%3C/svg%3E"); } .solevo-icon--knee { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5v7.5a4 4 0 0 0 4 4 4 4 0 0 1 4 4v3.5M12 2.5v5'/%3E%3Ccircle cx='12' cy='14' r='1.2'/%3E%3C/svg%3E"); } .solevo-icon--sport { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12h4l3-7.5 5 15 3-7.5h4'/%3E%3C/svg%3E"); } .solevo-icon--tendon { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2.5l3.5 3.5L17 9.5M3.5 11V10a4 4 0 0 1 4-4h13M7 21.5L3.5 18 7 14.5M20.5 13v1a4 4 0 0 1-4 4h-13'/%3E%3C/svg%3E"); } .solevo-icon--surgery { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4' width='15' height='17.5' rx='2'/%3E%3Cpath d='M9 2.5h6V6H9zM12 10.5v6M9 13.5h6'/%3E%3C/svg%3E"); } .solevo-icon--womens { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7z'/%3E%3C/svg%3E"); } .solevo-icon--strength { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5v11M17.5 6.5v11M3 9.5v5M21 9.5v5M6.5 12h11'/%3E%3C/svg%3E"); } .solevo-ds .solevo-qbox { position: relative; } .solevo-ds .solevo-qbox::after { content: ""; position: absolute; left: calc(1.35rem + 8px); top: calc(1.3rem + 8px); width: 18px; height: 18px; background: var(--ds-olive-text); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; pointer-events: none; } /* ---- 3. Service cards + care pathway ---- */ .solevo-scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: var(--ds-gap); } .solevo-scard { display: flex; flex-direction: column; background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 1.5rem 1.5rem 1.35rem; margin: 0 !important; transition: border-color .2s, box-shadow .2s; } .solevo-scard:hover { border-color: #C9C2B2; box-shadow: var(--ds-shadow); } .solevo-scard > * { margin-top: 0 !important; } .solevo-scard > .solevo-more { margin-top: auto !important; } .solevo-scard p:not(.solevo-more) { font-size: var(--fs-body); color: var(--ds-soft); margin-bottom: .5rem; } .solevo-path { margin-top: clamp(2.5rem, 5vw, 4rem) !important; } .solevo-ds .solevo-path__title { font-size: var(--fs-h3) !important; } .solevo-path__intro { color: var(--ds-soft); margin: 0 0 1.5rem !important; } .solevo-path__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-gap); counter-reset: path; } .solevo-path__item { position: relative; background: transparent; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 1.5rem; margin: 0 !important; display: flex; flex-direction: column; } .solevo-path__item > * { margin-top: 0 !important; } .solevo-path__item.is-current { background: var(--ds-card); border: 1.5px solid var(--ds-olive); box-shadow: var(--ds-shadow); } .solevo-path__item:not(:last-child)::after { content: ""; position: absolute; right: calc(-1 * var(--ds-gap) / 2 - 9px); top: 50%; width: 18px; height: 18px; margin-top: -9px; z-index: 2; border-radius: 50%; background: var(--s-linen) var(--icon-arrow) center / 10px no-repeat; border: 1px solid var(--ds-line); } .solevo-path__step { font-size: var(--fs-label) !important; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--ds-olive-text); margin-bottom: .5rem !important; } .solevo-path__item p:not([class]) { font-size: var(--fs-body); color: var(--ds-soft); } .solevo-path__booked { font-size: var(--fs-small); color: var(--ds-soft); border-top: 1px solid var(--ds-line); padding-top: .75rem; margin: auto 0 1rem !important; } .solevo-path__item .wp-block-buttons { margin: 0; } /* ---- 4. Journey ---- */ .solevo-ds ol.solevo-journey { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-gap); counter-reset: j; } .solevo-journey li { counter-increment: j; position: relative; padding: 4.5rem 1.5rem 1.5rem; background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); font-size: var(--fs-body); color: var(--ds-soft); } .solevo-journey li::before { content: counter(j); position: absolute; left: 1.5rem; top: 1.25rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ds-olive); color: #fff; font-family: var(--s-serif); font-size: var(--fs-card); font-weight: 600; display: flex; align-items: center; justify-content: center; } .solevo-journey li:not(:last-child)::after { content: ""; position: absolute; left: 4.4rem; right: -1rem; top: 2.45rem; height: 1px; background: repeating-linear-gradient(90deg, var(--ds-line) 0 6px, transparent 6px 11px); } .solevo-journey li strong { display: block; font-family: var(--s-serif); font-size: var(--fs-card); line-height: 1.2; font-weight: 600; color: var(--ds-ink); margin-bottom: .5rem; } .solevo-first { margin-top: clamp(1.75rem, 3.5vw, 2.5rem) !important; background: #F2EEE6; border-radius: var(--ds-radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); } .solevo-ds .solevo-first__title { font-size: var(--fs-h3) !important; margin-bottom: 1rem !important; } .solevo-first__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .solevo-first__item > * { margin-top: 0 !important; } .solevo-ds .solevo-first__item h3 { font-family: var(--s-sans); font-size: var(--fs-label) !important; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--ds-olive-text); margin-bottom: .4rem; } .solevo-first__item p { font-size: var(--fs-body); margin: 0; } /* ---- 5. Why (four reasons) ---- */ .solevo-why4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-gap); } .solevo-why4__item { border-top: 2px solid var(--ds-olive); padding-top: 1.25rem; margin: 0 !important; } .solevo-why4__item > * { margin-top: 0 !important; } .solevo-why4__num { font-family: var(--s-serif); font-size: var(--fs-h2); line-height: 1; color: #9C9686; margin-bottom: .75rem !important; } .solevo-why4__item p:not(.solevo-why4__num) { font-size: var(--fs-body); color: var(--ds-soft); } .solevo-why4__extra { list-style: none; padding: 1.25rem 0 0; margin: clamp(2rem, 4vw, 2.75rem) 0 0; border-top: 1px solid var(--ds-line); display: flex; flex-wrap: wrap; gap: .5rem 2rem; } .solevo-why4__extra li { position: relative; padding-left: 1.1rem; font-size: var(--fs-small); color: var(--ds-ink); } .solevo-why4__extra li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-olive); } /* ---- 6. Facilities (olive) ---- */ .solevo-assess-wrap { background-color: var(--s-olive); } .solevo-assess { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .solevo-assess__media { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } .solevo-assess__media figure { margin: 0 !important; } .solevo-assess__media img { width: 100%; display: block; object-fit: cover; border-radius: var(--ds-radius); } .solevo-assess__media figure:first-child { grid-column: 1 / -1; } .solevo-assess__media figure:first-child img { aspect-ratio: 16 / 9; } .solevo-assess__media.count-1 figure img { aspect-ratio: 1 / 1; object-position: 42% 45%; } .solevo-assess__media img { box-shadow: 0 0 0 1px rgba(250,247,243,.18); } .solevo-assess__media figure:not(:first-child) img { aspect-ratio: 4 / 3; } .solevo-assess__media.count-2 figure:last-child { grid-column: 1 / -1; } .solevo-assess__media.count-2 figure:last-child img { aspect-ratio: 21 / 9; object-position: center 35%; } .solevo-ds .solevo-assess-wrap h2, .solevo-ds .solevo-assess-wrap strong { color: #FAF7F3; } .solevo-ds .solevo-assess-wrap h2 em { color: #E4E7DA; font-weight: 600; } .solevo-ds .solevo-assess-wrap .is-style-eyebrow { color: #F1F2EC; } .solevo-ds .solevo-assess-wrap .solevo-intro, .solevo-ds .solevo-assess-wrap li { color: #F6F3EC; } .solevo-assess__list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .9rem; } .solevo-assess__list li { position: relative; padding: 0 0 .9rem 1.6rem; border-bottom: 1px solid rgba(250,247,243,.16); font-size: var(--fs-body); } .solevo-assess__list li:last-child { border-bottom: 0; padding-bottom: 0; } .solevo-assess__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #DCE0D2; } /* ---- 7. Practitioner + trust ---- */ .solevo-person2 { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: 1000px; } .solevo-person2__img { margin: 0 !important; } .solevo-person2__img img { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--ds-radius-lg); } .solevo-person2__text > * { margin-top: 0 !important; } .solevo-ds .solevo-person2__name { font-size: var(--fs-h3) !important; margin-bottom: .25rem !important; } .solevo-person2__role { font-size: var(--fs-small); color: var(--ds-olive-text); font-weight: 500; margin-bottom: 1rem !important; } .solevo-trust, .solevo-ticks { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .55rem; } .solevo-trust li, .solevo-ticks li { position: relative; padding-left: 1.65rem; font-size: var(--fs-body); } .solevo-trust li::before, .solevo-ticks li::before { top: .35em; } /* ---- 8. Fees + FAQ ---- */ .solevo-feesfaq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } .solevo-fees { background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); } .solevo-fees > * { margin-top: 0 !important; } .solevo-fees__rows { margin-bottom: 1.75rem !important; } .solevo-fee { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--ds-line); margin: 0 !important; } .solevo-fee:last-child { border-bottom: 0; } .solevo-fee__label { margin: 0 !important; font-weight: 500; color: var(--ds-ink); line-height: 1.35; font-size: var(--fs-body); } .solevo-fee__label span { font-size: var(--fs-caption); font-weight: 400; color: var(--ds-soft); } .solevo-fee__price { margin: 0 !important; font-family: var(--s-serif); font-size: var(--fs-card); font-weight: 600; color: var(--ds-ink); white-space: nowrap; } .solevo-fees .solevo-ticks li { font-size: var(--fs-body); color: var(--ds-soft); } .solevo-ds .solevo-faq2__col > h3 { margin: calc(clamp(1.5rem, 3vw, 2.25rem) + 1px) 0 .75rem !important; } .solevo-ds .solevo-feesfaq-wrap .solevo-reviewed { margin-top: 2rem; } .solevo-faq2 { border-top: 1px solid var(--ds-line); } .solevo-ds .solevo-faq2__item { border-bottom: 1px solid var(--ds-line); padding: 0; margin: 0 !important; } .solevo-ds .solevo-faq2__item summary { padding: 1.1rem 2.5rem 1.1rem 0; position: relative; font-weight: 500; color: var(--ds-ink); font-size: var(--fs-body); display: block; } .solevo-ds .solevo-faq2__item summary::after { content: ""; position: absolute; right: .25rem; top: 50%; margin-top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--ds-line); background: var(--icon-plus) center / 10px no-repeat; transition: transform .2s; } .solevo-ds .solevo-faq2__item[open] summary::after { transform: rotate(45deg); } .solevo-ds .solevo-faq2__item p { margin: 0 0 1.15rem; color: var(--ds-soft); font-size: var(--fs-body); max-width: 64ch; } /* ---- 9. Locations ---- */ .solevo-locs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--ds-gap); } .solevo-loc { background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; } .solevo-loc > * { margin-top: 0; } .solevo-ds .solevo-loc__name { font-family: var(--s-serif); font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; color: var(--ds-ink); margin: 0 0 .35rem; } .solevo-loc__note { color: var(--ds-soft); font-size: var(--fs-small); margin: 0 0 1rem; } .solevo-loc .solevo-nap { font-size: var(--fs-small); margin-bottom: .75rem; line-height: 1.6; } .solevo-loc__hours { list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: var(--fs-small); color: var(--ds-ink); } .solevo-loc .wp-block-buttons { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; } /* ---- 10. Final CTA band (template part) ---- */ .solevo-ds .wp-block-post-content > .solevo-section:last-child { padding-bottom: calc(var(--ds-y) + var(--s-wave-h)) !important; } .solevo-cta2 { position: relative; text-align: center; margin-top: 0; padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem clamp(4rem, 8vw, 6rem); } .solevo-cta2__inner { max-width: 720px; margin: 0 auto; } .solevo-cta2 h2.wp-block-heading { font-family: var(--s-serif); font-size: var(--fs-h3); font-weight: 600; line-height: 1.12; color: var(--s-on-dark); margin: 0 0 .75rem; } .solevo-cta2__sub { color: #F6F3EC; font-size: var(--fs-lead); margin: 0 0 2rem; } .solevo-cta2__btns { justify-content: center; display: flex; flex-wrap: wrap; gap: .85rem; } .solevo-cta2 .solevo-btn-light .wp-block-button__link, .solevo-cta2 .solevo-btn-ghost .wp-block-button__link { padding: 1.05rem 2.4rem; font-size: var(--fs-button); font-weight: 500; letter-spacing: .12em; min-height: 52px; } .solevo-cta2 .solevo-btn-light .wp-block-button__link { color: var(--s-olive-deep); } .solevo-cta2__alt { margin: 1.75rem 0 0; color: #F1EEE6; font-size: var(--fs-body); } .solevo-cta2__alt a { color: #fff; text-underline-offset: 3px; } .solevo-cta2__alt + .solevo-cta2__alt { margin-top: .5rem; } .solevo-chip__day { font-weight: 400; } /* ---- Related, reviewed, editor notes ---- */ .solevo-ds .solevo-reviewed { color: var(--ds-soft); } .solevo-todo { margin: 1rem auto !important; max-width: 1152px; } .solevo-ds .wp-block-post-content > .wp-block-shortcode:has(.solevo-todo) { max-width: 1152px; } /* ---- Sticky mobile booking bar ---- */ .solevo-sticky { display: none; } @media (max-width: 781px) { .solevo-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(253,251,248,.96); backdrop-filter: blur(8px); box-shadow: 0 -1px 0 var(--ds-line), 0 -10px 24px -18px rgba(0,0,0,.35); transform: translateY(110%); transition: transform .25s ease; } .solevo-sticky.is-visible { transform: none; } .solevo-sticky__btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 48px; font-family: var(--s-sans); font-size: var(--fs-button); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border: 1.5px solid var(--ds-olive); color: var(--ds-olive-text); background: transparent; } .solevo-sticky__btn.is-primary { flex-grow: 2; background: var(--ds-olive); color: #fff; } .solevo-sticky__btn.is-alt { background: var(--s-ink); border-color: var(--s-ink); } body:has(.solevo-sticky) .solevo-footer { padding-bottom: 7rem; } } @media (max-width: 599px) { .solevo-hero2__media { display: none; } } @media (prefers-reduced-motion: reduce) { .solevo-sticky { transition: none; } } /* 1.4.19: footer 1300 number in the body font, same size as the Terrey Hills line under it (Steph, 8 Nov) */ .solevo-footer .solevo-footer__phone { font-family: var(--s-sans); font-size: var(--fs-body); font-weight: 500; line-height: 1.5; letter-spacing: 0; } /* 1.4.21: 1300 number in the header and booking band Call buttons in the normal text font (Steph, 8 Nov) */ .solevo-header__call-num, .solevo-callnum { font-family: var(--s-sans); font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; text-transform: none; } /* ---- Clinic chooser (1.4.19): Book Physio asks Brookvale or Terrey Hills ---- */ .solevo-chooser { width: min(92vw, 26rem); max-width: none; padding: 0; border: 0; background: var(--s-paper); color: var(--s-text); box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); } .solevo-chooser::backdrop { background: rgba(44,44,44,.55); } .solevo-chooser__box { position: relative; padding: 2rem 1.5rem 1.5rem; } .solevo-chooser__title { margin: 0 2.25rem 1.25rem 0; font-family: var(--s-serif); font-size: var(--fs-h3); line-height: 1.2; color: var(--s-ink); } .solevo-chooser__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; } .solevo-chooser__opt { display: block; padding: 1rem 1.25rem; border: 1.5px solid var(--ds-olive); color: var(--s-ink); text-decoration: none; transition: background-color .15s ease, color .15s ease; } .solevo-chooser__opt:hover, .solevo-chooser__opt:focus-visible { background: var(--ds-olive); color: #fff; } .solevo-chooser__area { display: block; font-family: var(--s-sans); font-size: var(--fs-button); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .solevo-chooser__detail { display: block; margin-top: .3rem; font-size: var(--fs-small); } .solevo-chooser__close { position: absolute; top: .4rem; right: .4rem; width: 44px; height: 44px; padding: 0; border: 0; background: none; font-size: 1.75rem; line-height: 1; color: var(--s-ink); cursor: pointer; } @media (prefers-reduced-motion: reduce) { .solevo-chooser__opt { transition: none; } } /* ---- Icons (masks) ---- */ :root { --icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 21.5s-7-6.1-7-11.5a7 7 0 0 1 14 0c0 5.4-7 11.5-7 11.5z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); --icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E"); --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234C573F' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 1v10M1 6h10'/%3E%3C/svg%3E"); --icon-plus-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 1v10M1 6h10'/%3E%3C/svg%3E"); --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234C573F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2l4 4-4 4'/%3E%3C/svg%3E"); } /* ---- Responsive ---- */ @media (max-width: 1023px) { .solevo-why4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } .solevo-first__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .solevo-feesfaq { grid-template-columns: 1fr; } } @media (max-width: 781px) { .solevo-hero2__grid { grid-template-columns: 1fr; } .solevo-hero2__media { order: -1; max-width: 420px; } .solevo-ds .solevo-faq2__col > h3 { margin-top: 0 !important; } .solevo-hero2__media img { aspect-ratio: 16 / 11; max-height: 300px; } .solevo-hero2__media::after { display: none; } .solevo-ds .solevo-crumbs-wrap + .wp-block-post-content > .solevo-hero2:first-child { padding-top: 3.5rem; } .solevo-hero2 .wp-block-buttons { flex-direction: column; align-items: stretch; } .solevo-hero2 .wp-block-button, .solevo-hero2 .wp-block-button__link { width: 100%; } .solevo-path__grid, .solevo-ds ol.solevo-journey { grid-template-columns: 1fr; } .solevo-path__item:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: calc(-1 * var(--ds-gap) / 2 - 9px); margin: 0 0 0 -9px; transform: rotate(90deg); } .solevo-journey li { padding: 1.25rem 1.25rem 1.25rem 4.5rem; } .solevo-journey li::before { left: 1.15rem; top: 1.2rem; } .solevo-journey li:not(:last-child)::after { left: 2.35rem; right: auto; top: 3.8rem; bottom: -1.25rem; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--ds-line) 0 6px, transparent 6px 11px); } .solevo-assess { grid-template-columns: 1fr; } .solevo-person2 { grid-template-columns: 1fr; } .solevo-person2__img { max-width: 260px; } .solevo-why4 { grid-template-columns: 1fr; } .solevo-first__grid { grid-template-columns: 1fr; gap: 1rem; } .solevo-ds .solevo-qbox summary, .solevo-ds .solevo-qbox:not([open]) summary { min-height: 0; padding: 1.1rem 3rem 1.1rem 4.1rem; font-size: var(--fs-card); } .solevo-ds .solevo-qbox summary::before { left: 1rem; top: 1.05rem; } .solevo-ds .solevo-qbox::after { left: calc(1rem + 8px); top: calc(1.05rem + 8px); } .solevo-ds .solevo-qbox summary::after { top: 1.1rem; right: .9rem; } .solevo-ds .solevo-qbox > :not(summary) { margin-left: 1.1rem; margin-right: 1.1rem; } .solevo-loc .wp-block-buttons { flex-direction: column; align-items: stretch; } .solevo-loc .wp-block-button__link { width: 100%; } } .solevo-person2__text > ul { margin-top: 1rem !important; } /* Question box booking button: solid like the primary button, compact, aligned with the box text */ .solevo-ds .solevo-qbox > .solevo-qbox__cta { margin: .5rem 1.35rem 0 !important; padding-bottom: 1.35rem; } .solevo-qbox__cta a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: .55rem 1.25rem; background: var(--ds-olive); color: #fff !important; font-size: var(--fs-button); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background .2s; } .solevo-qbox__cta a:hover { background: var(--s-olive-deep); } @media (max-width: 781px) { .solevo-ds .solevo-qbox > .solevo-qbox__cta { margin-left: 1.1rem !important; margin-right: 1.1rem !important; } } /* ========================================================= READABILITY LAYER (client feedback, 23 Oct 2026) Site-wide, including the homepage and footer: - charcoal body copy, regular weight (no 300-weight body text) - body 17px mobile / 18px desktop; descriptors, bullets, links and footer raised to match - every text colour on cream, olive and the dark footer meets WCAG AA (4.5:1+) - smaller heading-to-body gap, more line spacing, less empty space ========================================================= */ body { font-size: var(--fs-body); line-height: 1.7; color: var(--ds-text); } p, li { font-weight: 400; } /* Type: supporting copy */ .solevo-sub, .solevo-lead, .solevo-hero__lead { font-weight: 400 !important; color: var(--ds-text); } .solevo-sub { font-size: var(--fs-lead); } .solevo-eyebrow, .is-style-eyebrow { color: var(--ds-olive-text) !important; opacity: 1 !important; font-weight: 500 !important; font-size: var(--fs-label) !important; letter-spacing: .2em; } .solevo-dots li { font-weight: 400; font-size: var(--fs-body); line-height: 1.55; } .solevo-condtags li a { font-weight: 400; font-size: var(--fs-small); color: var(--ds-ink); } .solevo-plaintags li { font-size: var(--fs-small); color: var(--ds-soft); } .solevo-service__desc { font-size: var(--fs-body); color: var(--ds-text); } .solevo-textlink a, .solevo-card__more, .solevo-arrow-link a { font-size: var(--fs-button); font-weight: 500; color: var(--ds-olive-text); } .solevo-member__text > p:not([class]), .solevo-studio__intro p:not([class]) { font-size: var(--fs-body); } .solevo-member__label { font-size: var(--fs-label) !important; } .solevo-boxtags li { font-size: var(--fs-small); } .solevo-reason p:not(.solevo-num) { font-size: var(--fs-body); max-width: 19rem; } .solevo-class p:not([class]) { font-size: var(--fs-body); line-height: 1.7; } .solevo-class__tag { font-weight: 400; font-size: var(--fs-small); color: var(--ds-olive-text); } .solevo-class__best { font-size: var(--fs-label); color: var(--ds-soft); } .solevo-cat__places { font-size: var(--fs-label) !important; color: var(--ds-soft) !important; } .solevo-price-row p { font-size: var(--fs-body); } .solevo-price-row p span { font-size: var(--fs-caption); font-weight: 400; color: var(--ds-soft); } .solevo-price-card__meta { font-size: var(--fs-label) !important; } .solevo-expiry__list li { font-size: var(--fs-small); } .solevo-founders .solevo-eyebrow { font-size: var(--fs-label) !important; } .solevo-founders__per { font-size: var(--fs-caption); } .solevo-card__text, .is-style-pills li, .solevo-page-hero .solevo-nap { font-size: var(--fs-small); } .solevo-person__role { font-size: var(--fs-label); color: var(--ds-olive-text); } .solevo-reviewed { font-size: var(--fs-caption); color: var(--ds-soft); } .solevo-breadcrumbs ol { font-size: var(--fs-caption); color: var(--ds-soft); } /* Headings: keep the serif, narrow the gap to body copy */ h2.wp-block-heading { font-size: var(--fs-h2); font-weight: 600; line-height: 1.12; } .solevo-h2-xl { font-size: var(--fs-h2) !important; line-height: 1.18 !important; } .solevo-h2-sm { font-size: var(--fs-h2) !important; } .solevo-hero__title { font-size: var(--fs-h1) !important; line-height: 1.06 !important; } .solevo-band__title { font-size: var(--fs-h2) !important; line-height: 1.2 !important; margin-bottom: 2rem !important; } .solevo-member__name { font-size: var(--fs-h3) !important; font-weight: 600 !important; } .solevo-service h3 { font-size: var(--fs-h3) !important; font-weight: 600 !important; } .solevo-reason h3, .solevo-cat h3, .solevo-class h4, .solevo-price-card h3 { font-weight: 600 !important; } .solevo-num { font-size: var(--fs-h1); color: #9C9686; margin-bottom: 1rem; font-variant-numeric: lining-nums; } .solevo-price, .solevo-founders__price { font-variant-numeric: lining-nums; } /* Olive sections: solid light text, no translucent copy */ .solevo-olive .solevo-eyebrow, .solevo-olive .is-style-eyebrow { color: #EEF0E8 !important; letter-spacing: .24em; } .solevo-note { font-weight: 400; } .solevo-olive .solevo-sub, .solevo-olive .solevo-dots li, .solevo-olive p { color: #F6F3EC; } .solevo-olive .solevo-dots li::before { background: #EEF0E8; } .solevo-video__play a { color: #F6F3EC; } .solevo-band__caption { font-size: var(--fs-caption); font-weight: 400; color: #F6F3EC; opacity: 1; } .solevo-btn-light .wp-block-button__link { color: var(--s-olive-deep); font-size: var(--fs-button); font-weight: 500; } .solevo-btn-ghost .wp-block-button__link { color: #fff; border: 1.5px solid #F6F3EC; font-size: var(--fs-button); font-weight: 500; } /* Footer: larger text, AA on the dark background */ .solevo-footer { color: #D6D3CE; padding-top: clamp(5.5rem, 9vw, 8rem); } .solevo-footer .solevo-eyebrow { color: #B9C2A9 !important; font-size: var(--fs-label) !important; } .solevo-footer__brand p:not([class]) { font-weight: 400; font-size: var(--fs-small); color: #D6D3CE; } .solevo-footer__italic { color: #BDBAB4; font-size: var(--fs-small); font-weight: 400; } .solevo-footer__links li { color: #CFCCC6; font-size: var(--fs-lead); } .solevo-footer__find .solevo-nap { color: #BDBAB4; font-weight: 400; font-size: var(--fs-small); } .solevo-copyright { color: #B3B0AA; font-size: var(--fs-caption); font-weight: 400; } div.solevo-social, div.solevo-social a { color: #BDBAB4; font-size: var(--fs-small); } .solevo-footer__find { margin-top: clamp(2.5rem, 5vw, 4rem) !important; } .solevo-footer__mark { margin-top: clamp(2rem, 4vw, 3rem) !important; } /* Less empty space (homepage replica) */ .solevo-hero { min-height: min(100svh, 820px); padding-bottom: 5rem; } .solevo-hero .solevo-eyebrow { margin-bottom: 1.5rem !important; } .solevo-hero__lead { margin-top: 1.75rem !important; } .solevo-hero__cta { margin-top: 2.25rem !important; } .solevo-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); } .solevo-about h2 { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); } .solevo-dot::before { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); } .solevo-wide-photo, .solevo-video { margin-top: clamp(2rem, 4vw, 3.25rem) !important; } .solevo-member { margin-top: clamp(2.5rem, 5vw, 4rem) !important; } .solevo-services-section { padding-bottom: calc(var(--s-section-y) + 1rem); } .solevo-why-section { padding-top: calc(var(--s-section-y) + 1.5rem); } .solevo-why__photos { margin-top: clamp(2.5rem, 5vw, 4rem) !important; } .solevo-num { margin-bottom: 1rem; } .solevo-cat { margin-top: clamp(2.75rem, 5vw, 4rem) !important; } .solevo-founders { margin-top: clamp(2.75rem, 5vw, 4rem) !important; } .solevo-conditions-section { padding-bottom: calc(var(--s-section-y) + 1.5rem); } .solevo-band { min-height: 0; padding-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: clamp(4rem, 8vw, 6rem); } .solevo-timetable-box { padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 6vw, 5rem); } @media (max-width: 781px) { .solevo-hero { min-height: 0; padding-top: calc(var(--s-header-h) + 3rem); padding-bottom: 4rem; } } /* Physio and inner pages: supporting copy at 17px, links at 14px */ .solevo-scard p:not(.solevo-more), .solevo-qbox > p:not(.solevo-more):not(.solevo-qbox__cta), .solevo-path__item p:not([class]), .solevo-journey li, .solevo-why4__item p:not(.solevo-why4__num), .solevo-assess__list li, .solevo-trust li, .solevo-ticks li, .solevo-first__item p, .solevo-faq2__item p, .solevo-fees .solevo-ticks li { font-size: var(--fs-body); } .solevo-ds .solevo-qbox summary em { font-size: var(--fs-small); } .solevo-chip__detail, .solevo-path__booked, .solevo-fee__label span, .solevo-loc__note, .solevo-loc__hours { font-size: var(--fs-small); } .solevo-trustline li, .solevo-why4__extra li { font-size: var(--fs-small); } .solevo-more a, .solevo-qbox__cta a { font-size: var(--fs-button); } .solevo-ds .solevo-faq2__item summary { font-size: var(--fs-body); } /* Location map, hero jump links, Instagram */ .solevo-loc__map { margin: calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) 1.5rem; aspect-ratio: 16 / 8; background: #ECE7DE; border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; overflow: hidden; } .solevo-loc__map iframe { display: block; width: 100%; height: 100%; border: 0; } .solevo-jump { margin: 1rem 0 0 !important; font-size: var(--fs-small); color: var(--ds-soft); } .solevo-jump a { font-weight: 500; } .solevo-ig__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; } .solevo-ig__head .solevo-sh { margin-bottom: 0 !important; } .solevo-ig .solevo-feed--placeholder { max-width: none; } /* ========================================================= Components: Condition, Studio and General templates ========================================================= */ .solevo-hero2__grid:not(:has(.solevo-hero2__media)) { grid-template-columns: minmax(0, 1fr); } .solevo-hero2__grid:not(:has(.solevo-hero2__media)) .solevo-hero2__title { max-width: 22ch; } /* Split: copy + ticked card or photo */ .solevo-split2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.75rem, 5vw, 4rem); align-items: start; } .solevo-split2.is-single { grid-template-columns: minmax(0, 1fr); max-width: 760px; } .solevo-split2 > * { margin-block: 0 !important; } .solevo-split2__text > p:not([class]) { max-width: 62ch; } .solevo-split2__card { background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); } .solevo-split2__card > * { margin-top: 0 !important; } .solevo-split2__card .solevo-ticks { margin-top: .75rem; } .solevo-split2__card > .solevo-split2__group { margin-top: 1.25rem !important; margin-bottom: 0; } .solevo-split2__text h3 { margin-top: 1.75rem; } .solevo-split2__img { margin: 0 !important; } .solevo-split2__img img { width: 100%; display: block; aspect-ratio: 4 / 5; max-height: 520px; object-fit: cover; border-radius: var(--ds-radius-lg); } /* Red flags */ .solevo-flagbox { background: #FBF3EC; border: 1px solid #E8D5C4; border-left: 4px solid #9A5B34; border-radius: var(--ds-radius); padding: clamp(1.5rem, 3vw, 2.25rem); max-width: 860px; } .solevo-flagbox > * { margin-top: 0 !important; } .solevo-ds .solevo-flagbox .is-style-eyebrow { color: #7A4526 !important; } .solevo-flags { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; } .solevo-flags li { position: relative; padding-left: 1.75rem; font-size: var(--fs-body); color: var(--ds-ink); } .solevo-flags li::before { content: "!"; position: absolute; left: 0; top: .2em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #9A5B34; color: #fff; font-size: .75em; font-weight: 700; line-height: 1.15rem; text-align: center; } .solevo-flags__note { font-size: var(--fs-body); color: var(--ds-text); margin: 0 !important; font-weight: 500; } /* Classes and formats */ .solevo-class2__meta { font-size: var(--fs-label) !important; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--ds-olive-text); margin-bottom: .5rem !important; } .solevo-class2__tag { font-style: italic; color: var(--ds-olive-text) !important; font-size: var(--fs-small) !important; margin-bottom: .5rem !important; } .solevo-class2__best { margin-top: auto !important; padding-top: .75rem; border-top: 1px solid var(--ds-line); font-size: var(--fs-small) !important; } /* Price cards */ .solevo-prices2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: var(--ds-gap); align-items: start; } .solevo-prices2 > * { margin-block: 0 !important; } .solevo-price2__meta { font-size: var(--fs-small); color: var(--ds-soft); margin: 0 0 .5rem !important; } .solevo-price2 .solevo-fees__rows { margin-bottom: 0 !important; } /* Timetable */ .solevo-tt { background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: clamp(1.5rem, 4vw, 3rem); } .solevo-tt .solevo-timetable--fallback .wp-block-buttons { justify-content: flex-start; } /* Two booking paths */ .solevo-path__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .solevo-path__grid--two .solevo-path__item::after { display: none; } .solevo-path__grid--two .solevo-ticks { margin: .25rem 0 1.25rem; } /* Practitioner without a photo */ .solevo-person2.no-image { grid-template-columns: minmax(0, 1fr); max-width: 760px; } @media (max-width: 781px) { .solevo-split2, .solevo-path__grid--two { grid-template-columns: 1fr; } } /* Child-page cards ([solevo_child_pages]): the link fills the card without overflowing it */ .solevo-cards { align-items: stretch; } .solevo-card { display: flex; margin: 0 !important; } .solevo-card a { box-sizing: border-box; flex: 1 1 auto; height: auto; min-height: 100%; border-radius: var(--ds-radius, 12px); background: var(--ds-card, #FFFDF9); } .solevo-card__text { font-size: var(--fs-body); color: var(--ds-soft, #57534C); } .solevo-card__more { font-weight: 500; color: var(--ds-olive-text, #4C573F); } /* ========================================================= Homepage on the design system (1.3.0, phase 5) ========================================================= */ /* Solid header on the new light hero (the old transparent header sat on a dark photo) */ .home .solevo-header:not(.is-scrolled) { background: var(--s-paper); box-shadow: 0 1px 0 rgba(44,44,44,.06); } /* Header Call button: number on desktop, "Call" on small screens */ .solevo-header__ctas { gap: .5rem; flex-wrap: nowrap; } .solevo-header__call .wp-block-button__link { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .solevo-header__call-short { display: none; } @media (max-width: 600px) { .solevo-header__call-num { display: none; } .solevo-header__call-short { display: inline; } .solevo-header__call .wp-block-button__link { padding-left: .9rem !important; padding-right: .9rem !important; } } /* Google reviews: link card until the Trustindex feed is connected */ .solevo-reviews2 .solevo-sh { text-align: center; margin-inline: auto; } .solevo-revlink { max-width: 560px; margin: 0 auto; padding: 1.75rem 1.5rem; text-align: center; background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow); } .solevo-revlink__text { margin: 0 0 1rem; color: var(--ds-soft); } .solevo-revlink .wp-block-buttons { justify-content: center; } /* Conditions pills on the homepage */ .solevo-home-conds .is-style-pills { margin: 1.25rem 0; } .solevo-home-conds .is-style-pills li { border-radius: 999px; background: var(--ds-card); border-color: var(--ds-line); } .solevo-home-conds .is-style-pills li:hover { border-color: var(--ds-olive); } .solevo-home-conds .solevo-more { margin-top: .5rem !important; } /* Service cards: buttons under the grid */ .solevo-services2 .solevo-scards + .wp-block-buttons { margin-top: 1.75rem; justify-content: center; } /* 1.3.1: clinic photos are portrait phone shots; keep them from towering */ .solevo-home-studio-img, .solevo-split2-wrap#studio .solevo-split2__img img { max-height: 520px; width: 100%; object-fit: cover; border-radius: var(--ds-radius-lg); } .solevo-split2-wrap#studio .is-style-pills { margin-top: 1rem; } /* 1.3.2+: hero intro video (4:5, captions built in) */ .solevo-hero2__video { width: 100%; } .solevo-hero2__video video { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 5; max-height: 600px; object-fit: cover; border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow); background: #2b2b2b; } .solevo-hero2__sound { position: absolute; right: .75rem; bottom: .75rem; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border: 0; border-radius: 999px; background: rgba(38,38,38,.72); color: #fff; font: 500 .75rem/1 var(--wp--preset--font-family--body, sans-serif); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } .solevo-hero2__sound:hover, .solevo-hero2__sound:focus-visible { background: var(--ds-olive); outline: 2px solid #fff; outline-offset: 2px; } /* 1.3.5: tap-to-play hero video on phones and tablets */ .solevo-hero2__play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.25rem; border: 0; border-radius: var(--ds-radius-lg); background: linear-gradient(to top, rgba(38,38,38,.55), rgba(38,38,38,0) 45%); color: #fff; font: 500 .8125rem/1 var(--wp--preset--font-family--body, sans-serif); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; } .solevo-hero2__play::before { content: ""; position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%235F6B52'/%3E%3C/svg%3E") 55% 50% / 30px no-repeat; box-shadow: 0 6px 20px rgba(0,0,0,.25); } .solevo-hero2__play:focus-visible { outline: 3px solid var(--ds-olive); outline-offset: 3px; } @media (max-width: 781px) { .solevo-hero2__media.solevo-hero2__video { order: 2; max-width: 420px; width: 100%; } .solevo-hero2__video video { max-height: 520px; } } @media (max-width: 599px) { .solevo-hero2__media.solevo-hero2__video { display: block; margin-top: 1.5rem !important; } } /* 1.3.7: footer in the same structure as The Foot Company (logo + contact, links, both clinics) */ .solevo-footer__top { align-items: flex-start !important; gap: 2rem !important; } .solevo-footer__logo { margin: 0 !important; } .solevo-footer__logo img { width: clamp(160px, 16vw, 220px); } .solevo-footer__contact { text-align: right; } .solevo-footer .solevo-floc__label { font-family: var(--wp--preset--font-family--body, sans-serif); font-size: var(--fs-label) !important; letter-spacing: .2em; text-transform: uppercase; color: #9C9A95; margin: 0 0 1.1rem !important; font-weight: 400; } .solevo-footer__phone { display: block; font-family: var(--s-serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1; color: var(--s-on-dark) !important; margin-bottom: 1.5rem; } .solevo-footer__btns { justify-content: flex-end; gap: .75rem !important; } .solevo-footer__btns .wp-block-button__link { background: transparent !important; color: var(--s-on-dark) !important; border: 1px solid #6E6C68 !important; border-radius: 0 !important; padding: .85rem 1.6rem !important; font-size: var(--fs-button); letter-spacing: .12em; } .solevo-footer__btns .wp-block-button__link:hover, .solevo-footer__btns .wp-block-button__link:focus-visible { border-color: var(--s-on-dark) !important; background: rgba(255,255,255,.06) !important; } .solevo-footer__line { border: 0 !important; height: 1px !important; background: #46443F !important; opacity: 1 !important; margin: clamp(2.5rem, 5vw, 4rem) auto !important; } .solevo-footer__grid { gap: 2rem !important; margin-top: 0 !important; margin-bottom: 0 !important; } .solevo-footer__grid > .wp-block-column .solevo-floc__label { margin-top: 0 !important; } .solevo-footer__links { gap: .9rem; } .solevo-footer__links li { font-family: var(--s-serif); font-size: var(--fs-lead); color: #D6D3CE; } .solevo-footer__find { margin-top: 0 !important; } .solevo-flocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); } .solevo-floc__map { border-radius: 8px; overflow: hidden; background: #3A3936; aspect-ratio: 5 / 2; } .solevo-floc__map iframe { display: block; width: 100%; height: 100%; border: 0; } .solevo-floc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; } .solevo-floc__addr { font-style: normal; font-size: var(--fs-small); font-weight: 400; line-height: 1.75; color: #D6D3CE; } .solevo-floc__addr a { color: inherit !important; } .solevo-floc__hours { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); font-weight: 400; line-height: 1.75; color: #D6D3CE; } .solevo-floc__hours li { font-weight: 400; } .solevo-floc__day { margin-right: .5rem; } .solevo-footer__base { margin-top: clamp(3rem, 6vw, 4.5rem) !important; padding-top: 1.5rem; border-top: 1px solid #46443F; } @media (max-width: 781px) { .solevo-footer__contact { text-align: left; } .solevo-footer__btns { justify-content: flex-start; } .solevo-floc__map { aspect-ratio: 16 / 9; } } @media (max-width: 420px) { .solevo-floc__grid { grid-template-columns: 1fr; gap: 1.25rem; } } /* 1.3.8: homepage background video (Settings > Solevo > Homepage background video) */ .solevo-hero2.has-bg-video { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(540px, 80vh, 840px); display: flex; flex-direction: column; justify-content: center; background: #2B2C27; } .solevo-hero2.has-bg-video > .solevo-hero2__bg { position: absolute; inset: 0; z-index: -1; max-width: none !important; width: auto !important; margin: 0 !important; } .solevo-hero2__bg video { display: block; width: 100%; height: 100%; object-fit: cover; } .solevo-hero2__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(34,36,30,.82) 0%, rgba(34,36,30,.6) 45%, rgba(34,36,30,.28) 100%); } .solevo-hero2.has-bg-video > .alignwide { width: 100%; } .has-bg-video .solevo-hero2__grid { grid-template-columns: minmax(0, 1fr) !important; } .has-bg-video .solevo-hero2__text { max-width: 680px; } .has-bg-video .solevo-hero2__title, .has-bg-video .solevo-hero2__lead, .has-bg-video .solevo-trustline li { color: #FAF7F3 !important; } .has-bg-video .is-style-eyebrow { color: #D9DECF !important; } .has-bg-video .solevo-trustline li::before { background: #D9DECF; } .has-bg-video .wp-block-button.is-style-outline .wp-block-button__link { color: #FAF7F3 !important; border-color: rgba(250,247,243,.7) !important; background: transparent !important; } .has-bg-video .wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(250,247,243,.1) !important; } @media (max-width: 781px) { .solevo-hero2.has-bg-video { min-height: 0; padding-top: 4rem; padding-bottom: 3.5rem; } .solevo-hero2__bg::after { background: rgba(34,36,30,.66); } } .solevo-meet__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .solevo-meet__grid > * { margin-block: 0 !important; } .solevo-meet__text .wp-block-buttons { margin-top: 1.75rem; } .solevo-meet .solevo-hero2__video { display: block !important; width: 100%; } @media (max-width: 781px) { .solevo-meet__grid { grid-template-columns: 1fr; } .solevo-meet .solevo-hero2__video { max-width: 420px; } } /* 1.3.10: footer clinics as an anchor target */ #find-us { scroll-margin-top: 110px; } /* 1.3.14: service cards, equal size, last row centred (homepage and /physio) */ /* 1.4.8: five cards on desktop = three on top, two wider below, no empty slot (Hayo's visual check, 4 Nov). */ @media (min-width: 1024px) { .solevo-scards:has(> :nth-child(5):last-child), .solevo-qgrid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); } .solevo-scards:has(> :nth-child(5):last-child) > *, .solevo-qgrid:has(> :nth-child(5):last-child) > * { grid-column: span 2; } .solevo-scards:has(> :nth-child(5):last-child) > :nth-child(n+4), .solevo-qgrid:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; } } .solevo-scards--center { display: flex !important; flex-wrap: wrap; justify-content: center; } .solevo-scards--center > .solevo-scard { flex: 0 1 calc((100% - 2 * var(--ds-gap)) / 3); min-width: 0; } @media (max-width: 1023px) { .solevo-scards--center > .solevo-scard { flex-basis: calc((100% - var(--ds-gap)) / 2); } } @media (max-width: 599px) { .solevo-scards--center > .solevo-scard { flex-basis: 100%; } } /* ========================================================= 1.3.16: Steph's feedback, 28 Oct Stronger buttons, darker text, tighter spacing, stronger closing band, image placeholders, facilities / steps / program cards, compact physio block, condition directory, larger text for seniors pages. ========================================================= */ :root { --s-section-y: clamp(2.5rem, 4.5vw, 3.75rem); --s-text: #2F2E2C; } .solevo-ds { --ds-y: clamp(2.5rem, 4.5vw, 3.75rem); --ds-text: #2B2A28; --ds-soft: #45423D; --ds-olive: #4E5943; --ds-olive-text: #414A36; } body { font-weight: 400; color: #2F2E2C; } .page-service .solevo-section, .page-condition .solevo-section { padding-top: clamp(2.5rem, 4.5vw, 3.75rem); padding-bottom: clamp(2.5rem, 4.5vw, 3.75rem); } .solevo-ds .solevo-intro { color: #3A3834; } .solevo-ds .is-style-eyebrow, .solevo-ds .solevo-eyebrow { color: #414A36; font-weight: 600; } .solevo-ds h1, .solevo-ds h2, .solevo-ds h3 { color: #1F1F1E; } /* Buttons: solid olive, white text, heavier type; outline buttons read as buttons */ .wp-block-button__link { font-weight: 600 !important; } .wp-block-button:not(.is-style-outline):not(.solevo-btn-light):not(.solevo-btn-ghost) > .wp-block-button__link { background: #4E5943; color: #fff; } .wp-block-button:not(.is-style-outline):not(.solevo-btn-light):not(.solevo-btn-ghost) > .wp-block-button__link:hover { background: #3A4330; color: #fff; } .wp-block-button.is-style-outline > .wp-block-button__link, .solevo-ds .wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid #4E5943; color: #3A4330; background: #FFFDF9; } .solevo-ds .wp-block-button__link { font-size: var(--fs-button); letter-spacing: .12em; min-height: 52px; padding-left: 2.1rem; padding-right: 2.1rem; } .solevo-header__ctas .wp-block-button__link { font-weight: 600 !important; } /* Closing booking band: darker, bigger, phone visible */ .solevo-cta2.solevo-olive { background: #3A4330 !important; } .solevo-cta2 h2.wp-block-heading { color: #fff; } .solevo-cta2__sub { color: #fff; font-size: var(--fs-lead); line-height: 1.6; } .solevo-cta2__sub a { color: #fff; font-weight: 600; text-underline-offset: 3px; white-space: nowrap; } .solevo-cta2 .solevo-btn-light .wp-block-button__link { background: #fff; color: #2F3727; font-size: var(--fs-button); padding: 1.25rem 3rem; min-height: 60px; } .solevo-cta2 .solevo-btn-ghost .wp-block-button__link { border: 2px solid #fff; color: #fff; font-size: var(--fs-button); padding: 1.25rem 2.6rem; min-height: 60px; } .solevo-cta2__alt { color: #fff; } /* Photo placeholders (replaced when Steph's photos arrive) */ .solevo-ph { display: flex !important; align-items: center; justify-content: center; text-align: center; aspect-ratio: 4 / 3; width: 100%; padding: 1.25rem; border: 2px dashed #B7AE9B; border-radius: var(--ds-radius, 12px); background: repeating-linear-gradient(135deg, #EFEAE1 0 14px, #F5F1EA 14px 28px); color: #57534C; font-size: var(--fs-caption); line-height: 1.45; margin: 0 !important; } .solevo-ph > p { margin: 0 !important; max-width: 28ch; } .solevo-ph > p::before { content: "Photo to come"; display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #414A36; margin-bottom: .4rem; } .solevo-hero2__media.solevo-ph { aspect-ratio: 4 / 5; max-height: 560px; } @media (max-width: 599px) { .solevo-hero2__media.solevo-ph { display: none !important; } } /* Image cards: facilities, procedures, programs, journey steps */ .solevo-icards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-gap, 1.25rem); margin-top: 1.75rem !important; } .solevo-icards.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .solevo-icards.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .solevo-icards > * { margin-block: 0 !important; } .solevo-icard { background: var(--ds-card, #FFFDF9); border: 1px solid var(--ds-line, #E3DCCD); border-radius: var(--ds-radius, 12px); overflow: hidden; display: flex; flex-direction: column; } .solevo-icard > * { margin-block: 0 !important; } .solevo-icard .solevo-ph { border-radius: 0; border-width: 0 0 2px; } .solevo-icard__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .solevo-icard__body > * { margin: 0 !important; } .solevo-icard__body h3 { font-size: var(--fs-card) !important; line-height: 1.2; } .solevo-icard__tag { font-size: var(--fs-label) !important; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #414A36; } .solevo-icard__body .wp-block-buttons { margin-top: auto !important; padding-top: .5rem; } /* 1.4.14: "more" links sit on the bottom of the card, so links in one row line up (Steph, 6 Nov). */ .solevo-icard__body > .solevo-more { margin-top: auto !important; } .solevo-icard__meta { font-weight: 500; color: #2B2A28; } @media (max-width: 1023px) { .solevo-icards, .solevo-icards.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .solevo-icards, .solevo-icards.is-2, .solevo-icards.is-4 { grid-template-columns: 1fr; } } /* Compact "Meet your physio" block */ .solevo-person2--compact { grid-template-columns: 120px minmax(0, 1fr) !important; gap: 1.5rem !important; max-width: 820px; align-items: start; } .solevo-person2--compact .solevo-person2__img img { aspect-ratio: 1; border-radius: 50%; } .solevo-ds .solevo-person2--compact .solevo-person2__name { font-size: var(--fs-h3) !important; } .solevo-person2--compact p { font-size: var(--fs-body); } @media (max-width: 599px) { .solevo-person2--compact { grid-template-columns: 1fr !important; } .solevo-person2--compact .solevo-person2__img { max-width: 110px; } } /* Condition directory */ .solevo-dir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-gap, 1.25rem); margin-top: 1.5rem !important; } .solevo-dir > * { margin-block: 0 !important; } .solevo-dir__cat { background: var(--ds-card, #FFFDF9); border: 1px solid var(--ds-line, #E3DCCD); border-radius: var(--ds-radius, 12px); padding: 1.35rem 1.5rem 1.5rem; } .solevo-dir__cat > * { margin-block: 0 !important; } .solevo-dir__cat h2, .solevo-dir__cat h3 { font-size: var(--fs-h3) !important; margin-bottom: .75rem !important; } .solevo-dir__cat ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; } .solevo-dir__cat li a { display: block; padding: .5rem 0; border-bottom: 1px solid var(--ds-line, #E3DCCD); text-decoration: none; color: #2B2A28; font-weight: 500; } .solevo-dir__cat li:last-child a { border-bottom: 0; } .solevo-dir__cat li a::after { content: " →"; color: #4E5943; } .solevo-dir__cat li a:hover { color: #4E5943; } @media (max-width: 1023px) { .solevo-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .solevo-dir { grid-template-columns: 1fr; } } /* Larger, darker text for seniors pages */ .solevo-large-text .solevo-ds { --ds-body: var(--fs-body); } /* sizes come from the larger scale tokens above, so intro, body and small text keep their steps (1.3.26) */ .solevo-large-text .solevo-ds p, .solevo-large-text .solevo-ds li { line-height: 1.7; } .solevo-large-text .solevo-ds .is-style-eyebrow { font-size: var(--fs-label) !important; } .solevo-large-text .solevo-ds .wp-block-button__link { font-size: var(--fs-button); min-height: 60px; padding-left: 2.4rem; padding-right: 2.4rem; } .solevo-large-text .solevo-ds summary { font-size: var(--fs-body); } /* 1.3.17: wide cards use a landscape placeholder */ .solevo-icards.is-2 .solevo-ph { aspect-ratio: 16 / 9; } /* 1.3.18: Terrey Hills booking phone in the footer */ .solevo-floc__book { margin: .75rem 0 0 !important; color: var(--s-on-dark); } .solevo-floc__book a { color: #fff; font-weight: 500; text-underline-offset: 3px; white-space: nowrap; } /* 1.3.19: Terrey Hills booking line under the footer phone number */ .solevo-footer__phone { margin-bottom: .6rem; } .solevo-footer__th { margin: 0 0 1.4rem !important; color: var(--s-on-dark); font-size: var(--fs-body); } .solevo-footer__th a { color: #fff; font-weight: 500; text-underline-offset: 3px; white-space: nowrap; } /* 1.3.20: calmer booking band; wave no longer overlaps the section above; centred */ .solevo-cta2.solevo-wave { margin-top: var(--s-wave-h) !important; } .solevo-cta2 { padding-top: clamp(2.5rem, 5vw, 3.75rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); } .solevo-cta2__inner { max-width: 860px; margin-left: auto !important; margin-right: auto !important; text-align: center; } .solevo-cta2 h2.wp-block-heading { font-size: var(--fs-h3); font-weight: 500; margin-bottom: .6rem; } .solevo-cta2__sub { font-size: var(--fs-lead); margin-bottom: 1.75rem; } .solevo-cta2__btns { justify-content: center !important; } /* 1.3.24: six-item header fits on one line (Conditions added 29 Oct); hamburger menu below 1200px */ .solevo-header__right { gap: clamp(1.25rem, 2vw, 2rem); } .solevo-primary-nav .wp-block-navigation__container { gap: clamp(1.1rem, 1.7vw, 1.6rem); flex-wrap: nowrap; } .solevo-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { letter-spacing: .1em; white-space: nowrap; } @media (min-width: 600px) and (max-width: 1199px) { .solevo-primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .solevo-primary-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } /* 1.3.25: alignment fixes (29 Oct) */ /* Page titles: pull the large serif in by its side bearing so its first letter lines up with the eyebrow and intro */ .solevo-hero2__title { margin-left: -.035em !important; } /* Section headings and intros use the full content width */ .solevo-ds .alignwide > .solevo-sh { max-width: none; } .solevo-ds .alignwide > .solevo-sh .solevo-intro { max-width: none; } /* Numbered "why" cards: titles share one row height, so the text below starts on the same line in every card */ .solevo-why4__item { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; } /* 1.4.0: three dropdowns (1.4.16 order: Services / Exercise & programs / Conditions we treat, then Blog), roomier panels; What we treat in two columns */ .solevo-primary-nav .solevo-mega > .wp-block-navigation__submenu-container { padding: .75rem !important; min-width: 260px !important; border-radius: var(--ds-radius); } @media (min-width: 1200px) { .solevo-primary-nav .solevo-mega--2col > .wp-block-navigation__submenu-container { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .5rem; min-width: 460px !important; } } .solevo-primary-nav .solevo-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content { letter-spacing: .02em; text-transform: none; border-radius: 8px; } .solevo-primary-nav .solevo-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--s-linen); } /* 1.4.0: calmer FAQ section (Steph, 3 Nov): one centred column, more air, olive plus icon, link to the full FAQ page */ .solevo-ds .solevo-faq-wrap .solevo-narrow { max-width: 760px; margin-left: auto !important; margin-right: auto !important; } .solevo-ds .solevo-faq-wrap h2.wp-block-heading { margin-bottom: 1.5rem; } .solevo-ds .solevo-faq2 { background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 0 clamp(1.25rem, 3vw, 2rem); } .solevo-ds .solevo-faq2__item:last-child { border-bottom: 0; } .solevo-ds .solevo-faq2__item summary { padding: 1.35rem 3rem 1.35rem 0; line-height: 1.45; cursor: pointer; } .solevo-ds .solevo-faq2__item summary::-webkit-details-marker { display: none; } .solevo-ds .solevo-faq2__item summary::after { border-color: var(--ds-olive); } .solevo-ds .solevo-faq2__item[open] summary { color: var(--ds-olive-text); } .solevo-ds .solevo-faq2__item p { margin-bottom: 1.4rem; line-height: 1.65; } .solevo-ds .solevo-faq2__all { margin-top: 1.25rem !important; font-size: var(--fs-button); } .solevo-ds .solevo-faq2__all a { color: var(--ds-olive-text); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; } .solevo-ds .solevo-faq2__all a::after { content: " \2192"; } /* Older pages built before 1.3.21 still carry the two-column fees and FAQ layout: stack it in one column */ .solevo-ds .solevo-feesfaq { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; } /* 1.4.0: conditions overview, every condition with a short description and a Read more link */ .solevo-clist__group { margin-top: clamp(2rem, 4vw, 3rem); } .solevo-clist__group > h2.wp-block-heading { font-size: var(--fs-h3); margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--ds-line); } .solevo-clist__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--ds-gap); } .solevo-ds .solevo-clist__grid > * { margin-block: 0 !important; } .solevo-clist__item { background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 1.25rem 1.35rem; display: flex; flex-direction: column; } .solevo-clist__item h3.wp-block-heading { font-size: var(--fs-card); margin: 0 0 .4rem; } .solevo-clist__item p { margin: 0; color: var(--ds-soft); font-size: var(--fs-body); line-height: 1.55; } .solevo-clist__item .solevo-clist__more { margin-top: auto !important; padding-top: .9rem; } .solevo-clist__more a { color: var(--ds-olive-text); text-decoration: none; font-size: var(--fs-button); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; } .solevo-clist__more a::after { content: " \2192"; } /* 1.4.0: visually hidden text for screen readers (Read more links name their condition) */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } /* 1.4.2: the two-column What we treat panel opens to the right of its item, so it no longer runs off the left of the screen */ @media (min-width: 1200px) { .solevo-primary-nav .solevo-mega--2col > .wp-block-navigation__submenu-container { left: 0 !important; right: auto !important; } } /* 1.4.2: the logo keeps its 140px width; longer menu labels no longer squeeze it */ .solevo-header__bar > .wp-block-site-logo, .solevo-header__bar > .solevo-logo { flex-shrink: 0; } .solevo-logo img { min-width: 140px; } /* 1.4.4: titles with a controlled line break use the full text column; the second line never wraps */ .solevo-nowrap { white-space: nowrap; } .solevo-hero2__title:has(.solevo-nowrap) { max-width: none !important; } @media (max-width: 600px) { .solevo-nowrap { white-space: normal; } } /* 1.4.4: "Your first appointment" and the numbered "Why" cards fill the full width when a page has 2 or 3 items instead of 4 */ @media (min-width: 1024px) { .solevo-first__grid:has(> :nth-child(3):last-child), .solevo-why4:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .solevo-first__grid:has(> :nth-child(2):last-child), .solevo-why4:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 1.4.5: phones. The 140px logo floor (1.4.2) is for desktop only; on small screens the logo goes back to 112px and, below 420px, the header Call button hides (Call is in the bottom bar and the menu), so nothing overflows */ @media (max-width: 600px) { .solevo-logo img { min-width: 0; width: 112px; } } @media (max-width: 420px) { .solevo-header__call { display: none !important; } } /* 1.4.5: mobile menu. Left-aligned list with the three groups as small headings, no desktop dropdown boxes */ @media (max-width: 1199px) { .solevo-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .solevo-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .solevo-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; text-align: left; } .solevo-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.75rem !important; } .solevo-primary-nav .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; padding: .4rem 0 0 !important; box-shadow: none !important; background: none !important; min-width: 0 !important; border-radius: 0 !important; display: flex !important; flex-direction: column; gap: .1rem; } .solevo-primary-nav .is-menu-open .solevo-mega > .wp-block-navigation-item__content { font-size: var(--fs-label) !important; letter-spacing: .18em !important; text-transform: uppercase; color: var(--ds-olive-text); font-weight: 600; } .solevo-primary-nav .is-menu-open .solevo-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: var(--fs-lead) !important; padding: .4rem 0 !important; letter-spacing: 0 !important; text-transform: none; } .solevo-primary-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none; } /* 1.4.17: Blog (a plain link, no dropdown) uses the same small olive label as the section headings in the mobile menu */ .solevo-primary-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-link > .wp-block-navigation-item__content { font-size: var(--fs-label) !important; letter-spacing: .18em !important; text-transform: uppercase; color: var(--ds-olive-text); font-weight: 600; } /* 1.4.18: room under the last menu item so it scrolls clear of the fixed Book Physio / Call bar */ .solevo-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-bottom: 6rem !important; } } /* ========================================================= 1.4.13: Blog (/blog index, posts, category archives) ========================================================= */ .solevo-blog__head { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.25rem); } .solevo-bhero { max-width: 760px; } .solevo-bhero > * { margin-block: 0; } .solevo-ds .solevo-bhero h1.wp-block-heading { margin-bottom: 1rem; } .solevo-bhero__lead { font-size: var(--fs-lead); color: var(--ds-text); max-width: 60ch; } .solevo-blog__list { padding-bottom: var(--ds-y); } /* Article cards: index, archives and "More from the blog" */ .solevo-bcards, .wp-block-post-template.solevo-bcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-gap); list-style: none; padding: 0; margin: 0; } .solevo-bcards > li { margin: 0 !important; display: flex; } .solevo-bcard { background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); overflow: hidden; display: flex; flex-direction: column; width: 100%; transition: border-color .2s, box-shadow .2s; } .solevo-bcard:hover { border-color: #CFC6B4; box-shadow: var(--ds-shadow); } .solevo-bcard > * { margin-block: 0 !important; } .solevo-bcard__img { margin: 0 !important; display: block; } .solevo-bcard__img img, .solevo-bcard__img a { display: block; width: 100%; } .solevo-bcard__img img { aspect-ratio: 3 / 2; object-fit: cover; } .solevo-bcard__body { padding: 1.2rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; } .solevo-bcard__body > * { margin: 0 !important; } .solevo-bcard__date { font-size: var(--fs-label) !important; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ds-olive-text); } .solevo-ds .solevo-bcard__title, .solevo-ds .solevo-bcard__title.wp-block-post-title { font-family: var(--s-serif); font-size: var(--fs-card) !important; font-weight: 600; line-height: 1.22; color: var(--ds-ink); } .solevo-ds .solevo-bcard__title a { color: inherit; text-decoration: none; } .solevo-ds .solevo-bcard__title a:hover { color: var(--ds-olive-text); text-decoration: underline; } .solevo-bcard__excerpt, .solevo-bcard__excerpt p { font-size: var(--fs-small); color: var(--ds-soft); line-height: 1.55; margin: 0; } .solevo-ds .solevo-bcard__more { margin-top: auto !important; padding-top: .35rem; font-size: var(--fs-button); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ds-olive-text); } .solevo-ds .solevo-bcard__more:hover { color: var(--ds-ink); text-decoration: underline; } .solevo-pager { margin-top: 2.25rem !important; gap: .75rem; font-size: var(--fs-small); } .solevo-pager .page-numbers.current { font-weight: 600; color: var(--ds-ink); } @media (max-width: 1023px) { .solevo-bcards, .wp-block-post-template.solevo-bcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .solevo-bcards, .wp-block-post-template.solevo-bcards { grid-template-columns: 1fr; } } /* Single post */ .solevo-article { max-width: 760px; margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.5rem) 16px var(--ds-y); box-sizing: content-box; } .solevo-article > * { margin-block: 0; } .solevo-pmeta { font-size: var(--fs-label) !important; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ds-olive-text); margin: 0 0 .9rem !important; } .solevo-pmeta a { text-decoration: none; } .solevo-pmeta > * { white-space: nowrap; } /* 1.4.15: the separators may wrap, so the meta line breaks on phones instead of running off the screen. */ .solevo-pmeta > [aria-hidden] { white-space: normal; } .solevo-ds h1.solevo-article__title { font-size: var(--fs-h1); font-weight: 600; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 1rem; } .solevo-plead { font-size: var(--fs-lead); color: var(--ds-text); margin: 0 !important; max-width: 60ch; } .solevo-article__img { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0 !important; } .solevo-article__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ds-radius); display: block; } .solevo-article__body { margin-top: clamp(1.5rem, 3vw, 2.25rem) !important; } .solevo-article__body > * { margin-block: 0 0 1.1rem; } .solevo-article__body p, .solevo-article__body li { font-size: var(--fs-body); line-height: 1.75; } .solevo-ds .solevo-article__body h2.wp-block-heading { font-size: var(--fs-h3); margin: 2.25rem 0 .75rem; } .solevo-ds .solevo-article__body h3.wp-block-heading { font-size: var(--fs-card); margin: 1.75rem 0 .5rem; } .solevo-article__body ul { padding-left: 1.2rem; } .solevo-article__body li { margin-bottom: .55rem; } .solevo-article__body li::marker { color: var(--ds-olive); } .solevo-article__body .solevo-tipbox { background: var(--ds-card); border: 1px solid var(--ds-line); border-left: 3px solid var(--ds-olive); border-radius: var(--ds-radius); padding: 1.25rem 1.5rem; margin: 1.75rem 0; } .solevo-article__body .solevo-tipbox > * { margin: 0 0 .6rem; } .solevo-article__body .solevo-tipbox > *:last-child { margin-bottom: 0; } .solevo-ds .solevo-article__body .solevo-tipbox h2.wp-block-heading { margin-top: 0; } .solevo-article__body .solevo-download { font-size: var(--fs-small); } .solevo-article__body .solevo-download a::before { content: "↓ "; } /* "Your physio" box under each post */ .solevo-pbox { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 2.5rem !important; padding: 1.5rem; background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); } .solevo-pbox__img { width: 112px; height: 112px; object-fit: cover; object-position: center 20%; border-radius: 50%; display: block; } .solevo-pbox__text > * { margin: 0 0 .6rem !important; } .solevo-pbox__text > *:last-child { margin-bottom: 0 !important; } .solevo-pbox__name { font-family: var(--s-serif); font-size: var(--fs-h3) !important; font-weight: 600; color: var(--ds-ink); line-height: 1.2; } .solevo-pbox .wp-block-buttons { display: flex; flex-wrap: wrap; margin-top: 1rem !important; } @media (max-width: 599px) { .solevo-pbox { grid-template-columns: 1fr; } .solevo-pbox__img { width: 88px; height: 88px; } } /* More from the blog */ .solevo-related-posts { background: var(--s-cream); border-top: 1px solid var(--ds-line); padding: var(--ds-y) 16px; } .solevo-related-posts__inner { max-width: 1152px; margin: 0 auto; } .solevo-ds .solevo-related-posts h2.wp-block-heading { margin: 0 0 1.75rem; } .solevo-related-posts .solevo-more { margin-top: 1.5rem !important; }