/** * My Account — pill navigation for the WooCommerce account page. * * Scoped under `.swa-account-enhanced` (added to by SWA_Account_Module) * so it wins over the theme's default account layout without per-rule specificity * hacks. Everything visual is a `--swa-acct-*` variable — override one in your * theme/Customizer CSS to restyle; no need to fight selectors. */ .swa-account-enhanced { /* Pill container */ --swa-acct-bg: #f3f4f6; --swa-acct-radius: 999px; --swa-acct-pad: 0.5rem; --swa-acct-gap: 2rem; --swa-acct-gap-mobile: 0.5rem; /* Tabs */ --swa-acct-link-pad: 0.5rem 1rem; --swa-acct-link-pad-mobile: 0.5rem; --swa-acct-link-gap: 0.5rem; --swa-acct-link-radius: 999px; --swa-acct-color: var(--theme-palette-color-4, #374151); --swa-acct-hover-bg: rgb(0 0 0 / 6%); --swa-acct-active-bg: var(--theme-palette-color-4, #111827); --swa-acct-active-color: #ffffff; --swa-acct-font-size: 0.875rem; --swa-acct-icon-size: 1.25rem; --swa-acct-nav-gap: 2rem; /* space between the nav and the content below */ /* Dashboard shortcut cards */ --swa-acct-cards-min: 200px; /* min card width before the grid wraps */ --swa-acct-cards-gap: 1rem; --swa-acct-card-bg: #f3f4f6; --swa-acct-card-border: 1px solid #e6e8eb; --swa-acct-card-radius: 0.75rem; --swa-acct-card-pad: 1.5rem; --swa-acct-card-gap: 0.75rem; --swa-acct-card-aspect: 3 / 2; --swa-acct-card-icon-size: 2.5rem; --swa-acct-card-hover-border: var(--theme-palette-color-4, #111827); --swa-acct-card-shadow: 0 4px 12px rgb(16 24 40 / 8%); /* Edit-account form */ --swa-acct-forms-cols: 2fr 1fr; /* the two cards: personal (wide) + password (narrow) */ --swa-acct-forms-gap: 2rem; /* between the two cards */ --swa-acct-form-row-gap: 1.5rem; /* between rows inside a card */ --swa-acct-form-grid-cols: 1fr 1fr; /* name row: two columns (set `1fr` to stack) */ --swa-acct-form-card-bg: transparent; --swa-acct-form-card-border: 1px solid #e6e8eb; --swa-acct-form-card-pad: 2rem; --swa-acct-form-head-icon: 1.25rem; --swa-acct-form-title-size: 1.125rem; --swa-acct-form-btn-bg: var(--theme-palette-color-4, #111827); --swa-acct-form-btn-color: #ffffff; } /* --- Stack nav on top, content below (override the theme's sidebar layout) --- */ .swa-account-enhanced .woocommerce { display: block; } .swa-account-enhanced .woocommerce-MyAccount-content { width: 100%; max-width: none; margin: 0; float: none; } /* Blocksy wraps our nav in `.ct-acount-nav` (its own spelling) inside a `.ct-woo-account` flex row, turning it into a ~20% sidebar with its own background / shadow / radius. Flatten both so our pill sits full-width on top. Our (0,2,0) selectors beat Blocksy's, and they simply don't match on other themes — harmless. */ .swa-account-enhanced .ct-woo-account { display: block; } .swa-account-enhanced .ct-acount-nav { width: 100%; min-width: 0; margin: 0 0 var(--swa-acct-nav-gap); padding: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; } /* --- The pill nav ----------------------------------------------------------- */ .swa-account-enhanced .swa-account-nav { width: 100%; max-width: none; float: none; margin: 0 0 var(--swa-acct-nav-gap); } .swa-account-nav__list { list-style: none; margin: 0; padding: var(--swa-acct-pad); display: flex; gap: var(--swa-acct-gap); /* `safe center` centres the tabs but falls back to start-alignment when they overflow, so the first tab never gets clipped out of the scroll area. */ justify-content: safe center; background: var(--swa-acct-bg); border-radius: var(--swa-acct-radius); /* Scroll horizontally if the tabs don't fit (many endpoints / small screen) — with the scrollbar hidden, like the course sidebar. */ overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .swa-account-nav__list::-webkit-scrollbar { display: none; } .swa-account-nav__item { margin: 0; flex: 0 0 auto; list-style: none; } .swa-account-nav__item::before, .swa-account-nav__item::marker { content: none; /* kill theme list bullets */ } .swa-account-nav__link { display: inline-flex; align-items: center; gap: var(--swa-acct-link-gap); padding: var(--swa-acct-link-pad); border-radius: var(--swa-acct-link-radius); color: var(--swa-acct-color); font-size: var(--swa-acct-font-size); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .swa-account-nav__link:hover, .swa-account-nav__link:focus { background: var(--swa-acct-hover-bg); color: var(--swa-acct-color); } .swa-account-nav__item.is-active .swa-account-nav__link { background: var(--swa-acct-active-bg); color: var(--swa-acct-active-color); } .swa-account-nav__icon { display: inline-flex; flex-shrink: 0; width: var(--swa-acct-icon-size); height: var(--swa-acct-icon-size); } .swa-account-nav__icon svg { width: 100%; height: 100%; fill: currentColor; } /* --- Dashboard: shortcut cards (replaces WC's greeting paragraph) ----------- */ .swa-account-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--swa-acct-cards-min), 1fr)); gap: var(--swa-acct-cards-gap); } .swa-account-card { display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; gap: var(--swa-acct-card-gap); padding: var(--swa-acct-card-pad); aspect-ratio: var(--swa-acct-card-aspect); background: var(--swa-acct-card-bg); border: var(--swa-acct-card-border); border-radius: var(--swa-acct-card-radius); color: var(--swa-acct-color); text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .swa-account-card:hover, .swa-account-card:focus { border-color: var(--swa-acct-card-hover-border); box-shadow: var(--swa-acct-card-shadow); transform: translateY(-2px); color: var(--swa-acct-color); } .swa-account-card__icon { display: inline-flex; width: var(--swa-acct-card-icon-size); height: var(--swa-acct-card-icon-size); color: var(--swa-acct-active-bg); } .swa-account-card__icon svg { width: 100%; height: 100%; fill: currentColor; } .swa-account-card__label { font-weight: 600; font-size: 1rem; } /* --- Edit-account form: two side-by-side cards ------------------------------ */ .swa-account-forms { display: grid; grid-template-columns: var(--swa-acct-forms-cols); gap: var(--swa-acct-forms-gap); align-items: stretch; /* both cards take the taller one's height */ } .swa-account-form { display: flex; flex-direction: column; gap: var(--swa-acct-form-row-gap); padding: var(--swa-acct-form-card-pad); background: var(--swa-acct-form-card-bg); border: var(--swa-acct-form-card-border); border-radius: var(--swa-acct-card-radius); } /* Card header: icon + title with a divider under it. */ .swa-account-form__head { display: flex; align-items: center; gap: 0.75rem; padding-bottom: var(--swa-acct-form-row-gap); border-bottom: var(--swa-acct-form-card-border); } .swa-account-form__head-icon { display: inline-flex; flex-shrink: 0; width: var(--swa-acct-form-head-icon); height: var(--swa-acct-form-head-icon); color: var(--swa-acct-active-bg); } .swa-account-form__head-icon svg { width: 100%; height: 100%; fill: currentColor; } .swa-account-form__head-title { margin: 0; font-size: var(--swa-acct-form-title-size); font-weight: 700; color: var(--swa-acct-color); } /* Name fields row — columns from a variable (default two columns). */ .swa-account-form__grid { display: grid; grid-template-columns: var(--swa-acct-form-grid-cols); gap: var(--swa-acct-form-row-gap); } /* Neutralise WC/theme float + width on our rows so the grid/flow owns layout. Scoped under .swa-account-enhanced to beat WC's `.form-row-first { width:48% }` (same class-count specificity otherwise, and WC's CSS loads later). */ .swa-account-enhanced .swa-account-form__row { float: none; width: 100%; margin: 0; } .swa-account-form__hint { display: block; margin-top: 0.5rem; } .swa-account-form__actions { margin: 0; } /* Password card's own button — dark, full width, distinct from the primary. */ .swa-account-form__submit--dark { width: 100%; padding: 0.75rem 1.5rem; border: 0; border-radius: var(--swa-acct-card-radius); background: var(--swa-acct-form-btn-bg); color: var(--swa-acct-form-btn-color); font-weight: 600; cursor: pointer; transition: opacity 0.2s ease; } .swa-account-form__submit--dark:hover, .swa-account-form__submit--dark:focus { opacity: 0.88; } /* Stack the two cards (and the name row) on smaller screens. */ @media (max-width: 1024px) { .swa-account-forms { grid-template-columns: 1fr; } } @media (max-width: 600px) { .swa-account-form__grid { grid-template-columns: 1fr; } } /* --- Mobile: icon-only (matches the course sidebar's 1024px breakpoint) ------ */ @media (max-width: 1024px) { .swa-account-nav__list { gap: var(--swa-acct-gap-mobile); justify-content: space-evenly; } .swa-account-nav__link { padding: var(--swa-acct-link-pad-mobile); gap: 0; } /* Keep the label for screen readers, hide it visually. */ .swa-account-nav__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }