/* ================================================================= type.saas Risersoft — parent / portfolio site ----------------------------------------------------------------- Register : authoritative thesis — the company-level pitch Accent : #f97316 (sunrise warmth + deep navy chrome — DUAL ACCENT) Flavor : system theme (md-xml, hero-driven portfolio site) Notes : sunrise hero — warm orange light rising from below into navy sky; orange = action color, navy = chrome/buttons. The hero should feel like dawn, not like a navy site with an orange button. ----------------------------------------------------------------- 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: #0f172a; /* ------------------------------------------------------------- 2. Core text colors ------------------------------------------------------------- */ --tm-text-light: #111827; --tm-text-dark: #ffffff; /* ------------------------------------------------------------- 3. Brand accent — primary action color ------------------------------------------------------------- */ --tm-primary: #f97316; --tm-primary-hover: #ea580c; /* ------------------------------------------------------------- 4. Badges, code, radii, shadows, padding scale Spacing & shape tokens are intentionally identical across all themes — only color tokens vary. ------------------------------------------------------------- */ --tm-badge-bg: rgba(15,23,42,0.06); --tm-badge-bg-dark: rgba(255,255,255,0.15); --tm-code-bg: #0f172a; --tm-code-text: #f1f5f9; --tm-radius-sm: 8px; --tm-radius-md: 14px; --tm-radius-lg: 20px; --tm-shadow-sm: 0 6px 20px rgba(30,58,95,0.10); --tm-shadow-md: 0 12px 32px rgba(15,23,42,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: #fff7ed; --tm-hero-heading: #ffffff; --tm-hero-body: #fed7aa; --tm-hero-kicker: #fdba74; --tm-hero-badge-bg: rgba(255,237,213,0.12); /* ------------------------------------------------------------- 6. CMS body typography ------------------------------------------------------------- */ --cms-body-font-size: 14px; --cms-body-line-height: 26px; --cms-body-font-family: 'Droid Sans', sans-serif; /* ------------------------------------------------------------- 7. CMS tables ------------------------------------------------------------- */ --cms-table-border-color: #cbd5e1; --cms-table-header-bg: #e2e8f0; /* ------------------------------------------------------------- 8. CMS top navigation ------------------------------------------------------------- */ --cms-topnav-bg: #ffffff; --cms-topnav-border: 1px solid #ffffff; --cms-topnav-border-bottom: none; --cms-topnav-font-size: 15px; --cms-topnav-header-text-color: #6b7280; --cms-topnav-link-color: #0f172a; --cms-topnav-link-hover-color: #1e40af; --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 #ffffff; --cms-menu-toggle-color: #ffffff; --cms-menu-toggle-icon-color: #ffffff; --cms-menu-toggle-icon-offset: -8px; /* ------------------------------------------------------------- 10. Mobile menu ------------------------------------------------------------- */ --cms-mobile-menu-bg: #ffffff; --cms-mobile-menu-min-width: 161px; --cms-mobile-menu-item-border-bottom: 0px; /* ------------------------------------------------------------- 11. Submenu ------------------------------------------------------------- */ --cms-submenu-width: 168px; --cms-submenu-offset-x: 160px; --cms-submenu-inner-padding-left: 15px; --cms-submenu-link-color: #0f172a; --cms-submenu-link-hover-color: #ffffff; --cms-submenu-link-hover-bg: #1e40af; --cms-deep-submenu-padding-left: 15px; /* ------------------------------------------------------------- 12. Selected menu item (current page indicator) ------------------------------------------------------------- */ --cms-selected-menu-item-bg: #ffffff; --cms-selected-menu-item-offset: 0px; --cms-selected-menu-item-border-top: 1px solid #f97316; --cms-selected-menu-item-width: 185px; --cms-selected-menu-link-color: #1e40af; --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: 251px; --cms-sidebar-item-border: 1px solid #e5e7eb; --cms-sidebar-item-bg: #f8fafc; --cms-sidebar-item-margin: 0; --cms-sidebar-item-color: inherit; --cms-sidebar-item-font-size: inherit; --cms-sidebar-item-active-border-top: 1px solid #f97316; --cms-sidebar-item-active-link-color: #1e40af; /* ------------------------------------------------------------- 15. Sidebar group label + title ------------------------------------------------------------- */ --cms-sidebar-group-label-bg: #1e40af; --cms-sidebar-group-label-color: #ffffff; --cms-sidebar-title-bg: #1e40af; --cms-sidebar-title-color: #ffffff; --cms-sidebar-title-min-width: 251px; --cms-sidebar-title-padding-left: 0; --cms-sidebar-title-padding: 5px; --cms-sidebar-title-font-size: 20px; --cms-sidebar-title-margin: 0px; --cms-sidebar-title-margin-top: 0; /* ------------------------------------------------------------- 16. Chrome — utility + footer ------------------------------------------------------------- */ --cms-utility-text-color: #0f172a; --cms-footer-text-color: #334155; --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: #1e40af; --cms-button-primary-border: #1e40af; --cms-button-primary-radius: 17px; --cms-button-primary-hover-bg: #1e3a8a; --cms-button-success-bg: #1e40af; --cms-button-success-border: #1e40af; --cms-button-success-radius: 15px; --cms-button-success-hover-bg: #1e3a8a; /* ------------------------------------------------------------- 18. CMS content typography ------------------------------------------------------------- */ --cms-heading-1-color: #0f172a; --cms-heading-2-color: #0f172a; --cms-heading-4-color: inherit; --cms-heading-5-color: #0f172a; --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: #eaf4ef; --cms-person-gallery-title-color: #0b3d2e; } /* ================================================================= Hero gradient — layered sunrise — warm orange light rising from bottom-left through plum into navy sky ================================================================= */ .tm-section-hero { background: radial-gradient(ellipse 90% 70% at 15% 95%, rgba(249,115,22,0.55) 0%, rgba(234,88,12,0.30) 35%, transparent 70%), radial-gradient(ellipse 50% 40% at 25% 35%, rgba(253,186,116,0.18) 0%, transparent 65%), radial-gradient(ellipse 60% 50% at 90% 10%, rgba(76,29,149,0.30) 0%, transparent 70%), linear-gradient(170deg, #0c1a3a 0%, #0f172a 40%, #2d1b3d 70%, #5c2018 100%); }