/* * TAPTOCLIQ -- My Account page restyle. * Native WooCommerce markup, no template overrides -- scoped purely * to .woocommerce-account so nothing else on the site is touched. * Mirrors the same navy/sky/gold + Sora/Inter language as the rest * of the platform (see solution-dashboard-base.css). */ body.woocommerce-account { --tclq-navy: #000080; --tclq-navy-mid: #0a0aaa; --tclq-sky: #73B9EE; --tclq-gold: #C9A84C; --tclq-border: #e2e8f3; --tclq-muted: #64748b; } /* .woocommerce-account is a class in WordPress/WooCommerce -- the actual nav+content wrapper is the .woocommerce div inside the page content, so the flex layout must target that, not the body. */ body.woocommerce-account .woocommerce { max-width: 1100px; margin: 40px auto 80px; padding: 0 20px; display: flex; align-items: flex-start; gap: 32px; font-family: 'Inter', sans-serif; color: #1e293b; } @media (max-width: 782px) { body.woocommerce-account .woocommerce { flex-direction: column; margin: 24px auto 60px; gap: 20px; } } /* Sidebar navigation */ .woocommerce-MyAccount-navigation { width: 240px; flex-shrink: 0; background: var(--tclq-navy); border-radius: 16px; overflow: hidden; position: sticky; top: 32px; box-shadow: 0 4px 24px rgba(0,0,128,.11); } @media (max-width: 782px) { .woocommerce-MyAccount-navigation { width: 100%; position: static; } } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 10px 0; } .woocommerce-MyAccount-navigation-link { border-left: 3px solid transparent; } .woocommerce-MyAccount-navigation-link a { display: block; padding: 13px 22px; color: rgba(255,255,255,.75); text-decoration: none; font-family: 'Sora', sans-serif; font-weight: 600; font-size: .92rem; transition: background .15s, color .15s; } .woocommerce-MyAccount-navigation-link a:hover { color: #fff; background: rgba(255,255,255,.06); } .woocommerce-MyAccount-navigation-link.is-active { border-left-color: var(--tclq-gold); background: rgba(255,255,255,.08); } .woocommerce-MyAccount-navigation-link.is-active a { color: #fff; } .woocommerce-MyAccount-navigation-link--customer-logout { border-top: 1px solid rgba(255,255,255,.12); margin-top: 6px; } .woocommerce-MyAccount-navigation-link--customer-logout a { color: rgba(255,255,255,.55); } /* Content card */ .woocommerce-MyAccount-content { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--tclq-border); border-radius: 16px; padding: 32px; box-shadow: 0 1px 4px rgba(0,0,128,.07); } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-family: 'Sora', sans-serif; color: var(--tclq-navy); margin-top: 0; } .woocommerce-MyAccount-content > p:first-child { color: var(--tclq-muted); padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--tclq-border); } .woocommerce-MyAccount-content mark { background: none; color: var(--tclq-navy); font-weight: 700; } /* Orders / downloads tables */ .woocommerce-account .woocommerce-orders-table, .woocommerce-account table.shop_table { width: 100%; border-collapse: collapse; font-size: .9rem; } .woocommerce-account .woocommerce-orders-table th { text-align: left; color: var(--tclq-muted); font-family: 'Sora', sans-serif; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; border-bottom: 2px solid var(--tclq-border); } .woocommerce-account .woocommerce-orders-table td { padding: 14px; border-bottom: 1px solid var(--tclq-border); } .woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-completed, .woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-processing { color: #166534; font-weight: 700; background: none; } .woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-pending, .woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-on-hold { color: #92400e; font-weight: 700; background: none; } .woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-cancelled, .woocommerce-account .woocommerce-orders-table__cell-order-status mark.status-failed { color: #991b1b; font-weight: 700; background: none; } /* Forms (addresses, account details) */ .woocommerce-account .form-row label { font-weight: 600; font-size: .85rem; color: #1e293b; margin-bottom: 6px; display: block; } .woocommerce-account .form-row input.input-text, .woocommerce-account .form-row select, .woocommerce-account .form-row textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--tclq-border); border-radius: 8px; font-family: 'Inter', sans-serif; font-size: .92rem; transition: border-color .15s; } .woocommerce-account .form-row input.input-text:focus, .woocommerce-account .form-row select:focus, .woocommerce-account .form-row textarea:focus { border-color: var(--tclq-sky); outline: none; } /* Buttons */ .woocommerce-account .button, .woocommerce-account button.button, .woocommerce-account input.button { background: var(--tclq-navy); color: #fff; border: none; border-radius: 8px; padding: 11px 22px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .15s; } .woocommerce-account .button:hover, .woocommerce-account button.button:hover, .woocommerce-account input.button:hover { background: var(--tclq-navy-mid); color: #fff; } .woocommerce-account .button.cancel, .woocommerce-account a.button.cancel { background: transparent; color: var(--tclq-navy); border: 1.5px solid var(--tclq-navy); } /* Address cards on the Addresses tab */ .woocommerce-account address { font-style: normal; line-height: 1.7; } .woocommerce-account .woocommerce-Address { background: #f7f8fc; border: 1px solid var(--tclq-border); border-radius: 12px; padding: 20px; } .woocommerce-account .woocommerce-Address-title h3 { font-size: 1rem; } /* Notices */ .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-error, .woocommerce-account .woocommerce-info { border-radius: 10px; border-top: none; padding: 14px 20px; font-size: .9rem; }