/** * Kaarigar Order Flow — My Account styles. * * Loaded AFTER kof-frontend.css and dependent on it, so every colour and type * decision below inherits from there rather than restating the palette. The * token names are --khb-* because kof-frontend.css shares its palette with * the Homepage plugin; --kof-* names silently fall through to the hardcoded * fallback and stop tracking the brand. If a * value here looks like a magic number, it is a bug — take it from a token. * * PHASE 3A: sign-in panel only. The nav card, orders list, dashboard and order * view land in Phase 3B and must match kof-phase3-preview.html. */ /* --------------------------------------------------------------------------- * Magic-link sign-in panel * * Sits above WooCommerce's own login form on the My Account page. Astra ships * its own myaccount templates, so this is scoped tightly to .kof-signin and * inherits rather than overrides — anything broader ends up fighting Astra. * ------------------------------------------------------------------------ */ .kof-signin { max-width: 460px; margin: 0 0 28px; padding: 24px; border: 1px solid var(--khb-line, #EFDCD3); border-radius: 10px; background: var(--khb-paper, #FFFDFB); font-family: 'Jost', sans-serif; } .kof-signin-title { margin: 0 0 6px; font-family: 'Marcellus', serif; font-size: 20px; font-weight: 400; color: var(--khb-rose-deep, #8C4A55); } .kof-signin-lede { margin: 0 0 16px; font-size: 14px; line-height: 1.55; opacity: .85; } .kof-signin-field { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 500; } .kof-signin-form input[type="email"] { width: 100%; padding: 11px 13px; margin: 0 0 12px; border: 1px solid var(--khb-line, #EFDCD3); border-radius: 6px; font-family: inherit; font-size: 15px; background: #fff; } .kof-signin-form input[type="email"]:focus { outline: none; border-color: var(--khb-rose, #B76E79); box-shadow: 0 0 0 3px var(--khb-blush, #FBEDE8); } .kof-signin-form .kof-btn-primary { width: 100%; } /* Feedback after a request. Both variants are intentionally low-key: the * message is identical whether or not the email is registered, so a loud * success state would be misleading half the time. */ .kof-signin-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 6px; font-size: 14px; line-height: 1.5; } .kof-signin-note-ok { background: var(--khb-blush, #FBEDE8); color: var(--khb-rose-deep, #8C4A55); } .kof-signin-note-warn { background: #FDF4E7; color: #8A5A12; } /* Revealed by kof-account.js only. Hidden by default via the [hidden] * attribute so that with JavaScript off the password form is simply visible * and there is no toggle offering to reveal something already on screen. */ .kof-signin-toggle { margin: 14px 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--khb-rose, #B76E79); text-decoration: underline; cursor: pointer; } .kof-signin-toggle:hover { color: var(--khb-rose-deep, #8C4A55); } .kof-signin-alt { margin: 0; } /* =========================================================================== MY ACCOUNT (4.11.0) Loaded after kof-frontend.css and dependent on it, so the palette, the status pill, the action strip and every button come from there. Nothing below restates a colour that already has a token. Astra ships its own myaccount templates — but KOF_Account replaces WooCommerce's content dispatcher outright, so neither Astra's nor WooCommerce's order templates ever run. That is why none of this needs !important to win. ======================================================================== */ /* The shell template renders KHB chrome instead of Astra's, which means Astra's container is gone too — so the shell supplies its own. Matched to the order form's gutters so moving between the two doesn't shift the page. */ .kof-shell{ max-width:1120px;margin:0 auto;padding:44px 22px 64px; font-family:'Jost',sans-serif;color:var(--khb-ink); } .kof-shell h1,.kof-shell h2,.kof-shell h3,.kof-shell h4,.kof-shell h5{ font-family:'Marcellus',serif;font-weight:400; } @media (max-width:760px){ .kof-shell{padding:24px 16px 48px} } /* The manage-order page brings its own .kof-form-wrap width, so the shell must not constrain it a second time. */ .kof-shell .kof-form-wrap{max-width:none;padding:0} .woocommerce-account .woocommerce{max-width:none;margin:0} /* ---- shell ---- */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto} .woocommerce-account .woocommerce-MyAccount-navigation{ background:#fff;border:1px solid var(--khb-line);border-radius:12px;padding:7px;margin-bottom:0; } .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0} .woocommerce-account .woocommerce-MyAccount-navigation li{margin:0} .woocommerce-account .woocommerce-MyAccount-navigation a{ display:block;padding:10px 12px;border-radius:8px;font-size:14px; color:var(--khb-ink);text-decoration:none; } .woocommerce-account .woocommerce-MyAccount-navigation a:hover{background:#FFFAF8} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--khb-blush);color:var(--khb-rose-deep);font-weight:600; } .woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a{ color:var(--khb-ink-soft);margin-top:4px;border-top:1px solid var(--khb-line);border-radius:0; } @media (min-width:761px){ .woocommerce-account .woocommerce-MyAccount-navigation{ float:left;width:222px; } .woocommerce-account .woocommerce-MyAccount-content{ float:right;width:calc(100% - 246px);min-width:0; } .woocommerce-account .woocommerce::after{content:"";display:table;clear:both} } /* Mobile: a horizontally scrollable row, because Astra stacks the native