/* ========================================================================== Helios Labs replica — MY ACCOUNT + AUTH Owner: tuju-account (P7). Depends on assets/css/hl-tokens.css for the design tokens (--hl-*), the chamfer helper (.hl-cham / .hl-cham-N), the type primitives (.hl-h1 .hl-eyebrow .hl-mono .hl-tnum) and .hl-btn / .hl-brackets / .hl-glow. Enqueue AFTER hl-tokens and AFTER woocommerce-general. Every colour below is a token measured from helioslabs.is (RECON §3): #050504 granite · #030302 deep · #100e0c layer · #f7f2e8 bone · #8c867c stone · #857f75 faint · #2a2723 hairline (EVERY border) · #fc5501 glacier · #ff6a1f button hover. Fallbacks are literal so this file still renders correctly if the token sheet fails to load. ========================================================================== */ /* -------------------------------------------------------------------------- 0. NEUTRALISE WOOCOMMERCE'S OWN LAYOUT + BUTTON CSS Two rules in Woo's stylesheets will silently wreck this page: (a) woocommerce-layout.css ships .woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%} Inside a CSS grid the float is ignored but the PERCENTAGE IS NOT, so the 264px sidebar track collapses to ~79px and the labels stack one letter per line. Override both properties, not just the float. (b) woocommerce.css skins buttons with .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button which computes at (0,2,1) and therefore BEATS a single class (0,2,0): our accent buttons would repaint as Woo's grey pill on every page whose carries `woocommerce`. The doubled class selectors below compute at (0,3,0)/(0,3,1) and win regardless of stylesheet load order. -------------------------------------------------------------------------- */ .woocommerce-account .woocommerce-MyAccount-navigation, .hl-account .woocommerce-MyAccount-navigation { float: none; width: auto; max-width: none; } .woocommerce-account .woocommerce-MyAccount-content, .hl-account .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; } .hl-account .hl-btn.hl-btn, .hl-auth .hl-btn.hl-btn, .hl-account a.button.button, .hl-account button.button.button, .hl-account input.button.button, .hl-auth a.button.button, .hl-auth button.button.button, .hl-auth input.button.button { display: inline-flex; align-items: center; justify-content: center; font-family: var(--hl-font-condensed, Anton, Impact, sans-serif); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; line-height: 1; border: 0; border-radius: 0; box-shadow: none; text-shadow: none; cursor: pointer; background-color: var(--hl-glacier, #fc5501); color: #000; padding: 12px 24px; font-size: 1.125rem; transition: background-color .2s, color .2s; } .hl-account .hl-btn.hl-btn:hover, .hl-auth .hl-btn.hl-btn:hover, .hl-account a.button.button:hover, .hl-account button.button.button:hover, .hl-auth a.button.button:hover, .hl-auth button.button.button:hover { background-color: var(--hl-glacier-hover, #ff6a1f); color: #000; } /* the small variant used by order-row actions and pagination */ .hl-account .hl-btn-sm.hl-btn-sm, .hl-account a.hl-btn-sm.hl-btn-sm { padding: 8px 14px; font-size: .95rem; background-color: transparent; color: var(--hl-glacier, #fc5501); border: 1px solid var(--hl-hairline, #2a2723); } .hl-account .hl-btn-sm.hl-btn-sm:hover, .hl-account a.hl-btn-sm.hl-btn-sm:hover { background-color: var(--hl-glacier, #fc5501); color: #000; border-color: var(--hl-glacier, #fc5501); } .hl-account .hl-btn-block.hl-btn-block, .hl-auth .hl-btn-block.hl-btn-block { width: 100%; } /* -------------------------------------------------------------------------- 1. ACCOUNT SHELL + GRID -------------------------------------------------------------------------- */ .hl-account { position: relative; isolation: isolate; overflow: hidden; background: var(--hl-granite, #050504); color: var(--hl-bone, #f7f2e8); font-family: var(--hl-font-body, Archivo, system-ui, sans-serif); padding: 48px var(--hl-pad-x, 24px) 96px; } .hl-account__glow { top: -14rem; right: -16rem; } .hl-account__layout { position: relative; margin: 0 auto; width: 100%; max-width: var(--hl-max-hplc, 1400px); display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 40px; align-items: start; } @media (max-width: 1023px) { .hl-account { padding-top: 32px; padding-bottom: 64px; } .hl-account__layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } } /* -------------------------------------------------------------------------- 2. SIDEBAR NAV — the LOCKED five items -------------------------------------------------------------------------- */ .hl-account-nav { position: relative; border: 1px solid var(--hl-hairline, #2a2723); background: var(--hl-layer, #100e0c); padding: 20px 0 18px; } .hl-account-nav__id { padding: 0 20px 18px; border-bottom: 1px solid var(--hl-hairline, #2a2723); } .hl-account-nav__id-label { margin: 0 0 6px; font-family: var(--hl-font-mono, monospace); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hl-faint, #857f75); } .hl-account-nav__id-value { margin: 0; font-family: var(--hl-font-mono, monospace); font-size: .78rem; line-height: 1.4; color: var(--hl-bone, #f7f2e8); overflow-wrap: anywhere; } .hl-account-nav ul { list-style: none; margin: 0; padding: 0; } .hl-account-nav li { margin: 0; } .hl-account-nav li + li { border-top: 1px solid var(--hl-hairline, #2a2723); } .hl-account-nav li a { display: grid; grid-template-columns: 26px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 15px 20px; color: var(--hl-bone-90, rgba(247, 242, 232, .9)); text-decoration: none; transition: background-color .2s, color .2s; } .hl-account-nav li a:hover { background: rgba(252, 85, 1, .08); color: var(--hl-bone, #f7f2e8); } .hl-account-nav__idx { font-family: var(--hl-font-mono, monospace); font-size: .68rem; letter-spacing: .08em; color: var(--hl-faint, #857f75); font-variant-numeric: tabular-nums; } /* KNOWN PRIOR DEFECT: account nav labels wrapping one word per line. nowrap + a fixed 264px track + a min-width:0 content track is the fix. */ .hl-account-nav__label { font-family: var(--hl-font-body, Archivo, system-ui, sans-serif); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hl-account-nav__arrow { font-size: .85rem; color: var(--hl-glacier, #fc5501); opacity: 0; transform: translateX(-3px); transition: opacity .2s, transform .2s; } .hl-account-nav li a:hover .hl-account-nav__arrow { opacity: 1; transform: translateX(0); } .hl-account-nav .is-active > a, .hl-account-nav li a[aria-current="page"] { background: rgba(252, 85, 1, .12); color: var(--hl-glacier, #fc5501); box-shadow: inset 3px 0 0 0 var(--hl-glacier, #fc5501); } .hl-account-nav .is-active > a .hl-account-nav__idx, .hl-account-nav li a[aria-current="page"] .hl-account-nav__idx { color: var(--hl-glacier, #fc5501); } .hl-account-nav .is-active > a .hl-account-nav__arrow, .hl-account-nav li a[aria-current="page"] .hl-account-nav__arrow { opacity: 1; transform: translateX(0); } .hl-account-nav__item--customer-logout a { color: var(--hl-stone, #8c867c); } .hl-account-nav__help { margin: 18px 20px 0; padding-top: 16px; border-top: 1px solid var(--hl-hairline, #2a2723); font-size: .8rem; line-height: 1.6; color: var(--hl-stone, #8c867c); } .hl-account-nav__help a { color: var(--hl-glacier, #fc5501); text-decoration: none; } .hl-account-nav__help a:hover { color: var(--hl-glacier-hover, #ff6a1f); } @media (max-width: 1023px) { .hl-account-nav ul { display: flex; flex-wrap: wrap; border-top: 1px solid var(--hl-hairline, #2a2723); } .hl-account-nav li { flex: 1 1 auto; } .hl-account-nav li + li { border-top: 0; border-left: 1px solid var(--hl-hairline, #2a2723); } .hl-account-nav li a { padding: 13px 14px; grid-template-columns: 22px minmax(0, 1fr); } .hl-account-nav__arrow { display: none; } } @media (max-width: 639px) { .hl-account-nav li { flex: 1 1 100%; } .hl-account-nav li + li { border-left: 0; border-top: 1px solid var(--hl-hairline, #2a2723); } } /* -------------------------------------------------------------------------- 3. CONTENT PANEL -------------------------------------------------------------------------- */ .hl-account__panel { position: relative; border: 1px solid var(--hl-hairline, #2a2723); background: var(--hl-card, #0c0c0c); padding: 32px 28px 36px; } @media (max-width: 639px) { .hl-account__panel { padding: 24px 18px 28px; } } .hl-account__panel-head { margin-bottom: 26px; } .hl-account__eyebrow { margin: 0 0 10px; } .hl-account__title { margin: 0; font-family: var(--hl-font-condensed, Anton, Impact, sans-serif); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3rem); line-height: .92; letter-spacing: .01em; text-transform: uppercase; color: var(--hl-glacier, #fc5501); } .hl-account__body { font-size: .95rem; line-height: 1.7; color: var(--hl-bone, #f7f2e8); } .hl-account__body a { color: var(--hl-glacier, #fc5501); text-decoration: none; } .hl-account__body a:hover { color: var(--hl-glacier-hover, #ff6a1f); } .hl-account__lede { margin: 0 0 22px; color: var(--hl-stone, #8c867c); font-size: .95rem; line-height: 1.7; } .hl-account__hello { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--hl-hairline, #2a2723); font-size: .92rem; color: var(--hl-stone, #8c867c); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; } .hl-account__hello strong { color: var(--hl-bone, #f7f2e8); font-weight: 600; } .hl-account__hello-out { font-family: var(--hl-font-mono, monospace); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; } .hl-account__shop { margin: 28px 0 0; } /* -------------------------------------------------------------------------- 4. DASHBOARD — stat tiles + quick links (NO POINTS: user-locked) -------------------------------------------------------------------------- */ .hl-account-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hl-hairline, #2a2723); border: 1px solid var(--hl-hairline, #2a2723); margin-bottom: 26px; } @media (max-width: 639px) { .hl-account-stats { grid-template-columns: minmax(0, 1fr); } } .hl-account-stat { background: var(--hl-panel, #0b0a0a); padding: 18px 18px 16px; min-width: 0; } .hl-account-stat__label { margin: 0 0 10px; font-family: var(--hl-font-mono, monospace); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hl-faint, #857f75); } .hl-account-stat__value { margin: 0; font-family: var(--hl-font-condensed, Anton, Impact, sans-serif); font-size: 1.6rem; line-height: 1; text-transform: uppercase; color: var(--hl-bone, #f7f2e8); } .hl-account-stat__value a { color: var(--hl-bone, #f7f2e8); } .hl-account-stat__value a:hover { color: var(--hl-glacier, #fc5501); } .hl-account-stat__meta { margin: 8px 0 0; font-family: var(--hl-font-mono, monospace); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hl-stone, #8c867c); overflow-wrap: anywhere; } .hl-account-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; } @media (max-width: 639px) { .hl-account-links { grid-template-columns: minmax(0, 1fr); } } .hl-account-link { display: block; border: 1px solid var(--hl-hairline, #2a2723); background: var(--hl-panel, #0b0a0a); padding: 16px 18px; text-decoration: none; transition: border-color .2s, background-color .2s; } .hl-account-link:hover { border-color: rgba(252, 85, 1, .45); background: rgba(252, 85, 1, .05); } .hl-account-link__label { display: block; font-family: var(--hl-font-condensed, Anton, Impact, sans-serif); font-size: 1.15rem; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--hl-bone, #f7f2e8); margin-bottom: 8px; } .hl-account-link:hover .hl-account-link__label { color: var(--hl-glacier, #fc5501); } .hl-account-link__desc { display: block; font-size: .84rem; line-height: 1.6; color: var(--hl-stone, #8c867c); } /* -------------------------------------------------------------------------- 5. ORDERS TABLE -------------------------------------------------------------------------- */ .hl-orders { width: 100%; border-collapse: collapse; margin: 0 0 8px; } .hl-orders th, .hl-orders td { text-align: left; vertical-align: middle; } .hl-orders thead th { padding: 0 14px 12px 0; border-bottom: 1px solid var(--hl-hairline, #2a2723); font-family: var(--hl-font-mono, monospace); font-weight: 400; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hl-faint, #857f75); } .hl-orders tbody th, .hl-orders tbody td { padding: 16px 14px 16px 0; border-bottom: 1px solid var(--hl-hairline, #2a2723); font-weight: 400; font-size: .88rem; color: var(--hl-bone, #f7f2e8); } .hl-orders tbody tr:hover th, .hl-orders tbody tr:hover td { background: rgba(252, 85, 1, .04); } .hl-orders__number { font-family: var(--hl-font-condensed, Anton, Impact, sans-serif); font-size: 1.1rem; letter-spacing: .02em; color: var(--hl-glacier, #fc5501); text-decoration: none; } .hl-orders__date, .hl-orders__total { font-family: var(--hl-font-mono, monospace); font-size: .78rem; color: var(--hl-stone, #8c867c); } .hl-orders__total { color: var(--hl-bone, #f7f2e8); } .hl-orders__status { display: inline-block; border: 1px solid var(--hl-hairline, #2a2723); padding: 4px 9px; font-family: var(--hl-font-mono, monospace); font-size: .6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--hl-stone, #8c867c); white-space: nowrap; } .hl-orders__status--on-hold, .hl-orders__status--pending { border-color: rgba(252, 85, 1, .5); color: var(--hl-glacier, #fc5501); } .hl-orders__status--processing, .hl-orders__status--completed { border-color: rgba(247, 242, 232, .35); color: var(--hl-bone, #f7f2e8); } .hl-orders__status--cancelled, .hl-orders__status--failed, .hl-orders__status--refunded { border-color: rgba(140, 134, 124, .4); color: var(--hl-faint, #857f75); } .woocommerce-orders-table__cell-order-actions { white-space: nowrap; } .woocommerce-orders-table__cell-order-actions a + a { margin-left: 8px; } .hl-orders__pager { display: flex; gap: 10px; margin-top: 22px; } /* stacked card view — Woo's own data-title attributes drive the labels */ @media (max-width: 720px) { .hl-orders thead { display: none; } .hl-orders, .hl-orders tbody, .hl-orders tr, .hl-orders th, .hl-orders td { display: block; width: 100%; } .hl-orders tr { border: 1px solid var(--hl-hairline, #2a2723); background: var(--hl-panel, #0b0a0a); margin-bottom: 12px; padding: 4px 14px 12px; } .hl-orders tbody th, .hl-orders tbody td { border-bottom: 0; padding: 9px 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; } .hl-orders tbody th::before, .hl-orders tbody td::before { content: attr(data-title); font-family: var(--hl-font-mono, monospace); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hl-faint, #857f75); flex: 0 0 auto; } .hl-orders tbody tr:hover th, .hl-orders tbody tr:hover td { background: transparent; } } /* empty state */ .hl-account-empty { border: 1px solid var(--hl-hairline, #2a2723); background: var(--hl-panel, #0b0a0a); padding: 34px 26px; text-align: center; } .hl-account-empty__title { margin: 0 0 10px; font-family: var(--hl-font-condensed, Anton, Impact, sans-serif); font-size: 1.6rem; line-height: 1; text-transform: uppercase; color: var(--hl-bone, #f7f2e8); } .hl-account-empty__body { margin: 0 0 20px; color: var(--hl-stone, #8c867c); font-size: .9rem; } /* -------------------------------------------------------------------------- 6. VIEW ORDER -------------------------------------------------------------------------- */ .hl-vieworder__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .hl-vieworder__num { margin: 0; font-family: var(--hl-font-condensed, Anton, Impact, sans-serif); font-size: 1.9rem; line-height: 1; color: var(--hl-bone, #f7f2e8); } .hl-vieworder__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hl-hairline, #2a2723); border: 1px solid var(--hl-hairline, #2a2723); margin: 0 0 22px; } @media (max-width: 720px) { .hl-vieworder__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .hl-vieworder__meta > div { background: var(--hl-panel, #0b0a0a); padding: 14px 16px; min-width: 0; } .hl-vieworder__meta dt { margin: 0 0 7px; font-family: var(--hl-font-mono, monospace); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hl-faint, #857f75); } .hl-vieworder__meta dd { margin: 0; font-size: .92rem; color: var(--hl-bone, #f7f2e8); overflow-wrap: anywhere; } .hl-vieworder__status-line { margin: 0 0 24px; color: var(--hl-stone, #8c867c); font-size: .9rem; } .hl-vieworder__status-line mark { background: none; color: var(--hl-bone, #f7f2e8); } .hl-vieworder__subhead { margin: 28px 0 12px; font-family: var(--hl-font-condensed, Anton, Impact, sans-serif); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; color: var(--hl-bone, #f7f2e8); } .hl-vieworder__notes { list-style: none; margin: 0 0 24px; padding: 0; } .hl-vieworder__notes li { border: 1px solid var(--hl-hairline, #2a2723); background: var(--hl-panel, #0b0a0a); padding: 14px 16px; margin-bottom: 10px; } .hl-vieworder__notes .meta { margin: 0 0 6px; font-family: var(--hl-font-mono, monospace); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hl-faint, #857f75); } .hl-vieworder__notes .description p { margin: 0; font-size: .9rem; color: var(--hl-stone, #8c867c); } .hl-vieworder__back { margin: 26px 0 0; } /* -------------------------------------------------------------------------- 6b. WOO CORE'S order-details.php / customer-details.php view-order.php hands off to `woocommerce_order_details_table`, which renders templates in woocommerce/order/ — a directory this agent does NOT own, so they are skinned here instead of overridden. Without these rules the inner table keeps Woo's body font, 1px grey borders and a rounded pill, and the "Order details" / "Billing address" headings render as generic

serif-ish bold, visibly off-brand against the condensed uppercase used everywhere else. -------------------------------------------------------------------------- / .hl-account .woocommerce-order-detailstitle, .hl-account .woocommerce-columntitle, .hl-account .woocommerce-columns > h2, .hl-account .woocommerce-order-details > h2 { margin: 28px 0 12px; font-family: var(--hl-font-condensed, Anton, Impact, sans-serif); font-weight: 400; font-size: 1.25rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; color: var(--hl-bone, #f7f2e8); } .hl-account .woocommerce-table--order-details, .hl-account table.shop_table.order_details { width: 100%; margin: 0 0 26px; border: 1px solid var(--hl-hairline, #2a2723); border-collapse: collapse; border-radius: 0; background: var(--hl-panel, #0b0a0a); font-size: .92rem; } .hl-account .woocommerce-table--order-details th, .hl-account .woocommerce-table--order-details td, .hl-account table.shop_table.order_details th, .hl-account table.shop_table.order_details td { padding: 13px 16px; border: 0; border-bottom: 1px solid var(--hl-hairline, #2a2723); text-align: left; vertical-align: top; color: var(--hl-bone, #f7f2e8); background: none; } .hl-account .woocommerce-table--order-details thead th, .hl-account table.shop_table.order_details thead th { font-family: var(--hl-font-mono, monospace); font-weight: 400; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hl-faint, #857f75); background: rgba(255, 255, 255, .02); } .hl-account .woocommerce-table--order-details tfoot th, .hl-account table.shop_table.order_details tfoot th { font-family: var(--hl-font-mono, monospace); font-weight: 400; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hl-faint, #857f75); } .hl-account .woocommerce-table--order-details tfoot td, .hl-account table.shop_table.order_details tfoot td { font-variant-numeric: tabular-nums; } .hl-account .woocommerce-table--order-details tfoot tr:last-child th, .hl-account .woocommerce-table--order-details tfoot tr:last-child td, .hl-account table.shop_table.order_details tfoot tr:last-child th, .hl-account table.shop_table.order_details tfoot tr:last-child td { border-bottom: 0; color: var(--hl-bone, #f7f2e8); } .hl-account .woocommerce-table--order-details .product-total, .hl-account table.shop_table.order_details .product-total, .hl-account .woocommerce-table--order-details tfoot td, .hl-account table.shop_table.order_details tfoot td { text-align: right; } .hl-account .woocommerce-table--order-details .product-name a, .hl-account table.shop_table.order_details .product-name a { color: var(--hl-glacier, #fc5501); text-decoration: none; } .hl-account .woocommerce-table--order-details .product-name a:hover, .hl-account table.shop_table.order_details .product-name a:hover { color: var(--hl-glacier-hover, #ff6a1f); } / Woo prints the qty as `× 2` / .hl-account .product-quantity { color: var(--hl-stone, #8c867c); font-weight: 400; } / variation / item meta lines / .hl-account .woocommerce-table--order-details .wc-item-meta, .hl-account table.shop_table.order_details .wc-item-meta { list-style: none; margin: 6px 0 0; padding: 0; font-size: .78rem; color: var(--hl-faint, #857f75); } .hl-account .wc-item-meta li, .hl-account .wc-item-meta p { margin: 0; } .hl-account .wc-item-meta strong { font-weight: 400; color: var(--hl-stone, #8c867c); } / customer-details.php: the billing / shipping address columns / .hl-account .woocommerce-customer-details { margin: 0; } .hl-account .woocommerce-customer-details .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0; } @media (max-width: 720px) { .hl-account .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: minmax(0, 1fr); } } .hl-account .woocommerce-customer-details .col-1, .hl-account .woocommerce-customer-details .col-2 { width: auto; float: none; padding: 0; } .hl-account .woocommerce-customer-details address { margin: 0; padding: 16px 18px; border: 1px solid var(--hl-hairline, #2a2723); background: var(--hl-panel, #0b0a0a); font-style: normal; font-size: .92rem; line-height: 1.75; color: var(--hl-bone, #f7f2e8); } .hl-account .woocommerce-customer-details .woocommerce-customer-details--phone, .hl-account .woocommerce-customer-details .woocommerce-customer-details--email { margin: 10px 0 0; font-size: .88rem; color: var(--hl-stone, #8c867c); overflow-wrap: anywhere; } / -------------------------------------------------------------------------- 7. ADDRESSES -------------------------------------------------------------------------- / .hl-addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (max-width: 720px) { .hl-addresses { grid-template-columns: minmax(0, 1fr); } } .hl-address { border: 1px solid var(--hl-hairline, #2a2723); background: var(--hl-panel, #0b0a0a); padding: 20px; min-width: 0; } .hl-address__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } / TRAP: Woo skins this same node as `.woocommerce-Address-title` and gives it a clearfix `::before{content:" ";display:table}`. A pseudo-element inside a flex container becomes a REAL FLEX ITEM, so `space-between` had three items to distribute and shoved the

into the middle of the card (measured: title left 492px vs address body left 410px). Killing the pseudo-elements — not changing justify-content — is the correct fix; the arrow link must stay right. SPECIFICITY: Woo's rule is `.woocommerce-account .addresses .title::before`, which computes at (0,3,1). A plain `.hl-addresshead::before` is (0,1,1) and silently LOSES. The doubled-class selectors below reach (0,4,1) and win regardless of enqueue order — verified live, not assumed. / .hl-account .addresses .title.hl-addresshead::before, .hl-account .addresses .title.hl-addresshead::after, .hl-account .woocommerce-Address-title.hl-addresshead::before, .hl-account .woocommerce-Address-title.hl-addresshead::after, .hl-addresshead::before, .hl-addresshead::after { content: none; display: none; } .hl-addresstitle { margin: 0; font-family: var(--hl-font-condensed, Anton, Impact, sans-serif); font-size: 1.15rem; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--hl-bone, #f7f2e8); } .hl-addressbody { font-style: normal; font-size: .92rem; line-height: 1.75; color: var(--hl-stone, #8c867c); overflow-wrap: anywhere; } .hl-addressempty { color: var(--hl-faint, #857f75); font-family: var(--hl-font-mono, monospace); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; } / -------------------------------------------------------------------------- 8. FORMS (edit address / account details) — shared field skin -------------------------------------------------------------------------- / .hl-formlegend { margin: 0 0 16px; padding: 0; font-family: var(--hl-font-condensed, Anton, Impact, sans-serif); font-size: 1.25rem; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--hl-bone, #f7f2e8); } .hl-formfieldset { border: 0; margin: 30px 0 0; padding: 0; } .hl-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; } @media (max-width: 720px) { .hl-formgrid { grid-template-columns: minmax(0, 1fr); } } .hl-formgrid > .form-row-wide, .hl-formgrid > .woocommerce-form-row--wide, .hl-formgrid > .form-row-last.notes, .hl-formgrid > #billing_address_1_field, .hl-form__grid > #billing_address_2_field, .hl-form__grid > #shipping_address_1_field, .hl-form__grid > #shipping_address_2_field { grid-column: 1 / -1; } .hl-account .form-row, .hl-account .woocommerce-form-row { margin: 0 0 16px; padding: 0; display: block; } .hl-account label, .hl-account .hl-formlegend + .hl-formgrid label { display: block; margin-bottom: 9px; font-family: var(--hl-font-mono, monospace); font-size: .62rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--hl-stone, #8c867c); line-height: 1.5; } .hl-account label .required { color: var(--hl-glacier, #fc5501); text-decoration: none; border: 0; } .hl-account .hl-check label { margin: 0; } / ⚠ SPECIFICITY: woocommerce.css ships `.woocommerce form .form-row .input-text { background-color: var(--wc-form-color-background,#fff); border: ... }` which computes at (0,3,1). A plain `.hl-authforminput` (0,1,0) loses to it and every field renders as a WHITE box on a near-black page — measured rgb(255,255,255). The doubled `.hl-form.hl-form` / `.hl-authform.hl-authform` below take these to (0,4,1) / (0,4,0) so they win outright, not on load order. / .hl-account .hl-form.hl-form input[type="text"], .hl-account .hl-form.hl-form input[type="email"], .hl-account .hl-form.hl-form input[type="tel"], .hl-account .hl-form.hl-form input[type="password"], .hl-account .hl-form.hl-form input[type="number"], .hl-account .hl-form.hl-form input[type="search"], .hl-account .hl-form.hl-form textarea, .hl-account .hl-form.hl-form select, .hl-account .hl-form.hl-form .input-text.input-text, .hl-account .hl-form.hl-form .select2-container .select2-selection--single { width: 100%; box-sizing: border-box; border: 1px solid rgba(140, 134, 124, .25); border-radius: var(--hl-r-md, 6px); background: transparent; color: var(--hl-bone, #f7f2e8); font-family: var(--hl-font-body, Archivo, system-ui, sans-serif); font-size: .95rem; line-height: 1.4; padding: 13px 16px; height: auto; transition: border-color .2s; -webkit-appearance: none; appearance: none; } .hl-account .hl-form.hl-form select { background-image: linear-gradient(45deg, transparent 50%, #8c867c 50%), linear-gradient(135deg, #8c867c 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; } .hl-account .hl-form.hl-form input::placeholder, .hl-account .hl-form.hl-form textarea::placeholder { color: rgba(140, 134, 124, .45); } .hl-account .hl-form.hl-form input:focus, .hl-account .hl-form.hl-form textarea:focus, .hl-account .hl-form.hl-form select:focus { outline: none; border-color: var(--hl-glacier, #fc5501); } .hl-account .select2-container--default .select2-selection--single .select2-selectionrendered { color: var(--hl-bone, #f7f2e8); line-height: 1.4; padding: 0; } .hl-account .select2-container--default .select2-selection--single .select2-selectionarrow { top: 50%; transform: translateY(-50%); right: 10px; } .hl-formhint { display: block; margin-top: 7px; font-size: .74rem; line-height: 1.5; color: var(--hl-faint, #857f75); font-style: normal; } .hl-formhint.hl-mono { font-size: .6rem; letter-spacing: .16em; } .hl-formactions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin: 28px 0 0; } .hl-formcancel { font-size: .78rem; } / -------------------------------------------------------------------------- 9. CHECKBOX — the source's 18px square with an accent tick -------------------------------------------------------------------------- / / ⚠ SELF-INFLICTED SPECIFICITY TRAP (found by measuring, not by reading): the generic field rule `.hl-account label { display: block }` in section 8 computes at (0,1,1) — one class PLUS one type selector — and therefore beats a bare `.hl-check` at (0,1,0). The label stopped being a flex container, its children de-blockified back to `display:inline`, and `width/height:18px` on .hl-checkbox was silently dropped because sizing does not apply to a non-replaced inline box: the tick rendered as a 2px sliver. Every selector in this block is qualified to at least (0,2,1) so the checkbox survives the generic label rule. Measured after fix: 18x18. / .hl-account label.hl-check, .hl-auth label.hl-check, .hl-check { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; margin: 0; } .hl-account label.hl-check--stack, .hl-auth label.hl-check--stack, .hl-check--stack { align-items: flex-start; } .hl-checkinput { position: absolute; width: 1px; height: 1px; opacity: 0; / The visually-hidden input sits UNDER the label's top-left corner. Without pointer-events:none a click that lands on those 1px toggles the input natively AND fires the label's implicit activation — two toggles, net zero, and the checkbox silently refuses to change. Measured with Playwright: "Clicking the checkbox did not change its state". Keyboard focus and label clicks are unaffected. / pointer-events: none; } .hl-account label.hl-check .hl-checkbox, .hl-auth label.hl-check .hl-checkbox, .hl-checkbox { position: relative; flex: 0 0 auto; width: 18px; height: 18px; border: 1px solid rgba(140, 134, 124, .4); border-radius: 3px; background: transparent; transition: border-color .2s, background-color .2s; } .hl-account label.hl-check .hl-checkbox::after, .hl-auth label.hl-check .hl-checkbox::after, .hl-checkbox::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--hl-glacier, #fc5501); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.6); opacity: 0; transition: opacity .15s, transform .15s; } / These STATE rules must out-rank the base .hl-checkbox block above, which is now qualified to (0,3,1); a bare `.hl-checkinput:checked + .hl-checkbox` is only (0,2,0) and would lose, leaving a checked box looking unchecked. / .hl-account label.hl-check .hl-checkinput:checked + .hl-checkbox, .hl-auth label.hl-check .hl-checkinput:checked + .hl-checkbox, .hl-checkinput:checked + .hl-checkbox { border-color: var(--hl-glacier, #fc5501); background: rgba(252, 85, 1, .1); } .hl-account label.hl-check .hl-checkinput:checked + .hl-checkbox::after, .hl-auth label.hl-check .hl-checkinput:checked + .hl-checkbox::after, .hl-checkinput:checked + .hl-checkbox::after { opacity: 1; transform: rotate(45deg) scale(1); } .hl-account label.hl-check .hl-checkinput:focus-visible + .hl-checkbox, .hl-auth label.hl-check .hl-checkinput:focus-visible + .hl-checkbox, .hl-checkinput:focus-visible + .hl-checkbox { outline: 2px solid var(--hl-glacier, #fc5501); outline-offset: 2px; } .hl-account label.hl-check .hl-checktext, .hl-auth label.hl-check .hl-checktext, .hl-checktext { font-family: var(--hl-font-body, Archivo, system-ui, sans-serif); font-size: .88rem; line-height: 1.45; letter-spacing: normal; text-transform: none; color: var(--hl-bone-80, rgba(247, 242, 232, .8)); margin: 0; } / -------------------------------------------------------------------------- 10. AUTH SCREENS — /login/ · /register/ · /forgot-password/ -------------------------------------------------------------------------- / .hl-auth { position: relative; isolation: isolate; overflow: hidden; background: var(--hl-granite, #050504); color: var(--hl-bone, #f7f2e8); font-family: var(--hl-font-body, Archivo, system-ui, sans-serif); } .hl-authglow { top: -18rem; left: -18rem; } .hl-authgrid { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 640px; } @media (min-width: 1024px) { .hl-authgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .hl-authcol { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 28px var(--hl-pad-x, 24px) 44px; } @media (min-width: 1024px) { .hl-authcol { padding: 32px 64px 48px; } } .hl-authcorner { pointer-events: none; position: absolute; left: 0; z-index: 0; width: 15vw; max-width: 220px; opacity: .7; } .hl-authcorner--tl { top: 0; } .hl-authcorner--bl { bottom: 0; } .hl-authtop { position: relative; z-index: 1; margin: 0 0 10px; } .hl-authback { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--hl-bone-75, rgba(247, 242, 232, .75)); text-decoration: none; transition: color .2s; } .hl-authback:hover { color: var(--hl-glacier, #fc5501); } .hl-authback .arw { transition: transform .2s; } .hl-authback:hover .arw { transform: translateX(-2px); } .hl-authpanelwrap { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 37rem; margin: 0 auto; padding: 28px 0; } .hl-authpanel { padding: 0 4px; } @media (min-width: 640px) { .hl-authpanel { padding: 0 12px; } } .hl-authtitle { font-size: clamp(2.75rem, 5.5vw, 4.5rem); } .hl-authlede { margin: 14px 0 0; max-width: 26rem; font-size: 1.02rem; line-height: 1.65; color: var(--hl-bone-75, rgba(247, 242, 232, .75)); } .hl-authform { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; } .hl-authformrow { margin: 0; padding: 0; display: block; } .hl-authformlabel { display: block; margin-bottom: 10px; font-family: var(--hl-font-mono, monospace); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hl-stone, #8c867c); } .hl-authformwrap { position: relative; display: block; } .hl-auth .hl-authform.hl-authform .hl-authforminput { width: 100%; box-sizing: border-box; border: 1px solid rgba(140, 134, 124, .25); border-radius: var(--hl-r-md, 6px); background: transparent; color: var(--hl-bone, #f7f2e8); font-family: var(--hl-font-body, Archivo, system-ui, sans-serif); font-size: .95rem; line-height: 1.4; padding: 14px 16px; transition: border-color .2s; -webkit-appearance: none; appearance: none; } .hl-auth .hl-authform.hl-authform .hl-authforminput--pw { padding-right: 52px; } .hl-auth .hl-authform.hl-authform .hl-authforminput::placeholder { color: rgba(140, 134, 124, .45); } .hl-auth .hl-authform.hl-authform .hl-authforminput:focus { outline: none; border-color: var(--hl-glacier, #fc5501); } .hl-authformhint { display: block; margin-top: 12px; font-family: var(--hl-font-mono, monospace); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hl-stone, #8c867c); } .hl-authformaside { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .hl-authformsubmit { height: 58px; font-size: 1.25rem; padding: 0 24px; margin-top: 4px; } / -------------------------------------------------------------------------- 10b. WOOCOMMERCE'S OWN PASSWORD WIDGETS Woo's `password-strength-meter` script wraps every password input in , injects a `.show-password-input` toggle and appends a `.woocommerce-password-strength` readout AFTER first keystroke. We ship none of our own — two eye icons and two meters is what happens if you do. These rules re-skin Woo's to the source design. -------------------------------------------------------------------------- / .hl-auth .password-input, .hl-account .password-input { position: relative; display: block; width: 100%; } .hl-auth .show-password-input, .hl-auth .hide-password-input, .hl-account .show-password-input, .hl-account .hide-password-input { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .75; filter: invert(1) sepia(1) saturate(0) brightness(1.3); transition: opacity .2s, filter .2s; } .hl-auth .show-password-input:hover, .hl-account .show-password-input:hover, .hl-auth .hide-password-input, .hl-account .hide-password-input { opacity: 1; filter: invert(46%) sepia(84%) saturate(4000%) hue-rotate(2deg) brightness(102%) contrast(101%); } .hl-auth .woocommerce-password-strength, .hl-account .woocommerce-password-strength { display: block; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--hl-hairline, #2a2723); border-left: 3px solid var(--hl-stone, #8c867c); border-radius: 0; background: var(--hl-panel, #0b0a0a); font-family: var(--hl-font-mono, monospace); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hl-stone, #8c867c); text-align: left; } .hl-auth .woocommerce-password-strength.strong, .hl-account .woocommerce-password-strength.strong { border-left-color: var(--hl-glacier, #fc5501); color: var(--hl-glacier, #fc5501); } .hl-auth .woocommerce-password-strength.good, .hl-account .woocommerce-password-strength.good { border-left-color: rgba(252, 85, 1, .6); color: var(--hl-bone, #f7f2e8); } .hl-auth .woocommerce-password-strength.short, .hl-auth .woocommerce-password-strength.bad, .hl-account .woocommerce-password-strength.short, .hl-account .woocommerce-password-strength.bad { border-left-color: #ff4d2d; color: #ff8f76; } .hl-auth .woocommerce-password-hint, .hl-account .woocommerce-password-hint { display: block; margin-top: 8px; font-size: .76rem; line-height: 1.5; color: var(--hl-faint, #857f75); } / Woo prints its privacy-policy paragraph into the register form. / .hl-auth .woocommerce-privacy-policy-text, .hl-account .woocommerce-privacy-policy-text { margin: 4px 0 0; } .hl-auth .woocommerce-privacy-policy-text p, .hl-account .woocommerce-privacy-policy-text p { margin: 0; font-size: .78rem; line-height: 1.6; color: var(--hl-faint, #857f75); } .hl-auth .woocommerce-privacy-policy-text a, .hl-account .woocommerce-privacy-policy-text a { color: var(--hl-glacier, #fc5501); text-decoration: none; } .hl-authrule { margin: 26px 0; border: 0; border-top: 1px solid rgba(140, 134, 124, .15); } .hl-authswap { margin: 0; font-size: .95rem; color: var(--hl-bone-75, rgba(247, 242, 232, .75)); } .hl-authlink { color: var(--hl-glacier, #fc5501); text-decoration: none; font-weight: 500; transition: color .2s; } .hl-authlink:hover { color: var(--hl-glacier-hover, #ff6a1f); } .hl-authlink--arrow { display: inline-flex; align-items: center; gap: 5px; } .hl-authlink--arrow .arw { transition: transform .2s; } .hl-authlink--arrow:hover .arw { transform: translateX(2px); } .hl-authhelp { position: relative; z-index: 1; width: 100%; max-width: 37rem; margin: 0 auto; padding: 0 4px; font-size: .9rem; line-height: 1.65; color: var(--hl-stone, #8c867c); } @media (min-width: 640px) { .hl-authhelp { padding: 0 12px; } } .hl-authart { position: relative; display: none; overflow: hidden; background: #000; } @media (min-width: 1024px) { .hl-authart { display: block; } } .hl-auth__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } / -------------------------------------------------------------------------- 11. WOOCOMMERCE NOTICES inside our panels -------------------------------------------------------------------------- / .hl-account .woocommerce-message, .hl-account .woocommerce-info, .hl-account .woocommerce-error, .hl-auth .woocommerce-message, .hl-auth .woocommerce-info, .hl-auth .woocommerce-error { list-style: none; margin: 0 0 22px; padding: 14px 18px; border: 1px solid var(--hl-hairline, #2a2723); border-left: 3px solid var(--hl-glacier, #fc5501); border-radius: 0; background: var(--hl-panel, #0b0a0a); color: var(--hl-bone, #f7f2e8); font-size: .88rem; line-height: 1.6; } .hl-account .woocommerce-error, .hl-auth .woocommerce-error { border-left-color: #ff4d2d; } .hl-account .woocommerce-error li, .hl-auth .woocommerce-error li { list-style: none; margin: 0; } .hl-account .woocommerce-message::before, .hl-account .woocommerce-info::before, .hl-account .woocommerce-error::before, .hl-auth .woocommerce-message::before, .hl-auth .woocommerce-info::before, .hl-auth .woocommerce-error::before { display: none; } .hl-account .woocommerce-message a, .hl-auth .woocommerce-message a { color: var(--hl-glacier, #fc5501); } / Woo's clearfix helpers are meaningless in our grid and add stray height. / .hl-account .clear, .hl-auth .clear { display: none; } / Woo emits its notice action BEFORE the message text:
Confirm email address Confirm your email address to check for past orders…
and floats the right. At 390px the float left too little room and the first word broke mid-token — rendering as "Conf / [BUTTON] / irm your email address…" (observed, not theorised). Below 640px the notice becomes `column-reverse`: contiguous text is wrapped in an ANONYMOUS flex item, so the message rises above the button and the button sits full-width underneath — no float, nothing to wrap around. The wide layout keeps the original text-left / button-right float. */ .hl-account .woocommerce-info .button, .hl-account .woocommerce-message .button, .hl-auth .woocommerce-info .button, .hl-auth .woocommerce-message .button { float: right; margin-left: 18px; } @media (max-width: 639px) { .hl-account .woocommerce-info, .hl-account .woocommerce-message, .hl-auth .woocommerce-info, .hl-auth .woocommerce-message { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 12px; } .hl-account .woocommerce-info .button, .hl-account .woocommerce-message .button, .hl-auth .woocommerce-info .button, .hl-auth .woocommerce-message .button { float: none; margin-left: 0; width: 100%; } }