/* ================================================================= type.emerald SaaSMatter — digital business / subscription ----------------------------------------------------------------- Register : clean, confident, premium digital — Stripe/Linear adjacent Accent : #059669 (emerald — financial-software adjacent without literal cash green) Flavor : system theme (md-xml, hero-driven marketing site) ----------------------------------------------------------------- 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: #f8fafc; --tm-bg-dark: #022c22; /* ------------------------------------------------------------- 2. Core text colors ------------------------------------------------------------- */ --tm-text-light: #0f172a; --tm-text-dark: #ffffff; /* ------------------------------------------------------------- 3. Brand accent — primary action color ------------------------------------------------------------- */ --tm-primary: #059669; --tm-primary-hover: #047857; /* ------------------------------------------------------------- 4. Badges, code, radii, shadows, padding scale Spacing & shape tokens are intentionally identical across all themes — only color tokens vary. ------------------------------------------------------------- */ --tm-badge-bg: rgba(5,150,105,0.08); --tm-badge-bg-dark: rgba(255,255,255,0.15); --tm-code-bg: #022c22; --tm-code-text: #ecfdf5; --tm-radius-sm: 8px; --tm-radius-md: 14px; --tm-radius-lg: 20px; --tm-shadow-sm: 0 6px 20px rgba(5,150,105,0.08); --tm-shadow-md: 0 12px 32px rgba(5,150,105,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: #ecfdf5; --tm-hero-heading: #ffffff; --tm-hero-body: #d1fae5; --tm-hero-kicker: #6ee7b7; --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: #e2e8f0; --cms-table-header-bg: #f1f5f9; /* ------------------------------------------------------------- 8. CMS top navigation ------------------------------------------------------------- */ --cms-topnav-bg: #ffffff; --cms-topnav-border: 1px solid #059669; --cms-topnav-border-bottom: none; --cms-topnav-font-size: 15px; --cms-topnav-header-text-color: #475569; --cms-topnav-link-color: #059669; --cms-topnav-link-hover-color: #047857; --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 #e2e8f0; --cms-menu-toggle-color: #059669; --cms-menu-toggle-icon-color: #059669; --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 #e2e8f0; /* ------------------------------------------------------------- 11. Submenu ------------------------------------------------------------- */ --cms-submenu-width: 168px; --cms-submenu-offset-x: 160px; --cms-submenu-inner-padding-left: 15px; --cms-submenu-link-color: #059669; --cms-submenu-link-hover-color: #ffffff; --cms-submenu-link-hover-bg: #059669; --cms-deep-submenu-padding-left: 15px; /* ------------------------------------------------------------- 12. Selected menu item (current page indicator) ------------------------------------------------------------- */ --cms-selected-menu-item-bg: #d1fae5; --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: #F8F8F8; --cms-sidebar-item-margin: 0; --cms-sidebar-item-color: inherit; --cms-sidebar-item-font-size: inherit; --cms-sidebar-item-active-border-top: 1px solid #059669; --cms-sidebar-item-active-link-color: #059669; /* ------------------------------------------------------------- 15. Sidebar group label + title ------------------------------------------------------------- */ --cms-sidebar-group-label-bg: #059669; --cms-sidebar-group-label-color: #ffffff; --cms-sidebar-title-bg: #059669; --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: #0f172a; --cms-footer-text-color: #0f172a; --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: #059669; --cms-button-primary-border: #059669; --cms-button-primary-radius: initial; --cms-button-primary-hover-bg: #047857; --cms-button-success-bg: #059669; --cms-button-success-border: #059669; --cms-button-success-radius: initial; --cms-button-success-hover-bg: #047857; /* ------------------------------------------------------------- 18. CMS content typography ------------------------------------------------------------- */ --cms-heading-1-color: inherit; --cms-heading-2-color: #059669; --cms-heading-4-color: inherit; --cms-heading-5-color: inherit; --cms-body-text-color: #334155; --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: #d1fae5; --cms-person-gallery-title-color: #064e3b; } /* ================================================================= Hero gradient — dark emerald gradient; premium digital tone ================================================================= */ .tm-section-hero { background: radial-gradient(circle at top right, #064e3b 0, #022c22 45%, #020a07 100%); }