/* ============================================================================ HERODION ERP — dual theme Default = Zoho CRM look (white / blue / neutral). Toggle [data-herodion-theme="gold"] on = original Herodion design (gold / charcoal / serif). Switcher + theme JS in herodion_brand.js. Herodion citadel is the brand mark in BOTH themes. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cinzel:wght@500;600;700&display=swap'); :root { /* Zoho palette */ --zoho-blue: #2C7BE5; --zoho-blue-600: #1f6fd4; --zoho-blue-700: #1a5fbf; --zoho-blue-050: #eaf2fd; --zoho-ink: #23272E; --zoho-muted: #5A6573; --zoho-border: #E3E6EA; --zoho-canvas: #F4F5F7; --zoho-sans: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Herodion (original) palette */ --herodion-gold: #C9A34A; --herodion-gold-700: #a87f2e; --herodion-gold-050: rgba(201,163,74,.14); --herodion-charcoal: #1A1A1A; --herodion-light: #F5F5F5; --herodion-serif: 'Cinzel', 'Cormorant Garamond', Georgia, serif; } /* ---- Brand mark: Herodion citadel in BOTH themes ------------------------- */ .navbar-home #brand-logo, img#brand-logo { content: url('/assets/herodion_re/images/herodion-icon-128.png'); height: 28px !important; width: auto !important; object-fit: contain; } .header-logo { background: url('/assets/herodion_re/images/herodion-icon-128.png') no-repeat center / contain; width: 30px !important; height: 30px !important; } .header-logo > * { opacity: 0 !important; } /* ============================================================================ DEFAULT THEME — ZOHO ========================================================================== */ :root, :root[data-theme="light"], .light-theme { --primary: var(--zoho-blue); --primary-color: var(--zoho-blue); --btn-primary: var(--zoho-blue); --text-on-primary: #ffffff; --bg-color: var(--zoho-canvas); --fg-color: #ffffff; --card-bg: #ffffff; --navbar-bg: #ffffff; --border-color: var(--zoho-border); --text-color: var(--zoho-ink); --text-muted: var(--zoho-muted); --sidebar-select-color: var(--zoho-blue-050); --blue-500: var(--zoho-blue); --blue-600: var(--zoho-blue-700); } body, .page-body, .layout-main, .desk-page { font-family: var(--zoho-sans); color: var(--zoho-ink); } body { background: var(--zoho-canvas); } h1, h2, h3, h4, .page-title .title-text { font-family: var(--zoho-sans); font-weight: 600; letter-spacing: 0; } .btn-primary, .btn.btn-primary { background: var(--zoho-blue) !important; border-color: var(--zoho-blue) !important; color: #fff !important; font-weight: 500; border-radius: 6px; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--zoho-blue-700) !important; border-color: var(--zoho-blue-700) !important; color: #fff !important; } .btn-default, .btn-secondary { background: #fff !important; border: 1px solid var(--zoho-border) !important; color: var(--zoho-ink) !important; border-radius: 6px; } .btn-default:hover { background: #f7f8fa !important; } a, .text-primary { color: var(--zoho-blue); } a:hover { color: var(--zoho-blue-700); } .navbar, .desktop-navbar { background: #fff !important; border-bottom: 1px solid var(--zoho-border) !important; box-shadow: 0 1px 3px rgba(16, 24, 40, .04); } .standard-sidebar .standard-sidebar-item.selected, .desk-sidebar .standard-sidebar-item.selected, .workspace-sidebar .item-anchor.selected { background: var(--zoho-blue-050); border-left: 3px solid var(--zoho-blue); color: var(--zoho-blue-700); } .standard-sidebar-item.selected svg { color: var(--zoho-blue) !important; } /* Keep page-header action buttons from overflowing off-screen (Save stays reachable) */ .page-head .standard-actions, .page-head .page-actions { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; min-width: 0; } /* New Email dialog helper bar (template picker + edit + setup links) */ .hd-email-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font: 12px var(--zoho-sans); } .hd-email-bar .hd-eb-l { color: var(--zoho-muted); font-weight: 500; } .hd-email-bar .hd-eb-tpl { height: 28px; border: 1px solid var(--zoho-border); border-radius: 6px; padding: 0 6px; max-width: 240px; } .hd-email-bar .hd-eb-btn { height: 28px; padding: 0 12px; border-radius: 6px; cursor: pointer; font: 500 12px/1 var(--zoho-sans); border: 1px solid var(--zoho-blue); } .hd-email-bar .hd-eb-insert { background: var(--zoho-blue); color: #fff; } .hd-email-bar .hd-eb-insert:hover { background: var(--zoho-blue-700); } .hd-email-bar .hd-eb-dup { background: #fff; color: var(--zoho-blue); } .hd-email-bar .hd-eb-dup:hover { background: var(--zoho-blue-050); } .hd-email-bar .hd-eb-link { color: var(--zoho-blue); text-decoration: none; } .hd-email-bar .hd-eb-setup { margin-left: auto; color: var(--zoho-muted); } .hd-email-bar .hd-eb-setup:hover { color: var(--zoho-blue); } /* Field-name viewer button (by the form tabs) + the per-field name badges */ .hd-fn-btn { margin-left: 10px; padding: 2px 10px; border-radius: 14px; cursor: pointer; border: 1px solid var(--zoho-border); background: #fff; color: var(--zoho-muted); font: 500 12px/1.6 var(--zoho-sans); } .hd-fn-btn.on { background: var(--zoho-blue); color: #fff; border-color: var(--zoho-blue); } .hd-fn { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #f1f3f5; color: #8a9099; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none; vertical-align: middle; } .hd-fn:hover { background: var(--zoho-blue-050); color: var(--zoho-blue-700); } /* WhatsApp click-to-chat link inside phone/mobile fields */ .frappe-control .hd-wa { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #25D366; display: inline-flex; align-items: center; z-index: 3; cursor: pointer; } .frappe-control .hd-wa:hover { color: #128C7E; } .frappe-control .hd-wa + .hd-wa { display: none; } /* Save button disabled look + non-clickable when the form has no changes */ .hd-save-disabled { opacity: .45 !important; pointer-events: none !important; cursor: not-allowed !important; } /* Always-on breadcrumb: the current-page crumb we append (Home > Workspace > Page) */ ul.navbar-breadcrumbs li.herodion-crumb { display: inline-flex; align-items: center; } ul.navbar-breadcrumbs li.herodion-crumb .hd-sep { margin: 0 7px; opacity: .4; } ul.navbar-breadcrumbs li.herodion-crumb .hd-page { color: var(--zoho-ink); font-weight: 500; } .frappe-list .result { background: #fff; border: 1px solid var(--zoho-border); border-radius: 8px; overflow: hidden; } .list-row, .list-row-container { border-color: var(--zoho-border) !important; } .list-row:hover { background: var(--zoho-blue-050) !important; } .list-row-head { background: #fafbfc !important; color: var(--zoho-muted) !important; text-transform: none; font-weight: 600; border-bottom: 1px solid var(--zoho-border); } .list-subject a, .list-row a.ellipsis, .list-id { color: var(--zoho-blue); font-weight: 500; } .widget, .ind-card, .form-section, .frappe-card, .page-card, .dashboard-section { background: #fff; border: 1px solid var(--zoho-border); border-radius: 8px; box-shadow: none; } .indicator-pill, .pill { border-radius: 12px; font-weight: 500; } /* Inputs: faint fill + clearer border so white fields are visible on white cards */ .form-control, .input-with-feedback, .like-disabled-input, .control-input input, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], input[type="password"], input[type="search"], select, textarea, .ql-editor, .awesomplete > input { border: 1px solid #CBD2DB !important; background-color: #F6F8FB !important; border-radius: 6px; } .form-control:hover, .input-with-feedback:hover, input:hover, select:hover, textarea:hover { border-color: #AAB3C0 !important; } .form-control:focus, .input-with-feedback:focus, input:focus, select:focus, textarea:focus, .ql-editor:focus { border-color: var(--zoho-blue) !important; background-color: #fff !important; box-shadow: 0 0 0 2px var(--zoho-blue-050) !important; } /* read-only / display values also get a light boundary so empty fields read as fields */ .like-disabled-input, .control-value { background-color: #F6F8FB !important; } /* Login (Zoho) */ body.login-content, .for-login, .for-signup, .for-forgot, .for-email-login { background: var(--zoho-canvas); } .login-content .page-card, .page-card { border-top: 3px solid var(--zoho-blue); border-radius: 10px; box-shadow: 0 8px 30px rgba(16,24,40,.10); } .login-content .page-card-head img, .page-card-head .app-logo, .page-card-head img { height: 56px !important; width: auto !important; content: url('/assets/herodion_re/images/herodion-logo.png'); } .login-content .btn-primary, .page-card .btn-login, .btn-login { background: var(--zoho-blue) !important; border-color: var(--zoho-blue) !important; color: #fff !important; font-weight: 500; } .btn-login:hover { background: var(--zoho-blue-700) !important; color: #fff; } .splash { background: #fff; } /* ---- Zoho top module-tab bar (injected by JS; shown only in zoho theme) -- */ .herodion-tabbar { display: none; } [data-herodion-theme="zoho"] .herodion-tabbar { display: flex; align-items: stretch; gap: 2px; background: #fff; border-bottom: 1px solid var(--zoho-border); padding: 0 16px; height: 40px; overflow-x: auto; position: sticky; top: 0; z-index: 90; } .herodion-tab { display: inline-flex; align-items: center; padding: 0 14px; height: 40px; color: var(--zoho-muted); font: 500 13px/1 var(--zoho-sans); white-space: nowrap; border-bottom: 2px solid transparent; text-decoration: none; } .herodion-tab:hover { color: var(--zoho-blue); background: #fafbfc; } .herodion-tab.active { color: var(--zoho-blue); border-bottom-color: var(--zoho-blue); font-weight: 600; } /* ---- Floating controls: theme + view switches (both themes) -------------- */ .herodion-controls { position: fixed; right: 14px; bottom: 14px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .herodion-theme-switch, .herodion-view-switch { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 20px; cursor: pointer; border: none; font: 600 12px/1 var(--zoho-sans); box-shadow: 0 4px 14px rgba(16,24,40,.18); } .herodion-theme-switch { background: var(--zoho-blue); color: #fff; } .herodion-view-switch { background: #23272E; color: #fff; } .herodion-theme-switch:hover, .herodion-view-switch:hover { filter: brightness(1.1); } /* Basic view hides everything tagged non-essential, across all modules */ [data-herodion-view="basic"] .hd-nonbasic { display: none !important; } /* Hidden modules (Manufacturing/Quality/Subcontracting/Assets) unless "show hidden" is on */ html[data-herodion-showhidden="0"] .hd-mod-hidden, html:not([data-herodion-showhidden]) .hd-mod-hidden { display: none !important; } /* ============================================================================ THEME OVERRIDE — ORIGINAL HERODION (gold / charcoal / serif) Higher specificity (html[attr] + class) + !important beats the Zoho default. ========================================================================== */ html[data-herodion-theme="gold"] { --primary: var(--herodion-gold); --primary-color: var(--herodion-gold); --btn-primary: var(--herodion-gold); --text-on-primary: var(--herodion-charcoal); --bg-color: var(--herodion-light); --border-color: #e6e2d6; --sidebar-select-color: var(--herodion-gold-050); } [data-herodion-theme="gold"] body { background: var(--herodion-light); color: var(--herodion-charcoal); } [data-herodion-theme="gold"] h1, [data-herodion-theme="gold"] h2, [data-herodion-theme="gold"] h3, [data-herodion-theme="gold"] .page-title .title-text { font-family: var(--herodion-serif) !important; letter-spacing: .3px; } [data-herodion-theme="gold"] .btn-primary, [data-herodion-theme="gold"] .btn.btn-primary { background: var(--herodion-gold) !important; border-color: var(--herodion-gold) !important; color: var(--herodion-charcoal) !important; } [data-herodion-theme="gold"] .btn-primary:hover { background: var(--herodion-gold-700) !important; border-color: var(--herodion-gold-700) !important; color: #fff !important; } [data-herodion-theme="gold"] a, [data-herodion-theme="gold"] .text-primary, [data-herodion-theme="gold"] .list-subject a, [data-herodion-theme="gold"] .list-row a.ellipsis, [data-herodion-theme="gold"] .list-id { color: var(--herodion-gold-700) !important; } [data-herodion-theme="gold"] .navbar, [data-herodion-theme="gold"] .desktop-navbar { border-bottom: 2px solid var(--herodion-gold) !important; box-shadow: none; } [data-herodion-theme="gold"] .standard-sidebar-item.selected { background: var(--herodion-gold-050) !important; border-left-color: var(--herodion-gold) !important; color: var(--herodion-gold-700) !important; } [data-herodion-theme="gold"] .list-row:hover { background: var(--herodion-gold-050) !important; } /* Login (gold) */ [data-herodion-theme="gold"] body.login-content, [data-herodion-theme="gold"] .for-login { background: var(--herodion-light); } [data-herodion-theme="gold"] .login-content .page-card, [data-herodion-theme="gold"] .page-card { border-top: 4px solid var(--herodion-gold) !important; } [data-herodion-theme="gold"] .btn-login, [data-herodion-theme="gold"] .login-content .btn-primary { background: var(--herodion-gold) !important; border-color: var(--herodion-gold) !important; color: var(--herodion-charcoal) !important; } [data-herodion-theme="gold"] .page-card-head .indicator, [data-herodion-theme="gold"] .page-card-head h4 { font-family: var(--herodion-serif) !important; } [data-herodion-theme="gold"] .splash { background: var(--herodion-charcoal); } /* switcher pill turns gold in the gold theme */ [data-herodion-theme="gold"] .herodion-theme-switch { background: var(--herodion-gold); color: var(--herodion-charcoal); }