/* ================================================================= type.coral TypeMatter — CMS for content creators ----------------------------------------------------------------- Register : crafted, editorial, designer-y — values typographic distinctiveness Accent : #e11d48 (rose — rare in B2B; signals 'we care about design') 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: #fafafa; --tm-bg-dark: #1c0a16; /* ------------------------------------------------------------- 2. Core text colors ------------------------------------------------------------- */ --tm-text-light: #0a0a0a; --tm-text-dark: #ffffff; /* ------------------------------------------------------------- 3. Brand accent — primary action color ------------------------------------------------------------- */ --tm-primary: #e11d48; --tm-primary-hover: #be123c; /* ------------------------------------------------------------- 4. Badges, code, radii, shadows, padding scale Spacing & shape tokens are intentionally identical across all themes — only color tokens vary. ------------------------------------------------------------- */ --tm-badge-bg: rgba(225,29,72,0.06); --tm-badge-bg-dark: rgba(255,255,255,0.15); --tm-code-bg: #1c0a16; --tm-code-text: #fdf2f8; --tm-radius-sm: 8px; --tm-radius-md: 14px; --tm-radius-lg: 20px; --tm-shadow-sm: 0 6px 20px rgba(225,29,72,0.06); --tm-shadow-md: 0 12px 32px rgba(225,29,72,0.08); --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: #fafafa; --tm-hero-heading: #fafafa; --tm-hero-body: #f5f5f4; --tm-hero-kicker: #fda4af; --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: #e7e5e4; --cms-table-header-bg: #f5f5f4; /* ------------------------------------------------------------- 8. CMS top navigation ------------------------------------------------------------- */ --cms-topnav-bg: #ffffff; --cms-topnav-border: 1px solid #e11d48; --cms-topnav-border-bottom: none; --cms-topnav-font-size: 15px; --cms-topnav-header-text-color: #57534e; --cms-topnav-link-color: #e11d48; --cms-topnav-link-hover-color: #be123c; --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 #e7e5e4; --cms-menu-toggle-color: #e11d48; --cms-menu-toggle-icon-color: #e11d48; --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 #e7e5e4; /* ------------------------------------------------------------- 11. Submenu ------------------------------------------------------------- */ --cms-submenu-width: 168px; --cms-submenu-offset-x: 160px; --cms-submenu-inner-padding-left: 15px; --cms-submenu-link-color: #e11d48; --cms-submenu-link-hover-color: #ffffff; --cms-submenu-link-hover-bg: #e11d48; --cms-deep-submenu-padding-left: 15px; /* ------------------------------------------------------------- 12. Selected menu item (current page indicator) ------------------------------------------------------------- */ --cms-selected-menu-item-bg: #f5f5f4; --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 #e11d48; --cms-sidebar-item-active-link-color: #e11d48; /* ------------------------------------------------------------- 15. Sidebar group label + title ------------------------------------------------------------- */ --cms-sidebar-group-label-bg: #e11d48; --cms-sidebar-group-label-color: #ffffff; --cms-sidebar-title-bg: #e11d48; --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: #0a0a0a; --cms-footer-text-color: #0a0a0a; --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: #e11d48; --cms-button-primary-border: #e11d48; --cms-button-primary-radius: initial; --cms-button-primary-hover-bg: #be123c; --cms-button-success-bg: #e11d48; --cms-button-success-border: #e11d48; --cms-button-success-radius: initial; --cms-button-success-hover-bg: #be123c; /* ------------------------------------------------------------- 18. CMS content typography ------------------------------------------------------------- */ --cms-heading-1-color: inherit; --cms-heading-2-color: #e11d48; --cms-heading-4-color: inherit; --cms-heading-5-color: inherit; --cms-body-text-color: #292524; --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: #ffe4e6; --cms-person-gallery-title-color: #881337; } /* ================================================================= Hero gradient — dark plum with coral edge; editorial ================================================================= */ .tm-section-hero { background: radial-gradient(circle at top right, #881337 0, #1c0a16 45%, #07020a 100%); }