/*
* Your global styles here
*/
html,
body {
min-height: 100vh;
}
html {
background: #f3f4f6!important;
}
/* Sticky footer fix: the platform's own scoped-header-and-footer wrapper uses
min-height:100% for its full-page flex column, but that can never resolve —
every ancestor between it and (webruntime-app, lwr-router-container,
dxp_data_provider-* wrappers) is an unstyled custom element rendering as
display:inline with height:auto, so the percentage chain has no definite
height to resolve against. A viewport unit sidesteps the broken chain. */
community_byo-scoped-header-and-footer.full-height {
min-height: 100vh !important;
}
@font-face {
font-family: 'Ryker';
/* Replace myFonts with your resource name */
src: url('{ basePath }/sfsites/c/resource/Ryker') format('otf');
}
@font-face {
font-family: 'RykerMedium';
/* Replace myFonts with your resource name */
src: url('{ basePath }/sfsites/c/resource/RykerMedium') format('woff');
}
@font-face {
font-family: 'RykerRegular';
/* Replace myFonts with your resource name */
src: url('{ basePath }/sfsites/c/resource/RykerRegular') format('woff');
}
/* Raise toast above sticky header (platform sets sticky header to z-index 10001) */
lightning-toast-container {
z-index: 100002 !important;
}
:root {
--dxp-g-success: #C4E9D1;
--dxp-g-success-contrast: #196737;
--dxp-g-warning: #FEF9C2;
--dxp-g-badge-custom: #D8E6FE;
--dxp-g-badge-custom-contrast: #0035BD;
--dxp-icon-custom-color: #D8E6FE;
--atlas-card-radius: 0.5rem;
--atlas-card-shadow: 0 2px 4px rgba(0, 0, 0, .08);
--atlas-text-primary: #1c1c1c;
--atlas-text-secondary: #6B7280;
--atlas-border: #E5E7EB;
--atlas-input-radius: 6px;
--atlas-input-bg: #fafafa;
--slds-c-card-color-background: #ffffff;
--slds-c-input-radius-border: var(--atlas-input-radius);
--slds-c-input-color-border: var(--atlas-border);
--slds-c-input-color-background: var(--atlas-input-bg);
--slds-c-card-text-color: var(--dxp-g-brand);
--atlas-badge-renewal-bg: #FFF7ED;
--atlas-badge-renewal-color: #C2410C;
--atlas-badge-lapsed-bg: #FEE2E2;
--atlas-badge-lapsed-color: #991B1B;
--atlas-badge-open-bg: #FEF3C7;
--atlas-badge-open-color: #92400E;
--atlas-badge-processing-bg: #DBEAFE;
--atlas-badge-processing-color: #1E40AF;
--atlas-alert-icon-tint-warning: #FFF9F2;
--atlas-alert-icon-tint-error: #FFF5F5;
--atlas-alert-icon-tint-info: #F5F8FF;
--atlas-alert-icon-tint-success: #F3FBF6;
--atlas-alert-title-warning: #9A3412;
--atlas-alert-title-error: #7F1D1D;
--atlas-alert-title-info: #1E3A8A;
--atlas-alert-title-success: #14532D;
}
.badge-info{
/* Badge background + text */
--slds-c-badge-color-background: var(--dxp-g-badge-custom);
--slds-c-badge-text-color: var(--dxp-g-badge-custom-contrast);
/* Icon colour*/
--slds-c-icon-color-foreground: var(--dxp-icon-custom-color);
--slds-c-icon-color-foreground-default: var(--dxp-icon-custom-color);
}
.SocialButtons button{
background-color:white!important;
color:black!important;
}
.LoginComponent button{
background-color:rgb(0, 53, 189)!important;
}
.timeline-item{
position: relative;
display: flex;
align-items: flex-start;
margin-bottom: 32px; /* consistent spacing between steps */
}
.timeline-step {
position: relative;
padding-left: 40px;
margin-bottom: 24px;
}
.timeline-connector{
position: absolute;
top: 32px;
bottom: -16px; /*extends to next item*/
left: 12px;
border-left: 2px dotted #d8dde6;
z-index: 1;
}
.timeline-circle {
position: absolute;
top: 0;
left: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: #f3f3f3;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.timeline-circle-active{
position: absolute;
top: 0;
left: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: #D8E6FE;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.timeline-step:last-child .timeline-connector {
display: none;
}
.active-step{
color: #0035BD
}
.step-label{
font-weight: 1000
}
.step-label-padding{
padding-top: 4.5px
}
.svg{
display:inline-block;
width:10em;
border: 1px solid #ccc;
overflow:visible;
}
.portal-list-row {
cursor: pointer;
border-radius: 4px;
transition: background-color 0.1s;
}
.portal-list-row:hover {
background-color: var(--slds-g-color-neutral-base-95);
}
.policy_claim_icons {
cursor: pointer;
transition: opacity 0.15s;
}
.policy_claim_icons:hover span {
text-decoration: underline;
}
.policy_claim_icons:focus-visible {
outline: 2px solid var(--dxp-g-brand);
outline-offset: 2px;
border-radius: 2px;
}
.quote-menu-button button {
width: 100%;
}
.quote-menu-button .slds-dropdown {
width: 100%;
min-width: 100%;
}
.quote-menu-button .slds-dropdown__item > a {
background-color: var(--slds-c-card-color-background);
font-size: 0.9375rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.quote-menu-button .slds-dropdown__item > a:hover,
.quote-menu-button .slds-dropdown__item.slds-has-focus > a {
background-color: var(--slds-g-color-neutral-base-95);
}
.make-payment-button button {
background-color: var(--slds-c-card-color-background);
border-color: var(--dxp-g-brand);
color: var(--dxp-g-brand);
}
.make-payment-button button:hover {
background-color: var(--slds-g-color-neutral-base-95);
border-color: var(--dxp-g-brand);
color: var(--dxp-g-brand);
}
/* === Portal list pages (Policies, Claims) === */
.portal-list-subtitle {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
font-size: var(--dxp-g-font-size-5, 0.8125rem);
color: var(--atlas-text-secondary);
}
.portal-list-card {
background: var(--slds-c-card-color-background);
border-radius: var(--atlas-card-radius);
box-shadow: var(--atlas-card-shadow);
overflow: hidden;
}
/* Row layout modifier — comes after .portal-list-row to override border-radius */
.portal-list-row-layout {
padding: var(--slds-g-spacing-3) var(--slds-g-spacing-4);
border-bottom: 1px solid var(--atlas-border);
border-radius: 0;
}
.portal-list-row-layout:last-child {
border-bottom: none;
}
.portal-list-row-icon {
width: 2.625rem;
height: 2.625rem;
background: var(--slds-c-card-color-background);
border: 1px solid var(--atlas-border);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.portal-list-row-title {
font-weight: 600;
color: var(--dxp-g-brand);
font-size: var(--dxp-g-font-size-7, 0.9375rem);
}
.portal-list-row-id {
font-size: var(--dxp-g-font-size-5, 0.8125rem);
color: var(--atlas-text-secondary);
margin-top: 2px;
}
.portal-list-row-note {
font-size: var(--dxp-g-font-size-2, 0.75rem);
color: var(--atlas-text-secondary);
margin-top: 2px;
font-style: italic;
}
.portal-copy-small {
font-size: var(--dxp-g-font-size-5);
font-family: 'Open Sans', sans-serif;
}
.portal-list-row-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.portal-list-row-date {
font-size: var(--dxp-g-font-size-5, 0.8125rem);
color: var(--atlas-text-secondary);
white-space: nowrap;
}
.portal-list-row-chevron {
color: var(--atlas-text-secondary);
}
/* lightning-badge token overrides — reusable across list pages */
.badge-active {
--slds-c-badge-color-background: var(--dxp-g-success);
--slds-c-badge-text-color: var(--dxp-g-success-contrast);
}
.badge-renewal {
--slds-c-badge-color-background: var(--atlas-badge-renewal-bg);
--slds-c-badge-text-color: var(--atlas-badge-renewal-color);
}
.badge-lapsed {
--slds-c-badge-color-background: var(--atlas-badge-lapsed-bg);
--slds-c-badge-text-color: var(--atlas-badge-lapsed-color);
}
.badge-finalised {
--slds-c-badge-color-background: var(--dxp-g-success);
--slds-c-badge-text-color: var(--dxp-g-success-contrast);
}
.badge-open {
--slds-c-badge-color-background: var(--atlas-badge-open-bg);
--slds-c-badge-text-color: var(--atlas-badge-open-color);
}
.badge-processing {
--slds-c-badge-color-background: var(--atlas-badge-processing-bg);
--slds-c-badge-text-color: var(--atlas-badge-processing-color);
}
/* Claims page — info callout banner */
.portal-claims-callout {
background: var(--dxp-g-badge-custom);
border: 1px solid #c7d3f5;
border-radius: var(--atlas-card-radius);
padding: 12px 16px;
margin-bottom: 16px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: var(--dxp-g-font-size-5, 0.8125rem);
color: var(--dxp-g-badge-custom-contrast);
line-height: 1.6;
}
.portal-claims-callout a {
font-weight: 600;
color: var(--dxp-g-badge-custom-contrast);
}
/* === Home page greeting (c/customerPortalHomeAlerts) === */
.portal-home-greeting {
margin-bottom: var(--slds-g-spacing-6);
}
.portal-home-greeting-title {
font-family: var(--dxp-s-html-font-family);
font-size: var(--dxp-g-font-size-10);
font-weight: 700;
color: var(--dxp-g-brand);
margin: 0 0 var(--slds-g-spacing-2) 0;
}
.portal-home-greeting-subtitle {
font-size: var(--dxp-g-font-size-5);
color: var(--atlas-text-secondary);
margin: 0;
}
/* === Alert banner (reusable across pages, c/customerPortalAlertBanner) === */
.portal-alert-banner-header {
display: flex;
align-items: center;
gap: var(--slds-g-spacing-2);
margin-bottom: var(--slds-g-spacing-4);
}
.portal-alert-banner-title {
font-family: var(--dxp-s-html-font-family);
font-size: var(--dxp-g-font-size-3);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--atlas-badge-renewal-color);
margin: 0;
}
.portal-alert-banner-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 var(--slds-g-spacing-2);
border-radius: 999px;
font-weight: 700;
font-size: var(--dxp-g-font-size-3);
background: var(--atlas-badge-renewal-color);
color: var(--slds-c-card-color-background);
}
.portal-alert-banner-list {
display: flex;
flex-direction: column;
gap: var(--slds-g-spacing-3);
}
.portal-alert-card {
background: var(--portal-alert-card-bg, var(--slds-c-card-color-background));
border-radius: var(--atlas-card-radius);
box-shadow: var(--atlas-card-shadow);
padding: var(--slds-g-spacing-4);
}
.portal-alert-icon-col {
padding-left: var(--slds-g-spacing-3);
}
.portal-alert-icon-circle {
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--portal-alert-icon-bg);
flex-shrink: 0;
}
.portal-alert-icon-circle lightning-icon {
--slds-c-icon-color-foreground: var(--portal-alert-icon-color);
--slds-c-icon-color-foreground-default: var(--portal-alert-icon-color);
}
.portal-alert-title {
font-weight: 600;
font-size: var(--dxp-g-font-size-7);
color: var(--portal-alert-title-color, var(--atlas-text-primary));
}
.portal-alert-message {
font-size: var(--dxp-g-font-size-5);
color: var(--atlas-text-secondary);
margin-top: 2px;
}
.portal-alert-link {
display: inline-block;
font-weight: 700;
text-decoration: underline;
color: var(--dxp-g-brand);
margin-top: 2px;
}
/* Variant -> color tokens (reuses existing badge tokens, no new hex).
Icon circle bg is a subtle variant-tinted off-white (paler than the card's own
tint) so it stands apart from the tinted card without looking stark white. */
.portal-alert-warning {
--portal-alert-icon-bg: var(--atlas-alert-icon-tint-warning);
--portal-alert-icon-color: var(--atlas-badge-renewal-color);
--portal-alert-card-bg: var(--atlas-badge-renewal-bg);
--portal-alert-title-color: var(--atlas-alert-title-warning);
}
.portal-alert-error {
--portal-alert-icon-bg: var(--atlas-alert-icon-tint-error);
--portal-alert-icon-color: var(--atlas-badge-lapsed-color);
--portal-alert-card-bg: var(--atlas-badge-lapsed-bg);
--portal-alert-title-color: var(--atlas-alert-title-error);
}
.portal-alert-info {
--portal-alert-icon-bg: var(--atlas-alert-icon-tint-info);
--portal-alert-icon-color: var(--dxp-g-badge-custom-contrast);
--portal-alert-card-bg: var(--dxp-g-badge-custom);
--portal-alert-title-color: var(--atlas-alert-title-info);
}
.portal-alert-success {
--portal-alert-icon-bg: var(--atlas-alert-icon-tint-success);
--portal-alert-icon-color: var(--dxp-g-success-contrast);
--portal-alert-card-bg: var(--dxp-g-success);
--portal-alert-title-color: var(--atlas-alert-title-success);
}
/* Action button — a plain native