/* ========================================================================== Tedmart Limited — brand theme Loaded on both the Desk (app_include_css) and the website/login (web_include_css). Colors/logo pulled from the live tedmart.co.ke site (2026-08-31): primary pink #ee3a80, darker pink #be2e66, accent yellow #fcea49, "PT Sans" body font. Keep selectors broad + !important-light so this survives minor Frappe/ERPNext version differences without a fork. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap"); :root { --tedmart-pink: #ee3a80; --tedmart-pink-dark: #be2e66; --tedmart-pink-light: #fccfe3; --tedmart-maroon: #660033; --tedmart-yellow: #fcea49; --tedmart-ink: #2b1420; --tedmart-bg: #faf6f8; --tedmart-card-radius: 10px; --tedmart-font: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* -------------------------------------------------------------------- Global — pink reserved for accents/actions, not everywhere -------------------------------------------------------------------- */ body { background-color: var(--tedmart-bg); font-family: var(--tedmart-font); } a, .text-primary, .h4:hover, .awesomplete > ul > li mark { color: var(--tedmart-pink); } .btn-primary, .btn-primary:hover, .btn-primary:focus { background-color: var(--tedmart-pink) !important; border-color: var(--tedmart-pink) !important; } .btn-primary:hover { background-color: var(--tedmart-pink-dark) !important; border-color: var(--tedmart-pink-dark) !important; } .indicator-pill.yellow, .indicator.yellow { background: #fffbe0; color: #8a7300; } .indicator-pill.pink, .indicator.pink { background: var(--tedmart-pink-light); color: var(--tedmart-pink-dark); } .progress-bar { background-color: var(--tedmart-pink); } ::selection { background: var(--tedmart-pink-light); } /* -------------------------------------------------------------------- Desk navbar -------------------------------------------------------------------- */ .navbar, #navbar-breadcrumbs ~ .navbar, .desk-navbar, .navbar.navbar-default { background-color: #ffffff !important; border-bottom: 2px solid var(--tedmart-pink); } .navbar .navbar-brand img, .navbar-home img { max-height: 30px; } .standard-sidebar-item.selected, .sidebar-item-container.selected > .standard-sidebar-item, .sidebar-item-container.selected > .desk-sidebar-item { background-color: var(--tedmart-pink-light) !important; } .standard-sidebar-item.selected .sidebar-item-icon, .standard-sidebar-item.selected .sidebar-item-label { color: var(--tedmart-pink-dark) !important; } .widget.shortcut-widget-box:hover { border-color: var(--tedmart-pink); box-shadow: 0 2px 8px rgba(238, 58, 128, 0.12); } /* ====================================================================== Login / website pages ====================================================================== */ /* Frappe wraps the whole login page in
(Bootstrap, max-width + centered) — override it on this route so the branded backdrop runs edge-to-edge on larger screens instead of sitting in a narrow centered column with side gutters. */ body[data-path="login"] .page-content-wrapper, body[data-path="login"] main.container, body[data-path="login"] .page-header-wrapper, body[data-path="login"] .page_content { max-width: 100% !important; width: 100%; padding: 0 !important; margin: 0 !important; } /* Fixed full-bleed backdrop (brand pink diagonal gradient top / neutral bottom), injected once as the very first element in by tedmart_erp.js — z-index -1 keeps it behind everything regardless of DOM order, and `position: fixed; inset: 0` makes it fill the viewport at any screen size rather than scaling with the (narrow) content column. */ .tedmart-login-bg { position: fixed; inset: 0; z-index: -1; background-color: var(--tedmart-bg); } .tedmart-login-bg-top { height: 46vh; background: linear-gradient(135deg, var(--tedmart-pink) 0%, var(--tedmart-maroon) 100%); } .web-footer { background-color: var(--tedmart-bg); } body.login-page, .page-card-container, section.for-login { min-height: 100vh; } .page-card-container, section.for-login { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: transparent; width: 100%; } /* TEDMART wordmark, shown large above the card instead of the small default app-logo + "Login to X" heading. */ .page-card-head { text-align: center; margin-bottom: 28px; } .page-card-head img.app-logo { height: 96px; width: auto; max-height: none; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25)); } .page-card { box-shadow: 0px 20px 90px rgba(43, 20, 32, 0.18), 0px 8px 24px rgba(43, 20, 32, 0.1); border-radius: var(--tedmart-card-radius); border: none; background: #ffffff; width: 100%; max-width: 420px; padding: 32px 32px 24px; box-sizing: border-box; } .page-card .btn-primary { width: 100%; } .tedmart-form-heading { text-align: center; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #f1e4ea; } .tedmart-form-heading h2 { margin: 0 0 4px 0; font-size: 21px; font-weight: 700; color: var(--tedmart-ink); } .tedmart-form-heading .tedmart-form-subtitle { margin: 0; font-size: 13.5px; color: rgba(43, 20, 32, 0.6); } .tedmart-login-page-footer { margin-top: 24px; font-size: 12px; color: var(--tedmart-ink); opacity: 0.6; text-align: center; } .tedmart-login-page-footer .tedmart-powered-by { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--tedmart-pink); text-decoration: none; } .tedmart-login-page-footer .tedmart-powered-by:hover { text-decoration: underline; } /* -------------------------------------------------------------------- Remove upstream branding marks we don't control via hooks -------------------------------------------------------------------- */ .page-card-container .text-muted a[href*="frappe.io"], section.for-login .text-muted a[href*="frappe.io"], .web-footer a[href*="frappe.io"], #footer-powered-by { display: none !important; }