@import url("./variables.css");@import url("./features.css");.pricing___module { container-name:pricing___module; container-type:inline-size; .tiered-features-con{ .why-item{ .price{ display:inline-block; margin-bottom:var(--gutter); font-size:var(--fontSize); font-weight:bold; } } } .pricing-calculator{ display:block; h1{ font-family:var(--fontFamilyBody); font-size:var(--fontSizeH2); line-height:1.5; font-weight:bold; margin:0 0 var(--gutter-quarter); color:var(--fontColor); .accent{border-bottom:4px var(--brandColor) solid;} } .additional-connector-prompt{ padding:var(--gutter); border:1px var(--inputBorderColor) solid; background-color:var(--inputBackgroundColor); border-radius:var(--inputBorderRadius); font-size:var(--fontSizeSmall); h4{ margin-top:0px; margin-bottom:0px; em{ border-bottom:2px var(--brandColor) solid; font-style:normal; } } } .sub{color:var(--gray);margin:0 0 var(--gutter-double);font-size:var(--fontSizeH4);line-height:1.5;} .card{ background:var(--white); border:1px solid var(--accentBackgroundColor); border-radius:var(--inputBorderRadius); padding:var(--gutter-double); margin-bottom:var(--gutter); box-shadow:2px 2px 10px 1px color-mix(in srgb, var(--shadowColor) 6%, transparent); &.optional{ h2{ position:relative; &:before{ border-radius:5px; font-weight:normal; content:'Optional'; font-size:var(--fontSizeSmall); color:var(--warningFontColor); border:1px var(--warningFontColor) solid; line-height:var(--gutter); padding:0px var(--gutter-quarter); visibility:visible; position:absolute; left:0; top:calc(var(--gutter) * -1); } } } h2{ font-size:var(--fontSizeH3); margin:0 0 var(--gutter-quarter); display:flex; align-items:center; } p.desc{color:var(--gray);} &.base-card{ background:var(--accentBackgroundColor); border-color:var(--accentBackgroundColor); .card-total{border-top:none;margin-top:0;padding-top:0;} } &.grand-card{ border:2px solid var(--brandColor); .card-total{ border-top:none; margin-top:0; padding-top:0; display:flex; align-items:center; .lbl{font-size:var(--fontSizeH4);color:var(--fontColor);} .val{font-size:var(--fontSizeH2);} } } } .card-total{ display:flex;justify-content:space-between;align-items:baseline; margin-top:var(--gutter);padding-top:var(--gutter-half);border-top:1px solid var(--accentBackgroundColor); .lbl{font-size:var(--fontSizeSmall);color:var(--gray);font-weight:bold;} .val{font-size:var(--fontSizeH4);font-weight:bold;color:var(--brandColor);} } label{ font-size:var(--fontSizeSmall); font-weight:bold; display:block; margin-bottom:var(--gutter-quarter); color:var(--fontColor); } input[type=number]{ width:100%; height:var(--inputHeight); padding:0 var(--gutter-half); border:1px solid var(--inputBorderColor); border-radius:var(--inputBorderRadius); background:var(--inputBackgroundColor); color:var(--fontColor); font-family:var(--fontFamilyBody); font-size:var(--fontSize); &:focus{border-color:var(--brandColor);} } select{ height:var(--inputHeight); padding:0 var(--gutter-half); border:1px solid var(--inputBorderColor); border-radius:var(--inputBorderRadius); background:var(--inputBackgroundColor); color:var(--fontColor); font-family:var(--fontFamilyBody); font-size:var(--fontSize); } .connector-row{ display:flex;gap:var(--gutter-half);align-items:center;margin-bottom:var(--gutter-quarter);flex-wrap:nowrap;justify-content:space-between; border-bottom:1px var(--lightGray) dashed; padding-bottom:var(--gutter-quarter); position:relative; select{ flex:1 1 160px; min-width:0px; font-size:var(--fontSizeSmall); } /* Rich sync-frequency picker */ .freq-select{ position:relative; flex:1 1 220px; min-width:0; /* On narrow layouts, anchor the menu to the whole row so it has room */ @container pricing___module (max-width:700px){ position:static; flex-basis:160px; } } .freq-trigger{ display:flex;align-items:center;gap:var(--gutter-half); width:100%;min-width:0;height:var(--inputHeight);margin:0; padding:0 calc(var(--gutter) * 1.75) 0 var(--gutter-half); position:relative;overflow:hidden;white-space:nowrap;text-align:left; border:1px solid var(--inputBorderColor);border-radius:var(--inputBorderRadius); background:var(--inputBackgroundColor);color:var(--fontColor);box-shadow:none; font-family:var(--fontFamilyBody);font-size:var(--fontSizeSmall);font-weight:normal; line-height:normal;letter-spacing:normal;text-transform:none; cursor:pointer; transition:border-color var(--transitionDefaultDuration) var(--transitionDefaultStyle); &::after{ content:"";position:absolute;right:var(--gutter-half);top:50%; width:6px;height:6px; border-right:2px solid var(--gray);border-bottom:2px solid var(--gray); transform:translateY(-75%) rotate(45deg); transition:transform var(--transitionDefaultDuration) var(--transitionDefaultStyle); } &:hover, &:focus-visible{border-color:var(--brandColor);outline:none;} .freq-name{overflow:hidden;text-overflow:ellipsis;} .freq-price{color:var(--gray);} .freq-tag{margin-left:auto;} .freq-placeholder{color:var(--gray);} /* Narrow:just the name in the trigger; the menu shows the detail */ @container pricing___module (max-width:700px){ .freq-price, .freq-tag{display:none;} } } .freq-select.open .freq-trigger{ border-color:var(--brandColor); &::after{transform:translateY(-25%) rotate(-135deg);} } .freq-menu{ display:none; grid-template-columns:auto auto auto; column-gap:var(--gutter); position:absolute;z-index:20; top:calc(100% + 4px);right:0;left:0; min-width:100%; margin:0;padding:var(--gutter-quarter);list-style:none; background:var(--white); border:1px solid var(--inputBorderColor);border-radius:var(--inputBorderRadius); box-shadow:0 8px 24px color-mix(in srgb, var(--shadowColor) 16%, transparent); font-size:var(--fontSizeSmall); outline:none; @container pricing___module (max-width:700px){ left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1); min-width:0; column-gap:var(--gutter-half); li{padding:var(--gutter-half) var(--gutter-quarter);} .freq-price small{display:none;} } li{ display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center; margin:0;padding:var(--gutter-half); border-radius:var(--inputBorderRadius); white-space:nowrap;cursor:pointer; color:var(--fontColor); &::before{display:none;} &.active{background:var(--lightGray);} &[aria-selected="true"] .freq-name{font-weight:bold;color:var(--brandColor);} .freq-price{text-align:right;font-weight:bold;} .freq-tag{justify-self:start;} } } .freq-select.open .freq-menu{display:grid;} .freq-price small{font-weight:normal;color:var(--gray);margin-left:1px;} /* Connector picker:same look as the frequency picker, with the logo beside the name */ .type-select{ flex:1 1 200px; .freq-menu{ grid-template-columns:1fr; max-height:min(360px, 50vh); overflow-y:auto; li{ grid-template-columns:auto 1fr; justify-content:start; column-gap:var(--gutter-half); } } } .type-logo{ flex:0 0 auto; width:calc(var(--gutter) * 1.25); height:calc(var(--gutter) * 1.25); object-fit:contain; border-radius:50%; background:var(--white); box-shadow:0 0 1px 1px var(--gray); } .freq-tag{ --tone:var(--gray); display:inline-block; padding:2px var(--gutter-half);border-radius:20px; font-size:var(--fontSizeVerySmall);font-weight:bold;line-height:1.6;white-space:nowrap; color:var(--tone); background:color-mix(in srgb, var(--tone) 12%, transparent); border:1px solid color-mix(in srgb, var(--tone) 28%, transparent); &.tone-casual{--tone:var(--gray);} &.tone-adhoc{--tone:var(--gray);} &.tone-popular{--tone:var(--brandColor);} &.tone-critical{--tone:#198547} } .qty-input{font-size:var(--fontSizeSmall); flex:0 0 var(--gutter-double);text-align:right;padding:0 var(--gutter-quarter);} > button{ flex:0 0 auto; background:none;border:none;color:var(--errorFontColor);cursor:pointer; font-size:18px;line-height:1; min-width:0px; padding:0px; &:hover{opacity:0.5;} } } .add-btn{ --btnFontColor:var(--primaryButtonBackgroundColor); display:inline-block; background:transparent; color:var(--btnFontColor); border:1px dashed var(--btnFontColor); border-radius:var(--playfulBorderRadius); height:var(--inputHeight); line-height:var(--inputHeight); padding:0 var(--gutter); font-family:var(--fontFamilyBody); font-size:var(--fontSizeSmall); font-weight:bold; cursor:pointer; transition:opacity var(--transitionDefaultDuration) var(--transitionDefaultStyle); &:hover{opacity:0.5;} } .hint{color:var(--gray);font-size:var(--fontSizeVerySmall);margin-top:var(--gutter-quarter);} .badge{ display:inline-block;background:var(--accentBackgroundColor);color:var(--positiveColor); font-size:var(--fontSizeVerySmall);font-weight:bold; padding:2px var(--gutter-half);border-radius:20px;margin-left:var(--gutter-quarter); text-wrap:nowrap; } .cta{ --btnFontColor:var(--primaryButtonTextColor); display:block;text-align:center;background:var(--primaryButtonBackgroundColor); color:var(--btnFontColor);text-decoration:none; height:var(--inputHeight);line-height:var(--inputHeight); border-radius:var(--playfulBorderRadius);font-weight:bold;font-size:var(--fontSizeSmall); margin-top:var(--gutter);border:1px var(--primaryButtonBackgroundColor) solid; transition:opacity var(--transitionDefaultDuration) var(--transitionDefaultStyle); &:hover{opacity:0.5;} } .note{font-size:var(--fontSizeVerySmall);color:var(--gray);margin-top:var(--gutter);line-height:var(--lineHeight);} }}/* Cache CSSParserMiddleware_www.synchub.io_/Pages/styles/pricing.css_False_HTML_32611012009 3 Nov 08:07:33Z */