/** * SP Minha Conta Custom — design system * Colors/fonts/radius extracted from the live theme (Avanam/Fashiro child theme, * Customizer "base-global-inline-css": --global-palette1..9) — see plugin readme.txt * for the Fase 0 investigation summary. Cinzel/Montserrat are already loaded * site-wide by the parent theme, so no @font-face/@import is declared here. */ /* Scoped at :root rather than a wrapper class: this stylesheet is only ever enqueued on is_account_page() (see class-sp-assets.php), and toasts are appended directly to by account-scripts.js, outside any of our component wrappers, so they need these variables to be globally available while this file is loaded. */ :root { --sp-primary: #e30613; --sp-secondary: #960a11; --sp-accent: #e30613; --sp-bg: #0f0f0f; --sp-surface: #181818; --sp-surface-alt: #262626; --sp-border: #333333; --sp-text: #d9d9d9; --sp-text-muted: #9a9a9a; --sp-on-accent: #ffffff; --sp-success: #2a7a25; --sp-success-bg: #16321a; --sp-warning: #d97706; --sp-warning-bg: #3a2a12; --sp-danger: #da3f3f; --sp-danger-bg: #3a1616; --sp-info: #0288d1; --sp-info-bg: #122a38; --sp-border-radius: 3px; --sp-border-radius-lg: 12px; --sp-font-heading: 'Cinzel', serif; --sp-font-body: 'Cinzel', serif; --sp-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } /* ========================================================================== Layout — sidebar + content ========================================================================== */ body.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 260px; box-sizing: border-box; margin: 0 28px 32px 0; } body.woocommerce-account .woocommerce-MyAccount-content { float: right; width: calc(100% - 288px); box-sizing: border-box; color: var(--sp-text); font-family: var(--sp-font-body); } body.woocommerce-account .woocommerce-MyAccount-navigation::after, body.woocommerce-account .woocommerce-MyAccount-content::after { content: ''; display: table; clear: both; } @media (max-width: 767px) { body.woocommerce-account .woocommerce-MyAccount-navigation, body.woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; margin: 0 0 24px 0; } } /* ========================================================================== Sidebar navigation ========================================================================== */ .sp-mcc-sidebar { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-border-radius-lg); overflow: hidden; position: sticky; top: 24px; } .sp-mcc-sidebar__profile { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid var(--sp-border); } .sp-mcc-avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; border-radius: 50%; background: var(--sp-accent); color: var(--sp-on-accent); font-family: var(--sp-font-heading); font-weight: 700; font-size: 16px; } .sp-mcc-avatar--lg { width: 56px; height: 56px; min-width: 56px; font-size: 22px; } .sp-mcc-sidebar__greeting { display: flex; flex-direction: column; min-width: 0; } .sp-mcc-sidebar__hello { font-size: 12px; color: var(--sp-text-muted); letter-spacing: 1.2px; } .sp-mcc-sidebar__name { font-family: var(--sp-font-heading); color: var(--sp-text); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-mcc-nav__list { list-style: none; margin: 0; padding: 8px; } .sp-mcc-nav__item { margin: 0; } .sp-mcc-nav__link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--sp-border-radius); color: var(--sp-text-muted); text-decoration: none; font-size: 13px; letter-spacing: 1px; transition: background-color 0.15s ease, color 0.15s ease; } .sp-mcc-nav__icon { flex: none; color: currentColor; } .sp-mcc-nav__link:hover { background: var(--sp-surface-alt); color: var(--sp-text); } .sp-mcc-nav__item.is-active .sp-mcc-nav__link { background: var(--sp-accent); color: var(--sp-on-accent); } @media (max-width: 767px) { .sp-mcc-sidebar { position: static; } .sp-mcc-sidebar__profile { display: none; } .sp-mcc-nav__list { display: flex; gap: 4px; padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .sp-mcc-nav__item { flex: none; } .sp-mcc-nav__link { white-space: nowrap; } .sp-mcc-nav__label { font-size: 12px; } } /* ========================================================================== Cards ========================================================================== */ .sp-mcc-card { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-border-radius-lg); box-shadow: var(--sp-shadow); padding: 24px; margin-bottom: 20px; } .sp-mcc-card__title { font-family: var(--sp-font-heading); color: var(--sp-text); font-size: 18px; margin: 0 0 16px; } /* ========================================================================== Buttons ========================================================================== */ .sp-mcc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--sp-border-radius); font-family: var(--sp-font-body); font-size: 13px; letter-spacing: 1px; text-decoration: none; cursor: pointer; transition: filter 0.15s ease, background-color 0.15s ease; } .sp-mcc-btn--primary { background: var(--sp-accent); color: var(--sp-on-accent); } .sp-mcc-btn--primary:hover { filter: brightness(0.92); color: var(--sp-on-accent); } .sp-mcc-btn--secondary { background: var(--sp-surface-alt); color: var(--sp-text); border-color: var(--sp-border); } .sp-mcc-btn--secondary:hover { filter: brightness(1.15); } .sp-mcc-btn--ghost { background: transparent; color: var(--sp-text); border-color: var(--sp-border); } .sp-mcc-btn--ghost:hover { background: var(--sp-surface-alt); } .sp-mcc-btn--sm { padding: 8px 16px; font-size: 12px; } /* ========================================================================== Badges (order status) ========================================================================== */ .sp-mcc-badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; background: var(--sp-surface-alt); color: var(--sp-text-muted); border: 1px solid var(--sp-border); white-space: nowrap; } .sp-mcc-badge--processing, .sp-mcc-badge--preparando-envio, .sp-mcc-badge--em-separacao { background: var(--sp-warning-bg); color: var(--sp-warning); border-color: transparent; } .sp-mcc-badge--em-transporte, .sp-mcc-badge--in-transit, .sp-mcc-badge--aguardando-retirada, .sp-mcc-badge--shipped { background: var(--sp-info-bg); color: var(--sp-info); border-color: transparent; } .sp-mcc-badge--completed, .sp-mcc-badge--entregue { background: var(--sp-success-bg); color: var(--sp-success); border-color: transparent; } .sp-mcc-badge--cancelled, .sp-mcc-badge--failed, .sp-mcc-badge--em-devolucao, .sp-mcc-badge--refunded { background: var(--sp-danger-bg); color: var(--sp-danger); border-color: transparent; } /* ========================================================================== Stepper (shipping status) ========================================================================== */ .sp-mcc-stepper { display: flex; justify-content: space-between; gap: 4px; margin-top: 20px; position: relative; } .sp-mcc-stepper::before { content: ''; position: absolute; top: 6px; left: 5%; right: 5%; height: 2px; background: var(--sp-border); z-index: 0; } .sp-mcc-stepper__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; text-align: center; } .sp-mcc-stepper__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sp-surface); border: 2px solid var(--sp-border); } .sp-mcc-stepper__step--done .sp-mcc-stepper__dot { background: var(--sp-accent); border-color: var(--sp-accent); } .sp-mcc-stepper__step--current .sp-mcc-stepper__dot { box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.25); } .sp-mcc-stepper__label { font-size: 11px; color: var(--sp-text-muted); letter-spacing: 0.6px; max-width: 90px; } .sp-mcc-stepper__step--done .sp-mcc-stepper__label, .sp-mcc-stepper__step--current .sp-mcc-stepper__label { color: var(--sp-text); } .sp-mcc-stepper--compact { margin-top: 14px; } @media (max-width: 480px) { .sp-mcc-stepper__label { display: none; } .sp-mcc-stepper__step--current .sp-mcc-stepper__label, .sp-mcc-stepper__step--done .sp-mcc-stepper__label { display: block; } } /* ========================================================================== Forms ========================================================================== */ .sp-mcc-form .form-row, .sp-mcc-form p.woocommerce-form-row { margin: 0 0 18px; } .sp-mcc-form--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .sp-mcc-form--grid .sp-mcc-field--full, .sp-mcc-form--grid .sp-mcc-fieldset, .sp-mcc-form--grid .sp-mcc-form-actions { grid-column: 1 / -1; } .sp-mcc-field label { display: block; font-size: 12px; letter-spacing: 1px; color: var(--sp-text-muted); margin-bottom: 6px; } .sp-mcc-field .required { color: var(--sp-accent); } .sp-mcc-field__hint { display: block; margin-top: 6px; font-size: 11px; color: var(--sp-text-muted); } .sp-mcc-input, .sp-mcc-form select, .sp-mcc-form textarea, .woocommerce-address-fields select, .woocommerce-address-fields input.input-text { width: 100%; box-sizing: border-box; background: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: var(--sp-border-radius); color: var(--sp-text); font-family: var(--sp-font-body); padding: 12px 14px; font-size: 14px; } .sp-mcc-input:focus, .sp-mcc-form select:focus, .sp-mcc-form textarea:focus { outline: none; border-color: var(--sp-accent); } .sp-mcc-field--password { position: relative; } .sp-mcc-toggle-password { position: absolute; right: 10px; bottom: 10px; background: none; border: none; color: var(--sp-text-muted); cursor: pointer; padding: 4px; line-height: 0; } .sp-mcc-toggle-password:hover { color: var(--sp-text); } .sp-mcc-field--invalid .sp-mcc-input { border-color: var(--sp-danger); } .sp-mcc-field__error { display: block; margin-top: 6px; font-size: 11px; color: var(--sp-danger); } .sp-mcc-fieldset { border: 1px solid var(--sp-border); border-radius: var(--sp-border-radius-lg); padding: 16px 18px 4px; margin: 0 0 18px; } .sp-mcc-fieldset legend { padding: 0 8px; font-size: 12px; letter-spacing: 1px; color: var(--sp-text-muted); } .sp-mcc-form-actions { margin-top: 6px; display: flex; align-items: center; gap: 12px; } @media (max-width: 600px) { .sp-mcc-form--grid { grid-template-columns: 1fr; } } /* Address edit form: fields are wrapped by WooCommerce in an extra .woocommerce-address-fields__field-wrapper div, so CSS Grid on the

itself can't reach them. Instead we lay out on the wrapper using the form-row-first / form-row-last / form-row-wide classes WooCommerce already assigns per field (same convention WC uses on the checkout page), which degrades gracefully across locales with different address field sets. */ .sp-mcc-address-fields { display: flex; flex-wrap: wrap; gap: 0 20px; } .sp-mcc-address-fields .form-row-first, .sp-mcc-address-fields .form-row-last { width: calc(50% - 10px); } .sp-mcc-address-fields .form-row-wide { width: 100%; } @media (max-width: 600px) { .sp-mcc-address-fields .form-row-first, .sp-mcc-address-fields .form-row-last { width: 100%; } } /* ========================================================================== Empty state ========================================================================== */ .sp-mcc-empty-state { text-align: center; padding: 56px 24px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-border-radius-lg); color: var(--sp-text-muted); } .sp-mcc-empty-state__illustration { color: var(--sp-text-muted); margin-bottom: 16px; } .sp-mcc-empty-state__title { font-family: var(--sp-font-heading); color: var(--sp-text); margin: 0 0 8px; } .sp-mcc-empty-state__text { margin: 0 0 24px; font-size: 14px; } /* ========================================================================== Auth (login / reset password) ========================================================================== */ .sp-mcc-auth { display: flex; min-height: 520px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-border-radius-lg); overflow: hidden; box-shadow: var(--sp-shadow); } .sp-mcc-auth--single .sp-mcc-auth__panels { max-width: 460px; margin: 0 auto; } .sp-mcc-auth__visual { flex: 1 1 42%; background: linear-gradient(160deg, var(--sp-secondary) 0%, #1a0304 60%, var(--sp-bg) 100%); background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 32px; min-height: 320px; } .sp-mcc-auth__visual-overlay { color: var(--sp-on-accent); } .sp-mcc-auth__brand { display: block; font-family: var(--sp-font-heading); font-size: 26px; letter-spacing: 2px; } .sp-mcc-auth__tagline { margin: 6px 0 0; font-size: 13px; opacity: 0.85; } .sp-mcc-auth__panels { flex: 1 1 58%; padding: 40px; display: flex; } .sp-mcc-auth__columns { display: flex; gap: 40px; width: 100%; } .sp-mcc-auth__panel { flex: 1; min-width: 0; } .sp-mcc-auth__panel-inner { width: 100%; } .sp-mcc-auth__title { font-family: var(--sp-font-heading); color: var(--sp-text); font-size: 24px; margin: 0 0 6px; } .sp-mcc-auth__subtitle { color: var(--sp-text-muted); font-size: 13px; margin: 0 0 24px; } .sp-mcc-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sp-mcc-remember { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sp-text-muted); } .sp-mcc-lost-password { margin-top: 14px; } .sp-mcc-lost-password a, .sp-mcc-address-card__edit, .sp-mcc-shortcut, .sp-mcc-logout-link { color: var(--sp-text-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; } .sp-mcc-lost-password a:hover { color: var(--sp-accent); } .sp-mcc-social-login-slot:empty { display: none; } .sp-mcc-social-login-slot { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--sp-border); } .sp-mcc-hint { font-size: 12px; color: var(--sp-text-muted); } @media (max-width: 767px) { .sp-mcc-auth { flex-direction: column; min-height: 0; } .sp-mcc-auth__columns { flex-direction: column; gap: 32px; } .sp-mcc-auth__panels { padding: 28px 20px; } } /* ========================================================================== Dashboard ========================================================================== */ .sp-mcc-summary-card__profile { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .sp-mcc-summary-card__hello { font-family: var(--sp-font-heading); color: var(--sp-text); margin: 0; font-size: 16px; } .sp-mcc-summary-card__email { margin: 4px 0 0; color: var(--sp-text-muted); font-size: 13px; } .sp-mcc-logout-link { margin-left: auto; } .sp-mcc-summary-card__shortcuts { display: flex; flex-wrap: wrap; gap: 10px; } .sp-mcc-shortcut { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--sp-border); border-radius: var(--sp-border-radius); text-decoration: none; } .sp-mcc-shortcut:hover { background: var(--sp-surface-alt); } .sp-mcc-transit-card { border-color: var(--sp-accent); } .sp-mcc-transit-card__eyebrow { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sp-accent); } .sp-mcc-transit-card__title { font-family: var(--sp-font-heading); color: var(--sp-text); margin: 4px 0 0; font-size: 18px; } .sp-mcc-transit-card__cta { margin-top: 20px; } /* ========================================================================== Orders list ========================================================================== */ .sp-mcc-order-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .sp-mcc-order-card__number { display: block; font-family: var(--sp-font-heading); color: var(--sp-text); font-size: 16px; text-decoration: none; } .sp-mcc-order-card__number:hover { color: var(--sp-accent); } .sp-mcc-order-card__date { display: block; font-size: 12px; color: var(--sp-text-muted); margin-top: 2px; } .sp-mcc-order-card__body { border-top: 1px solid var(--sp-border); padding-top: 12px; } .sp-mcc-order-card__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 6px 0; } .sp-mcc-order-card__row-label { color: var(--sp-text-muted); } .sp-mcc-order-card__row-value { color: var(--sp-text); text-align: right; } .sp-mcc-order-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sp-border); } .sp-mcc-pagination { display: flex; justify-content: space-between; margin-top: 20px; } /* ========================================================================== View order — status text + native WooCommerce order-details output ========================================================================== */ .sp-mcc-order-summary__text { margin: 0; color: var(--sp-text); font-size: 14px; } .sp-mcc-order-summary__text mark { background: none; color: var(--sp-accent); font-weight: 700; } .sp-mcc-order-updates__list { list-style: none; margin: 0; padding: 0; } .sp-mcc-order-updates__list li { padding: 12px 0; border-top: 1px solid var(--sp-border); } .sp-mcc-order-updates__list li:first-child { border-top: none; padding-top: 0; } .sp-mcc-order-updates__list .meta { font-size: 11px; color: var(--sp-text-muted); margin: 0 0 4px; } .sp-mcc-order-updates__list .description p { margin: 0; font-size: 13px; color: var(--sp-text); } /* Native WooCommerce order-details table + customer address columns (rendered by do_action('woocommerce_view_order'), not overridden — styled generically here so it fits regardless of which shipping/tracking plugin hooks into it). */ .sp-mcc-order-details table.shop_table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--sp-text); } .sp-mcc-order-details table.shop_table th, .sp-mcc-order-details table.shop_table td { padding: 12px 8px; border-bottom: 1px solid var(--sp-border); text-align: left; } .sp-mcc-order-details table.shop_table tfoot th, .sp-mcc-order-details table.shop_table tfoot td { color: var(--sp-text-muted); } .sp-mcc-order-details table.shop_table tfoot tr:last-child th, .sp-mcc-order-details table.shop_table tfoot tr:last-child td { color: var(--sp-text); font-weight: 700; } .sp-mcc-order-item { display: flex; align-items: center; gap: 12px; } .sp-mcc-order-item-thumb-wrap img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--sp-border-radius); border: 1px solid var(--sp-border); } .sp-mcc-order-details address { font-size: 13px; color: var(--sp-text-muted); font-style: normal; line-height: 1.6; } .sp-mcc-order-details h2, .sp-mcc-order-details h3 { font-family: var(--sp-font-heading); color: var(--sp-text); font-size: 16px; } .sp-mcc-order-details .woocommerce-columns { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 20px; } .sp-mcc-order-details .woocommerce-column { flex: 1 1 220px; } /* Generic fallback styling for whatever markup the tracking plugin injects via woocommerce_order_details_after_order_table (e.g. Infixs Correios Automático). */ .sp-mcc-order-details table.shop_table + * { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--sp-border); } /* ========================================================================== Addresses overview (my-address.php) ========================================================================== */ .sp-mcc-addresses-intro { color: var(--sp-text-muted); font-size: 13px; margin: 0 0 16px; } .sp-mcc-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sp-mcc-address-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .sp-mcc-address-card__body { font-size: 13px; color: var(--sp-text-muted); font-style: normal; line-height: 1.6; } @media (max-width: 600px) { .sp-mcc-addresses { grid-template-columns: 1fr; } } /* ========================================================================== Toasts ========================================================================== */ .sp-mcc-toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 340px; } .sp-mcc-toast { background: var(--sp-surface); border: 1px solid var(--sp-border); border-left: 4px solid var(--sp-accent); border-radius: var(--sp-border-radius); color: var(--sp-text); padding: 14px 16px; font-size: 13px; box-shadow: var(--sp-shadow); opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease; } .sp-mcc-toast.is-visible { opacity: 1; transform: translateY(0); } .sp-mcc-toast--success { border-left-color: var(--sp-success); } .sp-mcc-toast--error { border-left-color: var(--sp-danger); } @media (max-width: 480px) { .sp-mcc-toast-container { left: 16px; right: 16px; max-width: none; } }