1637 lines
39 KiB
CSS
1637 lines
39 KiB
CSS
:host {
|
|
--smepro-green: #5fa832;
|
|
--smepro-teal: #3f9a86;
|
|
}
|
|
|
|
.home-text{
|
|
color: #017070;
|
|
}
|
|
|
|
.hover-text:hover{
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* PageLoading GIF */
|
|
.pageLoading-Gif{
|
|
width: 30%;
|
|
margin-top: 5%;
|
|
}
|
|
|
|
.sw-loading-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
inset: 0;
|
|
min-height: 100%;
|
|
background: linear-gradient(180deg, #f4faee 0%, #eaf3fb 100%) !important;
|
|
border-radius: 16px;
|
|
width: 100%;
|
|
}
|
|
.sw-loading-wrap img {
|
|
width: 30%;
|
|
height: auto;
|
|
max-width: 260px;
|
|
}
|
|
|
|
.greenColor circle{
|
|
stroke: #95BE45 !important;
|
|
fill: transparent !important;
|
|
stroke-width: 4px !important;
|
|
}
|
|
|
|
.greenColor svg{
|
|
stroke: #95BE45 !important;
|
|
fill: #95BE45 !important;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.grayColor svg{
|
|
stroke: #AFAFAF;
|
|
fill: #AFAFAF;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.grayColor circle{
|
|
stroke: #AFAFAF;
|
|
fill: transparent;
|
|
stroke-width: 4px;
|
|
}
|
|
|
|
.darkGreenColor svg{
|
|
stroke: #95BE45 !important;
|
|
fill: #95BE45 !important;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.darkGreenColor circle{
|
|
stroke:#95BE45;
|
|
fill: transparent;
|
|
stroke-width: 4px;
|
|
}
|
|
|
|
.setup-circle{
|
|
fill: transparent;
|
|
}
|
|
|
|
.setupColor path{
|
|
stroke: #95BE45;
|
|
fill:transparent;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.setupColor circle{
|
|
stroke:#95BE45;
|
|
fill: transparent;
|
|
stroke-width: 4px;
|
|
}
|
|
|
|
.removeMarginLine{
|
|
margin-left: 0px !important;
|
|
margin-right: 0px !important;
|
|
}
|
|
|
|
/* NOT USING THE MODAL BODY BORDER COLOR CSS */
|
|
/* .modalbody{
|
|
border-bottom: 3px solid #27AE60 !important;
|
|
border-left: 3px solid #27AE60 !important;
|
|
border-right: 3px solid #27AE60 !important;
|
|
box-shadow: 0px 50px 50px 50px rgba(39, 174, 96, 0.20);
|
|
} */
|
|
|
|
/* NOT USING THE MODAL HEADER BORDER COLOR CSS */
|
|
|
|
.modalHeader{
|
|
/* border: 3px solid #27AE60 !important; */
|
|
border-bottom: none !important;
|
|
border-top-left-radius: 2rem;
|
|
border-top-right-radius: 2rem;
|
|
}
|
|
|
|
/* NOT USING THE MODAL FOOTER BORDER COLOR CSS */
|
|
.modalFooter{
|
|
border-top: none !important;
|
|
border-bottom-left-radius: 2rem;
|
|
border-bottom-right-radius: 2rem;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* NOT USING THE MODAL FOOTER BORDER COLOR CSS */
|
|
/* .modalFooter{
|
|
border-bottom: 3px solid #27AE60 !important;
|
|
border-left: 3px solid #27AE60 !important;
|
|
border-right: 3px solid #27AE60 !important;
|
|
box-shadow: 0px 50px 50px 0px rgba(39, 174, 96, 0.20);
|
|
} */
|
|
|
|
.text-color{
|
|
-webkit-text-fill-color:#95BE45;
|
|
font-family: Montserrat, sans-serif;
|
|
}
|
|
|
|
.cs-modal-card {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.cs-modal-card::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.cs-modal-container {
|
|
height: auto !important;
|
|
max-height: 90vh;
|
|
padding: 0 !important;
|
|
margin: auto !important;
|
|
overflow: auto;
|
|
}
|
|
|
|
.cs-modal-container .slds-modal__content {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.sme-reset-button-style lightning-combobox {
|
|
display: block;
|
|
background: #ffffff;
|
|
border-radius: 9px;
|
|
box-shadow: 0 8px 20px -14px rgba(23,43,32,.35);
|
|
--slds-c-input-color-background: transparent;
|
|
--slds-c-input-color-border: #d8ddd8;
|
|
--slds-c-input-radius-border: 0.625rem;
|
|
--lwc-colorBackgroundInput: transparent;
|
|
}
|
|
|
|
:host {
|
|
--sds-c-textarea-color-border: #cdcdcd;
|
|
--sds-c-textarea-color-border-radius: 0.625rem;
|
|
}
|
|
|
|
.text-style{
|
|
font-family: Montserrat, sans-serif;
|
|
}
|
|
/*
|
|
.buttonCSS .slds-button .slds-button_success{
|
|
background-color: #27AE60;
|
|
-slds-c-button-color-background: #27AE60;
|
|
--slds-c-button-color-border: #27AE60;
|
|
--slds-c-button-text-color:white;
|
|
} */
|
|
|
|
.slds-button .slds-button_success{
|
|
/* background-color: #27AE60; */
|
|
--slds-c-button-color-background:#95BE45;
|
|
--slds-c-button-color-border:#95BE45;
|
|
--slds-c-button-text-color:white;
|
|
}
|
|
|
|
.textColor{
|
|
-webkit-text-fill-color: #95BE45;
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
line-height: 16.31px;
|
|
letter-spacing: -0.02em;
|
|
text-decoration: underline;
|
|
text-decoration-style: solid;
|
|
text-decoration-skip-ink: auto;
|
|
color: #95BE45;
|
|
}
|
|
|
|
.custom-support-button {
|
|
background: linear-gradient(120deg, #f4faee 0%, #eaf3fb 100%);
|
|
white-space: nowrap;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
color: rgb(47, 107, 74);
|
|
border: 1px solid #cfe0d6;
|
|
border-radius: 9px;
|
|
box-shadow: 0 8px 20px -14px rgba(23,43,32,.35);
|
|
font-size: 14px;
|
|
flex: 1;
|
|
width: auto;
|
|
padding: 0 14px;
|
|
height: 38px;
|
|
font-weight: 700;
|
|
font-family: inter,sans-serif;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.custom-support-button:hover {
|
|
background: linear-gradient(120deg, #eaf3d2 0%, #dfeefb 100%);
|
|
border-color: #a9d2be;
|
|
}
|
|
|
|
.sme-btn-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.custom-reset-button {
|
|
background: linear-gradient(120deg, #f4faee 0%, #eaf3fb 100%);
|
|
color: rgb(47, 107, 74);
|
|
border: 1px solid #cfe0d6;
|
|
border-radius: 9px;
|
|
box-shadow: 0 8px 20px -14px rgba(23,43,32,.35);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
font-family: inherit;
|
|
height: 38px;
|
|
flex: 1;
|
|
width: auto;
|
|
padding: 0 14px;
|
|
box-sizing: border-box;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.custom-reset-button:hover {
|
|
background: linear-gradient(120deg, #eaf3d2 0%, #dfeefb 100%);
|
|
border-color: #a9d2be;
|
|
}
|
|
|
|
.custom-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.link-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.custom-icon {
|
|
background: #536E1E;
|
|
width: 38;
|
|
height: 38;
|
|
top: 469px;
|
|
left: 1424.5px;
|
|
margin-left: 13px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.custom-link {
|
|
margin-left: 0.75rem;
|
|
color: #ffffff;
|
|
text-decoration: underline;
|
|
font-weight: 600;
|
|
font-size: 1.05rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ImageSrc {
|
|
width: 269.8px;
|
|
height: 70.83px;
|
|
top: 327.76px;
|
|
left: 1425.24px;
|
|
padding-bottom: 12px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.no-icon-bg lightning-icon svg {
|
|
background: none !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.custom-reset-button .no-icon-bg {
|
|
--sds-c-icon-color-foreground-default: rgb(47, 107, 74);
|
|
--slds-c-icon-color-foreground-default: rgb(47, 107, 74);
|
|
color: rgb(47, 107, 74);
|
|
}
|
|
|
|
.custom-reset-button .no-icon-bg svg,
|
|
.custom-reset-button .no-icon-bg svg path {
|
|
fill: rgb(47, 107, 74) !important;
|
|
}
|
|
|
|
.no-icon-bg2 {
|
|
--sds-c-icon-color-foreground-default: white;
|
|
margin-left: 0.5rem;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.no-icon-bg3 {
|
|
--sds-c-icon-color-foreground-default: #536E1E;
|
|
|
|
}
|
|
|
|
.no-icon-bg4 {
|
|
--sds-c-icon-color-foreground-default:#000000;
|
|
--sds-c-icon-color-background: #FFFFFF
|
|
}
|
|
|
|
:host {
|
|
--slds-c-icon-color-background: transparent;
|
|
}
|
|
|
|
.contact-us-container {
|
|
text-align: center;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.contact-us-header {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
margin: 0;
|
|
}
|
|
|
|
.contact-us-text {
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
/* .custom-width-80 {
|
|
width: 70%;
|
|
}
|
|
.custom-width-20 {
|
|
width: 20%;
|
|
} */
|
|
|
|
/* .full-height {
|
|
min-height: 100vh;
|
|
} */
|
|
|
|
.tall-column {
|
|
min-height: 0;
|
|
width: calc(100% - 380px);
|
|
/* Contains the processing-spinner overlay (slds-align_absolute-center,
|
|
which is position:absolute + inset:0) to just this column. Without
|
|
this, that overlay had no positioned ancestor to anchor to and
|
|
stretched across the full page width, visually covering the left
|
|
step-nav (Step 1/Step 2 etc.) while a page/step transition loads. */
|
|
position: relative;
|
|
}
|
|
.tall-column-img {
|
|
min-height: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.custom-icon {
|
|
background: linear-gradient(120deg, #5fa832, #2f8fb0);
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-left: 13px;
|
|
opacity: 1;
|
|
border-radius: 9px;
|
|
box-shadow: 0 4px 10px -4px rgba(23,43,32,.35);
|
|
--sds-c-icon-color-foreground: #ffffff;
|
|
--slds-c-icon-color-foreground-default: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.link-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
background: linear-gradient(120deg, #f4faee 0%, #eaf3fb 100%);
|
|
border: 1px solid #cfe0d6;
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.custom-link {
|
|
margin-left: 0;
|
|
/* color: #37453d; */
|
|
color: #2f7d6a;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.custom-link:hover {
|
|
text-decoration: none;
|
|
color: #2f7d6a;
|
|
}
|
|
|
|
.contact-us-header {
|
|
color: #1c2b23;
|
|
}
|
|
|
|
.contact-us-text {
|
|
color: #556059;
|
|
}
|
|
|
|
.slds-backdrop_open {
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
}
|
|
|
|
.wa-header {
|
|
background: linear-gradient(135deg, #8bc34a 0%, #2f8fb0 100%);
|
|
height: 6rem;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.wa-icon-circle {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -34px;
|
|
transform: translateX(-50%);
|
|
width: 76px;
|
|
height: 76px;
|
|
border-radius: 50%;
|
|
background: rgb(255, 255, 255);
|
|
box-shadow: rgba(23, 43, 32, 0.35) 0px 12px 26px -8px, rgba(255, 255, 255, 0.6) 0px 0px 0px 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.wa-cancel-btn {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
width: 121.85px;
|
|
height: 44px;
|
|
border-radius: 0.625rem;
|
|
background-color: #EAEAEA;
|
|
color: #000000;
|
|
border: 1px solid #ccc;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.wa-confirm-btn {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
width: 154px;
|
|
height: 44px;
|
|
border: none;
|
|
border-radius: 0.625rem;
|
|
background: linear-gradient(120deg, rgb(95, 168, 50), rgb(47, 143, 176));
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
box-shadow: rgba(23, 43, 32, 0.35) 0px 6px 16px -8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.wa-confirm-btn:hover {
|
|
box-shadow: rgba(23, 43, 32, 0.5) 0px 8px 20px -6px;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* .sme-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 22px 22px 20px;
|
|
background: linear-gradient(125deg, #5fa832 0%, #3f9a86 55%, #2f8fb0 100%);
|
|
border-radius: 20px 20px 0 0;
|
|
} */
|
|
/* Old icon + "Sync made easy" title/tagline banner removed: the SMELogoPNG
|
|
static resource image now sits centered inside the box on a gradient
|
|
backdrop (kept as a fallback fill/border color, and as a safety net if
|
|
the resource image is ever missing/blank).
|
|
|
|
The image is centered via flex (not position:absolute + inset:0 +
|
|
object-fit:cover) specifically so that resizing/maximizing the browser
|
|
window — which changes this box's WIDTH but not its fixed min-height —
|
|
never stretches or crops the image's height. object-fit:contain +
|
|
max-width/max-height means the image keeps its own aspect ratio and
|
|
just stays centered, shrinking only if it would otherwise overflow. */
|
|
.sme-panel-header {
|
|
width: 100%;
|
|
min-height: 110px;
|
|
height: auto;
|
|
padding: 14px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(125deg, #5fa832 0%, #3f9a86 55%, #2f8fb0 100%);
|
|
border-radius: 20px 20px 0 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sme-panel-header-logo {
|
|
display: block;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.sme-panel-header-icon {
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 12px;
|
|
background: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sme-panel-header-text {
|
|
text-align: left;
|
|
}
|
|
|
|
.sme-panel-title {
|
|
font-size: 19px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
opacity: .95;
|
|
}
|
|
|
|
.sme-panel-title b {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.sme-panel-tagline {
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,.82);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.sme-panel-avatar-wrap {
|
|
width: 84px;
|
|
height: 84px;
|
|
margin: 18px auto 12px;
|
|
border-radius: 50%;
|
|
/* border: 3px solid #dff0e3; */
|
|
border: 3px solid #2f7d6a;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
}
|
|
|
|
.sme-panel-avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.sme-online-pill {
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #eaf3d2;
|
|
color: #3f6b1e;
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
padding: 10px 16px;
|
|
border-radius: 16px;
|
|
margin: 0 auto;
|
|
white-space: normal;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sme-online-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #5fa832;
|
|
box-shadow: 0 0 0 4px rgba(95,168,50,.18);
|
|
flex-shrink: 0;
|
|
display: inline-block;
|
|
animation: sw-pulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
.sme-link-text-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
text-align: left;
|
|
}
|
|
|
|
.sme-link-eyebrow {
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
letter-spacing: .04em;
|
|
text-transform: uppercase;
|
|
color: #5c6a60;
|
|
}
|
|
|
|
.sme-link-teal {
|
|
color: #2f7d6a !important;
|
|
}
|
|
|
|
.sme-upgrade-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 1.25rem;
|
|
padding: 14px 14px;
|
|
background: linear-gradient(120deg, #5fa832, #2f8fb0) !important;
|
|
border: none !important;
|
|
border-radius: 14px !important;
|
|
box-shadow: 0 12px 28px -12px rgba(23,43,32,.55);
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sme-upgrade-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
min-width: 50px;
|
|
border-radius: 10px;
|
|
background: rgba(255,255,255,.9);
|
|
color: #3f8f5a;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-self: center;
|
|
margin-top: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sme-upgrade-icon-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
display: block;
|
|
}
|
|
|
|
.sme-upgrade-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sme-upgrade-title {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.sme-upgrade-pro-badge {
|
|
background: #fff !important;
|
|
color: #2f7d4a !important;
|
|
font-size: 10px !important;
|
|
border-radius: 6px !important;
|
|
padding: 2px 8px !important;
|
|
}
|
|
|
|
.sme-upgrade-sub {
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,.85);
|
|
margin-top: 3px;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
white-space: normal;
|
|
}
|
|
|
|
.sme-upgrade-article-link {
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sme-upgrade-chevron {
|
|
color: rgba(255,255,255,.75);
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-self: center;
|
|
margin-top: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.ImageSrc {
|
|
width: 270px;
|
|
height: auto;
|
|
padding-bottom: 12px;
|
|
opacity: 1;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.slds-theme_success {
|
|
background-color: #95BE45 !important;
|
|
border-radius: 1rem !important;
|
|
padding: 1rem !important;
|
|
width: 320px;
|
|
color: white;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.sticky-box {
|
|
top: auto;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.no-icon-bg svg {
|
|
background: none !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
.custom-form-card{
|
|
box-shadow: 0 2px 10px 0 rgba(0,0,0,0); /* Stronger shadow */
|
|
border-radius: 8px;
|
|
background: white;
|
|
}
|
|
|
|
.custom-button {
|
|
background-color: #536E1E; /* custom green */
|
|
color: white;
|
|
border: none; /* text color white */
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
width: 200px;
|
|
height: 44px;
|
|
border-radius: 0.625rem;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
/* ── Global footer actions (Back + Save & Next) — attached to card bottom ── */
|
|
/* Record Type step's footer nav (the only step with hideBottomButtons=false).
|
|
Matches .sw-actions on the Field Mapping / Object Setup steps so every step's
|
|
footer looks the same: Back on the left, Save & Next on the right.
|
|
The zoom "jump" bug was NOT space-between itself -- it was the 1300px media
|
|
query below flipping justify-content to space-evenly, so crossing that width
|
|
(which browser zoom does) relocated the buttons. That override is gone; only
|
|
padding is adjusted responsively, exactly like fieldMappingParent does. */
|
|
.sw-actions-global {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
padding: 18px 26px 22px;
|
|
margin-top: -1px;
|
|
background: #fff;
|
|
border: 1px solid #e6ebe6;
|
|
border-top: 1px solid #f0f2f0;
|
|
border-radius: 0 0 16px 16px;
|
|
box-shadow: 0 10px 26px -16px rgba(23,43,32,.28);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sw-btn-back {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #fff;
|
|
color: #37453d;
|
|
border: 1px solid #d4d9d4;
|
|
border-radius: 9px;
|
|
padding: 10px 18px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
width: auto;
|
|
min-width: max-content;
|
|
transition: box-shadow .2s, border-color .2s;
|
|
}
|
|
|
|
.sw-btn-back svg {
|
|
flex-shrink: 0;
|
|
}
|
|
.sw-btn-back:hover {
|
|
border-color: #5fa832;
|
|
box-shadow: 0 2px 8px rgba(95,168,50,.15);
|
|
}
|
|
.sw-btn-back:disabled {
|
|
opacity: .5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.sw-btn-save {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: linear-gradient(120deg, #5fa832, #2f8fb0);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 9px;
|
|
padding: 11px 24px;
|
|
font-size: 13.5px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
box-shadow: 0 4px 12px rgba(95,168,50,.3);
|
|
transition: box-shadow .2s, transform .15s;
|
|
}
|
|
.sw-btn-save:hover {
|
|
box-shadow: 0 8px 22px -4px rgba(58,150,120,.65), 0 3px 8px rgba(95,168,50,.3);
|
|
transform: translateY(-1px);
|
|
}
|
|
.sw-btn-save:disabled {
|
|
opacity: .5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* ── Responsive — shrink footer gracefully with the nav/rail columns ── */
|
|
@media (max-width: 1300px) {
|
|
.sw-actions-global {
|
|
/* justify-content intentionally NOT overridden here -- flipping it
|
|
between breakpoints is what moved the buttons on zoom. */
|
|
padding: 16px 20px 18px;
|
|
}
|
|
}
|
|
@media (max-width: 900px) {
|
|
.sw-actions-global {
|
|
/* gap kept at the base 16px so button spacing never shifts. */
|
|
padding: 14px 16px 18px;
|
|
}
|
|
.sw-btn-back,
|
|
.sw-btn-save {
|
|
padding: 8px 14px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
|
|
.iconBg{
|
|
--sds-c-icon-color-foreground: #ffffff;
|
|
}
|
|
|
|
.iconbg2{
|
|
--slds-c-icon-color-foreground: #000000;
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
NEW — presentation-only CSS added for the reference-mockup
|
|
restyle. Purely additive: nothing above this line was removed,
|
|
so every modal/child-component style still resolves exactly as
|
|
before. Adjusts .tall-column's width formula to make room for
|
|
the new left step-nav column added alongside it.
|
|
============================================================ */
|
|
|
|
.tall-column {
|
|
width: calc(100% - 380px - 220px);
|
|
}
|
|
|
|
/* ============================================================
|
|
Shell 3-column layout — make it a clean flex row so:
|
|
(1) the gap between nav↔middle equals the gap between
|
|
middle↔rail, and
|
|
(2) the middle content column GROWS to fill the space
|
|
(no dead gap before the rail), while still being able to
|
|
SHRINK on zoom instead of overflowing / wrapping.
|
|
Overrides the slds-gutters padding-based spacing with a real
|
|
flex `gap`. ============================================================ */
|
|
.sw-shell-grid {
|
|
display: flex !important;
|
|
flex-wrap: nowrap;
|
|
gap: 24px;
|
|
align-items: stretch;
|
|
}
|
|
.sw-shell-grid > .slds-col {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
.sw-shell-grid > .sw-nav-col {
|
|
flex: 0 0 200px;
|
|
max-width: 200px;
|
|
}
|
|
.sw-shell-grid > .tall-column {
|
|
flex: 1 1 auto;
|
|
width: auto;
|
|
min-width: 0; /* allow shrink instead of overflow */
|
|
/* Make the middle content box match the height of the left nav bar:
|
|
.sw-shell-grid's align-items:stretch already gives this column the
|
|
full row height, but that height needs to cascade down through its
|
|
children (lightning-layout-item -> c-setup) for the card inside
|
|
c-setup to actually fill it instead of just sizing to its content. */
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.sw-shell-grid > .tall-column > lightning-layout-item {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.sw-shell-grid > .tall-column > lightning-layout-item > c-setup {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.sw-shell-grid > .tall-column-img {
|
|
flex: 0 0 310px;
|
|
max-width: 310px;
|
|
min-width: 0;
|
|
}
|
|
.sw-shell-grid > .tall-column-img .rail-card,
|
|
.sw-shell-grid > .tall-column-img .sme-panel {
|
|
width: 100% !important; /* card fills its 380px column, no left gap */
|
|
}
|
|
.sw-shell-grid > .tall-column-img .slds-grid_align-end {
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.sw-topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 6px 20px;
|
|
gap: 14px;
|
|
}
|
|
|
|
.sw-topbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.sw-topbar-icon {
|
|
width: 76px;
|
|
height: 76px;
|
|
border-radius: 12px;
|
|
background: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-self: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sw-topbar-icon-img {
|
|
width: 76px;
|
|
height: 76px;
|
|
object-fit: contain;
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
|
|
.sw-topbar-title {
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
color: #1c2b23;
|
|
}
|
|
|
|
.sw-topbar-title strong {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.sw-topbar-title_accent {
|
|
color: #5fa832;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sw-topbar-tagline {
|
|
font-size: 12px;
|
|
color: #7c8a80;
|
|
}
|
|
|
|
/* Left step nav column — flex:0 0 220px alone isn't enough to keep this
|
|
column at a fixed width: flex items refuse to shrink below their
|
|
CONTENT's natural min-width by default, so a long nowrap chip/title
|
|
can force the column wider than 220px and spill over the main content
|
|
next to it. min-width:0 (cascaded down through nav-item/nav-label) plus
|
|
overflow:hidden here is what actually caps it. display:flex + the
|
|
nav's flex:1 below is what lets the nav stretch to the full height of
|
|
the row (matching the tallest sibling column, i.e. the main content),
|
|
same as the reference mockup, instead of only being as tall as its
|
|
own 6 steps. */
|
|
.sw-nav-col {
|
|
flex: 0 0 220px;
|
|
max-width: 220px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
|
|
.sw-nav {
|
|
flex: 1 1 auto;
|
|
padding: 16px 12px;
|
|
border-radius: 16px;
|
|
border: 1px solid #dce8e2;
|
|
background: linear-gradient(180deg,#f4faee 0%,#eaf3fb 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
/* NOTE: no gap here on purpose — a gap between .nav-item rows breaks
|
|
the connecting rail line (it's drawn inside each item's own rail,
|
|
so a gap between items shows up as a visible break in the line).
|
|
Spacing between steps is done on .nav-label's margin instead, which
|
|
stretches .nav-item-rail (align-self:stretch) right along with it,
|
|
keeping the line continuous through the extra space. */
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
gap: 14px;
|
|
flex: 1;
|
|
min-height: 96px;
|
|
min-width: 0;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-item-rail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.nav-circle {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 50%;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all .25s;
|
|
color: #a6b0a8;
|
|
background: #fff;
|
|
border: 2px solid #e0e6e0;
|
|
box-shadow: 0 6px 16px -10px rgba(23,43,32,.3);
|
|
}
|
|
.nav-circle_active {
|
|
color: #fff;
|
|
background: #0176d3;
|
|
border: 2px solid #0176d3;
|
|
box-shadow: 0 0 0 5px rgba(58,150,120,.16), 0 6px 16px -4px rgba(58,150,120,.5);
|
|
}
|
|
.nav-circle_done {
|
|
color: #fff;
|
|
background: linear-gradient(135deg,#5fa832,#2f8fb0);
|
|
border: 2px solid transparent;
|
|
box-shadow: 0 0 0 5px rgba(58,150,120,.16), 0 6px 16px -4px rgba(58,150,120,.5);
|
|
}
|
|
|
|
.nav-line {
|
|
width: 2px;
|
|
flex: 1 1 auto;
|
|
min-height: 18px;
|
|
margin-top: -2px;
|
|
margin-bottom: -2px;
|
|
border-radius: 2px;
|
|
background: #e6ebe6;
|
|
}
|
|
.nav-line_done {
|
|
background: #5fa832;
|
|
}
|
|
.nav-line_hidden {
|
|
background: transparent;
|
|
}
|
|
|
|
.nav-label {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
padding: 8px 12px 14px;
|
|
border-radius: 12px;
|
|
cursor: default;
|
|
user-select: none;
|
|
transition: background .2s;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
box-sizing: border-box;
|
|
/* Space below each step's label (instead of a gap on .sw-nav, which
|
|
would break the connecting rail line between steps). This grows
|
|
.nav-item's height too, so .nav-item-rail (align-self:stretch)
|
|
stretches right along with it and the line stays unbroken. */
|
|
margin-bottom: 6px;
|
|
}
|
|
.nav-label_active {
|
|
background: linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);
|
|
border: 1px solid #dce8e2;
|
|
box-shadow: 0 6px 18px -12px rgba(23,43,32,.22);
|
|
}
|
|
|
|
.nav-chip {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: .04em;
|
|
text-transform: uppercase;
|
|
padding: 2px 8px;
|
|
border-radius: 6px;
|
|
white-space: normal;
|
|
overflow-wrap: break-word;
|
|
box-sizing: border-box;
|
|
background: #f1f4f1;
|
|
color: #9aa79d;
|
|
}
|
|
.nav-chip_active {
|
|
background: #dcecf7;
|
|
color: #0176d3;
|
|
}
|
|
.nav-chip_done {
|
|
background: #e6f3d5;
|
|
color: #4f8a24;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
margin-top: 6px;
|
|
color: #5b6a61;
|
|
overflow-wrap: break-word;
|
|
}
|
|
.nav-title_active {
|
|
color: #0176d3;
|
|
}
|
|
.nav-title_done {
|
|
color: #3f8f2f;
|
|
}
|
|
|
|
.nav-desc {
|
|
font-size: 11.5px;
|
|
color: #93a099;
|
|
margin-top: 2px;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Right support rail — reskins the real green support box (same real
|
|
links/handlers: multipleStores, openContactSupport, resetDefaults)
|
|
with the new card look, replacing .slds-theme_success on that one
|
|
element only. */
|
|
@keyframes rail-pulse {
|
|
0%, 100% { opacity: .35; transform: scale(.8); }
|
|
50% { opacity: 1; transform: scale(1.15); }
|
|
}
|
|
|
|
.rail-card {
|
|
background: linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);
|
|
border: 1px solid #e4ebe6;
|
|
border-radius: 20px;
|
|
box-shadow: 0 18px 44px -24px rgba(63,138,36,.45), 0 22px 52px -28px rgba(47,143,176,.4);
|
|
color: #1c2b23;
|
|
}
|
|
|
|
.sme-contact-support{
|
|
position: sticky;
|
|
height: max-content;
|
|
top: 30px;
|
|
}
|
|
|
|
/* Responsive stacking — below this width the 3-column shell (nav / main /
|
|
support rail) stacks into a single full-width column, top to bottom,
|
|
same order as the reference mockup's mobile layout: top bar, step nav,
|
|
main content, support rail. No functionality changes here — the same
|
|
real components/handlers just render one under another instead of
|
|
side by side. */
|
|
/* The support rail used to drop below the main content below 1200px
|
|
(flex-direction:column). It now always stays on the right as its own
|
|
column — it only shrinks with the viewport, via the min-width clamp
|
|
below, instead of wrapping under the main content. */
|
|
@media (max-width: 1200px) {
|
|
.sw-shell-grid > .tall-column-img {
|
|
flex: 0 0 280px;
|
|
max-width: 280px;
|
|
}
|
|
.tall-column-img .rail-card {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 792px) {
|
|
.tall-column-img {
|
|
padding-inline: 0 !important;
|
|
flex-grow: 0;
|
|
}
|
|
.tall-column-img .slds-theme_success{
|
|
width: 212px !important;
|
|
padding: 16px 10px !important;
|
|
|
|
}
|
|
.tall-column-img .slds-align_absolute-center{
|
|
flex-direction: column !important;
|
|
gap: 10px !important;
|
|
|
|
}
|
|
.tall-column-img .slds-align_absolute-center button{
|
|
margin: 0 !important;
|
|
width: 100% !important;
|
|
display: block !important;
|
|
|
|
}
|
|
.tall-column-img .slds-theme_success .custom-link{
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
.tall-column-img .slds-theme_success .slds-grid_vertical-align-center{
|
|
flex-direction: column !important;
|
|
gap: 10px !important;
|
|
}
|
|
.tall-column-img .link-row{
|
|
gap: 6px;
|
|
padding-left: 0;
|
|
}
|
|
.tall-column-img .custom-icon{
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/* ── Store connection hero bar ── */
|
|
.sw-hero-bar {
|
|
background: linear-gradient(105deg, #eef7e3 0%, #e6f1fb 100%);
|
|
border: 1px solid #dde8ea;
|
|
border-radius: 14px;
|
|
padding: 18px 26px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
box-shadow: 0 10px 24px -18px rgba(63,138,36,.35), 0 14px 30px -20px rgba(47,143,176,.3);
|
|
margin-bottom: 16px;
|
|
flex-wrap: nowrap;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sw-hero-side {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
.sw-hero-side_right { justify-content: flex-end; }
|
|
.sw-hero-text_right { text-align: right; min-width: 0; }
|
|
|
|
.sw-hero-icon {
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 11px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
max-width: 100%;
|
|
}
|
|
.sw-hero-icon_shopify {
|
|
background: transparent;
|
|
color: #4f8a24;
|
|
box-shadow: none;
|
|
}
|
|
.sw-hero-icon_sf {
|
|
background: transparent;
|
|
color: #0176d3;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.sw-hero-icon-img {
|
|
width: 54px;
|
|
height: 54px;
|
|
max-width: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.sw-hero-icon_shopify .sw-hero-icon-img {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
/* Keep the hero name/sub text from forcing the row wider than its column
|
|
(which was pushing the Salesforce icon out past the bar's right edge). */
|
|
.sw-hero-name,
|
|
.sw-hero-sub {
|
|
max-width: 100%;
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Progressive shrink of the connection hero bar as the column narrows on
|
|
zoom / maximize, so the labels/icons stay readable and on-line instead of
|
|
truncating or spilling out. */
|
|
@media (max-width: 1500px) {
|
|
.sw-hero-bar { padding: 16px 20px; gap: 14px; }
|
|
.sw-hero-name { font-size: 13px; }
|
|
.sw-hero-sub { font-size: 11px; }
|
|
.sw-hero-icon { width: 46px; height: 46px; }
|
|
.sw-hero-icon-img { width: 46px; height: 46px; }
|
|
.sw-hero-icon_shopify .sw-hero-icon-img { width: 38px; height: 38px; }
|
|
}
|
|
@media (max-width: 1320px) {
|
|
.sw-hero-bar { padding: 14px 16px; gap: 10px; }
|
|
.sw-hero-name { font-size: 12px; }
|
|
.sw-hero-sub { font-size: 10px; }
|
|
.sw-hero-icon { width: 40px; height: 40px; }
|
|
.sw-hero-icon-img { width: 40px; height: 40px; }
|
|
.sw-hero-icon_shopify .sw-hero-icon-img { width: 32px; height: 32px; }
|
|
.sw-hero-line { min-width: 0; flex: 0 1 12px; }
|
|
.sw-hero-sub_note { display: none; }
|
|
}
|
|
|
|
.sw-hero-name { font-size: 14px; font-weight: 800; color: #1c2b23; }
|
|
.sw-hero-sub { font-size: 12px; color: #7c8a80; }
|
|
|
|
.sw-hero-mid {
|
|
flex: 1.6;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.sw-hero-line-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* "Last order synced X ago" line under the Connected & syncing pill */
|
|
.sw-hero-note {
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
color: #4f8a24;
|
|
text-align: center;
|
|
}
|
|
|
|
.sw-hero-line {
|
|
flex: 1;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
.sw-hero-line_left { background: linear-gradient(90deg, #bcd9a6, #5fa832); }
|
|
.sw-hero-line_right { background: linear-gradient(90deg, #5fa832, #bcd9a6); }
|
|
|
|
.sw-hero-conn-pill {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
background: #fff;
|
|
border: 1px solid #dcefca;
|
|
border-radius: 999px;
|
|
padding: 6px 14px;
|
|
box-shadow: 0 2px 6px rgba(95,168,50,.15);
|
|
font-size: 11.5px;
|
|
font-weight: 800;
|
|
letter-spacing: .03em;
|
|
color: #4f8a24;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sw-hero-conn-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #5fa832;
|
|
box-shadow: 0 0 0 4px rgba(95,168,50,.18);
|
|
display: inline-block;
|
|
animation: sw-pulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes sw-pulse {
|
|
0%, 100% { opacity: .35; transform: scale(.8); }
|
|
50% { opacity: 1; transform: scale(1.15); }
|
|
}
|
|
|
|
@media (max-height: 750px) {
|
|
.sme-contact-support{
|
|
top: calc(100vh - 670px);
|
|
|
|
}
|
|
}
|
|
|
|
|
|
/* ===== Setup Progress bar (left nav) ===== */
|
|
.sw-progress-wrap {
|
|
margin-bottom: 14px;
|
|
}
|
|
.sw-progress-label-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
}
|
|
.sw-progress-label {
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: #7c8a80;
|
|
}
|
|
.sw-progress-count {
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
color: #4f8a24;
|
|
}
|
|
.sw-progress-track {
|
|
height: 7px;
|
|
border-radius: 999px;
|
|
background: #e2eadd;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 1px 2px rgba(23,43,32,.09);
|
|
}
|
|
.sw-progress-fill {
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg,#6cb33f,#3f9a86);
|
|
transition: width .4s;
|
|
}
|
|
|
|
|
|
/* ===== "Made with heart" footer pinned to bottom of the left nav ===== */
|
|
.sw-nav-footer {
|
|
margin-top: auto;
|
|
padding-top: 16px;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
color: #7c8a80;
|
|
line-height: 1.4;
|
|
}
|
|
.sw-nav-footer-heart {
|
|
color: #e0574f;
|
|
}
|
|
.sw-nav-footer-link {
|
|
/* color: inherit; */
|
|
color: #2f7d32;
|
|
font-weight: 700;
|
|
/* font: inherit; */
|
|
text-decoration: none;
|
|
}
|
|
.sw-nav-footer-link:hover {
|
|
text-decoration: underline;
|
|
color: #2f7d32;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ===== Global copyright footer at bottom of main content (every step) ===== */
|
|
.sw-copyright {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #7c8a80;
|
|
padding: 18px 12px 6px;
|
|
}
|
|
.sw-copyright-link {
|
|
color: #2f7d32;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
.sw-copyright-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 1500px){
|
|
.sme-panel-header{
|
|
gap: 8px;
|
|
padding: 22px 16px 20px;
|
|
}
|
|
.sme-panel-header-icon{
|
|
height: 40px;
|
|
width: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.sme-panel-header-logo{
|
|
width: 100%;
|
|
height: 42px;
|
|
}
|
|
.sme-panel-title {
|
|
font-size: 16px;
|
|
}
|
|
.sme-panel-tagline{
|
|
font-size: 9px;
|
|
}
|
|
.sme-box{
|
|
padding-inline: 12px;
|
|
}
|
|
.contact-us-header{
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
margin: 0;
|
|
}
|
|
.contact-us-text{
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
.sme-online-pill{
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #eaf3d2;
|
|
color: #3f6b1e;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
padding: 10px 16px;
|
|
border-radius: 16px;
|
|
margin: 0 auto;
|
|
white-space: normal;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
}
|
|
.link-row{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 8px;
|
|
background: linear-gradient(120deg, #f4faee 0%, #eaf3fb 100%);
|
|
border: 1px solid #cfe0d6;
|
|
border-radius: 12px;
|
|
padding: 10px 8px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.custom-icon{
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
.sme-link-eyebrow {
|
|
font-size: 8px;
|
|
}
|
|
.custom-link{
|
|
font-size: 10px;
|
|
}
|
|
.support-btn{
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.custom-support-button{
|
|
padding: 8px 14px;
|
|
}
|
|
.sme-upgrade-box{
|
|
flex-direction: column;
|
|
}
|
|
.sw-shell-grid > .tall-column-img{
|
|
max-width: 250px;
|
|
}
|
|
.sw-progress-label {
|
|
font-size: 8px;
|
|
}
|
|
.sw-progress-count {
|
|
font-size: 10px;
|
|
}
|
|
.nav-item{
|
|
gap: 10px;
|
|
}
|
|
.nav-circle {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
.nav-chip {
|
|
font-size: 8px;
|
|
}
|
|
.nav-title {
|
|
font-size: 10px;
|
|
}
|
|
.nav-desc {
|
|
font-size: 9px;
|
|
}
|
|
.sw-shell-grid{
|
|
gap: 12px;
|
|
}
|
|
.sw-shell-grid > .sw-nav-col {
|
|
flex: 0 0 150px;
|
|
max-width: 150px;
|
|
}
|
|
}/* ============================================================
|
|
Custom in-component toasts (replaces ShowToastEvent). Success uses the
|
|
brand green→teal gradient reference; error uses red. Added by UI packaging.
|
|
============================================================ */
|
|
.sw-toast-container { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 420px; pointer-events: none; }
|
|
.sw-toast { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(23,43,32,.45); color: #fff; width: 100%; box-sizing: border-box; pointer-events: auto; animation: sw-toast-in 180ms ease; }
|
|
@keyframes sw-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
|
|
.sw-toast-icon { flex-shrink: 0; font-size: 15px; line-height: 1.3; font-weight: 700; }
|
|
.sw-toast-body { flex: 1; min-width: 0; }
|
|
.sw-toast-title { font-weight: 800; font-size: 13.5px; line-height: 1.3; }
|
|
.sw-toast-message { font-size: 12.5px; line-height: 1.4; opacity: .95; margin-top: 2px; word-break: break-word; }
|
|
.sw-toast-close { flex-shrink: 0; background: transparent; border: none; color: inherit; opacity: .85; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; font-family: inherit; }
|
|
.sw-toast-close:hover { opacity: 1; }
|
|
.sw-toast-success { background: linear-gradient(120deg, var(--smepro-green), var(--smepro-teal)); }
|
|
.sw-toast-error { background: linear-gradient(120deg, #e9923d, #b56a1f); }
|
|
.sw-toast-warning { background: #f59e0b; color: #1f2937; }
|
|
.sw-toast-info { background: #3b7ec4; } |