@charset "UTF-8";
 :root {
--color-primary: #0073aa;
--color-light-gray: #666;
--color-border: #eee;
--color-background-light: #f8f9fa;
--color-white: #fff;
--font-family-base: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--line-height-body: 1.5;
--line-height-tight: 1.1;
--line-height-medium: 1.2;
--line-height-comfortable: 1.3;
--max-width: 1440px;
--padding-base: 1rem;
--padding-large: 2rem;
--color--brand-primary: #35409a;
--color--brand-secondary: #00c89f;
--color--surface: #fff;
--color--text: #333;
--border-accent: 4px solid #00c89f;
--shadow-inset-dark: inset 0 0 35px rgba(0, 0, 0, 0.65);
} *,
*::before,
*::after {
box-sizing: border-box;
} html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
} body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin-block-end: 0;
} ul[role=list],
ol[role=list] {
list-style: none;
} body {
min-height: 100vh;
line-height: 1.5;
font-family: var(--font-family-base);
background-color: var(--color--surface);
color: var(--color--text);
} h1, h2, h3,
button, input, label {
line-height: 1.1;
} h1, h2,
h3 {
text-wrap: balance;
} a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
} img,
picture {
max-width: 100%;
display: block;
} input, button,
textarea, select {
font-family: inherit;
font-size: inherit;
} textarea:not([rows]) {
min-height: 10em;
} :target {
scroll-margin-block: 5ex;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: var(--color-background-light);
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: var(--color--text);
display: block;
font-size: 0.875rem;
font-weight: 500;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
[class*=is-style-bg-] {
background-color: var(--theme-bg, var(--wp--preset--color--tone-20));
color: var(--theme-text, var(--color--text));
--theme-accent: var(--theme-text, var(--color--brand-secondary));
background-size: var(--bg-size, cover);
background-repeat: var(--bg-repeat, no-repeat);
background-attachment: var(--bg-attachment, fixed);
background-position: var(--bg-position, center);
background-blend-mode: var(--bg-blend-mode, normal);
}
.is-style-bg-feature {
--theme-bg: var(--color--brand-primary);
--theme-text: #fff;
--theme-accent: var(--theme-text);
background-image: url(//www.fwmedical.co.uk/wp-content/themes/fw-medical-blocks/assets/images/bg-feature.jpg);
background-position: center top;
border-top: var(--border-accent);
border-width: var(--panel-border-width, 4px 0 0 0);
box-shadow: var(--shadow-inset-dark);
will-change: background-position;
--filter-invert: brightness(0) invert(1);
}
.is-style-bg-graph {
background-image: url(//www.fwmedical.co.uk/wp-content/themes/fw-medical-blocks/assets/images/bg-graph.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
position: relative;
}
.is-style-bg-graph::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.15) 100%);
z-index: 1;
}
.is-style-bg-graph > * {
position: relative;
z-index: 2;
}
.is-style-section-container {
padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
}
.is-style-section-container > .alignwide,
.is-style-section-container > .alignfull {
padding-left: 0;
padding-right: 0;
}
.has-text-narrow {
max-width: var(--container-max-narrow);
text-wrap: balance;
}
.has-text-narrower {
max-width: var(--container-max-narrower);
text-wrap: balance;
}
.has-text-narrowest {
max-width: var(--container-max-narrowest);
text-wrap: balance;
}
strong {
font-weight: 500;
}
.has-text-align-center > *:not(.has-text-align-left):not(.has-text-align-right) {
text-wrap: balance;
}
.site-header,
.site-footer {
margin-top: 0;
}
.site-header {
position: fixed;
inset: 0 0 auto;
z-index: 100;
--panel-border-width: 0;
background-image: none;
}
.site-header > * {
transition: background-image 0.3s ease, border-bottom-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header > * .site-title {
transition: opacity 0.3s ease;
}
.site-header > * a {
transition: text-shadow 0.3s ease, font-size 0.3s ease;
}
.site-header:not(.scrolled)::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4em;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.35) 25%, rgba(255, 255, 255, 0) 80%);
}
.site-header:not(.scrolled) > * {
background: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
}
.site-header:not(.scrolled) > * .site-title {
opacity: 0;
}
.site-header:not(.scrolled) > * a {
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
@media screen and (min-width: 1024px) {
.site-header:not(.scrolled) > * a {
font-size: var(--wp--preset--font-size--large) !important;
}
}
.site-footer {
text-align: center;
}
@media screen and (max-width: 767px) {
.site-footer nav {
flex-grow: 1;
}
}
.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
margin-right: -1.25rem;
}
.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open svg {
width: 2rem;
height: 2rem;
}
@media screen and (max-width: 767px) {
.wp-block-navigation__responsive-container {
font-size: var(--wp--preset--font-size--large) !important;
background-color: var(--wp--preset--color--brand-primary) !important;
color: var(--wp--preset--color--white) !important;
--navigation-layout-justification-setting: center;
}
}   body .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: block !important;
}
body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none !important;
}   @media (min-width: 768px) { body .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: none !important;
} body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: block !important;
}
}
:root {
--container-padding: 2rem;
--container-max-standard: 960px;
--container-max-wide: 1440px;
--container-max-narrow: 48rem;
--container-max-narrower: 40rem;
--container-max-narrowest: 32rem;
}
.section-inner-narrow, .section-inner-wider,
.alignwide, .section-inner {
margin: 0 auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
box-sizing: border-box;
}
.section-inner {
max-width: var(--container-max-standard);
}
.section-inner-wider,
.alignwide {
max-width: var(--container-max-wide);
}
.section-inner-narrow {
max-width: var(--container-max-narrow);
}
:root { --panel-bg: linear-gradient(
180deg,
rgba(255, 255, 255, 0.7) 0%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.15) 100%
);
--panel-blur: 20px;
--panel-border-radius: 0 0 12px 12px;
--panel-padding: 3rem;
--panel-border: 1px solid rgba(255, 255, 255, 0.3);
--panel-border-accent: 4px solid #00c89f;
--panel-border-width: 4px 0 0 0;
--panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
--panel-parallax-multiplier: -1.5;
--panel-margin-parallax-multiplier: -1.65;
}
.panel {
background: var(--panel-bg);
padding: var(--panel-padding);
border-radius: var(--panel-border-radius);
border: var(--panel-border-accent);
border-width: var(--panel-border-width);
box-shadow: var(--panel-shadow);
backdrop-filter: blur(var(--panel-blur));
-webkit-backdrop-filter: blur(var(--panel-blur));
transform: translateY(calc(var(--element-parallax-offset) * var(--panel-parallax-multiplier)));
margin-bottom: calc(var(--element-parallax-offset) * var(--panel-margin-parallax-multiplier));
will-change: transform;
}   .panel--soft {
--panel-blur: 12px;
--panel-shadow: 0 4px 18px rgba(0,0,0,0.08);
} .panel--heavy {
--panel-bg: linear-gradient(
180deg,
rgba(255,255,255,0.85) 0%,
rgba(255,255,255,0.9) 50%,
rgba(255,255,255,0.25) 100%
);
--panel-blur: 28px;
} .panel--static {
--panel-parallax-multiplier: 0;
--panel-margin-parallax-multiplier: 0;
transform: none;
margin-bottom: 0;
} @media (max-width: 768px) {
.panel {
--panel-padding: 2rem;
}
}
.panel--is-card {
--panel-padding: 2rem;
}
.panel--is-card-horizontal:nth-child(odd) {
--panel-border-radius: 0 12px 12px 0;
--panel-border-width: 0 0 0 4px;
}
.panel--is-card-horizontal:nth-child(even) {
--panel-border-radius: 12px 0 0 12px;
--panel-border-width: 0 4px 0 0;
}
.panel--is-card-horizontal:nth-child(even) figure {
order: 2;
} .is-vertically-aligned-stretch > .panel--is-card {
height: 100%;
} .panel--is-card-horizontal {
display: flex;
flex-direction: row;
gap: 2rem;
align-items: flex-start; }
.panel--is-card-horizontal > .wp-block-image,
.panel--is-card-horizontal > img {
flex: 0 0 300px;
max-width: 300px;
margin: 0;
}
.panel--is-card-horizontal > .wp-block-image img,
.panel--is-card-horizontal > img img {
width: 100%;
height: auto;
object-fit: cover;
}
.panel--is-card-horizontal { }
.panel--is-card-horizontal > .wp-block-group {
flex: 1;
text-align: left;
} @media (max-width: 768px) {
.panel--is-card-horizontal {
flex-direction: column;
}
.panel--is-card-horizontal > .wp-block-image,
.panel--is-card-horizontal > img {
flex: 0 0 auto;
max-width: 100%;
}
} .wp-block-button__link {
transition: all 0.3s ease;
} .wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
background-color: #009980 !important;
border-color: #009980 !important;
} .wp-block-button.is-style-outline .wp-block-button__link {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
} .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
background-color: var(--wp--preset--color--brand-secondary) !important;
color: var(--wp--preset--color--white) !important;
border-color: var(--wp--preset--color--brand-secondary) !important;
} .wp-block-button.is-style-link .wp-block-button__link {
display: flex;
}
.wp-block-button.is-style-link .wp-block-button__link::after {
content: "";
display: inline-flex;
width: 1.25em;
height: 1.25em;
margin-left: 0.25rem;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg>');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: transform 0.3s ease;
} .wp-block-button.is-style-link .wp-block-button__link:hover,
.wp-block-button.is-style-link .wp-block-button__link:focus {
color: var(--wp--preset--color--brand-secondary) !important;
background-color: transparent !important;
border-color: transparent !important;
}
.wp-block-button.is-style-link .wp-block-button__link:hover::after,
.wp-block-button.is-style-link .wp-block-button__link:focus::after {
transform: translateX(4px);
} .wp-block-button.is-style-link .wp-block-button__link[target=_blank]::after {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg>');
} .icon {
--icon-color: var(--theme-accent, var(--color--brand-secondary));
width: var(--icon-size, 2em);
aspect-ratio: 1/1;
background-color: color-mix(in srgb, var(--icon-color) 15%, transparent);
border-radius: var(--icon-radius, 50%);
display: flex;
align-items: center;
justify-content: center;
color: var(--icon-color);
flex-shrink: 0;
}
.icon > * {
width: 50%;
height: 50%;
fill: currentColor;
stroke: currentColor;
}
.icon { }
.icon--small {
--icon-size: 3rem;
}
.icon--medium {
--icon-size: 4rem;
}
.icon--large {
--icon-size: 6rem;
}
.brand-logo {
display: block;
height: auto;
filter: var(--filter-invert, none);
}
.brand-logo--icon {
width: clamp(2.5rem, 4vw, 4rem);
}
.brand-logo--small {
width: clamp(5rem, 8vw, 8rem);
}
.brand-logo--medium {
width: clamp(7rem, 12vw, 12rem);
}
.brand-logo--large {
width: clamp(9rem, 16vw, 16rem);
}
.contact-form__title {
color: white;
margin-bottom: 2rem;
font-size: var(--wp--preset--font-size--x-large);
margin-top: 0;
}
.contact-form__success {
background: rgba(0, 200, 159, 0.2);
border: 2px solid var(--wp--preset--color--brand-secondary);
border-radius: 4px;
padding: 1rem;
margin-bottom: 1rem;
color: white;
text-align: center;
}
.contact-form__form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-form__row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.contact-form__group {
flex: 1;
display: flex;
flex-direction: column;
}
.contact-form__group label {
color: white;
margin-bottom: 0.5rem;
}
.contact-form__group input,
.contact-form__group textarea {
padding: 0.75rem 1rem;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
color: white;
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.contact-form__group input::placeholder,
.contact-form__group textarea::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.contact-form__group input:focus,
.contact-form__group textarea:focus {
outline: none;
border-color: var(--wp--preset--color--brand-secondary);
background: rgba(255, 255, 255, 0.15);
}
.contact-form__submit {
margin-top: 1rem;
align-self: flex-start;
}
@media (max-width: 768px) {
.contact-form__row {
flex-direction: column;
gap: 1rem;
}
.contact-form__submit {
width: 100%;
align-self: stretch;
}
}
.hero {
--hero-mask-gradient: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) max(200px, 40vw), transparent min(720px + 40vw, 140%));
position: relative;
overflow: hidden;
--panel-border-width: 0;
}
.hero[style*=background-image]::before {
content: "";
position: absolute !important;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background-image: url(//www.fwmedical.co.uk/wp-content/themes/fw-medical-blocks/assets/images/bg-feature.jpg) !important;
background-position: center top;
box-shadow: var(--shadow-inset-dark);
}
.hero.is-faded {
background-position: right center;
}
.hero.is-faded[style*=background-image]::before {
mask-image: var(--hero-mask-gradient);
-webkit-mask-image: var(--hero-mask-gradient);
}
.contact-panel__menus {
padding: 4rem 0 2rem;
overflow: hidden;
position: relative;
}
.contact-panel__inner {
display: flex;
gap: 6rem;
align-items: flex-start;
}
.contact-panel__inner .wp-block-columns {
margin-bottom: 0;
}
.contact-panel__columns {
gap: 6rem;
}
.contact-panel__form-area {
flex: 1;
}
.contact-panel__contact {
flex: none;
width: 22rem;
}
.contact-panel__item {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
align-items: flex-start;
}
.contact-panel__item .icon {
--icon-size: 3rem;
}
.contact-panel__info h4 {
color: white;
margin-bottom: 0.5rem;
}
.contact-panel__info p,
.contact-panel__info a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
}
.contact-panel__info p:hover,
.contact-panel__info a:hover {
color: var(--wp--preset--color--brand-secondary);
}
.contact-panel__site-info {
background: rgba(0, 0, 0, 0.3);
padding: 2rem 0;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.contact-panel__site-info-copyright {
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
.contact-panel__site-info-copyright a {
color: white;
text-decoration: none;
}
.contact-panel__site-info-copyright a:hover {
color: var(--wp--preset--color--brand-secondary);
}
.contact-panel__site-info-nav {
margin-top: 1rem;
}
.contact-panel__site-info-nav .wp-block-navigation__container {
gap: 2rem;
}
.contact-panel__site-info-nav a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.contact-panel__site-info-nav a:hover {
color: var(--wp--preset--color--brand-secondary);
}
@media (max-width: 768px) {
.contact-panel__inner {
flex-direction: column;
gap: 3rem;
padding: 0 1.5rem;
}
.contact-panel__columns {
flex-direction: column;
gap: 3rem;
}
.contact-panel__contact {
width: 100%;
}
.contact-panel__site-info-copyright {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.contact-panel__site-info-nav .wp-block-navigation__container {
flex-direction: column;
gap: 1rem;
}
}