/* ================================================================= type.graphite EtomPlan — manufacturing operations ----------------------------------------------------------------- Register : industrial machinery — graphite weight, cyan signal Accent : #0891b2 (zinc graphite chrome + cyan signal at action points — operational weight without going monochrome-TV) Flavor : system theme (md-xml, hero-driven marketing site) Notes : two-tone pattern — graphite for surfaces and topnav, cyan for action color, hover, heading-2, hero kicker, and active states. Cyan reads as 'instrumentation / status indicator', not decoration. ----------------------------------------------------------------- Defines the complete TypeMatter theme contract. Pair with content.css + content-tm.css (master rendering layer). No structural rules here — token assignments only. ================================================================= */ :root { /* ------------------------------------------------------------- 1. Core surfaces (.tm-tone-light / .tm-tone-muted / .tm-tone-dark) ------------------------------------------------------------- */ --tm-bg-light: #ffffff; --tm-bg-muted: #fafaf9; --tm-bg-dark: #18181b; /* ------------------------------------------------------------- 2. Core text colors ------------------------------------------------------------- */ --tm-text-light: #18181b; --tm-text-dark: #ffffff; /* ------------------------------------------------------------- 3. Brand accent — primary action color ------------------------------------------------------------- */ --tm-primary: #0891b2; --tm-primary-hover: #0e7490; /* ------------------------------------------------------------- 4. Badges, code, radii, shadows, padding scale Spacing & shape tokens are intentionally identical across all themes — only color tokens vary. ------------------------------------------------------------- */ --tm-badge-bg: rgba(8,145,178,0.08); --tm-badge-bg-dark: rgba(255,255,255,0.15); --tm-code-bg: #18181b; --tm-code-text: #fafaf9; --tm-radius-sm: 8px; --tm-radius-md: 14px; --tm-radius-lg: 20px; --tm-shadow-sm: 0 6px 20px rgba(24,24,27,0.08); --tm-shadow-md: 0 12px 32px rgba(24,24,27,0.10); --tm-pad-sm: 32px; --tm-pad-md: 48px; --tm-pad-lg: 72px; --tm-pad-xl: 96px; /* ------------------------------------------------------------- 5. Hero theme (.tm-section-hero) Customer themes that don't use md-xml hero sections still define these for contract completeness. ------------------------------------------------------------- */ --tm-hero-text: #fafaf9; --tm-hero-heading: #fafaf9; --tm-hero-body: #e4e4e7; --tm-hero-kicker: #67e8f9; --tm-hero-badge-bg: rgba(255,255,255,0.15); /* ------------------------------------------------------------- 6. CMS body typography ------------------------------------------------------------- */ --cms-body-font-size: 16px; --cms-body-line-height: 28px; --cms-body-font-family: 'Droid Sans', sans-serif; /* ------------------------------------------------------------- 7. CMS tables ------------------------------------------------------------- */ --cms-table-border-color: #d4d4d8; --cms-table-header-bg: #e4e4e7; /* ------------------------------------------------------------- 8. CMS top navigation ------------------------------------------------------------- */ --cms-topnav-bg: #ffffff; --cms-topnav-border: 1px solid #52525b; --cms-topnav-border-bottom: none; --cms-topnav-font-size: 15px; --cms-topnav-header-text-color: #52525b; --cms-topnav-link-color: #0891b2; --cms-topnav-link-hover-color: #0e7490; --cms-topnav-link-padding: 15px 8px; --cms-topnav-submenu-width: 241px; /* ------------------------------------------------------------- 9. CMS dropdown menus ------------------------------------------------------------- */ --cms-menu-bg: #ffffff; --cms-menu-border: 1px solid rgba(0,0,0,0.08); --cms-menu-shadow: 0 14px 35px rgba(0,0,0,0.12); --cms-menu-hover-bg: rgba(0,0,0,0.05); --cms-menu-item-border: 1px solid #e4e4e7; --cms-menu-toggle-color: #0891b2; --cms-menu-toggle-icon-color: #0891b2; --cms-menu-toggle-icon-offset: 0px; /* ------------------------------------------------------------- 10. Mobile menu ------------------------------------------------------------- */ --cms-mobile-menu-bg: #ffffff; --cms-mobile-menu-min-width: 161px; --cms-mobile-menu-item-border-bottom: 1px solid #d4d4d8; /* ------------------------------------------------------------- 11. Submenu ------------------------------------------------------------- */ --cms-submenu-width: 168px; --cms-submenu-offset-x: 160px; --cms-submenu-inner-padding-left: 15px; --cms-submenu-link-color: #0891b2; --cms-submenu-link-hover-color: #ffffff; --cms-submenu-link-hover-bg: #0891b2; --cms-deep-submenu-padding-left: 15px; /* ------------------------------------------------------------- 12. Selected menu item (current page indicator) ------------------------------------------------------------- */ --cms-selected-menu-item-bg: #cffafe; --cms-selected-menu-item-offset: -15px; --cms-selected-menu-item-border-top: none; --cms-selected-menu-item-width: auto; --cms-selected-menu-link-color: inherit; --cms-selected-menu-link-bg: transparent; /* ------------------------------------------------------------- 13. Sidebar shells ------------------------------------------------------------- */ --cms-sidebar-shell-bg: transparent; --cms-menu-sidebar-shell-bg: transparent; --cms-fixed-sidebar-content-margin-top: 60px; --cms-menu-sidebar-content-margin-top: 26px; /* ------------------------------------------------------------- 14. Sidebar items ------------------------------------------------------------- */ --cms-sidebar-item-min-width: 185px; --cms-sidebar-item-border: 1px solid #ebebeb; --cms-sidebar-item-bg: #fafaf9; --cms-sidebar-item-margin: 0; --cms-sidebar-item-color: inherit; --cms-sidebar-item-font-size: inherit; --cms-sidebar-item-active-border-top: 1px solid #0891b2; --cms-sidebar-item-active-link-color: #0891b2; /* ------------------------------------------------------------- 15. Sidebar group label + title ------------------------------------------------------------- */ --cms-sidebar-group-label-bg: #0891b2; --cms-sidebar-group-label-color: #ffffff; --cms-sidebar-title-bg: #0891b2; --cms-sidebar-title-color: #ffffff; --cms-sidebar-title-min-width: 185px; --cms-sidebar-title-padding-left: 8px; --cms-sidebar-title-padding: initial; --cms-sidebar-title-font-size: inherit; --cms-sidebar-title-margin: initial; --cms-sidebar-title-margin-top: 0; /* ------------------------------------------------------------- 16. Chrome — utility + footer ------------------------------------------------------------- */ --cms-utility-text-color: #18181b; --cms-footer-text-color: #18181b; --cms-footer-bg: transparent; --cms-footer-padding: 17px; /* ------------------------------------------------------------- 17. Buttons Note: legacy customer themes hardcode Bootstrap blue/green button colors regardless of theme accent. Product themes inherit the brand accent for a tighter visual system. ------------------------------------------------------------- */ --cms-button-primary-bg: #0891b2; --cms-button-primary-border: #0891b2; --cms-button-primary-radius: initial; --cms-button-primary-hover-bg: #0e7490; --cms-button-success-bg: #0891b2; --cms-button-success-border: #0891b2; --cms-button-success-radius: initial; --cms-button-success-hover-bg: #0e7490; /* ------------------------------------------------------------- 18. CMS content typography ------------------------------------------------------------- */ --cms-heading-1-color: inherit; --cms-heading-2-color: #0891b2; --cms-heading-4-color: inherit; --cms-heading-5-color: inherit; --cms-body-text-color: #3f3f46; --cms-inline-link-color: inherit; /* ------------------------------------------------------------- 19. Highlight + contact sections ------------------------------------------------------------- */ --cms-highlight-section-bg: transparent; --cms-highlight-section-color: inherit; --cms-highlight-section-padding: 0; --cms-highlight-section-text-align: inherit; --cms-contact-section-bg: transparent; --cms-contact-section-color: inherit; --cms-contact-section-padding: 0; --cms-contact-section-text-align: inherit; --cms-highlight-chip-bg: transparent; /* ------------------------------------------------------------- 20. List blocks ------------------------------------------------------------- */ --cms-list-block-bg: transparent; --cms-list-block-border: transparent; --cms-list-block-link-color: inherit; --cms-list-block-link-padding: 0; --cms-list-block-hover-bg: inherit; /* ------------------------------------------------------------- 21. Scoped card links (col-sm wrappers + footer) ------------------------------------------------------------- */ --cms-inline-card-link-color: inherit; --cms-inline-card-link-decoration: none; --cms-inline-card-link-padding: 0; --cms-inline-card-link-bg: none; /* ------------------------------------------------------------- 22. Person gallery (team / staff pages) ------------------------------------------------------------- */ --cms-person-gallery-title-bg: #cffafe; --cms-person-gallery-title-color: #164e63; } /* ================================================================= Hero gradient — layered cyan glow behind content + teal at bottom-right; control-panel depth, not flat zinc ================================================================= */ .tm-section-hero { background: radial-gradient(ellipse 60% 70% at 25% 40%, rgba(8,145,178,0.35) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 95% 95%, rgba(14,116,144,0.25) 0%, transparent 65%), linear-gradient(160deg, #0c1419 0%, #18181b 50%, #1f1f23 100%); }