/* Customer dashboard presentation. Account state and controllers are unchanged. */ body.account-login-page:not(.is-login-view) { background: #f5f7fa; } .account-login-page:not(.is-login-view) .customer-portal-page { width: 100% !important; max-width: 1440px; margin: 0 auto; padding: 24px 28px 36px; } .account-login-page:not(.is-login-view) .product-breadcrumb { margin-bottom: 22px; font-size: 13px; } #portalDashboard { --portal-heading: #102238; --portal-text: #263d54; --portal-muted: #52677f; --portal-border: #dce4ed; --portal-accent: #006bd1; --portal-soft: #f5f8fb; --portal-shadow: none; } #portalDashboard svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #portalDashboard .customer-portal-heading { position: relative; isolation: isolate; overflow: hidden; display: flex; min-height: 216px; margin: 0 0 26px; padding: 36px 40px; border: 1px solid #dce4ed; border-radius: 14px; background: #fff; color: #102238; } #portalDashboard .portal-hero-image, #portalDashboard .portal-hero-image img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; } #portalDashboard .portal-hero-image { left: auto; width: 75%; } #portalDashboard .portal-hero-image img { object-fit: contain; object-position: right center; } #portalDashboard .customer-portal-heading::after { display: none; } #portalDashboard .customer-portal-heading > div { max-width: 60%; min-width: 0; } #portalDashboard .category-commerce-eyebrow { color: #006bd1; font-size: 11px; letter-spacing: .2em; font-weight: 800; text-transform: uppercase; } #portalDashboard #portalGreeting { margin: 12px 0; color: #102238; font-size: clamp(26px, 3vw, 38px) !important; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; overflow-wrap: anywhere; } #portalDashboard .customer-portal-heading p { max-width: 560px; color: #52677f; font-size: 14px; line-height: 1.7; } #portalDashboard .portal-hero-motto { position: absolute; right: 24px; bottom: 16px; color: #52677f; font-size: 10px; font-weight: 700; letter-spacing: .15em; white-space: nowrap; } #portalDashboard .customer-portal-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr) !important; gap: 24px; align-items: start; } #portalDashboard .customer-portal-sidebar { position: sticky; top: 24px; display: grid; gap: 0; padding: 0 !important; border: 1px solid var(--portal-border); border-radius: 12px; background: #fff; overflow: hidden; } #portalDashboard .customer-portal-profile { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 24px 16px; border: 0; border-bottom: 1px solid var(--portal-border); border-radius: 0; box-shadow: none; } #portalDashboard #portalInitials { width: 44px; height: 44px; background: #e6f1ff; color: #006bd1; font-size: 15px; font-weight: 800; } #portalDashboard #portalProfileName { font-size: 14px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; } #portalDashboard #portalEmail { margin-top: 5px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; } #portalDashboard .customer-portal-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 12px; border: 0; border-radius: 0; box-shadow: none; } #portalDashboard .customer-portal-tabs button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: 8px; color: #425971; font-size: 14px; font-weight: 600; cursor: pointer; } #portalDashboard .customer-portal-tabs button:hover { background: #f0f5fb; color: #006bd1; } #portalDashboard .customer-portal-tabs button.is-active { background: #006bd1; color: #fff; } #portalDashboard #accountLogoutButton { display: flex; justify-content: flex-start; align-items: center; gap: 12px; width: auto; min-height: 48px; margin: 8px 12px 14px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: #52677f; font-size: 14px; font-weight: 600; cursor: pointer; } #portalDashboard #accountLogoutButton:hover { color: #006bd1; background: #f0f5fb; } #portalDashboard .customer-portal-content { padding: 0 !important; min-width: 0; } #portalDashboard .customer-portal-tab-panel { gap: 22px; } #portalDashboard .customer-portal-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px; margin: 0; } #portalDashboard .customer-portal-stats article { display: block; min-width: 0; padding: 0; border-radius: 12px; overflow: hidden; } #portalDashboard .portal-stat-action { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 8px; align-content: start; width: 100%; height: 100%; min-height: 150px; padding: 18px; border: 0; background: #fff; text-align: left; color: var(--portal-text); font: inherit; cursor: pointer; } #portalDashboard .portal-stat-action:hover { background: #f5f9ff; } #portalDashboard .portal-stat-action svg { grid-column: 2; grid-row: 1; width: 20px; height: 20px; color: #66809c; } #portalDashboard .portal-stat-action > span { grid-column: 1; grid-row: 1; color: #52677f; font-size: 13px; font-weight: 600; } #portalDashboard .portal-stat-action > strong { grid-column: 1 / -1; font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; color: #102238; } #portalDashboard #portalMemberSince { font-size: 22px; line-height: 1.6; } #portalDashboard .portal-stat-action > p { grid-column: 1 / -1; color: #52677f; font-size: 12px; font-weight: 400; line-height: 1.5; } #portalDashboard .customer-portal-layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important; gap: 20px; align-items: stretch; } #portalDashboard .customer-portal-panel { min-width: 0; padding: 24px !important; border: 1px solid var(--portal-border); border-radius: 12px; box-shadow: none; } #portalDashboard .customer-portal-panel h2 { font-size: 18px; font-weight: 750; line-height: 1.4; } #portalDashboard .customer-portal-panel-head { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 18px; } #portalDashboard .customer-portal-panel-head a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 600; } #portalDashboard .customer-empty-state { max-width: none; justify-items: center; gap: 10px; margin: 20px 0 4px; padding: 16px 0; text-align: center; } #portalDashboard .customer-empty-state:has(strong)::before { content: ""; width: 44px; height: 44px; margin-bottom: 6px; background-color: #64829d; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='m3 7 9-4 9 4v11l-9 4-9-4V7Zm0 0 9 4 9-4m-9 4v11m-5-17 10 4'/%3E%3C/svg%3E") center / contain no-repeat; } #portalDashboard .customer-empty-state strong { color: #102238; font-size: 17px; font-weight: 700; } #portalDashboard .customer-empty-state p { max-width: 420px; margin: 0 0 6px; font-size: 13px; line-height: 1.7; } #portalDashboard .cart-primary-action { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; width: auto; padding: 12px 18px; border: 1px solid #006bd1; border-radius: 8px; background: #006bd1; color: #fff; font-size: 13px; font-weight: 700; } #portalDashboard .cart-primary-action:hover { background: #005ab3; } #portalDashboard .portal-text-action { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: #006bd1; font-size: 13px; font-weight: 650; cursor: pointer; } #portalDashboard .portal-view-orders { width: 100%; margin-top: 14px; border-top: 1px solid #edf1f6; } #portalDashboard .customer-portal-panel:has(#portalOverviewProducts .customer-empty-state) .portal-view-orders { display: none; } #portalDashboard .portal-delivery-icon { display: block; width: 38px; height: 38px; margin: 30px 0 22px; color: #64829d; stroke-width: 1.2; } #portalDashboard #portalAddressEditToggle { margin-top: 12px; padding: 0; justify-content: flex-start; } #portalDashboard .portal-address-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--portal-border); } #portalDashboard .portal-address-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 600; color: var(--portal-text); } #portalDashboard .portal-address-form input, #portalDashboard .portal-address-form select { width: 100%; min-height: 46px; padding: 0 12px; color: #101827; background: #fff; border: 1px solid var(--portal-border); border-radius: 8px; font: inherit; } #portalDashboard .portal-address-form-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; } #portalDashboard .customer-delivery-note { font-size: 14px; line-height: 1.7; } #portalDashboard .portal-delivery-hint { margin: 14px 0 0; color: #52677f; font-size: 12px; line-height: 1.7; } #portalDashboard .customer-delivery-steps { gap: 20px; } #portalDashboard .customer-delivery-steps:empty { display: none; } #portalDashboard .customer-delivery-steps li { font-size: 13px; font-weight: 600; } #portalDashboard .customer-overview-products article, #portalDashboard .customer-order-list article { padding: 16px; border: 1px solid #e4ebf2; border-radius: 8px; background: #f8fafc; } #portalDashboard .customer-overview-products strong, #portalDashboard .customer-order-list strong { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } #portalDashboard .customer-overview-products span, #portalDashboard .customer-order-list span, #portalDashboard .customer-order-list small { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; } #portalDashboard .customer-order-list article > div { min-width: 0; } #portalDashboard mark { flex-shrink: 0; max-width: 100%; padding: 6px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; } #portalDashboard .customer-account-details { gap: 0; margin-bottom: 0; } #portalDashboard .customer-account-details > div { gap: 6px; padding: 15px 0; border-bottom: 1px solid #edf1f6; } #portalDashboard .customer-account-details > div:last-child { border-bottom: 0; padding-bottom: 0; } #portalDashboard .customer-account-details dt { font-size: 12px; font-weight: 600; } #portalDashboard .customer-account-details dd { font-size: 14px; overflow-wrap: anywhere; } #portalDashboard .customer-address { margin-top: 20px; font-size: 14px; line-height: 1.8; font-style: normal; overflow-wrap: anywhere; } #portalDashboard .portal-promotions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } #portalDashboard .portal-promo { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: end; min-height: 240px; padding: 28px; background: #0b1d2c; color: #fff; border-radius: 12px; } #portalDashboard .portal-promo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } #portalDashboard .portal-promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #07111fdb, #07111f66), linear-gradient(0deg, #07111f88, transparent); } #portalDashboard .portal-promo-kicker { color: #a5d7ff; font-size: 10px; font-weight: 800; letter-spacing: .14em; } #portalDashboard .portal-promo h2 { margin: 10px 0; max-width: 260px; color: #fff; font-size: 23px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25; } #portalDashboard .portal-promo p { max-width: 280px; margin: 0 0 14px; color: #e1eaf4; font-size: 12px; line-height: 1.65; } #portalDashboard .portal-promo-action { display: inline-flex; justify-content: center; align-items: center; gap: 16px; min-height: 44px; padding: 10px 15px; border: 1px solid #fff; border-radius: 6px; background: #fff; color: #102238; font-size: 12px; font-weight: 750; cursor: pointer; } #portalDashboard .portal-promo-action:hover { background: #e7f2ff; border-color: #e7f2ff; } #portalDashboard .portal-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; padding: 24px 0 0; border-top: 1px solid var(--portal-border); } #portalDashboard .portal-trust a { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; color: #425971; } #portalDashboard .portal-trust strong { display: block; margin-bottom: 4px; color: #263d54; font-size: 13px; } #portalDashboard .portal-trust span { display: block; font-size: 11px; line-height: 1.5; } #portalDashboard :is(button, a):focus-visible { outline: 3px solid #249aff; outline-offset: 3px; } #portalDashboard .portal-stat-action:focus-visible { outline-offset: -3px; } @media (min-width: 721px) and (max-width: 1100px) { #portalDashboard .customer-portal-shell { grid-template-columns: 220px minmax(0, 1fr) !important; gap: 18px; } #portalDashboard .customer-portal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #portalDashboard .customer-portal-layout, #portalDashboard .portal-promotions { grid-template-columns: minmax(0, 1fr) !important; } #portalDashboard .portal-hero-motto { display: none; } #portalDashboard .customer-portal-heading { padding: 30px; } } @media (max-width: 720px) { .account-login-page:not(.is-login-view) .customer-portal-page { padding: 0 14px 28px; } .account-login-page:not(.is-login-view) .customer-portal-page > .product-breadcrumb { display: none; } #portalDashboard .customer-portal-heading { min-height: 206px; margin: 0 -14px 18px; padding: 28px 24px; border-radius: 0; flex-direction: column; } #portalDashboard .customer-portal-heading > div { max-width: 100%; } #portalDashboard #portalGreeting { font-size: 28px !important; } #portalDashboard .customer-portal-heading p { max-width: 320px; font-size: 13px; } #portalDashboard .portal-hero-image { position: relative; inset: auto; z-index: 0; order: 2; width: 100%; height: auto; aspect-ratio: 3 / 1; margin-top: 12px; } #portalDashboard .portal-hero-image img { object-position: center; } #portalDashboard .portal-hero-motto { display: none; } #portalDashboard .customer-portal-shell { grid-template-columns: minmax(0, 1fr) !important; gap: 18px; } #portalDashboard .customer-portal-sidebar { position: static; } #portalDashboard .customer-portal-profile { padding: 18px; } #portalDashboard .customer-portal-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 10px; gap: 6px; } #portalDashboard .customer-portal-tabs button { gap: 10px; padding: 10px; font-size: 13px; } #portalDashboard #accountLogoutButton { margin: 0 10px 10px; padding-left: 10px; min-height: 44px; font-size: 13px; } #portalDashboard .customer-portal-stats { grid-template-columns: minmax(0, 1fr) !important; gap: 9px; } #portalDashboard .portal-stat-action { grid-template-columns: 32px minmax(0, 1fr) auto 12px; grid-template-rows: auto auto; align-content: center; align-items: center; gap: 4px 10px; min-height: 78px; padding: 14px; } #portalDashboard .portal-stat-action svg { grid-column: 1; grid-row: 1 / 3; width: 24px; height: 24px; color: #006bd1; } #portalDashboard .portal-stat-action > span { grid-column: 2; grid-row: 1; font-size: 13px; color: #102238; } #portalDashboard .portal-stat-action > strong { grid-column: 3; grid-row: 1 / 3; font-size: 21px; } #portalDashboard .portal-stat-action > p { grid-column: 2; grid-row: 2; font-size: 11px; } #portalDashboard .portal-stat-action::after { content: ""; grid-column: 4; grid-row: 1 / 3; justify-self: center; width: 6px; height: 6px; border-right: 1.5px solid #7c8da1; border-top: 1.5px solid #7c8da1; transform: rotate(45deg); } #portalDashboard #portalMemberSince { font-size: 15px; letter-spacing: -.04em; } #portalDashboard .customer-portal-layout, #portalDashboard .portal-promotions { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; } #portalDashboard .customer-portal-panel { padding: 20px !important; } #portalDashboard .customer-portal-panel h2 { font-size: 17px; } #portalDashboard .customer-portal-panel-head { align-items: center; } #portalDashboard .customer-overview-products article { grid-template-columns: minmax(0, 1fr); gap: 10px; } #portalDashboard .customer-order-list article { flex-direction: column; align-items: flex-start; } #portalDashboard .customer-overview-products mark { justify-self: start; } #portalDashboard .portal-promo { min-height: 225px; padding: 24px; } #portalDashboard .portal-trust { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-left: 10px; } #portalDashboard .portal-trust a { justify-content: flex-start; gap: 16px; } }