:root { /* Change viewport max width here */ /*********************************/ --max-width: 1440px; --max-grid-width: 1520px; /*********************************/ /* Enter brand colours here ******/ --white: #fff; --black: #222; --primary: #0b689d; --primary-rgb: 11, 104, 157; --secondary: #26a6b1; --secondary-rgb: 38, 166, 177; --tertiary: #4c2f45; --tertiary-rgb: 76, 47, 69; --accent: #e2dfa6; --accent-rgb: 226, 223, 166; --soft-blue: #f0f8ff; /* Transparencies */ --primary-5: rgba(var(--primary-rgb), 0.05); --primary-10: rgba(var(--primary-rgb), 0.1); --primary-20: rgba(var(--primary-rgb), 0.2); --primary-30: rgba(var(--primary-rgb), 0.3); --primary-40: rgba(var(--primary-rgb), 0.4); --primary-50: rgba(var(--primary-rgb), 0.5); --primary-60: rgba(var(--primary-rgb), 0.6); --primary-70: rgba(var(--primary-rgb), 0.7); --primary-80: rgba(var(--primary-rgb), 0.8); --primary-90: rgba(var(--primary-rgb), 0.9); --secondary-10: rgba(var(--secondary-rgb), 0.1); --secondary-20: rgba(var(--secondary-rgb), 0.2); --secondary-30: rgba(var(--secondary-rgb), 0.3); --secondary-40: rgba(var(--secondary-rgb), 0.4); --secondary-50: rgba(var(--secondary-rgb), 0.5); --secondary-60: rgba(var(--secondary-rgb), 0.6); --secondary-70: rgba(var(--secondary-rgb), 0.7); --secondary-80: rgba(var(--secondary-rgb), 0.8); --secondary-90: rgba(var(--secondary-rgb), 0.9); --tertiary-10: rgba(var(--tertiary-rgb), 0.1); --tertiary-20: rgba(var(--tertiary-rgb), 0.2); --tertiary-30: rgba(var(--tertiary-rgb), 0.3); --tertiary-40: rgba(var(--tertiary-rgb), 0.4); --tertiary-50: rgba(var(--tertiary-rgb), 0.5); --tertiary-60: rgba(var(--tertiary-rgb), 0.6); --tertiary-70: rgba(var(--tertiary-rgb), 0.7); --tertiary-80: rgba(var(--tertiary-rgb), 0.8); --tertiary-90: rgba(var(--tertiary-rgb), 0.9); --accent-10: rgba(var(--accent-rgb), 0.1); --accent-20: rgba(var(--accent-rgb), 0.2); --accent-30: rgba(var(--accent-rgb), 0.3); --accent-40: rgba(var(--accent-rgb), 0.4); --accent-50: rgba(var(--accent-rgb), 0.5); --accent-60: rgba(var(--accent-rgb), 0.6); --accent-70: rgba(var(--accent-rgb), 0.7); --accent-80: rgba(var(--accent-rgb), 0.8); --accent-90: rgba(var(--accent-rgb), 0.9); /* Dark/light shades */ --primary-dark-90: color-mix(in oklab, var(--primary), #000 90%); --primary-dark-80: color-mix(in oklab, var(--primary), #000 80%); --primary-dark-70: color-mix(in oklab, var(--primary), #000 70%); --primary-dark-60: color-mix(in oklab, var(--primary), #000 60%); --primary-dark-50: color-mix(in oklab, var(--primary), #000 50%); --primary-dark-40: color-mix(in oklab, var(--primary), #000 40%); --primary-dark-30: color-mix(in oklab, var(--primary), #000 30%); --primary-dark-20: color-mix(in oklab, var(--primary), #000 20%); --primary-dark-10: color-mix(in oklab, var(--primary), #000 10%); --primary-light-90: color-mix(in oklab, var(--primary), #fff 90%); --primary-light-80: color-mix(in oklab, var(--primary), #fff 80%); --primary-light-70: color-mix(in oklab, var(--primary), #fff 70%); --primary-light-60: color-mix(in oklab, var(--primary), #fff 60%); --primary-light-50: color-mix(in oklab, var(--primary), #fff 50%); --primary-light-40: color-mix(in oklab, var(--primary), #fff 40%); --primary-light-30: color-mix(in oklab, var(--primary), #fff 30%); --primary-light-20: color-mix(in oklab, var(--primary), #fff 20%); --primary-light-10: color-mix(in oklab, var(--primary), #fff 10%); --secondary-dark-90: color-mix(in oklab, var(--secondary), #000 90%); --secondary-dark-80: color-mix(in oklab, var(--secondary), #000 80%); --secondary-dark-70: color-mix(in oklab, var(--secondary), #000 70%); --secondary-dark-60: color-mix(in oklab, var(--secondary), #000 60%); --secondary-dark-50: color-mix(in oklab, var(--secondary), #000 50%); --secondary-dark-40: color-mix(in oklab, var(--secondary), #000 40%); --secondary-dark-30: color-mix(in oklab, var(--secondary), #000 30%); --secondary-dark-20: color-mix(in oklab, var(--secondary), #000 20%); --secondary-dark-10: color-mix(in oklab, var(--secondary), #000 10%); --secondary-light-90: color-mix(in oklab, var(--secondary), #fff 90%); --secondary-light-80: color-mix(in oklab, var(--secondary), #fff 80%); --secondary-light-70: color-mix(in oklab, var(--secondary), #fff 70%); --secondary-light-60: color-mix(in oklab, var(--secondary), #fff 60%); --secondary-light-50: color-mix(in oklab, var(--secondary), #fff 50%); --secondary-light-40: color-mix(in oklab, var(--secondary), #fff 40%); --secondary-light-30: color-mix(in oklab, var(--secondary), #fff 30%); --secondary-light-20: color-mix(in oklab, var(--secondary), #fff 20%); --secondary-light-10: color-mix(in oklab, var(--secondary), #fff 10%); --tertiary-dark-90: color-mix(in oklab, var(--tertiary), #000 90%); --tertiary-dark-80: color-mix(in oklab, var(--tertiary), #000 80%); --tertiary-dark-70: color-mix(in oklab, var(--tertiary), #000 70%); --tertiary-dark-60: color-mix(in oklab, var(--tertiary), #000 60%); --tertiary-dark-50: color-mix(in oklab, var(--tertiary), #000 50%); --tertiary-dark-40: color-mix(in oklab, var(--tertiary), #000 40%); --tertiary-dark-30: color-mix(in oklab, var(--tertiary), #000 30%); --tertiary-dark-20: color-mix(in oklab, var(--tertiary), #000 20%); --tertiary-dark-10: color-mix(in oklab, var(--tertiary), #000 10%); --tertiary-light-90: color-mix(in oklab, var(--tertiary), #fff 90%); --tertiary-light-80: color-mix(in oklab, var(--tertiary), #fff 80%); --tertiary-light-70: color-mix(in oklab, var(--tertiary), #fff 70%); --tertiary-light-60: color-mix(in oklab, var(--tertiary), #fff 60%); --tertiary-light-50: color-mix(in oklab, var(--tertiary), #fff 50%); --tertiary-light-40: color-mix(in oklab, var(--tertiary), #fff 40%); --tertiary-light-30: color-mix(in oklab, var(--tertiary), #fff 30%); --tertiary-light-20: color-mix(in oklab, var(--tertiary), #fff 20%); --tertiary-light-10: color-mix(in oklab, var(--tertiary), #fff 10%); --accent-dark-90: color-mix(in oklab, var(--accent), #000 90%); --accent-dark-80: color-mix(in oklab, var(--accent), #000 80%); --accent-dark-70: color-mix(in oklab, var(--accent), #000 70%); --accent-dark-60: color-mix(in oklab, var(--accent), #000 60%); --accent-dark-50: color-mix(in oklab, var(--accent), #000 50%); --accent-dark-40: color-mix(in oklab, var(--accent), #000 40%); --accent-dark-30: color-mix(in oklab, var(--accent), #000 30%); --accent-dark-20: color-mix(in oklab, var(--accent), #000 20%); --accent-dark-10: color-mix(in oklab, var(--accent), #000 10%); --accent-light-90: color-mix(in oklab, var(--accent), #fff 90%); --accent-light-80: color-mix(in oklab, var(--accent), #fff 80%); --accent-light-70: color-mix(in oklab, var(--accent), #fff 70%); --accent-light-60: color-mix(in oklab, var(--accent), #fff 60%); --accent-light-50: color-mix(in oklab, var(--accent), #fff 50%); --accent-light-40: color-mix(in oklab, var(--accent), #fff 40%); --accent-light-30: color-mix(in oklab, var(--accent), #fff 30%); --accent-light-20: color-mix(in oklab, var(--accent), #fff 20%); --accent-light-10: color-mix(in oklab, var(--accent), #fff 10%); --liquidGlass-boxshadow: 0.3px 2.1px 2.2px rgba(0, 0, 0, 0.028), 0.7px 5.1px 5.3px rgba(0, 0, 0, 0.04), 1.3px 9.5px 10px rgba(0, 0, 0, 0.05), 2.2px 17px 17.9px rgba(0, 0, 0, 0.06), 4.2px 31.8px 33.4px rgba(0, 0, 0, 0.072), 10px 76px 80px rgba(0, 0, 0, 0.1); --lg-bg-color: rgba(255, 255, 255, 0.6); --lg-bg-color2: rgba(255, 255, 255, 0.8); --lg-highlight: rgba(255, 255, 255, 0.75); } body[data-builder-mode="custom"] .cl-sidebar { max-width: 300px; } .bricks-button.outline.bricks-color-primary { border-color: var(--text-color); color: var(--text-color); } .liquidGlass-wrapper { position: relative; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2); } .liquidGlass-filter, .liquidGlass-overlay, .liquidGlass-overlay2, .liquidGlass-specular { position: absolute; inset: 0; border-radius: inherit; } .liquidGlass-filter { z-index: 0; backdrop-filter: blur(4px); filter: url(#lensFilter) saturate(120%) brightness(1.15); } .liquidGlass-overlay { z-index: 1; background: var(--lg-bg-color); } .liquidGlass-overlay2 { z-index: 1; background: var(--lg-bg-color2); } .liquidGlass-specular { z-index: 2; box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5); } .liquidGlass-content { position: relative; z-index: 3; } .glass-masked { /* Mask with the logo image */ mask-image: url('https://coiri.com/wp-content/uploads/clarity-logo-bw.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; /* WebKit prefix for Safari */ -webkit-mask-image: url('https://coiri.com/wp-content/uploads/clarity-logo-bw.svg'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .liquidGlass-mask { width: 65vw; height: auto; } @media only screen and (max-width: 768px) { html { font-size: 62.5% !important; } .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .x-tabs_content-accordion { row-gap: var(--space-xs); } .x-tabs_content-accordion .x-tabs_toggle svg { fill: var(--primary); } .x-tabs_content-accordion .x-tabs_toggle[aria-expanded="true"] svg { fill: #fff; } .wsf-label { font-size: var(--text-larger) !important; } .hero p { font-size: var(--text-m); } .hero h1 { padding: var(--space-m) 0; } .wsf-form .wsf-label-position-inside canvas.wsf-field + label, .wsf-form .wsf-label-position-inside canvas.wsf-field + .wsf-input-group-append + label, .wsf-form .wsf-label-position-inside select.wsf-field~label, .wsf-form .wsf-label-position-inside input.wsf-field[placeholder] + label, .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder] + label, .wsf-form .wsf-label-position-inside select.wsf-field + .wsf-input-group-append + label, .wsf-form .wsf-label-position-inside input.wsf-field[placeholder] + .wsf-input-group-append + label, .wsf-form .wsf-label-position-inside textarea.wsf-field[placeholder] + .wsf-input-group-append + label { top: 1-px !important; } } /* Login page ************************************************************/ input[name="form-field-147d21"] /* Change this to your form attribute selector */ { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M288%2080c-65.2%200-118.8%2029.6-159.9%2067.7C89.6%20183.5%2063%20226%2049.4%20256c13.6%2030%2040.2%2072.5%2078.6%20108.3C169.2%20402.4%20222.8%20432%20288%20432s118.8-29.6%20159.9-67.7C486.4%20328.5%20513%20286%20526.6%20256c-13.6-30-40.2-72.5-78.6-108.3C406.8%20109.6%20353.2%2080%20288%2080zM95.4%20112.6C142.5%2068.8%20207.2%2032%20288%2032s145.5%2036.8%20192.6%2080.6c46.8%2043.5%2078.1%2095.4%2093%20131.1c3.3%207.9%203.3%2016.7%200%2024.6c-14.9%2035.7-46.2%2087.7-93%20131.1C433.5%20443.2%20368.8%20480%20288%20480s-145.5-36.8-192.6-80.6C48.6%20356%2017.3%20304%202.5%20268.3c-3.3-7.9-3.3-16.7%200-24.6C17.3%20208%2048.6%20156%2095.4%20112.6zM288%20336c44.2%200%2080-35.8%2080-80s-35.8-80-80-80c-.7%200-1.3%200-2%200c1.3%205.1%202%2010.5%202%2016c0%2035.3-28.7%2064-64%2064c-5.5%200-10.9-.7-16-2c0%20.7%200%201.3%200%202c0%2044.2%2035.8%2080%2080%2080zm0-208a128%20128%200%201%201%200%20256%20128%20128%200%201%201%200-256z%22%2F%3E%3C%2Fsvg%3E"); background-size: 24px; background-position: right 10px center; background-repeat: no-repeat; padding-right: 40px; } input[name="form-field-147d21"].show-password { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M38.8%205.1C28.4-3.1%2013.3-1.2%205.1%209.2S-1.2%2034.7%209.2%2042.9l592%20464c10.4%208.2%2025.5%206.3%2033.7-4.1s6.3-25.5-4.1-33.7L525.6%20386.7c39.6-40.6%2066.4-86.1%2079.9-118.4c3.3-7.9%203.3-16.7%200-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5%2068.8%20400.8%2032%20320%2032c-68.2%200-125%2026.3-169.3%2060.8L38.8%205.1zm151%20118.3C226%2097.7%20269.5%2080%20320%2080c65.2%200%20118.8%2029.6%20159.9%2067.7C518.4%20183.5%20545%20226%20558.6%20256c-12.6%2028-36.6%2066.8-70.9%20100.9l-53.8-42.2c9.1-17.6%2014.2-37.5%2014.2-58.7c0-70.7-57.3-128-128-128c-32.2%200-61.7%2011.9-84.2%2031.5l-46.1-36.1zM394.9%20284.2l-81.5-63.9c4.2-8.5%206.6-18.2%206.6-28.3c0-5.5-.7-10.9-2-16c.7%200%201.3%200%202%200c44.2%200%2080%2035.8%2080%2080c0%209.9-1.8%2019.4-5.1%2028.2zm51.3%20163.3l-41.9-33C378.8%20425.4%20350.7%20432%20320%20432c-65.2%200-118.8-29.6-159.9-67.7C121.6%20328.5%2095%20286%2081.4%20256c8.3-18.4%2021.5-41.5%2039.4-64.8L83.1%20161.5C60.3%20191.2%2044%20220.8%2034.5%20243.7c-3.3%207.9-3.3%2016.7%200%2024.6c14.9%2035.7%2046.2%2087.7%2093%20131.1C174.5%20443.2%20239.2%20480%20320%20480c47.8%200%2089.9-12.9%20126.2-32.5zm-88-69.3L302%20334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2%202.8-.3%205.6-.3%208.5c0%2070.7%2057.3%20128%20128%20128c13.3%200%2026.1-2%2038.2-5.8z%22%2F%3E%3C%2Fsvg%3E"); background-size: 24px; }