/* @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap'); */ /* @import url("https://p.typekit.net/p.css?s=1&k=ncv6qth&ht=tk&f=36241.36245.36255.36257&a=134687359&app=typekit&e=css"); */ @layer defaults { /* @font-face { font-family:"houschka-pro"; src:url("https://use.typekit.net/af/9ba3a3/00000000000000007735a998/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/9ba3a3/00000000000000007735a998/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/9ba3a3/00000000000000007735a998/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:500;font-stretch:normal; } @font-face { font-family:"houschka-pro"; src:url("https://use.typekit.net/af/d17c90/00000000000000007735a9b9/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/d17c90/00000000000000007735a9b9/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/d17c90/00000000000000007735a9b9/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype"); font-display:auto;font-style:italic;font-weight:500;font-stretch:normal; } */ @font-face { font-family: 'houschka-rounded'; src: url('https://use.typekit.net/af/b1738c/00000000000000007735a94a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3') format('woff2'), url('https://use.typekit.net/af/b1738c/00000000000000007735a94a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3') format('woff'), url('https://use.typekit.net/af/b1738c/00000000000000007735a94a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3') format('opentype'); font-display: auto; font-style: normal; font-weight: 500; font-stretch: normal; } @font-face { font-family: 'houschka-rounded'; src: url('https://use.typekit.net/af/9ddc01/00000000000000007735a957/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3') format('woff2'), url('https://use.typekit.net/af/9ddc01/00000000000000007735a957/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3') format('woff'), url('https://use.typekit.net/af/9ddc01/00000000000000007735a957/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3') format('opentype'); font-display: auto; font-style: italic; font-weight: 500; font-stretch: normal; } } @layer theme { /* Custom SHL.UK */ :where(:root) { --c6-color-gray-0: #eff6f7; --c6-color-blue-8: #005374; /* --c6-size-base: var(--c6-size-wide); */ } @supports (color: oklch(0% 0 0)) { @media (color-gamut: p3) { :where(:root) { --c6-color-gray-0: oklch(0.968 0.008 207); --c6-color-blue-8: oklch(0.417 0.087 234); } } } :where(:root) { --c6-border-radius-base: var(--c6-border-radius-md); /* 8px */ --c6-border-radius-button: var(--c6-border-radius-md); --c6-header-min-height: 7.5rem; /* SHL.UK BRAND */ --c6-color-brand-1: #2da7d5; --c6-color-brand-2: #52b1b9; --c6-color-brand-3: #6a99bc; --c6-color-brand-4: #003069; --c6-color-brand-5: #e55044; --c6-color-brand-6: #e08826; --c6-color-brand-7: #c76785; /* NHS */ --c6-color-nhs-blue: #005eb8; --c6-color-nhs-blue-dark: #003087; --c6-color-nhs-blue-bright: #0072ce; --c6-color-nhs-blue-light: #41b6e6; --c6-bg-pattern-shl-eye: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 24 24' aria-hidden='true' focusable='false' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='SHL.UK skyline pattern'%3e%3ccircle cx='12.002' cy='8.79' r='.779'/%3e%3cpath d='M3.212.779c.43,0,.779-.349.779-.779h-1.558c0,.43.349.779.779.779Z'/%3e%3cpath d='M20.781.779c.43,0,.779-.349.779-.779h-1.558c0,.43.349.779.779.779Z'/%3e%3ccircle cx='7.599' cy='7.61' r='.779'/%3e%3ccircle cx='4.386' cy='4.393' r='.779'/%3e%3ccircle cx='19.607' cy='4.393' r='.779'/%3e%3ccircle cx='16.394' cy='7.611' r='.779'/%3e%3ccircle cx='12.002' cy='15.221' r='.779'/%3e%3cpath d='M3.212,23.221c-.43,0-.779.349-.779.779h1.558c0-.43-.349-.779-.779-.779Z'/%3e%3cpath d='M20.781,23.221c-.43,0-.779.349-.779.779h1.558c0-.43-.349-.779-.779-.779Z'/%3e%3ccircle cx='4.392' cy='19.608' r='.779'/%3e%3ccircle cx='7.609' cy='16.395' r='.779'/%3e%3ccircle cx='16.384' cy='16.395' r='.779'/%3e%3ccircle cx='19.602' cy='19.608' r='.779'/%3e%3cpath d='M23.221,3.219c0,.43.349.779.779.779v-1.558c-.43,0-.779.349-.779.779Z'/%3e%3cpath d='M23.221,20.788c0,.43.349.779.779.779v-1.558c-.43,0-.779.349-.779.779Z'/%3e%3ccircle cx='15.21' cy='11.998' r='.779'/%3e%3cpath d='M.779,3.223c0-.43-.349-.779-.779-.779v1.558c.43,0,.779-.349.779-.779Z'/%3e%3cpath d='M.779,20.792c0-.43-.349-.779-.779-.779v1.558c.43,0,.779-.349.779-.779Z'/%3e%3ccircle cx='8.779' cy='12.002' r='.779'/%3e%3c/svg%3e"); --c6-bg-pattern-shl-shard: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 20.005 80' aria-hidden='true' focusable='false' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Sexual Health London skyline'%3e%3cpath d='M2.219,1.089h17.241c.301,0,.545-.244.545-.544s-.244-.545-.545-.545H2.219c-.3,0-.544.244-.544.545s.244.544.544.544Z'/%3e%3cpath d='M2.219,11.069h2.244c.301,0,.545-.244.545-.545s-.244-.544-.545-.544h-2.244c-.301,0-.545.243-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,14.404h3.91c.301,0,.545-.244.545-.545s-.244-.544-.545-.544h-3.91c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,17.74h5.577c.301,0,.545-.244.545-.545s-.244-.544-.545-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,21.075h7.243c.301,0,.544-.243.544-.545,0-.3-.243-.544-.544-.544H2.219c-.301,0-.545.244-.545.544,0,.302.244.545.545.545Z'/%3e%3cpath d='M2.219,24.411h8.909c.301,0,.545-.244.545-.545s-.243-.544-.545-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,27.746h10.575c.301,0,.545-.244.545-.545s-.244-.544-.545-.544H2.219c-.301,0-.545.243-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,31.082h12.242c.301,0,.544-.244.544-.545s-.243-.544-.544-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,34.418h13.908c.301,0,.544-.244.544-.545s-.243-.544-.544-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,37.753h15.575c.3,0,.544-.244.544-.545s-.244-.544-.544-.544H2.219c-.301,0-.545.243-.545.544s.244.545.545.545Z'/%3e%3cpath d='M1.675,40.545c0,.3.244.544.544.544h17.241c.301,0,.545-.244.545-.544s-.244-.545-.545-.545H2.219c-.3,0-.544.244-.544.545Z'/%3e%3cpath d='M17.216,31.082h2.244c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-2.244c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M15.55,27.746h3.91c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-3.91c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M13.883,24.411h5.577c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-5.577c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M12.217,21.075h7.243c.301,0,.545-.243.545-.544s-.244-.545-.545-.545h-7.243c-.301,0-.544.244-.544.545s.243.544.544.544Z'/%3e%3cpath d='M10.55,17.74h8.91c.301,0,.545-.243.545-.544s-.244-.545-.545-.545h-8.91c-.301,0-.544.244-.544.545s.243.544.544.544Z'/%3e%3cpath d='M8.885,14.404h10.575c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-10.575c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M7.218,11.069h12.242c.301,0,.545-.244.545-.544s-.244-.545-.545-.545H7.218c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M5.552,7.733h13.908c.301,0,.545-.244.545-.544s-.244-.545-.545-.545H5.552c-.301,0-.544.244-.544.545s.243.544.544.544Z'/%3e%3cpath d='M3.885,4.398h15.575c.301,0,.545-.243.545-.544s-.244-.545-.545-.545H3.885c-.3,0-.544.244-.544.545s.244.544.544.544Z'/%3e%3cpath d='M2.219,51.069h2.244c.301,0,.545-.244.545-.545s-.244-.544-.545-.544h-2.244c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,54.404h3.91c.301,0,.545-.244.545-.545s-.244-.544-.545-.544h-3.91c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,57.74h5.577c.301,0,.545-.244.545-.545s-.244-.544-.545-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,61.075h7.243c.301,0,.544-.243.544-.545,0-.3-.243-.544-.544-.544H2.219c-.301,0-.545.244-.545.544,0,.302.244.545.545.545Z'/%3e%3cpath d='M2.219,64.411h8.909c.301,0,.545-.244.545-.545s-.243-.544-.545-.544H2.219c-.301,0-.545.243-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,67.747h10.575c.301,0,.545-.244.545-.545s-.244-.544-.545-.544H2.219c-.301,0-.545.243-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,71.082h12.242c.301,0,.544-.244.544-.545s-.243-.544-.544-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,74.417h13.908c.301,0,.544-.244.544-.545s-.243-.544-.544-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M2.219,77.753h15.575c.3,0,.544-.244.544-.545s-.244-.544-.544-.544H2.219c-.301,0-.545.244-.545.544s.244.545.545.545Z'/%3e%3cpath d='M17.216,71.082h2.244c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-2.244c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M15.55,67.746h3.91c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-3.91c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M13.883,64.411h5.577c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-5.577c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M12.217,61.075h7.243c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-7.243c-.301,0-.544.244-.544.545s.243.544.544.544Z'/%3e%3cpath d='M10.55,57.74h8.91c.301,0,.545-.243.545-.544s-.244-.545-.545-.545h-8.91c-.301,0-.544.244-.544.545s.243.544.544.544Z'/%3e%3cpath d='M8.885,54.404h10.575c.301,0,.545-.244.545-.544s-.244-.545-.545-.545h-10.575c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M7.218,51.069h12.242c.301,0,.545-.244.545-.544s-.244-.545-.545-.545H7.218c-.301,0-.545.244-.545.545s.244.544.545.544Z'/%3e%3cpath d='M5.552,47.733h13.908c.301,0,.545-.243.545-.544s-.244-.545-.545-.545H5.552c-.301,0-.544.244-.544.545s.243.544.544.544Z'/%3e%3cpath d='M3.885,44.397h15.575c.301,0,.545-.244.545-.544s-.244-.545-.545-.545H3.885c-.3,0-.544.244-.544.545s.244.544.544.544Z'/%3e%3c/svg%3e"); --c6-bg-pattern-shl-gherkin: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 20 20'%3e%3crect x='3.687' y='3.687' width='12.627' height='12.627' transform='translate(-4.142 10.001) rotate(-45.003)' style='fill: none;'/%3e%3cpath d='M8.929,0L0,8.929v2.143l8.929,8.928h2.143l8.928-8.928v-2.143L11.071,0h-2.142ZM10,18.929L1.071,10,10,1.072l8.929,8.929-8.929,8.929Z'/%3e%3c/svg%3e"); --c6-bg-pattern-shl-battersea: url("data:image/svg+xml;charset=UTF-8,%3csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 45.598 76'%3e%3crect x='26.11' y='24.784' width='2.454' height='19.086' style='fill: none;'/%3e%3cpolygon points='42.091 52.087 41.399 52.087 38.075 52.087 37.383 52.087 37.383 75.565 42.091 75.565 42.091 52.087' style='fill: none;'/%3e%3crect x='30.562' y='.435' width='1.765' height='22.185' style='fill: none;'/%3e%3cpolygon points='24.983 23.913 25.675 23.913 28.999 23.913 29.691 23.913 29.691 .435 24.983 .435 24.983 23.913' style='fill: none;'/%3e%3crect x='13.271' y='53.381' width='1.765' height='22.184' style='fill: none;'/%3e%3crect x='4.633' y='24.784' width='2.453' height='19.086' style='fill: none;'/%3e%3crect x='22.347' y='.435' width='1.765' height='22.185' style='fill: none;'/%3e%3crect x='9.085' y='.435' width='1.765' height='22.185' style='fill: none;'/%3e%3crect x='42.962' y='53.381' width='1.765' height='22.184' style='fill: none;'/%3e%3crect x='17.033' y='32.13' width='2.454' height='19.086' style='fill: none;'/%3e%3crect x='38.51' y='32.13' width='2.454' height='19.086' style='fill: none;'/%3e%3crect x='34.747' y='53.381' width='1.765' height='22.184' style='fill: none;'/%3e%3crect x='24.121' y='55.933' width='9.756' height='19.632' style='fill: none;'/%3e%3cpolygon points='20.615 52.087 19.923 52.087 16.598 52.087 15.906 52.087 15.906 75.565 20.615 75.565 20.615 52.087' style='fill: none;'/%3e%3crect x='21.485' y='53.381' width='1.765' height='22.184' style='fill: none;'/%3e%3crect x='11.721' y='.435' width='9.756' height='19.632' style='fill: none;'/%3e%3cpolygon points='3.506 23.913 4.198 23.913 7.522 23.913 8.215 23.913 8.215 .435 3.506 .435 3.506 23.913' style='fill: none;'/%3e%3crect x='.87' y='.435' width='1.765' height='22.185' style='fill: none;'/%3e%3cpath d='M45.598.435v-.435H0v23.055c0,.241.195.435.435.435h2.2v.858c0,.241.195.435.435.435h.692v19.522c0,.241.195.435.435.435h3.324c.24,0,.435-.195.435-.435v-19.522h.693c.24,0,.435-.195.435-.435v-.858h2.2c.24,0,.435-.195.435-.435v-2.118h9.756v2.118c0,.241.195.435.435.435h2.2v.858c0,.241.195.435.435.435h.692v19.522c0,.241.195.435.435.435h3.325c.24,0,.435-.195.435-.435v-19.522h.692c.24,0,.435-.195.435-.435v-.858h2.2c.24,0,.435-.195.435-.435v-2.118h12.4v-.87h-12.4V.435h12.4ZM2.636,22.62H.87V.435h1.765v22.185ZM7.087,43.87h-2.453v-19.086h2.453v19.086ZM8.215,23.913H3.506V.435h4.709v23.478ZM10.85,22.62h-1.765V.435h1.765v22.185ZM21.477,20.067h-9.756V.435h9.756v19.632ZM24.112,22.62h-1.765V.435h1.765v22.185ZM28.564,43.87h-2.454v-19.086h2.454v19.086ZM29.691,23.913h-4.709V.435h4.709v23.478ZM32.327,22.62h-1.765V.435h1.765v22.185Z'/%3e%3cpath d='M45.162,52.51h-2.2v-.859c0-.241-.195-.435-.435-.435h-.692v-19.522c0-.241-.195-.435-.435-.435h-3.325c-.24,0-.435.195-.435.435v19.522h-.692c-.24,0-.435.195-.435.435v.859h-2.2c-.24,0-.435.195-.435.435v2.117h-9.756v-2.117c0-.241-.195-.435-.435-.435h-2.2v-.859c0-.241-.195-.435-.435-.435h-.692v-19.522c0-.241-.195-.435-.435-.435h-3.325c-.24,0-.435.195-.435.435v19.522h-.692c-.24,0-.435.195-.435.435v.859h-2.2c-.24,0-.435.195-.435.435v2.117H0v.87h12.4v19.632H0v.435h45.598v-23.055c0-.241-.195-.435-.435-.435ZM15.036,75.565h-1.765v-22.184h1.765v22.184ZM17.033,32.13h2.454v19.086h-2.454v-19.086ZM20.615,75.565h-4.709v-23.478h4.709v23.478ZM23.251,75.565h-1.765v-22.184h1.765v22.184ZM33.877,75.565h-9.756v-19.632h9.756v19.632ZM36.512,75.565h-1.765v-22.184h1.765v22.184ZM38.51,32.13h2.454v19.086h-2.454v-19.086ZM42.091,75.565h-4.709v-23.478h4.709v23.478ZM44.727,75.565h-1.765v-22.184h1.765v22.184Z'/%3e%3c/svg%3e"); /* --c6-font-family-base: "houschka-pro", var(--c6-font-family-sans); */ --c6-font-family-display: 'houschka-rounded', var(--c6-font-family-system-ui); /* LIGHT MODE */ --c6-color-surface-base--light: white; --c6-color-surface-canvas--light: var(--c6-color-gray-0); --c6-color-surface-content--light: white; --c6-color-surface-card--light: white; --c6-color-surface-site-content--light: var(--c6-color-surface-canvas); --c6-color-stroke-site-content--light: var(--c6-color-surface-canvas); --c6-color-primary--light: var(--c6-color-brand-4); --c6-color-ui-primary--light: var(--c6-color-indigo-1); --c6-color-highlight-primary--light: var(--c6-color-indigo-2); --c6-color-text-primary--light: var(--c6-color-indigo-7); --c6-color-border-primary--light: var(--c6-color-indigo-2); --c6-color-accent--light: var(--c6-color-accent-2); --c6-color-ui-accent--light: var(--c6-color-accent-1); --c6-color-highlight-accent--light: var(--c6-color-accent-2); --c6-color-text-accent--light: var(--c6-color-accent-7); --c6-color-border-accent--light: var(--c6-color-accent-2); --c6-color-brand--light: var(--c6-color-brand-1); --c6-color-action--light: color-mix( in oklch, var(--c6-color-brand-1) 80%, black ); --c6-color-masthead--light: #eff6f7; --c6-color-footer--light: var(--c6-color-brand-4); --c6-color-bg-1--light: var(--c6-color-brand-1); --c6-color-bg-2--light: var(--c6-color-brand-2); --c6-color-bg-3--light: var(--c6-color-brand-3); --c6-color-bg-4--light: var(--c6-color-brand-4); --c6-color-bg-5--light: var(--c6-color-brand-5); --c6-color-bg-6--light: var(--c6-color-brand-6); --c6-color-bg-7--light: var(--c6-color-brand-7); --c6-color-display--light: var(--c6-color-blue-8); --c6-color-display-shade--light: var(--c6-color-blue-9); --c6-color-text-display--light: var(--c6-color-indigo-9); --c6-color-text-footer--light: white; --c6-bg-pattern-color-1--light: invert(14%) sepia(27%) saturate(5913%) hue-rotate(200deg) brightness(91%) contrast(103%); --c6-bg-pattern-color-2--light: invert(67%) sepia(7%) saturate(2716%) hue-rotate(136deg) brightness(94%) contrast(88%); --c6-bg-pattern-color-3--light: invert(71%) sepia(24%) saturate(692%) hue-rotate(165deg) brightness(78%) contrast(84%); --c6-bg-pattern-color-4--light: invert(13%) sepia(44%) saturate(3718%) hue-rotate(200deg) brightness(96%) contrast(102%); --c6-bg-pattern-color-5--light: invert(45%) sepia(67%) saturate(2881%) hue-rotate(333deg) brightness(92%) contrast(95%); --c6-bg-pattern-color-6--light: invert(67%) sepia(18%) saturate(4117%) hue-rotate(345deg) brightness(93%) contrast(87%); --c6-bg-pattern-color-7--light: invert(67%) sepia(6%) saturate(6272%) hue-rotate(299deg) brightness(84%) contrast(83%); --c6-bg-pattern-masthead--light: var(--c6-bg-pattern-color-3); /* Data bg SVGs */ --c6-bg-checkbox-checked-primary--light: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23015374' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4,0C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6C0,1.2,1.2,0,2.6,0H15.4z M13.7,7.2c0.4-0.4,0.4-1.2,0-1.6c-0.4-0.4-1.2-0.4-1.6,0L7.7,10L5.9,8.2c-0.4-0.4-1.2-0.4-1.6,0c-0.4,0.4-0.4,1.2,0,1.6l2.6,2.6c0.4,0.4,1.2,0.4,1.6,0L13.7,7.2z' /%3E%3C/svg%3E"); --c6-bg-checkbox-indeterminate-primary--light: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%23015374' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5,8c0.5,0,1,0.4,1,1c0,0.5-0.4,1-1,1H5.5c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1H12.5z M0,2.6C0,1.2,1.2,0,2.6,0h12.9 C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6z M1.9,2.6v12.9c0,0.4,0.3,0.6,0.6,0.6h12.9 c0.4,0,0.6-0.3,0.6-0.6V2.6c0-0.4-0.3-0.6-0.6-0.6H2.6C2.2,1.9,1.9,2.2,1.9,2.6z' /%3E%3C/svg%3E"); --c6-bg-radio-checked-primary--light: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23015374' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7Z' /%3E%3C/svg%3E"); /* DARK MODE */ --c6-color-surface-base--dark: var(--c6-color-gray-9); --c6-color-surface-canvas--dark: var(--c6-color-gray-10); --c6-color-surface-content--dark: var(--c6-color-gray-9); --c6-color-surface-card--dark: var(--c6-color-gray-9); --c6-color-surface-site-content--dark: var(--c6-color-gray-10); --c6-color-stroke-site-content--dark: var(--c6-color-gray-10); --c6-color-primary--dark: var(--c6-color-brand-1); --c6-color-ui-primary--dark: var(--c6-color-indigo-10); --c6-color-highlight-primary--dark: var(--c6-color-indigo-8); --c6-color-text-primary--dark: var(--c6-color-indigo-3); --c6-color-border-primary--dark: var(--c6-color-indigo-8); --c6-color-accent--dark: var(--c6-color-brand-2); --c6-color-ui-accent--dark: var(--c6-color-cyan-10); --c6-color-highlight-accent--dark: var(--c6-color-cyan-8); --c6-color-text-accent--dark: var(--c6-color-cyan-3); --c6-color-border-accent--dark: var(--c6-color-cyan-8); --c6-color-brand--dark: var(--c6-color-brand-1); --c6-color-action--dark: var(--c6-color-brand-1); --c6-color-masthead--dark: var(--c6-color-blue-9); --c6-color-footer--dark: var(--c6-color-blue-10); --c6-color-ui-red--dark: var(--c6-color-red-8); --c6-color-ui-pink--dark: var(--c6-color-pink-8); --c6-color-ui-amber--dark: var(--c6-color-amber-8); --c6-color-bg-1--dark: color-mix( in oklch, var(--c6-color-brand-1) 50%, #000 ); --c6-color-bg-2--dark: color-mix( in oklch, var(--c6-color-brand-2) 50%, #000 ); --c6-color-bg-3--dark: color-mix( in oklch, var(--c6-color-brand-3) 50%, #000 ); --c6-color-bg-4--dark: color-mix( in oklch, var(--c6-color-brand-4) 50%, #000 ); --c6-color-bg-5--dark: color-mix( in oklch, var(--c6-color-brand-5) 50%, #000 ); --c6-color-bg-6--dark: color-mix( in oklch, var(--c6-color-brand-6) 50%, #000 ); --c6-color-bg-7--dark: color-mix( in oklch, var(--c6-color-brand-7) 50%, #000 ); --c6-color-display--dark: var(--c6-color-blue-1); --c6-color-display-shade--dark: var(--c6-color-blue-2); --c6-color-text-display--dark: var(--c6-color-indigo-1); --c6-color-text-footer--dark: white; --c6-bg-pattern-color-1--dark: invert(14%) sepia(27%) saturate(5913%) hue-rotate(200deg) brightness(91%) contrast(103%); --c6-bg-pattern-color-2--dark: invert(67%) sepia(7%) saturate(2716%) hue-rotate(136deg) brightness(94%) contrast(88%); --c6-bg-pattern-color-3--dark: invert(71%) sepia(24%) saturate(692%) hue-rotate(165deg) brightness(78%) contrast(84%); --c6-bg-pattern-color-4--dark: invert(13%) sepia(44%) saturate(3718%) hue-rotate(200deg) brightness(96%) contrast(102%); --c6-bg-pattern-color-5--dark: invert(45%) sepia(67%) saturate(2881%) hue-rotate(333deg) brightness(92%) contrast(95%); --c6-bg-pattern-color-6--dark: invert(67%) sepia(18%) saturate(4117%) hue-rotate(345deg) brightness(93%) contrast(87%); --c6-bg-pattern-color-7--dark: invert(67%) sepia(6%) saturate(6272%) hue-rotate(299deg) brightness(84%) contrast(83%); --c6-bg-pattern-masthead--dark: var(--c6-bg-pattern-color-2); --c6-color-stroke--dark: var(--c6-color-gray-7); /* Data bg SVGs */ --c6-bg-checkbox-checked-primary--dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%239fd5fc' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4,0C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6C0,1.2,1.2,0,2.6,0H15.4z M13.7,7.2c0.4-0.4,0.4-1.2,0-1.6c-0.4-0.4-1.2-0.4-1.6,0L7.7,10L5.9,8.2c-0.4-0.4-1.2-0.4-1.6,0c-0.4,0.4-0.4,1.2,0,1.6l2.6,2.6c0.4,0.4,1.2,0.4,1.6,0L13.7,7.2z' /%3E%3C/svg%3E"); --c6-bg-checkbox-indeterminate-primary--dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='%239fd5fc' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5,8c0.5,0,1,0.4,1,1c0,0.5-0.4,1-1,1H5.5c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1H12.5z M0,2.6C0,1.2,1.2,0,2.6,0h12.9 C16.8,0,18,1.2,18,2.6v12.9c0,1.4-1.2,2.6-2.6,2.6H2.6C1.2,18,0,16.8,0,15.4V2.6z M1.9,2.6v12.9c0,0.4,0.3,0.6,0.6,0.6h12.9 c0.4,0,0.6-0.3,0.6-0.6V2.6c0-0.4-0.3-0.6-0.6-0.6H2.6C2.2,1.9,1.9,2.2,1.9,2.6z' /%3E%3C/svg%3E"); --c6-bg-radio-checked-primary--dark: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%239fd5fc' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7Z' /%3E%3C/svg%3E"); } /* Default / Light theme specific variables */ :where(:root), [color-scheme='light'] { color-scheme: light; --c6-color-surface-site-content: var( --c6-color-surface-site-content--light ); --c6-color-stroke-site-content: var(--c6-color-stroke-site-content--light); --c6-color-primary: var(--c6-color-primary--light); --c6-color-ui-primary: var(--c6-color-ui-primary--light); --c6-color-highlight-primary: var(--c6-color-highlight-primary--light); --c6-color-text-primary: var(--c6-color-text-primary--light); --c6-color-border-primary: var(--c6-color-border-primary--light); --c6-color-accent: var(--c6-color-accent--light); --c6-color-ui-accent: var(--c6-color-ui-accent--light); --c6-color-highlight-accent: var(--c6-color-highlight-accent--light); --c6-color-text-accent: var(--c6-color-text-accent--light); --c6-color-border-accent: var(--c6-color-border-accent--light); --c6-color-comp: var(--c6-color-comp--light); --c6-color-ui-comp: var(--c6-color-ui-comp--light); --c6-color-highlight-comp: var(--c6-color-highlight-comp--light); --c6-color-text-comp: var(--c6-color-text-comp--light); --c6-color-border-comp: var(--c6-color-border-comp--light); --c6-color-brand: var(--c6-color-brand--light); --c6-color-action: var(--c6-color-action--light); --c6-color-masthead: var(--c6-color-masthead--light); --c6-color-footer: var(--c6-color-footer--light); --c6-color-bg-1: var(--c6-color-bg-1--light); --c6-color-bg-2: var(--c6-color-bg-2--light); --c6-color-bg-3: var(--c6-color-bg-3--light); --c6-color-bg-4: var(--c6-color-bg-4--light); --c6-color-bg-5: var(--c6-color-bg-5--light); --c6-color-bg-6: var(--c6-color-bg-6--light); --c6-color-bg-7: var(--c6-color-bg-7--light); --c6-color-display: var(--c6-color-display--light); --c6-color-display-shade: var(--c6-color-display-shade--light); --c6-color-text-display: var(--c6-color-text-display--light); --c6-color-text-footer: var(--c6-color-text-footer--light); --c6-bg-pattern-color-1: var(--c6-bg-pattern-color-1--light); --c6-bg-pattern-color-2: var(--c6-bg-pattern-color-2--light); --c6-bg-pattern-color-3: var(--c6-bg-pattern-color-3--light); --c6-bg-pattern-color-4: var(--c6-bg-pattern-color-4--light); --c6-bg-pattern-color-5: var(--c6-bg-pattern-color-5--light); --c6-bg-pattern-color-6: var(--c6-bg-pattern-color-6--light); --c6-bg-pattern-color-7: var(--c6-bg-pattern-color-7--light); --c6-bg-pattern-masthead: var(--c6-bg-pattern-masthead--light); } /* Dark theme specific variables based on system preference */ @media (prefers-color-scheme: dark) { :where(:root) { color-scheme: dark; --c6-color-surface-site-content: var( --c6-color-surface-site-content--dark ); --c6-color-stroke-site-content: var(--c6-color-stroke-site-content--dark); --c6-color-primary: var(--c6-color-primary--dark); --c6-color-ui-primary: var(--c6-color-ui-primary--dark); --c6-color-highlight-primary: var(--c6-color-highlight-primary--dark); --c6-color-text-primary: var(--c6-color-text-primary--dark); --c6-color-border-primary: var(--c6-color-border-primary--dark); --c6-color-accent: var(--c6-color-accent--dark); --c6-color-ui-accent: var(--c6-color-ui-accent--dark); --c6-color-highlight-accent: var(--c6-color-highlight-accent--dark); --c6-color-text-accent: var(--c6-color-text-accent--dark); --c6-color-border-accent: var(--c6-color-border-accent--dark); --c6-color-comp: var(--c6-color-comp--dark); --c6-color-ui-comp: var(--c6-color-ui-comp--dark); --c6-color-highlight-comp: var(--c6-color-highlight-comp--dark); --c6-color-text-comp: var(--c6-color-text-comp--dark); --c6-color-border-comp: var(--c6-color-border-comp--dark); --c6-color-brand: var(--c6-color-brand--dark); --c6-color-action: var(--c6-color-action--dark); --c6-color-masthead: var(--c6-color-masthead--dark); --c6-color-footer: var(--c6-color-footer--dark); --c6-color-bg-1: var(--c6-color-bg-1--dark); --c6-color-bg-2: var(--c6-color-bg-2--dark); --c6-color-bg-3: var(--c6-color-bg-3--dark); --c6-color-bg-4: var(--c6-color-bg-4--dark); --c6-color-bg-5: var(--c6-color-bg-5--dark); --c6-color-bg-6: var(--c6-color-bg-6--dark); --c6-color-bg-7: var(--c6-color-bg-7--dark); --c6-color-display: var(--c6-color-display--dark); --c6-color-display-shade: var(--c6-color-display-shade--dark); --c6-color-text-display: var(--c6-color-text-display--dark); --c6-color-text-footer: var(--c6-color-text-footer--dark); --c6-bg-pattern-color-1: var(--c6-bg-pattern-color-1--dark); --c6-bg-pattern-color-2: var(--c6-bg-pattern-color-2--dark); --c6-bg-pattern-color-3: var(--c6-bg-pattern-color-3--dark); --c6-bg-pattern-color-4: var(--c6-bg-pattern-color-4--dark); --c6-bg-pattern-color-5: var(--c6-bg-pattern-color-5--dark); --c6-bg-pattern-color-6: var(--c6-bg-pattern-color-6--dark); --c6-bg-pattern-color-7: var(--c6-bg-pattern-color-7--dark); --c6-bg-pattern-masthead: var(--c6-bg-pattern-masthead--dark); } } /* Dark theme specific variables based on manual override */ [color-scheme='dark'] { color-scheme: dark; --c6-color-surface-site-content: var(--c6-color-surface-site-content--dark); --c6-color-stroke-site-content: var(--c6-color-stroke-site-content--dark); --c6-color-primary: var(--c6-color-primary--dark); --c6-color-ui-primary: var(--c6-color-ui-primary--dark); --c6-color-highlight-primary: var(--c6-color-highlight-primary--dark); --c6-color-text-primary: var(--c6-color-text-primary--dark); --c6-color-border-primary: var(--c6-color-border-primary--dark); --c6-color-accent: var(--c6-color-accent--dark); --c6-color-ui-accent: var(--c6-color-ui-accent--dark); --c6-color-highlight-accent: var(--c6-color-highlight-accent--dark); --c6-color-text-accent: var(--c6-color-text-accent--dark); --c6-color-border-accent: var(--c6-color-border-accent--dark); --c6-color-comp: var(--c6-color-comp--dark); --c6-color-ui-comp: var(--c6-color-ui-comp--dark); --c6-color-highlight-comp: var(--c6-color-highlight-comp--dark); --c6-color-text-comp: var(--c6-color-text-comp--dark); --c6-color-border-comp: var(--c6-color-border-comp--dark); --c6-color-brand: var(--c6-color-brand--dark); --c6-color-action: var(--c6-color-action--dark); --c6-color-masthead: var(--c6-color-masthead--dark); --c6-color-footer: var(--c6-color-footer--dark); --c6-color-bg-1: var(--c6-color-bg-1--dark); --c6-color-bg-2: var(--c6-color-bg-2--dark); --c6-color-bg-3: var(--c6-color-bg-3--dark); --c6-color-bg-4: var(--c6-color-bg-4--dark); --c6-color-bg-5: var(--c6-color-bg-5--dark); --c6-color-bg-6: var(--c6-color-bg-6--dark); --c6-color-bg-7: var(--c6-color-bg-7--dark); --c6-color-display: var(--c6-color-display--dark); --c6-color-display-shade: var(--c6-color-display-shade--dark); --c6-color-text-display: var(--c6-color-text-display--dark); --c6-color-text-footer: var(--c6-color-text-footer--dark); --c6-bg-pattern-color-1: var(--c6-bg-pattern-color-1--dark); --c6-bg-pattern-color-2: var(--c6-bg-pattern-color-2--dark); --c6-bg-pattern-color-3: var(--c6-bg-pattern-color-3--dark); --c6-bg-pattern-color-4: var(--c6-bg-pattern-color-4--dark); --c6-bg-pattern-color-5: var(--c6-bg-pattern-color-5--dark); --c6-bg-pattern-color-6: var(--c6-bg-pattern-color-6--dark); --c6-bg-pattern-color-7: var(--c6-bg-pattern-color-7--dark); --c6-bg-pattern-masthead: var(--c6-bg-pattern-masthead--dark); } /* SERVICES */ .service--preventx { --c6-service-logo-height: 2rem; --c6-color-service--light: #0026c5; --c6-color-service--dark: #88dbdf; } .service--lpod { --c6-service-logo-height: 2rem; --c6-color-service--light: #8dc63f; --c6-color-service-logo-main--light: #00652e; --c6-color-service--dark: white; --c6-color-service-logo-main--dark: #8dc63f; } .service--shuk { --c6-service-logo-height: 2rem; --c6-color-service--light: var(--c6-color-text-1); --c6-color-service-logo-main--light: #005eb8; --c6-color-service--dark: var(--c6-color-text-1); --c6-color-service-logo-main--dark: color-mix( in srgb, var(--c6-color-service-logo-main--light) 60%, white ); } .service--shl { --c6-service-logo-height: 4rem; --c6-color-service--light: #213368; --c6-color-service-logo-main--light: #6e93b1; --c6-color-service-logo-2--light: #50a5cd; --c6-color-service-logo-3--light: #68b0b5; --c6-color-service--dark: var(--c6-color-text-1); --c6-color-service-logo-main--dark: #6e93b1; --c6-color-service-logo-2--dark: #50a5cd; --c6-color-service-logo-3--dark: #68b0b5; } .service--nhs { --c6-service-logo-height: 2rem; --c6-color-service--light: white; --c6-color-service-logo-main--light: var(--c6-color-nhs-blue); --c6-color-service--dark: white; --c6-color-service-logo-main--dark: var(--c6-color-nhs-blue); } .site-head .service--nhs { --c6-service-logo-height: 2rem; } .service--nhst { /* --c6-color-service--light: var(--c6-color-text-1); --c6-color-service-logo-main--light: var(--c6-color-nhs-blue); --c6-color-service-logo-2--light: white; --c6-color-service--dark: var(--c6-color-text-1); --c6-color-service-logo-main--dark: white; --c6-color-service-logo-2--dark: white; */ --c6-color-service--light: var(--c6-color-text-1); --c6-color-service-logo-main--light: var(--c6-color-nhs-blue); --c6-color-service-logo-2--light: white; --c6-color-service--dark: var(--c6-color-text-1); --c6-color-service-logo-main--dark: white; --c6-color-service-logo-2--dark: var(--c6-color-nhs-blue); } .service--cqc { --c6-service-logo-height: 3rem; --c6-color-service--light: white; --c6-color-service-logo-main--light: #6c276a; --c6-color-service--dark: #6c276a; --c6-color-service-logo-main--dark: white; } .service--cyber-essentials { --c6-service-logo-height: 3rem; --c6-color-service--light: white; --c6-color-service-logo-main--light: #2f3055; --c6-color-service-logo-2--light: #98cc6a; --c6-color-service-logo-3--light: #6dcff6; --c6-color-service--dark: var(--c6-color-text-1); --c6-color-service-logo-main--dark: #2f3055; --c6-color-service-logo-2--dark: #98cc6a; --c6-color-service-logo-3--dark: #6dcff6; } .service--chelwest { --c6-service-logo-height: 3rem; --c6-color-service--light: white; --c6-color-service-logo-main--light: #0072bc; --c6-color-service-logo-2--light: #62bb46; --c6-color-service-logo-3--light: #00ab4e; --c6-color-service-logo-4--light: #c72263; --c6-color-service-logo-5--light: #422c88; --c6-color-service-logo-main--dark: white; --c6-color-service-logo-2--dark: white; --c6-color-service-logo-3--dark: white; --c6-color-service-logo-4--dark: white; --c6-color-service-logo-5--dark: white; } .service--trustpilot { --c6-service-logo-height: 1.5rem; --c6-color-service--light: #191919; --c6-color-service--dark: white; } :is( .service--preventx, .service--lpod, .service--shl, .service--nhs, .service--nhst, .service--cqc, .service--cyber-essentials, .service--chelwest, .service--trustpilot ) { color-scheme: light; --c6-color-service: var(--c6-color-service--light); --c6-color-service-logo-main: var(--c6-color-service-logo-main--light); } :is(.service--nhst) { color-scheme: light; --c6-color-service-logo-2: var(--c6-color-service-logo-2--light); } :is(.service--shl, .service--cyber-essentials, .service--chelwest) { color-scheme: light; --c6-color-service-logo-2: var(--c6-color-service-logo-2--light); --c6-color-service-logo-3: var(--c6-color-service-logo-3--light); } :is(.service--chelwest) { color-scheme: light; --c6-color-service-logo-4: var(--c6-color-service-logo-4--light); --c6-color-service-logo-5: var(--c6-color-service-logo-5--light); } [color-scheme='light'] :is( .service--preventx, .service--lpod, .service--shl, .service--nhs, .service--nhst, .service--cqc, .service--cyber-essentials, .service--chelwest, .service--trustpilot ) { color-scheme: light; --c6-color-service: var(--c6-color-service--light); --c6-color-service-logo-main: var(--c6-color-service-logo-main--light); } [color-scheme='light'] :is(.service--nhst) { color-scheme: light; --c6-color-service-logo-2: var(--c6-color-service-logo-2--light); } [color-scheme='light'] :is(.service--shl, .service--cyber-essentials) { color-scheme: light; --c6-color-service-logo-2: var(--c6-color-service-logo-2--light); --c6-color-service-logo-3: var(--c6-color-service-logo-3--light); } [color-scheme='light'] :is(.service--chelwest) { color-scheme: light; --c6-color-service-logo-4: var(--c6-color-service-logo-4--light); --c6-color-service-logo-5: var(--c6-color-service-logo-5--light); } @media (prefers-color-scheme: dark) { :is( .service--preventx, .service--lpod, .service--shl, .service--nhs, .service--nhst, .service--cqc, .service--cyber-essentials, .service--chelwest, .service--trustpilot ) { color-scheme: dark; --c6-color-service: var(--c6-color-service--dark); --c6-color-service-logo-main: var(--c6-color-service-logo-main--dark); } :is(.service--nhst) { color-scheme: dark; --c6-color-service-logo-2: var(--c6-color-service-logo-2--dark); } :is(.service--shl, .service--cyber-essentials, .service--chelwest) { color-scheme: dark; --c6-color-service-logo-2: var(--c6-color-service-logo-2--dark); --c6-color-service-logo-3: var(--c6-color-service-logo-3--dark); } :is(.service--chelwest) { color-scheme: dark; --c6-color-service-logo-4: var(--c6-color-service-logo-4--dark); --c6-color-service-logo-5: var(--c6-color-service-logo-5--dark); } } [color-scheme='dark'] :is( .service--preventx, .service--lpod, .service--shl, .service--nhs, .service--nhst, .service--cqc, .service--cyber-essentials, .service--chelwest, .service--trustpilot ) { color-scheme: dark; --c6-color-service: var(--c6-color-service--dark); --c6-color-service-logo-main: var(--c6-color-service-logo-main--dark); } [color-scheme='dark'] :is(.service--nhst) { color-scheme: dark; --c6-color-service-logo-2: var(--c6-color-service-logo-2--dark); } [color-scheme='dark'] :is(.service--shl, .service--cyber-essentials, .service--chelwest) { color-scheme: dark; --c6-color-service-logo-2: var(--c6-color-service-logo-2--dark); --c6-color-service-logo-3: var(--c6-color-service-logo-3--dark); } [color-scheme='dark'] :is(.service--chelwest) { color-scheme: dark; --c6-color-service-logo-4: var(--c6-color-service-logo-4--dark); --c6-color-service-logo-5: var(--c6-color-service-logo-5--dark); } .service-logo { block-size: var(--c6-service-logo-height); } .service-logo * { transition: all var(--c6-duration-base) ease-out; } .service-icon { inline-size: var(--c6-size-fluid-base); } .service-icon-bg { fill: var(--c6-surface-1); } .service-logo-text--accent { fill: var(--c6-color-accent); } .service-logo-text { fill: var(--c6-color-service); } .service-logo-main { fill: var(--c6-color-service-logo-main); } .service-logo-2 { fill: var(--c6-color-service-logo-2); } .service-logo-3 { fill: var(--c6-color-service-logo-3); } .service-logo-4 { fill: var(--c6-color-service-logo-4); } .service-logo-5 { fill: var(--c6-color-service-logo-5); } /* Changeable light / dark */ .bg-color-1 { background-color: var(--c6-color-bg-1); } .bg-color-2 { background-color: var(--c6-color-bg-2); } .bg-color-3 { background-color: var(--c6-color-bg-3); } .bg-color-4 { background-color: var(--c6-color-bg-4); } .bg-color-5 { background-color: var(--c6-color-bg-5); } .bg-color-6 { background-color: var(--c6-color-bg-6); } .bg-color-7 { background-color: var(--c6-color-bg-7); } .t-color-1 { color: var(--c6-color-bg-1); } .t-color-2 { color: var(--c6-color-bg-2); } .t-color-3 { color: var(--c6-color-bg-3); } .t-color-4 { color: var(--c6-color-bg-4); } .t-color-5 { color: var(--c6-color-bg-5); } .t-color-6 { color: var(--c6-color-bg-6); } .t-color-7 { color: var(--c6-color-bg-7); } /* Site-wide */ .shluk { /* --c6-header-min-height: 7.5rem; */ :target, [id] { scroll-margin-block-start: var(--c6-header-min-height); } .dropdown__panel { outline: 0; .wrapper:focus-visible { outline: 0; } } .prose .notification { margin-block: var(--c6-size-fluid-5); } } :where( .button, button, input[type='button'], input[type='submit'], input[type='reset'], input[type='file'] ), :where(input[type='file'])::file-selector-button { --c6-button-border-radius: var(--c6-border-radius-button); --c6-button-padding-inline: 2ch; --c6-shadow-depth: 0 0 var(--c6-color-border); } :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4):not( .notification__heading, .t-invert ) { color: var(--c6-color-text-display); font-display: optional; } .site-head { @media (min-width: 992px) { --c6-header-min-height: 7.5rem; } &::after { background-color: var(--c6-color-surface-content); } :is(.site-head__link, .dropdown__control) { border-radius: var(--c6-border-radius-base); } .site-head__inner { padding-block: var(--c6-size-fluid-narrow); } .service--shl { --c6-service-logo-height: 3rem; .logo-text-main { opacity: 0; } @media (min-width: 992px) { .logo-text-shorthand { opacity: 0; } .logo-text-main { opacity: 1; } } } } @media (min-width: 992px) { .shluk { .site-head { .service--shl { --c6-service-logo-height: clamp(2rem, 4vw, 4rem); } } } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .shluk { .site-head { .service--shl { transform-origin: center left; block-size: clamp(2rem, 4.5vw, 4rem); animation: logo-scale linear both; animation-timeline: scroll(); animation-range: 0 100px; } .service--shl .logo-text-main { /* transition-behavior: allow-discrete; */ opacity: 1; /* display: block; */ animation: text-hide linear both; animation-timeline: scroll(); animation-range: 0 100px; } .service--shl .logo-text-shorthand { /* transition-behavior: allow-discrete; opacity: 0; display: none; */ animation: text-show linear both; animation-timeline: scroll(); animation-range: 0 100px; } .service--nhs { --c6-service-logo-height: clamp(1rem, 2vw, 2rem); } .site-head__inner { min-block-size: 7.5rem; animation: nav-height linear both; animation-timeline: scroll(); animation-range: 0 100px; } } } } } } :is(:dir(rtl), [dir='rtl']) { @media (min-width: 992px) { @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .shluk { .site-head { .service--shl { transform-origin: center right; } } } } } } } @keyframes nav-bg { to { background: var(--c6-color-surface-canvas); } } @keyframes nav-height { to { min-block-size: 3rem; } } @keyframes text-hide { to { opacity: 0; display: none; } } @keyframes text-show { to { opacity: 1; } } @keyframes logo-scale { to { scale: 0.75; } /* to { block-size: 3rem; } */ } .site-content { border-color: transparent; border-radius: 0; overflow-y: visible; } .site-footer { /* background-color: var(--c6-color-footer); */ /* color: var(--c6-color-text-footer); */ text-align: unset; padding: var(--c6-size-fluid-base); padding-block-start: var(--c6-size-fluid-7); .brand-logo { --c6-brand-logo-height: var(--c6-size-3); } .logo-text-shorthand { opacity: 0; } .site-footer__link { border-radius: var(--c6-border-radius-base); } hr { margin-block-start: var(--c6-size-fluid-base); } } .trustpilot { text-decoration: none; color: var(--c6-color-text-1); font-weight: var(--c6-font-weight-bold); } /* Split layout */ .bg-split-sidebar { /* background-color: var(--c6-color-brand-1); */ background-color: var(--c6-color-surface-content); position: relative; &::before { position: absolute; inset: 0; display: block; content: ''; background-image: var(--c6-bg-pattern-shl-shard); background-size: 60px auto; filter: var(--c6-bg-pattern-color-1); } } /* Article layout */ .article .hero { padding-block: 0; } .article__toc { inset-block-start: 9rem; } /* .toc__wrapper { max-inline-size: var(--c6-size-xxs); block-size: 100%; overflow: auto; scrollbar-color: transparent transparent; } */ /* Home */ .home { .hero { --c6-masthead-height: auto; background-color: var(--c6-color-masthead); position: relative; padding-block-end: var(--c6-size-fluid-8); &::before { content: ''; block-size: 13.75rem; inline-size: 100%; /* background: var(--c6-bg-pattern-shl-eye); */ background-position: left bottom; background-repeat: repeat; background-size: 4rem; position: absolute; inset-inline-start: 0; inset-block-end: 0; opacity: 0.5; filter: var(--c6-bg-pattern-color-3); } /* &::before { content: ''; inline-size: 13.75rem; block-size: 100%; background: var(--c6-bg-pattern-shl-eye); background-position: right bottom; background-repeat: repeat; background-size: 4rem; position: absolute; inset-inline-end: 0; inset-block-end: 0; opacity: .5; filter: var(--c6-bg-pattern-color-3); } */ .intro { --c6-flow-space: 1.5rem; } .lede { font-size: 1.5rem; } figcaption { margin: 0; text-align: start; font-style: normal; } } .card__content { --c6-icon-size: 2.5rem; /* padding: var(--c6-size-wide); */ } .card__footer { padding: 0 var(--c6-size-wide); } } .hero__title, .headline__title { font-weight: 700; font-display: optional; } .hero__title { font-size: var(--c6-font-size-fluid-6); max-inline-size: var(--c6-size-header-2); background: linear-gradient( 120deg, var(--c6-color-display), var(--c6-color-display-shade) ); background-clip: text; color: transparent; word-wrap: normal; line-height: 1.4; } /* Clinics */ .nhs--trust { --c6-card-bg--light: var(--c6-color-surface-content); --c6-card-bg--dark: var(--c6-color-nhs-blue); .service-logo { max-block-size: var(--c6-size-fluid-8); } } .nhs--trust { color-scheme: light; --c6-card-bg: var(--c6-card-bg--light); } [color-scheme='light'] .nhs--trust { color-scheme: light; --c6-card-bg: var(--c6-card-bg--light); } @media (prefers-color-scheme: dark) { .nhs--trust { color-scheme: dark; --c6-card-bg: var(--c6-card-bg--dark); } } [color-scheme='dark'] .nhs--trust { color-scheme: dark; --c6-card-bg: var(--c6-card-bg--dark); } .nhs--trust { background-color: var(--c6-card-bg); } /* Overrides */ .svg-inline--fa { vertical-align: revert !important; } .card__hero svg { padding: var(--c6-size-7); } .hero { & .feature-img { :is(img, svg) { max-inline-size: 60%; } } } }