:root { --mv2-gutter-inline: clamp(30px, 5vw, 60px); --mv2-gutter-block: clamp(40px, 6vw, 80px); --mv2-gutter-top: var(--mv2-gutter-block); --mv2-gutter-bottom: var(--mv2-gutter-block); --mv2-margin-block: 0; --mv2-content-max-width: 1200px; --mv2-breakout-max-width: 1400px; --mv2-breakout-size: minmax(0, calc((var(--mv2-breakout-max-width) - var(--mv2-content-max-width)) / 2)); --mv2-content-size: min(100% - (var(--mv2-gutter-inline) * 2), var(--mv2-content-max-width)); --mv2-content-size--half: calc(var(--mv2-content-size) / 2); --mv2-cols--mobile: [full-start] var(--mv2-gutter-inline) [gutter-start breakout-start content-start content-col-1-start content-col-2-start ] auto [content-col-1-end content-col-2-end content-end breakout-end gutter-end] var(--mv2-gutter-inline) [full-end]; --mv2-rows--mobile: [full-start] minmax(var(--mv2-gutter-top), auto) [gutter-start breakout-start content-start content-col-1-start] auto [content-col-1-end content-col-2-start ] auto [content-col-2-end content-end breakout-end gutter-end] minmax(var(--mv2-gutter-bottom), auto) [full-end]; --mv2-cols: [full-start] var(--mv2-gutter-inline) [gutter-start] auto [breakout-start] var(--mv2-breakout-size) [content-start content-col-1-start] var(--mv2-content-size--half) [content-col-1-end content-col-2-start ] var(--mv2-content-size--half) [content-col-2-end content-end] var(--mv2-breakout-size) [breakout-end] auto [gutter-end] var(--mv2-gutter-inline) [full-end]; --mv2-rows: [full-start] minmax(var(--mv2-gutter-top), auto) [gutter-start breakout-start content-start content-col-1-start content-col-2-start ] auto [content-col-1-end content-col-2-end content-end breakout-end gutter-end] minmax(var(--mv2-gutter-bottom), auto) [full-end]; /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* HS Branding Values */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ --hs-primary: #003B9F; --hs-primary--text-over: #FFFFFF; --hs-primary--light: #6B7993; /*;*/ --hs-primary--dark: #384660; /*;*/ --hs-primary--5pc: rgba(0, 59, 159, 0.05); --hs-primary--10pc: rgba(0, 59, 159, 0.1); --hs-primary--15pc: rgba(0, 59, 159, 0.15); --hs-primary--20pc: rgba(0, 59, 159, 0.2); --hs-primary--25pc: rgba(0, 59, 159, 0.25); --hs-primary--30pc: rgba(0, 59, 159, 0.3); --hs-primary--35pc: rgba(0, 59, 159, 0.35); --hs-primary--40pc: rgba(0, 59, 159, 0.4); --hs-primary--45pc: rgba(0, 59, 159, 0.45); --hs-primary--50pc: rgba(0, 59, 159, 0.5); --hs-primary--55pc: rgba(0, 59, 159, 0.55); --hs-primary--60pc: rgba(0, 59, 159, 0.6); --hs-primary--65pc: rgba(0, 59, 159, 0.65); --hs-primary--70pc: rgba(0, 59, 159, 0.7); --hs-primary--75pc: rgba(0, 59, 159, 0.75); --hs-primary--80pc: rgba(0, 59, 159, 0.8); --hs-primary--85pc: rgba(0, 59, 159, 0.85); --hs-primary--90pc: rgba(0, 59, 159, 0.9); --hs-primary--95pc: rgba(0, 59, 159, 0.95); --hs-secondary: #2ABDC7; --hs-secondary--text-over: #FFFFFF; --hs-secondary--light: #EBC564; /*;*/ --hs-secondary--dark: #B89231; /*;*/ --hs-secondary--5pc: rgba(42, 189, 199, 0.05); --hs-secondary--10pc: rgba(42, 189, 199, 0.1); --hs-secondary--15pc: rgba(42, 189, 199, 0.15); --hs-secondary--20pc: rgba(42, 189, 199, 0.2); --hs-secondary--25pc: rgba(42, 189, 199, 0.25); --hs-secondary--30pc: rgba(42, 189, 199, 0.3); --hs-secondary--35pc: rgba(42, 189, 199, 0.35); --hs-secondary--40pc: rgba(42, 189, 199, 0.4); --hs-secondary--45pc: rgba(42, 189, 199, 0.45); --hs-secondary--50pc: rgba(42, 189, 199, 0.5); --hs-secondary--55pc: rgba(42, 189, 199, 0.55); --hs-secondary--60pc: rgba(42, 189, 199, 0.6); --hs-secondary--65pc: rgba(42, 189, 199, 0.65); --hs-secondary--70pc: rgba(42, 189, 199, 0.7); --hs-secondary--75pc: rgba(42, 189, 199, 0.75); --hs-secondary--80pc: rgba(42, 189, 199, 0.8); --hs-secondary--85pc: rgba(42, 189, 199, 0.85); --hs-secondary--90pc: rgba(42, 189, 199, 0.9); --hs-secondary--95pc: rgba(42, 189, 199, 0.95); --hs-tertiary: #EB6A62; --hs-tertiary--text-over: #EB6A62; --hs-tertiary--light: ; --hs-tertiary--dark: ; --hs-tertiary--5pc: rgba(235, 106, 98, 0.05); --hs-tertiary--10pc: rgba(235, 106, 98, 0.1); --hs-tertiary--15pc: rgba(235, 106, 98, 0.15); --hs-tertiary--20pc: rgba(235, 106, 98, 0.2); --hs-tertiary--25pc: rgba(235, 106, 98, 0.25); --hs-tertiary--30pc: rgba(235, 106, 98, 0.3); --hs-tertiary--35pc: rgba(235, 106, 98, 0.35); --hs-tertiary--40pc: rgba(235, 106, 98, 0.4); --hs-tertiary--45pc: rgba(235, 106, 98, 0.45); --hs-tertiary--50pc: rgba(235, 106, 98, 0.5); --hs-tertiary--55pc: rgba(235, 106, 98, 0.55); --hs-tertiary--60pc: rgba(235, 106, 98, 0.6); --hs-tertiary--65pc: rgba(235, 106, 98, 0.65); --hs-tertiary--70pc: rgba(235, 106, 98, 0.7); --hs-tertiary--75pc: rgba(235, 106, 98, 0.75); --hs-tertiary--80pc: rgba(235, 106, 98, 0.8); --hs-tertiary--85pc: rgba(235, 106, 98, 0.85); --hs-tertiary--90pc: rgba(235, 106, 98, 0.9); --hs-tertiary--95pc: rgba(235, 106, 98, 0.95); --hs-accent-1: #FEC009; --hs-accent-2: #EB6A62; --hs-accent-3: #F5F6F9; --hs-accent-4: #BEC1C1; --hs-accent-4--dark: #D1D5DD; --hs-accent-1--5pc: rgba(254, 192, 9, 0.05); --hs-accent-1--10pc: rgba(254, 192, 9, 0.1); --hs-accent-1--15pc: rgba(254, 192, 9, 0.15); --hs-accent-1--20pc: rgba(254, 192, 9, 0.2); --hs-accent-1--25pc: rgba(254, 192, 9, 0.25); --hs-accent-1--30pc: rgba(254, 192, 9, 0.3); --hs-accent-1--35pc: rgba(254, 192, 9, 0.35); --hs-accent-1--40pc: rgba(254, 192, 9, 0.4); --hs-accent-1--45pc: rgba(254, 192, 9, 0.45); --hs-accent-1--50pc: rgba(254, 192, 9, 0.5); --hs-accent-1--55pc: rgba(254, 192, 9, 0.55); --hs-accent-1--60pc: rgba(254, 192, 9, 0.6); --hs-accent-1--65pc: rgba(254, 192, 9, 0.65); --hs-accent-1--70pc: rgba(254, 192, 9, 0.7); --hs-accent-1--75pc: rgba(254, 192, 9, 0.75); --hs-accent-1--80pc: rgba(254, 192, 9, 0.8); --hs-accent-1--85pc: rgba(254, 192, 9, 0.85); --hs-accent-1--90pc: rgba(254, 192, 9, 0.9); --hs-accent-1--95pc: rgba(254, 192, 9, 0.95); --hs-accent-2--5pc: rgba(235, 106, 98, 0.05); --hs-accent-2--10pc: rgba(235, 106, 98, 0.1); --hs-accent-2--15pc: rgba(235, 106, 98, 0.15); --hs-accent-2--20pc: rgba(235, 106, 98, 0.2); --hs-accent-2--25pc: rgba(235, 106, 98, 0.25); --hs-accent-2--30pc: rgba(235, 106, 98, 0.3); --hs-accent-2--35pc: rgba(235, 106, 98, 0.35); --hs-accent-2--40pc: rgba(235, 106, 98, 0.4); --hs-accent-2--45pc: rgba(235, 106, 98, 0.45); --hs-accent-2--50pc: rgba(235, 106, 98, 0.5); --hs-accent-2--55pc: rgba(235, 106, 98, 0.55); --hs-accent-2--60pc: rgba(235, 106, 98, 0.6); --hs-accent-2--65pc: rgba(235, 106, 98, 0.65); --hs-accent-2--70pc: rgba(235, 106, 98, 0.7); --hs-accent-2--75pc: rgba(235, 106, 98, 0.75); --hs-accent-2--80pc: rgba(235, 106, 98, 0.8); --hs-accent-2--85pc: rgba(235, 106, 98, 0.85); --hs-accent-2--90pc: rgba(235, 106, 98, 0.9); --hs-accent-2--95pc: rgba(235, 106, 98, 0.95); --hs-accent-3--5pc: rgba(245, 246, 249, 0.05); --hs-accent-3--10pc: rgba(245, 246, 249, 0.1); --hs-accent-3--15pc: rgba(245, 246, 249, 0.15); --hs-accent-3--20pc: rgba(245, 246, 249, 0.2); --hs-accent-3--25pc: rgba(245, 246, 249, 0.25); --hs-accent-3--30pc: rgba(245, 246, 249, 0.3); --hs-accent-3--35pc: rgba(245, 246, 249, 0.35); --hs-accent-3--40pc: rgba(245, 246, 249, 0.4); --hs-accent-3--45pc: rgba(245, 246, 249, 0.45); --hs-accent-3--50pc: rgba(245, 246, 249, 0.5); --hs-accent-3--55pc: rgba(245, 246, 249, 0.55); --hs-accent-3--60pc: rgba(245, 246, 249, 0.6); --hs-accent-3--65pc: rgba(245, 246, 249, 0.65); --hs-accent-3--70pc: rgba(245, 246, 249, 0.7); --hs-accent-3--75pc: rgba(245, 246, 249, 0.75); --hs-accent-3--80pc: rgba(245, 246, 249, 0.8); --hs-accent-3--85pc: rgba(245, 246, 249, 0.85); --hs-accent-3--90pc: rgba(245, 246, 249, 0.9); --hs-accent-3--95pc: rgba(245, 246, 249, 0.95); --hs-accent-4--5pc: rgba(190, 193, 193, 0.05); --hs-accent-4--10pc: rgba(190, 193, 193, 0.1); --hs-accent-4--15pc: rgba(190, 193, 193, 0.15); --hs-accent-4--20pc: rgba(190, 193, 193, 0.2); --hs-accent-4--25pc: rgba(190, 193, 193, 0.25); --hs-accent-4--30pc: rgba(190, 193, 193, 0.3); --hs-accent-4--35pc: rgba(190, 193, 193, 0.35); --hs-accent-4--40pc: rgba(190, 193, 193, 0.4); --hs-accent-4--45pc: rgba(190, 193, 193, 0.45); --hs-accent-4--50pc: rgba(190, 193, 193, 0.5); --hs-accent-4--55pc: rgba(190, 193, 193, 0.55); --hs-accent-4--60pc: rgba(190, 193, 193, 0.6); --hs-accent-4--65pc: rgba(190, 193, 193, 0.65); --hs-accent-4--70pc: rgba(190, 193, 193, 0.7); --hs-accent-4--75pc: rgba(190, 193, 193, 0.75); --hs-accent-4--80pc: rgba(190, 193, 193, 0.8); --hs-accent-4--85pc: rgba(190, 193, 193, 0.85); --hs-accent-4--90pc: rgba(190, 193, 193, 0.9); --hs-accent-4--95pc: rgba(190, 193, 193, 0.95); --hs-black: #000000; --hs-white: #FFFFFF; --hs-light: var(--hs-white); --hs-dark: var(--hs-black); /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* Padding Values */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ --global-trans: 300ms; --max-width: 1240px; --window-padding--inline: clamp(30px , 3vw, 100px ); --module-padding--block: clamp(30px, 3vw, 80px); --module-full-gutter: clamp(20px , 3vw, px ); /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* TYPOGRAPHY theme variables */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* Base text */ --text-color-primary: #243030; --text-color-secondary: #243030; --text-color-muted: var(--hs-primary--light); /*;*/ /* Base links */ --link-color: var(--text-color-primary); --link-color-hover: var(--text-color-primary); --link-color-visited: var(--text-color-primary); /* Base font families */ --font-family-base: Montserrat, sans-serif, sans-serif; --font-family-heading: Montserrat, sans-serif, sans-serif; --font-family-monospace: 'DM Mono', serif, monospace; /* Base font size */ --font-size-base: clamp(16px, 1.5vw, 18px); --font-size-xxsm: 0.625em; --font-size-xsm: 0.75em; --font-size-sm: 0.875em; --font-size-lg: 1.125em; --heading-color: var(--hs-primary); /* mv2SubTitle */ --pre-title-color: inherit; --pre-title-size: 1.125em; --pre-title-weight: 600; --pre-title-line-height: 1.1; /* mv2Title */ --title-color: inherit; /* mv2PreTitle */ --sub-title-color: inherit; --sub-title-size: 1.125em; --sub-title-weight: 600; --sub-title-line-height: 1.1; /* mv2RichText */ --richtext-color: inherit; --richtext-size: inherit; --richtext-weight: 400; /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* RADIUS variables */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ --global-radius: clamp(1rem, 2vw, 2rem); --global-radius-xl: 48px; --global-radius-lg: 32px; --global-radius-md: 16px; --global-radius-sm: 8px; --global-image-radius: var(--global-radius); --box-shadow: 0px 0px 40px -20px rgba(70, 87, 120, 0.8); --box-shadow-hov: 0px 0px 20px -40px rgba(70, 87, 120, 1); /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* ATOM variables */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ --atom-tiny-gap: 0.25rem; --atom-small-gap: 0.5rem; --atom-standard-gap: 0.75rem; --atom-large-gap: 1rem; --atom-largest-gap: 1.25rem; /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* MOLECULE variables */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ --molecule-tiny-gap: 1rem; --molecule-small-gap: 1.5rem; --molecule-standard-gap: clamp(20px, 4vw, 40px); --molecule-large-gap: 2.5rem; /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* ORGANISM variables */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ --organism-tiny-gap: clamp(20px, 4vw, 40px); --organism-small-gap: clamp(30px, 5vw, 60px); --organism-standard-gap: clamp(40px, 6vw, 80px); --organism-large-gap: clamp(50px, 7vw, 1000px); /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* BUTTON theme variables */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ --button-group-gap: 0.75em 1.5em; --button-border-radius: var(--global-radius-xl); --button-padding: 0.75rem 1.25em; --button-font-size: 1rem; --button-font-weight: 600; --button-line-height: 1.2; --button-transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; --button-border-width: 2px; /* Hollow button properties */ --button-hollow-border-width: 2px; /* Primary button colors */ --button-primary-bg: #003B9F; --button-primary-text: #FFFFFF; --button-primary-bg-hover: #2ABDC7; --button-primary-text-hover: #FFFFFF; --button-primary-border: var(--button-primary-bg); /* Secondary button colors */ --button-secondary-bg: #2ABDC7; --button-secondary-text: #FFFFFF; --button-secondary-bg-hover: #1CA28A; --button-secondary-text-hover: #FFFFFF; --button-secondary-border: var(--button-secondary-bg); /* Tertiary button colors */ --button-tertiary-bg: #EB6A62; --button-tertiary-text: #FFFFFF; --button-tertiary-bg-hover: #FC8302; --button-tertiary-text-hover: #FFFFFF; --button-tertiary-border: var(--button-tertiary-bg); /* Light theme button variables */ --button-light-bg: #ffffff; --button-light-text: var(--hs-primary); --button-light-border: #e6e6e6; --button-light-bg-hover: #e6e6e6; --button-light-text-hover: var(--hs-primary); /* Dark theme button variables */ --button-dark-bg: #2d2d2d; --button-dark-text: #ffffff; --button-dark-border: #555555; --button-dark-bg-hover: #404040; --button-dark-text-hover: #ffffff; /* Disabled Button Colors */ --button-disabled-opacity: 0.6; --button-disabled-background: #BEC1C1; --button-disabled-text: #BEC1C1; /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* FORM theme variables */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* Regular text and headings */ --form-text-color: #494A52; --form-heading-color: #494A52; /* Input Labels */ --form-label-color: #494A52; --form-label-color--disabled: #494A52; /* Input Fields - Normal */ --form-input-background-color: #494A52; --form-input-border-color: #494A52; --form-input-text-color: #494A52; --form-input-placeholder-color: ; /* Input Fields - Focus */ --form-input-background-color--focus: #494A52; --form-input-border-color--focus: #494A52; --form-input-text-color--focus: #494A52; --form-input-placeholder-color--focus: #494A52; /* Input Fields - Disabled */ --form-input-background-color--disabled: #494A52; --form-input-border-color--disabled: #494A52; --form-input-text-color--disabled: #494A52; --form-input-placeholder-color--disabled: #494A52; /* Status Messaages */ --form-error-color: #494A52; --form-success-color: #494A52; /* Submit/ Buttons */ --form-button-bg: #494A52; --form-button-text: #494A52; --form-button-border: var(--form-button-bg); --form-button-bg-hover: #494A52; --form-button-text-hover: #494A52; --form-button-border-hover: var(--form-button-bg-hover); --form-button-bg-disabled: #494A52; --form-button-text-disabled: #494A52; --form-button-border-disabled: var(--form-button-bg-disabled); /* Size variables */ --form-padding: 0.375rem 0.75rem; --form-border-width: 1px; --form-border-radius: 0.25rem; --form-button-border-radius: var(--global-radius-md); --form-font-size: 1rem; --form-line-height: 1.5; --form-margin-bottom: 1rem; /* Transition variables */ --form-transition: all 0.2s ease-in-out; /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* MODAL theme variables */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ --modal-body-bg: #FFFFFF; --modal-body-color: #243030; --modal-backdrop-bg: rgba(235, 106, 98, 80%); --modal-close-bg: #2ABDC7; --modal-close-label: #FFFFFF; --modal-close-bg-hover: #1ca28a; --modal-close-label-hover: #FFFFFF; /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* MODAL theme variables */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ --module-title-color: #494A52; --module-pretitle-color: #494A52; --module-subtitle-color: #494A52; --module-title-color--dark: #494A52; --module-pretitle-color--dark: #494A52; --module-subtitle-color--dark: #494A52; } :root { /* Heading-specific font sizes for clamp (min, preferred, max) */ --h1-font-size-min: 2rem; --h1-font-size-preferred: 5vw; --h1-font-size-max: 3.5rem; --h2-font-size-min: 1.75rem; --h2-font-size-preferred: 4vw; --h2-font-size-max: 2.5rem; --h3-font-size-min: 1.5rem; --h3-font-size-preferred: 3vw; --h3-font-size-max: 2rem; --h4-font-size-min: 1.25rem; --h4-font-size-preferred: 2.5vw; --h4-font-size-max: 1.5rem; --h5-font-size-min: 1rem; --h5-font-size-preferred: 2vw; --h5-font-size-max: 1.25rem; --h6-font-size-min: 0.875rem; --h6-font-size-preferred: 1.5vw; --h6-font-size-max: 1rem; /* Heading-specific font weights */ --h1-font-weight: 700; --h2-font-weight: 700; --h3-font-weight: 600; --h4-font-weight: 600; --h5-font-weight: 500; --h6-font-weight: 500; /* Heading-specific line heights */ --h1-line-height: 1.2; --h2-line-height: 1.25; --h3-line-height: 1.3; --h4-line-height: 1.35; --h5-line-height: 1.4; --h6-line-height: 1.4; /* Heading-specific letter spacing */ --h1-letter-spacing: -0.01em; --h2-letter-spacing: -0.015em; --h3-letter-spacing: -0.02em; --h4-letter-spacing: -0.025em; --h5-letter-spacing: -0.03em; --h6-letter-spacing: -0.035em; /* Heading-specific margins */ --h1-margin-top: 1.5em; --h1-margin-bottom: 0.75em; --h2-margin-top: 1.25em; --h2-margin-bottom: 0.65em; --h3-margin-top: 1rem; --h3-margin-bottom: 0.5em; --h4-margin-top: 0.85em; --h4-margin-bottom: 0.4em; --h5-margin-top: 0.75em; --h5-margin-bottom: 0.35em; --h6-margin-top: 0.65em; --h6-margin-bottom: 0.3em; /* Heading-specific colors */ --h1-color: var(--heading-color); --h2-color: var(--heading-color); --h3-color: var(--heading-color); --h4-color: var(--heading-color); --h5-color: var(--heading-color); --h6-color: var(--text-color-primary); /* Font weight variables */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Line height variables */ --line-height-base: 1.6; --line-height-tight: 1.2; /* Letter spacing */ --letter-spacing-base: -0.01em; /* Margins for spacing */ --margin-base: 1rem; } /* Reset and base styles */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Base body styles */ body { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-base); color: var(--text-color-primary); } /* Headings with specific variables and clamp */ h1, .h1 { --h-color: var(--h1-color); font-family: var(--font-family-heading); font-size: clamp(var(--h1-font-size-min), var(--h1-font-size-preferred), var(--h1-font-size-max)); font-weight: var(--h1-font-weight); line-height: var(--h1-line-height); letter-spacing: var(--h1-letter-spacing); margin-top: var(--h1-margin-top); margin-bottom: var(--h1-margin-bottom); text-wrap-style: balance; } h2, .h2 { --h-color: var(--h2-color); font-family: var(--font-family-heading); font-size: clamp(var(--h2-font-size-min), var(--h2-font-size-preferred), var(--h2-font-size-max)); font-weight: var(--h2-font-weight); line-height: var(--h2-line-height); letter-spacing: var(--h2-letter-spacing); margin-top: var(--h2-margin-top); margin-bottom: var(--h2-margin-bottom); text-wrap-style: balance; } h3, .h3 { --h-color: var(--h3-color); font-family: var(--font-family-heading); font-size: clamp(var(--h3-font-size-min), var(--h3-font-size-preferred), var(--h3-font-size-max)); font-weight: var(--h3-font-weight); line-height: var(--h3-line-height); letter-spacing: var(--h3-letter-spacing); margin-top: var(--h3-margin-top); margin-bottom: var(--h3-margin-bottom); text-wrap-style: balance; } h4, .h4 { --h-color: var(--h4-color); font-family: var(--font-family-heading); font-size: clamp(var(--h4-font-size-min), var(--h4-font-size-preferred), var(--h4-font-size-max)); font-weight: var(--h4-font-weight); line-height: var(--h4-line-height); letter-spacing: var(--h4-letter-spacing); margin-top: var(--h4-margin-top); margin-bottom: var(--h4-margin-bottom); text-wrap-style: balance; } h5, .h5 { --h-color: var(--h5-color); font-family: var(--font-family-heading); font-size: clamp(var(--h5-font-size-min), var(--h5-font-size-preferred), var(--h5-font-size-max)); font-weight: var(--h5-font-weight); line-height: var(--h5-line-height); letter-spacing: var(--h5-letter-spacing); margin-top: var(--h5-margin-top); margin-bottom: var(--h5-margin-bottom); text-wrap-style: balance; } h6, .h6 { --color: var(--h6-color); font-family: var(--font-family-heading); font-size: clamp(var(--h6-font-size-min), var(--h6-font-size-preferred), var(--h6-font-size-max)); font-weight: var(--h6-font-weight); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing); margin-top: var(--h6-margin-top); margin-bottom: var(--h6-margin-bottom); text-wrap-style: balance; } /* Paragraphs */ p { margin-bottom: var(--margin-base); color: inherit; } /* Links */ a { color: var(--link-color); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--link-color-hover); text-decoration: underline; } a:visited { color: var(--link-color-visited); } /* Blockquote */ blockquote { border-left: 4px solid var(--text-color-muted); padding-left: 1rem; margin: var(--margin-base) 0; color: inherit; font-style: italic; } /* Code and preformatted text */ code { font-family: var(--font-family-monospace); font-size: var(--font-size-sm); background-color: rgba(0, 0, 0, 0.05); padding: 0.2em 0.4em; border-radius: 3px; color: inherit; } pre { font-family: var(--font-family-monospace); font-size: var(--font-size-sm); background-color: rgba(0, 0, 0, 0.05); padding: 1rem; border-radius: 5px; overflow-x: auto; margin: var(--margin-base) 0; line-height: var(--line-height-tight); color: inherit; } /* Lists */ ul, ol { margin: var(--margin-base) 0; padding-left: 2rem; } li { margin-bottom: 0.5rem; color: inherit; } /* Inline elements */ strong { font-weight: var(--font-weight-bold); color: inherit; } em { font-style: italic; color: inherit; } small { font-size: var(--font-size-sm); color: var(--text-color-muted); } sub, sup { font-size: var(--font-size-sm); line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Horizontal rule */ hr { border: none; border-top: 1px solid var(--text-color-muted); margin: var(--margin-base) 0; } form, form * { all: revert; } [data-hsfc-id=Renderer] .hsfc-Row, [data-hsfc-id=Renderer] .hsfc-DropdownField>*:not(:last-child), [data-hsfc-id=Renderer] .hsfc-EmailField>*:not(:last-child), [data-hsfc-id=Renderer] .hsfc-PhoneField>*:not(:last-child), [data-hsfc-id=Renderer] .hsfc-TextField>*:not(:last-child), [data-hsfc-id=Renderer] .hsfc-TextareaField>*:not(:last-child), [data-hsfc-id=Renderer] .hsfc-DateField>*:not(:last-child), [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup>*:not(:last-child), [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup>*:not(:last-child), [data-hsfc-id=Renderer] .hsfc-NumberField>*:not(:last-child) { margin-bottom: 0 !important; } [data-hsfc-id=Renderer] .hsfc-Heading { margin-bottom: 0 !important; padding-bottom: 1em; border-bottom: 1px solid #ccc; } [data-hsfc-id=Renderer] .hsfc-RichText *:first-child { margin-top: 0 !important; } [data-hsfc-id=Renderer] .hsfc-RichText *:last-child { margin-bottom: 0 !important; } .hsfc-Step__Content { padding: 0 !important;} form .grecaptcha-logo * { all: initial; } /* FORMS * * * * * * * * * * * * * * * * * * * * * * * */ form, .hsfc-Step__Content { --font-color: #333; --font-weight: 400; --structure-column-gap: 1em; --structure-row-gap: 1em; --field-font-color: var(--font-color); --field-font-family: sans-serif; --field-background: rgba(245,248,250,1); --field-border-size: 1px; --field-border-type: solid; --field-border-colour: #ccc; --field-padding-inline: 0.5rem; --field-padding-block: 1rem; --field-border-radius: 0.25rem; --field-min-height: 50px; --label-font-size: 1rem; --label-line-height: 1.1; --label-font-family: sans-serif; --label-font-weight: 600; --label-color: rgba(0, 0, 0, 0.5); --label-background: transparent; --label-padding-inline: 0; --label-padding-block: 0 0.5em; --group-label-font-size: 1rem; --group-label-line-height: var(--label-font-height); --group-label-font-family: var(--label-font-family); --group-label-font-weight: var(--label-font-weight); --group-label-color: var(--label-color); --group-label-background: var(--label-font-background); --group-label-padding-inline: var(--label-padding-inline); --group-label-padding-block: var(--label-padding-block); --check-radio-column-gap: 0.5em; --check-radio-row-gap: 0.5em; --check-radio-font-size: 1rem; --check-radio-font-color: #333; --check-radio-font-family: sans-serif; --check-radio-font-weight: 400; --alert-text-colour: #F00; --alert-text-size: 0.75rem; container-type: inline-size; display: grid; row-gap: var(--structure-row-gap); width: 100% !important; padding: 0 !important; margin: 0 !important; } form fieldset, form.hs-form fieldset{ all: unset; display: grid; gap: var(--structure-column-gap); align-items: flex-start; max-width: 100%; } div.input /* OLD */ { display: grid; padding: 0 !important; margin: 0 !important; width: 100% !important; } div:has( > label) /* BOTH */ { display: grid; padding: 0 !important; margin: 0 !important; width: 100% !important; } form ul, /* OLD */ .hsfc-CheckboxFieldGroup__Options, /* NEW */ .hsfc-RadioFieldGroup__Options, /* NEW */ .hsfc-CheckboxFieldGroup, /* NEW */ .hsfc-RadioFieldGroup /* NEW */ { padding: 0 !important; margin: 0 !important; list-style-type: none !important; display: grid !important; row-gap: var(--check-radio-row-gap) !important; } .hsfc-CheckboxFieldGroup, /* NEW */ .hsfc-RadioFieldGroup /* NEW */ { row-gap: 0 !important; } /* Elements */ textarea, select, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"] { display: grid; width: 100% !important; box-sizing: border-box !important; font-family: var(--field-font-family) !important; font-size: var(--field-font-size) !important; font-weight: var(--field-font-weight) !important; padding-inline: var(--field-padding-inline) !important; padding-block: var(--field-padding-inline) !important; border-radius: var(--field-border-radius) !important; color: var(--field-font-color) !important; background-color: var(--field-background) !important; border: var(--field-border-size) var(--field-border-type) var(--field-border-colour) !important; min-height: var(--field-min-height) !important; } input[type="radio"], input[type="checkbox"] { margin: 0 !important; width: auto !important; } /* Labels */ label { display: block; width: 100% !important; font-size: var(--label-font-size) !important; color: var(--label-color) !important; font-family: var(--label-font-family) !important; font-weight: var(--label-font-weight) !important; padding-block: var(--label-padding-block) !important; padding-inline: var(--label-padding-inline) !important; line-height: var(--label-line-height) !important; } .hs-fieldtype-radio > label, /* OLD */ .hs-fieldtype-checkbox > label, /* OLD */ .hsfc-CheckboxFieldGroup > label, /* NEW */ .hsfc-RadioFieldGroup > label { /* NEW */ font-size: var(--group-label-font-size) !important; font-weight: var(--group-label-font-weight) !important; color: var(--group-label-color) !important; font-family: var(--group-label-font-family) !important; padding-block: var(--group-label-padding-block) !important; padding-inline: var(--group-label-padding-inline) !important; line-height: var(--group-label-line-height) !important; } /* Radio and checkboxes */ .hs-form-booleancheckbox-display, /* OLD */ .hs-form-radio-display, /* OLD */ .hs-form-checkbox-display, /* OLD */ .hsfc-CheckboxField .hsfc-FieldLabel, /* NEW */ .hsfc-RadioField .hsfc-FieldLabel, /* NEW */ .hsfc-CheckboxFieldGroup__Options label, /* NEW */ .hsfc-RadioFieldGroup__Options label /* NEW */ { display: grid !important; grid-template-columns: auto 1fr !important; align-items: center !important; line-height: 1.1 !important; padding: 0 !important; gap: var(--check-radio-column-gap) !important; font-size: var(--check-radio-font-size) !important; color: var(--check-radio-font-color) !important; font-family: var(--check-radio-font-family) !important; font-weight: var(--check-radio-font-weight) !important; } /* For the AU part on the phone numbers */ .hsfc-PhoneInput /* NEW */ { display: grid !important; grid-template-columns: auto 1fr !important; align-items: center !important; } .hsfc-PhoneInput input[type="tel"] /* NEW */ { border-radius: 0 var(--field-border-radius) var(--field-border-radius) 0 !important; } .hsfc-PhoneInput__FlagAndCaret /* NEW */ { box-sizing: border-box !important; height: 100% !important; padding: 0.5em !important; display: grid !important; place-content: center !important; background: var(--field-border-colour) !important; color: #fff !important; line-height: 1 !important; border-radius: var(--field-border-radius) 0 0 var(--field-border-radius) !important; border: none !important; } /* Errors - This will need work way more added to it for the old styles */ .hs-error-msgs, .hs-error-msg, .hsfc-ErrorAlert /* NEW */ { color: var(--alert-text-colour) !important; font-size: var(--alert-text-size) !important; font-weight: 400 !important; padding-top: 0.5em !important; } textarea.invalid.error, select.invalid.error, input.invalid.error { border-color: var(--alert-text-colour) !important; } form input[type="submit"].hs-button { display: inline-flex; justify-content: space-between; gap: 0.5em; align-items: center; padding: var(--button-padding); font-size: var(--button-font-size); font-weight: var(--button-font-weight); line-height: var(--button-line-height); border-radius: 0 var(--button-border-radius) var(--button-border-radius) var(--button-border-radius); text-align: center; text-decoration: none; cursor: pointer; transition: var(--button-transition); box-sizing: border-box; text-decoration: none; background-color: var(--button-primary-bg); color: var(--button-primary-text); border: none; } form input[type="submit"].hs-button:hover { background-color: var(--button-primary-bg-hover); color: var(--button-primary-text-hover); border: none; } div[data-hs-forms-root="true"]:has( > form) { display: flex; justify-content: center; } form { margin-inline: auto; /* max-width: 760px; */ } /* Main Structure ******************************************************************/ fieldset.form-columns-1, /* OLD */ .hsfc-Row /* NEW */ { display: grid; grid-template-columns: 1fr !important; gap: var(--structure-column-gap) !important; align-items: flex-start !important; } @container (width > 460px) { fieldset.form-columns-2, /* OLD */ .hsfc-Row:has(> div:nth-child(2)) /* NEW */ { grid-template-columns: 1fr 1fr !important; } } @container (width > 800px) { fieldset.form-columns-3, /* OLD */ .hsfc-Row:has(> div:nth-child(3)) /* NEW */ { grid-template-columns: 1fr 1fr 1fr !important; } } .mv2ImageText.enclosed label { --label-color: rgba(255,255,255,0.5) !important; } .mv2ImageText.enclosed label.hs-error-msg { --alert-text-colour: white !important; } .widget-type-form { padding-inline: 0 !important; margin-inline: auto !important; max-width: 760px !important; } .widget-type-form h3 { margin-top: 0 !important; margin-bottom: var(--molecule-standard-gap); } /* Base button styles */ .button, .dummy-button { display: inline-flex; justify-content: space-between; gap: 0.5em; align-items: center; padding: var(--button-padding); font-size: var(--button-font-size); line-height: var(--button-line-height); border-radius: var(--button-border-radius); text-align: center; text-decoration: none; cursor: pointer; transition: var(--button-transition); box-sizing: border-box; text-decoration: none; } .button:hover { text-decoration: none; } .dummy-button, .button--no-link{ cursor: default; } .button i, .dummy-button i { font-size: 0.875em; transition: transform var(--global-trans); } .button:hover i { transform: translateX(0.25em); } .button--no-bg { padding-inline: 0px; padding-block: 0px; color: var(--button-primary-bg); font-weight: 600; } /* Primary button */ .button-primary, .button-primary:visited, .button-primary.button--no-link { background-color: var(--button-primary-bg); color: var(--button-primary-text); border: var(--button-border-width) solid var(--button-primary-border); } .button-primary:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-primary-bg-hover); color: var(--button-primary-text-hover); border-color: var(--button-primary-bg-hover); } /* Primary hollow button */ .button-primary-hollow, .button-primary-hollow:visited, .button-primary-hollow.button--no-link { background-color: transparent; color: var(--button-primary-bg); border: var(--button-hollow-border-width) solid var(--button-primary-border); } .button-primary-hollow:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-primary-bg-hover); color: var(--button-primary-text-hover); border-color: var(--button-primary-bg-hover); } /* Primary border button */ .button-primary-border, .button-primary-border:visited, .button-primary-border.button--no-link { border-color: var(--button-primary-text); } /* Secondary button */ .button-secondary, .button-secondary:visited, .button-secondary.button--no-link { background-color: var(--button-secondary-bg); color: var(--button-secondary-text); border: var(--button-border-width) solid var(--button-secondary-border); } .button-secondary:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-secondary-bg-hover); color: var(--button-secondary-text-hover); border-color: var(--button-secondary-bg-hover); } /* Secondary hollow button */ .button-secondary-hollow, .button-secondary-hollow:visited, .button-secondary-hollow.button--no-link { background-color: transparent; color: var(--button-secondary-bg); border: var(--button-hollow-border-width) solid var(--button-secondary-border); } .button-secondary-hollow:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-secondary-bg-hover); color: var(--button-secondary-text-hover); border-color: var(--button-secondary-bg-hover); } /* Primary border button */ .button-secondary-border, .button-secondary-border:visited, .button-secondary-border.button--no-link { border-color: var(--button-secondary-text); } /* Tertiary button */ .button-tertiary, .button-tertiary:visited, .button-tertiary.button--no-link { background-color: var(--button-tertiary-bg); color: var(--button-tertiary-text); border: var(--button-border-width) solid var(--button-tertiary-border); } .button-tertiary:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-tertiary-bg-hover); color: var(--button-tertiary-text-hover); border-color: var(--button-tertiary-bg-hover); } /* Tertiary hollow button */ .button-tertiary-hollow, .button-tertiary-hollow:visited, .button-tertiary-hollow.button--no-link { background-color: transparent; color: var(--button-tertiary-bg); border: var(--button-hollow-border-width) solid var(--button-tertiary-border); } .button-tertiary-hollow:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-tertiary-bg-hover); color: var(--button-tertiary-text-hover); border-color: var(--button-tertiary-bg-hover); } /* Tertiary border button */ .button-tertiary-border, .button-tertiary-border:visited, .button-tertiary-border.button--no-link { border-color: var(--button-tertiary-text); } /* Disabled states */ .button:disabled, .button-primary:disabled, .button-secondary:disabled, .button-tertiary:disabled{ opacity: var(--button-disabled-opacity); cursor: not-allowed; background: var(--button-disabled-background); border-color: var(--button-disabled-background); color: var(--button-disabled-text); } .button-primary-hollow:disabled, .button-primary-border:disabled, .button-secondary-hollow:disabled, .button-secondary-border:disabled, .button-tertiary-hollow:disabled, .button-tertiary-border:disabled{ opacity: var(--button-disabled-opacity); cursor: not-allowed; border-color: var(--button-disabled-background); color: var(--button-disabled-text); } .mv2-module { container-type: inline-size; container-name: mv2Module; --margin-block: 0; --block-align: var(--block-align-lg, center); --ba-md: var(--block-align-md, var(--block-align)); --ba-sm: var(--block-align-sm, var(--ba-md)); --text-align: var(--text-align-lg, left); --ta-md: var(--text-align-md, var(--text-align)); --ta-sm: var(--text-align-sm, var(--ta-md)); --actions-align: var(--actions-align-lg, left); --aa-md: var(--actions-align-md, var(--actions-align)); --aa-sm: var(--actions-align-sm, var(--aa-md)); --padding-top: var(--padding-top-lg, 0); --pt-md: var(--padding-top-md, var(--padding-top)); --pt-sm: var(--padding-top-sm, var(--pt-md)); --padding-bottom: var(--padding-bottom-lg, 0); --pb-md: var(--padding-bottom-md, var(--padding-bottom)); --pb-sm: var(--padding-bottom-sm, var(--pb-md)); --padding-left: var(--padding-left-lg, 0); --pl-md: var(--padding-left-md, var(--padding-left)); --pl-sm: var(--padding-left-sm, var(--pl-md)); --padding-right: var(--padding-right-lg, 0); --pr-md: var(--padding-right-md, var(--padding-right)); --pr-sm: var(--padding-right-sm, var(--pr-md)); --margin-top: var(--margin-top-lg, 0); --mt-md: var(--margin-top-md, var(--margin-top)); --mt-sm: var(--margin-top-sm, var(--mt-md)); --margin-bottom: var(--margin-bottom-lg, 0); --mb-md: var(--margin-bottom-md, var(--margin-bottom)); --mb-sm: var(--margin-bottom-sm, var(--mb-md)); } .mv2-module__stage { container-type: inline-size; container-name: stage; --max-width: var(--maxw-lg, 100%); --mw-md: var(--maxw-md, var(--max-width)); --mw-sm: var(--maxw-sm, var(--mw-md)); max-width: var(--max-width); justify-self: var(--block-align); text-align: var(--text-align); padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left); margin-block: var(--margin-top) var(--margin-bottom); width: 100%; grid-area: var(--placement, 'content'); z-index: 30; min-height: 50px; } @container mv2Module (width < 1024px) { .mv2-module__stage { max-width: var(--mw-md); justify-self: var(--ba-md); text-align: var(--ta-md); padding: var(--pt-md) var(--pr-md) var(--pb-md) var(--pl-md); margin-block: var(--mt-md) var(--mb-md); } } @container mv2Module (width < 640px) { .mv2-module__stage { max-width: var(--mw-sm); justify-self: var(--ba-sm); text-align: var(--ta-sm); padding: var(--pt-sm) var(--pr-sm) var(--pb-sm) var(--pl-sm); margin-block: var(--mt-sm) var(--mb-sm); } } .service-content { font-size: 1.25em; } .mv-2-col { padding-inline: var(--window-padding--inline); } .mv-2-col--person { margin-top: var(--molecule-standard-gap); margin-bottom: var(--organism-large-gap); } .mv-2-col__inner { width: 100%; max-width: var(--max-width); margin-inline: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; gap: var(--organism-standard-gap); } @media all and (min-width: 940px) { .mv-2-col__inner { grid-template-columns: 3fr 1fr; } } .mv-2-col--person .mv-2-col__inner { gap: var(--organism-large-gap); } .mv-2-col__main { } .mv-2-col--person .mv-2-col__main { display: grid; gap: var(--molecule-standard-gap); } .mv-2-col__aside { } .mv-2-col--person .mv-2-col__aside { display: flex; flex-direction: column; align-items: stretch; gap: var(--organism-large-gap); } .mv-1-col { padding-inline: var(--window-padding--inline); } .mv-1-col__inner { width: 100%; max-width: var(--max-width); margin-inline: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; gap: var(--organism-standard-gap); } .mv-1-col__main { } .mv-1-col--person { margin-top: var(--organism-large-gap); } .mv-1-col--person .mv-1-col__main { display: grid; gap: var(--molecule-standard-gap); } .hs-menu-wrapper { padding: var(--molecule-standard-gap); } .hs-menu-wrapper ul { padding: 0; margin: 0; list-style-type: none; } .hs-menu-wrapper ul li { padding: 0; margin: 0; } .hs-menu-wrapper ul li a { color: inherit; display: block; padding-block: 0.375em; } .hs-menu-wrapper ul ul.hs-menu-children-wrapper { padding-left: var(--atom-standard-gap); border-left: 3px solid rgba(255,255,255,0.25); } ul.mv-menu{ padding: 0; margin: 0; list-style-type: none; } ul.mv-menu li { padding: 0; margin: 0; position: relative; } ul.mv-menu ul.hs-menu-children-wrapper { padding-left: var(--atom-standard-gap); border-left: 3px solid rgba(255,255,255,0.25); } ul.mv-menu.menu--drop-down li.menu-open > ul.mv-menu, ul.mv-menu.menu--drop-down li:hover > ul.mv-menu { /* background-color: blue; border-radius: 0; */ } ul.mv-menu.menu--drop-down li ul li { /* padding: 0; margin: 0; */ } /* ul.mv-menu.menu--drop-down li ul li .mv-menu__link{ background-color: var(--hs-white); } ul.mv-menu.menu--drop-down li ul li .mv-menu__link:hover { color: var(--hs-primary--text-over); background-color: var(--hs-primary); } */ li.mv-menu__level-2:not(:first-child) { border-top: 1px solid rgba(255,255,255,0.25) !important; } li.mv-menu__level-2:first-child > .main-menu__link { padding-top: 1em; } li.mv-menu__level-2:last-child > .main-menu__link { padding-bottom: 1em; } li.mv-menu__level-2 > .main-menu__link { padding: 0.5em; font-weight: 500 !important; font-size: 1rem; transition: background-color var(--global-trans); } .mv-menu__level-1.mv-menu__active_branch > .main-menu__link, .has-children:hover > .main-menu__link, .mv-menu__level-1 > .main-menu__link:hover { color: var(--hs-secondary) !important; } .mv-menu__level-2.mv-menu__active_branch > .main-menu__link, li.mv-menu__level-2 > .main-menu__link:hover { color: white; background: var(--hs-primary); } .member-menu__item .mv-menu { overflow: hidden; } .mv-menu.menu--js-accordion .mv-menu { overflow: hidden; } .main-menu__item.has-children.menu-open > .mv-menu { } .mv-menu__link > .mv-menu__link-body { overflow: clip; } .mv-menu__link > .mv-menu__link-body .menu-icon { padding-inline: 10px; border-left: 1px solid #ccc; overflow: clip; height: 100%; align-items: center; display: grid; } .mv-menu__link > .mv-menu__link-body i.fa-plus { transition: transform var(--global-trans); } .menu-open > .mv-menu__link > .mv-menu__link-body i.fa-plus { transform: rotate(45deg); } @media (max-width: 1040px){ ul.main-menu:not([data-depth="0"]) { border-top: 3px solid var(--hs-accent-3);; border-left: 4px solid var(--hs-accent-3);; } ul.main-menu .mv-menu__link > .mv-menu__link-body { padding-inline: 0; } ul.main-menu:not([data-depth="0"]) .mv-menu__link > .mv-menu__link-body { padding-inline: 1em 0; } } h3.header-member-menu { margin-top: 2rem; } @media (min-width: 1040px){ .site-header .mv-menu__link > .mv-menu__link-body .menu-icon { display: none; } ul.mv-menu.menu--drop-down li:hover > ul.mv-menu { z-index: 11; position: absolute; left: -0.75em; background-color: rgba(0, 59, 159, 0.75); box-shadow: var(--box-shadow); border-radius: 0 var(--global-radius-md) var(--global-radius-md) var(--global-radius-md); height: auto; backdrop-filter: blur(10px); } ul.mv-menu.menu--drop-down li.has-children:last-child > ul.mv-menu { right: -0.75em; left: auto; border-radius:var(--global-radius-md) 0 var(--global-radius-md) var(--global-radius-md); } .main-menu .mv-menu__level-1 > a > .mv-menu__link-body > .mv-menu__link-title { padding-block: 0.75em; } .mv-menu__level-2 .mv-menu__link-title { padding-inline: 0.75em; } ul.mv-menu.menu--drop-down li ul { display: none; } ul.mv-menu.menu--drop-down li.menu-open > ul, ul.mv-menu.menu--drop-down li:hover > ul { width: max-content; } ul.mv-menu.menu--drop-down li.menu-open > ul, ul.mv-menu.menu--drop-down li:hover > ul { gap: 0; display: grid; grid-template-columns: 1fr; } .header-member-menu { display: none; } } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv2PlayButton { width: 1.5em; display: grid; aspect-ratio: 1 / 1; font-size: 3em; border-radius: 100%; align-items: center; justify-content: center; color: var(--hs-white); background-color: var(--hs-primary--80pc); } .mv2PlayButton:hover{ text-decoration: none; color: var(--hs-white); background-color: var(--hs-primary); } .mv2PlayButton i{ padding-left: 6%; } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv2Button, .dummy-button { display: inline-flex; justify-content: space-between; gap: 0.5em; align-items: center; padding: var(--button-padding); font-size: var(--button-font-size); font-weight: var(--button-font-weight); line-height: var(--button-line-height); border-radius: 0 var(--button-border-radius) var(--button-border-radius) var(--button-border-radius); text-align: center; text-decoration: none; cursor: pointer; transition: var(--button-transition); box-sizing: border-box; text-decoration: none; } .mv2Button:hover { text-decoration: none; } .dummy-button, .mv2Button--no-link{ cursor: default; } .mv2Button i, .dummy-button i { font-size: 0.875em; transition: transform var(--global-trans); } .mv2Button:hover i { transform: translateX(0.25em); } .button--no-bg { padding-inline: 0px; padding-block: 0px; color: var(--button-primary-bg); font-weight: 600; } /* Primary button */ .button-primary.button-default, .button-primary.button-default:visited, .button-primary.button-default.button--no-link { background-color: var(--button-primary-bg); color: var(--button-primary-text); border: none; } .button-primary.button-default:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-primary-bg-hover); color: var(--button-primary-text-hover); border: none; } /* Primary hollow button */ .button-primary.button-hollow, .button-primary.button-hollow:visited, .button-primary.button-hollow.button--no-link { background-color: transparent; color: var(--button-primary-bg); border: var(--button-hollow-border-width) solid var(--button-primary-border); } .button-primary.button-hollow:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-primary-bg-hover); color: var(--button-primary-text-hover); border-color: var(--button-primary-bg-hover); } /* Primary text button */ .button-primary.button-text, .button-primary.button-text:visited, .button-primary.button-text.button--no-link { background-color: transparent; color: var(--button-primary-bg); border: none; padding-block: 0; padding-inline: 0; } .button-primary.button-text:hover:not(:disabled):not(.button--no-link) { background-color: transparent; color: var(--button-primary-bg-hover); border: none; padding-inline: 0; padding-block: 0; } /* Primary border button */ .button-primary-border, .button-primary-border:visited, .button-primary-border.button--no-link { border-color: var(--button-primary-text); } /* Secondary button */ .button-secondary.button-default, .button-secondary.button-default:visited, .button-secondary.button-default.button--no-link { background-color: var(--button-secondary-bg); color: var(--button-secondary-text); border: none; } .button-secondary.button-default:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-secondary-bg-hover); color: var(--button-secondary-text-hover); border: none; } /* Secondary hollow button */ .button-secondary.button-hollow, .button-secondary.button-hollow:visited, .button-secondary.button-hollow.button--no-link { background-color: transparent; color: var(--button-secondary-bg); border: var(--button-hollow-border-width) solid var(--button-secondary-border); } .button-secondary.button-hollow:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-secondary-bg-hover); color: var(--button-secondary-text-hover); border-color: var(--button-secondary-bg-hover); } /* Secondary text button */ .button-secondary.button-text, .button-secondary.button-text:visited, .button-secondary.button-text.button--no-link { background-color: transparent; color: var(--button-secondary-bg); border: none; padding-block: 0; padding-inline: 0; } .button-secondary.button-text:hover:not(:disabled):not(.button--no-link) { background-color: transparent; color: var(--button-secondary-bg-hover); border: none; padding-block: 0; padding-inline: 0; } /* Secondary border button */ .button-secondary-border, .button-secondary-border:visited, .button-secondary-border.button--no-link { border-color: var(--button-secondary-text); } /* Tertiary button */ .button-tertiary.button-default, .button-tertiary.button-default:visited, .button-tertiary.button-default.button--no-link { background-color: var(--button-tertiary-bg); color: var(--button-tertiary-text); border: none; } .button-tertiary.button-default:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-tertiary-bg-hover); color: var(--button-tertiary-text-hover); border: none; } /* Tertiary hollow button */ .button-tertiary.button-hollow, .button-tertiary.button-hollow:visited, .button-tertiary.button-hollow.button--no-link { background-color: transparent; color: var(--button-tertiary-bg); border: var(--button-hollow-border-width) solid var(--button-tertiary-border); } .button-tertiary.button-hollow:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-tertiary-bg-hover); color: var(--button-tertiary-text-hover); border-color: var(--button-tertiary-bg-hover); } /* Tertiary text button */ .button-tertiary.button-text, .button-tertiary.button-text:visited, .button-tertiary.button-text.button--no-link { background-color: transparent; color: var(--button-tertiary-bg); border: none; padding-block: 0; padding-inline: 0; } .button-tertiary.button-text:hover:not(:disabled):not(.button--no-link) { background-color: transparent; color: var(--button-tertiary-bg-hover); border: none; padding-block: 0; padding-inline: 0; } /* Tertiary border button */ .button-tertiary-border, .button-tertiary-border:visited, .button-tertiary-border.button--no-link { border-color: var(--button-tertiary-text); } /* Light button */ .button-light.button-default, .button-light.button-default:visited, .button-light.button-default.button--no-link { background-color: var(--button-light-bg); color: var(--button-light-text); border: var(--button-border-width) solid var(--button-light-border); } .button-light.button-default:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-light-bg-hover); color: var(--button-light-text-hover); border-color: var(--button-light-bg-hover); } /* Light hollow button */ .button-light.button-hollow, .button-light.button-hollow:visited, .button-light.button-hollow.button--no-link { background-color: transparent; color: var(--button-light-bg); border: var(--button-hollow-border-width) solid var(--button-light-border); } .button-light.button-hollow:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-light-bg-hover); color: var(--button-light-text-hover); border-color: var(--button-light-bg-hover); } /* Light text button */ .button-light.button-text, .button-light.button-text:visited, .button-light.button-text.button--no-link { background-color: transparent; color: var(--button-light-bg); border: none; padding-inline: 0; } .button-light.button-text:hover:not(:disabled):not(.button--no-link) { background-color: transparent; color: var(--button-light-bg-hover); border: none; padding-inline: 0; } /* Light border button */ .button-light-border, .button-light-border:visited, .button-light-border.button--no-link { border-color: var(--button-light-text); } /* Dark button */ .button-dark.button-default, .button-dark.button-default:visited, .button-dark.button-default.button--no-link { background-color: var(--button-dark-bg); color: var(--button-dark-text); border: none; } .button-dark.button-default:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-dark-bg-hover); color: var(--button-dark-text-hover); border: none; } /* Dark hollow button */ .button-dark.button-hollow, .button-dark.button-hollow:visited, .button-dark.button-hollow.button--no-link { background-color: transparent; color: var(--button-dark-bg); border: var(--button-hollow-border-width) solid var(--button-dark-border); } .button-dark.button-hollow:hover:not(:disabled):not(.button--no-link) { background-color: var(--button-dark-bg-hover); color: var(--button-dark-text-hover); border-color: var(--button-dark-bg-hover); } /* Dark text button */ .button-dark.button-text, .button-dark.button-text:visited, .button-dark.button-text.button--no-link { background-color: transparent; color: var(--button-dark-bg); border: none; padding-inline: 0; } .button-dark.button-text:hover:not(:disabled):not(.button--no-link) { background-color: transparent; color: var(--button-dark-bg-hover); border: none; padding-inline: 0; } /* Dark border button */ .button-dark-border, .button-dark-border:visited, .button-dark-border.button--no-link { border-color: var(--button-dark-text); } /* Disabled states */ .button:disabled, .button-primary:disabled, .button-secondary:disabled, .button-tertiary:disabled{ opacity: var(--button-disabled-opacity); cursor: not-allowed; background: var(--button-disabled-background); border-color: var(--button-disabled-background); color: var(--button-disabled-text); } .button-primary-hollow:disabled, .button-primary-border:disabled, .button-secondary-hollow:disabled, .button-secondary-border:disabled, .button-tertiary-hollow:disabled, .button-tertiary-border:disabled{ opacity: var(--button-disabled-opacity); cursor: not-allowed; border-color: var(--button-disabled-background); color: var(--button-disabled-text); } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv2Image { border-radius: 0 var(--global-image-radius) var(--global-image-radius) var(--global-image-radius); width: 100%; display: block; height: auto; overflow: clip; aspect-ratio: 16/9; object-fit: cover; } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv2Video { border-radius: 100vw; width: 80px; height: 80px; display: grid; } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv2PreTitle { --color: var(--pre-title-color-o, var(--pre-title-color)); --size: var(--pre-title-size-o, var(--pre-title-size)); --weight: var(--pre-title-weight-o, var(--pre-title-weight)); --line-height: var(--pre-title-line-height-o, var(--pre-title-line-height)); color: var(--color); font-size: var(--size); font-weight: var(--weight); line-height: var(--line-height); } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv2Title { --color: var(--title-color-o, var(--h-color)); color: var(--color); margin-block: 0; } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv2Icon { --icon-stroke: var(--icon-color-o, white); --icon-fill: var(--icon-color-o, white); aspect-ratio: 1/1; width: 100%; height: auto; display: grid; grid-template: [full-start] var(--atom-large-gap) [icon-start] auto [icon-end] var(--atom-large-gap) [full-end] / [full-start] var(--atom-large-gap) [icon-start] auto [icon-end] var(--atom-large-gap) [full-end]; } .mv2Icon svg { display: block; aspect-ratio: 1/1; width: 100%; height: auto; position: relative; z-index: 10; grid-area: icon; } .mv2Icon:after { content: ''; display: block; grid-area: full; background: var(--title-color-o, var(--hs-primary)); opacity: 0.2; border-radius: 1.5em 0 1.5em 1.5em; } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv2SubTitle { --color: var(--sub-title-color-o, var(--sub-title-color)); --size: var(--sub-title-size-o, var(--sub-title-size)); --weight: var(--sub-title-weight-o, var(--sub-title-weight)); --line-height: var(--sub-title-line-height-o, var(--sub-title-line-height)); color: var(--color); font-size: var(--size); font-weight: var(--weight); line-height: var(--line-height); margin-block: 0; } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv2RichText { --color: var(--richtext-color-o, var(--richtext-color)); --size: var(--richtext-size-o, var(--richtext-size)); --weight: var(--richtext-weight-o, var(--richtext-weight)); color: var(--color); font-size: var(--size); font-weight: var(--weight); margin-block: 0; } .mv2RichText *:first-child { margin-top: 0 !important; } .mv2RichText *:last-child { margin-bottom: 0 !important; } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv-image { border-radius: var(--global-image-radius) 0 var(--global-image-radius) var(--global-image-radius); width: 100%; display: block; height: auto; } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv-tag, a.mv-tag { border-radius: var(--global-image-radius); display: block; font-size: var(--font-size-xxsm); padding-block: 0.5em; padding-inline: 1em; background: var(--hs-primary--light); color: var(--hs-primary--text-over); text-decoration: none; transition: background-color var(--global-trans); } a.mv-tag:hover { background: var(--hs-primary); } .mv-pill{ display: block; width: 100%; text-align: center; border: 0 none; border-radius: var(--global-radius-md); padding: var(--atom-small-gap) var(--atom-large-gap); } .mv-pill.type-full{ border-radius: var(--global-radius); } .mv-pill.type-inline{ width: max-content; display: inline-block; } .mv-pill.theme-primary{ color: var(--hs-primary--text-over); background-color: var(--hs-primary); } .mv-pill.theme-secondary{ color: var(--hs-secondary--text-over); background-color: var(--hs-secondary); } .mv-pill.theme-tertiary{ color: var(--hs-tertiary--text-over); background-color: var(--hs-tertiary); } .mv-pill.style-outline{ border: 1px solid; background-color: transparent; } .mv-pill.style-outline.theme-primary{ color: var(--hs-primary); } .mv-pill.style-outline.theme-secondary{ color: var(--hs-secondary); } .mv-pill.style-outline.theme-tertiary{ color: var(--hs-tertiary); } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ a.person-detail { display: grid; grid-template-columns: auto 1fr; gap: var(--atom-standard-gap); color: inherit; } .person-detail__icon { } .person-detail__label { } ul.fancy-list, .fancy-list > ul{ list-style: none; padding-left: 0; display: grid; gap: var(--molecule-small-gap); } ul.fancy-list > li, .fancy-list > ul > li{ border-left: 3px solid var(--hs-primary); margin-left: 0; padding-left: var(--margin-base); } .mv2TitleGroup { display: grid; gap: var(--molecule-tiny-gap); } .mv2ButtonGroup { display: flex; flex-wrap: wrap; gap: var(--atom-standard-gap); justify-content: var(--actions-align, left); } @container mv2Module (width < 1024px) { .mv2ButtonGroup { justify-content: var(--aa-md); } } @container mv2Module (width < 640px) { .mv2ButtonGroup { justify-content: var(--aa-sm); } } .mv2LinkGroup { display: grid; gap: var(--atom-standard-gap); justify-content: var(--actions-align, left); grid-template-columns: 1fr; } .mv2LinkGroup .mv2Button { padding-block: 1em; font-size: 1.125em; } .mv2LinksText .mv2LinkGroup .mv2Button.button-text:hover, .mv2ImageText .mv2LinkGroup .mv2Button.button-text:hover, .mv2LinksAccordion .mv2LinkGroup .mv2Button.button-text:hover{ padding-block: 1em; } @container mv2Module (width < 1024px) { .mv2LinkGroup .mv2Button{ text-align: inherit; } } .mv2ImageSlider { display: grid; gap: var(--molecule-tiny-gap); grid-template-columns: [controls-start slider-stage-start] 1fr [slider-stage-end controls-end]; grid-template-rows: [slider-stage-start] auto [slider-stage-end controls-start] auto [controls-end]; } .mv2ImageSlider .mv2Image { grid-area: stage; border-radius: 0; } .mv2ImageSlider .flickity-viewport { border-radius: 0 var(--global-image-radius) var(--global-image-radius) var(--global-image-radius); } .mv2ImageSlider .flickity-page-dots { position: relative; bottom: initial; left: initial; transform: none; grid-area: controls; } .mv2ImageSlider .flickity-page-dots .dot { background: var(--title-color-o, var(--hs-primary)); } .mv2ImageGrid { display: grid; gap: var(--molecule-tiny-gap); grid-template-columns: repeat( auto-fit, minmax( min( 100%, var(--max-image-grid-width) ), 1fr ) ) } .mv2ImageText__section .mv2Accordion, .mv2LinksAccordion__accordion .mv2Accordion, .mv2-module__stage.mv2Accordion { --header-padding: var(--atom-large-gap) 0; --header-border-color: #aaa; --body-padding: var(--molecule-small-gap); --body-background: #f5f6f9; --body-color: var(--text-color-primary); --header-background-closed: var(--hs-light); --header-color-closed: var(--text-color-primary); --header-color: var(--hs-primary); --header-background: var(--hs-light); --header-background-hov: var(--hs-light); --header-color-hov: var(--hs-primary); } .mv2Accordion.theme-dark { --header-background-closed: var(--hs-light); --header-color-closed: var(--text-color-primary); --header-color: var(--hs-dark); --header-background: var(--hs-light); --header-background-hov: var(--hs-light); --header-color-hov: var(--hs-dark); --body-background: #333; --body-color: #fff; } .mv2Accordion.theme-primary { --header-background-closed: var(--hs-light); --header-color-closed: var(--text-color-primary); --header-color: var(--hs-primary); --header-background: var(--hs-light); --header-background-hov: var(--hs-light); --header-color-hov: var(--hs-primary); --body-background: #E5EBF5; --body-color: var(--text-color-primary); } .mv2Accordion.theme-secondary { --header-background-closed: var(--hs-light); --header-color-closed: var(--text-color-primary); --header-color: var(--hs-secondary); --header-background: var(--hs-light); --header-background-hov: var(--hs-light); --header-color-hov: var(--hs-secondary); --body-background: #E9F8F9; --body-color: var(--text-color-primary); } .mv2Accordion.theme-tertiary { --header-background-closed: var(--hs-light); --header-color-closed: var(--text-color-primary); --header-color: var(--hs-tertiary); --header-background: var(--hs-light); --header-background-hov: var(--hs-light); --header-color-hov: var(--hs-tertiary); --body-background: #FDF0EF; --body-color: var(--text-color-primary); } .mv2Accordion { text-align: left; display: grid; grid-template-columns: 1fr; gap: var(--molecule-tiny-gap); } .mv2Accordion__title { margin: 0; } .mv2Accordion__body { display: grid; gap: 1px; grid-template-columns: 1fr; overflow: hidden; } .mv2Accordion__item { display: grid; grid-template-columns: 1fr; } .mv2Accordion__item-header { gap: 1rem; border: none; display: grid; cursor: pointer; border-radius: 0; font-weight: 700; text-align: left; align-items: center; transition: var(--global-trans); grid-template-columns: 1fr auto; font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-base); padding: var(--header-padding); border-bottom: 1px solid transparent; } /* OPEN + HOVER */ .closed .mv2Accordion__item-header { border-bottom: 1px solid var(--header-border-color); color: var(--header-color-closed); background: var(--header-background-closed); } /* OPEN + HOVER */ .mv2Accordion__item-header, .closed .mv2Accordion__item-header:hover{ color: var(--header-color); background: var(--header-background); } .mv2Accordion__item-header > i { transition: var(--global-trans); } .closed .mv2Accordion__item-header > i { transform: rotate(180deg); } .mv2Accordion__item-body { overflow: hidden; background: var(--body-background); border-radius: 0 var(--global-image-radius) var(--global-image-radius) var(--global-image-radius) } .mv2Accordion__item-body-padding { display: grid; grid-template-columns: 1fr; gap: 1px; padding: var(--body-padding); color: var(--body-color); } .mv2CardBlog { --card-theme: var(--themer, var(--hs-primary)); --card-pretitle-opacity: 0.5; --pretitle-opacity: var(--pretitle-opacity-o, var(--card-pretitle-opacity)); --pretitle-weight: var(--pretitle-weight-o, 600); --title-color: var(--title-color-o, var(--card-theme)); --title-weight: 600; --title-size: 1.175em; --trans: color var(--global-trans), background-color var(--global-trans); display: grid; grid-template-columns: [image-start header-start body-start] auto [body-end header-end image-end]; grid-template-rows: [image-start] auto [image-end header-start] auto [header-end body-start] 1fr [body-end]; box-shadow: 0px 0px 20px -5px rgba(36,48,48,0.25); border-radius: 2em 0 2em 2em; overflow: clip; } .mv2CardBlog:hover { --card-theme: var(--hs-secondary); text-decoration: none; } .mv2CardBlog__image { grid-area: image; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--global-trans); } .mv2CardBlog:hover .mv2CardBlog__image { transform: scale(1.1); } .mv2CardBlog__header { position: relative; grid-area: header; display: grid; gap: var(--atom-standard-gap); padding: var(--molecule-small-gap); color: var(--title-color); font-family: var(--font-family-heading); background: rgba(255,255,255,0.9); z-index: 20; } .mv2CardBlog:after { content: ''; grid-area: header; z-index: 1; background: var(--card-theme); transition: var(--trans); } .mv2CardBlog__pre-title { position: relative; z-index: 20; font-size: 0.875em; line-height: 1; font-weight: var(--pretitle-weight); color: var(--title-color); opacity: var(--pretitle-opacity); transition: var(--trans); } .mv2CardBlog__title { position: relative; z-index: 20; line-height: 1.2; font-weight: var(--title-weight); font-size: var(--title-size); transition: var(--trans); font-family: var(--font-family-heading); min-height: 3.625em; } .mv2CardBlog__body { grid-area: body; display: grid; gap: var(--molecule-small-gap); padding: var(--molecule-small-gap); background: white; grid-template-rows: 1fr auto; } .mv2CardBlog__intro { } .mv2CardBlog__actions { } .mv2Card__action { display: flex; align-items: center; justify-content: space-between; color: var(--title-color); font-size: 0.875em; font-weight: 600; transition: var(--trans); } .mv2Card__action i { transition: transform var(--global-trans); font-size: 0.875em; } .mv2CardBlog:hover .mv2Card__action i { transform: translateX(0.25em); } .mv2CardKeyInfo { --card-theme: var(--themer, var(--hs-primary)); --title-color: var(--title-color-o, var(--card-theme)); --title-weight: 600; --title-size: 1.375em; --trans: color var(--global-trans), background-color var(--global-trans); display: grid; grid-template-columns: [icon-start body-start] auto [body-end icon-end]; grid-template-rows: [icon-start] auto [icon-end body-start] 1fr [body-end]; box-shadow: 0px 0px 20px -5px rgba(36,48,48,0.25); border-radius: 2em 0 2em 2em; overflow: clip; } .mv2CardKeyInfo:hover { --card-theme: var(--themer-ho, var(--hs-secondary)); text-decoration: none; } .mv2CardKeyInfo__icon { grid-area: icon; width: 100%; height: auto; object-fit: cover; background-color: var(--card-theme); padding-inline: 30%; padding-block: 6%; transition: var(--trans); } .mv2CardKeyInfo .mv2Icon { transition: transform var(--global-trans); } .mv2CardKeyInfo .mv2Icon:after { display: none !important; } .mv2CardKeyInfo:hover .mv2Icon { transform: scale(1.05); } .mv2CardKeyInfo__body { grid-area: body; display: grid; gap: var(--molecule-tiny-gap); padding: var(--molecule-small-gap); background: white; } .mv2CardKeyInfo__title { position: relative; z-index: 20; color: var(--card-theme); line-height: 1.2; font-weight: var(--title-weight); font-size: var(--title-size); transition: var(--trans); display: grid; grid-template-columns: 1fr auto; gap: 0.75em; font-family: var(--font-family-heading); align-items: center; } .mv2CardKeyInfo__title i { transition: transform var(--global-trans); font-size: 0.75em; } .mv2CardKeyInfo:hover .mv2CardKeyInfo__title i { transform: translateX(0.25em); } .mv2CardKeyInfo__intro { font-size: 15px; } .mv2CardNoCard { --card-theme: var(--themer, var(--hs-primary)); --title-color: var(--title-color-o, var(--card-theme)); --title-weight: 600; --title-size: 1.375em; --trans: color var(--global-trans), background-color var(--global-trans); display: grid; grid-template-columns: [icon-start body-start] auto [body-end icon-end]; grid-template-rows: [icon-start] auto [icon-end body-start] 1fr [body-end]; overflow: clip; text-align: center; } .mv2CardNoCard__icon { grid-area: icon; width: 100%; height: auto; object-fit: cover; padding-inline: 30%; padding-block: 6%; transition: var(--trans); } .mv2CardNoCard .mv2Icon { transition: transform var(--global-trans); } .mv2CardNoCard .mv2Icon:after { display: none !important; } .mv2CardNoCard__body { grid-area: body; display: grid; gap: var(--molecule-tiny-gap); padding: var(--molecule-small-gap); background: none; } .mv2CardNoCard__title { position: relative; z-index: 20; color: var(--card-theme); line-height: 1.2; font-weight: var(--title-weight); font-size: var(--title-size); transition: var(--trans); display: grid; grid-template-columns: 1fr; gap: 0.75em; font-family: var(--font-family-heading); align-items: center; } .mv2CardNoCard__title i { transition: transform var(--global-trans); font-size: 0.75em; } .mv2CardNoCard__intro { color: var(--card-theme); } .mv2CardCourse { --card-theme: var(--themer, var(--hs-primary)); --trans: color var(--global-trans), background-color var(--global-trans); display: grid; grid-template-columns: [header-start body-start] auto [body-end header-end ]; grid-template-rows: [header-start] auto [header-end body-start] 1fr [body-end]; box-shadow: 0px 0px 20px -5px rgba(36,48,48,0.25); border-radius: 2em 0 2em 2em; overflow: clip; } .mv2CardCourse__header { padding: var(--molecule-small-gap); background: var(--card-theme); display: grid; gap: var(--atom-standard-gap); } .mv2CardCourse__logo { } .mv2CardCourse__logo-img { width: 120px; height: 120px; object-fit: contain; -webkit-filter: drop-shadow(0px 0px 10px rgba(36,48,48,0.25)); filter: drop-shadow(0px 0px 10px rgba(36,48,48,0.25)); } h2.mv2CardCourse__title { font-size: clamp(var(--h4-font-size-min), var(--h4-font-size-preferred), var(--h4-font-size-max)); font-weight: var(--h2-font-weight); letter-spacing: var(--h2-letter-spacing); line-height: var(--h2-line-height); text-shadow: 1px 1px 4px rgba(0,0,0,0.3); color: white; margin: 0; min-height: 3.75em; display: grid; align-items: center; } .mv2CardCourse__body { padding: var(--molecule-small-gap); background: white; display: grid; grid-template-columns: [intro-start benefits-start actions-start] 1fr [intro-end benefits-end actions-end]; grid-template-rows: [intro-start] 1fr [intro-end benefits-start] 1fr [benefits-end actions-start] auto [actions-end]; gap: var(--molecule-tiny-gap); } .mv2CardCourse__intro { grid-area: intro; font-size: 0.875em; } .mv2CardCourse__benefits { grid-area: benefits; } .mv2CardCourse__benefits ul { padding: 0; margin: 0; display: grid; gap: 0.5em; grid-template-columns: 1fr; list-style-type: none; } .mv2CardCourse__benefits li { padding: 0 0 0 0.5em; margin: 0; border-left: 4px solid var(--card-theme); font-weight: 600; } .mv2CardCourse__actions { grid-area: actions; display: grid; grid-template-columns: 1fr; overflow: clip; gap: 5px; } .mv2CardCourse__actions.cols-2{ grid-template-columns: 1fr 1fr; } .mv2CardCourse__actions.cols-3{ grid-template-columns: 1fr 1fr 1fr; } .mv2CardCourse__action, .mv2CardCourse__action:visited { display: flex; padding: var(--button-padding); background: var(--card-theme); align-items: center; justify-content: center; text-decoration: none; transition: var(--trans); color: white; font-weight: 600; border-radius: 0 } .mv2CardCourse__actions .mv2CardCourse__action:first-child{ border-bottom-left-radius: var(--button-border-radius); } .mv2CardCourse__actions .mv2CardCourse__action:last-child{ border-top-right-radius: var(--button-border-radius); border-bottom-right-radius: var(--button-border-radius); } .mv2CardCourse__action:hover { text-decoration: none; --card-theme: var(--themer-ho, var(--hs-secondary)); color: white; } .mv2CardCourse__action.disabled, .mv2CardCourse__action.disabled:hover{ opacity: 0.2; cursor: not-allowed; pointer-events: none; --card-theme: var(--themer, var(--hs-primary)); } .mv2CardSwimSchool { --card-theme: var(--themer, var(--hs-primary)); --card-pretitle-opacity: 0.5; --pretitle-opacity: var(--pretitle-opacity-o, var(--card-pretitle-opacity)); --pretitle-weight: var(--pretitle-weight-o, 600); --title-color: var(--title-color-o, var(--card-theme)); --title-weight: 600; --title-size: 1.175em; --trans: color var(--global-trans), background-color var(--global-trans); display: grid; grid-template-columns: [header-start body-start] 1fr [body-end header-end]; grid-template-rows: [header-start] auto [header-end body-start] auto [body-end]; align-items: center; box-shadow: 0px 0px 20px -5px rgba(36,48,48,0.25); border-radius: 2em 0 2em 2em; overflow: clip; } @container (width > 700px) { .mv2CardSwimSchool { grid-template-columns: [header-start] 2fr [header-end body-start] 1fr [body-end]; grid-template-rows: [header-start body-start] auto [body-end header-end]; } } .mv2CardSwimSchool__header { padding: var(--molecule-small-gap) var(--molecule-standard-gap); grid-area: header; display: grid; grid-template-columns: [title-start address-start] 1fr [title-end address-end logo-start] auto [logo-end]; grid-template-rows: [title-start logo-start] auto [title-end address-start] auto [address-end logo-end]; gap: var(--atom-standard-gap); } .mv2CardSwimSchool__title { grid-area: title; } .mv2CardSwimSchool__address { grid-area: address; display: grid; grid-template-columns: auto 1fr; gap: var(--atom-standard-gap); align-items: center; line-height: 1; } .mv2CardSwimSchool__address i { color: var(--hs-primary); transition: color 300ms; } .mv2CardSwimSchool__address:hover, .mv2CardSwimSchool__address:hover i { color: var(--hs-secondary); text-decoration: none; } .mv2CardSwimSchool__logo { grid-area: logo; width: 100%; max-width: 82px; max-height: 100%; aspect-ratio: 1 / 1; } .mv2CardSwimSchool__body { padding: var(--molecule-small-gap) var(--molecule-standard-gap); background: #E5EBF5; grid-area: body; display: grid; gap: var(--atom-standard-gap); height: 100%; align-items: center; text-align: center; } .mv2CardSwimSchool__actions { border-radius: var(--button-border-radius); overflow: clip; gap: 1px; display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .mv2CardSwimSchool__action { display: grid; justify-content: center; align-items: center; gap: 0.5em; padding: var(--button-padding); font-size: var(--button-font-size); line-height: var(--button-line-height); text-align: center; text-decoration: none; cursor: pointer; transition: var(--button-transition); box-sizing: border-box; text-decoration: none; background: white; color: var(--hs-primary); font-weight: 600; } .mv2CardSwimSchool__action:visited{ color: var(--hs-primary); } .mv2CardSwimSchool__action:hover { text-decoration: none; background: var(--hs-secondary); color: var(--hs-secondary--text-over); } .mv2CardSwimSchool__action:only-child { grid-column: 1 / 3; } .mv2CardSwimSchool__action-phone:hover{ text-decoration: none; } .mv2CardSwimSchool__action-phone:hover h4{ color: var(--hs-secondary); } .mv2CourseClasses .mv2Filters{ display: block; margin-bottom: var(--molecule-standard-gap); } .mv2CourseClasses .mv2FiltersForm{ grid-template-columns: 1fr 1fr 1fr 1fr !important } .mv2CourseClassesGrid{ display: grid; gap: var(--molecule-tiny-gap); grid-template-columns: 1fr; /* overflow-y: scroll; max-height: 70vh; */ } /* @media screen and (max-width: 899px){ .mv2CourseClassesGrid{ max-height: calc(100vh - 12em); } } */ .mv2CardCourseClass { --card-theme: var(--themer, var(--hs-primary)); --card-pretitle-opacity: 0.5; --pretitle-opacity: var(--pretitle-opacity-o, var(--card-pretitle-opacity)); --pretitle-weight: var(--pretitle-weight-o, 600); --title-color: var(--title-color-o, var(--card-theme)); --title-weight: 600; --title-size: 1.175em; --trans: color var(--global-trans), background-color var(--global-trans); display: grid; grid-template-columns: [header-start body-start] 1fr [body-end header-end]; grid-template-rows: [header-start] auto [header-end body-start] auto [body-end]; align-items: center; border-radius: 2em 0 2em 2em; overflow: clip; border: 1px solid #E5EBF5; } .mv2CardCourseClass:hover{ background-color: rgb(229, 235, 245, 0.3); } @container (width > 700px) { .mv2CardCourseClass { grid-template-columns: [header-start] 2fr [header-end body-start] 1fr [body-end]; grid-template-rows: [header-start body-start] auto [body-end header-end]; } } .mv2CardCourseClass .mv2Title{ font-weight: bold; } .mv2CardCourseClass__header { padding: var(--molecule-tiny-gap) var(--molecule-tiny-gap); grid-area: header; display: grid; grid-template-columns: 1fr; gap: var(--atom-tiny-gap); } .mv2CardCourseClass__address { display: grid; grid-template-columns: auto 1fr; gap: var(--atom-standard-gap); align-items: center; line-height: 1; } .mv2CardCourseClass__address i { color: var(--hs-primary); } .mv2CardCourseClass__header-content{ display: grid; grid-template-columns: 1fr; /* 2fr 1fr; */ } .mv2CardCourseClass__meta, .mv2CardCourseClass__dates{ display: grid; grid-template-columns: 1fr; } .mv2CardCourseClass__extra{ display: flex; justify-content: space-between; flex-wrap: wrap; } .mv2CardCourseClass__body { padding: var(--molecule-tiny-gap) var(--molecule-tiny-gap); background: #E5EBF5; grid-area: body; display: grid; gap: var(--atom-tiny-gap); height: 100%; align-items: center; text-align: center; } .mv2CardCourseClass__actions { border-radius: var(--button-border-radius); overflow: clip; gap: 1px; display: grid; grid-template-columns: 1fr; width: 100%; } .mv2CardCourseClass__action { display: grid; justify-content: center; align-items: center; gap: 0.5em; padding: var(--button-padding); font-size: var(--button-font-size); line-height: var(--button-line-height); text-align: center; text-decoration: none; cursor: pointer; transition: var(--button-transition); box-sizing: border-box; text-decoration: none; background: white; color: var(--hs-primary); font-weight: 600; border-radius: var(--button-border-radius); } .mv2CardCourseClass__action:hover { text-decoration: none; background: var(--hs-secondary); color: var(--hs-secondary--text-over); } .mv2CardCourseClass__action:only-child { grid-column: 1 / 3; } *:has(> .mv2Slider ) { container-type: inline-size; } .mv2Slider { display: flex; gap: var(--molecule-standard-gap); overflow: clip; overflow: visible; align-items: center; justify-content: center; --actions: 3em; container-type: inline-size; } .mv2Slider.flickity-enabled { overflow: visible; display: grid; grid-template-columns: [stage-start] 1fr [prever-start] auto [prever-end dots-start] auto [dots-end nexter-start] auto [nexter-end] 1fr [stage-end]; grid-template-rows: [stage-start] auto [stage-end nexter-start prever-start dots-start] var(--actions) [prever-end nexter-start dots-end]; } .mv2Slider .flickity-viewport { overflow: visible; width: 100%; grid-area: stage; } .mv2Slider .flickity-prev-next-button { all: unset; display: grid; place-content: center; position: static !important; top: auto !important; left: auto !important; bottom: auto !important; right: auto !important; width: var(--actions) !important; height: var(--actions) !important; border-radius: 50%; transform: none; aspect-ratio: 1 / 1; } .flickity-prev-next-button .flickity-button-icon { position: static !important; width: 1.25em !important; height: 1.5em !important; } .mv2Slider .flickity-prev-next-button.previous { grid-column: 2; grid-row: 2; } .mv2Slider .flickity-prev-next-button.next { grid-column: 4; grid-row: 2; } .mv2Slider .flickity-page-dots { position: static !important; grid-area: dots; grid-column: 3; grid-row: 2; display: flex; flex-wrap: wrap; width: auto; height: 100%; min-width: 100%; top: auto !important; left: auto !important; bottom: auto !important; right: auto !important; justify-content: center; min-height: var(--actions) !important; align-items: center; row-gap: 0.5em; left: auto; right: auto; margin-inline: auto; } .mv2Slider .flickity-slider > .slider-item { width: 100%; max-width: 100%; margin-right: var(--molecule-standard-gap); /* Optional: adds space between columns */ opacity: 0.05; filter: blur(5px); transition: opacity 500ms, filter 500ms; } .mv2Slider.flickity-enabled .slider-item { min-height: 100%; } .mv2Slider.flickity-enabled .flickity-slider .slider-item.is-selected { opacity: 1 !important; filter: blur(0); } /* ——— 1 item BEFORE the selected blocks ——— */ .mv2Slider.flickity-enabled .slider-item:has(+ .slider-item + .slider-item:nth-child(1 of .is-selected)) { opacity: 0.1; } .mv2Slider.flickity-enabled .slider-item:has(+ .slider-item:nth-child(1 of .is-selected)) { opacity: 0.2; } .mv2Slider.flickity-enabled .slider-item:nth-child(1 of .is-selected) + .slider-item { opacity: 0.2; } .mv2Slider.flickity-enabled .slider-item:nth-child(2 of .is-selected) + .slider-item { opacity: 0.2; } .mv2Slider.flickity-enabled .slider-item:nth-child(3 of .is-selected) + .slider-item { opacity: 0.2; } .mv2Slider.flickity-enabled .slider-item:nth-child(4 of .is-selected) + .slider-item { opacity: 0.2; } /* 1. Make every slider a container */ .mv2Slider { container-type: inline-size; } /* 2. Column layout — super short & bulletproof */ @container (width < 960px) { .mv2Slider .flickity-slider > .slider-item { max-width: calc(100% - var(--molecule-standard-gap) * .5); } } @container (width >= 960px) { .mv2Slider[data-columns="3"] .flickity-slider > .slider-item, .mv2Slider[data-columns="4"] .flickity-slider > .slider-item { max-width: calc(33.333% - var(--molecule-standard-gap) * .666); } } @container (width >= 1200px) { .mv2Slider[data-columns="4"] .flickity-slider > .slider-item { max-width: calc(25% - var(--molecule-standard-gap) * .75); } } *:has(> .mv2Filters) { container-type: inline-size; } .mv2Filters { --trans: color var(--global-trans), background-color var(--global-trans); --bar-height: 3em; width: 100%; max-width: 1200px; margin-inline: auto; display: grid; align-items: center; grid-template-columns: 1fr; gap: 2px; } .mv2FiltersForm { border-radius: 0 1em 1em 1em; overflow: clip; display: grid; align-items: center; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: var(--bar-height) var(--bar-height); padding: 0; margin: 0; gap: 2px; } .mv2FiltersTitle { grid-column: span 8; font-weight: 600; font-size: 1.25em; } .mv2Filters select.mv2Filter, .mv2Filters input.mv2Filter { display: grid; align-items: center; height: 100%; min-height: var(--bar-height) !important; padding: var(--molecule-small-gap) var(--molecule-standard-gap); background-color: rgba(0, 59, 159, 0.1) !important; text-indent: 0.75em; transition: var(--trans); font-weight: 600; border: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; --field-border-size: 0px; } .mv2Filters select.mv2Filter { grid-column: span 4; } .mv2Filters input.mv2Filter { grid-column: span 7; } @container (width > 750px) { .mv2FiltersForm { border-radius: 0 2em 2em 2em; grid-template-columns: 1fr 1fr 1fr auto; grid-template-rows: var(--bar-height); } .mv2Filters select.mv2Filter { grid-column: span 1; } .mv2Filters input.mv2Filter { grid-column: span 1; } .mv2FiltersTitle { grid-column: span 4; } } .mv2Filters select.mv2Filter:focus, .mv2Filters input.mv2Filter:focus { background-color: rgba(0, 59, 159, 0.2) !important; } .mv2Filters button.mv2FilterSubmit { padding-inline: var(--molecule-small-gap); height: 100%; margin: 0; appearance: none; border: none; background: var(--hs-primary); color: var(--hs-primary--text-over); font-size: 1.5em; cursor: pointer; display: grid; place-content: center; transition: var(--trans); } .mv2Filters button.mv2FilterSubmit:hover { background: var(--hs-secondary); color: var(--hs-secondary--text-over); } .mv-accordion { text-align: left; display: grid; grid-template-columns: 1fr; gap: var(--molecule-tiny-gap); } .mv-accordion__title { margin: 0; } .mv-accordion__body { display: grid; gap: 1px; grid-template-columns: 1fr; overflow: hidden; } .mv-accordion__item { background: var(--accent-4); display: grid; grid-template-columns: 1fr; } .mv-accordion__item-header { gap: 1rem; border: none; display: grid; cursor: pointer; border-radius: 0; font-weight: 700; text-align: left; align-items: center; transition: var(--global-trans); grid-template-columns: 1fr auto; padding: var(--atom-standard-gap); font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-base); } /* OPEN */ .mv-accordion__item-header { color: var(--hs-primary); background: var(--hs-accent-4--dark); } /* OPEN HOVER */ .mv-accordion__item-header:hover{ color: var(--hs-primary--text-over); background: var(--hs-primary); } /* CLOSED */ .mv-accordion__item-header.closed { color: var(--hs-primary); background: var(--hs-accent-4); } /* CLOSED HOVER */ .mv-accordion__item-header.closed:hover { color: var(--hs-primary); background: var(--hs-accent-4--dark); } .mv-accordion__item-header > i { transition: var(--global-trans); } .mv-accordion__item-header.closed > i { transform: rotate(180deg); } .mv-accordion__item-body { overflow: hidden; background: var(--hs-accent-4); } .mv-accordion__item-body-padding { display: grid; grid-template-columns: 1fr; gap: 1px; padding: var(--molecule-standard-gap); } .mv-single-quote{ position: relative; display: grid; gap: 0; } .mv-single-quote .icon svg{ fill: var(--hs-primary); width: 4em; height: 4em; } .scheme--light .mv-single-quote .icon svg{ fill: var(--hs-secondary); } .icon.mv-single-quote--before, .icon.mv-single-quote--after{ padding: 0; font-size: 1em; position: absolute; color: var(--hs-primary); } .mv-single-quote--before{ left: calc(var(--molecule-standard-gap) * -1); top: calc(var(--molecule-standard-gap) * -1); } .mv-single-quote--after{ right: calc(var(--molecule-standard-gap) * -1); bottom: calc(var(--molecule-standard-gap) * -1); } .mv-single-quote > .button + .mv-single-quote--after{ bottom: 0; } .mv-single-quote > .button{ border-top-left-radius: 0; border-top-right-radius: 0; padding: var(--molecule-tiny-gap) var(--molecule-small-gap); margin-right: auto; } .mv-single-quote.has-link .style--mv-card{ border-bottom-left-radius: 0; } ul.mv-socials{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; gap: 0.75em; align-items: center; align-content: center; } .mv-socials__item{ margin: 0; padding: 0; } .mv-socials__item > a{ } .mv-socials__item > a svg{ display: block; font-size: var(--font-size-base); width: 1em; } .mv-breadcrumbs { display: flex; align-items: center; justify-content: center; padding-top: var(--molecule-standard-padding); padding-inline: var(--window-padding--inline); } .mv-breadcrumbs__content { display: flex; gap: 0.5em; padding-block: var(--molecule-standard-gap); align-items: center; width: 100%; max-width: var(--max-width); } .mv-breadcrumbs i { font-size: 0.5em; } .style--mv-card{ overflow: hidden; box-shadow: var(--box-shadow); border-radius: var(--global-radius-md); transition: box-shadow var(--global-trans); background-color: var(--hs-white); } .style--mv-card-padding{ padding: var(--molecule-standard-gap); } .mv-card { display: grid; align-items: flex-start; overflow: hidden; text-align: left; box-shadow: var(--box-shadow); border-radius: var(--global-radius-md) 0 var(--global-radius-md) var(--global-radius-md); transition: box-shadow var(--global-trans); background-color: var(--hs-white); grid-template-rows: auto 1fr; } .mv-card__header { overflow: hidden; position: relative; border-bottom-right-radius: var(--global-radius-md); } .mv-card__body { padding: var(--molecule-standard-gap); align-items: flex-start; height: 100%; justify-content: flex-start; } .mv-card__body ul { padding-left: 0; list-style-type: none; } .mv-card__body ul li { padding-left: 0.75em; border-left: 3px solid var(--hs-primary); color: var(--hs-primary); font-weight: 700; } .mv-card__image { } .mv-card__img { display: block; width: 100%; height: auto; aspect-ratio: 48/40; border-radius: 0; object-fit: cover; } .mv-card__title-wrapper{ padding: var(--molecule-standard-gap); background-color: var(--hs-primary); color: var(--hs-primary--text-over); } .mv-card .mv-card__title, .mv-card .mv-card__pre-title, .mv-card .mv-card__sub-title{ color: var(--hs-primary--text-over); } .mv-card__pre-title, .mv-card__sub-title{ opacity: 0.5; } .mv-card__pre-title{ } .with-link .mv-card__title-item-wrapper{ display: flex; align-items: center; justify-content: space-between; } .mv-card__title{ } .mv-card__sub-title{ } .mv-card__copy{ } .mv-card:hover { text-decoration: none; box-shadow: var(--box-shadow); } .mv-card.with-header-image .mv-card__title-wrapper{ bottom: 0; width: 100%; position: absolute; background-color: var(--hs-primary--90pc); } .mv-card.people-card { background-color: transparent; box-shadow: unset; } .people-card .mv-card__header { } .people-card .mv-card__header i{ display: none; } .people-card .mv-card__body { } .people-card .mv-card__image { } .people-card .mv-card__img { border-radius: var(--global-image-radius); } .people-card.with-header-image .mv-card__title-wrapper{ text-align: center; position: static !important; background: transparent none; color: var(--text-color-primary); padding: var(--molecule-small-gap); } .people-card .mv-card__title, .people-card .mv-card__sub-title{ text-align: center; color: var(--text-color-primary); font-size: clamp(18px, 3vw, 22px); line-height: 1.2; } .people-card .mv-card__sub-title { font-size: 14px; display: block; } .people-card .mv-card__title-item-wrapper{ padding-bottom: 8px; display: block; } .people-card .mv-card__title{ } .people-card .mv-card__sub-title{ } .people-card .mv-card__copy{ } .mv-card:hover { } .news-card { /* display: grid; */ /* gap: var(--molecule-standard-gap); */ border-radius: var(--global-radius); text-align: left; transition: box-shadow var(--global-trans); width: 100%; display: flex; flex-direction: column; } .news-card__image { width: 100%; } .news-card__img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border-radius: 0; object-fit: cover; } .news-card__body { display: grid; gap: var(--atom-standard-gap); text-align: left; padding: var(--molecule-standard-gap); height: 100%; grid-template-rows: auto auto auto 1fr; } .news-card.with-featured .news-card__body{ padding-top: 0; } .news-card__title.h4 { margin-block: 0; } .news-card__intro { font-size: var(--font-size-sm); } .news-card__date { font-size: var(--font-size-xsm); opacity: 0.5; } .news-card__tags { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 0.25em; padding-top: 0.5em; } .news-card:hover { text-decoration: none; box-shadow: var(--box-shadow) } aside.mv2BlogFilters-bg{ background-color: rgba(0, 59, 159, 0.1); border-radius: var(--global-image-radius); } .mv2BlogFilters{ padding: var(--molecule-small-gap); } .blog-filters { display: flex; font-size: 1em; color: var(--hs-primary); gap: var(--molecule-small-gap); } .blog-filters--label{ } .blog-filters--form{ } .blog-filters--form .filter-input { } .blog-filters--form input.filter-input{ border: 1px solid #ccc !important; } .blog-filters--form input.filter-input.checkbox{ } .blog-filters--form select.filter-input{ } .mv-pagination{ display: flex; padding-inline: 0; padding-block: var(--organism-standard-gap); align-items: center; justify-content: center; gap: clamp(0, 1vw, 10px); } .mv-pagination__link{ cursor: pointer; padding: var(--atom-tiny-gap); border-radius: var(--global-radius-sm); min-width: 32px; text-align: center; display: block; } .mv-pagination__link:hover, .mv-pagination__link.active, .mv-pagination__current{ text-decoration: none; background-color: var(--hs-accent-4--dark); } .mv-pagination__skipped, .mv-pagination__link.active{ pointer-events: none; } .mv2Pagination .mv-pagination{ padding-bottom: 0; } .membership-card { text-align: left; --gutter-inline: 2rem; --gutter-block: 1.5rem; --module-columns: [full-start] var(--gutter-inline) [content-start] 1fr [content-end] var(--gutter-inline) [full-end]; background: white; border-radius: 1em; overflow: clip; display: flex; flex-direction: column; align-items: flex-start; box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.5); } .membership-card .hs-video-widget { width: 100%; grid-column: full; grid-row: image; } .membership-card__header { background: var(--hs-secondary); color: var(--hs-secondary--text-over); display: grid; width: 100%; grid-template-columns: var(--module-columns); grid-template-rows: var(--gutter-block) [title-start] auto [title-end sub-title-start] auto [sub-title-end] var(--gutter-block) [image-start] auto [image-end costs-start] auto [costs-end]; } .membership-card__title { margin: 0; grid-column: content; grid-row: title; color: inherit !important; text-wrap: balance; display: grid; gap: 1em; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; } .membership-card__sub-title { margin: 0; grid-column: content; grid-row: sub-title; color: inherit !important; text-wrap: balance } figure.membership-card__image { grid-column: full; grid-row: image; } figure.membership-card__image img.mv-image { border-radius: 0 !important; aspect-ratio: 16 / 9; object-fit: cover; } .membership-card__costs { grid-column: content; grid-row: costs; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; padding-block: var(--gutter-block); align-items: center; } @media (min-width: 475px) { .membership-card__costs { grid-template-columns: 1fr 1fr; } } .membership-card__price-group { display: flex; justify-content: space-between; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; column-gap: var(--gutter-inline); align-items: center; } .membership-card__price { line-height: 1.2; text-align: center; } .membership-card__value { font-weight: bold; font-size: clamp(var(--h2-font-size-min), var(--h2-font-size-preferred), var(--h2-font-size-max)); } .membership-card__value span { } .membership-card__frequency { } .membership-card__price-action { display: grid; align-items: center; justify-content: center; padding-top: 1em; } @media (min-width: 475px) { .membership-card__price-action { justify-content: flex-end; padding-top: 0; } } .membership-card.dark .membership-card__header { background: var(--hs-primary); color: var(--hs-primary--text-over); } .membership-card__body { color: var(--text-color-primary); display: grid; row-gap: 1em; grid-template-columns: var(--module-columns); padding-block: var(--gutter-block); align-items: flex-start; } .membership-card__body-title { grid-column: content; font-size: clamp(20px, 4vw, 26px); font-weight: bold; line-height: 1.1; text-wrap: balance; color: var(--hs-primary); } .membership-card__body-description { grid-column: content; text-wrap: balance } .membership-card__body-groups { grid-column: content; display: grid; gap: 0.5em; } .membership-card__feature-group { } .membership-card__feature-group-title { display: grid; gap: 1em; grid-template-columns: auto 1fr 70px; grid-template-rows: 1fr; align-items: center; } .membership-card__feature-group-title:has( + .membership-card__feature-group-items) { cursor: pointer; } .membership-card__feature-group-check { font-size: 40px; opacity: 0.5; color: #465778; line-height: 1; transition: opacity 300ms; } .active .membership-card__feature-group-check { opacity: 1; } .membership-card__feature-group-label { font-weight: bold; font-size: clamp(16px, 2vw, 20px); color: var(--hs-primary); line-height: 1.1; } .membership-card__feature-group-icon { background: var(--hs-secondary); color: var(--hs-primary); border-radius: 50vw; text-align: center; font-weight: bold; line-height: 1; height: 34px; display: grid; place-content: center; line-height: 1; transition: opacity 300ms; } .active .membership-card__feature-group-icon { opacity: 0; } .membership-card__feature-group-items { border-left: 2px solid var(--hs-secondary); padding-left: 0.5em; max-height: 0px; overflow: clip; transition: max-height 300ms, margin 300ms; } .active .membership-card__feature-group-items { margin-top: 0.5em; max-height: var(--items-height, 200vw); } .membership-card__feature { display: grid; gap: 1em; grid-template-columns: 1fr 70px; grid-template-rows: 1fr; font-size: min(0.875em, 16px); } .membership-card__feature-label {} .membership-card__feature-icon { text-align: center; } .membership-card__feature-icon span { font-weight: bold; color: var(--hs-secondary); } .membership-card__footer { width: 100%; display: grid; row-gap: 1em; grid-template-columns: var(--module-columns); margin-top: auto; } .membership-card__footer-body { padding-block: var(--gutter-block); border-top: 1px solid var(--hs-primary); grid-column: content; } .membership-card__button { grid-column: content; } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv2SchoolFinder { display: grid; grid-template-columns: 1fr; gap: var(--organism-standard-gap); padding-inline: var(--window-padding--inline); } .mv2SwimSchools { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 1200px; margin-inline: auto; gap: var(--molecule-standard-gap); container-type: inline-size; } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv-card-slider { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--organism-standard-gap); } .mv-card-slider--service { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .mv-card-slider--people { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .mv-card-slider .flickity-viewport { overflow: visible; overflow-x: clip; } .mv-card-slider__item { width: 100%; max-width: calc(50% - var(--organism-standard-gap)); min-height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; margin-right: var(--organism-standard-gap); } .mv-card-slider { position: relative; } .mv-card-slider.soft-edges:before { content: ''; position: absolute; left: 0; top: 0; width: 20%; height: 100%; background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); z-index: 100; } .mv-card-slider.soft-edges:after { content: ''; position: absolute; right: 0; top: 0; width: 20%; height: 100%; background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); z-index: 100; } .mv-card-slider--people .mv-card-slider__item{ max-width: 192px; } .mv-card-slider--news .mv-card-slider__item { max-width: 400px; } .mv-card-slider--service .mv-card-slider__item { max-width: 350px; } .mv-card-slider__actions { display: flex; align-items: center; justify-content: center; gap: 1em; margin-top: var(--organism-standard-gap); } .mv-card-slider__button { color: var(--hs-primary); } .mv-card-slider__action { aspect-ratio: 1/1; border-radius: 100vw; border: 2px solid; color: black; width: 3em; height: 3em; background: none; padding: 0; display: grid; place-content: center; transition: background 300ms; } .mv-card-slider__action:hover { color: black; border-color: black; background: #f5f6f9; } .mv-card-slider__action:disabled { pointer-events: none; opacity: 0.25; } /* .mv-card-slider__item > * { outline: 1px solid rgba(0,0,0,0); transition: outline var(--global-trans), box-shadow var(--global-trans); } .mv-card-slider__item.is-selected > * { outline: 1px solid rgba(0,0,0,0.15); } .mv-card-slider__item.is-selected:hover > * { outline: 1px solid rgba(0,0,0,0); } */ /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--organism-standard-gap); } .mv-grid--people { grid-template-columns: repeat(auto-fit, 12rem); } body.modal-open{ overflow: hidden; position: fixed; height: 100%; } .mv-modal{ opacity: 0; display: none; padding: 0; position: fixed; inset: 0; z-index: 2147483647; background-color: var(--modal-backdrop-bg); padding: var(--molecule-standard-gap); --modal-padding: var(--molecule-standard-gap); } .mv-modal.open{ opacity: 1; display: block; } .mv-modal__inner{ display: block; padding: 0; height: 100vh; width: 100%; max-height: calc(100vh - var(--molecule-standard-gap) - var(--molecule-standard-gap)); } .mv-modal-wrapper{ } .mv-modal-wrapper__inner{ position: relative; } .mv-modal-close{ position: absolute; top: var(--molecule-standard-gap); right: var(--molecule-standard-gap); font-size: var(--h3-font-size-min); border-radius: 100%; line-height: 1; color: var(--modal-close-label); background-color: var(--modal-close-bg); display: block; height: 1em; width: 1em; border: 0 none; cursor: pointer; z-index: 99; } .mv-modal-close:hover{ color: var(--modal-close-label-hover); background-color: var(--modal-close-bg-hover); } .mv-modal-body{ display: grid; gap: var(--modal-padding); color: var(--modal-body-color); background-color: var(--modal-body-bg); border-radius: var(--global-radius); padding: var(--molecule-standard-gap); } .mv-modal-body--inner{ overflow-x: hidden; overflow-y: scroll; max-height: calc(100vh - (var(--molecule-standard-gap) * 4)); } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv-grid--module { --module-gutter-inline: var(--window-padding--inline); --module-gutter-block: min(20px, 3vw, 40px); --module-margin-block: clamp(20px, 3vw, 40px); --module-margin-inline: clamp(20px, 3vw, 40px); --content-max-width: 1200px; --breakout-max-width: 1300px; --breakout-size: minmax(0, calc((var(--breakout-max-width) - var(--content-max-width)) / 2)); --content-size: min(100vw - (var(--module-gutter-inline) * 2.5), var(--content-max-width)); --content-size--half: calc(var(--content-size) / 2); --content-size--third: calc(var(--content-size) / 3); --content-size--quarter: calc(var(--content-size) / 4); --content-col: 1fr; --mv-grid--module__columns--mobile: [full-start] var(--module-gutter-inline) [gutter-start breakout-start content-start content-col-1-start content-col-2-start content-col-3-start] 1fr [content-col-1-end content-col-2-end content-col-3-end content-end breakout-end gutter-end] var(--module-gutter-inline) [full-end]; --mv-grid--module__columns--half: [full-start] var(--module-gutter-inline) [gutter-start] 1fr [breakout-start] var(--breakout-size) [content-start content-col-1-start] var(--content-size--half) [content-col-1-end content-col-2-start] var(--content-size--half) [content-col-2-end content-end] var(--breakout-size) [breakout-end] 1fr [gutter-end] var(--module-gutter-inline) [full-end]; --mv-grid--module__columns--thirds: [full-start] var(--module-gutter-inline) [gutter-start] 1fr [breakout-start] var(--breakout-size) [content-start content-col-1-start] var(--content-size--third) [content-col-1-end content-col-2-start] var(--content-size--third) [content-col-2-end content-col-3-start] var(--content-size--third) [content-col-3-end content-end] var(--breakout-size) [breakout-end] 1fr [gutter-end] var(--module-gutter-inline) [full-end]; --mv-grid--module__rows--half: [full-start] var(--module-gutter-block) [gutter-start breakout-start content-start content-col-1-start content-col-2-start] 1fr [content-col-1-end content-col-2-end content-end breakout-end gutter-end] var(--module-gutter-block) [full-end]; --mv-grid--module__rows--thirds: [full-start] var(--module-gutter-block) [gutter-start breakout-start content-start content-col-1-start] auto [content-col-1-end content-col-2-start] auto [content-col-2-end content-col-3-start] auto [content-col-3-end content-end breakout-end gutter-end] var(--module-gutter-block) [full-end]; grid-column: main; display: grid; grid-template-columns: var(--mv-grid--module__columns--mobile); grid-template-rows: var(--mv-grid--module__rows--half); min-height: 200px; overflow: clip; } .content-grid-half:has(.mv-super-module__content:nth-of-type(2)), .content-grid-thirds:has(.mv-super-module__content:nth-of-type(2)) { grid-template-rows: var(--mv-grid--module__rows--half); } .content-grid-thirds:has(.mv-super-module__content:nth-of-type(3)) { grid-template-rows: var(--mv-grid--module__rows--thirds); } .col-full-start { grid-column-start: full; } .col-full-end { grid-column-end: full; } .col-gutter-start { grid-column-start: gutter; } .col-gutter-end { grid-column-end: gutter; } .col-breakout-start { grid-column-start: breakout; } .col-breakout-end { grid-column-end: breakout; } .col-content-start { grid-column-start: content; } .col-content-end { grid-column-end: content; } .col-content-col-1-start { grid-column-start: content-col-1; } .col-content-col-1-end { grid-column-end: content-col-1; } .col-content-col-2-start { grid-column-start: content-col-2; } .col-content-col-2-end { grid-column-end: content-col-2; } .row-full-start { grid-row-start: full; } .row-full-end { grid-row-end: full; } .row-gutter-start { grid-row-start: gutter; } .row-gutter-end { grid-row-end: gutter; } .row-breakout-start { grid-row-start: breakout; } .row-breakout-end { grid-row-end: breakout; } .row-content-start { grid-row-start: content; } .row-content-end { grid-row-end: content; } .row-content-col-1-start { grid-row-start: content-col-1; } .row-content-col-1-end { grid-row-end: content-col-1; } .row-content-col-2-start { grid-row-start: content-col-2; } .row-content-col-2-end { grid-row-end: content-col-2; } .grid-area-full { grid-area: full; } .grid-area-gutter { grid-area: gutter; } .grid-area-breakout { grid-area: breakout; } .grid-area-content { /* grid-row: 1; */ grid-area: content; } .grid-area-content-col-1 { grid-area: content-col-1; } .grid-area-content-col-2 { grid-area: content-col-2; } .grid-area-content-col-3 { grid-area: content-col-3; } @media all and (min-width: 600px) { .mv-grid--module { grid-template-columns: var(--mv-grid--module__columns--half); } .content-grid-half { grid-template-columns: var(--mv-grid--module__columns--half); } .content-grid-thirds { grid-template-columns: var(--mv-grid--module__columns--thirds); grid-template-rows: var(--mv-grid--module__rows--thirds); } .content-grid-half:has(.mv-super-module__content:nth-of-type(2)), .content-grid-thirds:has(.mv-super-module__content:nth-of-type(2)), .content-grid-thirds:has(.mv-super-module__content:nth-of-type(3)) { grid-template-rows: 1fr; } } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv-super-module { grid-column: main; min-height: 200px; overflow: clip; } .mv-super-module__content { z-index: 10; color: white; display: grid; place-content: center; min-height: 400px; text-align: center; } .mv-super-module__content-media { z-index: 10; min-height: 100%; } .mv-super-module { position: relative; min-height: clamp(400px, 50vw, var(--max-height-desktop)) !important; } .height-full.mv-super-module { height: 100vh !important; } .line-separator { content: ''; display: block; width: 200px; height: 3px; border-radius: 10px; background: var(--heading-color); } .line-separator--faded { opacity: 0.25; } .line-separator--left { margin-right: auto; } .line-separator--center { margin-inline: auto; } .line-separator--right { margin-left: auto; } .module { padding-inline: var(--window-padding--inline); width: 100%; text-align: center; overflow: clip; } .module__inner { display: grid; grid-template-columns: 1fr; place-content: center; width: 100%; gap: var(--organism-standard-gap); max-width: var(--max-width); padding-block: var(--module-padding--block); margin-inline: auto; } .module-header { display: grid; gap: var(--molecule-standard-gap); } .mv-title__wrapper, .module-header__wrapper { display: grid; gap: var(--molecule-tiny-gap); } .mv-title__pre-title, .module-header__pre-title { color: var(--module-pretitle-color); } .mv-title__wrapper{ display: grid; gap: 0; } .mv-title__title, h1.module-header__title, h2.module-header__title, h3.module-header__title, h4.module-header__title, h5.module-header__title, h6.module-header__title{ margin-top: 0; margin-bottom: 0; color: var(--module-title-color); } .mv-title__sub-title, .module-header__sub-title { color: var(--module-subtitle-color); } .module-header__intro { font-size: 1.125em; } .module--text-left .module-header .line-separator--center{ margin-left: 0; margin-right: auto; } .module--text-right .module-header .line-separator--center{ margin-left: auto; margin-right: 0; } .scheme--light { } .scheme--dark { } .module--block-left .module__inner { justify-content: flex-start; } .module--md-block-left .module__inner { justify-content: flex-start; } .module--md-block-center { } .module--md-block-right { justify-content: flex-end; } .module--text-left { text-align: left; } .module--text-center { text-align: center; } .module--text-right { text-align: right; } .scheme--dark .module-header__title{ color: var(--module-title-color--dark); } .scheme--dark .module-header__pre-title{ color: var(--module-pretitle-color--dark); } .scheme--dark .module-header__sub-title{ color: var(--module-subtitle-color--dark); } .scheme--dark .module-header__intro { color: var(--hs-primary--text-over); } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .mv2-module__background { display: grid; place-content: center; grid-template-columns: 1fr; grid-template-rows: 1fr; position: relative; z-index: 1; } .height-full .mv-background-img, .height-content .mv-background-img { max-height: 100%; } .mv-background-image { display: grid; min-height: 100%; border-radius: 0; width: 100%; } .mv-background-img { width: 100%; height: auto; min-height: 100%; object-fit: cover; border-radius: 0 !important; display: grid; border-radius: 0; z-index: 1; } .mv-background-img.current { z-index: 10 !important; } .mv-super-module__background--image { z-index: 1; display: grid; width: 100%; height: auto; object-fit: cover; max-height: 100dvh; min-height: 100%; border-radius: 0 !important; } .height-full .mv-super-module__background--image, .height-content .mv-super-module__background--image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mv-background-image-slider{ display: grid; grid-template-columns: [full-start] 1fr [full-end]; grid-template-rows: [full-start] 1fr [full-end]; position: relative; z-index: 1; overflow: clip; } .height-full .mv-background-image-slider, .height-content .mv-background-image-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mv-background-image-slider .mv-background-img { position: relative; z-index: 1; grid-area: full; } .mv-background-image-slider .mv-background-img.active { z-index: 10; } .mv2-module__background:has( > .mv-background-video) { position: relative; overflow: clip; } .mv-background-video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%; } /* Ensure iframe fills properly */ .mv-background-video__element { aspect-ratio: 16 / 9; width: auto; height: auto; min-width: 100%; min-height: 100%; } /* @media screen and (width < 940px) { .mv2-module__background.grid-area-content { grid-row-start: content-start; grid-row-end: content-end; grid-column-start: content; grid-column-end: content; } .mv2-module__background.row-content-col-2-end { grid-row-end: content-col-2; } .mv2-module__background.row-content-col-2-start { grid-row-start: content-col-2; } .mv2-module__background.col-content-col-2-end { grid-column-end: content-col-2; } .mv2-module__background.col-content-col-2-start { grid-column-start: content-col-2; } }*/ *:has(> .mv2-grid) { container-type: inline-size; container-name: mv2-grid-container; } *:has(> .mv2GridElements) { container-type: inline-size; } .mv2GridElements { display: grid; gap: var(--molecule-standard-gap); grid-template-columns: 1fr; } @container (width > 540px) { .mv2GridElements[data-columns="2"], .mv2GridElements[data-columns="3"], .mv2GridElements[data-columns="4"]{ grid-template-columns: 1fr 1fr; } } @container (width > 940px) { .mv2GridElements[data-columns="3"], .mv2GridElements[data-columns="4"]{ grid-template-columns: 1fr 1fr 1fr; } } @container (width > 1168px) { .mv2GridElements[data-columns="4"]{ grid-template-columns: 1fr 1fr 1fr 1fr; } } .mv2-grid { --mv2-gutter-inline: clamp(30px, 5vw, 60px); --mv2-gutter-block: clamp(40px, 6vw, 80px); --gutter-top: var(--padding-top-lg); --gt-md: var(--padding-top-md, var(--gutter-top)); --gt-sm: var(--padding-top-sm, var(--gt-md)); --gutter-bottom: var(--padding-bottom-lg); --gb-md: var(--padding-bottom-md, var(--gutter-bottom)); --gb-sm: var(--padding-bottom-sm, var(--gb-md)); --gutter-top-o: var(--gutter-top); --gutter-bottom-o: var(--gutter-bottom); --mv2-gutter-top: var(--gutter-top-o, var(--mv2-gutter-block)) ; --mv2-gutter-bottom: var(--gutter-bottom-o, var(--mv2-gutter-block)); --mv2-margin-block: 0; --mv2-content-max-width: 1200px; --mv2-breakout-max-width: 1400px; --mv2-breakout-size: minmax(0, calc((var(--mv2-breakout-max-width) - var(--mv2-content-max-width)) / 2)); --mv2-content-size: min(100% - (var(--mv2-gutter-inline) * 2), var(--mv2-content-max-width)); --mv2-content-size--half: calc(var(--mv2-content-size) / 2); --mv2-cols--mobile: [full-start] var(--mv2-gutter-inline) [gutter-start breakout-start content-start content-col-1-start content-col-2-start ] auto [content-col-1-end content-col-2-end content-end breakout-end gutter-end] var(--mv2-gutter-inline) [full-end]; --mv2-rows--mobile: [full-start] minmax(var(--mv2-gutter-top), auto) [gutter-start breakout-start content-start content-col-1-start] auto [content-col-1-end content-col-2-start ] auto [content-col-2-end content-end breakout-end gutter-end] minmax(var(--mv2-gutter-bottom), auto) [full-end]; --mv2-cols: [full-start] var(--mv2-gutter-inline) [gutter-start] auto [breakout-start] var(--mv2-breakout-size) [content-start content-col-1-start] var(--mv2-content-size--half) [content-col-1-end content-col-2-start ] var(--mv2-content-size--half) [content-col-2-end content-end] var(--mv2-breakout-size) [breakout-end] auto [gutter-end] var(--mv2-gutter-inline) [full-end]; --mv2-rows: [full-start] minmax(var(--mv2-gutter-top), auto) [gutter-start breakout-start content-start content-col-1-start content-col-2-start ] auto [content-col-1-end content-col-2-end content-end breakout-end gutter-end] minmax(var(--mv2-gutter-bottom), auto) [full-end]; display: grid; grid-template-columns: var(--mv2-cols--mobile); grid-template-rows: var(--mv2-rows--mobile); font-family: sans-serif; min-height: 200px; overflow: clip; } @container (width < 940px) { .mv2-grid { --gutter-top-o: var(--gt-md); --gutter-bottom-o: var(--gb-md); } } @container (width < 540px) { .mv2-grid { --gutter-top-o: var(--gt-sm); --gutter-bottom-o: var(--gb-sm); } } @container mv2-grid-container (width > 1168px) { .mv2-grid { grid-template-columns: var(--mv2-cols); grid-template-rows: var(--mv2-rows); } } .area-full { grid-area: full; } .area-gutter { grid-area: gutter; } .area-breakout { grid-area: breakout; } .area-content { grid-area: content; } .area-content-col-1 { grid-area: content-col-1; } .area-content-col-2 { grid-area: content-col-2; } .col-full-start { grid-column-start: full; } .col-full-end { grid-column-end: full; } .col-gutter-start { grid-column-start: gutter; } .col-gutter-end { grid-column-end: gutter; } .col-breakout-start { grid-column-start: breakout; } .col-breakout-end { grid-column-end: breakout; } .col-content-start { grid-column-start: content; } .col-content-end { grid-column-end: content; } .col-content-col-1-start { grid-column-start: content-col-1; } .col-content-col-1-end { grid-column-end: content-col-1; } .col-content-col-2-start { grid-column-start: content-col-2; } .col-content-col-2-end { grid-column-end: content-col-2; } .row-full-start { grid-row-start: full; } .row-full-end { grid-row-end: full; } .row-gutter-start { grid-row-start: gutter; } .row-gutter-end { grid-row-end: gutter; } .row-breakout-start { grid-row-start: breakout; } .row-breakout-end { grid-row-end: breakout; } .row-content-start { grid-row-start: content; } .row-content-end { grid-row-end: content; } .row-content-col-1-start { grid-row-start: content-col-1; } .row-content-col-1-end { grid-row-end: content-col-1; } .row-content-col-2-start { grid-row-start: content-col-2; } .row-content-col-2-end { grid-row-end: content-col-2; } .mv2-curve { content: ''; grid-column: full; grid-row: full-start / gutter-start; width: 100%; min-height: calc(var(--mv2-gutter-block) * 2); position: relative; z-index: 20; overflow: clip; display: grid; align-items: flex-end; justify-content: center; } .mv2-curve.bottom { grid-row: gutter-end / full-end; align-items: flex-start; } .mv2-curve:after { content: ''; display: block; width: 150%; height: 375%; border-radius: 100%; position: absolute; left: -25%; } .mv2-curve.top:after { bottom: var(--mv2-gutter-block); background: var(--top-curve-bg); } .mv2-curve.bottom:after { top: var(--mv2-gutter-block); background: var(--bottom-curve-bg); } ::selection { color: var(--hs-accent-1); background-color: var(--hs-primary); } :target { scroll-margin-top: var(--dynamic-header-height); } .bg--hs-primary{ background-color: var(--hs-primary); } .bg--hs-primary--light{ background-color: var(--hs-primary--light); } .bg--hs-primary--dark{ background-color: var(--hs-primary--dark); } .bg--hs-secondary{ background-color: var(--hs-secondary); } .bg--hs-secondary--light{ background-color: var(--hs-secondary--light); } .bg--hs-secondary--dark{ background-color: var(--hs-secondary--dark); } .bg--hs-accent-1{ background-color: var(--hs-accent-1); } .bg--hs-accent-2{ background-color: var(--hs-accent-2); } .bg--hs-accent-3{ background-color: var(--hs-accent-3); } .bg--hs-accent-4{ background-color: var(--hs-accent-4); } .bg--hs-accent-4--dark{ background-color: var(--hs-accent-4--dark); } .bg--hs-black{ background-color: var(--hs-black); } .bg--hs-white{ background-color: var(--hs-white); } html, body { overflow-x: hidden; max-width: 100vw; } .unrestricted-images .mv2Image { aspect-ratio: auto; } .social-bar { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; }