/* ============================================================= NYSUB PEPTIDES — My Account (/my-account/) premium skin (bug 10, go-live) Arquivo isolado (não mexe em style.css) — mesmo padrão visual do .nysub-vlogin (login do influencer): Gotham dark (OLED black + amber), Barlow Condensed / Inter Tight / Space Mono. Reaproveita os tokens globais --nysub-* já invertidos para dark em :root (style.css). Escopo: body.woocommerce-account (classe que o WooCommerce já injeta no das páginas de conta) — nenhum wrapper extra necessário. ============================================================= */ body.woocommerce-account #main { background: var(--nysub-offwhite); padding-top: 48px; padding-bottom: 64px; } body.woocommerce-account .woocommerce { max-width: 920px; margin: 0 auto; font-family: var(--font-body); color: var(--nysub-charcoal); } /* ---------- Login / Register (form-login.php) ---------- */ body.woocommerce-account #customer_login { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; } /* BUG FIXED (contraste, 20/07/2026; DARK card, 20/07/2026 — feedback do Alan): estas regras miravam .u-column1/.u-column2, classes que a versão instalada do Flatsome NUNCA gera aqui — o DOM real usa .account-login-inner/.account-register-inner (confirmado no HTML renderizado). Como o seletor nunca batia, o cartão nunca ganhava fundo/estilo próprio e caía no fundo claro "de fábrica" do Flatsome pra essa área, com headings/labels herdando as cores CLARAS do tema dark (pensadas pra fundo escuro) — quase invisíveis sobre o branco. Primeira correção deixou o cartão BRANCO com texto escuro (contraste OK, mas destoava do resto do site, que é todo escuro). Alan pediu a estética Gotham de volta: cartão ESCURO (mesmo --nysub-ivory usado no dashboard logado, .woocommerce-MyAccount-content/-navigation, pra ficar consistente com o resto do site) + texto CLARO + acentos amarelos. Contraste recalculado abaixo, agora sobre fundo escuro. Escopado só a estes 2 containers — não mexe no dashboard logado, que já era dark e não mudou. Inputs (pretos) e botão (amarelo) não foram tocados. */ body.woocommerce-account #customer_login .account-login-inner, body.woocommerce-account #customer_login .account-register-inner { flex: 1 1 320px; background: var(--nysub-ivory); border: 1px solid var(--nysub-rule); border-radius: 14px; padding: 36px 34px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); color: var(--nysub-charcoal); /* base text on the dark card — ~17:1 on --nysub-ivory */ } body.woocommerce-account #customer_login h2 { font-family: var(--font-heading); font-weight: 600; font-size: 24px; margin: 0 0 20px; line-height: 1.15; } body.woocommerce-account #customer_login .account-login-inner h2, body.woocommerce-account #customer_login .account-register-inner h2 { color: var(--nysub-charcoal); /* light heading on the dark card — ~17:1 */ } body.woocommerce-account #customer_login .account-login-inner h2::before { content: 'Account Access'; display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nysub-rose-dark); margin: 0 0 12px; } body.woocommerce-account #customer_login .account-login-inner .woocommerce-form-row label, body.woocommerce-account #customer_login .account-register-inner .woocommerce-form-row label, body.woocommerce-account #customer_login .account-login-inner .woocommerce-form-login__rememberme, body.woocommerce-account #customer_login .account-register-inner .woocommerce-form-login__rememberme { /* !important needed: style.css has a sitewide ".woocommerce-account .woocommerce-form-row label { color: ... !important }" rule. It happens to already be var(--nysub-gray) — the color we want here too — but this stays !important and explicit so the dark-card intent for THIS container doesn't silently depend on that other file never changing. */ color: var(--nysub-gray) !important; /* light label on the dark card — ~10:1 */ } body.woocommerce-account #customer_login .account-login-inner .required, body.woocommerce-account #customer_login .account-register-inner .required { color: var(--nysub-rose-dark); /* amber required-marker, ~9:1 on --nysub-ivory */ } body.woocommerce-account #customer_login .account-login-inner .woocommerce-LostPassword a { color: var(--nysub-rose-dark); /* amber accent — ~9:1 on --nysub-ivory */ } body.woocommerce-account #customer_login .account-register-inner .woocommerce-privacy-policy-text, body.woocommerce-account #customer_login .account-register-inner .woocommerce-privacy-policy-text p { color: var(--nysub-gray); /* "Your personal data..." text — ~10:1 on --nysub-ivory */ } body.woocommerce-account #customer_login .account-register-inner .woocommerce-privacy-policy-link { color: var(--nysub-rose-dark); } /* Single-column fallback when registration is off — same dark-card treatment */ body.woocommerce-account #customer_login:not(.col2-set) { display: block; } body.woocommerce-account #customer_login:not(.col2-set) form { background: var(--nysub-ivory); border: 1px solid var(--nysub-rule); border-radius: 14px; padding: 36px 34px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); color: var(--nysub-charcoal); max-width: 460px; margin: 0 auto; } body.woocommerce-account #customer_login:not(.col2-set) form .woocommerce-form-row label, body.woocommerce-account #customer_login:not(.col2-set) form .woocommerce-form-login__rememberme { color: var(--nysub-gray) !important; /* same style.css !important conflict as above */ } body.woocommerce-account #customer_login:not(.col2-set) form .required { color: var(--nysub-rose-dark); } body.woocommerce-account #customer_login:not(.col2-set) form .woocommerce-LostPassword a { color: var(--nysub-rose-dark); } /* Inputs need !important here: style.css has a sitewide, higher-priority input[type=...] rule (background/border/color, all !important) that sets the SAME --nysub-ivory as this card's own background — on this card specifically that made the input blend into the card with almost no visible edge. Reclaiming a near-black background (--nysub-offwhite, a shade darker than the card) plus a lighter, clearly-visible border fixes that without touching the sitewide rule or the dashboard forms it also feeds. Focus state (amber border) is untouched — already correct per Alan's screenshot. */ body.woocommerce-account #customer_login .account-login-inner .woocommerce-Input, body.woocommerce-account #customer_login .account-register-inner .woocommerce-Input { background: var(--nysub-offwhite) !important; border-color: #5E5E66 !important; } body.woocommerce-account .woocommerce-form-row label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--nysub-gray); margin-bottom: 6px; } body.woocommerce-account .woocommerce-form-row .required { color: var(--nysub-rose-dark); } body.woocommerce-account .woocommerce-Input { width: 100%; padding: 12px 14px; border: 1px solid var(--nysub-rule-strong); border-radius: 8px; font-size: 14px; box-sizing: border-box; background: var(--nysub-offwhite); color: var(--nysub-charcoal); font-family: var(--font-body); } body.woocommerce-account .woocommerce-Input:focus { outline: none; border-color: var(--nysub-rose-dark); } body.woocommerce-account .woocommerce-form-row { margin-bottom: 16px; } body.woocommerce-account .woocommerce-form-login__rememberme { font-weight: 400; font-size: 13px; color: var(--nysub-gray); } /* Botão em amarelo — texto precisa ficar PRETO para contraste (mesma regra já usada nos tokens --nysub-rose-dark do restante do site). */ body.woocommerce-account .woocommerce-button, body.woocommerce-account .woocommerce-Button { width: 100%; background: var(--nysub-rose-dark); color: #0A0A0B !important; border: none; padding: 13px; border-radius: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s ease; } body.woocommerce-account .woocommerce-button:hover, body.woocommerce-account .woocommerce-Button:hover { background: var(--nysub-rose-light); } body.woocommerce-account .woocommerce-LostPassword { margin-top: 16px; font-size: 12.5px; text-align: center; } body.woocommerce-account .woocommerce-LostPassword a { color: var(--nysub-rose-dark); text-decoration: none; } /* ---------- Notices / errors ---------- */ body.woocommerce-account .woocommerce-error, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-info { background: rgba(224, 82, 106, 0.16); border: 1px solid rgba(224, 82, 106, 0.4); color: #E0526A; border-top: none; border-radius: 10px; padding: 14px 16px; font-size: 13px; list-style: none; margin: 0 0 24px; } body.woocommerce-account .woocommerce-message { background: rgba(70, 192, 138, 0.16); border-color: rgba(70, 192, 138, 0.4); color: #46C08A; } body.woocommerce-account .woocommerce-error::before, body.woocommerce-account .woocommerce-message::before, body.woocommerce-account .woocommerce-info::before { display: none; } /* ---------- Logged-in shell: nav + content ---------- */ body.woocommerce-account .woocommerce-MyAccount-navigation { background: var(--nysub-ivory); border: 1px solid var(--nysub-rule); border-radius: 14px; padding: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4); } body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--nysub-rule); } body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; } body.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 12px 14px; font-family: var(--font-heading); font-size: 13px; color: var(--nysub-gray); text-decoration: none; border-radius: 8px; } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, body.woocommerce-account .woocommerce-MyAccount-navigation a[aria-current="page"] { background: rgba(244, 192, 37, 0.12); color: var(--nysub-rose-dark); } body.woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: var(--nysub-rose-dark); } body.woocommerce-account .woocommerce-MyAccount-content { background: var(--nysub-ivory); border: 1px solid var(--nysub-rule); border-radius: 14px; padding: 32px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4); } /* ---------- Orders table ---------- */ body.woocommerce-account .woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--nysub-charcoal); } body.woocommerce-account .woocommerce-orders-table__header { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nysub-gray); padding: 10px 12px; border-bottom: 1px solid var(--nysub-rule-strong); } body.woocommerce-account .woocommerce-orders-table__cell { padding: 14px 12px; border-bottom: 1px solid var(--nysub-rule); } body.woocommerce-account .woocommerce-orders-table__cell-order-status mark { background: rgba(244, 192, 37, 0.14); color: var(--nysub-rose-dark); padding: 3px 8px; border-radius: 20px; font-size: 11px; } /* ---------- Account details / addresses forms ---------- */ body.woocommerce-account .woocommerce-address-fields .woocommerce-Input, body.woocommerce-account form.edit-account .woocommerce-Input { width: 100%; } body.woocommerce-account .woocommerce-MyAccount-content h3 { font-family: var(--font-heading); font-weight: 600; color: var(--nysub-charcoal); } @media (max-width: 782px) { body.woocommerce-account #customer_login .account-login-inner, body.woocommerce-account #customer_login .account-register-inner { padding: 26px 22px; } }