/* * MELT MEMBER AREA - shared design CSS * Owning spec: 06_Code_Reference/myaccount/MY_ACCOUNT_REBUILD_SOP.md section 8 * Visual authority: my-account-VERSION-10.html * Type tokens: melt-design-standard-v1.html * * Everything is scoped under .melt-account so Enfold's sitewide CSS cannot * bleed in and this file cannot bleed out onto the marketing site. * Nothing below 14px, anywhere, ever. */ .melt-account { --melt-rose: #C8735A; --melt-wine: #6B2737; --melt-charcoal: #2C2420; --melt-warm-grey: #6B5D55; --melt-light-grey: #B8A9A3; --melt-blush: #F5E8E0; --melt-blush-deep: #EDD5C5; --melt-gold: #F0C878; --melt-accent: #D64570; --melt-cream: #FCF8F5; font-family: Lato, "Helvetica Neue", Arial, sans-serif; font-weight: 400; color: var(--melt-charcoal); background: var(--melt-cream); line-height: 1.5; } /* Reset Enfold inheritance inside the member world only */ .melt-account *, .melt-account *::before, .melt-account *::after { box-sizing: border-box; } .melt-account p, .melt-account h1, .melt-account h2, .melt-account h3, .melt-account figure { margin: 0; padding: 0; } .melt-account a { text-decoration: none; } .melt-account img { max-width: 100%; display: block; } /* WIDTH MATCHED TO THE LESSON PAGE (2026-08-10, Denis). Was 1200px. * The lesson page is the reference he named, and melt-lesson.css sets * #top .melt-wrap{max-width:1440px;padding:28px 24px 64px}. Only the CAP moved * here. The padding is deliberately left at 32/24/24: he asked for width, and * the 32px top is load-bearing, tuned against the fixed 90px header in the * Enfold-unwrap note below. Side padding was already 24px, so the two pages * now share both the cap and the gutter. * The module page carries the same 1440 on .melt-mwrap in melt-module.css. * THREE PAGES, ONE NUMBER. Do not change one without the other two. * * 2026-08-11: vertical padding matched too, 32/24/24 -> 28/24/64, same as the * lesson wrap. The 32px top noted below became 28px. That is safe because the * header clearance is NOT done here: it is #main's 88px top padding, which is * untouched. This 4px only affects the gap between that and the first section. */ .melt-wrap { max-width: 1440px; margin: 0 auto; padding: 28px 24px 64px; } /* ---------- WEEKLY VIDEO: EMBED + INLINE UNLOCK (2026-08-11) ---------- * Spec: cmc-staging-theme/WEEKLY_VIDEO.md. Markup in melt-dashboard.php. * * .hero-embed replaces the thumbnail when a record carries a Vimeo ID. It sits * in the same grid cell as .hero-video and takes the same radius, so the two * states are the same shape and the layout does not jump between them. * * .hero-unlock is the INLINE unlock, shown beside the video to a member who * does not own the module the video is about. It exists so nobody clicks a CTA * and lands on a locked page. What goes INSIDE it is the offer decision and is * still parked, so this is a container with a heading and one line, sized and * coloured now so that dropping products into it later needs no layout work. * Blush panel rather than white: it has to read as different from the page, not * as another card. */ .melt-account .hero-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; } .melt-account .hero-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .melt-account .hero-unlock { display: block; background: var(--melt-blush); border: 1px solid var(--melt-blush-deep); border-radius: 12px; padding: 18px 20px; margin: 4px 0 0; max-width: 460px; } .melt-account .hero-unlock b { display: block; font-size: 17px; font-weight: 700; color: var(--melt-charcoal); margin: 0 0 4px; } .melt-account .hero-unlock span { display: block; font-size: 15px; line-height: 1.5; color: var(--melt-warm-grey); } /* ---------- LOGGED OUT: HERO, SPACING, CENTRING (2026-08-11, Denis) ---------- * Logged out, this page was a 640px white box pinned to the LEFT of a 1440px * canvas, with a title sitting flush against it. Measured before the fix: * the gap between the Login heading and the form was ZERO pixels, because the * heading is a bare h2 that no rule in this file had ever matched, so it kept * its margin:0 reset from the top of this file. * * HERO: the .mood-hero treatment from mood-page-mockup-v1.html, taken as it * is. 16px radius, 340px minimum, object-fit cover. Markup is in * melt-account-template.php, which explains why the image URL is resolved * rather than pasted from the mockup. * * SCOPED TO #top:not(.logged-in) ON PURPOSE, AND THE FORM OF THAT SELECTOR * MATTERS. Enfold puts id="top" on the BODY ELEMENT ITSELF. So writing * `body:not(.logged-in) #top ...` asks for #top to be a DESCENDANT of body, * which can never be true, and the rule silently never applies. That was * shipped once on 2026-08-11 and caught by measuring the page afterwards * rather than trusting the diff. The working form puts the logged-out test on * #top directly, with no space. * * The scope exists because the heading rule uses a child combinator from * .woocommerce, and the dashboard also renders inside .woocommerce. The * dashboard's own headings sit inside
so a child combinator cannot * reach them, but the logged-out scope makes that structural safety a * belt-and-braces rule instead of a lucky one. The long note further down this * file records what happened last time a selector reached the dashboard. */ /* THE LOGGED-OUT COLUMN IS 1000px, NOT 1440px. THIS IS WHY. * * The mockup's container is .wrap{max-width:1000px;padding:0 24px}, so its * hero renders 952 wide by 340 tall, a ratio of about 2.8 to 1. * * Dropping the same hero into the member area's 1440px .melt-wrap made it 1392 * by 340, about 4.1 to 1. Same height, far wider box, and object-fit:cover * crops whatever will not fit. So most of the photograph was being thrown away * and it did not look like the mockup. Denis called it: the image is too wide * and a lot of it is being lost. * * Matching the mockup means matching its COLUMN, not just its hero rules. The * logged-out pages therefore run at the mockup's 1000px. Logged in, .melt-wrap * stays 1440 and shares that number with the module and lesson pages, which is * the rule recorded above. The two do not conflict: no page is both. * * The login card keeps its own 640px cap and centres inside this narrower * column, which is why it now reads as deliberate rather than adrift. */ #top:not(.logged-in) #wrap_all .melt-account .melt-wrap { max-width: 1000px; } /* HERO: the .mood-hero block from mood-page-mockup-v1.html, reproduced * VALUE FOR VALUE. Every declaration below is the mockup's own number. The * first attempt kept only the image and dropped the gradient overlay and all * three text elements, which is why it did not look like the mockup. * * Mockup source, for checking against without opening the file: * .mood-hero{position:relative;border-radius:16px;overflow:hidden; * min-height:340px;display:flex;align-items:flex-end; * margin-bottom:26px;} * .mood-hero img{position:absolute;inset:0;width:100%;height:100%; * object-fit:cover;} * .mood-hero .ol{position:relative;width:100%; * background:linear-gradient(to top,rgba(26,10,14,.78) 0%, * rgba(26,10,14,.15) 60%,transparent 100%); * padding:70px 34px 30px;} * .mood-kicker{font-size:14px;font-weight:700;letter-spacing:.16em; * text-transform:uppercase;color:var(--gold);margin-bottom:8px;} * .mood-h{font-family:"Playfair Display",serif;font-size:52px; * font-weight:400;color:#fff;line-height:1.08;margin-bottom:10px;} * .mood-sub{font-size:21px;font-weight:300;color:rgba(255,255,255,.88); * max-width:560px;line-height:1.5;} * @media(max-width:640px){.mood-h{font-size:36px;}} * * The h1 and the gold kicker both need #top prefixes to survive Enfold, which * forces open sans, 48px and lowercase onto every h1 in #wrap_all. Same fight * documented for .t-display further down this file. */ .melt-account .melt-loginhero { position: relative; border-radius: 16px; overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; margin-bottom: 26px; background: var(--melt-blush); } .melt-account .melt-loginhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .melt-account .melt-loginhero .ol { position: relative; width: 100%; background: linear-gradient(to top, rgba(26,10,14,.78) 0%, rgba(26,10,14,.15) 60%, transparent 100%); padding: 70px 34px 30px; } #top #wrap_all .melt-account .melt-loginhero .mood-kicker, .melt-account .melt-loginhero .mood-kicker { font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--melt-gold); margin: 0 0 8px; } #top #wrap_all .melt-account .melt-loginhero .mood-h, .melt-account .melt-loginhero .mood-h { font-family: "Playfair Display", Georgia, serif; font-size: 52px; font-weight: 400; color: #fff; line-height: 1.08; letter-spacing: normal; text-transform: none; margin: 0 0 10px; } #top #wrap_all .melt-account .melt-loginhero .mood-sub, .melt-account .melt-loginhero .mood-sub { font-size: 21px; font-weight: 300; color: rgba(255,255,255,.88); max-width: 560px; line-height: 1.5; margin: 0; } @media (max-width: 640px) { #top #wrap_all .melt-account .melt-loginhero .mood-h, .melt-account .melt-loginhero .mood-h { font-size: 36px; } } @media (max-width: 820px) { .melt-account .melt-loginhero { min-height: 240px; border-radius: 14px; } .melt-account .melt-loginhero .ol { padding: 54px 22px 24px; } } #top:not(.logged-in) #wrap_all .melt-account .woocommerce > h2 { font-family: "Playfair Display", Georgia, serif; font-size: 40px; font-weight: 400; line-height: 1.12; text-transform: none; letter-spacing: normal; color: var(--melt-charcoal); text-align: center; margin: 0 0 28px; } @media (max-width: 820px) { #top:not(.logged-in) #wrap_all .melt-account .woocommerce > h2 { font-size: 30px; margin-bottom: 22px; } } /* Centre the card itself. It keeps its 640px cap; only the margins change. */ #top:not(.logged-in) #wrap_all .melt-account form.woocommerce-form-login, #top:not(.logged-in) #wrap_all .melt-account form.woocommerce-ResetPassword, #top:not(.logged-in) #wrap_all .melt-account form.lost_reset_password { margin-left: auto; margin-right: auto; } /* THE RESET PAGE MATCHES THE LOGIN PAGE (2026-08-11, Denis). * Its title is printed by melt-account-template.php rather than by * WooCommerce, which prints none, so it needs the same centred treatment the * login page's own h2 gets a few rules above. Same family, same 40px, same * centring, so the two pages read as one pair rather than as a designed page * and a leftover. * * The intro sentence WooCommerce prints above the field had no gap under it, * so the field label sat straight onto the end of the sentence. */ #top:not(.logged-in) #wrap_all .melt-account .melt-ep-title { text-align: center; } #top #wrap_all .melt-account form.lost_reset_password > p:first-of-type, #top #wrap_all .melt-account form.woocommerce-ResetPassword > p:first-of-type { font-size: 17px; line-height: 1.6; color: var(--melt-warm-grey); margin: 0 0 24px; } #top #wrap_all .melt-account form.lost_reset_password button[type="submit"], #top #wrap_all .melt-account form.woocommerce-ResetPassword button[type="submit"] { margin: 0; float: none; } /* float:none IS THE FIX, NOT THE margin. Measured: the button computed * float:left and ran 14px past the bottom edge of its own card, because a * floated last child adds no height to a parent with overflow visible. This is * the SAME bug as the edit-account Save button, and it survived here because * that earlier fix is scoped under .woocommerce-MyAccount-content, a wrapper * that does not exist when logged out. Anything scoped to that container will * always miss the login and reset pages. */ #top #wrap_all .melt-account form.lost_reset_password .clear, #top #wrap_all .melt-account form.woocommerce-ResetPassword .clear { display: none; } /* WooCommerce marks the reset row form-row-first, which it floats to 47 percent * in its own two-column layout. The login form uses form-row-wide and so never * hit this. Both reset forms are single column here, so the row is unfloated * and full width to match the login field exactly. */ #top #wrap_all .melt-account form.lost_reset_password .form-row-first, #top #wrap_all .melt-account form.lost_reset_password .form-row-last, #top #wrap_all .melt-account form.woocommerce-ResetPassword .form-row-first, #top #wrap_all .melt-account form.woocommerce-ResetPassword .form-row-last { float: none; width: 100%; margin: 0 0 20px; } /* ---------- ACCOUNT BUTTONS (2026-08-11) ---------- * Denis: /payment-methods/ is the TRUTH PAGE for button placement. There the * button sits BELOW the card and aligns to the content's left edge, x786. * * The float is dropped because Enfold floats .button left, and on /edit-account/ * a floated last child added no height to its parent, so the button hung 18px * out of the bottom of the card. Nothing in the member area wants text wrapping * around a button, so the float has no job here. */ #top #wrap_all .melt-account .woocommerce-MyAccount-content .button, #top #wrap_all .melt-account .woocommerce-MyAccount-content button.woocommerce-Button, #top #wrap_all .melt-account .woocommerce-MyAccount-content input[type="submit"] { float: none; vertical-align: middle; } /* ---------- ENDPOINT TITLE + BREADCRUMB (2026-08-11) ---------- * Rendered by melt-account-template.php on every account endpoint except the * dashboard. See that file for why the endpoints had no heading at all. * * SPECIFICITY ON THE H1 IS NOT OPTIONAL. Enfold ships * #top #wrap_all .all_colors h1 { font-size:48px; font-family:'open sans'; * text-transform:lowercase } * which is 2 ids + 1 class + 1 element, and melt-member.css loads BEFORE * avia-merged-styles so ties go to Enfold. The rule below is 2 ids + 2 * classes, so it outranks without !important. Same fight already documented * above for .t-display. Never demote this to a bare .melt-ep-title. * * 40px matches the .woocommerce-MyAccount-content > h1 rule further down, so * if an endpoint ever does print its own title the two are indistinguishable. * Crumb type follows the module page's .mm-crumbs: 14px, the caption floor. */ .melt-account .melt-crumbs { font-size: 14px; color: var(--melt-light-grey); margin: 0 0 18px; } .melt-account .melt-crumbs a { color: var(--melt-warm-grey); } .melt-account .melt-crumbs a:hover { color: var(--melt-accent); } .melt-account .melt-crumbs-sep { margin: 0 7px; } .melt-account .melt-crumbs b { color: var(--melt-accent); font-weight: 700; } #top #wrap_all .melt-account .melt-ep-title, .melt-account .melt-ep-title { font-family: "Playfair Display", Georgia, serif; font-size: 40px; font-weight: 400; line-height: 1.12; text-transform: none; letter-spacing: normal; color: var(--melt-charcoal); margin: 0 0 28px; } @media (max-width: 820px) { #top #wrap_all .melt-account .melt-ep-title, .melt-account .melt-ep-title { font-size: 30px; margin-bottom: 22px; } } /* ---------- STANDALONE TEMPLATE (Enfold unwrap, 2026-08-07) ---------- * * melt-account-template.php now renders the page. Enfold's builder wrappers * are gone, so nothing between #main and .melt-account paints a background any * more. .melt-page carries the member world's cream from edge to edge and * holds it when the content is short. * * ON THE 88px: it is NOT decoration. Measured on staging 2026-08-07, * #header is position:fixed, 90px tall. #main's top padding is what stops the * page sliding under a fixed header. Removing it hides the top of the content, * so it stays. The whitespace actually removed is main.template-page's 50px * top and bottom, div.container's 50px left and right, and 16px trimmed off * .melt-wrap above. Content now starts at ~120px instead of 184px. */ .melt-page { background: var(--melt-cream, #FCF8F5); } /* The shortcode's own wrappers, now the only two above .melt-account. */ .melt-page > .woocommerce, .melt-page .woocommerce-MyAccount-content { margin: 0; padding: 0; } /* Enfold injects .image-overlay spans into ANY link containing an image inside * #main. Unwrapping the page did not stop it; the builder was never the cause. * The real fix is the av-disable-avia-hover-effect body class added in * functions.php, which is Enfold's own early exit. This line is only the safety * net in case another plugin re-adds one. */ .melt-account .image-overlay { display: none !important; } /* Enfold still wins the H1. Found while verifying the unwrap, NOT caused by it. * * Enumerated the rules actually matching .t-display on staging 2026-08-07 * rather than eyeballing it. The winner is: * * #top #wrap_all .all_colors h1 { font-size:48px; font-family:'open sans'; * text-transform:lowercase } * * That is 2 ids + 1 class + 1 element. Our #top .melt-account .t-display is * 1 id + 2 classes, so it loses, and melt-member.css also loads BEFORE * avia-merged-styles so ties go to Enfold too. The selector never mentioned * .container or .template-page, which is why unwrapping the page did not * change it. The h2 was never affected because Enfold has no equivalent * #wrap_all rule for h2. * * Below: 2 ids + 2 classes. Outranks it without !important. */ #top #wrap_all .melt-account .t-display { font-family: "Playfair Display", Georgia, serif; font-size: 52px; font-weight: 400; line-height: 1.08; text-transform: none; letter-spacing: normal; } @media only screen and (max-width: 820px) { #top #wrap_all .melt-account .t-display { font-size: 36px; } } /* ---------- TYPE ---------- */ /* High specificity on purpose: Enfold's #top selectors otherwise win and force open-sans, 48px and text-transform:lowercase onto our headings. */ .melt-account h1, .melt-account h2, .melt-account h3, #top .melt-account h1, #top .melt-account h2, #top .melt-account h3 { text-transform: none; letter-spacing: normal; color: var(--melt-charcoal); } #top .melt-account .t-display, .melt-account .t-display { font-family: "Playfair Display", Georgia, serif; font-size: 52px; font-weight: 400; line-height: 1.08; margin-bottom: 14px; color: var(--melt-charcoal); text-transform: none; } #top .melt-account .t-h2, .melt-account .t-h2 { font-family: "Playfair Display", Georgia, serif; font-size: 34px; font-weight: 400; line-height: 1.2; color: var(--melt-charcoal); text-transform: none; } .melt-account .t-lead { font-size: 21px; font-weight: 300; color: var(--melt-warm-grey); line-height: 1.55; margin-bottom: 24px; } .melt-account .eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--melt-accent); margin-bottom: 10px; } .melt-account .sec-note { font-size: 15px; color: var(--melt-light-grey); } @media (max-width: 820px) { #top .melt-account .t-display, .melt-account .t-display { font-size: 36px; } #top .melt-account .t-h2, .melt-account .t-h2 { font-size: 27px; } } /* ---------- BUTTONS ---------- */ .melt-account .btn { display: inline-block; background: var(--melt-accent); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 17px 32px; border-radius: 6px; box-shadow: 0 4px 14px rgba(214,69,112,.3); transition: filter .18s ease, transform .18s ease; } .melt-account .btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; } .melt-account .btn-ghost { display: inline-block; margin-left: 16px; color: var(--melt-warm-grey); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; } /* ---------- HERO / WEEKLY VIDEO ---------- */ .melt-account .hero { margin: 0 0 80px; } .melt-account .hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; } @media (max-width: 820px) { .melt-account .hero-grid { grid-template-columns: 1fr; } } .melt-account .hero-video { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; background: var(--melt-charcoal); } .melt-account .hero-video img { width: 100%; height: 100%; object-fit: cover; opacity: .92; } .melt-account .playbtn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .melt-account .playbtn span { width: 78px; height: 78px; border-radius: 50%; background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(44,36,32,.35); } .melt-account .playbtn svg { width: 28px; height: 28px; fill: var(--melt-wine); margin-left: 5px; } .melt-account .dur { position: absolute; bottom: 14px; right: 16px; background: rgba(26,10,14,.75); color: #fff; font-size: 14px; font-weight: 700; padding: 5px 12px; border-radius: 5px; } /* ---------- SECTIONS ---------- */ .melt-account .sec { margin: 0 0 80px; } .melt-account .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } /* ---------- RESUME RING CARDS ---------- */ .melt-account .resume-grid { display: grid; grid-template-columns: 1fr; gap: 22px; } .melt-account .resume { display: flex; align-items: center; gap: 28px; background: #fff; border: 1px solid var(--melt-blush-deep); border-radius: 16px; padding: 28px 32px 28px 26px; color: var(--melt-charcoal); transition: transform .15s ease, box-shadow .15s ease; } .melt-account .resume:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(44,36,32,.12); } .melt-account .resume-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .melt-account .resume-slot { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--melt-accent); margin-bottom: 6px; } .melt-account .resume-title { font-size: 24px; font-weight: 700; margin-bottom: 4px; } .melt-account .resume-meta { font-size: 16px; color: var(--melt-warm-grey); } .melt-account .resume-desc { font-size: 16px; color: var(--melt-warm-grey); margin-top: 8px; line-height: 1.5; } .melt-account .resume .btn { margin-left: auto; flex-shrink: 0; align-self: center; min-width: 190px; text-align: center; padding: 16px 24px; } .melt-account .resume-ring { display: block; width: 150px; height: 150px; border-radius: 50%; padding: 8px; flex-shrink: 0; position: relative; } .melt-account .resume-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .melt-account .resume-ring .pct { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: var(--melt-accent); color: #fff; font-size: 14px; font-weight: 700; padding: 4px 14px; border-radius: 14px; white-space: nowrap; box-shadow: 0 3px 10px rgba(214,69,112,.3); } @media (max-width: 820px) { .melt-account .resume { flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: 30px 22px; } .melt-account .resume .btn { margin: 0; min-width: 0; padding: 15px 34px; } } /* ---------- PROGRESS BAR ---------- */ .melt-account .prog { display: block; margin-top: 12px; max-width: 460px; } .melt-account .prog-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .melt-account .prog-top b { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--melt-warm-grey); } .melt-account .prog-top span { font-size: 15px; font-weight: 700; color: var(--melt-accent); } .melt-account .prog-track { display: block; height: 12px; background: var(--melt-blush); border-radius: 7px; overflow: hidden; } .melt-account .prog-track i { display: block; height: 100%; background: var(--melt-accent); border-radius: 7px; } /* ---------- LIBRARY CARDS ---------- */ .melt-account .rowgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px 26px; } @media (max-width: 900px) { .melt-account .rowgrid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px) { .melt-account .rowgrid { grid-template-columns: 1fr; } } .melt-account .card { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--melt-blush-deep); color: var(--melt-charcoal); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; } .melt-account .card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(44,36,32,.12); } .melt-account .card-img { display: block; position: relative; aspect-ratio: 500/268; overflow: hidden; background: var(--melt-blush); } .melt-account .card-img img { width: 100%; height: 100%; object-fit: cover; } /* Locked cards keep their photograph at FULL colour. The grayscale(.55) * brightness(.85) filter that used to live here was removed 2026-08-10 on * Denis's call: it made the whole lower half of the library look dead, and the * page has to stay vibrant to sell anything. The lock badge alone carries the * message, which is its job. Do not re-add a filter here. */ .melt-account .card.locked .lockbadge { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(26,10,14,.72); display: flex; align-items: center; justify-content: center; } .melt-account .card.locked .lockbadge svg { width: 16px; height: 16px; fill: var(--melt-gold); display: block; } /* LIBRARY GROUPING (2026-08-10). Available modules render first, then a * subordinate heading, then the locked ones. Spec: my-account-mockup-v5.html, * the only mockup that covers a locked state at all (VERSION 10 is the * lifetime view and has none). * * ON THE SIZE: v5 drew this heading at 20px. 27px is used instead because it * is ALREADY in this file as the mobile size of .t-h2, so the subordinate * heading costs no new step in the type scale. Warm-grey rather than charcoal * does the demoting. Everything else stays exactly as the live standard. */ .melt-account .lib-split { margin-top: 56px; } #top .melt-account .lib-split-h, .melt-account .lib-split-h { font-size: 27px; color: var(--melt-warm-grey); } @media (max-width: 820px) { #top .melt-account .lib-split-h, .melt-account .lib-split-h { font-size: 22px; } } .melt-account .card-body { padding: 22px 24px 28px; display: flex; flex-direction: column; flex: 1; } .melt-account .card-t { font-size: 22px; font-weight: 700; margin-bottom: 6px; } .melt-account .card-m { font-size: 16px; color: var(--melt-warm-grey); line-height: 1.55; margin-bottom: 20px; } .melt-account .card-body .prog { margin-top: 0; margin-bottom: 24px; max-width: none; } .melt-account .state { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin: 0 0 14px; } .melt-account .state .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .melt-account .state.new { color: var(--melt-warm-grey); } .melt-account .state.new .dot { background: var(--melt-light-grey); } .melt-account .state.going { color: var(--melt-accent); } .melt-account .state.going .dot { background: var(--melt-accent); } .melt-account .state.done { color: var(--melt-wine); } .melt-account .state.done .dot { background: var(--melt-wine); } .melt-account .state.optin { color: #A8862D; } .melt-account .state.optin .dot { background: var(--melt-gold); } .melt-account .state.locked { color: var(--melt-light-grey); } .melt-account .state.locked .dot { background: var(--melt-light-grey); } .melt-account .cardbtn { display: block; width: 100%; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 15px; border-radius: 6px; margin-top: auto; transition: filter .15s ease; } .melt-account .cardbtn:hover { filter: brightness(1.05); } .melt-account .cardbtn.start { background: var(--melt-accent); color: #fff; box-shadow: 0 4px 12px rgba(214,69,112,.25); } .melt-account .cardbtn.cont { background: var(--melt-wine); color: #fff; } .melt-account .cardbtn.rewatch { background: #fff; border: 1.5px solid var(--melt-blush-deep); color: var(--melt-warm-grey); } .melt-account .cardbtn.optin { background: #fff; border: 1.5px solid var(--melt-gold); color: #A8862D; } .melt-account .cardbtn.unlock { background: #fff; border: 1.5px solid var(--melt-accent); color: var(--melt-accent); } /* ---------- TWO-TARGET OWNED CARDS (2026-08-20, Denis) ---------- * Owned library cards are now a
with separate anchors: * a.card-img and a.card-cover (image + text, both to the module or the * single course) and the button anchors at the bottom. Nested anchors are * invalid HTML, which is why the one big could not simply grow buttons. * Locked and optin cards stay one and none of this touches * them; the flyout's a.card.locked binding is untouched. * * .card-cover carries flex:1 so the buttons keep bottom-aligning across a * row exactly as margin-top:auto did when everything was one flex column. */ .melt-account .card > a.card-img { color: inherit; } .melt-account .card-body > .card-cover { display: flex; flex-direction: column; flex: 1 1 auto; color: var(--melt-charcoal); } .melt-account .cardbtns { display: flex; gap: 10px; margin-top: auto; } .melt-account .cardbtns .cardbtn { flex: 1 1 0; width: auto; margin-top: 0; padding: 15px 8px; } .melt-account .cardbtn.module { background: #fff; border: 1.5px solid var(--melt-blush-deep); color: var(--melt-warm-grey); } .melt-account .cardbtn.module:hover { color: var(--melt-accent); border-color: var(--melt-accent); filter: none; } /* ---------- TOOLS ---------- */ .melt-account .tools { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; max-width: 800px; } @media (max-width: 600px) { .melt-account .tools { grid-template-columns: 1fr; } } .melt-account .tool { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--melt-blush-deep); border-radius: 14px; padding: 18px 20px; color: var(--melt-charcoal); transition: transform .15s ease; } .melt-account .tool:hover { transform: translateY(-2px); } .melt-account .tool-img { display: block; width: 100px; height: 100px; border-radius: 50%; background: var(--melt-blush); flex-shrink: 0; overflow: hidden; } .melt-account .tool-img img { width: 100%; height: 100%; object-fit: cover; } .melt-account .tool b { display: block; font-size: 19px; font-weight: 700; margin-bottom: 2px; } .melt-account .tool span { font-size: 15px; color: var(--melt-warm-grey); } .melt-account .tool em { display: block; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--melt-accent); margin-top: 8px; } /* ---------- EMPTY / NO MEMBERSHIP ---------- */ .melt-account .melt-empty { background: #fff; border: 1px solid var(--melt-blush-deep); border-radius: 16px; padding: 40px 36px; margin-bottom: 34px; } .melt-account .melt-empty .t-lead { margin-bottom: 20px; } /* =========================================================================== * ENDPOINT SKIN (DEFECT 1, 2026-08-07) * =========================================================================== * * Everything above this line styles the DASHBOARD. Everything below styles the * other fifteen account endpoints, which until commit 3da6055 rendered raw * WooCommerce markup because .melt-account only existed on the dashboard. * * SPECIFICITY: these rules use the `#top #wrap_all .melt-account` prefix * (2 ids + 1 class), not a bare `.melt-account`. That is not decoration and it * is not cargo-culted. melt-member.css is enqueued BEFORE avia-merged-styles, * so on any specificity TIE Enfold wins on load order. Enfold styles WooCommerce * tables, forms, buttons and notices with `#top .woocommerce ...` selectors * (1 id + 1 class + element), which a bare `.melt-account table` would lose to. * The same problem was already diagnosed once on this file for the H1 (see the * long comment above the .t-display rule). Same fix, applied consistently. * * SELECTORS WERE READ, NOT GUESSED. Every class name below came from fetching * the nine endpoints on staging 2026-08-07 and dumping the real DOM skeleton * inside .woocommerce-MyAccount-content. Where an endpoint was an empty state * on the reading account (test-cust has no orders), that is flagged inline. * ------------------------------------------------------------------------ */ /* ---------- SHARED PANEL LOOK ---------- * One surface treatment reused by every endpoint so the member world reads as * one place: white card, blush hairline, 16px radius. Same as .melt-empty. */ #top #wrap_all .melt-account .woocommerce-MyAccount-content { width: 100%; float: none; } #top #wrap_all .melt-account .woocommerce::after { content: ""; display: table; clear: both; } /* ---------- ACCOUNT NAVIGATION ---------- (see the note below; block removed) */ /* ---------- ACCOUNT NAVIGATION ---------- * * THE NAV STAYS HIDDEN. Do not turn it back on without Denis asking for it. * * The account nav is hidden SITEWIDE, and has been for a long time, by a rule in * the child theme's own style.css: * * .woocommerce-MyAccount-navigation { display: none; } * body .woocommerce-MyAccount-navigation { display: none !important; } (<=768px) * * On 2026-08-07 that rule was overridden inside .melt-account and the nav was * rendered as a horizontal pill row. The reasoning was that customers otherwise * have no route to their orders, subscriptions, addresses, payment methods or * coupons, since the Enfold header menu does not link to any of them. * * REVERTED THE SAME DAY, on Denis's call. Eleven pills stacked three rows deep * above the content, dominating the top of every member page including the * dashboard. The navigational gap is real, but a pill wall is not the answer to * it, and the dashboard is not the place to solve it. * * The gap is now logged as an open UX question, not a CSS one. If it gets * solved it should be solved deliberately, probably in the header or as a small * quiet link set, and not by unhiding a WooCommerce default. * * NOTHING REPLACES THIS BLOCK. The sitewide rule in style.css does the hiding, * exactly as it did before this session. style.css was never edited. */ /* ---------- PAGE TITLES AND LINKS ON ENDPOINTS ---------- * * CHILD COMBINATORS AND NAMED CONTAINERS ONLY. THIS IS LOAD-BEARING. * * The first version of this block used descendant selectors: * .woocommerce-MyAccount-content h1 / h2 / p / a * and it silently WRECKED THE DASHBOARD, because the dashboard renders inside * .woocommerce-MyAccount-content too. Those selectors are 2 ids + 2 classes + * an element, which outranks the dashboard's own .melt-account .t-display * (2 ids + 2 classes), so they won every time. * * Measured damage before the fix, on the live page: * .t-display 52px -> 40px * .t-h2 34px -> 28px * .t-lead 21px warm-grey -> 18px charcoal * .hero .btn white text -> rgb(214,69,112) ON rgb(214,69,112). Pink on pink. * The hero call to action was INVISIBLE. * .card-t, .tool, .btn-ghost charcoal/grey -> accent pink * * The fix is structural, not a specificity arms race. The dashboard wraps all of * its markup in
elements, so a CHILD combinator from the content div * physically cannot reach it. Endpoint markup puts its headings and paragraphs as * direct children, or inside named WooCommerce containers, which are listed out. * * RULE FOR ANYONE ADDING TO THIS FILE: never write a bare element selector under * .woocommerce-MyAccount-content. Use `>` or name the WooCommerce container. */ #top #wrap_all .melt-account .woocommerce-MyAccount-content > h1 { font-family: "Playfair Display", Georgia, serif; font-size: 40px; font-weight: 400; line-height: 1.12; text-transform: none; letter-spacing: normal; color: var(--melt-charcoal); margin: 0 0 20px; } #top #wrap_all .melt-account .woocommerce-MyAccount-content > h2, #top #wrap_all .melt-account .woocommerce-Address-title h2, #top #wrap_all .melt-account .woocommerce-order-details h2, #top #wrap_all .melt-account .woocommerce-customer-details h2, #top #wrap_all .melt-account .woocommerce-order-downloads h2, #top #wrap_all .melt-account .subscription-details h2 { font-family: "Playfair Display", Georgia, serif; font-size: 28px; font-weight: 400; line-height: 1.2; text-transform: none; letter-spacing: normal; color: var(--melt-charcoal); margin: 0 0 16px; } #top #wrap_all .melt-account .woocommerce-MyAccount-content > h3, #top #wrap_all .melt-account .woocommerce-MyAccount-content fieldset legend { font-family: Lato, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; text-transform: none; letter-spacing: normal; color: var(--melt-charcoal); margin: 0 0 14px; } #top #wrap_all .melt-account .woocommerce-MyAccount-content > p { font-size: 18px; line-height: 1.7; color: var(--melt-charcoal); } #top #wrap_all .melt-account .woocommerce-MyAccount-content > p a, #top #wrap_all .melt-account .woocommerce-info a:not(.button), #top #wrap_all .melt-account .woocommerce-message a:not(.button), #top #wrap_all .melt-account .woocommerce-Message a:not(.button), #top #wrap_all .melt-account table.shop_table a:not(.button), #top #wrap_all .melt-account .woocommerce-Address-title a, #top #wrap_all .melt-account .woocommerce-customer-details a, #top #wrap_all .melt-account .woocommerce-LostPassword a, #top #wrap_all .melt-account .lost_password a { color: var(--melt-accent); } #top #wrap_all .melt-account .woocommerce-MyAccount-content > p a:hover, #top #wrap_all .melt-account table.shop_table a:not(.button):hover, #top #wrap_all .melt-account .woocommerce-Address-title a:hover { color: var(--melt-wine); } /* ---------- NOTICES AND EMPTY STATES ---------- * VERIFIED empty states on test-cust 2026-08-07: /orders/ and /downloads/ emit * div.woocommerce-info wrapping a .button; /wc-smart-coupons/ emits a bare * div.woocommerce-Message--info; /subscriptions/ emits * p.no_subscriptions.woocommerce-message; /payment-methods/ emits a * ul.woocommerce-error alongside its info block. All five get one treatment. */ #top #wrap_all .melt-account .woocommerce-info, #top #wrap_all .melt-account .woocommerce-message, #top #wrap_all .melt-account .woocommerce-Message, #top #wrap_all .melt-account .woocommerce-error, #top #wrap_all .melt-account p.no_subscriptions { background: #fff; border: 1px solid var(--melt-blush-deep); border-left: 4px solid var(--melt-accent); border-radius: 0 14px 14px 0; padding: 28px 30px; margin: 0 0 26px; font-size: 18px; line-height: 1.6; color: var(--melt-charcoal); list-style: none; display: block; overflow: hidden; } #top #wrap_all .melt-account .woocommerce-error { border-left-color: var(--melt-wine); } #top #wrap_all .melt-account .woocommerce-info::before, #top #wrap_all .melt-account .woocommerce-message::before, #top #wrap_all .melt-account .woocommerce-Message::before, #top #wrap_all .melt-account .woocommerce-error::before, #top #wrap_all .melt-account p.no_subscriptions::before { content: none; display: none; } #top #wrap_all .melt-account .woocommerce-error li { list-style: none; margin: 0; padding: 0; } #top #wrap_all .melt-account .woocommerce-notices-wrapper:empty { display: none; } /* The CTA inside an empty state sits FIRST in WooCommerce's markup, before the * message text (verified: div.woocommerce-info > a.button, then a text node). * Left to itself it floated LEFT here, so the button rendered before the * sentence and read as gibberish: "BROWSE PRODUCTS No order has been made yet." * Floating it right restores reading order and matches WooCommerce's own intent. * The parent already carries overflow:hidden so the float cannot escape. */ #top #wrap_all .melt-account .woocommerce-info .button, #top #wrap_all .melt-account .woocommerce-message .button, #top #wrap_all .melt-account .woocommerce-Message .button, #top #wrap_all .melt-account p.no_subscriptions .button { float: right; margin: 0 0 0 26px; } @media (max-width: 768px) { #top #wrap_all .melt-account .woocommerce-info .button, #top #wrap_all .melt-account .woocommerce-message .button, #top #wrap_all .melt-account .woocommerce-Message .button, #top #wrap_all .melt-account p.no_subscriptions .button { float: none; display: block; margin: 20px 0 0; } } /* The call-to-action inside an empty state. WooCommerce marks it .button and * sometimes .wc-forward; both get the melt primary button. */ #top #wrap_all .melt-account .woocommerce-MyAccount-content .button, #top #wrap_all .melt-account .woocommerce-MyAccount-content .woocommerce-Button, #top #wrap_all .melt-account .woocommerce-MyAccount-content button[type="submit"], #top #wrap_all .melt-account .woocommerce-MyAccount-content input[type="submit"] { display: inline-block; background: var(--melt-accent); color: #fff; font-family: Lato, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; padding: 16px 30px; border: 0; border-radius: 6px; box-shadow: 0 4px 14px rgba(214,69,112,.3); text-decoration: none; cursor: pointer; transition: filter .18s ease, transform .18s ease; width: auto; } #top #wrap_all .melt-account .woocommerce-MyAccount-content .button:hover, #top #wrap_all .melt-account .woocommerce-MyAccount-content .woocommerce-Button:hover, #top #wrap_all .melt-account .woocommerce-MyAccount-content button[type="submit"]:hover, #top #wrap_all .melt-account .woocommerce-MyAccount-content input[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; } /* Secondary actions inside tables (cancel, change payment, view) must not all * shout in accent pink. Ghost them. */ #top #wrap_all .melt-account td.order-actions .button, #top #wrap_all .melt-account td.membership-actions .button, #top #wrap_all .melt-account td.subscription-actions .button, #top #wrap_all .melt-account .woocommerce-MyAccount-content .button.cancel, #top #wrap_all .melt-account .woocommerce-MyAccount-content .button.delete { background: #fff; color: var(--melt-warm-grey); border: 1.5px solid var(--melt-blush-deep); box-shadow: none; padding: 11px 18px; margin: 3px 6px 3px 0; } #top #wrap_all .melt-account td.order-actions .button:hover, #top #wrap_all .melt-account td.membership-actions .button:hover, #top #wrap_all .melt-account td.subscription-actions .button:hover, #top #wrap_all .melt-account .woocommerce-MyAccount-content .button.cancel:hover, #top #wrap_all .melt-account .woocommerce-MyAccount-content .button.delete:hover { color: var(--melt-accent); border-color: var(--melt-accent); } /* ---------- TABLES ---------- * Covers orders, subscriptions, downloads, members-area (VERIFIED markup: * table.shop_table.shop_table_responsive.my_account_orders.my_account_memberships * with thead th.membership-* and tbody td.membership-*) and the order/ * subscription detail tables. One treatment, because they are all shop_table. */ #top #wrap_all .melt-account table.shop_table, #top #wrap_all .melt-account table.woocommerce-orders-table, #top #wrap_all .melt-account table.woocommerce-table { width: 100%; background: #fff; border: 1px solid var(--melt-blush-deep); border-radius: 16px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin: 0 0 34px; font-size: 16px; color: var(--melt-charcoal); } #top #wrap_all .melt-account table.shop_table th, #top #wrap_all .melt-account table.woocommerce-table th { background: var(--melt-blush); font-family: Lato, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--melt-warm-grey); text-align: left; padding: 16px 20px; border: 0; } #top #wrap_all .melt-account table.shop_table td, #top #wrap_all .melt-account table.woocommerce-table td { padding: 20px; border: 0; border-top: 1px solid var(--melt-blush-deep); vertical-align: middle; font-size: 16px; line-height: 1.5; color: var(--melt-charcoal); background: transparent; } #top #wrap_all .melt-account table.shop_table tbody tr:first-child td { border-top: 0; } #top #wrap_all .melt-account table.shop_table tbody tr:hover td { background: rgba(245,232,224,.35); } #top #wrap_all .melt-account table.shop_table tfoot th, #top #wrap_all .melt-account table.shop_table tfoot td { background: #fff; border-top: 1px solid var(--melt-blush-deep); padding: 16px 20px; font-size: 16px; } #top #wrap_all .melt-account table.shop_table tfoot tr:last-child th, #top #wrap_all .melt-account table.shop_table tfoot tr:last-child td { font-weight: 700; color: var(--melt-wine); font-size: 18px; } /* Status cell reads as a chip, matching the design standard's .hl-chip. */ #top #wrap_all .melt-account td.membership-status span, #top #wrap_all .melt-account td.subscription-status, #top #wrap_all .melt-account td.woocommerce-orders-table__cell-order-status { font-weight: 700; color: var(--melt-wine); } /* ---------- TABLES ON MOBILE ---------- * WooCommerce's .shop_table_responsive stacks rows and exposes the column name * through the td's data-title attribute. Implemented here rather than relying * on woocommerce-layout.css, so the stacked view carries melt type and spacing * and cannot produce a horizontal scroll. */ @media (max-width: 768px) { #top #wrap_all .melt-account table.shop_table, #top #wrap_all .melt-account table.woocommerce-table { border-radius: 14px; font-size: 15px; } #top #wrap_all .melt-account table.shop_table_responsive thead { display: none; } #top #wrap_all .melt-account table.shop_table_responsive tbody tr { display: block; border-top: 1px solid var(--melt-blush-deep); padding: 6px 0; } #top #wrap_all .melt-account table.shop_table_responsive tbody tr:first-child { border-top: 0; } #top #wrap_all .melt-account table.shop_table_responsive tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border: 0; padding: 9px 18px; text-align: right; } #top #wrap_all .melt-account table.shop_table_responsive tbody td::before { content: attr(data-title); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--melt-warm-grey); text-align: left; flex: 0 0 auto; } #top #wrap_all .melt-account table.shop_table_responsive tbody td.order-actions, #top #wrap_all .melt-account table.shop_table_responsive tbody td.membership-actions, #top #wrap_all .melt-account table.shop_table_responsive tbody td.subscription-actions { display: block; text-align: left; padding-bottom: 16px; } #top #wrap_all .melt-account table.shop_table_responsive tbody td.order-actions::before, #top #wrap_all .melt-account table.shop_table_responsive tbody td.membership-actions::before, #top #wrap_all .melt-account table.shop_table_responsive tbody td.subscription-actions::before { content: none; } } /* ---------- ORDER / SUBSCRIPTION DETAIL ---------- */ #top #wrap_all .melt-account .woocommerce-order-details, #top #wrap_all .melt-account .woocommerce-customer-details, #top #wrap_all .melt-account .subscription-details, #top #wrap_all .melt-account .woocommerce-order-downloads { margin: 0 0 34px; } #top #wrap_all .melt-account ul.order_details { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 30px; padding: 26px 28px; background: #fff; border: 1px solid var(--melt-blush-deep); border-radius: 16px; } #top #wrap_all .melt-account ul.order_details li { list-style: none; flex: 1 1 170px; margin: 0; padding: 0; border: 0; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--melt-warm-grey); } #top #wrap_all .melt-account ul.order_details li strong { display: block; margin-top: 7px; font-family: Lato, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--melt-charcoal); } #top #wrap_all .melt-account .woocommerce-customer-details address { font-style: normal; font-size: 17px; line-height: 1.65; color: var(--melt-charcoal); background: #fff; border: 1px solid var(--melt-blush-deep); border-radius: 14px; padding: 22px 24px; } /* ---------- ADDRESSES (edit-address) ---------- * VERIFIED markup: div.u-columns.woocommerce-Addresses.col2-set.addresses * > div.u-column1.col-1.woocommerce-Address > header.woocommerce-Address-title * > h2 + a.edit, then
. */ #top #wrap_all .melt-account .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin: 8px 0 34px; width: 100%; } #top #wrap_all .melt-account .woocommerce-Address { float: none; width: auto; background: #fff; border: 1px solid var(--melt-blush-deep); border-radius: 16px; padding: 28px 30px; } #top #wrap_all .melt-account .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; } #top #wrap_all .melt-account .woocommerce-Address-title h2 { margin: 0; } #top #wrap_all .melt-account .woocommerce-Address-title a.edit { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--melt-accent); text-decoration: underline; flex-shrink: 0; } #top #wrap_all .melt-account .woocommerce-Address address { font-style: normal; font-size: 17px; line-height: 1.7; color: var(--melt-warm-grey); } @media (max-width: 768px) { #top #wrap_all .melt-account .woocommerce-Addresses { grid-template-columns: 1fr; gap: 20px; } #top #wrap_all .melt-account .woocommerce-Address { padding: 24px 22px; } } /* ---------- FORMS ---------- * Covers edit-account (VERIFIED: p.woocommerce-form-row > label + * input.woocommerce-Input, plus a fieldset/legend password block), edit-address * fields, the logged-out login form and forgot-password. * * The form itself becomes the white panel so a bare form never floats on cream. * * EXCEPT edit-account. 2026-08-11: there the card moved OFF the form and onto * an inner .melt-formcard, opened and closed by hooks in functions.php, so the * Save button can sit BELOW the card exactly like Add payment method does on * the truth page. The form is left as a bare positioning box: no background, * no border, no padding, so its left edge IS the content's left edge and the * button lands on x786 like the truth page button. Keep the two in step. */ #top #wrap_all .melt-account .melt-formcard, #top #wrap_all .melt-account form.woocommerce-address-fields, #top #wrap_all .melt-account form.woocommerce-form-login, #top #wrap_all .melt-account form.woocommerce-ResetPassword, #top #wrap_all .melt-account form.lost_reset_password { background: #fff; border: 1px solid var(--melt-blush-deep); border-radius: 16px; padding: 34px 36px; margin: 0 0 34px; max-width: 640px; width: 100%; } /* The edit-account form is now a plain box. The card is the child above. */ #top #wrap_all .melt-account form.woocommerce-EditAccountForm, #top #wrap_all .melt-account form.edit-account { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 34px; max-width: 640px; width: 100%; } #top #wrap_all .melt-account form.edit-account > .melt-formcard { margin: 0 0 22px; } #top #wrap_all .melt-account form.edit-account > p { margin: 0; } #top #wrap_all .melt-account .form-row, #top #wrap_all .melt-account p.woocommerce-form-row { display: block; float: none; width: 100%; padding: 0; margin: 0 0 20px; } #top #wrap_all .melt-account .form-row label, #top #wrap_all .melt-account .woocommerce-form-row label { display: block; margin-bottom: 8px; font-family: Lato, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--melt-warm-grey); } #top #wrap_all .melt-account .form-row label .required, #top #wrap_all .melt-account .woocommerce-form-row label .required { color: var(--melt-accent); border: 0; text-decoration: none; } #top #wrap_all .melt-account .woocommerce-MyAccount-content input[type="text"], #top #wrap_all .melt-account .woocommerce-MyAccount-content input[type="email"], #top #wrap_all .melt-account .woocommerce-MyAccount-content input[type="tel"], #top #wrap_all .melt-account .woocommerce-MyAccount-content input[type="password"], #top #wrap_all .melt-account .woocommerce-MyAccount-content select, #top #wrap_all .melt-account .woocommerce-MyAccount-content textarea, #top #wrap_all .melt-account form.woocommerce-form-login input[type="text"], #top #wrap_all .melt-account form.woocommerce-form-login input[type="password"], /* THE RESET FORMS WERE MISSING FROM THIS LIST AND THEIR FIELDS WERE RAW. * Measured 2026-08-11 on /my-account/forgot-password/: 36px tall, 12px text, * 8px 6px padding, white, a 1px #E1E1E1 border and square corners, against the * login field's 52px, 18px text, 15px 16px padding, cream, 1.5px blush and an * 8px radius. Nothing was overriding it: the selector simply never named these * two forms, so the browser default showed through. * THIS IS THE THIRD TIME the same shape of bug has bitten these two pages. * Rules scoped to .woocommerce-MyAccount-content or to the login form alone * never reach the reset forms. If a logged-out rule is added anywhere in this * file, all four selectors below have to be on it. */ #top #wrap_all .melt-account form.lost_reset_password input[type="text"], #top #wrap_all .melt-account form.lost_reset_password input[type="password"], #top #wrap_all .melt-account form.woocommerce-ResetPassword input[type="text"], #top #wrap_all .melt-account form.woocommerce-ResetPassword input[type="password"] { display: block; width: 100%; max-width: 100%; background: var(--melt-cream); border: 1.5px solid var(--melt-blush-deep); border-radius: 8px; padding: 15px 16px; font-family: Lato, sans-serif; font-size: 18px; line-height: 1.4; color: var(--melt-charcoal); box-shadow: none; transition: border-color .15s ease, background .15s ease; } #top #wrap_all .melt-account .woocommerce-MyAccount-content input:focus, #top #wrap_all .melt-account .woocommerce-MyAccount-content select:focus, #top #wrap_all .melt-account .woocommerce-MyAccount-content textarea:focus, #top #wrap_all .melt-account form.woocommerce-form-login input:focus, #top #wrap_all .melt-account form.lost_reset_password input:focus, #top #wrap_all .melt-account form.woocommerce-ResetPassword input:focus { border-color: var(--melt-accent); background: #fff; outline: none; } #top #wrap_all .melt-account .woocommerce-MyAccount-content fieldset { /* Divider drawn as a pseudo-element, NOT as the fieldset's own border-top. * A real border-top is interrupted by the , which leaves a stray line * hanging off the right of "Password change" and reads as a rendering bug. * Measured: the legend shrink-wraps to 170px, so 170px of the rule vanished * and the rest did not. The pseudo-element runs edge to edge above it. */ border: 0; position: relative; margin: 30px 0 0; padding: 28px 0 0; } #top #wrap_all .melt-account .woocommerce-MyAccount-content fieldset::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--melt-blush-deep); } #top #wrap_all .melt-account .woocommerce-MyAccount-content fieldset legend { display: block; width: 100%; padding: 0; margin-bottom: 18px; } /* ---------- PASSWORD SHOW/HIDE TOGGLE ---------- * WooCommerce wraps every password field in span.password-input and appends * span.show-password-input as the eye toggle. Both ship as static inline * elements and rely on WooCommerce's own CSS to position them. Measured on * staging after the first skin deploy: .password-input computed display:inline * and .show-password-input computed position:static at 16x6px, so the toggle * fell BELOW each password field as a small grey stub. Three of them, one per * password row. Positioned properly here. */ #top #wrap_all .melt-account .woocommerce-MyAccount-content .password-input { display: block; position: relative; width: 100%; } #top #wrap_all .melt-account .woocommerce-MyAccount-content .password-input input[type="password"], #top #wrap_all .melt-account .woocommerce-MyAccount-content .password-input input[type="text"] { padding-right: 52px; } #top #wrap_all .melt-account .woocommerce-MyAccount-content .show-password-input { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 24px; height: 24px; margin: 0; padding: 0; cursor: pointer; opacity: .5; background-position: center center; background-repeat: no-repeat; transition: opacity .15s ease; } #top #wrap_all .melt-account .woocommerce-MyAccount-content .show-password-input:hover, #top #wrap_all .melt-account .woocommerce-MyAccount-content .show-password-input.display-password { opacity: 1; } #top #wrap_all .melt-account .woocommerce-MyAccount-content span em, #top #wrap_all .melt-account .woocommerce-MyAccount-content .description { display: block; margin-top: 7px; font-style: normal; font-size: 15px; color: var(--melt-light-grey); } #top #wrap_all .melt-account .woocommerce-form-login__rememberme, #top #wrap_all .melt-account .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--melt-warm-grey); } #top #wrap_all .melt-account .woocommerce-form-login__rememberme input, #top #wrap_all .melt-account .woocommerce-form__input-checkbox { width: auto; margin: 0; } #top #wrap_all .melt-account .woocommerce-LostPassword, #top #wrap_all .melt-account .lost_password { margin: 18px 0 0; font-size: 16px; } #top #wrap_all .melt-account .clear { clear: both; } @media (max-width: 768px) { #top #wrap_all .melt-account .melt-formcard, #top #wrap_all .melt-account form.woocommerce-address-fields, #top #wrap_all .melt-account form.woocommerce-form-login, #top #wrap_all .melt-account form.woocommerce-ResetPassword, #top #wrap_all .melt-account form.lost_reset_password { padding: 26px 22px; border-radius: 14px; } #top #wrap_all .melt-account form.woocommerce-EditAccountForm, #top #wrap_all .melt-account form.edit-account { padding: 0; } #top #wrap_all .melt-account .woocommerce-MyAccount-content .button, #top #wrap_all .melt-account .woocommerce-MyAccount-content button[type="submit"], #top #wrap_all .melt-account .woocommerce-MyAccount-content input[type="submit"] { width: 100%; text-align: center; } } /* ---------- PAYMENT METHODS ---------- */ #top #wrap_all .melt-account .woocommerce-MyAccount-paymentMethods { margin-bottom: 26px; } #top #wrap_all .melt-account .payment-method-actions .button { margin: 3px 6px 3px 0; } /* LOGIN CARD LAYOUT (2026-08-11) ---------- * Three faults, all MEASURED off the rendered page after the button shipped * looking wrong. Recorded because each had a different cause and the first * diagnosis of the third was flat wrong. * * 1. THE TWO BUTTONS WERE 4px OUT. Log in sits inside p.form-row, Lost your * password is a SEPARATE sibling p. Two different parents, so no amount of * vertical-align on the buttons themselves could line them up. Fixed by * making the FORM a flex container with align-items:flex-end, which lines * the bottom of both rows up regardless of what sits above them. The two * text rows take a full 100 percent basis so they still stack. * * TWO FURTHER PASSES WERE NEEDED, both found by measuring after deploy: * (a) the button row still computed 566px wide, because the .form-row rule * earlier in this file sets width:100% and flex-basis:auto resolves to * it. So the row filled the line and pushed the second button under it. * width:auto is the load-bearing declaration; do not delete it as * redundant. * (b) align-items on the container was not reaching these two items, which * ended up centred in the line, 16px out. Each carries an explicit * align-self:flex-end now. * (c) IT WAS STILL 16px OUT AFTER THAT, and the reason is the one that * matters. WooCommerce ships * .woocommerce-LostPassword{position:relative;top:-16px} * to lift that link up next to a submit button in its own default * layout. Computed on the page: position relative, top -16px. So every * alignment declaration above was CORRECT and was being cancelled by a * relative offset afterwards. Three passes were spent adjusting flex * properties that were already doing their job. * position:static kills it. Do not remove that line thinking the flex * rules cover it: they do not, they run before it. * * THE LESSON, since it cost three deploys: when a box will not move, * check whether something is MOVING IT, not just whether your rule applies. * Computed align-self said flex-end on both items the whole time. * * 2. REMEMBER ME COMPUTED display:block, NOT flex. The existing rule further * down this file sets display:flex with a 9px gap, and the gap and * align-items were applying while display was being overridden by a more * specific rule elsewhere. So the checkbox sat jammed against its label. * Re-declared here at 2 ids + 3 classes + element, which outranks it * without !important. * * 3. THE STRAY GREY STUB under the password field. I told Denis this was * because the login form does not wrap passwords in span.password-input. * THAT WAS WRONG: it does. The real cause is that the working toggle rules * are scoped under .woocommerce-MyAccount-content, and logged out that * wrapper DOES NOT EXIST, which this file already documents in the * logged-out section below. So the toggle fell back to static, 16 by 6px, * with no icon. Re-scoped here off the form itself. The eye is drawn as a * CSS mask because WooCommerce's own icon sheet is not loaded on this page * either, which is why the stub had no background image at all. */ #top #wrap_all .melt-account form.woocommerce-form-login { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 12px; } #top #wrap_all .melt-account form.woocommerce-form-login > p.woocommerce-form-row { flex: 0 0 100%; } /* width:auto IS THE LOAD-BEARING DECLARATION HERE. The .form-row rule earlier * in this file sets width:100%. flex-basis:auto then resolves to that width, so * `flex: 0 0 auto` alone left this row 566px wide, filling the line and pushing * Lost your password onto the next one where it overlapped Log in. Measured: * row width 566 in a 566 container. Shrink it to its content and both buttons * share the line. */ /* display:contents DISSOLVES THE WRAPPER, AND THAT IS THE POINT. * Measured: the row was 132px wide because the Remember me label inside it is * 132px, while the Log in button is only 112px. So the row carried 20px of * dead space to the right of the button, and that 20px plus the 12px gap read * as a 32px gap. The buttons were aligned but not flush. * display:contents removes the p from the box tree entirely, so Remember me, * the hidden nonce inputs and the button all become DIRECT flex children of * the form. Remember me then takes a full-width line of its own, and the * button sits beside Lost your password with exactly the container's gap and * nothing in between. * * THE LAST 20px WAS THE BUTTON'S OWN MARGIN. After display:contents the gap * was still 32 against a 12px column-gap. Measured the button rather than the * container and it carried margin:0 20px 0 0 from the theme's button styling. * 20 plus 12 is the 32. margin:0 on the button is what finally makes the gap * equal the gap. Four separate causes stacked on one 32px space, each one * hiding the next: row width, relative offset, wrapper dead space, button * margin. Every one of them was found by measuring, none by reading the CSS. */ #top #wrap_all .melt-account form.woocommerce-form-login > p.form-row:not(.woocommerce-form-row) { display: contents; } #top #wrap_all .melt-account form.woocommerce-form-login > p.woocommerce-LostPassword, #top #wrap_all .melt-account form.woocommerce-form-login > p.lost_password { flex: 0 0 auto; width: auto; margin: 0; padding: 0; align-self: flex-end; position: static; top: auto; } #top #wrap_all .melt-account form.woocommerce-form-login button[type="submit"] { flex: 0 0 auto; align-self: flex-end; margin: 0; float: none; } #top #wrap_all .melt-account form.woocommerce-form-login label.woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 9px; flex: 0 0 100%; margin: 0 0 16px; font-size: 16px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--melt-warm-grey); } #top #wrap_all .melt-account form.woocommerce-form-login label.woocommerce-form-login__rememberme input { width: auto; margin: 0; flex: 0 0 auto; } #top #wrap_all .melt-account form.woocommerce-form-login .password-input { display: block; position: relative; width: 100%; } #top #wrap_all .melt-account form.woocommerce-form-login .password-input input { padding-right: 52px; } #top #wrap_all .melt-account form.woocommerce-form-login .show-password-input { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 22px; height: 22px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; opacity: .55; transition: opacity .15s ease; } #top #wrap_all .melt-account form.woocommerce-form-login .show-password-input::before { content: ""; display: block; width: 22px; height: 22px; background: var(--melt-warm-grey); -webkit-mask: url("data:image/svg+xml;utf8,") center / 22px 22px no-repeat; mask: url("data:image/svg+xml;utf8,") center / 22px 22px no-repeat; } #top #wrap_all .melt-account form.woocommerce-form-login .show-password-input:hover, #top #wrap_all .melt-account form.woocommerce-form-login .show-password-input.display-password { opacity: 1; } /* LOST YOUR PASSWORD IS A BUTTON (2026-08-11, Denis) ---------- * It was a plain 16px accent-pink text link sitting beside the Log in button, * competing with it while looking like body copy. Denis: make it a button, * same button, contrasting colour, not pink. * * VALUES ARE COPIED FROM THE LOG IN BUTTON, read off the rendered page rather * than retyped from the rule: 14px, 700, letter-spacing .08em, uppercase, * line-height 1.2, padding 16px 30px, radius 6px, no border. Identical shape. * * COLOUR IS WINE, and it is not invented. Wine is already this system's * secondary filled button: .cardbtn.cont uses it on the library cards while * .cardbtn.start uses accent. So the login page inherits the same primary / * secondary pairing the member area already reads as, instead of introducing * a new colour. Shadow matches, recoloured to wine. * * The two sit on one row with the button first, which is the reading order * that matters: the primary action leads. */ #top #wrap_all .melt-account form.woocommerce-form-login .woocommerce-LostPassword, #top #wrap_all .melt-account form.woocommerce-form-login .lost_password { display: inline-block; margin: 0; vertical-align: middle; } #top #wrap_all .melt-account form.woocommerce-form-login .woocommerce-LostPassword a, #top #wrap_all .melt-account form.woocommerce-form-login .lost_password a { display: inline-block; background: var(--melt-wine); color: #fff; font-family: Lato, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; padding: 16px 30px; border: 0; border-radius: 6px; box-shadow: 0 4px 14px rgba(107,39,55,.3); text-decoration: none; cursor: pointer; width: auto; transition: filter .18s ease, transform .18s ease; } #top #wrap_all .melt-account form.woocommerce-form-login .woocommerce-LostPassword a:hover, #top #wrap_all .melt-account form.woocommerce-form-login .lost_password a:hover { filter: brightness(1.12); transform: translateY(-1px); color: #fff; } @media (max-width: 560px) { #top #wrap_all .melt-account form.woocommerce-form-login .woocommerce-LostPassword, #top #wrap_all .melt-account form.woocommerce-form-login .lost_password { display: block; margin: 12px 0 0; } #top #wrap_all .melt-account form.woocommerce-form-login .woocommerce-LostPassword a, #top #wrap_all .melt-account form.woocommerce-form-login .lost_password a { display: block; text-align: center; } } /* ---------- LOGGED-OUT LOGIN / FORGOT PASSWORD ---------- * Logged out, [woocommerce_my_account] renders form-login.php instead of * my-account.php, so there is no .woocommerce-MyAccount-content wrapper at all. * These rules therefore hang off .melt-account directly, which the standalone * template now provides on logged-out account URLs too. */ #top #wrap_all .melt-account .u-columns.col2-set#customer_login { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; width: 100%; } #top #wrap_all .melt-account #customer_login .col-1, #top #wrap_all .melt-account #customer_login .col-2 { float: none; width: auto; } #top #wrap_all .melt-account form.woocommerce-form-login h2, #top #wrap_all .melt-account #customer_login h2 { font-family: "Playfair Display", Georgia, serif; font-size: 34px; font-weight: 400; line-height: 1.2; text-transform: none; letter-spacing: normal; color: var(--melt-charcoal); margin: 0 0 18px; } #top #wrap_all .melt-account form.woocommerce-form-login label, #top #wrap_all .melt-account form.woocommerce-ResetPassword label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--melt-warm-grey); } #top #wrap_all .melt-account form.woocommerce-form-login button[type="submit"], #top #wrap_all .melt-account form.woocommerce-ResetPassword button[type="submit"], #top #wrap_all .melt-account form.lost_reset_password button[type="submit"] { display: inline-block; background: var(--melt-accent); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; padding: 16px 30px; border: 0; border-radius: 6px; box-shadow: 0 4px 14px rgba(214,69,112,.3); cursor: pointer; width: auto; } @media (max-width: 768px) { #top #wrap_all .melt-account .u-columns.col2-set#customer_login { grid-template-columns: 1fr; gap: 22px; } } /* ---------- SHORT ENDPOINTS MUST NOT EXPOSE THE DARK PAGE BACKGROUND ---------- * Measured on /orders/ (an empty state, so a very short page): the document was * exactly viewport height and everything below the footer socket rendered * rgb(51,51,51), because that is the computed background of . .melt-page * is cream and #main is white, but neither was tall enough to cover the fold. * * The dashboard never showed this because it is long. It is not caused by the * wrapper change; the wrapper change simply gave the short endpoints a melt skin * worth looking at, which made the dark band obvious. * * Fixed by making the member page itself fill the fold. 150px is the fixed * header plus the socket strip. #melt-page exists only on member pages, so this * cannot leak onto the marketing site. */ body.melt-account-page #melt-page { min-height: calc(100vh - 150px); } /* ---------- NO HORIZONTAL SCROLL, ANYWHERE ---------- * Last line of defence. A single wide table or a long unbroken order number is * enough to push the whole document sideways on a phone, which is the one * failure the brief calls out by name. * * THERE IS DELIBERATELY NO `img` RULE HERE. DO NOT ADD ONE. * * This block originally carried: * #top #wrap_all .melt-account img { max-width: 100%; height: auto; } * and it broke four things on the dashboard, because 2 ids + 1 class + element * outranks every `.melt-account .something img` rule in this file. `height:auto` * overrode `height:100%` on: * * .resume-ring img the round "Start here" progress image. Stopped filling * its 150px circle, so the circle broke. This is the one * Denis spotted. * .hero-video img stopped filling the 16/9 frame. * .card-img img stopped filling the library card thumbnails. * .tool-img img stopped filling the 100px tool circles. * * It was also redundant. Line ~41 already sets * .melt-account img { max-width: 100%; display: block; } * which is all the overflow protection images need. The rule added nothing and * cost four broken components. * * GENERAL LESSON, same one as the typography block above: an id-prefixed rule in * the endpoint skin outranks every dashboard component rule in this file. Never * write a bare element selector under .melt-account here. Name the container. */ #top #wrap_all .melt-account { max-width: 100%; overflow-x: hidden; } #top #wrap_all .melt-account table { max-width: 100%; } #top #wrap_all .melt-account td, #top #wrap_all .melt-account th { word-break: break-word; overflow-wrap: anywhere; } @media (max-width: 480px) { .melt-wrap { padding-left: 16px; padding-right: 16px; } } /* ---------- LOGIN HIERARCHY FIX (2026-08-22, Denis) ---------- * Denis called the flaw from the live page: the wine lost-password BUTTON was * wider and darker than the pink LOG IN button, so the exception path outshone * the primary action. Mockup approved in-chat 2026-08-22. * LOG IN becomes the only button on the card, full width. * Lost your password stays VISIBLE per Denis (not grey): wine text link, * 15px, underlined, centred beneath the button. Same colour, no slab. * These rules come LAST in the file so they win the earlier wine-button * rules at equal specificity. */ #top #wrap_all .melt-account form.woocommerce-form-login button[type="submit"], #top #wrap_all .melt-account form.woocommerce-form-login .woocommerce-form-login__submit { display: block; width: 100%; float: none; margin: 0; } #top #wrap_all .melt-account form.woocommerce-form-login > p.woocommerce-LostPassword, #top #wrap_all .melt-account form.woocommerce-form-login > p.lost_password, #top #wrap_all .melt-account form.woocommerce-form-login .woocommerce-LostPassword, #top #wrap_all .melt-account form.woocommerce-form-login .lost_password { display: block; float: none; clear: both; flex: 0 0 100%; width: 100%; margin: 16px 0 0; text-align: center; } #top #wrap_all .melt-account form.woocommerce-form-login .woocommerce-LostPassword a, #top #wrap_all .melt-account form.woocommerce-form-login .lost_password a { display: inline; background: none; box-shadow: none; padding: 0; border: 0; border-radius: 0; font-size: 15px; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.5; color: var(--melt-wine); text-decoration: underline; text-underline-offset: 3px; } #top #wrap_all .melt-account form.woocommerce-form-login .woocommerce-LostPassword a:hover, #top #wrap_all .melt-account form.woocommerce-form-login .lost_password a:hover { filter: none; transform: none; color: var(--melt-accent); text-decoration: underline; }