/* ========================================================= NEDA eCAMPUS — MY ACCOUNT The WooCommerce account pages: dashboard, orders, downloads, addresses, account details, log out. Everything here is taken from Neda_Design_Rules.md rather than invented. Where a rule is applied the section is named, so the next person can check the decision against the source instead of guessing at intent. section 1 palette, and the contrast rule section 2 menu rows: cherry fill, white bold text on hover; the CURRENT page is text-box 4, black, bold section 3 the nav panel IS the header dropdown, to the value section 2c links: black, underlined, cherry on hover section 3 dropdown geometry: 12px card, 6px padding, 8px rows, so the fill is a pill INSIDE the card section 4 10px corners on every control, inputs included section 5 buttons: bold always, cherry hover, white text section 8 motion 0.15s ease, focus ring 3px cherry at 3px VERIFIED DOM (live, 2026-08-22, WooCommerce 10.9.4, with no theme template overrides — core templates render exactly this): main div.wp-block-group -- title band h1.wp-block-post-title div.wp-block-group -- content band div.wp-block-group.has-white-... -- THE CARD div.entry-content -- carries text-gray div.woocommerce div.woocommerce-notices-wrapper nav.woocommerce-MyAccount-navigation ul > li.woocommerce-MyAccount-navigation-link > a (aria-current="page" on the current one) div.woocommerce-MyAccount-content The navigation is absent when nobody is signed in — the same page then renders the login form as its only child. That is why the grid in section 5 is guarded by :has(). A two-column grid applied to the logged-out page would lay the login form into the 232px navigation column. RTL is carried entirely by logical properties — no mirrored block, nothing to keep in sync. The one physical rule in the way is WooCommerce's own `right` on the password eye, which section 8 replaces with its logical equivalent. ========================================================= */ /* --------------------------------------------------------- 1. TOKENS --------------------------------------------------------- */ body.woocommerce-account { --na-cyan: #0EC4C5; --na-lime: #C4C40E; --na-cherry: #D7263D; --na-white: #FFFFFF; --na-black: #000000; /* The one sanctioned light surface, per section 1, carried by the password fieldset and the notices. The navigation panel does NOT take it: section 3 says a dropdown card is solid white, and the panel is the dropdown (section 6). */ --na-surface: #ECF9F8; /* Section 1: soft edges are a transparent black, never a new hue. This is the header's hairline, to the value. */ --na-hairline: rgba(0, 0, 0, 0.18); /* Text-box 4, the deepest house tint - section 2's SELECTED state. Distinct from the cherry hover on purpose: a selected row and a hovered row must never look the same. */ --na-textbox-4: #F1F3D6; --na-radius: 10px; /* section 4 — controls */ --na-card: 12px; /* section 3 — cards */ --na-row: 8px; /* section 3 — rows */ --na-ease: 0.15s ease; /* The page measure. The theme constrains this page to its 720px content-size, which cannot hold a navigation column beside a form. 1200px is the theme's own wide-size, so this widens the page to a measure the design system already has rather than inventing a number. */ --na-measure: 1200px; /* The navigation column. Section 2 warns that a row going bold on hover can rewrap its label and make the whole card jump, and says to size the column so the longest real label holds one line at BOTH weights. The longest labels on this page at 15px measure 98px for "Account details" and, once GTranslate has been through it, 130px for "Kontoinformationen". 232px less the panel's 1px border and 6px padding, the row's 10px padding and its 19px icon with a 10px gap leaves 169px of text room, 39px clear of the longest of those. 232px is also the width the header dropdown was widened to for exactly this reason, so the two agree. */ --na-nav: 232px; } /* --------------------------------------------------------- 2. THE CYAN-TEXT FIX The post-content block carries `textColor: text-gray`, and on this site that preset resolves to #0EC4C5 — so every link, the fieldset legend and the body copy inherit cyan on white, which is 2.6:1 and one of the two combinations section 1 names as forbidden. It is the same defect the content pages had, and it is why the account navigation reads cyan today. Fixed at the content root, so ordinary markup inherits black and nothing downstream has to carry a colour of its own. --------------------------------------------------------- */ /* !important is load-bearing. WordPress emits its preset colour classes as `.has-text-gray-color { color: ...!important }` in the inline global stylesheet, so nothing without !important reaches this element however specific it is. */ body.woocommerce-account .entry-content, body.woocommerce-account .woocommerce { color: var(--na-black) !important; } /* --------------------------------------------------------- 3. THE PAGE MEASURE — SIGNED IN ONLY Left, on the card's own edge, as prototyped. The theme centres it and constrains it to the 720px content-size, so both the alignment and the measure have to move. !important on max-width for the reason documented at length in neda-header.css: WordPress writes the constrained-layout cap through `.is-layout-constrained > :where(...)`, whose :where() scores zero and which prints after this file. THE MEASURE IS GATED ON BEING SIGNED IN. The login screen renders at this same URL, inside this same card, and it is one column of fields. It has no navigation column and no business being 1200px wide: widening it stretched the username field to 1092px, which is worse than the 720px it started at. So the page grows only where there is a second column to justify it, and the signed-out screen keeps the theme measure. The test for "signed in" is the presence of the account navigation. --------------------------------------------------------- */ /* Black on every account screen — the title inherits the cyan preset otherwise, exactly like the body copy. */ body.woocommerce-account main .wp-block-post-title { color: var(--na-black); } body.woocommerce-account:has(.woocommerce-MyAccount-navigation) main .wp-block-post-title { max-width: var(--na-measure) !important; margin-inline: auto; text-align: start; } /* --------------------------------------------------------- 4. THE CARD The theme already gives this page a white, 16px-cornered box. It keeps that job; it is only widened to the page measure and brought to the 12px card radius of section 3. --------------------------------------------------------- */ body.woocommerce-account main .wp-block-group.has-white-background-color:has(.woocommerce) { border-radius: var(--na-card); } body.woocommerce-account main .wp-block-group.has-white-background-color:has(.woocommerce-MyAccount-navigation) { max-width: var(--na-measure) !important; } /* Widening the card is not enough on its own. The card is itself a constrained layout, so the post-content inside it is capped at the same 720px content-size and centred in the space — the card grows and the grid stays where it was. WooCommerce then adds a 1000px cap of its own on .woocommerce. Both are released here and the measure is carried by the card alone, so there is one place to change it. */ body.woocommerce-account main .entry-content:has(.woocommerce-MyAccount-navigation), body.woocommerce-account main .entry-content .woocommerce:has(> .woocommerce-MyAccount-navigation) { max-width: none !important; margin-inline: 0 !important; } /* --------------------------------------------------------- 5. THE TWO-COLUMN GRID WooCommerce floats the navigation 30% and the content 68%. Floats cannot give the prototype's full-height panel — a float is only as tall as its own content — so the pair becomes a grid and the floats are cleared. :has() is the guard. Signed out, this page has no navigation and the login form is the only child; without the guard that form would be laid into a 232px column. --------------------------------------------------------- */ body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: var(--na-nav) minmax(0, 1fr); column-gap: 30px; align-items: stretch; /* the panel runs the full height */ } /* THE CLEARFIX IS A GRID ITEM. woocommerce-layout.css gives .woocommerce a ::before and ::after of `content: " "; display: table` to contain its floats. In a grid container a generated box is a grid item like any other, so ::before silently took column 1 of row 1, the navigation was pushed to column 2, and the content wrapped to row 2 — the page rendered with the menu on the right and the greeting underneath it. There are no floats left to contain; both are removed. */ body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before, body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after { content: none; display: none; } body.woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1; } body.woocommerce-account .woocommerce-MyAccount-navigation, body.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; /* a wide orders table must not blow the grid out */ } /* --------------------------------------------------------- 6. THE ACCOUNT NAVIGATION — THE HEADER DROPDOWN, PINNED OPEN This panel is the user-menu dropdown from neda-header.css (section 15, .neda-user-panel / .neda-user-item) copied to the value, so the two can be compared side by side and read as one control: card solid white, 1px hairline, 12px radius, 6px padding on all four sides, the dropdown's shadow row 9px 10px padding, 8px radius, 15px regular, line-height 1.3, a 19px icon and a 10px gap hover cherry fill, white text, bold - the one hover colour of section 2 current text-box 4 fill, black, bold - section 2's selected state. It is NOT the hover colour: a visitor could not tell the page they were on from the row under the pointer when both were cherry (2026-08-22) Section 3 is explicit that the card is SOLID WHITE. The earlier version tinted it cyan, which was a panel of its own invention rather than the dropdown; it is gone. The card hugs its rows (align-self: start) exactly as the dropdown does — it is not stretched to the height of the orders table beside it. --------------------------------------------------------- */ body.woocommerce-account .woocommerce-MyAccount-navigation { box-sizing: border-box; align-self: start; padding: 6px; border: 1px solid var(--na-hairline); border-radius: var(--na-card); background-color: var(--na-white); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); line-height: 1.3; } body.woocommerce-account .woocommerce-MyAccount-navigation ul, body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; list-style: none; } /* Section 2: menu items are never underlined. WooCommerce's block-theme sheet underlines both the hover and the current item, at (0,3,1), so this names the element to outrank it. */ body.woocommerce-account .woocommerce-MyAccount-navigation li a, body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover, body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { text-decoration: none; } /* The row — .neda-user-item, to the value. */ body.woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; padding: 9px 10px; border-radius: var(--na-row); color: var(--na-black); font-size: 15px; font-weight: 400; line-height: 1.3; transition: background-color var(--na-ease), color var(--na-ease); } /* SELECTED - section 2: text-box 4, black, bold. */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, body.woocommerce-account .woocommerce-MyAccount-navigation li a[aria-current="page"] { background-color: var(--na-textbox-4); color: var(--na-black); font-weight: 700; } /* HOVER - cherry, on the selected row as well. Written after the selected rule at equal specificity so the pointer wins while it is on the row, and the tint comes back when it leaves. Keyboard focus takes the same treatment as the header dropdown does. */ body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover, body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible { background-color: var(--na-cherry); color: var(--na-white); font-weight: 700; } /* Section 8's focus ring, at the row's own 8px corner so the ring follows the pill rather than squaring it off. */ body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible { outline: 3px solid var(--na-cherry); outline-offset: 3px; } /* ---- Row icons ---- The dropdown's icon technique, unchanged: a 19px box masked with an inline SVG and painted with currentColor, so the glyph is black at rest and white on the cherry row without a second colour anywhere. Dashboard, the user and the door are the dropdown's own masks byte for byte; orders, downloads and addresses are drawn on the same 24px grid for the three entries the dropdown does not have. WooCommerce puts the endpoint name on the
  • as a modifier class, which is what selects them. An endpoint added later gets no icon and sits flush left — the gap is on the flex row, not a fixed indent, so nothing mis-aligns. */ body.woocommerce-account .woocommerce-MyAccount-navigation li a::before { content: ""; flex: 0 0 auto; width: 19px; height: 19px; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* No icon known for this endpoint: no box, no gap. */ body.woocommerce-account .woocommerce-MyAccount-navigation li:not([class*="-navigation-link--dashboard"]):not([class*="-navigation-link--orders"]):not([class*="-navigation-link--downloads"]):not([class*="-navigation-link--edit-address"]):not([class*="-navigation-link--edit-account"]):not([class*="-navigation-link--customer-logout"]) a::before { display: none; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3Zm10 0h8v5h-8V3ZM3 13h8v8H3v-8Zm10-3h8v11h-8V10Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3Zm10 0h8v5h-8V3ZM3 13h8v8H3v-8Zm10-3h8v11h-8V10Z'/%3E%3C/svg%3E"); } /* Orders: a receipt, lines cut out of it. */ body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 2h14v20l-2.33-1.75L14.33 22 12 20.25 9.67 22 7.33 20.25 5 22ZM8 7v2h8V7Zm0 4v2h8v-2Zm0 4v2h5v-2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 2h14v20l-2.33-1.75L14.33 22 12 20.25 9.67 22 7.33 20.25 5 22ZM8 7v2h8V7Zm0 4v2h8v-2Zm0 4v2h5v-2Z'/%3E%3C/svg%3E"); } /* Downloads: an arrow into a tray. */ body.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.17l2.59-2.58L17 11l-5 5-5-5 1.41-1.41L11 12.17ZM4 15h2v4h12v-4h2v6H4Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.17l2.59-2.58L17 11l-5 5-5-5 1.41-1.41L11 12.17ZM4 15h2v4h12v-4h2v6H4Z'/%3E%3C/svg%3E"); } /* Addresses: a map pin. */ body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E"); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 5v3h16v-3c0-2.33-2.67-5-8-5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 5v3h16v-3c0-2.33-2.67-5-8-5Z'/%3E%3C/svg%3E"); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 13v-2H7V8l-5 4 5 4v-3h9ZM20 3h-9a2 2 0 0 0-2 2v3h2V5h9v14h-9v-3H9v3a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 13v-2H7V8l-5 4 5 4v-3h9ZM20 3h-9a2 2 0 0 0-2 2v3h2V5h9v14h-9v-3H9v3a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z'/%3E%3C/svg%3E"); } /* --------------------------------------------------------- 7. LINKS — section 2c Black, permanently underlined, cherry on hover. The underline is not decoration: it carries the "this is a link" signal without relying on colour, which is what lets the resting colour be plain black. This replaces the cyan-at-rest the page inherits today, which section 2c retires by name as 2.6:1. The theme colours links with `.wp-elements- a:where(:not(.wp-element-button))` at (0,1,1), so this has to match it or better — hence the body class. Buttons are excluded; they are section 5's job. Weight follows the rule too. A link inside a sentence keeps the surrounding weight, so nothing here bolds. The standalone navigational links on this page are the navigation rows in section 6, which go bold when they are the current page. --------------------------------------------------------- */ body.woocommerce-account .woocommerce-MyAccount-content a:where(:not(.wp-element-button):not(.button):not(.edit)), body.woocommerce-account .woocommerce-LostPassword a { color: var(--na-black); text-decoration: underline; text-underline-offset: 0.15em; transition: color var(--na-ease); } body.woocommerce-account .woocommerce-MyAccount-content a:where(:not(.wp-element-button):not(.button):not(.edit)):hover, body.woocommerce-account .woocommerce-MyAccount-content a:where(:not(.wp-element-button):not(.button):not(.edit)):focus-visible, body.woocommerce-account .woocommerce-LostPassword a:hover, body.woocommerce-account .woocommerce-LostPassword a:focus-visible { color: var(--na-cherry); } /* --------------------------------------------------------- 8. THE ACCOUNT DETAILS FORM Two columns for the name pair, one for everything else — the shape WooCommerce's own classes already describe, so the markup is left alone and only the layout is restated as a grid. The `.clear` divs exist to break floats that no longer apply; they are taken out of the grid rather than left to occupy a cell. --------------------------------------------------------- */ body.woocommerce-account .woocommerce-EditAccountForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: start; } body.woocommerce-account .woocommerce-EditAccountForm > .clear { display: none; } body.woocommerce-account .woocommerce-EditAccountForm > .form-row-first { grid-column: 1; } body.woocommerce-account .woocommerce-EditAccountForm > .form-row-last { grid-column: 2; } body.woocommerce-account .woocommerce-EditAccountForm > .form-row-wide, body.woocommerce-account .woocommerce-EditAccountForm > fieldset, body.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type { grid-column: 1 / -1; } /* The float and the 47% are woocommerce-layout.css laying this form out in the two columns it cannot know are already a grid. Both have to go, or each grid cell holds a half-width float and the fields come out at 47% of a column. */ body.woocommerce-account .woocommerce-EditAccountForm .form-row { float: none; width: auto; margin: 0; padding: 0; } /* ---- Labels ---- */ body.woocommerce-account .woocommerce-EditAccountForm label { display: block; margin-block-end: 6px; color: var(--na-black); font-size: 15px; font-weight: 700; line-height: 1.35; } /* Cherry reads 5.9:1 on white, so the required mark is legible rather than decorative. It is aria-hidden in the template — the input carries aria-required — so this is a visual cue only, and the underline the link rule would otherwise give a `span.required` is cleared. */ body.woocommerce-account .woocommerce-EditAccountForm .required { color: var(--na-cherry); text-decoration: none; } /* The note under Display name. Black per section 1 — it inherits the cyan preset otherwise. */ body.woocommerce-account #account_display_name_description, body.woocommerce-account #account_display_name_description em { display: block; margin-block-start: 6px; color: var(--na-black); font-size: 13px; font-style: italic; line-height: 1.4; } /* ---- Inputs — 10px corners, per section 4 ---- */ /* The extra selectors are a specificity answer, not decoration. woocommerce-blocktheme.css sets the font-size and the padding through `.woocommerce-page form .form-row input.input-text` at (0,3,2) — two elements against the one in the short form below, which is why that form wins the border and the radius but loses the type size and the padding. Naming `form` and `input` brings this to (0,3,3) and the whole block lands. */ body.woocommerce-account .woocommerce .woocommerce-Input, body.woocommerce-account .woocommerce .input-text, body.woocommerce-account .woocommerce form .form-row input.input-text, body.woocommerce-account .woocommerce form .form-row input.woocommerce-Input { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid var(--na-hairline); border-radius: var(--na-radius); background-color: var(--na-white); color: var(--na-black); font-family: inherit; font-size: 15px; line-height: 1.35; transition: border-color var(--na-ease), box-shadow var(--na-ease); } body.woocommerce-account .woocommerce .woocommerce-Input:hover, body.woocommerce-account .woocommerce .input-text:hover, body.woocommerce-account .woocommerce form .form-row input.input-text:hover { border-color: rgba(0, 0, 0, 0.38); } /* The canonical field geometry (2026-09-02): one solid 3px cherry ring drawn 3px OUTSIDE the control, following its 10px corner, and nothing else. A box-shadow rather than an outline so the corner is followed even on engines that square an outline off. Three things changed here on 2026-09-02: - `border-color: var(--na-cherry)` is GONE. The resting border stays as it is; the ring outside it is the whole indicator. Under the superseded rule the border WAS the indicator, which is what this recoloured for. - `:focus` is gone from the selector list, leaving `:focus-visible` alone. They were both listed to catch pointer interaction, but every current engine already reports a click into a text box as focus-visible, so the `:focus` half only risked drawing the ring where it should not appear. - the gap layer reads `--neda-field-surface` instead of a hard-coded white. It still resolves to white here -- the account card behind these fields measured `rgb(255,255,255)` on 2026-09-02 -- but a hard-coded white draws a seam the moment a field is placed on a tint, so the colour is named by the surface rather than assumed. */ body.woocommerce-account .woocommerce .woocommerce-Input:focus-visible, body.woocommerce-account .woocommerce .input-text:focus-visible, body.woocommerce-account .woocommerce form .form-row input.input-text:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--neda-field-surface, var(--na-white)), 0 0 0 6px var(--na-cherry); } /* A box-shadow ring does not survive forced colours, and the rule above ends in `outline: none`, so without this the field would show no focus at all in High Contrast. */ @media (forced-colors: active) { body.woocommerce-account .woocommerce .woocommerce-Input:focus-visible, body.woocommerce-account .woocommerce .input-text:focus-visible, body.woocommerce-account .woocommerce form .form-row input.input-text:focus-visible { outline: 3px solid Highlight !important; outline-offset: 3px !important; } } /* Everything else on this page that takes focus gets the same ring at the same radius. */ body.woocommerce-account .woocommerce-MyAccount-content a:focus-visible, body.woocommerce-account .woocommerce button:focus-visible { outline: 3px solid var(--na-cherry); outline-offset: 3px; border-radius: var(--na-radius); } /* ---- Password change fieldset ---- */ body.woocommerce-account .woocommerce-EditAccountForm fieldset { margin: 0; padding: 20px; border: 1px solid var(--na-hairline); border-radius: var(--na-card); background-color: var(--na-surface); } /* The legend rendered cyan on white before section 2's fix, because it inherited the preset. Black and bold, like every other label on the form. */ body.woocommerce-account .woocommerce-EditAccountForm legend { padding: 0 8px; color: var(--na-black); font-size: 15px; font-weight: 700; } body.woocommerce-account .woocommerce-EditAccountForm fieldset .form-row + .form-row { margin-block-start: 16px; } /* ---- The password eye ---- WooCommerce injects `span.password-input` around each password field and appends `button.show-password-input`, then pins the button with a physical `right` and pads the input with a physical `padding-right`. Both land on the wrong side in Arabic and Persian, which this page is translated into. The logical equivalents replace them; the physical ones are zeroed rather than left to fight. */ body.woocommerce-account .woocommerce .password-input { display: block; position: relative; } /* This has to out-specify the input block above, which now sits at (0,3,3) and writes the padding as a shorthand — a shorthand that would otherwise put the text back under the eye. Naming form and the input class brings this to (0,4,3). */ body.woocommerce-account .woocommerce form .password-input input.input-text { padding-right: 14px; padding-inline-end: 44px; } body.woocommerce-account .woocommerce form .show-password-input { right: auto; inset-inline-end: 12px; border-radius: 4px; color: var(--na-black); transition: opacity var(--na-ease); } body.woocommerce-account .woocommerce form .show-password-input:hover { opacity: 0.65; } /* --------------------------------------------------------- 8b. THE PROFILE PHOTO FIELD Rendered by src/ProfilePhoto.php at the top of the Account details form, as a `.form-row-wide`, so section 8's grid gives it both columns without a rule here. The preview is the header's own `.neda-user-avatar` — the same element, the same lime square with the same 10px corner, just bigger — so the page shows the user exactly what the rest of the site will show them. Everything below only resizes it; neda-header.css still owns what it looks like, and there is no second copy of the avatar's appearance to keep in sync. Section 4 for the 10px controls, section 5 for the button (the file input's own button is a button and is styled as one), section 8 for the focus ring, section 1 for the palette. --------------------------------------------------------- */ body.woocommerce-account .neda-photo-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; } body.woocommerce-account .neda-photo-preview { display: block; flex: 0 0 auto; } /* 96px is the smallest photo the field accepts, shown at exactly that size: what you see is the whole of what was uploaded. */ body.woocommerce-account .neda-photo-preview .neda-user-avatar { width: 96px; height: 96px; border-radius: var(--na-radius); font-size: 32px; } body.woocommerce-account .neda-photo-preview .neda-user-avatar img { border-radius: var(--na-radius); } /* The no-name glyph is drawn at 20px for a 38px header square; at 96px it needs to grow with the box or it floats in it. */ body.woocommerce-account .neda-photo-preview .neda-user-avatar[data-neda-avatar="glyph"]::before { width: 46px; height: 46px; } body.woocommerce-account .neda-photo-controls { flex: 1 1 280px; min-width: 0; } body.woocommerce-account .neda-photo-field input[type="file"] { display: block; width: 100%; max-width: 460px; padding: 8px; border: 1px solid var(--na-hairline); border-radius: var(--na-radius); background-color: var(--na-white); color: var(--na-black); font-family: inherit; font-size: 15px; line-height: 1.4; } /* A file input is a form field, so it takes the same canonical geometry as the text boxes above: the ring alone, the resting border untouched, and the gap named by the surface rather than hard-coded white (2026-09-02). */ body.woocommerce-account .neda-photo-field input[type="file"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--neda-field-surface, var(--na-white)), 0 0 0 6px var(--na-cherry); } @media (forced-colors: active) { body.woocommerce-account .neda-photo-field input[type="file"]:focus-visible { outline: 3px solid Highlight !important; outline-offset: 3px !important; } } /* WRITTEN TWICE ON PURPOSE. `::file-selector-button` and the older `::-webkit-file-upload-button` cannot share a selector list: a browser that does not know one of them discards the whole rule, and the button reverts to the operating system's grey. Two blocks, identical bodies, and neither can break the other. */ body.woocommerce-account .neda-photo-field input[type="file"]::file-selector-button { margin-inline-end: 12px; padding: 8px 16px; border: 0; border-radius: var(--na-radius); background-color: var(--na-lime); color: var(--na-black); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color var(--na-ease), color var(--na-ease); } body.woocommerce-account .neda-photo-field input[type="file"]::-webkit-file-upload-button { margin-inline-end: 12px; padding: 8px 16px; border: 0; border-radius: var(--na-radius); background-color: var(--na-lime); color: var(--na-black); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color var(--na-ease), color var(--na-ease); } body.woocommerce-account .neda-photo-field input[type="file"]:hover::file-selector-button { background-color: var(--na-cherry); color: var(--na-white); } body.woocommerce-account .neda-photo-field input[type="file"]:hover::-webkit-file-upload-button { background-color: var(--na-cherry); color: var(--na-white); } /* The state line and the constraints. 13px and black, matching the note under Display name in section 8 — the same kind of text in the same form should not be two different sizes. */ body.woocommerce-account .neda-photo-state, body.woocommerce-account .neda-photo-hint { margin: 10px 0 0; color: var(--na-black); font-size: 13px; line-height: 1.45; } /* Which of the two states the account is in is the one thing on this row a person is looking for. */ body.woocommerce-account .neda-photo-state { font-weight: 700; } /* Section 8 makes every label in this form a bold block, which is right for a field caption and wrong for a checkbox's own text: it would put the words on the line below the box. */ body.woocommerce-account .woocommerce-EditAccountForm .neda-photo-remove { display: flex; align-items: center; gap: 10px; margin-block-start: 14px; margin-block-end: 0; font-size: 15px; font-weight: 400; line-height: 1.4; cursor: pointer; } body.woocommerce-account .neda-photo-remove input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--na-cherry); } body.woocommerce-account .neda-photo-remove input[type="checkbox"]:focus-visible { outline: 3px solid var(--na-cherry); outline-offset: 3px; } /* --------------------------------------------------------- 8c. THE CROP WINDOW A modal , driven by assets/neda-account.js and rendered outside the account form by src/ProfilePhoto.php. was chosen over a div because it brings the three things a hand-rolled modal always gets wrong: the background goes inert, focus is trapped without a keydown handler, and Escape closes it. It is also display:none until opened, which is what makes the whole feature invisible when the script decides not to run. The frame carries the SAME 10px corner as the avatar it will become, so the shape on screen is the shape that gets stored. Section 3 for the card, section 4 for the corners, section 5 for the buttons, section 8 for the focus ring. --------------------------------------------------------- */ body.woocommerce-account .neda-crop { width: min(420px, 92vw); max-width: none; padding: 0; border: 0; border-radius: var(--na-card); background-color: var(--na-white); color: var(--na-black); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28); } body.woocommerce-account .neda-crop::backdrop { background-color: rgba(0, 0, 0, 0.55); } body.woocommerce-account .neda-crop-inner { padding: 24px; } body.woocommerce-account .neda-crop-title { margin: 0 0 8px; color: var(--na-black); font-size: 18px; font-weight: 700; line-height: 1.3; } body.woocommerce-account .neda-crop-help { margin: 0 0 16px; color: var(--na-black); font-size: 13px; line-height: 1.45; } /* THE FRAME. Square by aspect-ratio rather than a fixed height, because the script measures clientWidth and derives every other number from it — one source of truth for the size, and it survives the 92vw clamp on a narrow phone. */ body.woocommerce-account .neda-crop-stage { position: relative; width: 100%; aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: var(--na-radius); background-color: var(--na-surface); cursor: grab; /* Without this the browser claims the drag as a page scroll on any touch screen, and the photo cannot be moved at all. */ touch-action: none; -webkit-user-select: none; user-select: none; } body.woocommerce-account .neda-crop-stage.is-dragging { cursor: grabbing; } body.woocommerce-account .neda-crop-stage:focus-visible { outline: 3px solid var(--na-cherry); outline-offset: 3px; } /* `max-width: none` is load-bearing. The theme sets img to max-width:100%, which would cap the photo at the frame's width and defeat zooming entirely — the script sets an explicit pixel width on every paint and needs it honoured. */ body.woocommerce-account .neda-crop-stage img { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: block; max-width: none; transform-origin: 0 0; pointer-events: none; } body.woocommerce-account .neda-crop-zoom { margin-block-start: 16px; } body.woocommerce-account .neda-crop-zoom label { display: block; margin-block-end: 6px; color: var(--na-black); font-size: 15px; font-weight: 700; } body.woocommerce-account .neda-crop-zoom input[type="range"] { width: 100%; margin: 0; accent-color: var(--na-cherry); } body.woocommerce-account .neda-crop-zoom input[type="range"]:focus-visible { outline: 3px solid var(--na-cherry); outline-offset: 3px; } body.woocommerce-account .neda-crop-zoom input[type="range"]:disabled { opacity: 0.45; } /* Cherry on white is 5.9:1 — section 1's reason for using it wherever an error has to be read rather than noticed. */ body.woocommerce-account .neda-crop-error { margin: 14px 0 0; color: var(--na-cherry); font-size: 13px; font-weight: 700; line-height: 1.45; } body.woocommerce-account .neda-crop-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 20px; } /* The two that are not the primary action. Outlined rather than filled, so section 5's lime button is unmistakably the one that finishes the job. */ body.woocommerce-account .neda-crop-secondary { padding: 12px 22px; border: 1px solid var(--na-hairline); border-radius: var(--na-radius); background-color: transparent; color: var(--na-black); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color var(--na-ease), color var(--na-ease), border-color var(--na-ease); } body.woocommerce-account .neda-crop-secondary:hover, body.woocommerce-account .neda-crop-secondary:focus-visible { border-color: var(--na-cherry); background-color: var(--na-cherry); color: var(--na-white); } /* The primary button carries `.button`, so section 9 already styles it. It only needs to stop being pushed around by the flex row's default stretch. */ body.woocommerce-account .neda-crop-actions .button { align-self: center; } /* --------------------------------------------------------- 9. BUTTONS — section 5 Bold in every state, black on the button's own fill at rest, cherry fill with white text on hover, 10px corners, and the transition on background and colour only. The theme already ships the resting half of this correctly — lime fill, black bold text, 10px corners — so the hover and the transition are what is added. The resting fill is restated so the button cannot drift if the theme's preset changes. --------------------------------------------------------- */ body.woocommerce-account .woocommerce-MyAccount-content .button, body.woocommerce-account .woocommerce-MyAccount-content .wp-element-button, body.woocommerce-account .woocommerce-Address-title a.edit, body.woocommerce-account .woocommerce button[type="submit"] { display: inline-block; padding: 12px 22px; border: 0; border-radius: var(--na-radius); background-color: var(--na-lime); color: var(--na-black); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--na-ease), color var(--na-ease); } body.woocommerce-account .woocommerce-MyAccount-content .button:hover, body.woocommerce-account .woocommerce-MyAccount-content .button:focus-visible, body.woocommerce-account .woocommerce-MyAccount-content .wp-element-button:hover, body.woocommerce-account .woocommerce-Address-title a.edit:hover, body.woocommerce-account .woocommerce-Address-title a.edit:focus-visible, body.woocommerce-account .woocommerce button[type="submit"]:hover, body.woocommerce-account .woocommerce button[type="submit"]:focus-visible { background-color: var(--na-cherry); color: var(--na-white); } /* The eye is a button by tag and must not take the fill above. */ body.woocommerce-account .woocommerce form .show-password-input, body.woocommerce-account .woocommerce form .show-password-input:hover { padding: 0; background-color: transparent; } /* --------------------------------------------------------- 9b. ADDRESSES One address only. Shipping is removed server-side in src/Account.php (the woocommerce_my_account_get_addresses filter) rather than hidden here - a hidden block is still in the DOM for a screen reader, and its link is still a tab stop. "Add Billing address" is an action, so it is a button (section 5, via the block in section 9) and sits beside the heading. WooCommerce floats it right and styles it as a link; both are undone. --------------------------------------------------------- */ /* WooCommerce still emits its two-column .col2-set wrapper around the one address that is left, and floats it at 48%. Out-specify that (.woocommerce .col2-set .col-1 is (0,3,0)) so the block runs full width. */ body.woocommerce-account .woocommerce-Addresses .woocommerce-Address, body.woocommerce-account .woocommerce-Address { float: none; width: auto; max-width: 100%; } body.woocommerce-account .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 12px; } /* The same clearfix trap as section 5: WooCommerce gives this header a ::before and ::after of `display: table`, and in a flex row those are two more items, which is why the heading sat a third of the way in. */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title::before, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title::after { content: none; display: none; } body.woocommerce-account .woocommerce-Address-title h2 { margin: 0; color: var(--na-black); } /* WooCommerce floats the link right from (0,4,0); name the content wrapper to outrank it. */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit { float: none; display: inline-block; margin: 0; } body.woocommerce-account .woocommerce-Address address { margin: 0; color: var(--na-black); } $1 WooCommerce's message, error and info boxes, brought to the card radius and the palette. The accent bar carries the meaning as a fill, never as text colour — section 7d's rule, which holds wherever a colour has to identify something. --------------------------------------------------------- */ body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-error { margin: 0 0 24px; padding: 14px 18px; border: 1px solid var(--na-hairline); border-inline-start: 4px solid var(--na-cyan); border-radius: var(--na-card); background-color: var(--na-surface); color: var(--na-black); font-size: 15px; list-style: none; } body.woocommerce-account .woocommerce-error { border-inline-start-color: var(--na-cherry); background-color: var(--na-white); } /* --------------------------------------------------------- 11. NARROW SCREENS The panel goes above the content at the same breakpoint the header uses to widen its gutter, so the two agree about where "narrow" starts. --------------------------------------------------------- */ @media (max-width: 781px) { body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } body.woocommerce-account .woocommerce-EditAccountForm { grid-template-columns: minmax(0, 1fr); } body.woocommerce-account .woocommerce-EditAccountForm > .form-row-first, body.woocommerce-account .woocommerce-EditAccountForm > .form-row-last { grid-column: 1; } } /* --------------------------------------------------------- 12. REDUCED MOTION — section 8 --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.woocommerce-account .woocommerce-MyAccount-navigation li a, body.woocommerce-account .woocommerce-MyAccount-content a, body.woocommerce-account .woocommerce .woocommerce-Input, body.woocommerce-account .woocommerce button[type="submit"], body.woocommerce-account .woocommerce form .show-password-input { transition: none; } /* Section 8b's file button — two selectors again, for the same reason they are two rules up there. */ body.woocommerce-account .neda-photo-field input[type="file"]::file-selector-button { transition: none; } body.woocommerce-account .neda-photo-field input[type="file"]::-webkit-file-upload-button { transition: none; } body.woocommerce-account .neda-crop-secondary { transition: none; } }