@import url("/styles/variables.css");@import url("forms.less");/* latin */@font-face { font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap; src:url(/fonts/Manrope-VariableFont_wght.woff2) format('woff2-variations'), url(/fonts/Manrope-VariableFont_wght.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/******* RESET */* { box-sizing:border-box; outline:none;// Needed this to fix a form inside our panel .panel-con, but thought I'd put it globally...it's a weird onemin-width:0;}html { line-height:1.15; -webkit-text-size-adjust:100%; overflow-y:scroll; // Force scrollbar to always be there, otherwise the page jumps left/right is it appears/disappears}body { margin:0;}main { display:block;}h1 { font-size:2em; margin:0.67em 0;}hr { box-sizing:content-box; height:0; overflow:visible;}pre { font-family:monospace, monospace; font-size:1em;}a { background-color:transparent;}abbr[title] { border-bottom:none; text-decoration:underline; text-decoration:underline dotted;}b,strong { font-weight:bolder;}code,kbd,samp { font-family:monospace, monospace; font-size:1em;}small { font-size:80%;}sub,sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline;}sub { bottom:-0.25em;}sup { top:-0.5em;}img { border-style:none;}button,input,optgroup,select,textarea { font-family:inherit; font-size:100%; line-height:1.15; margin:0;}button,input { overflow:visible;}button,select { text-transform:none;}button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style:none; padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring { outline:1px dotted ButtonText;}fieldset, form { padding:0px; border:none;}legend { box-sizing:border-box; color:inherit; display:table; max-width:100%; padding:0; white-space:normal;}progress { vertical-align:baseline;}textarea { overflow:auto;}[type="checkbox"],[type="radio"] { box-sizing:border-box; padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { height:auto;}[type="search"] { -webkit-appearance:textfield; outline-offset:-2px;}[type="search"]::-webkit-search-decoration { -webkit-appearance:none;}::-webkit-file-upload-button { -webkit-appearance:button; font:inherit;}details { display:block;}summary { display:list-item;}template { display:none;}[hidden] { display:none;}/****** END RESET */.rpt-head { container-name:rpt-head; container-type:inline-size; + .section-outer { margin-top:calc(var(--gutter) * -1); } .rpt-head-inner { --height:var(--reportHeadHeight); page-break-after:avoid; margin-bottom:var(--gutter); position:relative; .rpt-head-header { container-name:page-section; container-type:inline-size; margin-left:auto; margin-right:auto; max-width:var(--pageWidth); width:calc(100% - var(--gutter) - var(--gutter)); background-color:var(--reportHeadBackgroundColor); display:flex; flex-wrap:nowrap; @container rpt-head (max-width:900px) { width:auto; margin-left:var(--gutter); margin-right:var(--gutter); } > h1, > h2 { flex:1 1 auto; line-height:var(--reportHeadHeight); padding:0; display:block; clear:both; position:relative; margin:0px; width:auto; font-size:var(--reportHeadFontSize); color:var(--reportHeadFontColor); .main-head{ line-height:1.5; border-bottom:4px var(--brand-color) solid; display:inline-block; } @container rpt-head (max-width:700px) { text-align:center; font-size:var(--fontSizeH3); } } } }}.tiles-con { .section-inner { display:grid; grid-gap:var(--gutter-double); grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); } .tile-con { display:flex; flex-direction:column; align-items:center; color:var(--fontColor); background-color:var(--accentBackgroundColor); .header { background-size:cover; height:300px; width:100%; &.overlay-over { height:auto; padding:var(--gutter); display:flex; flex-direction:column; justify-content:center; background-color:var(--brandColor); .title { color:var(--white); font-size:var(--fontSizeH3); line-height:1.5; display:block; margin-bottom:calc(var(--gutter) / 2); text-decoration:none; } .sub-title { line-height:1.5; min-height:1.5em; color:var(--white); font-size:var(--fontSizeSmall); margin-bottom:var(--gutter-half); } } } .text { padding:var(--gutter); flex:1 1 auto; width:100%; .logo { margin-top:var(--gutter); height:40px; max-width:50%; object-fit:scale-down; } .title { margin-top:var(--gutter-half); margin-bottom:var(--gutter-half); display:block; font-weight:bold; text-decoration:none; color:var(--fontColor); } .sub-title { margin-top:calc(var(--gutter-half) * -1); margin-bottom:var(--gutter-half); font-weight:normal; display:block; font-size:var(--fontSizeSmall); } } }}.tiles-con.testimonial-con { .section-inner { grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); } h2 { text-align:center; margin-top:0px; padding-top:var(--gutter-double); margin-bottom:var(--gutter-double); } blockquote { padding:0px; margin:0px; font-style:italic; position:relative; margin-left:var(--gutter); font-size:var(--fontSizeSmall); text-wrap:pretty; &:before { text-indent:calc(var(--gutter) * -1); font-size:20px; color:color-mix(in srgb, var(--fontColor), white 20%); content:open-quote; visibility:visible; vertical-align:middle; display:inline-block; } &:after { font-size:20px; color:color-mix(in srgb, var(--fontColor), white 20%); content:close-quote; visibility:visible; } } .tile-con { background-color:transparent; .header { transition:all 0.2s ease-in-out; width:200px; height:100px; box-shadow:none; background-size:contain; background-position:center; background-repeat:no-repeat; z-index:1; filter:grayscale(100%); } }}.site-header { --subMenuWidth:230px; --subMenuPadding:var(--gutter); --arrowWidth:var(--gutter); --chkHeight:calc(var(--logoHeaderMobileHeight) * 0.75); --chkMargin:calc((var(--headerHeightMobile) - var(--chkHeight)) / 2); --menuWidth:300px; --headerPadding:calc((var(--headerHeightMobile) - var(--logoHeaderMobileHeight)) / 2); --headerButtonHeight:var(--inputHeight); --headerButtonPadding:var(--gutter); container-name:site-header; container-type:inline-size; opacity:0; margin-bottom:0px; padding:0px; background-color:var(--headerBackgroundColor); padding-top:calc((var(--headerHeight) - var(--logoHeaderDesktopHeight)) / 2); padding-bottom:calc((var(--headerHeight) - var(--logoHeaderDesktopHeight)) / 2); padding-left:var(--gutter); padding-right:var(--gutter); position:relative; transition:opacity 0.2s ease-in-out; box-shadow:0px 0px 35px 5px var(--bodyBackgroundColor); @container site-container (max-width:1000px){ --headerButtonHeight:calc(var(--gutter) * 1.5); --headerButtonPadding:var(--gutter-half); --headerFontSize:calc((var(--fontSize) + var(--fontSizeSmall)) / 2); } @container site-container (max-width:800px){ --headerFontSize:var(--fontSizeSmall); /* SYNCHUB log in text */ text-align:center; font-size:0px; line-height:var(--headerHeightMobile); height:var(--headerHeightMobile); padding-top:0px; padding-bottom:0px; border-bottom:1px var(--brandColor) solid; &:before { font-size:calc(var(--fontSize)); letter-spacing:0px; font-weight:700; content:"SYNC"; } &:after { font-size:calc(var(--fontSize)); letter-spacing:0px; font-weight:400; content:"HUB"; } } &.loaded { opacity:1; } .theme-float-header & { background-color:transparent; } .show-menu { height:var(--chkHeight); width:var(--chkHeight); line-height:1em; display:none; cursor:pointer; margin-left:0px; top:0; margin-top:var(--chkMargin); color:var(--headerFontColor); fill:var(--headerFontColor); filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, .3)); font-size:var(--chkHeight); z-index:calc(var(--zIndexSlideOutMenu) + 1); position:fixed; text-indent:0; transition:left 0.2s 0s linear, background-color 0.2s 0s linear; opacity:1; left:var(--chkMargin); svg { display:inline-block !important; } &.open { left:calc(var(--menuWidth) - var(--chkHeight) - var(--chkMargin)); transform:rotate(90deg); } @container site-header (max-width:800px) { display:block; } } .menu { text-align:left; container-name:page-section; container-type:inline-size; margin-left:auto; margin-right:auto; max-width:var(--pageWidth); width:100%; z-index:var(--zIndexHeader); align-items:center; display:flex; justify-content:space-between; > ul { --menuItemMargin:2vw; padding:0px; margin:0px; display:flex; flex-wrap:nowrap; flex:1 1 auto; align-items:center; &.main-menu { justify-content:flex-start; } &.user-menu{ justify-content:flex-end; @container site-container (max-width:800px) { border-top:1px var(--brandColor) solid; padding-top:var(--gutter); flex-direction:row-reverse; align-items:center; justify-content:space-around; display:flex; li{ padding:0px; a:not(.button){ display:inline-block; } } } } li { list-style-type:none; cursor:pointer; padding:0px; margin:0px; position:relative; margin-right:var(--menuItemMargin); &.has-component { height:auto; min-height:var(--logoHeaderDesktopHeight); } &:last-child { margin-right:0px; } button, input[type=button], .button { line-height:var(--headerButtonHeight); height:var(--headerButtonHeight); text-align:center; border-radius:var(--playfulBorderRadius); font-weight:normal; padding-left:var(--headerButtonPadding); padding-right:var(--headerButtonPadding); font-size:var(--headerFontSize); white-space:nowrap; } &.logo { margin-right:var(--menuItemMargin); display:inherit; a { background-size:contain; white-space:nowrap; background-repeat:no-repeat; background-position:left center; display:inline-block; background-image:none; text-indent:0; overflow:visible; &:before { color:var(--fontColor); font-size:calc(var(--headerFontSize) * 1.7); letter-spacing:0px; font-weight:700; content:"SYNC"; } &:after { color:var(--fontColor); font-size:calc(var(--headerFontSize) * 1.7); letter-spacing:0px; font-weight:400; content:"HUB"; } @container site-header (max-width:700px) { margin-top:0px; } } } &:hover { > ul { opacity:1; pointer-events:all; } } > a:not(.button), > span { white-space:nowrap; display:block; text-decoration:none; color:var(--headerFontColor); font-size:var(--headerFontSize); user-select:none; text-transform:none; font-weight:normal; } > a { cursor:pointer; &:hover{ opacity:0.5; } } ul { --headerFontSize:var(--fontSizeSmall); margin:0px; z-index:var(--zIndexHeaderDropdowns); position:absolute; top:99%; left:calc(var(--subMenuPadding) * -1); opacity:0; transition:opacity 0.2s 0s linear; pointer-events:none; padding:0px; background-color:var(--headerBackgroundColor); width:var(--subMenuWidth); border:none; box-shadow:3px 3px 5px 2px var(--shadowColor); span, a{ font-weight:normal; } li { padding:calc(var(--subMenuPadding) / 2) var(--subMenuPadding); display:block; margin-left:0px; margin-right:0px; height:auto; &.divider { height:1px; background-color:var(--headerFontColor); overflow:hidden; min-height:0px; cursor:none; padding:0px; margin-left:var(--subMenuPadding); margin-right:var(--subMenuPadding); + .divider { display:none; } &:last-child, &:first-child { display:none; } } a { line-height:2em; font-size:var(--fontSizeSmall); } } @container site-header (max-width:800px) { box-shadow:none; } } ul { li.has-sub-menu { ul { top:calc(var(--subMenuPadding) / 2 * -1); left:calc(var(--subMenuWidth) - var(--subMenuPadding)); } } } } @container site-header (max-width:900px) { li { a { font-size:calc(var(--headerFontSize) - 2px); } } } } @container site-header (max-width:900px) { width:auto; margin-left:0px; margin-right:0px; } @container site-header (max-width:800px) { background-color:var(--headerSlideOutMenuBackgroundColor); position:fixed; width:var(--menuWidth); top:0; bottom:0; left:calc(var(--menuWidth) * -1); z-index:var(--zIndexSlideOutMenu); display:block; transition:left 0.2s 0s linear, box-shadow 0.2s 0s linear; box-shadow:0px 0px 0px var(--shadowColor); overflow-y:auto; &.open { left:0; box-shadow:5px 5px 15px var(--shadowColor); } > ul { max-width:100%; display:block; &.main-menu { margin-top:var(--gutter-half); } .logo { padding-top:0px; a { width:var(--logoHeaderMobileWidth); height:var(--logoHeaderMobileHeight); margin-top:calc((var(--headerHeightMobile) - var(--logoHeaderMobileHeight)) / 2); } } li { display:block; padding:var(--gutter-half) var(--chkMargin); height:auto; &.has-sub-menu { font-weight:bold; > a:hover { } } &.active { &:before { display:none; } } > a { font-weight:normal; text-transform:none; font-size:var(--fontSize); &:not(.user-name):not(.button) { line-height:normal; } } ul { background-color:transparent; box-shadow:none; border:none; box-shadow:none; display:block; position:static; margin-top:0px; margin-bottom:0px; margin-left:var(--gutter-half); opacity:1; li { padding:var(--gutter-quarter) var(--gutter-half); &.divider { margin-left:var(--gutter-half); margin-right:var(--gutter-half); } &.has-sub-menu { > a { &:after { display:none; } } } } } } } } }}.buttons { --bHeight:var(--inputHeight); --buttonsButtonMargin:var(--gutter-half); padding:0px; padding-top:var(--gutter); margin-top:var(--gutter); border-top:1px var(--brandColor) solid; margin-bottom:var(--gutter); display:flex; align-items:center; justify-content:flex-start; margin-left:calc(var(--buttonsButtonMargin) * -1); margin-right:calc(var(--buttonsButtonMargin) * -1); &.center{ justify-content:center; } &:last-child { margin-bottom:0px; } > * { margin-left:calc(var(--buttonsButtonMargin)); margin-right:calc(var(--buttonsButtonMargin)); display:inline-block; height:var(--bHeight); line-height:var(--bHeight); margin-bottom:0px; &:last-child { margin-right:0px; } } a, span { line-height:var(--bHeight); } @container page-section (max-width:700px) { text-align:center; display:flex; flex-direction:column; > * { float:none; display:block; margin-left:0px; margin-right:0px; width:100%; margin-bottom:var(--gutter-half); text-align:center; order:10; &.primary { order:1; } } }}::placeholder { color:#ddd;}/* Revealable copied from Foundation */.revealable { transition:max-height 0.2s ease-in, opacity 0.2s ease-in, margin-top 0.2s ease-in, margin-bottom 0.2s ease-in; max-height:0px; overflow:hidden; opacity:0; pointer-events:none; &.not-revealed { margin-bottom:0px !important; margin-top:0px !important; padding-top:0px !important; padding-bottom:0px !important; } &.revealed { pointer-events:auto; max-height:1000px; opacity:1; }}body { color:var(--fontColor); line-height:var(--lineHeight); font-family:var(--fontFamilyBody); background-color:var(--bodyBackgroundColor);}h1, h2, h3, h4 { margin-bottom:1em; font-weight:bold; font-family:var(--fontFamilyHeadings);}h1 { font-size:var(--fontSizeH1);}h2 { font-size:var(--fontSizeH2);}h3 { font-size:var(--fontSizeH3);}h4 { font-size:var(--fontSizeH4);}p { margin-top:0px; margin-bottom:var(--gutter);}table { margin-bottom:var(--gutter);}a { cursor:pointer; color:var(--linkColor);}ul, ol { margin:1em 0; padding:0 0 0 var(--gutter); &.no-bullets { padding-left:0px; li { list-style-type:none; } }}.error-panel { --panelBackgroundColor:var(--errorBackgroundColor); --panelFontColor:var(--errorFontColor); border:none; padding:0px; padding-left:var(--gutter); border-left:var(--panelFontColor) 4px solid; background-color:transparent; color:var(--fontColor); border-radius:0px; padding-top:0.1px; padding-bottom:0.1px; display:inline-block; line-height:1.5em; > h4:first-child { margin-bottom:0px; } > * { &:first-child { margin-top:0px; } &:last-child { margin-bottom:0px; } } button, input[type=submit], input[type=button] { display:block; &:hover { display:block; } } ul { margin-top:0px; } &.solid { background-color:var(--panelBackgroundColor); border:1px var(--panelFontColor) solid; padding:var(--gutter-half); border-radius:var(--inputBorderRadius); width:100%; margin-bottom:var(--gutter); } &:has(> button){ display:flex; justify-content:space-between; flex-direction:row; flex-wrap:nowrap; align-items:center; > span, > p{ order:10; flex:1 1 auto; margin-bottom:0px; } > button{ margin-left:var(--gutter); order:20; flex:0 0 auto; } }}.block { display:block;}.small { font-size:var(--fontSizeSmall);}.nowrap { white-space:nowrap;}.wrap { word-break:break-all;}input[type=button], input[type=submit], button, .button, [button-type="Button"], button[type=submit] { --btnFontSize:inherit; --btnFontColor:var(--primaryButtonBackgroundColor); --btnBackgroundColor:transparent; --btnSidePadding:1em; --btnHeight:var(--inputHeight); --btnBorderWidth:1px; --btnBorderColor:var(--btnFontColor); font-size:var(--btnFontSize); display:inline-block; user-select:none; color:var(--btnFontColor); border:var(--btnBorderWidth) var(--btnBorderColor) solid; background-color:var(--btnBackgroundColor); padding:0px var(--btnSidePadding); text-decoration-line:none; border-radius:var(--inputBorderRadius); position:relative; transition:all var(--transitionDefaultDuration) var(--transitionDefaultStyle); height:var(--btnHeight); line-height:var(--btnHeight); min-width:var(--btnHeight); /* We never our buttons taller than they are higher */ cursor:pointer; &:hover { opacity:0.5; } &.block { display:block; } &.small { --btnHeight:calc(var(--gutter) * 1.5); --btnFontSize:var(--fontSizeVerySmall); font-size:var(--btnFontSize); /* Have to repeat this here as the standalone 'small' class overrides it. Which is surprising because this is more specific, but...whatevs */ } &.primary{ --btnFontColor:var(--primaryButtonTextColor); --btnBorderColor:var(--primaryButtonBackgroundColor); --btnBackgroundColor:var(--primaryButtonBackgroundColor); } &.button-icon{ --btnFontSize:var(--fontSizeVerySmall); --btnBackgroundColor:transparent; --btnColor:var(--primaryButtonBackgroundColor); text-transform:uppercase; } &.btn-error{ --btnFontColor:var(--errorFontColor); &.primary{ --btnFontColor:var(--white); --btnBackgroundColor:var(--errorFontColor); --btnBorderColor:var(--errorFontColor); } } /* a-tags and inputs have an immediate span which contains the actual text */ > span:first-child { transition:opacity var(--transitionDefaultDuration) var(--transitionDefaultStyle); opacity:1; line-height:inherit; }}a:not(.button), input[type=button], input[type=submit], button, .button, [button-type="Button"], button[type=submit]{ &.loadable{ position:relative; display:inline-block; &.loading { &:after { content:''; visibility:visible; display:block; width:2px; box-shadow:0px 0px 10px 5px var(--white); top:1px; bottom:1px; background-color:var(--white); position:absolute; opacity:1; pointer-events:none; @keyframes kf_loading { 0% { left:1%; } 100% { left:99%; } } animation-direction:alternate; animation-duration:0.5s; animation-name:kf_loading; animation-iteration-count:infinite; animation-easing:ease-in-out; } } }}.page { --pageMargin:var(--gutter); --pageMaxWidth:var(--pageWidth); container-name:page-section; container-type:inline-size; margin-left:auto; margin-right:auto; max-width:var(--pageMaxWidth); width:calc(100% - var(--pageMargin) - var(--pageMargin)); @container app-container (max-width:900px) { width:auto; margin-left:var(--pageMargin); margin-right:var(--pageMargin); }}h1, h2, h3, h4 { line-height:1.5;}.official-partner { font-size:var(--fontSizeH2); line-height:1.5; text-align:center;}.breadcrumbs { @container app-container (max-width:700px) { margin-bottom:var(--gutter); } > * { display:inline-block; font-size:var(--fontSizeSmall); &:not(:last-child) { margin-right:0.5em; } } a { color:var(--linkColor); } span { font-weight:bold; text-decoration:none; color:var(--linkColor); }}.tick-list { padding-left:var(--gutter); li { list-style-type:none; margin-bottom:1em; position:relative; &:not(.no-tick) { &:before { position:absolute; content:''; --w:0.5em; width:var(--w); height:var(--w); background-color:var(--brandColor); display:inline-block; visibility:visible; margin-top:var(--w); margin-left:calc(var(--gutter) * -1); border-radius:50%; } } &.no-tick { opacity:0.5; } }}.site-header { @container app-container (min-width:800px) { background-image:url('/i/assets/logo.png'); background-position:center; background-size:auto calc(var(--headerHeightMobile) / 2.5); background-repeat:no-repeat; }}.float-right-desktop { float:right; margin-left:var(--gutter); margin-bottom:var(--gutter); @container app-container (max-width:700px) { margin-left:auto; margin-right:auto; display:block; float:none; width:100% !important; }}.intro { font-size:var(--fontSizeH3); line-height:1.5em; font-weight:normal; margin-top:0px; color:var(--gray);}.current-stats-blurb { font-size:var(--fontSizeH1); line-height:1.5; color:var(--gray); font-weight:normal; .val { color:var(--brandColor); font-weight:bold; } @container app-container (max-width:900px) { font-size:var(--fontSizeH2); }}.connector-search-con{ display:grid; grid-gap:calc(var(--gutter) * 2); grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); .connector-con{ background-color:var(--bodyBackgroundColor); border-radius:var(--inputBorderRadius); border:1px var(--brandColor) solid; padding:var(--gutter); cursor:pointer; text-decoration:none; color:var(--fontColor); text-align:center; transition:all 0.2s ease-in-out; scale:1; display:block; &:hover { scale:1.1; } .img{ margin-left:auto; margin-right:auto; height:25%; max-width:60%; object-fit:contain; background-repeat:no-repeat; background-position:center; background-size:contain; } > h4{ font-weight:normal; } > a { font-size:var(--fontSizeSmall); } }}.platform-overview-con { &.demarcate-brands { .platform-image-overlay { display:none !important; } } .platform-overview-intro { margin-bottom:calc(var(--gutter) * 2); text-align:center; h2, h3 { margin-bottom:0px; font-size:var(--fontSizeH2); font-weight:normal; } p { font-size:var(--fontSizeH3); line-height:1.5; color:var(--gray); margin-bottom:0px; } } .platform-overview { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); align-items:flex-start; .platform-step { --stepBackgroundColor:#f2f2f2; --stepColor:var(--fontColor); --stepOpacity:0.6; --stepFontWeight:normal; margin-left:var(--gutter); margin-right:var(--gutter); display:flex; flex-wrap:nowrap; justify-content:space-between; flex:1 1 1px; flex-direction:column; margin-top:calc(var(--gutter) * -1); margin-bottom:calc(var(--gutter) * -1); &.step-1 { .title .steps > span:nth-child(1) { --stepColor:var(--brandColorOffset); --stepBackgroundColor:var(--brandColor); --stepOpacity:1; --stepFontWeight:bold; } } &.step-2 { .title .steps > span:nth-child(2) { --stepColor:var(--brandColorOffset); --stepBackgroundColor:var(--brandColor); --stepOpacity:1; --stepFontWeight:bold; } } &.step-3 { .title .steps > span:nth-child(3) { --stepColor:var(--brandColorOffset); --stepBackgroundColor:var(--brandColor); --stepOpacity:1; --stepFontWeight:bold; } } > * { width:auto; margin-top:var(--gutter-half); margin-bottom:var(--gutter-half); } .title { .steps { display:block; font-size:50%; > span { background-color:var(--stepBackgroundColor); color:var(--stepColor); box-shadow:0px 0px 1px 1px var(--stepBackgroundColor); opacity:var(--stepOpacity); font-weight:var(--stepFontWeight); display:inline-block; margin-right:0.5em; width:2em; height:2em; line-height:2em; border-radius:50%; text-align:center; } } } .platform-image { background-size:contain; order:1; background-position:left center; background-repeat:no-repeat; padding-top:50%; height:0px; width:80%; display:block; margin-left:0px; margin-right:auto; position:relative; display:none !important; .platform-image-overlay { --width:var(--gutter-double); background-size:contain; background-position:center; background-repeat:no-repeat; position:absolute; z-index:1; left:var(--gutter); right:var(--gutter); width:var(--width); height:var(--width); display:block; margin-top:-50%; border-radius:50%; background-color:var(--white); border:5px var(--white) solid; box-shadow:0px 0px 5px 5px var(--shadowColor); display:none !important; } } .details { order:2; .title { --fSize:var(--fontSizeH3); --lHeight:calc(var(--fSize) * 1.5); font-size:var(--fSize); line-height:var(--lHeight); min-height:calc(var(--lHeight) * 2); width:90%; max-width:none; } .desc { max-width:none; } } } } @container app-container (max-width:900px) { .platform-overview { flex-direction:column; max-width:500px !important; margin-left:auto !important; margin-right:auto !important; .platform-step { margin-bottom:var(--gutter); margin-top:0px; text-align:center; .details { .title { width:auto; min-height:0px; margin-top:0px; } .desc { font-size:var(--fontSize); } } .platform-image { width:300px; padding-top:230px; margin-left:auto !important; margin-right:auto !important; background-position:bottom center; .platform-image-overlay { left:0; } } } } } @container app-container (max-width:700px) { .platform-overview { .platform-step { .platform-image { width:200px; padding-top:120px; } } } }}.hero-con { &.hero-minor-con { background-color:var(--brandColor); background-position:center center; background-repeat:no-repeat; background-size:cover; position:relative; &:before { position:absolute; top:0; left:0; bottom:0; right:0; background:linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .6)); visibility:visible; content:''; pointer-events:none; } > .hero { display:flex; flex-direction:row; align-items:center; text-align:center; max-width:1000px; padding:var(--gutter-double) var(--gutter); .hero-title { color:var(--white); flex:1 1 auto; h1 { margin-top:0px; margin-bottom:0px; font-size:calc(var(--fontSizeH1) * 2); line-height:1.5; font-weight:normal; } h2 { font-size:var(--fontSizeH2); font-weight:normal; line-height:1.5em; } } @container app-container (max-width:900px) { .hero-title { h1 { font-size:calc(var(--fontSizeH1) * 1.5); } h3 { font-size:calc(var(--fontSizeH2) / 1.5); } } } @container app-container (max-width:700px) { .hero-title { h1 { font-size:var(--fontSizeH1); } } } } } &.hero-split-con { --icon-width:400px; --heroPadding:calc(var(--gutter) * 3); border-bottom:1px var(--gray) solid; &:not(.demarcate-brands) { button, a { color:var(--fontColor); } a.primary { color:var(--brandColorOffset); text-decoration:none; } } &.demarcate-brands { background-color:var(--bodyBackgroundColor); color:var(--fontColor); } &.has-img { &.img-is-icon { .hero-inner .img-con { flex:0 0 var(--icon-width); margin-left:auto; margin-right:auto; background-color:var(--brand-color); height:var(--icon-width); width:var(--icon-width); border-radius:50%; padding:var(--gutter); position:relative; display:flex; .img{ flex-grow:1; background-size:contain; background-position:center; filter:invert(100%); } } } &:not(.img-is-icon) { .hero-inner .img-con { &:before { z-index:0; position:absolute; display:block; width:2px; height:2px; content:''; visibility:visible; box-shadow:0px 0px 200px 200px var(--white); left:50%; top:50%; transform:translateX(-50%) translateY(-50%); opacity:0.5; } } } } .hero-inner { padding:var(--heroPadding) 0px; display:flex; flex-direction:row; justify-content:space-between; align-items:center; position:relative; .hero-title { flex:1 1 60%; margin-right:var(--heroPadding); h1, h2, h3, h4 { } h1 { line-height:1.5; margin:0px; margin-bottom:var(--gutter-double); font-weight:normal; em { font-style:normal; display:inline; border-bottom:4px var(--brandColor) solid; } } h2, h3 { font-weight:normal; line-height:1.5; margin:0px; margin-bottom:1em; font-size:var(--fontSizeH3); em { font-style:normal; display:inline; border-bottom:4px var(--brandColor) solid; } span { display:block; font-size:var(--fontSizeH4); margin-top:var(--gutter); } } .actions { margin-top:var(--gutter-double); border-top:none; button, a { margin-right:var(--gutter); display:inline-block; border-color:var(--fontColor); } @container app-container (max-width:700px) { text-align:center; select { width:100%; } > button, a { margin-left:var(--gutter-half); margin-right:var(--gutter-half); margin-bottom:var(--gutter-half); display:inline-block; } } } } .img-con { position:relative; flex:1 1 40%; .img { background-size:contain; background-position:center; background-repeat:no-repeat; padding-top:75%; z-index:1; position:relative; max-width:70%; margin-left:auto; margin-right:auto; } } @container app-container (max-width:900px) { --icon-width:300px; .hero-title { h1 { font-size:var(--fontSizeH2); } h3 { font-size:var(--fontSizeH4); } } } @container app-container (max-width:700px) { flex-direction:column-reverse; --icon-width:100px; .hero-title { margin-right:auto; margin-left:auto; text-align:center; } .img-con { margin-bottom:var(--gutter); max-width:calc(100% - var(--gutter) - var(--gutter)); margin-left:auto; margin-right:auto; } } } }}.site-container { container-name:site-container; container-type:inline-size; display:flex; flex-direction:column; min-height:100vh; .header-container { flex:0 0 auto; position:sticky; z-index:100; top:0; } .notification-banner-con { font-size:var(--fontSizeSmall); text-align:center; padding:var(--gutter-half); background-color:var(--brandColor); color:var(--white); a { color:var(--white); text-decoration:underline; } } .app-container { flex:1 1 auto; container-name:app-container; container-type:inline-size; + .footer-container { --footerFontSize:var(--fontSizeH4); flex:0 0 auto; background:var(--fontColor); text-align:center; padding:var(--gutter) 0px; opacity:1; .copywrite { margin-top:var(--gutter); text-align:center; color:var(--white); font-size:var(--fontSizeSmall); display:block; text-decoration:none; } .footer-con { display:flex; align-items:flex-start; flex-wrap:nowrap; justify-content:space-around; flex-direction:row; .column { flex:1 1 1px; display:block; a { display:block; text-align:center; margin-bottom:1em; color:var(--white); font-size:var(--footerFontSize); text-decoration:none; } .footer-logo { font-size:var(--fontSizeH3); margin-bottom:var(--gutter-half); color:var(--white); > span { font-weight:bold; } a { font-size:var(--fontSizeVerySmall); } } .btn-c2a { --height:calc(var(--gutter) * 2); font-size:var(--fontSize); line-height:var(--height) !important; height:var(--height) !important; padding:0px 3em !important; display:inline-block; } } @container site-container (max-width:700px) { flex-direction:column-reverse; --footerFontSize:var(--fontSizeSmall); .column { flex:1 1 auto; width:100%; } } } } }}.section-outer { --connectorPadding:calc(var(--gutter) * 4); --connectorPaddingTablet:calc(var(--gutter) * 3); --connectorPaddingMobile:calc(var(--gutter) * 2); padding-top:var(--connectorPadding); padding-bottom:var(--connectorPadding); @container app-container (max-width:900px) { padding-top:var(--connectorPaddingTablet); padding-bottom:var(--connectorPaddingTablet); } @container app-container (max-width:700px) { padding-top:var(--connectorPaddingMobile); padding-bottom:var(--connectorPaddingMobile); } &.size-narrow { .section-inner{ --pageMaxWidth:950px; } } &.size-small { .section-inner{ --pageMaxWidth:750px; } } &:nth-child(2n) { background-color:var(--accentBackgroundColor); } > .section-title { display:inline-block; line-height:1.5em; position:relative; left:50%; transform:translateX(-50%); margin-right:auto; text-align:center; margin-bottom:var(--gutter-double) !important; border-bottom:2px var(--brandColor) solid; padding-bottom:var(--gutter); font-size:var(--fontSizeH2); } > .section-sub-title { display:block; line-height:1.5em; text-align:center; margin-bottom:var(--gutter-double) !important; font-size:var(--fontSizeH3); color:var(--gray); } .section-inner { .buttons{ display:flex; } }}.chart-graphic-con{ --axisWidth:2px; --funnelHeight:calc(var(--gutter) / 3); --funnelWidth:50%; position:relative; width:100%; height:400px; top:0; .chart-piece{ position:absolute; } .bars-con{ display:flex; justify-content:space-between; flex-wrap:nowrap; flex-direction:row; align-items:flex-end; width:100%; position:absolute; height:80%; bottom:0; .bar{ flex:1 1 20%; margin-left:var(--gutter-half); margin-right:var(--gutter-half); background-color:var(--bodyBackgroundColor); border:1px var(--fontColor) solid; position:relative; background-color:rgba(0, 0, 0, 0.01); transition:all 0.2s ease-in-out; &.hit-by-ball{ background-color:var(--brandColor); } &:nth-child(1){ height:5%; } &:nth-child(2){ height:10%; } &:nth-child(3){ height:32%; } &:nth-child(4){ height:38%; } &:nth-child(5), &.bar-40{ height:40%; } &:nth-child(6), &.bar-60{ height:60%; } &:nth-child(7){ height:71%; } &:nth-child(8){ height:88%; } &:nth-child(9){ height:96%; } &:nth-child(10), &.bar-100{ height:100%; } } } .x-axis{ height:var(--axisWidth); background-color:var(--fontColor); bottom:0; left:0; right:0; }}form, fieldset, .fieldset { container-name:form; container-type:inline-size; border:none; margin:0px 0px var(--gutter); padding:0px; max-width:100%; width:100%; &.has-side-bar { } .buttons { padding-top:var(--gutter); margin-top:var(--gutter); border-top:1px var(--brand-color) solid; } &.highlight-optional-elements dl:not([required]):not(.content-type-heading), &.highlight-required-elements dl[required]:not(.content-type-heading) { dt { .form-label { &:after { margin-left:1em; line-height:1; padding:2px; text-transform:uppercase; border:1px transparent solid; font-size:var(--fontSizeVerySmall); border-radius:3px; vertical-align:middle; display:inline-block; visibility:visible; } } } } &.highlight-optional-elements { dl:not([required]):not(.content-type-heading) { dt .form-label:after{ content:'optional'; color:var(--optionalColor); border-color:var(--optionalColor); } } } &.highlight-required-elements { dl[required]:not(.content-type-heading) { dt .form-label:after{ content:'required'; color:var(--compulsoryColor); border-color:var(--compulsoryColor); } } } .form-inner { display:flex; flex-wrap:nowrap; > .elements-con { order:1; flex:1 1 auto; } > .form-side-bar { margin-left:var(--gutter); padding-left:var(--gutter); border-left:1px var(--brand-color) solid; order:2; flex:0 0 30%; min-width:250px; } @container form (max-width:600px) { flex-direction:column; > .elements-con { flex:1 1 100%; } > .form-side-bar { border-left:none; padding-left:0px; margin-left:0px; flex:1 1 100%; } } } .form-side-bar { .side-bar-title { margin-top:0px; } } /*Grid mode makes sure that all columns are the same width, so that anything missing just leaves an empty space*/ .form-group { margin-bottom:var(--gutter); display:flex; flex-wrap:wrap; justify-content:flex-start; container-name:form-group; container-type:inline-size; > dl { margin-bottom:0px; &:not(:last-child){ margin-right:var(--gutter); } flex:1 1 1px; @container form-group (max-width:500px){ &:not(:last-child){ margin-bottom:var(--gutter); } margin-right:0px !important; flex:1 1 100%; } } } dl { margin-bottom:var(--gutter); margin-top:0px; &.display-type-auto { dd { input[type=text]:not(.num), input[type=password], input[type=email], select, textarea, .disableable:not(.disabled):not(.num) { width:auto; @container form (max-width:700px)) { width:100%; } } } } &.display-type-fill { dd { input[type=text]:not(.num), input[type=password], input[type=email], select, textarea, .disableable:not(.disabled):not(.num) { width:100% } } } &.display-type-grouped { margin-bottom:0px; dd { input[type=text]:not(.num), input[type=password], input[type=email], select, textarea, .disableable:not(.disabled):not(.num) { width:100% } } } &.content-type-other { dd { line-height:var(--lineHeight); } } &.content-type-heading { margin-top:var(--gutter); margin-bottom:0px; dt { .form-label-con { .form-label { font-weight:bold; font-size:var(--fontSizeH4); } } } dd { display:none; } } } dt { .form-label-con { display:flex; flex-wrap:nowrap; .form-label { flex:1 1 auto; padding:0px; display:block; margin-bottom:var(--gutter) / 4; @container form (max-width:700px) { overflow:hidden; white-space:nowrap; } text-transform:var(--textTransformFormLabels); font-size:var(--fontSizeFormLabels); } .actions { flex:0 0 auto; font-size:var(--fontSizeSmall); /*.hide-in-print-view();*/ .icon, a, button { font-size:var(--fontSizeFormLabels); line-height:1.5em; min-width:0px; border:none; height:auto; color:var(--primaryButtonBackgroundColor); background-color:transparent; padding:0px; margin-left:var(--gutter); &:after, &:hover:after, &:focus:after { bottom:-1px; } } } } .form-desc { display:block; text-transform:none; font-size:var(--fontSizeSmall); font-weight:normal; margin-bottom:var(--gutter); line-height:var(--lineHeight); } } dd { padding:0px; margin:0px; line-height:var(--inputHeight); &.inline-elements { select, .chk, .rad, input[type="text"] { display:inline-block; margin-right:var(--gutter); width:auto; } } &.text-only { line-height:var(--lineHeight); } }}.ellipsis{ text-overflow:ellipsis; overflow:hidden; width:auto; max-width:100%; white-space:nowrap;}.clickable { transition:opacity 0.2s ease-in-out; &:hover { cursor:pointer; opacity:0.5; }}.flex-justify-space-between { --flexSpaceBetweenItems:var(--gutter); margin-left:calc(var(--flexSpaceBetweenItems) / 2 * -1); margin-right:calc(var(--flexSpaceBetweenItems) / 2 * -1); display:flex; flex-wrap:nowrap; justify-content:space-between; > * { margin-left:calc(var(--flexSpaceBetweenItems) / 2); margin-right:calc(var(--flexSpaceBetweenItems) / 2); }}.drop-shadow{ --level:1; --distance:calc(4px * var(--level)); --spread:calc(20px * var(--level)); --dense:calc(5px * var(--level)); box-shadow:var(--distance) var(--distance) var(--spread) var(--dense) var(--shadowColor);}.icon{ font-size:var(--fontSizeSmall); &:before { visibility:visible; } &.tick { &:before{ content:'\2713'; } } &.cross { &:before{ content:'\2715'; } }}/* Cache CSSParserMiddleware_www.synchub.io_/Pages/styles/x.css_False_HTML_32603120502 12 Mar 06:39:00Z */